/* Lawyers admin brand overrides — same "judicial ledger" identity as the
   prototype (docs/00-executive-summary.md, prototype/assets/css/tokens.css):
   Noto Naskh Arabic for headings, restrained navy/brass, not Unfold's default look. */

@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("../fonts/NotoNaskhArabic-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("../fonts/NotoNaskhArabic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

[dir="rtl"] h1, [dir="rtl"] h2,
.text-font-important-light, .text-font-important-dark {
  font-family: "Noto Naskh Arabic", "Traditional Arabic", serif;
}

/* Broadens the heading treatment past h1/h2/title.html: card headers,
   section labels, and most "important" text in Unfold's own templates
   route through `.text-important` — confirmed via the compiled CSS that
   it resolves to the exact same `var(--color-font-important-light)`
   token as text-font-important-light/-dark above, just a shorter alias.
   The original rule only covered the pair title.html happens to use,
   missing every card title and section header built with the far more
   common `.text-important` utility — the serif treatment was reaching a
   handful of large numbers and nothing else. */
[dir="rtl"] .text-important {
  font-family: "Noto Naskh Arabic", "Traditional Arabic", serif;
}

/* Replaces card.html's default icon treatment on the dashboard's stat
   cards. Unfold positions that icon as a large (text-6xl, ~60px) watermark
   deliberately bled off the card's edge (`-left-6` combined with
   `-translate-x-1/3`) — a fine effect in Unfold's own LTR demos, but
   `-left-*` is a physical (not logical start/end) offset, so it doesn't
   mirror for this RTL-only deployment, and combined with the card's own
   `overflow-hidden` a real chunk of the glyph was being clipped — reading
   as a rendering bug ("icons cropped"), not a deliberate bleed, once
   flagged. Replaced with a small, fully self-contained icon in a tinted
   circular badge, pinned to the corner instead of bleeding past it —
   still brass-accented (this navy/brass identity, not Unfold's default
   neutral grey), but never clipped regardless of card width or viewport.
   Scoped to `.dashboard-stat-card` (applied via card.html's own `class`
   kwarg in templates/admin/index.html), not every card system-wide —
   object-history and other neutral-content cards shouldn't borrow an
   accent color that implies something it isn't. */
.dashboard-stat-card {
  overflow: visible;
}
.dashboard-stat-card .material-symbols-outlined {
  position: absolute;
  left: 20px;
  top: 20px;
  transform: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 22px !important;
  line-height: 1;
  background-color: rgba(169, 121, 59, 0.12);
  color: var(--color-primary-600);
}
.dark .dashboard-stat-card .material-symbols-outlined {
  background-color: rgba(185, 143, 78, 0.16);
  color: var(--color-primary-400);
}
/* card.html reserves `pl-8` on its content wrapper only to keep text clear
   of the old bleeding watermark; the new corner badge above no longer
   needs that clearance, so free the width back up for the (right-aligned)
   number/label instead of leaving an empty gutter opposite them. */
.dashboard-stat-card .pl-8 {
  padding-left: 0;
}

/* A short brass rule before each dashboard section label — a ledger-tab
   marker instead of plain bold text, so the section headings read as a
   deliberate structural device rather than default emphasis. */
.dashboard-section-heading {
  position: relative;
  padding-right: 14px;
}
[dir="rtl"] .dashboard-section-heading::before {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background-color: var(--color-primary-600);
}

/* The welcome banner's accent edge (templates/admin/index.html) — same
   ledger-tab language as the section headings above, at page-opener scale. */
.dashboard-welcome-banner {
  position: relative;
  overflow: hidden;
}
[dir="rtl"] .dashboard-welcome-banner::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--color-primary-600);
}

/* Unfold's fieldset-tabs strip (unfold/helpers/fieldsets_tabs.html) has no
   overflow handling at all — a plain `flex flex-row` with no wrap and no
   overflow-x. Harmless with two or three tabs, but Lawyer's form has six
   ("البيانات الأساسية"..."أرشفة", after adding "الاختصاصات القانونية")
   and on a real phone-width viewport the strip silently overflows the
   screen with tab labels clipped on both edges and no way to reach them —
   confirmed live at 390px width, not a hypothetical. `.flex-row` (not
   `.flex-col`) is what distinguishes this from the sidebar's own nav
   (unfold/helpers/navigation.html's #nav-sidebar-inner is flex-col), so
   this stays scoped to horizontal tab strips specifically. Made
   horizontally scrollable (swipe/scroll to reach a hidden tab) rather
   than wrapped — wrapping would push form content down by a variable,
   jumpy amount depending on how many tabs exist. */
nav.flex.flex-row.items-center {
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}
nav.flex.flex-row.items-center::-webkit-scrollbar {
  height: 4px;
}

