/* AOPS Client Portal — portal.css */

:root {
	--aops-primary:   #1a3a8a;
	--aops-accent:    #2563eb;
	--aops-accent-h:  #1d4ed8;
	--aops-bg:        #f8faff;
	--aops-card:      #ffffff;
	--aops-border:    #dde4f0;
	--aops-text:      #1e2a3a;
	--aops-muted:     #6b7a99;
	--aops-success:   #16a34a;
	--aops-warning:   #d97706;
	--aops-danger:    #dc2626;
	--aops-purple:    #7c3aed;
	--aops-orange:    #ea580c;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

.aops-portal-page,
#aops-portal-app {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--aops-text);
	background: var(--aops-bg);
	min-height: 60vh;
	line-height: 1.6;
}

#aops-portal-root {
	max-width: 1040px;
	margin: 0 auto;
	padding: 24px 16px;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.aops-card {
	background: var(--aops-card);
	border: 1px solid var(--aops-border);
	border-radius: 12px;
	padding: 28px 32px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(26, 58, 138, .06);
}

.aops-card-sm {
	padding: 18px 22px;
}

.aops-card h2,
.aops-card h3 {
	margin: 0 0 16px;
	color: var(--aops-primary);
}

/* ── Login ───────────────────────────────────────────────────────────────── */

.aops-login-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	padding: 24px;
}

.aops-login-card {
	background: var(--aops-card);
	border: 1px solid var(--aops-border);
	border-radius: 16px;
	padding: 40px 44px;
	width: 100%;
	max-width: 420px;
	box-shadow: 0 4px 24px rgba(26, 58, 138, .10);
	text-align: center;
}

.aops-login-card .aops-logo {
	max-height: 52px;
	margin-bottom: 18px;
}

.aops-login-card h2 {
	font-size: 1.5rem;
	color: var(--aops-primary);
	margin: 0 0 6px;
}

.aops-login-card .aops-login-subtitle {
	color: var(--aops-muted);
	margin: 0 0 24px;
	font-size: .92rem;
}

.aops-login-tabs {
	display: flex;
	gap: 4px;
	background: var(--aops-bg);
	border-radius: 8px;
	padding: 3px;
	margin-bottom: 20px;
}

.aops-login-tab-btn {
	flex: 1;
	border: none;
	background: transparent;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	color: var(--aops-muted);
	transition: all .15s;
}

