/*
 * Raza E-Service Pakistan — portal & office design system.
 * Everything is scoped to .rzp-app (signed-in app layout) or .rzp-auth (sign-in pages) so the
 * marketing theme's serif headings, pill buttons and 17px body text never leak into dashboards.
 */

:root {
	--rz-navy-950: #06142b;
	--rz-navy-900: #0b1f3a;
	--rz-navy-800: #122a4d;
	--rz-navy-700: #1b3a66;
	--rz-navy-50: #eef2f8;
	--rz-gold: #c19a4b;
	--rz-gold-600: #a8823a;
	--rz-gold-text: #7a5b1b;
	--rz-gold-50: #faf5ea;
	--rz-bg: #f4f6f9;
	--rz-surface: #ffffff;
	--rz-surface-2: #f8fafc;
	--rz-ink: #101828;
	--rz-text: #344054;
	--rz-muted: #5d6b7e;
	--rz-line: #e4e8ee;
	--rz-line-strong: #cfd6e0;
	--rz-success: #067647;
	--rz-success-bg: #ecfdf3;
	--rz-warning: #93370d;
	--rz-warning-bg: #fffaeb;
	--rz-danger: #b42318;
	--rz-danger-bg: #fef3f2;
	--rz-info: #175cd3;
	--rz-info-bg: #eff8ff;
	--rz-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rz-mono: ui-monospace, "SF Mono", Consolas, monospace;
	--rz-radius: 12px;
	--rz-radius-sm: 8px;
	--rz-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
	--rz-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
	--rz-focus: 0 0 0 3px rgba(193, 154, 75, .55);
	--rz-sidebar: 256px;
	--rz-topbar: 60px;
}