/* Unfold's compiled Tailwind CSS hardcodes physical `.text-left` (plain
   `text-align:left`, no `!important`) on every changelist header/cell,
   object-history table, and tabular inline — it was authored LTR-first
   and never ships an RTL variant. Flipping the <html> tag's dir="rtl"
   attribute (this deployment is Arabic-only, no LTR toggle) reorders the
   *columns* correctly (browser default table direction) but does nothing
   about that hardcoded text-align, so every cell's actual content stays
   glued to the left inner edge of a column positioned on the right —
   exactly backwards from what a native RTL grid should look like. Since
   this whole product is Arabic-only, there is no case where "left" was
   ever the intended reading-direction alignment, so the override is a
   blanket one rather than a per-component allowlist. Specificity (0,2,0)
   beats Unfold's bare `.text-left` (0,1,0) regardless of stylesheet load
   order, so this doesn't depend on this file loading after Unfold's. */
[dir="rtl"] .text-left {
  text-align: right;
}

/* Subtle row-hover affordance — Unfold ships zebra striping on the
   changelist table (see admin/change_list_results.html's `{% cycle %}`)
   but no hover state on the row itself, so a dense staff-facing grid like
   the registry/users list gives no feedback about which row the mouse is
   over. Brass at low opacity, matching COLORS.primary in settings.py
   rather than Unfold's default indigo hover. */
[dir="rtl"] table tbody tr:hover > * {
  background-color: rgba(169, 121, 59, 0.08);
}
/* Unfold's own dark mode is class-based (Tailwind's `dark:` variant compiles
   to `:where(.dark, .dark *)`, toggled by its Light/Dark/System switcher
   adding/removing `.dark` on an ancestor) — not the prefers-color-scheme
   media query, so the override has to key off the same `.dark` class to
   actually take effect when a staff member picks dark mode. */
.dark [dir="rtl"] table tbody tr:hover > * {
  background-color: rgba(185, 143, 78, 0.12);
}

/* Login page — was completely bare: a plain white page with a small
   unstyled form adrift in a sea of empty space, no mark, no depth. It's
   the first thing anyone sees before ever reaching the "judicial ledger"
   identity applied everywhere past this point, and read as unfinished
   rather than a serious institutional system. No custom login template
   exists (Unfold's own is used as-is), so this is done entirely through
   selectors scoped to `body.login`.

   The form's own wrapper is `.w-full.sm:w-96` — NOT `#page > div > div`
   (tried first, and wrong): `#page` has two direct-child divs, the
   centering wrapper around the form AND the absolutely-positioned "back
   to site" / theme-toggle row, and that second one *also* has its own
   nested div (the theme-toggle's `.ml-auto`) — so `#page > div > div`
   matched both the real form card and that toggle wrapper, putting a
   second, wrongly-shaped "card" with its own copy of the emblem right
   next to the back-link. Confirmed live via screenshot before switching
   to the class-based selector below, which only the form wrapper has.

   The emblem is the existing navy/brass "ن" mark already shipped as this
   project's favicon/PWA icon (static/icons/icon-512.png) — reused here
   as a real piece of the page rather than left buried in a browser tab,
   via a ::before background-image since no template override exists to
   add a real <img>. It has to be ::before specifically, not ::after —
   ::before is the only one of the pair that lands in normal flow ahead
   of the real heading/form content; the top accent bar below is
   position:absolute so it doesn't care which pseudo-element it is,
   but the emblem does. */
.login #page {
  background:
    radial-gradient(ellipse 900px 600px at 50% -10%, rgba(185, 143, 78, 0.16), transparent 60%),
    linear-gradient(160deg, var(--color-base-900) 0%, var(--color-base-950) 55%, #0a1424 100%);
}
.dark .login #page {
  background:
    radial-gradient(ellipse 900px 600px at 50% -10%, rgba(185, 143, 78, 0.12), transparent 60%),
    linear-gradient(160deg, #0a1424 0%, var(--color-base-950) 100%);
}
.login .w-full.sm\:w-96 {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 40px 36px 36px;
  box-shadow: 0 24px 64px -12px rgba(6, 12, 28, 0.55), 0 2px 8px rgba(6, 12, 28, 0.12);
  position: relative;
  overflow: hidden;
}
.dark .login .w-full.sm\:w-96 {
  background-color: var(--color-base-900);
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Ledger-tab accent, same language as the dashboard welcome banner, at
   the top edge of the card instead of the side (this card is centered,
   not full-width, so a side rule would read as off-balance). */
.login .w-full.sm\:w-96::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary-700), var(--color-primary-400), var(--color-primary-700));
}
.login .w-full.sm\:w-96::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background-image: url("../icons/icon-512.png");
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 16px;
  box-shadow: 0 8px 20px -6px rgba(18, 32, 58, 0.45);
}
.login .w-full.sm\:w-96 h1 {
  text-align: center;
}