.aops-login-tab-btn.active {
	background: var(--aops-card);
	color: var(--aops-primary);
	box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.aops-login-form-group {
	margin-bottom: 14px;
	text-align: left;
}

.aops-login-form-group label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	color: var(--aops-muted);
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ── Forms / Inputs ──────────────────────────────────────────────────────── */

.aops-input {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid var(--aops-border);
	border-radius: 8px;
	font-size: .95rem;
	color: var(--aops-text);
	background: #fff;
	box-sizing: border-box;
	transition: border-color .15s;
}

.aops-input:focus {
	outline: none;
	border-color: var(--aops-accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

textarea.aops-input {
	resize: vertical;
	min-height: 100px;
}

select.aops-input {
	cursor: pointer;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.aops-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	border-radius: 8px;
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: background .15s, transform .1s;
}

.aops-btn:hover { opacity: .9; transform: translateY(-1px); }
.aops-btn:active { transform: translateY(0); }

.aops-btn-primary {
	background: var(--aops-accent);
	color: #fff;
}

.aops-btn-primary:hover { background: var(--aops-accent-h); color: #fff; }

.aops-btn-secondary {
	background: var(--aops-bg);
	color: var(--aops-primary);
	border: 1.5px solid var(--aops-border);
}

.aops-btn-danger { background: var(--aops-danger); color: #fff; }
.aops-btn-ghost  { background: transparent; color: var(--aops-accent); padding: 6px 12px; }

.aops-btn-block { width: 100%; justify-content: center; }

/* ── Portal shell ────────────────────────────────────────────────────────── */

.aops-portal-wrap {
	display: flex;
	flex-direction: column;
	min-height: 70vh;
}

.aops-portal-header {
	background: var(--aops-primary);
	color: #fff;
	padding: 14px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 12px 12px 0 0;
	margin-bottom: 0;
}

.aops-portal-header .aops-logo { max-height: 36px; filter: brightness(0) invert(1); }

.aops-portal-header-title {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.aops-portal-header-user {
	font-size: .85rem;
	color: rgba(255,255,255,.75);
}

.aops-portal-body {
	display: flex;
	background: var(--aops-card);
	border: 1px solid var(--aops-border);
	border-top: none;
	border-radius: 0 0 12px 12px;
	min-height: 520px;
}

/* ── Sidebar nav ─────────────────────────────────────────────────────────── */

.aops-portal-nav {
	width: 200px;
	min-width: 200px;
	background: #f0f4ff;
	border-right: 1px solid var(--aops-border);
	border-radius: 0 0 0 12px;
	padding: 16px 10px;
}

.aops-portal-nav button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 14px;
	background: transparent;
	border: none;
	border-radius: 8px;
	font-size: .9rem;
	font-weight: 500;
	color: var(--aops-text);
	cursor: pointer;
	text-align: left;
	transition: background .13s, color .13s;
	margin-bottom: 2px;
}

.aops-portal-nav button:hover { background: #dde8ff; color: var(--aops-primary); }
.aops-portal-nav button.active { background: var(--aops-accent); color: #fff; font-weight: 700; }

.aops-portal-nav .aops-nav-icon { font-size: 1.05rem; width: 20px; text-align: center; }

.aops-portal-nav-divider {
	border: none;
	border-top: 1px solid var(--aops-border);
	margin: 12px 4px;
}

/* ── Content area ────────────────────────────────────────────────────────── */

.aops-portal-content {
	flex: 1;
	padding: 28px 32px;
	overflow: auto;
}

.aops-portal-content h2 {
	margin: 0 0 20px;
	color: var(--aops-primary);
	font-size: 1.3rem;
}

/* ── Stats grid ──────────────────────────────────────────────────────────── */

.aops-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 24px;
}

.aops-stat-card {
	background: var(--aops-bg);
	border: 1px solid var(--aops-border);
	border-radius: 10px;
	padding: 18px 20px;
	text-align: center;
}

.aops-stat-value {
	font-size: 1.7rem;
	font-weight: 800;
	color: var(--aops-primary);
	line-height: 1.1;
}

.aops-stat-label {
	font-size: .78rem;
	color: var(--aops-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-top: 4px;
}

/* ── Timeline ────────────────────────────────────────────────────────────── */

.aops-timeline-wrap {
	margin: 24px 0;
	overflow-x: auto;
}

.aops-timeline {
	display: flex;
	align-items: flex-start;
	gap: 0;
	min-width: 560px;
}

.aops-timeline-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.aops-timeline-step::before {
	content: '';
	position: absolute;
	top: 11px;
	left: calc(-50% + 10px);
	right: calc(50% + 10px);
	height: 2px;
	background: var(--aops-border);
	z-index: 0;
}

.aops-timeline-step:first-child::before { display: none; }

.aops-timeline-step.done::before  { background: var(--aops-accent); }
.aops-timeline-step.current::before { background: var(--aops-accent); }

.aops-tl-dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--aops-border);
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--aops-border);
	z-index: 1;
	position: relative;
	transition: background .2s;
}

.aops-timeline-step.done .aops-tl-dot {
	background: var(--aops-accent);
	box-shadow: 0 0 0 2px var(--aops-accent);
}

.aops-timeline-step.current .aops-tl-dot {
	background: var(--aops-accent);
	box-shadow: 0 0 0 3px rgba(37,99,235,.25), 0 0 0 2px var(--aops-accent);
	animation: aops-tl-pulse 1.8s infinite;
}

@keyframes aops-tl-pulse {
	0%   { box-shadow: 0 0 0 2px var(--aops-accent), 0 0 0 5px rgba(37,99,235,.15); }
	50%  { box-shadow: 0 0 0 2px var(--aops-accent), 0 0 0 10px rgba(37,99,235,.05); }
	100% { box-shadow: 0 0 0 2px var(--aops-accent), 0 0 0 5px rgba(37,99,235,.15); }
}

.aops-tl-label {
	margin-top: 8px;
	font-size: .72rem;
	font-weight: 600;
	color: var(--aops-muted);
	text-align: center;
	line-height: 1.3;
	padding: 0 4px;
}

.aops-timeline-step.done .aops-tl-label,
.aops-timeline-step.current .aops-tl-label {
	color: var(--aops-accent);
}

/* ── Status badges ───────────────────────────────────────────────────────── */

.aops-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: .76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.aops-badge-new,
.aops-badge-pending           { background: #fef9c3; color: #854d0e; }
.aops-badge-payment_received,
.aops-badge-in_progress       { background: #dbeafe; color: #1e40af; }
.aops-badge-qc,
.aops-badge-revision          { background: #ffedd5; color: #9a3412; }
.aops-badge-completed         { background: #dcfce7; color: #166534; }
.aops-badge-delivered,
.aops-badge-paid              { background: #ede9fe; color: #5b21b6; }
.aops-badge-overdue,
.aops-badge-failed            { background: #fee2e2; color: #991b1b; }
.aops-badge-draft             { background: #f1f5f9; color: #475569; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.aops-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
}

.aops-table th {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 2px solid var(--aops-border);
	color: var(--aops-muted);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 700;
}

.aops-table td {
	padding: 12px 12px;
	border-bottom: 1px solid var(--aops-border);
	vertical-align: middle;
}

.aops-table tbody tr:last-child td { border-bottom: none; }

.aops-table tbody tr:hover { background: rgba(37, 99, 235, .03); }

.aops-table a {
	color: var(--aops-accent);
	text-decoration: none;
}

.aops-table a:hover { text-decoration: underline; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */

.aops-alert {
	padding: 14px 18px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-size: .9rem;
}

.aops-alert-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.aops-alert-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.aops-alert-info    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

/* ── Loading / Spinner ───────────────────────────────────────────────────── */

.aops-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	color: var(--aops-muted);
}

.aops-spinner {
	width: 36px;
	height: 36px;
	border: 3px solid var(--aops-border);
	border-top-color: var(--aops-accent);
	border-radius: 50%;
	animation: aops-spin .7s linear infinite;
	margin-bottom: 12px;
}

@keyframes aops-spin { to { transform: rotate(360deg); } }

/* ── Order tracking page ─────────────────────────────────────────────────── */

.aops-track-wrap {
	max-width: 780px;
	margin: 0 auto;
	padding: 24px 16px 40px;
}





.aops-track-card {
	background: var(--aops-card);
	border: 1px solid var(--aops-border);
	border-radius: 12px;
	padding: 24px 28px;
	margin-bottom: 18px;
	box-shadow: 0 1px 4px rgba(26,58,138,.06);
}

.aops-track-card h3 { margin: 0 0 14px; color: var(--aops-primary); }

.aops-track-meta {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
}

.aops-track-field { display: flex; flex-direction: column; gap: 2px; }

.aops-track-label {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--aops-muted);
}

.aops-track-value { font-size: .96rem; font-weight: 600; color: var(--aops-text); }

.aops-track-status-badge {
	display: block;
	text-align: center;
	margin-top: 16px;
	font-size: .9rem;
	padding: 8px 18px;
}

.aops-track-pay-cta { text-align: center; }
.aops-track-pay-cta p { margin: 0 0 12px; color: var(--aops-muted); }

.aops-track-portal-cta {
	text-align: center;
	color: var(--aops-muted);
	font-size: .88rem;
	margin-top: 12px;
}

.aops-track-portal-cta a { color: var(--aops-accent); }

.aops-track-no-token {
	max-width: 480px;
	margin: 40px auto;
	text-align: center;
	color: var(--aops-muted);
}

/* ── File list ───────────────────────────────────────────────────────────── */

.aops-file-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.aops-file-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--aops-border);
	border-radius: 8px;
	margin-bottom: 8px;
	background: var(--aops-card);
}

.aops-file-icon { font-size: 1.5rem; width: 28px; text-align: center; }
.aops-file-name { flex: 1; font-size: .9rem; font-weight: 500; }
.aops-file-meta { font-size: .78rem; color: var(--aops-muted); }

/* ── Profile form ────────────────────────────────────────────────────────── */

.aops-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}

.aops-form-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.aops-form-group label {
	font-size: .8rem;
	font-weight: 700;
	color: var(--aops-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.aops-empty {
	text-align: center;
	padding: 48px 20px;
	color: var(--aops-muted);
}

.aops-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }
.aops-empty h3   { color: var(--aops-text); margin: 0 0 8px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.aops-stats { grid-template-columns: 1fr 1fr; }

	.aops-portal-body { flex-direction: column; }

	.aops-portal-nav {
		width: auto;
		min-width: auto;
		display: flex;
		gap: 4px;
		overflow-x: auto;
		padding: 10px;
		border-right: none;
		border-bottom: 1px solid var(--aops-border);
		border-radius: 0;
	}

	.aops-portal-nav button {
		white-space: nowrap;
		flex-shrink: 0;
		padding: 8px 14px;
	}

	.aops-portal-nav-divider { display: none; }

	.aops-portal-content { padding: 18px 16px; }

	.aops-login-card { padding: 28px 20px; }

	.aops-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.aops-stats { grid-template-columns: 1fr; }
	.aops-timeline { min-width: 360px; }
}

/* ── Order tracking: status-only layout ─────────────────────────────────────
   Added with the strip that removed name, service, amount, payment badge and
   the invoice button. The heading colour and centring live here, in the
   plugin, rather than on the WordPress page: maybe_create_pages() rewrites
   that page's content whenever Re-create Portal Pages is used, so any styling
   applied by hand there is lost without warning. --aops-primary is overridden
   from the Primary Color setting in Plugin::assets(). */




/* Order number and expected date, side by side and centred. */
.aops-track-ident {
	display: flex;
	justify-content: center;
	gap: 48px;
	flex-wrap: wrap;
	text-align: center;
}

.aops-track-ident .aops-track-label {
	display: block;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--aops-muted);
	margin-bottom: 4px;
}

.aops-track-ident .aops-track-value {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--aops-primary);
}

/* History is two columns and unheaded — it reads as a list of dates, which is
   all it now contains. */
.aops-track-history { width: 100%; }
.aops-track-history td { padding: 7px 0; border: 0; font-size: .9rem; }
.aops-track-history tr + tr td { border-top: 1px solid var(--aops-border); }
.aops-track-when { text-align: right; color: var(--aops-muted); white-space: nowrap; }

.aops-track-no-token { text-align: center; padding: 28px 16px; }
.aops-track-muted { color: var(--aops-muted); font-size: .85rem; }

/* Enquiry received, not yet quoted. A stated position rather than an order
   card with every value blank — see track_pending(). */




/* Breathing room above the step row. The base rule (.aops-timeline-wrap,
   margin: 24px 0) is shared with the portal SPA, so the extra space is scoped
   to the tracking page rather than widened there — changing the base would move
   every timeline in the portal at the same time.
   Margins do not collapse through the flex/overflow context here, so this adds
   to the 24px rather than replacing it. */
.aops-track-wrap .aops-timeline-wrap {
	margin-top: 44px;
	padding-top: 8px;
}

@media (max-width: 640px) {
	.aops-track-wrap .aops-timeline-wrap { margin-top: 32px; }
}


/* ── Tracking page: one heading, and the stage named in words ───────────────
   Rewritten 19 Aug 2026. The logo is gone, the .aops-track-header wrapper with
   it, and "Order Status" is the only heading — carrying the styling the company
   name used to have, so the page keeps the same visual weight at the top.
   The retired rules (.aops-track-header/-logo/-company/-title/-title-below and
   the pending tick card) were deleted rather than left: each was verified unused
   in both PHP renders and in portal.js first. */

.aops-track-heading {
	text-align: center;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--aops-primary);
	letter-spacing: -.01em;
	margin: 0 0 28px;
}


/* Supporting line — what happens next. Muted, so it reads as context for the
   stage above rather than competing with it. */
.aops-track-next {
	text-align: center;
	font-size: .9rem;
	color: var(--aops-muted);
	margin: 8px auto 0;
	max-width: 30rem;
	line-height: 1.5;
}

/* The pending page's single ident field, so it sits like the order page's pair. */
.aops-track-received { text-align: center; }

@media (max-width: 640px) {
	.aops-track-heading { font-size: 1.2rem; margin-bottom: 22px; }
}

/* The current stage as a block, not a caption. It is the answer the page exists
   to give, so it is the one element with a filled background.

   Three tones rather than one per stage: the client is reading "finished / being
   worked on / waiting", not a colour code, and eight classes would be eight more
   things to keep in step with the stage list. stage_tone() defaults to the
   neutral tone, so an unrecognised stage can never come out green — a client
   shown green for a job that is not done will act on it. */

.aops-track-current-wrap {
	text-align: center;
	margin: 6px 0 0;
}

.aops-track-pill {
	display: inline-block;
	padding: 11px 26px;
	border-radius: 999px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	border: 1px solid transparent;
}

/* Delivered, Completed */
.aops-track-pill-done {
	background: #e8f7ee;
	border-color: #b7e4c7;
	color: #14713c;
}

/* In Progress, Quality Check, Revision */
.aops-track-pill-active {
	background: #fff5e6;
	border-color: #fadfae;
	color: #92600e;
}

/* Received, Quoted, Payment Received — nothing is being worked on yet */
.aops-track-pill-early {
	background: #eef2fb;
	border-color: #d5dff2;
	color: #2f4374;
}

@media (max-width: 640px) {
	.aops-track-pill { font-size: 1rem; padding: 9px 20px; }
}