:root {
  --ink: #102f46;
  --ink-2: #1d4963;
  --paper: #f3f6f8;
  --surface: #ffffff;
  --line: #dce4ec;
  --muted: #6e7c8c;
  --brand: #2aa7d6;
  --brand-dark: #1688b4;
  --brand-soft: #e4f5fb;
  --success: #159a72;
  --success-soft: #e4f5ef;
  --emerald: var(--brand);
  --emerald-soft: var(--brand-soft);
  --gold: #c8922e;
  --gold-soft: #fff4dc;
  --coral: #d95656;
  --coral-soft: #fdeaea;
  --blue-soft: #e9f2fb;
  --shadow: 0 18px 50px rgba(18, 42, 69, .08);
  --radius: 14px;
  --sidebar: 270px;
}
:root[data-theme="night"] { --surface:#172f3b; --line:#2b4d5a; --muted:#a8c3cc; --gold-soft:#4a3b1b; --blue-soft:#1d3d4d; --shadow:0 18px 50px rgba(0,0,0,.22); color-scheme:dark; }

* { box-sizing: border-box; }
.auth-gate { min-height:100vh; display:grid; place-items:center; padding:22px; background:radial-gradient(circle at 15% 10%,var(--brand-soft),transparent 42%),var(--paper); direction:rtl; }
.auth-gate[hidden], .app-shell[hidden] { display:none !important; }
.page-stage:has(#customerFormPanel) .page-head .primary-button[data-customer-add] { display:none; }
.page-stage:has(#productFormPanel) .page-head .primary-button[data-product-add] { display:none; }
.full-field, .customer-extra { grid-column:1 / -1; }
.customer-extra { border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--brand-dark); }
.customer-extra summary { cursor:pointer; font-weight:700; }
.customer-extra textarea { width:100%; margin-top:10px; resize:vertical; border:1px solid var(--line); border-radius:8px; padding:9px; font:inherit; }
.auth-card { width:min(440px,100%); background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:30px; box-shadow:var(--shadow); }
.auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.auth-brand .brand-mark { width:48px; height:48px; }
.auth-brand strong { display:block; font-size:24px; }
.auth-brand small { color:var(--muted); }
.auth-card h1 { margin:0 0 5px; font-size:24px; }
.auth-card .auth-subtitle { margin:0 0 22px; color:var(--muted); }
.auth-card form { display:grid; gap:14px; }
.auth-card label { display:grid; gap:6px; font-weight:700; }
.auth-card input { width:100%; border:1px solid var(--line); border-radius:10px; padding:12px; background:var(--surface); color:var(--ink); }
.auth-error { min-height:20px; color:var(--coral); font-size:12px; }
.auth-loading { opacity:.7; pointer-events:none; }
html { color-scheme: light; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(0, 143, 114, .22);
  outline-offset: 2px;
}

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) 1fr; direction: rtl; }
html[dir="ltr"] .app-shell, [data-language="en"] .app-shell, [data-language="hi"] .app-shell { direction:ltr; }
html[dir="ltr"] .sidebar, [data-language="en"] .sidebar, [data-language="hi"] .sidebar { border-left:0; border-right:1px solid var(--line); }
html[dir="ltr"] .sidebar { order:2; }
html[dir="ltr"] .main-column { order:1; }
.sidebar {
  position: sticky; top: 0; height: 100vh; z-index: 20;
  display: flex; flex-direction: column; overflow: auto;
  background: rgba(247, 252, 255, .72); color: var(--ink); padding: 20px 16px 16px;
  border-left: 1px solid rgba(42,167,214,.18);
  box-shadow: -12px 0 36px rgba(16,47,70,.06);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
}
.brand { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px 16px; }
.brand-mark { width: 42px; height: 42px; display:grid; place-items:center; color:#fff; background:var(--brand); border-radius: 13px 13px 4px 13px; font-size:22px; font-weight:800; box-shadow:0 8px 22px rgba(42,167,214,.24); }
.brand-mark img { width:100%; height:100%; object-fit:contain; padding:4px; border-radius:inherit; }
.brand strong { display:block; color:var(--ink); font-size:20px; letter-spacing:.02em; }
.brand small, .company-switcher small, .user-card small { color:#648197; display:block; font-size:11px; }
.sidebar-close { display:none; margin-right:auto; }
.company-switcher { display:grid; grid-template-columns: 34px 1fr 24px; align-items:center; gap:10px; margin:4px 0 18px; padding:12px; background:rgba(255,255,255,.52); border:1px solid rgba(42,167,214,.16); border-radius:12px; box-shadow:0 8px 22px rgba(16,47,70,.04); }
.company-avatar, .user-avatar { display:grid; place-items:center; border-radius:10px; font-weight:700; }
.company-avatar { width:34px; height:34px; background:var(--emerald); color:#fff; }
.company-switcher button, .user-card button { border:0; background:transparent; color:#648197; }
.nav-label { margin:18px 12px 7px; color:#7892a4; font-size:10px; font-weight:700; letter-spacing:.12em; }
.main-nav { display:flex; flex-direction:column; gap:4px; }
.nav-item { width:100%; min-height:42px; display:flex; align-items:center; gap:11px; border:0; border-radius:10px; background:transparent; color:#3f5d72; padding:9px 11px; text-align:right; transition:.18s ease; }
.nav-item:hover { background:rgba(42,167,214,.09); color:var(--brand-dark); }
.nav-item.active { background:rgba(255,255,255,.82); color:var(--brand-dark); box-shadow:inset -3px 0 var(--brand), 0 9px 22px rgba(16,47,70,.08); }
.nav-item.locked { opacity:.5; }
.nav-item.locked:after { content:"قفل"; margin-right:auto; border:1px solid rgba(16,47,70,.16); border-radius:6px; padding:1px 5px; font-size:8px; }
.nav-icon { width:24px; text-align:center; font-size:17px; font-weight:700; }
.nav-item em { margin-right:auto; min-width:20px; height:20px; display:grid; place-items:center; border-radius:8px; background:var(--coral); color:#fff; font-size:10px; font-style:normal; }
.status-dot { margin-right:auto; width:8px; height:8px; border-radius:50%; background:#35d8a8; box-shadow:0 0 0 4px rgba(53,216,168,.12); }
.sidebar-footer { margin-top:auto; padding-top:16px; }
.user-card { display:grid; grid-template-columns:36px 1fr 26px; gap:9px; align-items:center; margin-top:12px; padding:14px 10px 2px; border-top:1px solid rgba(42,167,214,.16); }
.user-avatar { width:36px; height:36px; background:var(--brand-soft); color:var(--brand-dark); }
.developer-credit { display:block; margin:12px 8px 0; color:#648197; font-size:9px; text-decoration:none; line-height:1.5; }
.developer-credit:hover { color:var(--brand-dark); }

.main-column { min-width:0; }
.topbar { height:72px; position:sticky; top:0; z-index:15; display:flex; justify-content:space-between; align-items:center; padding:0 28px; background:rgba(245,247,250,.94); border-bottom:1px solid var(--line); backdrop-filter: blur(12px); }
.topbar-start, .topbar-actions, .breadcrumbs { display:flex; align-items:center; gap:12px; }
.language-picker { height:38px; display:flex; align-items:center; gap:5px; padding:0 8px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--brand-dark); }
.language-picker span { font-size:13px; }
.language-picker select { border:0; outline:0; color:var(--ink); background:transparent; font-size:10px; cursor:pointer; }
.breadcrumbs { color:var(--muted); font-size:12px; }
.breadcrumbs b { opacity:.35; }
.breadcrumbs strong { color:var(--ink); }
.icon-button { width:38px; height:38px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink); }
.menu-toggle { display:none; }
.search-trigger { min-width:260px; height:40px; display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:8px; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--muted); text-align:right; padding:0 12px; }
kbd { border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; background:#f8fafc; padding:1px 6px; color:#6f7f90; font-family:inherit; font-size:10px; }
.notification-button { position:relative; }
.notification-button i { position:absolute; top:8px; left:8px; width:7px; height:7px; background:var(--coral); border:2px solid #fff; border-radius:50%; }
.primary-button { border:1px solid var(--brand); border-radius:10px; background:var(--brand); color:#fff; padding:10px 16px; font-weight:700; box-shadow:0 7px 18px rgba(42,167,214,.20); }
.primary-button:hover { border-color:var(--brand-dark); background:var(--brand-dark); }
.primary-button.compact { height:40px; padding:0 14px; }
.secondary-button { border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); padding:9px 14px; font-weight:700; }
.danger-button { border:1px solid #f0c7c7; border-radius:10px; color:var(--coral); background:#fff; padding:9px 14px; }

.zatca-ribbon { min-height:54px; display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; padding:9px 28px; color:#effaff; background:var(--brand-dark); box-shadow:inset 0 -1px rgba(255,255,255,.12); }
.ribbon-status { display:grid; grid-template-columns:10px auto; column-gap:9px; align-items:center; }
.ribbon-status small { grid-column:2; color:#c9ebf7; font-size:10px; }
.pulse-dot { width:9px; height:9px; border-radius:50%; background:#53ddb1; box-shadow:0 0 0 5px rgba(83,221,177,.14); }
.ribbon-metrics { display:flex; justify-content:center; gap:26px; font-size:11px; color:#d6eef7; }
.ribbon-metrics b { color:#fff; margin-left:4px; }
.zatca-ribbon > button { justify-self:end; border:0; color:#fff; background:transparent; font-size:11px; font-weight:700; }

.page-stage { padding:28px; max-width:1600px; margin:0 auto; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; }
.eyebrow { margin:0 0 4px; color:var(--emerald); font-size:10px; font-weight:800; letter-spacing:.08em; }
.page-head h1 { margin:0; font-size:27px; line-height:1.35; letter-spacing:-.03em; }
.page-head p { margin:6px 0 0; color:var(--muted); }
.head-actions { display:flex; gap:9px; align-items:center; }

.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.metric-card { position:relative; min-height:142px; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.metric-card:before { content:""; position:absolute; right:0; top:0; bottom:0; width:4px; background:var(--card-accent,var(--emerald)); }
.metric-label { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; }
.metric-label span:last-child { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--card-soft,var(--emerald-soft)); color:var(--card-accent,var(--emerald)); font-weight:800; }
.metric-value { margin:14px 0 2px; font-size:25px; font-weight:800; letter-spacing:-.03em; direction:rtl; }
.metric-foot { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:10px; }
.trend-up { color:var(--emerald); font-weight:700; }
.trend-down { color:var(--coral); font-weight:700; }

.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr); gap:14px; margin-top:14px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.panel-head h2 { margin:0; font-size:16px; }
.panel-head p { margin:3px 0 0; color:var(--muted); font-size:11px; }
.panel-link { border:0; background:transparent; color:var(--emerald); font-weight:700; }
.chart-wrap { position:relative; height:270px; border-bottom:1px solid var(--line); }
.chart-grid { position:absolute; inset:0; display:grid; grid-template-rows:repeat(4,1fr); }
.chart-grid i { border-top:1px dashed #e7edf2; }
.chart-svg { position:absolute; inset:12px 0 0; width:100%; height:238px; overflow:visible; }
.chart-labels { display:flex; justify-content:space-between; color:#8a98a8; font-size:10px; margin-top:10px; direction:rtl; }
.chart-legend { display:flex; gap:18px; margin-top:17px; font-size:11px; color:var(--muted); }
.chart-legend span:before { content:""; display:inline-block; width:8px; height:8px; border-radius:3px; margin-left:6px; background:var(--legend); }
.daily-ledger { padding:0; overflow:hidden; }
.ledger-date { padding:19px 20px 16px; background:var(--ink); color:#fff; }
.ledger-date small { color:#9db1c5; }
.ledger-date strong { display:block; margin-top:4px; font-size:18px; }
.ledger-list { list-style:none; margin:0; padding:8px 18px 14px; }
.ledger-list li { display:grid; grid-template-columns:10px 1fr auto; gap:10px; align-items:start; padding:14px 0; border-bottom:1px solid #edf1f5; }
.ledger-list li:last-child { border-bottom:0; }
.ledger-list i { width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--dot,var(--emerald)); }
.ledger-list b { display:block; font-size:12px; }
.ledger-list small { color:var(--muted); font-size:10px; }
.ledger-list strong { font-size:12px; white-space:nowrap; }

.lower-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:14px; margin-top:14px; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th { padding:11px 12px; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; text-align:right; font-weight:700; }
.data-table td { padding:13px 12px; border-bottom:1px solid #edf1f5; font-size:12px; }
.data-table tr:last-child td { border-bottom:0; }
.data-table tbody tr:hover { background:#f9fbfc; }
.invoice-number { color:var(--ink); font-weight:800; }
.status-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 9px; font-size:10px; font-weight:700; background:var(--pill-bg); color:var(--pill-color); }
.status-pill:before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.accepted { --pill-bg:var(--success-soft); --pill-color:var(--success); }
.pending { --pill-bg:var(--gold-soft); --pill-color:#9b6b13; }
.overdue { --pill-bg:var(--coral-soft); --pill-color:var(--coral); }
.draft { --pill-bg:#edf1f5; --pill-color:#627284; }
.quick-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.quick-actions button { min-height:82px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:right; padding:13px; color:var(--ink); }
.quick-actions button:hover { border-color:#9dcfc2; transform:translateY(-1px); box-shadow:0 8px 18px rgba(18,42,69,.06); }
.quick-actions span { display:grid; place-items:center; width:30px; height:30px; margin-bottom:8px; border-radius:9px; color:var(--emerald); background:var(--emerald-soft); font-weight:800; }
.quick-actions b { display:block; font-size:11px; }
.quick-actions small { color:var(--muted); font-size:9px; }

.toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:14px; }
.toolbar-start, .toolbar-end { display:flex; align-items:center; gap:9px; }
.field-search { min-width:280px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.field-search input { width:100%; height:40px; border:0; outline:0; background:transparent; }
.filter-button { height:40px; border:1px solid var(--line); background:#fff; border-radius:10px; padding:0 13px; color:var(--ink); }
.table-panel { padding:0; overflow:hidden; }
.table-panel .data-table th:first-child, .table-panel .data-table td:first-child { padding-right:20px; }
.table-panel .data-table th:last-child, .table-panel .data-table td:last-child { padding-left:20px; }
.table-panel .data-table td { height:58px; }
.entity { display:flex; align-items:center; gap:10px; }
.entity-avatar { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:10px; background:var(--blue-soft); color:var(--ink-2); font-weight:800; }
.entity b { display:block; }
.entity small { display:block; color:var(--muted); font-size:10px; }
.row-actions { display:flex; gap:5px; }
.row-actions button { width:31px; height:31px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); }
.pagination { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; color:var(--muted); font-size:11px; border-top:1px solid var(--line); }
.pages { display:flex; gap:5px; direction:ltr; }
.pages button { width:31px; height:31px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.pages button.active { border-color:var(--ink); background:var(--ink); color:#fff; }

.invoice-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr); gap:14px; align-items:start; }
.form-panel { padding:22px; }
.section-title { display:flex; align-items:center; gap:10px; margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:15px; }
.theme-settings { max-width:900px; }
.theme-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.theme-option { position:relative; border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:14px; text-align:right; color:var(--ink); transition:.18s ease; }
.theme-option:hover,.theme-option.selected { border-color:var(--theme-color); box-shadow:0 10px 24px color-mix(in srgb,var(--theme-color) 18%,transparent); transform:translateY(-2px); }
.theme-option b,.theme-option small { display:block; }
.theme-option small { color:var(--muted); margin-top:3px; font-size:11px; }
.theme-option em { display:inline-block; margin-top:10px; color:var(--theme-color); font-size:11px; font-style:normal; font-weight:800; }
.theme-swatch { display:flex; gap:6px; height:44px; padding:8px; margin-bottom:11px; border-radius:10px; background:var(--theme-soft); }
.theme-swatch i { display:block; flex:1; border-radius:6px; background:var(--theme-color); }
.theme-swatch i:nth-child(2) { opacity:.7; }
.theme-swatch i:nth-child(3) { opacity:.35; }
@media (max-width:700px) { .theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.section-title span { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; background:var(--ink); color:#fff; font-size:11px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field.full { grid-column:1/-1; }
.field label { font-size:11px; font-weight:700; }
.field label em { color:var(--coral); font-style:normal; }
.field input, .field select, .field textarea { width:100%; min-height:42px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); padding:9px 11px; outline:0; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(42,167,214,.12); }
.invoice-items { margin-top:22px; }
.item-row { display:grid; grid-template-columns:2fr .55fr .8fr .6fr .9fr 34px; gap:8px; align-items:end; margin-bottom:9px; }
.item-row .field { gap:4px; }
.item-row .field label { font-size:9px; color:var(--muted); }
.item-remove { width:34px; height:42px; border:1px solid #f0c9c9; border-radius:9px; color:var(--coral); background:#fff; }
.add-line { border:1px dashed #9db2c5; border-radius:9px; background:#f8fafc; color:var(--ink); padding:9px 12px; font-weight:700; }
.invoice-summary { margin-top:20px; margin-right:auto; width:min(360px,100%); border-top:1px solid var(--line); padding-top:12px; }
.summary-row { display:flex; justify-content:space-between; padding:6px 0; color:var(--muted); }
.summary-row.total { margin-top:5px; border-top:1px solid var(--line); padding-top:12px; color:var(--ink); font-size:17px; font-weight:800; }
.form-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }

.compliance-panel { position:sticky; top:144px; padding:0; overflow:hidden; }
.compliance-head { padding:20px; color:#fff; background:var(--ink); }
.compliance-head small { color:#aabdd0; }
.compliance-score { display:flex; align-items:center; gap:13px; margin-top:15px; }
.score-ring { --score:100; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#4de0b1 calc(var(--score)*1%), rgba(255,255,255,.12) 0); position:relative; }
.score-ring:before { content:""; position:absolute; inset:6px; border-radius:50%; background:var(--ink); }
.score-ring b { position:relative; font-size:12px; }
.check-list { list-style:none; margin:0; padding:14px 18px; }
.check-list li { display:grid; grid-template-columns:22px 1fr; gap:9px; padding:11px 0; border-bottom:1px solid #edf1f5; }
.check-list li:last-child { border:0; }
.check-list i { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--success-soft); color:var(--success); font-style:normal; font-size:10px; font-weight:900; }
.check-list b { display:block; font-size:11px; }
.check-list small { display:block; color:var(--muted); font-size:9px; }
.invoice-preview { margin:0 16px 16px; border:1px solid var(--line); border-radius:10px; background:#fbfcfd; padding:15px; }
.preview-top { display:flex; justify-content:space-between; align-items:start; padding-bottom:12px; border-bottom:2px solid var(--ink); }
.preview-logo { font-weight:900; font-size:17px; }
.qr-placeholder { width:52px; height:52px; background:repeating-conic-gradient(#172d44 0 25%, #fff 0 50%) 0/12px 12px; border:4px solid #fff; box-shadow:0 0 0 1px var(--line); }
.preview-lines { display:grid; gap:7px; margin-top:13px; }
.preview-lines span { height:6px; border-radius:4px; background:#e5ebf0; }
.preview-lines span:nth-child(2) { width:68%; }
.preview-lines span:nth-child(3) { width:83%; }

.integration-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.connection-card { min-height:210px; background:var(--ink); color:#fff; border:0; position:relative; overflow:hidden; }
.connection-card:after { content:"فاتورة"; position:absolute; left:-16px; bottom:-33px; color:rgba(255,255,255,.04); font-size:90px; font-weight:900; transform:rotate(-8deg); }
.connection-card .big-status { display:flex; align-items:center; gap:12px; margin-top:38px; font-size:22px; font-weight:800; }
.connection-card .big-status span { width:43px; height:43px; display:grid; place-items:center; border-radius:50%; background:#36d6a8; color:var(--ink); }
.connection-card p { color:#a9bdd0; max-width:420px; }
.step-list { display:grid; gap:10px; }
.step { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px; padding:13px; border:1px solid var(--line); border-radius:11px; }
.step > span { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:var(--emerald-soft); color:var(--emerald); font-weight:900; }
.step b { display:block; }
.step small { display:block; color:var(--muted); }
.step em { color:var(--emerald); font-style:normal; font-weight:700; font-size:11px; }
.log-list { margin-top:14px; }

.plan-summary {
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center;
  margin-bottom:14px; padding:18px 20px; border:1px solid #b9ddd4; border-right:4px solid var(--emerald);
  border-radius:var(--radius); background:#fff;
}
.plan-summary h2 { margin:2px 0 3px; font-size:18px; }
.plan-summary p { margin:0; color:var(--muted); }
.plan-summary .renewal { text-align:left; }
.plan-summary .renewal b, .plan-summary .renewal small { display:block; }
.plan-summary .renewal small { color:var(--muted); }
.plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.plan-card { position:relative; display:flex; flex-direction:column; min-height:390px; padding:22px; overflow:hidden; }
.plan-card.current { border:2px solid var(--emerald); }
.plan-card.current:before { content:"الباقة الحالية"; position:absolute; top:14px; left:-32px; width:125px; padding:4px 0; color:#fff; background:var(--emerald); text-align:center; font-size:9px; font-weight:800; transform:rotate(-38deg); }
.plan-card.featured { border-color:rgba(42,167,214,.48); box-shadow:0 16px 35px rgba(42,167,214,.1); transform:translateY(-5px); }
.plan-name { color:var(--emerald); font-size:11px; font-weight:800; }
.plan-card h2 { margin:6px 0 2px; font-size:22px; }
.plan-price { margin:14px 0 18px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.plan-price strong { font-size:27px; }
.plan-price span { color:var(--muted); font-size:11px; }
.plan-features { list-style:none; display:grid; gap:10px; margin:0 0 22px; padding:0; }
.plan-features li { display:grid; grid-template-columns:20px 1fr; gap:8px; color:#385267; font-size:11px; }
.plan-features li:before { content:"✓"; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; color:var(--emerald); background:var(--emerald-soft); font-weight:900; }
.plan-card button { margin-top:auto; width:100%; }
.permission-panel { margin-top:14px; padding:0; overflow:hidden; }
.permission-panel .panel-head { padding:20px 20px 0; }
.permission-check { color:var(--emerald); font-weight:900; }
.permission-no { color:#a9b3be; }
.permission-value { color:var(--brand-dark); font-size:11px; font-weight:800; }
.plan-chip { display:inline-flex; border-radius:7px; padding:3px 8px; color:var(--ink); background:#edf2f5; font-size:9px; font-weight:800; }
.plan-chip.business { color:var(--emerald); background:var(--emerald-soft); }
.plan-chip.enterprise { color:#235f84; background:#e4eff6; }

.security-policy { display:grid; grid-template-columns:52px 1fr auto; gap:15px; align-items:center; margin-bottom:14px; padding:18px 20px; border:1px solid #b9ddd4; border-radius:var(--radius); background:#fff; }
.security-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; color:var(--emerald); background:var(--emerald-soft); font-size:21px; font-weight:900; }
.security-policy h2 { margin:0 0 3px; font-size:16px; }
.security-policy p { margin:0; color:var(--muted); font-size:11px; }
.policy-state { display:flex; align-items:center; gap:7px; color:var(--success); font-weight:800; font-size:11px; }
.session-device { display:flex; align-items:center; gap:9px; }
.device-icon { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:#f8fafb; font-weight:900; }
.session-device b, .session-device small { display:block; }
.session-device small { color:var(--muted); font-size:9px; }
.cooldown { display:inline-flex; align-items:center; gap:6px; border-radius:8px; padding:5px 8px; color:#855c16; background:var(--gold-soft); font-size:9px; font-weight:800; }
.cooldown:before { content:"◷"; }
.session-help { margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.session-rule { padding:15px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.session-rule b { display:block; margin-bottom:4px; font-size:11px; }
.session-rule small { color:var(--muted); font-size:9px; }

.empty-view { min-height:460px; display:grid; place-items:center; text-align:center; }
.empty-view span { width:76px; height:76px; display:grid; place-items:center; margin:auto; border-radius:22px; background:var(--blue-soft); font-size:30px; }
.empty-view h2 { margin:16px 0 4px; }
.empty-view p { max-width:430px; color:var(--muted); }

.admin-layout { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr); gap:14px; margin-top:14px; }
.company-form-panel, .company-side-note { padding:0; overflow:hidden; }
.company-form-panel .panel-head, .company-side-note .panel-head { padding:20px 20px 0; }
.form-badge, .table-note { color:var(--brand-dark); background:var(--brand-soft); border-radius:8px; padding:5px 8px; font-size:10px; font-weight:800; }
.company-form { padding:20px; }
.logo-upload { display:flex; align-items:center; gap:12px; margin-bottom:18px; padding:12px; border:1px dashed rgba(42,167,214,.35); border-radius:12px; background:rgba(228,245,251,.46); }
.logo-drop { width:68px; height:68px; display:grid; place-items:center; align-content:center; gap:2px; border:1px solid rgba(42,167,214,.3); border-radius:16px; color:var(--brand-dark); background:#fff; font-size:26px; font-weight:800; }
.logo-drop small { color:var(--muted); font-size:8px; font-weight:400; }
.logo-drop.has-logo { color:var(--success); background:var(--success-soft); }
.logo-upload b, .logo-upload small { display:block; }
.logo-upload small { color:var(--muted); font-size:10px; }
.upload-button { display:inline-block; margin-top:7px; padding:6px 10px; font-size:10px; }
.permission-strip { display:flex; align-items:center; gap:10px; margin-top:18px; padding:12px; border-radius:10px; background:#f7fafc; border:1px solid var(--line); }
.permission-strip > span { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:var(--brand-dark); background:var(--brand-soft); font-weight:900; }
.permission-strip b, .permission-strip small { display:block; }
.permission-strip small { color:var(--muted); font-size:10px; }
.permission-strip strong { margin-right:auto; color:var(--success); font-size:10px; }
.rule-card { display:flex; align-items:center; gap:11px; margin:12px 20px; padding:12px; border:1px solid var(--line); border-radius:11px; background:#fbfdfe; }
.rule-card > span { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; color:var(--brand-dark); background:var(--brand-soft); font-size:17px; font-weight:900; }
.rule-card b, .rule-card small { display:block; }
.rule-card small { color:var(--muted); font-size:9px; }
.featured-rule { border-color:rgba(42,167,214,.45); box-shadow:0 8px 20px rgba(42,167,214,.08); }
.company-table { margin-top:14px; padding:0; overflow:hidden; }
.company-table .panel-head { padding:20px 20px 0; }
.company-table-avatar { color:var(--brand-dark); background:var(--brand-soft); }
.table-subline { display:block; color:var(--muted); font-size:9px; }
.compact { padding:6px 9px; font-size:10px; }
.landing-page { min-height:100vh; margin:-28px; padding:28px clamp(18px,4vw,70px) 60px; color:#15344a; background:#f4fbfd; }
.landing-nav { display:flex; justify-content:space-between; align-items:center; max-width:1220px; margin:auto; }
.landing-brand { display:flex; align-items:center; gap:10px; }
.landing-brand b, .landing-brand small { display:block; }
.landing-brand b { font-size:20px; }
.landing-brand small { color:var(--muted); font-size:10px; }
.landing-hero { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:50px; max-width:1220px; margin:75px auto 90px; }
.landing-kicker { color:var(--brand-dark); font-size:11px; font-weight:900; letter-spacing:.12em; }
.landing-hero h1 { margin:12px 0; font-size:clamp(42px,6vw,76px); line-height:1.1; letter-spacing:-.05em; }
.landing-hero h1 em { color:var(--brand); font-style:normal; }
.landing-hero p { max-width:570px; color:#678295; font-size:16px; }
.landing-proof { display:flex; flex-wrap:wrap; gap:16px; margin-top:25px; color:var(--success); font-size:11px; font-weight:800; }
.hero-ledger { position:relative; min-height:270px; display:flex; flex-direction:column; justify-content:center; padding:30px; border:1px solid rgba(42,167,214,.25); border-radius:28px; background:rgba(255,255,255,.72); box-shadow:0 24px 60px rgba(16,47,70,.1); overflow:hidden; }
.hero-ledger:before { content:""; position:absolute; width:180px; height:180px; left:-55px; bottom:-80px; border-radius:50%; background:rgba(42,167,214,.15); }
.hero-ledger small, .hero-ledger span { color:var(--muted); font-size:11px; }
.hero-ledger strong { margin:8px 0 22px; font-size:44px; letter-spacing:-.04em; }
.hero-ledger strong i { color:var(--brand-dark); font-size:16px; font-style:normal; }
.hero-bars { display:flex; align-items:end; gap:8px; height:75px; border-bottom:1px solid var(--line); }
.hero-bars i { flex:1; border-radius:7px 7px 0 0; background:var(--brand); opacity:.8; }
.hero-bars i:nth-child(1){height:30%}.hero-bars i:nth-child(2){height:52%}.hero-bars i:nth-child(3){height:42%}.hero-bars i:nth-child(4){height:72%}.hero-bars i:nth-child(5){height:56%}.hero-bars i:nth-child(6){height:85%}.hero-bars i:nth-child(7){height:100%}
.landing-section-head { max-width:1220px; margin:auto; text-align:center; }
.landing-section-head span { color:var(--brand-dark); font-size:11px; font-weight:900; }
.landing-section-head h2 { margin:7px 0 2px; font-size:32px; }
.landing-section-head p { color:var(--muted); }
.landing-plans .plans-grid { max-width:1220px; margin:25px auto 80px; }
.landing-signup { max-width:1000px; display:grid; grid-template-columns:1fr 1.2fr; align-items:center; gap:28px; margin:auto; padding:30px; border-color:rgba(42,167,214,.2); background:#fff; }
.landing-signup h2 { margin:8px 0; font-size:25px; }
.landing-signup p { color:var(--muted); font-size:12px; }
.lead-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lead-form input, .lead-form select { min-height:42px; border:1px solid var(--line); border-radius:9px; padding:0 11px; background:#fff; }
.lead-form button { grid-column:1/-1; }
.lead-form small { grid-column:1/-1; color:var(--muted); font-size:9px; }

.command-palette { position:fixed; inset:0; z-index:100; display:grid; place-items:start center; padding-top:12vh; }
.command-palette[hidden] { display:none; }
.palette-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(6,23,39,.54); backdrop-filter:blur(3px); }
.command-palette section { position:relative; width:min(620px,calc(100% - 28px)); overflow:hidden; border:1px solid rgba(255,255,255,.35); border-radius:16px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.25); }
.palette-input { display:grid; grid-template-columns:24px 1fr auto; gap:9px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--line); }
.palette-input input { height:38px; border:0; outline:0; font-size:15px; }
.palette-body { padding:10px; }
.palette-body > p { margin:4px 9px 8px; color:var(--muted); font-size:10px; }
.palette-body button { width:100%; display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center; border:0; border-radius:10px; background:#fff; padding:10px; text-align:right; color:var(--ink); }
.palette-body button:hover { background:#f1f5f8; }
.palette-body button > span { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--blue-soft); }
.palette-body b, .palette-body small { display:block; }
.palette-body small { color:var(--muted); }
.toast-region { position:fixed; left:20px; bottom:20px; z-index:120; display:grid; gap:8px; }
.toast { min-width:280px; padding:13px 14px; border-radius:11px; color:#fff; background:var(--ink); box-shadow:var(--shadow); animation:toast-in .25s ease; }
.toast b, .toast small { display:block; }
.toast small { color:#bed0df; }
@keyframes toast-in { from { transform:translateY(10px); opacity:0; } }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid, .lower-grid { grid-template-columns:1fr; }
  .invoice-layout { grid-template-columns:1fr; }
  .plans-grid { grid-template-columns:1fr; }
  .compliance-panel { position:static; }
  .ribbon-metrics span:last-child { display:none; }
  .admin-layout, .landing-hero, .landing-signup { grid-template-columns:1fr; }
}
@media (max-width: 880px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; right:0; transform:translateX(105%); width:min(310px,90vw); box-shadow:-20px 0 60px rgba(0,0,0,.22); transition:transform .22s ease; }
  .sidebar.open { transform:none; }
  .sidebar-close, .menu-toggle { display:block; }
  .topbar { padding:0 16px; }
  .search-trigger { min-width:40px; width:40px; grid-template-columns:1fr; place-items:center; }
  .search-trigger span:nth-child(2), .search-trigger kbd, .breadcrumbs span, .breadcrumbs b { display:none; }
  .zatca-ribbon { grid-template-columns:1fr auto; padding:9px 16px; }
  .ribbon-metrics { display:none; }
  .page-stage { padding:20px 16px; }
  .integration-grid { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .metric-grid { grid-template-columns:1fr; }
  .page-head { align-items:start; flex-direction:column; }
  .head-actions, .toolbar, .toolbar-start { width:100%; flex-wrap:wrap; }
  .topbar .primary-button { font-size:0; width:40px; padding:0; }
  .topbar .primary-button span { font-size:18px; }
  .field-search { min-width:0; flex:1; }
  .form-grid { grid-template-columns:1fr; }
  .item-row { grid-template-columns:1fr 1fr; padding:12px; border:1px solid var(--line); border-radius:10px; }
  .item-row .field:first-child { grid-column:1/-1; }
  .item-remove { align-self:end; }
  .table-panel { overflow:auto; }
  .data-table { min-width:760px; }
  .plan-summary, .security-policy { grid-template-columns:1fr; }
  .plan-summary .renewal { text-align:right; }
  .session-help { grid-template-columns:1fr; }
  .landing-page { margin:-20px -16px; padding:20px 16px 45px; }
  .landing-hero { margin:45px auto 65px; gap:28px; }
  .landing-hero h1 { font-size:46px; }
  .landing-nav .secondary-button { font-size:10px; padding:8px 10px; }
  .landing-signup { padding:20px; }
  .lead-form { grid-template-columns:1fr; }
  .logo-upload { align-items:flex-start; }
}
@media (max-width: 430px) {
  .auth-gate { padding:12px; }
  .auth-card { padding:22px 16px; }
  .page-stage { padding:16px 12px; }
  .panel-head { gap:10px; }
  .panel-head h2 { font-size:16px; }
  .metric-value { font-size:22px; }
  .head-actions button, .toolbar button { min-height:40px; }
  .item-row { grid-template-columns:1fr; }
  .item-row .field { grid-column:1/-1; }
  .toast-region { left:12px; right:12px; bottom:12px; }
  .toast { min-width:0; width:100%; }
}
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

/* Platform admin order center */
.admin-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 18px; }
.admin-kpi { display:flex; align-items:center; gap:13px; min-height:96px; padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,#fff 0%,#f5fbfd 100%); box-shadow:0 8px 22px rgba(16,47,70,.05); }
.admin-kpi-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#087c69; background:#dff7f1; font-size:19px; }
.admin-kpi-icon.gold { color:#996d12; background:#fff2cd; }.admin-kpi-icon.blue { color:#2f6da5; background:#e4f2fb; }
.admin-kpi small,.admin-kpi em { display:block; color:var(--muted); font-size:11px; font-style:normal; }.admin-kpi strong { display:block; color:var(--ink); font-size:26px; line-height:1.15; margin:3px 0; }
.admin-section { margin:0 0 18px; border:1px solid var(--line); border-radius:16px; background:var(--paper); overflow:hidden; box-shadow:0 8px 22px rgba(16,47,70,.04); }
.admin-section-head { display:flex; justify-content:space-between; align-items:center; padding:20px 22px 16px; border-bottom:1px solid var(--line); }.admin-section-head h2 { margin:4px 0 3px; }.admin-section-head p { margin:0; color:var(--muted); font-size:12px; }.section-kicker { color:var(--brand-dark); font-size:11px; font-weight:800; letter-spacing:.04em; }.admin-count { padding:7px 11px; border-radius:999px; color:var(--brand-dark); background:var(--brand-soft); font-size:12px; font-weight:700; }
.admin-table-wrap { overflow:auto; }.admin-table { min-width:760px; }.admin-table td,.admin-table th { vertical-align:middle; }.admin-company { display:flex; align-items:center; gap:9px; }.admin-company>span { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; color:#fff; background:linear-gradient(145deg,var(--brand),var(--brand-dark)); font-weight:800; }.admin-company .receipt-icon { background:#fff1d0; color:#9a711b; }.admin-company b,.admin-company small,.admin-table td small { display:block; }.admin-company small,.admin-table td small { color:var(--muted); font-size:11px; margin-top:3px; }.plan-tag { display:inline-flex; padding:5px 9px; border:1px solid #bfe4ee; border-radius:7px; color:#14627d; background:#edfaff; font-size:11px; font-weight:800; }.admin-status-select { min-width:112px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; font:inherit; font-size:12px; }.row-action-primary { color:var(--brand-dark); font-weight:800; }.receipt-ready { color:#087c69; font-size:12px; font-weight:700; }.muted { color:var(--muted); font-size:12px; }.admin-empty { display:flex; flex-direction:column; align-items:center; gap:5px; padding:30px; color:var(--ink); }.admin-empty span { color:var(--muted); font-size:12px; }.admin-outbox { border:1px solid var(--line); border-radius:16px; background:var(--paper); }.admin-outbox summary { display:flex; align-items:center; justify-content:space-between; padding:17px 20px; cursor:pointer; list-style:none; }.admin-outbox summary::-webkit-details-marker { display:none; }.admin-outbox summary span b,.admin-outbox summary span small { display:block; }.admin-outbox summary small { margin-top:3px; color:var(--muted); font-size:11px; }.admin-outbox summary>strong { display:grid; place-items:center; min-width:28px; height:28px; border-radius:50%; color:var(--brand-dark); background:var(--brand-soft); }.admin-outbox-list { border-top:1px solid var(--line); padding:8px 20px; }.admin-outbox-list>div { display:grid; grid-template-columns:100px 1fr 180px; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:12px; }.admin-outbox-list>div:last-child { border-bottom:0; }.admin-outbox-list span { color:var(--brand-dark); font-weight:700; }.admin-outbox-list small { color:var(--muted); }
@media (max-width:800px) { .admin-summary { grid-template-columns:1fr; }.admin-section-head { align-items:flex-start; gap:12px; }.admin-outbox-list>div { grid-template-columns:1fr; gap:4px; } }
.payment-instructions { grid-column:1/-1; margin-top:4px; padding:15px 17px; border:1px solid #b9e2ed; border-radius:13px; color:#123b51; background:linear-gradient(135deg,#effbfe,#f8fdff); line-height:1.7; font-size:12px; }.payment-instructions[hidden] { display:none; }.payment-instructions strong { display:block; color:#12647f; font-size:14px; margin-bottom:5px; }.payment-instructions ol { margin:8px 0; padding-right:20px; }.bank-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }.bank-grid span { padding:8px 10px; border:1px solid #d5ebf1; border-radius:9px; background:#fff; color:#668091; }.bank-grid b { display:block; color:#123b51; direction:ltr; text-align:right; font-size:11px; word-break:break-word; }
.row-actions button[data-company-status] { min-width:42px; padding:6px 8px; border:1px solid #d4e1e9; border-radius:8px; color:#24465b; background:#fff; font-size:11px; transition:background .18s,border-color .18s,color .18s,transform .18s; }.row-actions button[data-company-status]:hover:not(:disabled) { border-color:var(--brand); color:var(--brand-dark); background:var(--brand-soft); transform:translateY(-1px); }.row-actions button[data-company-status]:disabled { cursor:default; color:#fff; border-color:var(--brand-dark); background:linear-gradient(135deg,var(--brand),var(--brand-dark)); box-shadow:0 4px 10px rgba(42,167,214,.22); font-weight:800; }.row-actions button[data-company-status][data-status="suspended"]:disabled { border-color:#b77b14; background:linear-gradient(135deg,#e0a12c,#b8780d); box-shadow:0 4px 10px rgba(191,132,23,.2); }.row-actions button[data-company-status][data-status="cancelled"]:disabled { border-color:#b64055; background:linear-gradient(135deg,#db6b7d,#a9384d); box-shadow:0 4px 10px rgba(182,64,85,.2); }
@media (max-width:640px) { .bank-grid { grid-template-columns:1fr; } }