/* ==========================================================================
   ACA skin — هيئة الرقابة الإدارية
   Administrative Control Authority · Egypt

   Loaded AFTER the bundle stylesheet in index.html, so everything here wins
   without touching the bundle. Two jobs:
     1. Place the ACA emblem (CSS background, not DOM injection — React never
        re-renders it away, the lesson from the ETA clone).
     2. Fix the handful of contrast cases created by swapping Teradata orange
        for gold: gold fills need navy text, not white.

   Palette (also patched into the bundle literals by rebrand.py):
     navy      #0B2A4A     gold        #C9A227
     navy-2    #16456F     gold-deep   #A5831C
     navy-ink  #071C31     gold-pale   #F6E7B8
   ========================================================================== */

:root {
  --aca-navy: #0b2a4a;
  --aca-navy2: #16456f;
  --aca-ink: #071c31;
  --aca-gold: #c9a227;
  --aca-gold-d: #a5831c;
  --aca-gold-pale: #f6e7b8;
  --aca-logo: url("/aca-logo.png?v=2");
}

/* ── header wordmark: [emblem] ACA. ⟨هيئة الرقابة الإدارية⟩ ─────────────────
   The official emblem is landscape (roughly 3:2) and transparent, so it gets a
   landscape box and NO white tile — the gold reads on the dark chrome and on
   the white login card alike. At this size its own Arabic lettering is not
   legible, which is why the wordmark and the badge chip still earn their keep. */

.brand::before {
  content: "";
  width: 46px;
  height: 31px;
  flex: 0 0 46px;
  background: var(--aca-logo) center/contain no-repeat;
}

.brand b { color: var(--aca-navy); }
.brand b .dot { color: var(--aca-gold); }

/* The badge carries the Arabic authority name — give it its own script/dir so
   it never gets mangled by the LTR shell. */
.topbar .toolbadge {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  background: rgba(201, 162, 39, .13);
  border-color: rgba(201, 162, 39, .42);
  color: #7a6111;
}

/* ── rail emblem: swap the bolt tile for the ACA mark on white ───────────── */

.rail .logo {
  width: 58px;
  height: 40px;
  border-radius: 0;
  background: var(--aca-logo) center/contain no-repeat;
  box-shadow: none;
}
.rail .logo > svg { display: none; }

/* ── gold fills need navy text (they inherited color:#fff from orange) ───── */

.send,
.dbtn.primary,
.edit-save,
.savebtn:not(:disabled) {
  color: var(--aca-ink);
}
.send svg,
.dbtn.primary svg,
.edit-save svg { color: var(--aca-ink); }

.modal .mhead .mi { color: var(--aca-ink); }
.modal .mhead .mi svg { color: var(--aca-ink); }

/* Gold as *text* on white is weak (2.4:1). Anywhere the bundle uses the accent
   for small type, deepen it to a gold that actually passes. */
.tag.o,
.pick.on,
.tfilter.on,
.apick-btn.solo,
.fchip:hover,
.heroband .eyebrow,
.eyebrow { color: #7a6111; }

/* ── login card ──────────────────────────────────────────────────────────── */

.login-brand { align-items: center; }
.login-brand::before {
  content: "";
  width: 56px;
  height: 38px;
  flex: 0 0 56px;
  margin-inline-end: 4px;
  background: var(--aca-logo) center/contain no-repeat;
}
.login-brand b { color: var(--aca-navy); }
.login-brand b .dot { color: var(--aca-gold); }
.login-badge {
  direction: rtl;
  unicode-bidi: isolate;
  background: rgba(201, 162, 39, .15);
  border-color: rgba(201, 162, 39, .45);
  color: #7a6111;
}
.login-accent { background: linear-gradient(90deg, var(--aca-navy), var(--aca-gold)); }
.login-foot {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
}
.login-btn { color: var(--aca-ink); font-weight: 800; }

/* ── Arabic content inside the shell ─────────────────────────────────────── */

.heroband .eyebrow,
.hero .eyebrow {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
  letter-spacing: 0;
  font-size: 11px;
}

/* ── ACA identity strip: a thin navy→gold rule under the header ──────────── */

.topbar { border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--aca-navy) 0%, var(--aca-navy2) 55%, var(--aca-gold) 100%) 1; }