/* ---------- Base (app + auth) ---------- */
body.rzp-app-body { background: var(--rz-bg); }
.rzp-app, .rzp-auth { font-family: var(--rz-font); font-size: 15px; line-height: 1.55; color: var(--rz-text); }
.rzp-app *, .rzp-auth * { box-sizing: border-box; }
.rzp-app h1, .rzp-app h2, .rzp-app h3, .rzp-app h4, .rzp-auth h1, .rzp-auth h2 {
	font-family: var(--rz-font); color: var(--rz-ink); letter-spacing: -.01em; margin: 0 0 .5em; font-weight: 650;
}
.rzp-app h1 { font-size: 1.5rem; line-height: 1.25; }
.rzp-app h2 { font-size: 1.0625rem; line-height: 1.35; }
.rzp-app h3 { font-size: .975rem; line-height: 1.4; margin-top: 18px; }
.rzp-app h4 { font-size: .9rem; }
.rzp-app p { margin: 0 0 .75em; }
.rzp-app a { color: var(--rz-navy-700); text-underline-offset: 2px; }
.rzp-app a:hover { color: var(--rz-navy-900); }
.rzp-app :focus-visible, .rzp-auth :focus-visible { outline: none; box-shadow: var(--rz-focus); border-radius: 6px; }
.rzp-app code { font-family: var(--rz-mono); font-size: .9em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rzp-ico { width: 20px; height: 20px; flex: none; }
.req { color: var(--rz-danger); }

/* ---------- App layout ---------- */
.rzp-app { display: grid; grid-template-columns: var(--rz-sidebar) minmax(0, 1fr); min-height: 100vh; }
.rzp-skip { position: absolute; left: 12px; top: -48px; z-index: 200; padding: 8px 14px; background: var(--rz-navy-900); color: #fff !important; border-radius: 8px; }
.rzp-skip:focus { top: 12px; }

.rzp-sidebar {
	position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
	background: var(--rz-navy-950); color: #c6d0de; border-right: 1px solid rgba(255, 255, 255, .06);
}
.rzp-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 12px; }
.rzp-brand { display: flex; align-items: center; gap: 10px; color: #fff !important; text-decoration: none; font-weight: 650; font-size: .95rem; line-height: 1.25; }
.rzp-brand img { width: 36px; height: 36px; border-radius: 8px; background: #fff; object-fit: contain; flex: none; }
.rzp-nav { flex: 1; overflow-y: auto; padding: 4px 10px 12px; }
.rzp-nav-group { margin: 14px 10px 6px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7f8ea6; }
.rzp-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rzp-nav a, .rzp-nav-btn {
	display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px;
	border: 0; border-radius: 8px; background: none; color: #c6d0de !important; text-decoration: none;
	font: 500 .9rem/1.3 var(--rz-font); cursor: pointer; text-align: left;
}
.rzp-nav a:hover, .rzp-nav-btn:hover { background: rgba(255, 255, 255, .07); color: #fff !important; }
.rzp-nav a[aria-current="page"] { background: rgba(193, 154, 75, .16); color: #fff !important; box-shadow: inset 3px 0 0 var(--rz-gold); }
.rzp-nav a[aria-current="page"] .rzp-ico { color: var(--rz-gold); }
.rzp-sidebar-foot { padding: 12px 10px 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.rzp-me { display: flex; align-items: center; gap: 10px; padding: 4px 10px 10px; min-width: 0; }
.rzp-me strong, .rzp-topbar-me strong { display: block; color: #fff; font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rzp-me small, .rzp-topbar-me small { display: block; color: #9fb0c6; font-size: .76rem; }
.rzp-me > span:last-child { min-width: 0; }
.rzp-initials { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--rz-gold); color: var(--rz-navy-950); font-weight: 700; font-size: .8rem; }
.rzp-logout { margin: 0; }
.rzp-sidebar-foot .rzp-nav-btn { color: #c6d0de; }
.rzp-sidebar .rzp-drawer-close { display: none; color: #fff !important; }
.rzp-backdrop { display: none; }

.rzp-content { min-width: 0; display: flex; flex-direction: column; }
.rzp-topbar {
	position: sticky; top: 0; z-index: 30; height: var(--rz-topbar); display: flex; align-items: center; gap: 12px;
	padding: 0 24px; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--rz-line); backdrop-filter: blur(6px);
}
.admin-bar .rzp-topbar, .admin-bar .rzp-sidebar { top: 32px; }
.admin-bar .rzp-sidebar { height: calc(100vh - 32px); }
.rzp-topbar-title { flex: 1; min-width: 0; margin: 0 !important; font-size: .9rem; color: var(--rz-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rzp-topbar-title span:last-child { color: var(--rz-ink); font-weight: 600; }
.rzp-topbar-actions { display: flex; align-items: center; gap: 6px; }
.rzp-icon-btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 40px; padding: 0 10px;
	border: 1px solid transparent; border-radius: 8px; background: none; color: var(--rz-text) !important; text-decoration: none; font: 500 .88rem var(--rz-font); cursor: pointer;
}
.rzp-icon-btn:hover { background: var(--rz-surface-2); border-color: var(--rz-line); }
.rzp-icon-btn .rzp-count { position: absolute; top: 3px; right: 2px; }
.rzp-menu-btn { display: none; }
.rzp-topbar-me { display: flex; align-items: center; gap: 8px; padding-left: 8px; margin-left: 4px; border-left: 1px solid var(--rz-line); }
.rzp-topbar-me strong { color: var(--rz-ink); max-width: 180px; }
.rzp-topbar-me small { color: var(--rz-muted); }
.rzp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--rz-gold); color: var(--rz-navy-950); font-size: .7rem; font-weight: 700; line-height: 1; }

.rzp-main { width: 100%; max-width: 1320px; padding: 24px 28px 64px; outline: none; }
.rzp-main:focus { box-shadow: none; }
.rzp-main [id] { scroll-margin-top: calc(var(--rz-topbar) + 16px); }

/* ---------- Page header ---------- */
.rzp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 4px 0 20px; }
.rzp-head > div:first-child, .rzp-head > h1:first-child { min-width: 0; flex: 1 1 320px; }
.rzp-head h1 { margin-bottom: 4px; overflow-wrap: anywhere; }
.rzp-head p { margin: 0; color: var(--rz-muted); }
.rzp-head .btn-row, .rzp-head > a.btn, .rzp-head > form { flex: none; }
.rzp-back { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; margin-bottom: 6px; text-decoration: none; color: var(--rz-muted) !important; }
.rzp-back:hover { color: var(--rz-navy-900) !important; }
.rzp-muted { color: var(--rz-muted); font-size: .9rem; }
.rzp-help { color: var(--rz-muted); font-size: .84rem; margin: 6px 0 0; line-height: 1.45; }
.rzp-meta { font-size: .92rem; }

/* ---------- Buttons (override the marketing pills inside the app) ---------- */
.rzp-app .btn, .rzp-auth .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px;
	border-radius: var(--rz-radius-sm); border: 1px solid transparent; font: 600 .9rem/1.2 var(--rz-font); text-decoration: none; cursor: pointer;
	transform: none; box-shadow: none; transition: background-color .15s, border-color .15s, color .15s;
}
.rzp-app .btn:hover, .rzp-auth .btn:hover { transform: none; }
.rzp-app .btn-sm, .rzp-auth .btn-sm { min-height: 36px; padding: 6px 14px; font-size: .86rem; }
.rzp-app .btn-xs { min-height: 32px; padding: 4px 10px; font-size: .8rem; }
.rzp-app .btn-navy, .rzp-auth .btn-navy { background: var(--rz-navy-900); color: #fff; }
.rzp-app .btn-navy:hover, .rzp-auth .btn-navy:hover { background: var(--rz-navy-700); color: #fff; }
.rzp-app .btn-gold, .rzp-auth .btn-gold { background: var(--rz-gold); color: var(--rz-navy-950); }
.rzp-app .btn-gold:hover, .rzp-auth .btn-gold:hover { background: #cfac63; color: var(--rz-navy-950); box-shadow: none; }
.btn-outline, .rzp-app .btn-outline { background: var(--rz-surface); border-color: var(--rz-line-strong); color: var(--rz-ink); }
.btn-outline:hover, .rzp-app .btn-outline:hover { background: var(--rz-surface-2); border-color: var(--rz-navy-700); color: var(--rz-ink); }
.rzp-app .btn-danger { background: var(--rz-surface); border-color: #f1b5af; color: var(--rz-danger); }
.rzp-app .btn-danger:hover { background: var(--rz-danger-bg); }
.rzp-app .btn[disabled], .rzp-auth .btn[disabled] { opacity: .65; cursor: wait; }
.rzp-app .btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rzp-link-btn { background: none; border: 0; padding: 4px 6px; color: var(--rz-navy-700); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* ---------- Panels, cards ---------- */
.rzp-panel { background: var(--rz-surface); border: 1px solid var(--rz-line); border-radius: var(--rz-radius); padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--rz-shadow); min-width: 0; }
.rzp-panel > h2:first-child { margin-bottom: 14px; }
.rzp-panel > summary, .rzp-sub > summary { cursor: pointer; font-weight: 650; color: var(--rz-ink); }
.rzp-panel[open] > summary { margin-bottom: 14px; }
.rzp-sub { margin-top: 14px; border-top: 1px dashed var(--rz-line); padding-top: 12px; }
.rzp-sub > summary { font-weight: 600; font-size: .9rem; color: var(--rz-navy-700); }
.rzp-panel-warn { border-left: 4px solid #dc6803; }
.rzp-panel-success { border-left: 4px solid var(--rz-success); }
.rzp-grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.rzp-grid-2 > * { min-width: 0; }
.rzp-grid-2 > .rzp-panel { margin-bottom: 18px; }

/* ---------- Metric cards ---------- */
.rzp-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.rzp-stat {
	display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px;
	background: var(--rz-surface); border: 1px solid var(--rz-line); border-radius: var(--rz-radius); box-shadow: var(--rz-shadow);
	color: var(--rz-muted); font-size: .84rem; font-weight: 500; line-height: 1.35; text-decoration: none;
}
.rzp-stat > span:first-child { order: -1; font: 700 1.6rem/1.15 var(--rz-font); color: var(--rz-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow-wrap: anywhere; }
.rzp-stats-lg .rzp-stat > span:first-child { font-size: 1.75rem; }
a.rzp-stat { color: var(--rz-muted) !important; transition: border-color .15s, box-shadow .15s; }
a.rzp-stat:hover { border-color: var(--rz-gold); box-shadow: 0 0 0 3px var(--rz-gold-50); }
.rzp-stat-warn { border-left: 3px solid #dc6803; }
.rzp-stat-warn > span:first-child { color: #b54708; }
.rzp-delta { display: block; margin-top: 4px; font: 500 .76rem/1.35 var(--rz-font); color: var(--rz-muted); }
.rzp-delta.up { color: var(--rz-success); }
.rzp-delta.down { color: var(--rz-danger); }

/* ---------- Badges & notices ---------- */
.rzp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: .74rem; font-weight: 600; line-height: 1.6; white-space: nowrap; background: #eef1f5; color: #344054; border: 1px solid transparent; vertical-align: middle; }
.rzp-badge-neutral { background: #f2f4f7; color: #344054; border-color: #e4e7ec; }
.rzp-badge-info { background: #eff4ff; color: #1b3a8a; border-color: #d1e0ff; }
.rzp-badge-warning { background: #fffaeb; color: #93370d; border-color: #fedf89; }
.rzp-badge-progress { background: #f4f3ff; color: #4a1fb8; border-color: #d9d6fe; }
.rzp-badge-success { background: #ecfdf3; color: #05603a; border-color: #abefc6; }
.rzp-badge-danger { background: #fef3f2; color: #912018; border-color: #fecdca; }
.rzp-badge-muted { background: #f2f4f7; color: #5d6b7e; border-color: #e4e7ec; }

.rzp-notice { padding: 11px 14px; border-radius: var(--rz-radius-sm); margin: 0 0 14px; font-size: .9rem; overflow-wrap: anywhere; border: 1px solid; }
.rzp-notice-success { background: var(--rz-success-bg); border-color: #abefc6; color: #05603a; }
.rzp-notice-error { background: var(--rz-danger-bg); border-color: #fecdca; color: #912018; }
.rzp-notice-warning { background: var(--rz-warning-bg); border-color: #fedf89; color: var(--rz-warning); }
.rzp-notice-info { background: var(--rz-info-bg); border-color: #b2ddff; color: var(--rz-info); }
.rzp-notice a { color: inherit; font-weight: 600; }

.rzp-empty { text-align: center; padding: 32px 20px; background: var(--rz-surface); border: 1px dashed var(--rz-line-strong); border-radius: var(--rz-radius); color: var(--rz-muted); font-size: .9rem; }
.rzp-empty-title { font-weight: 650; color: var(--rz-ink); font-size: 1rem; margin-bottom: 4px !important; }
.rzp-empty .btn { margin-top: 8px; }

/* ---------- Tables ---------- */
.rzp-table-wrap { overflow-x: auto; border: 1px solid var(--rz-line); border-radius: var(--rz-radius-sm); background: var(--rz-surface); -webkit-overflow-scrolling: touch; }
.rzp-panel .rzp-table-wrap { margin: 0 -1px; }
.rzp-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.rzp-table th, .rzp-table td { padding: 10px 14px; border-bottom: 1px solid var(--rz-line); text-align: left; vertical-align: middle; }
.rzp-table tbody tr:last-child td { border-bottom: 0; }
.rzp-table th { position: sticky; top: 0; font-size: .74rem; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--rz-muted); background: var(--rz-surface-2); white-space: nowrap; }
.rzp-table tbody tr:hover td { background: #fbfcfd; }
.rzp-table td { overflow-wrap: anywhere; }
/* Short identifiers, statuses, dates and amounts stay on one line; names and titles wrap. */
.rzp-table td[data-label="Order"], .rzp-table td[data-label="Ticket"], .rzp-table td[data-label="Invoice"], .rzp-table td[data-label="Reference"],
.rzp-table td[data-label="Status"], .rzp-table td[data-label="Payment"], .rzp-table td[data-label="Due"], .rzp-table td[data-label="Submitted"],
.rzp-table td[data-label="Updated"], .rzp-table td[data-label="Date"], .rzp-table td[data-label="When"], .rzp-table td[data-label="Amount"],
.rzp-table td[data-label="Total"], .rzp-table td[data-label="Paid"], .rzp-table td[data-label="Balance"], .rzp-table td[data-label="Price"], .rzp-table td[data-label="Action"], .rzp-table td[data-label="Actions"] { white-space: nowrap; overflow-wrap: normal; }
.rzp-table td[data-label="Customer"], .rzp-table td[data-label="Service"], .rzp-table td[data-label="Subject"], .rzp-table td[data-label="Name"] { min-width: 140px; }
.rzp-table .num, .rzp-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rzp-table .center { text-align: center; }
.rzp-table tr.rzp-urgent td:first-child { box-shadow: inset 3px 0 0 var(--rz-danger); }
.rzp-total td { font-weight: 700; border-top: 2px solid var(--rz-navy-900); }
.rzp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rzp-table td.rzp-actions { display: table-cell; white-space: nowrap; }
.rzp-table td.rzp-actions > * { display: inline-flex; vertical-align: middle; margin: 0 4px 0 0; }
.rzp-matrix td:first-child { min-width: 240px; }
.rzp-result-count { margin: 0 0 10px; font-size: .85rem; color: var(--rz-muted); }

/* ---------- Forms ---------- */
.rzp-form .rzp-field, .rzp-field { margin-bottom: 14px; min-width: 0; }
.rzp-field > label, .rzp-field > legend { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 6px; color: var(--rz-ink); }
fieldset.rzp-field, .rzp-step, .rzp-new-customer { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.rzp-step > legend, .rzp-new-customer > legend { font: 650 1rem var(--rz-font); color: var(--rz-ink); margin-bottom: 12px; }
.rzp-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .rzp-field select, .rzp-field textarea,
.rzp-filters input, .rzp-filters select, .rzp-inline select, .rzp-line input, .rzp-section-row input[type="number"] {
	width: 100%; min-height: 40px; padding: 8px 12px; font: 400 .9rem/1.4 var(--rz-font); color: var(--rz-ink);
	background: var(--rz-surface); border: 1px solid var(--rz-line-strong); border-radius: var(--rz-radius-sm); box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.rzp-field textarea { min-height: 88px; resize: vertical; }
.rzp-field input:focus, .rzp-field select:focus, .rzp-field textarea:focus, .rzp-filters input:focus, .rzp-filters select:focus, .rzp-line input:focus {
	outline: none; border-color: var(--rz-navy-700); box-shadow: 0 0 0 3px rgba(27, 58, 102, .15);
}
.rzp-field input:disabled, .rzp-field input[readonly] { background: var(--rz-surface-2); color: var(--rz-muted); }
.rzp-field input[aria-invalid="true"], .rzp-field select[aria-invalid="true"], .rzp-field textarea[aria-invalid="true"] { border-color: var(--rz-danger); }
.rzp-field input[type="file"] { display: block; padding: 6px 0; font-size: .86rem; max-width: 100%; }
.rzp-check { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 14px; font-size: .9rem; }
.rzp-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--rz-navy-900); }
.rzp-grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; align-items: end; }
.rzp-grid-form .rzp-step-nav { grid-column: 1 / -1; }
.rzp-inline { display: inline-flex; gap: 6px; align-items: center; margin: 0 4px 6px 0; vertical-align: middle; }
.rzp-inline select { width: auto; min-height: 34px; padding: 4px 8px; }
.rzp-inline-form { margin-top: 12px; }
.rzp-step-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }

.rzp-filters {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; align-items: end;
	background: var(--rz-surface); border: 1px solid var(--rz-line); border-radius: var(--rz-radius); padding: 14px 16px 2px; margin-bottom: 12px; box-shadow: var(--rz-shadow);
}
.rzp-filters .rzp-field > label { font-size: .78rem; color: var(--rz-muted); }
.rzp-filter-actions { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; font-size: .88rem; }

/* ---------- Tabs, pagination ---------- */
.rzp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rz-line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: thin; }
.rzp-tabs a { flex: none; padding: 10px 12px; text-decoration: none; color: var(--rz-muted) !important; font-weight: 600; font-size: .88rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.rzp-tabs a:hover { color: var(--rz-ink) !important; }
.rzp-tabs a[aria-selected="true"] { color: var(--rz-ink) !important; border-bottom-color: var(--rz-gold); }
.rzp-pages { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.rzp-pages a, .rzp-pages span { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border: 1px solid var(--rz-line); border-radius: 8px; background: var(--rz-surface); text-decoration: none; font-size: .86rem; }
.rzp-pages span { background: var(--rz-navy-900); border-color: var(--rz-navy-900); color: #fff; }

/* ---------- Auth pages (inside the marketing site) ---------- */
.rzp-auth { max-width: 480px; margin: 0 auto; padding: 48px 16px 72px; }
.rzp-card { background: var(--rz-surface); border: 1px solid var(--rz-line); border-top: 3px solid var(--rz-navy-900); border-radius: var(--rz-radius); padding: clamp(22px, 4vw, 36px); box-shadow: var(--rz-shadow-lg); }
.rzp-card h1 { font-size: 1.5rem; }
.rzp-auth-links { font-size: .88rem; margin-top: 16px; }
.rzp-auth-note { text-align: center; color: var(--rz-muted); font-size: .82rem; margin-top: 16px; }
.rzp-auth .rzp-field input:not([type="checkbox"]) { min-height: 44px; }
.rzp-auth .btn-navy { width: 100%; min-height: 44px; }

/* ---------- Orders ---------- */
.rzp-progress { list-style: none; display: flex; padding: 0; margin: 0 0 18px; counter-reset: s; }
.rzp-progress li { flex: 1; position: relative; padding-top: 30px; font-size: .76rem; text-align: center; color: var(--rz-muted); }
.rzp-progress li::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: #e5e9f0; color: var(--rz-muted); font-weight: 700; line-height: 24px; z-index: 1; }
.rzp-progress li::after { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: #e5e9f0; }
.rzp-progress li:first-child::after { display: none; }
.rzp-progress li.done::before { content: "✓"; background: var(--rz-success); color: #fff; }
.rzp-progress li.done::after, .rzp-progress li.current::after { background: var(--rz-success); }
.rzp-progress li.current { color: var(--rz-ink); font-weight: 650; }
.rzp-progress li.current::before { background: var(--rz-navy-900); color: #fff; }
.rzp-dl { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: .9rem; }
.rzp-dl dt { color: var(--rz-muted); }
.rzp-dl dd { margin: 0; overflow-wrap: anywhere; color: var(--rz-ink); }
.rzp-timeline { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--rz-line); display: grid; gap: 12px; font-size: .88rem; }
.rzp-timeline li { position: relative; }
.rzp-timeline li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--rz-gold); box-shadow: 0 0 0 3px var(--rz-surface); }
.rzp-timeline .rzp-tl-internal::before { background: #98a2b3; }
.rzp-tl-date { display: block; font-size: .78rem; color: var(--rz-muted); }
.rzp-docs { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; font-size: .9rem; }
.rzp-docs a { font-weight: 600; overflow-wrap: anywhere; }
.rzp-checklist { margin: 0 0 12px; padding-left: 1.2em; color: var(--rz-muted); font-size: .9rem; }
.rzp-checklist-strong { color: var(--rz-ink); font-weight: 600; }
.rzp-assign { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--rz-line); }
.rzp-assign h3 { margin-top: 0; }
.rzp-bank { background: var(--rz-surface-2); border: 1px solid var(--rz-line); border-radius: var(--rz-radius-sm); padding: 12px 14px; font-family: var(--rz-mono); font-size: .88rem; overflow-wrap: anywhere; }
.rzp-invoice { border: 1px solid var(--rz-line); border-radius: var(--rz-radius-sm); padding: 12px 14px; margin-bottom: 12px; }
.rzp-invoice p { margin: 0 0 6px; }
.rzp-payment { padding: 8px 0; border-top: 1px dashed var(--rz-line); font-size: .9rem; }
.rzp-lines { display: grid; gap: 8px; }
.rzp-line { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 8px; }
.rzp-service-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.rzp-service-option { display: flex; flex-direction: column; margin: 0; }
.rzp-service-option p { color: var(--rz-muted); flex: 1; }
.rzp-service-option .btn { align-self: flex-start; }
.rzp-stepper { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 16px; }
.rzp-stepper li { flex: 1; padding: 9px 10px; border-radius: var(--rz-radius-sm); background: var(--rz-surface); border: 1px solid var(--rz-line); font-weight: 600; font-size: .84rem; color: var(--rz-muted); text-align: center; }
.rzp-stepper li.active { border-color: var(--rz-navy-900); color: var(--rz-ink); box-shadow: inset 0 -3px 0 var(--rz-gold); }
.rzp-wizard { background: var(--rz-surface); border: 1px solid var(--rz-line); border-radius: var(--rz-radius); padding: 22px; box-shadow: var(--rz-shadow); }
.rzp-summary { display: grid; grid-template-columns: minmax(110px, 32%) minmax(0, 1fr); gap: 6px 14px; background: var(--rz-surface-2); border: 1px solid var(--rz-line); border-radius: var(--rz-radius-sm); padding: 12px 14px; font-size: .9rem; }
.rzp-summary dt { color: var(--rz-muted); }
.rzp-summary dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Conversations (order messages, tickets) ---------- */
.rzp-thread { display: grid; gap: 10px; margin-bottom: 14px; }
.rzp-msg { max-width: min(680px, 88%); background: var(--rz-surface-2); border: 1px solid var(--rz-line); border-radius: 12px; padding: 10px 14px; overflow-wrap: anywhere; }
.rzp-msg p { margin: 0; }
.rzp-msg p + p { margin-top: 6px; }
.rzp-msg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .76rem; color: var(--rz-muted); margin-bottom: 4px !important; }
.rzp-msg-meta strong { color: var(--rz-ink); font-weight: 600; }
.rzp-msg-staff { background: #f2f6fc; border-color: #d6e2f3; }
.rzp-msg-me { justify-self: end; background: #eef3ff; border-color: #d1e0ff; }
.rzp-msg-internal { background: #fffbeb; border: 1px dashed #e9c46a; justify-self: stretch; max-width: 100%; }
.rzp-closed-box { margin-top: 16px; padding: 16px 18px; border: 1px solid #b2ddff; background: var(--rz-info-bg); border-radius: var(--rz-radius-sm); }
.rzp-closed-box p { margin: 0 0 8px; color: var(--rz-info); }
.rzp-notes { list-style: none; padding: 0; margin: 0; display: grid; }
.rzp-notes li { padding: 12px 0; border-bottom: 1px solid var(--rz-line); font-size: .9rem; overflow-wrap: anywhere; }
.rzp-notes li:last-child { border-bottom: 0; }
.rzp-unread { font-weight: 600; }
.rzp-unread::before { content: "● "; color: var(--rz-gold); }
.rzp-actions-list { margin: 0; padding-left: 1.2em; }
.rzp-app blockquote { margin: 8px 0; padding: 10px 14px; border-left: 3px solid var(--rz-gold); background: var(--rz-surface-2); border-radius: 0 8px 8px 0; }

/* ---------- Profile, security ---------- */
.rzp-meter { height: 8px; background: #e5e9f0; border-radius: 99px; overflow: hidden; margin: 6px 0 10px; }
.rzp-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--rz-gold), var(--rz-success)); border-radius: 99px; }
.rzp-avatar-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.rzp-avatar-row .rzp-dl { flex: 1; min-width: 240px; }
.rzp-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--rz-shadow); flex: none; }
.rzp-avatar-empty { background: var(--rz-surface-2) radial-gradient(circle at 50% 38%, #c9d2de 0 18%, transparent 19%), radial-gradient(ellipse at 50% 100%, #c9d2de 0 42%, transparent 43%); border: 1px dashed #c9d2de; }
.rzp-location-status:empty { display: none; }
.rzp-field-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rzp-reveal { position: relative; }
.rzp-reveal input { padding-right: 76px !important; }
.rzp-reveal-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 30px; padding: 4px 10px; border: 1px solid var(--rz-line-strong); border-radius: 6px; background: #fff; color: var(--rz-ink); font: 600 .78rem var(--rz-font); cursor: pointer; }
.rzp-qr { margin: 12px 0; width: 200px; max-width: 100%; background: #fff; padding: 6px; border: 1px solid var(--rz-line); border-radius: 10px; }
.rzp-qr svg { width: 100%; height: auto; display: block; }
.rzp-codes { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.rzp-codes code { display: block; text-align: center; padding: 8px; background: #fff; border: 1px dashed var(--rz-line-strong); border-radius: 8px; font-size: .95rem; letter-spacing: .06em; }
.rzp-twofa-steps li { margin-bottom: 10px; }
.rzp-secret { display: inline-block; margin: 8px 0; padding: 8px 12px; background: var(--rz-surface-2); border-radius: 8px; font-size: 1rem; letter-spacing: .08em; word-break: break-all; }
.rzp-subhead { margin: 20px 0 10px !important; font-size: .95rem !important; }
.rzp-pr { border: 1px solid var(--rz-line); border-radius: var(--rz-radius-sm); padding: 10px 14px; margin: 0 0 10px; background: var(--rz-surface); }
.rzp-pr > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: .9rem; }
.rzp-pr[open] > summary { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rz-line); }
.rzp-pr h4 { margin: 14px 0 8px; }

/* ---------- Content editor, stars, misc ---------- */
.rzp-stars-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.rzp-stars-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rzp-stars-input label { font-size: 1.8rem; color: #d0d5dd; cursor: pointer; line-height: 1; }
.rzp-stars-input input:checked ~ label, .rzp-stars-input label:hover, .rzp-stars-input label:hover ~ label { color: var(--rz-gold); }
.rzp-stars-input input:focus-visible + label { box-shadow: var(--rz-focus); border-radius: 4px; }
.rzp-sections { display: grid; gap: 8px; }
.rzp-section-row { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.rzp-section-row input[type="number"] { width: 72px; min-height: 36px; }
.rzp-img-preview { max-width: 160px; max-height: 120px; border: 1px solid var(--rz-line); border-radius: 8px; margin-bottom: 8px; background: #fff; }
.rzp-sticky-actions { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 0; background: linear-gradient(transparent, var(--rz-bg) 30%); z-index: 5; }
.rzp-full { grid-column: 1 / -1; }
.rzp-preview-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; padding: 12px 20px; background: #7a2e0e; color: #fff; text-align: center; font-weight: 600; }
.rzp-preview-bar a { color: #fff; }

/* Customer search (office) */
.rzp-customer-search { position: relative; }
.rzp-search-results { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--rz-line); border-radius: var(--rz-radius-sm); max-height: 280px; overflow: auto; background: #fff; box-shadow: var(--rz-shadow-lg); }
.rzp-search-results:empty { display: none; }
.rzp-search-results li { border-bottom: 1px solid var(--rz-line); }
.rzp-search-results li:last-child { border-bottom: 0; }
.rzp-search-results button[role="option"] { width: 100%; text-align: left; padding: 10px 12px; background: none; border: 0; font: inherit; font-size: .9rem; cursor: pointer; }
.rzp-search-results button[role="option"]:hover, .rzp-search-results button[role="option"]:focus { background: var(--rz-surface-2); outline: none; }
.rzp-search-results .rzp-muted, .rzp-search-results .rzp-more { padding: 8px 12px; }
.rzp-picked { display: inline-block; padding: 6px 10px; background: #eef3ff; border-radius: 8px; font-weight: 600; margin-bottom: 6px; }
.rzp-quick { grid-column: 1 / -1; display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: .86rem; margin-bottom: 12px; }

/* Bar charts with text values (readable without colour) */
.rzp-chart { margin: 0; }
.rzp-chart ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rzp-chart li { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .86rem; }
.rzp-chart-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rzp-chart-bar { height: 10px; background: #eef1f5; border-radius: 99px; overflow: hidden; }
.rzp-chart-bar span { display: block; height: 100%; background: var(--rz-navy-700); border-radius: 99px; }
.rzp-chart li:nth-child(even) .rzp-chart-bar span { background: var(--rz-gold); }
.rzp-chart-value { font-weight: 650; color: var(--rz-ink); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }

/* Legacy wrapper (pages rendered outside the app shell) */
.rzp-wrap { background: var(--rz-bg); min-height: 60vh; padding: 28px 0 56px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
	.rzp-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); }
}
@media (max-width: 1023px) {
	.rzp-app { grid-template-columns: minmax(0, 1fr); }
	.rzp-sidebar {
		position: fixed; inset: 0 auto 0 0; z-index: 120; width: min(300px, 86vw); height: 100%;
		transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--rz-shadow-lg); visibility: hidden;
	}
	.admin-bar .rzp-sidebar { top: 32px; height: calc(100% - 32px); }
	.is-drawer-open .rzp-sidebar { transform: none; visibility: visible; }
	.rzp-backdrop { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(6, 20, 43, .45); }
	.rzp-backdrop[hidden] { display: none; }
	.rzp-sidebar .rzp-drawer-close, .rzp-menu-btn { display: inline-flex; }
	.rzp-topbar { padding: 0 12px; }
	.rzp-main { padding: 20px 20px 56px; }
	.rzp-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 782px) {
	.admin-bar .rzp-topbar { top: 46px; }
	.admin-bar .rzp-sidebar { top: 46px; height: calc(100% - 46px); }
}
@media (max-width: 600px) {
	/* WordPress makes its admin bar scroll away on phones. */
	.admin-bar .rzp-topbar { top: 0; }
}
@media (max-width: 640px) {
	.rzp-app, .rzp-auth { font-size: 15px; }
	.rzp-hide-sm { display: none; }
	.rzp-topbar-me { border-left: 0; padding-left: 0; }
	.rzp-main { padding: 16px 16px 48px; }
	.rzp-app h1 { font-size: 1.3rem; }
	.rzp-panel { padding: 16px; border-radius: 10px; }
	.rzp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.rzp-stat { padding: 12px; }
	.rzp-stat > span:first-child { font-size: 1.3rem; }
	.rzp-stats-lg .rzp-stat > span:first-child { font-size: 1.35rem; }
	.rzp-head .btn, .rzp-head .btn-row { width: 100%; }
	.rzp-head .btn-row .btn { flex: 1; }
	/* Tables become readable record cards. */
	.rzp-table-wrap { border: 0; background: none; overflow: visible; }
	.rzp-table thead { display: none; }
	.rzp-table, .rzp-table tbody, .rzp-table tr, .rzp-table td { display: block; width: 100%; }
	.rzp-table tr { background: var(--rz-surface); border: 1px solid var(--rz-line); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
	.rzp-table td { border: 0; padding: 5px 0; white-space: normal !important; display: flex; gap: 10px; justify-content: space-between; align-items: baseline; text-align: right; }
	.rzp-table td[data-label]::before { content: attr(data-label); flex: none; max-width: 45%; font-weight: 600; color: var(--rz-muted); font-size: .78rem; text-align: left; }
	.rzp-table td:not([data-label]) { display: block; text-align: left; }
	.rzp-table td.rzp-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; }
	.rzp-table tbody tr:hover td { background: none; }
	/* The permission matrix is genuinely wide: keep it a table that scrolls inside its own box. */
	.rzp-table-wrap:has(.rzp-matrix) { overflow-x: auto; border: 1px solid var(--rz-line); background: var(--rz-surface); }
	.rzp-table.rzp-matrix { display: table; width: auto; min-width: 100%; }
	.rzp-matrix thead { display: table-header-group; }
	.rzp-matrix tbody { display: table-row-group; }
	.rzp-matrix tr { display: table-row; border: 0; border-radius: 0; padding: 0; margin: 0; }
	.rzp-matrix th, .rzp-matrix td { display: table-cell !important; padding: 8px 10px !important; border-bottom: 1px solid var(--rz-line) !important; text-align: left !important; }
	.rzp-matrix td[data-label]::before { content: none; }
	.rzp-matrix td:first-child { min-width: 180px; position: sticky; left: 0; background: var(--rz-surface); z-index: 1; }
	.rzp-dl, .rzp-summary { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
	.rzp-dl dd { margin-bottom: 8px; }
	.rzp-line { grid-template-columns: minmax(0, 1fr) 110px; }
	.rzp-progress li { font-size: .66rem; }
	.rzp-msg { max-width: 100%; }
	.rzp-chart li { grid-template-columns: minmax(0, 1fr) auto; }
	.rzp-chart-bar { grid-column: 1 / -1; order: 3; }
	.rzp-filters { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.rzp-sidebar { transition: none; }
}
@media print {
	.rzp-sidebar, .rzp-topbar, .rzp-backdrop { display: none !important; }
	.rzp-app { display: block; }
}

/* ---------- Help & User Guide ---------- */
.rzp-help-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; }
.rzp-help-nav ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.rzp-help-nav a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--rz-text) !important; font-size: .88rem; }
.rzp-help-nav a:hover { background: var(--rz-surface-2); }
.rzp-help-nav a[aria-current="page"] { background: var(--rz-navy-50); color: var(--rz-ink) !important; font-weight: 600; box-shadow: inset 3px 0 0 var(--rz-gold); }
.rzp-help-article { max-width: 860px; }
.rzp-help-article h3 { margin-top: 22px; }
.rzp-help-article ul, .rzp-help-article ol { padding-inline-start: 1.3em; margin: 0 0 10px; }
.rzp-help-article li { margin-bottom: 6px; }
.rzp-lead { font-size: 1rem; color: var(--rz-muted); }
.rzp-help-check li::marker { color: var(--rz-gold-600); font-weight: 700; }
.rzp-help-task { border: 1px solid var(--rz-line); border-radius: var(--rz-radius-sm); padding: 10px 14px; margin-bottom: 8px; background: var(--rz-surface); }
.rzp-help-task > summary { cursor: pointer; font-weight: 600; color: var(--rz-ink); }
.rzp-help-task[open] > summary { margin-bottom: 8px; }
.rzp-lang { display: inline-flex; border: 1px solid var(--rz-line-strong); border-radius: 8px; overflow: hidden; }
.rzp-lang a { padding: 6px 12px; text-decoration: none; color: var(--rz-text) !important; font-size: .86rem; min-height: 36px; display: inline-flex; align-items: center; }
.rzp-lang a[aria-current="true"] { background: var(--rz-navy-900); color: #fff !important; }
.rzp-welcome { border-left: 4px solid var(--rz-gold); background: linear-gradient(90deg, var(--rz-gold-50), var(--rz-surface) 40%); }
.rzp-app-foot { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--rz-line); font-size: .8rem; color: var(--rz-muted); }
/* Urdu: right-to-left with a Nastaliq/Naskh font where available. */
[lang="ur"] { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; line-height: 2; }
[dir="rtl"] .rzp-dl { direction: rtl; }
[dir="rtl"].rzp-welcome { border-left: 0; border-right: 4px solid var(--rz-gold); background: linear-gradient(270deg, var(--rz-gold-50), var(--rz-surface) 40%); }
[dir="rtl"] h2, [dir="rtl"] h3, [lang="ur"] h2, [lang="ur"] h3 { font-family: inherit; letter-spacing: 0; }
@media (max-width: 860px) { .rzp-help-layout { grid-template-columns: minmax(0, 1fr); } }