/* ============================================================
   YIBNA — Brand theme (Original Refined)
   Loaded AFTER each page's embedded <style> (and responsive.css),
   so these values win for equal-specificity selectors.

   Brand palette (from the logo package):
     Deep navy      #142D40   primary branding, navigation, text
     Teal           #008C95   primary actions, selected states
     Concrete gray  #C9CDCB   supporting surfaces, borders

   The existing variable NAMES are kept — every page and script
   keeps working; only the values change. Derived shades are
   chosen for WCAG AA contrast (ratios noted against their
   usual background).
   ============================================================ */
:root {
  /* Raw brand tokens */
  --brand-navy: #142D40;
  --brand-teal: #008C95;          /* focus rings / indicators (4.05:1 on white) */
  --brand-teal-light: #4CC3CA;    /* teal on navy (6.7:1) */
  --brand-concrete: #C9CDCB;

  /* Surfaces & text */
  --bg: #F3F5F4;                  /* light concrete-tinted page background */
  --surface: #FFFFFF;
  --surface-alt: #E7EAE9;         /* table heads, hovers, subtle fills */
  --border: #C9CDCB;              /* concrete gray */
  --text: #142D40;                /* navy — 14.2:1 on white */
  --text-muted: #55636B;          /* 6.2:1 on white, 5.1:1 on surface-alt */

  /* Primary action / selected state — exact brand teal (owner's choice).
     Note: white text on #008C95 is 4.05:1, just under WCAG AA's 4.5:1
     for normal-size text; hover/pressed shades below are darker. */
  --accent: #008C95;              /* white text 4.05:1 */
  --accent-dark: #005F66;         /* hover — white text 7.4:1 */
  --accent-pressed: #00565C;      /* active/pressed — 8.5:1 */
  --accent-soft: #E0F1F2;         /* tinted fill — accent-dark text 6.4:1 */

  /* Status colours stay distinct from the teal brand accent */
  --success: #4F7B53;
  --success-soft: #E4EEE5;
  --danger: #C1463D;
  --danger-soft: #F8E6E4;
  --warning: #8A5A00;             /* 5.9:1 on white, 5.3:1 on warning-soft */
  --warning-soft: #FBF1DC;
  --warning-border: #B7791F;

  /* Navigation */
  --sidebar-bg: #142D40;
  --sidebar-text: #C9CDCB;        /* 8.8:1 on navy */
  --sidebar-active: #0D4E5E;      /* navy blended with teal — white 9.3:1 */

  /* Typography (single source — pages no longer define their own) */
  --font-display: 'Space Grotesk', 'IBM Plex Sans Arabic', sans-serif;
  --font-body: 'Inter', 'IBM Plex Sans Arabic', sans-serif;
  --fs-meta: 0.78rem;             /* 12.5px metadata */
  --fs-body: 0.9rem;              /* 14.4px body */
  --fs-section: 1.25rem;          /* 20px section headings */
  --fs-total: 1.75rem;            /* 28px principal totals */
  --lh-body: 1.55;

  /* Spacing scale (4px base) */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Motion — short and calm; disabled under prefers-reduced-motion */
  --motion-fast: 140ms;
  --motion-drawer: 200ms;
}
[dir="rtl"] {
  --font-display: 'IBM Plex Sans Arabic', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', sans-serif;
}

/* ── Form control borders ───────────────────────────────────
   Every input/select/textarea rule draws its border from var(--border),
   so redefining the variable ON the control darkens all of them —
   including inline-styled and script-injected ones — while cards,
   tables and dividers keep the lighter concrete border. Error borders
   (var(--danger)) and focus outlines are unaffected.
   #7E8683: 3.7:1 on white, 3.4:1 on the page bg, 3.1:1 on surface-alt
   (WCAG 1.4.11 asks for ≥3:1 on form-control boundaries). */
