/* ===========================================================================
   سلسول — the four things the MudBlazor theme cannot say.

   The palette itself lives in AppTheme.cs, built from Shared/Constants/Brand.
   Nothing here restates a colour that a theme property could have set; every
   rule below exists because MudBlazor uses one palette slot in two different
   roles and only lets you configure one of them.
   =========================================================================== */

:root {
  /* Mirrors BrandColors. Here so the rules below read as colours rather than as
     hex, and so a stylesheet-only tweak has one place to happen. */
  --brand-kahraman: #F59B2E;
  --brand-kahraman-ink: #A65E08;
  --brand-hibr: #23302C;
  --brand-raml: #F8F4E9;
  --brand-lulu: #F2EDE0;
  --brand-petrol: #0E2323;
}

/* ---------------------------------------------------------------------------
   1. Amber is a surface, not a word.

   MudBlazor paints a palette colour either as a fill (button background, chip)
   or as text (text buttons, outlined buttons, links, the active nav item). The
   bead survives the first at 6.28:1 with حبر on it, and fails the second at
   1.99:1 on رمل — it is a bright colour on a light ground, and no amount of
   theming changes that.

   So: the fill stays the bead, and the word becomes burnt amber. Close enough
   to read as the same colour at a glance, dark enough to actually read.

   Light theme only. On petrol the bead reaches 7.49:1 and must stay the bead.
   --------------------------------------------------------------------------- */
body:not(.mud-theme-dark) .mud-primary-text,
body:not(.mud-theme-dark) .mud-button-text-primary,
body:not(.mud-theme-dark) .mud-button-outlined-primary,
body:not(.mud-theme-dark) .mud-icon-button-primary,
body:not(.mud-theme-dark) a.mud-link.mud-primary-text,
body:not(.mud-theme-dark) .mud-nav-link.active:not(.mud-nav-link-disabled) {
  color: var(--brand-kahraman-ink) !important;
}

body:not(.mud-theme-dark) .mud-button-outlined-primary {
  border-color: var(--brand-kahraman-ink) !important;
}

/* The drawer is dark in both themes, so its active item is the opposite case:
   the ground is سطح and the bead reads there. Undo the rule above for it. */
body:not(.mud-theme-dark) .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
  color: var(--brand-kahraman) !important;
}

/* ---------------------------------------------------------------------------
   2. Dark chrome inside a light theme has to state its own feedback.

   The drawer and the app bar are petrol and سطح in BOTH themes, but every
   interaction token MudBlazor derives — action-default-hover above all — comes
   from the palette's text colour, which on the light theme is حبر. Dark ink at
   6% over an already-dark drawer is nothing at all: hovering a nav item changed
   the screen by no perceptible amount, and «active» used the exact same value,
   so the two states were indistinguishable from each other as well as from rest.

   Fixed here rather than in the theme because MudBlazor has one hover token for
   the whole app, and the rest of the app is sand — lightening it globally would
   break every surface that is correct today.
   --------------------------------------------------------------------------- */
.mud-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled),
.mud-appbar .mud-icon-button:hover {
  background-color: rgb(242 237 224 / 0.09);
}

/* Active is a step brighter than hover, and carries the bead on its edge. Colour
   alone was doing the work before, and amber text is the one signal a colour-blind
   reader cannot use.

   `.mud-navmenu` is in the selector to match the specificity of MudBlazor's own
   `.mud-navmenu.mud-navmenu-default .mud-nav-link.active` — without it this rule
   loses and the active row keeps the invisible dark value. Equal specificity is
   enough because this file is linked after MudBlazor's. */
.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
  background-color: rgb(242 237 224 / 0.14);
  border-inline-end: 3px solid var(--brand-kahraman);
}

.mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
  background-color: rgb(242 237 224 / 0.2);
}

/* ---------------------------------------------------------------------------
   3. The card separation.

   Surface sits 1.06:1 lighter than Background — a whisper, because the brand
   has exactly two light values and inventing a third is how palettes grow. The
   hairline is what actually separates a card from the page.
   --------------------------------------------------------------------------- */
body:not(.mud-theme-dark) .mud-paper:not(.mud-paper-outlined):not(.mud-appbar):not(.mud-drawer) {
  border: 1px solid var(--mud-palette-lines-default);
}

/* ---------------------------------------------------------------------------
   4. Print.

   The voucher card is the only thing here that reaches paper, and printers do
   not honour a dark theme. Force the light ground so a card printed from a
   dark-mode session is not a black rectangle.
   --------------------------------------------------------------------------- */
@media print {
  body,
  .mud-paper,
  #printContainer {
    background: #FFFFFF !important;
    color: var(--brand-hibr) !important;
  }
}