input, select, textarea { --border: #7E8683; }

/* ── Sidebar brand block ───────────────────────────────────
   Stacked reversed logo (symbol + YIBNA + "Construction &
   Contracting Est."), shown at the full sidebar width so the
   descriptor stays legible. Aspect ratio kept via height:auto. */
.brand { padding-inline: 12px; } /* the SVG has its own clear space built in */
.brand-logo {
  width: 100%;
  max-width: 216px;
  height: auto;
  margin: 0 auto;
}

/* Active nav: teal indicator bar that stays visible on navy */
.nav-item.active,
.nav-sub-item.active { border-inline-start-color: var(--brand-teal-light); }
.nav-item:hover:not(.active):not(.disabled) { background: rgba(255, 255, 255, 0.05); color: #fff; }
.nav-sub-item:hover:not(.active) { color: #fff; }

/* ── Login card logo (full stacked logo with descriptor) ── */
.login-logo {
  width: 200px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ── Buttons: pressed / disabled states ──────────────────── */
.btn-primary:active:not(:disabled),
.lang-toggle button.active:active { background: var(--accent-pressed); }
.btn:disabled,
.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Keyboard focus ─────────────────────────────────────────
   Zero-specificity (:where) so any existing page focus style
   still wins; this only fills in where none was defined. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 2px;
}
:where(.sidebar) :where(a, button):focus-visible {
  outline-color: var(--brand-teal-light);
  outline-offset: -2px;
}

/* ── Warning / attention states ─────────────────────────────
   These used the old gold accent. Now that the accent is teal
   (selected/primary), they get a dedicated amber so warnings,
   drafts and amounts owed stay visually distinct. Variants such
   as .banner.error / .banner.muted keep their own colours (higher
   specificity). */
.banner {
  background: var(--warning-soft);
  border-color: var(--warning-border);
  color: var(--warning);
}
.badge-progress { color: var(--warning); border-color: var(--warning-border); }
.amt-owed,
.debit,
.balance-neg { color: var(--warning); }
.badge-owed { background: var(--warning-soft); color: var(--warning); }
.pill.outstanding { border-color: var(--warning-border); background: var(--warning-soft); }
.pill.outstanding .pill-val { color: var(--warning); }
.install-diff .diff-flag { color: var(--warning); }
/* Accounts Receivable "Total outstanding" card — same meaning as .amt-owed */
.s-value.accent { color: var(--warning); }
.summary-card.highlight { border-left-color: var(--warning-border); }
[dir="rtl"] .summary-card.highlight { border-right-color: var(--warning-border); }

/* ── Typography & numbers (U03) ─────────────────────────────
   Tabular numerals keep amounts aligned in columns; body text
   gets a comfortable line height. Arabic never takes the Latin
   uppercase / letter-spacing treatment. */
body { line-height: var(--lh-body); }
td, th, .value, .s-value, .net-pay-cell, .mono, .num, input[type="number"],
.pill-val, .amount, .stat-value { font-variant-numeric: tabular-nums; }
.num, .ltr { direction: ltr; unicode-bidi: isolate; }
.page-head h1 { line-height: 1.25; }
.value-note { font-size: 0.75rem; font-weight: 400; color: var(--text-muted); }
[dir="rtl"] th,
[dir="rtl"] .label,
[dir="rtl"] .s-label,
[dir="rtl"] .gs-group,
[dir="rtl"] .badge,
[dir="rtl"] .tag,
[dir="rtl"] .soon-tag,
[dir="rtl"] .report-summary-grid .label,
[dir="rtl"] .brand span,
[dir="rtl"] .table-wrap table.card-table tr.row td::before {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Status vocabulary (U02/U10) ────────────────────────────
   One meaning per colour, always paired with a word or icon so
   colour is never the only signal. Palette colours unchanged. */
.status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.status-chip::before { font-size: 0.8em; line-height: 1; }
.status-chip.is-draft      { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); }
.status-chip.is-draft::before { content: "○"; }
.status-chip.is-unsaved    { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.status-chip.is-unsaved::before { content: "●"; }
.status-chip.is-incomplete { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.status-chip.is-incomplete::before { content: "⚠"; }
.status-chip.is-final      { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.status-chip.is-final::before { content: "🔒"; }
.status-chip.is-error      { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.status-chip.is-error::before { content: "✕"; }
.status-chip.is-info       { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); }

/* Persistent status strip beside period selectors */
.status-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 10px 14px; margin-bottom: var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  font-size: var(--fs-meta); color: var(--text-muted);
}
.status-strip b { color: var(--text); font-weight: 600; }

/* Colour-coded amount/expiry text (replaces hard-coded reds/ambers) */
.text-danger  { color: var(--danger); font-weight: 600; }
.text-warning { color: var(--warning); font-weight: 600; }
.text-muted   { color: var(--text-muted); }

/* ── Save / error status (U07) ───────────────────────────────
   Live region used by notify(): announced to screen readers,
   errors stay until dismissed. */
.app-status {
  position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 900;
  max-width: min(440px, calc(100vw - 32px));
  display: none; align-items: center; gap: 12px;
  padding: 11px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 0.88rem;
  box-shadow: 0 8px 28px rgba(20, 45, 64, 0.18);
}
.app-status.show { display: flex; animation: app-status-in var(--motion-fast) ease-out; }
.app-status.saving { border-color: var(--border); }
.app-status.saved  { border-color: var(--success); color: var(--success); }
.app-status.error  { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.app-status-dismiss {
  margin-inline-start: auto; background: none; border: 1px solid currentColor; color: inherit;
  border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 0.8rem;
}
@keyframes app-status-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Busy buttons (withSubmitLock / withButtonLock) */
.btn[aria-busy="true"] { cursor: progress; }

/* Access-blocked screen (auth-guard fail-closed) */
.auth-blocked { flex-direction: column; padding: 24px; }
.auth-blocked-box { max-width: 460px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; color: var(--text); }
.auth-blocked-box p { margin: 0 0 16px; line-height: 1.6; }

/* Viewers never see write-only controls (the database refuses them anyway) */
body[data-role="viewer"] .admin-only { display: none !important; }

/* Read-only notice for viewers */
.banner.muted { background: var(--surface-alt); border-color: var(--border); color: var(--text-muted); }

/* ── Global search (moved out of common.js) ─────────────── */
.global-search { position: relative; }
.global-search input { width: 190px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 0.82rem; background: var(--surface); color: var(--text); }
.global-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.global-search-results { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; width: 300px; max-height: 360px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,25,40,0.16); z-index: 300; }
.gs-group { padding: 8px 14px 3px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; }
.gs-item { display: block; padding: 8px 14px; font-size: 0.86rem; color: var(--text); text-decoration: none; }
.gs-item:hover, .gs-item:focus { background: var(--surface-alt); outline: none; }
.gs-item .gs-sub { display: block; font-size: 0.74rem; color: var(--text-muted); }
.gs-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: 0.84rem; }
.gs-error { color: var(--danger); }
/* Tap-to-call phone numbers (phoneLinkHTML in common.js) */
.tel-link { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; unicode-bidi: isolate; }
@media (max-width: 767px) {
  .tel-link { display: inline-block; padding-block: 8px; }
}

/* Phone: the field hides behind an icon and opens across the whole top bar */
.gs-toggle, .gs-close { display: none; }
@media (max-width: 767px) {
  .gs-toggle, .gs-close {
    align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text); cursor: pointer;
  }
  .gs-toggle { display: inline-flex; }
  .gs-close { border: none; font-size: 1.6rem; line-height: 1; }
  .global-search input { display: none; }
  .global-search.open {
    position: absolute; inset: 0; z-index: 250;
    display: flex; align-items: center; gap: 6px;
    padding: 0 10px; background: var(--surface);
  }
  .global-search.open .gs-toggle { display: none; }
  .global-search.open .gs-close { display: inline-flex; }
  .global-search.open input { display: block; flex: 1; min-width: 0; width: auto; min-height: 44px; font-size: 16px; }
  /* one × is enough: the close button next to the field */
  .global-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .global-search-results { width: auto; inset-inline: 0; max-height: 70dvh; border-radius: 0 0 10px 10px; top: 100%; }
  .gs-item { padding: 12px 16px; font-size: 0.95rem; }
}

/* ── Phone: language + logout live at the bottom of the menu drawer ── */
.drawer-footer { display: none; }
@media (max-width: 767px) {
  .drawer-footer {
    display: flex; flex-direction: column; gap: 12px;
    margin: 12px 24px 24px; padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .drawer-footer .lang-toggle { border-color: rgba(255, 255, 255, 0.25); align-self: flex-start; }
  .drawer-footer .lang-toggle button { background: transparent; color: var(--sidebar-text); min-height: 44px; min-width: 56px; }
  .drawer-footer .lang-toggle button.active { background: var(--accent); color: #fff; }
  .drawer-footer .user-info { flex-direction: column; align-items: stretch; gap: 8px; color: var(--sidebar-text); }
  .drawer-footer .user-info #userEmail { display: block; font-size: 0.8rem; overflow-wrap: anywhere; opacity: 0.8; }
  .drawer-footer .logout-btn { min-height: 44px; color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.25); font-size: 0.88rem; }
  .drawer-footer .logout-btn:hover { background: rgba(255, 255, 255, 0.08); }
}

/* ── Dialogs ────────────────────────────────────────────── */
.modal:focus { outline: none; }
.modal-overlay.open .modal { animation: modal-in var(--motion-fast) ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Motion (U08) ───────────────────────────────────────── */
.btn, .nav-item, .nav-sub-item, .lang-toggle button, .logout-btn {
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print: opaque, light, no chrome ────────────────────── */
@media print {
  .sidebar, .topbar, .mobile-menu-btn, .app-status, .global-search, .bottom-tabs { display: none !important; }
  body.has-bottom-tabs { padding-bottom: 0 !important; }
  body { background: #fff; }
}