/* =========================================================================
   Brand fonts, self-hosted.

   advicemart-eg.com uses Work Sans for headings and Open Sans for body text,
   both served from Google Fonts. This system serves them from its own origin
   instead, for two reasons:

     1. The Content-Security-Policy is font-src 'self'. Loading from a CDN
        would mean widening the policy for every user, permanently, to gain a
        font we can simply copy.
     2. A Google Fonts request tells Google the IP address of everybody who
        opens a page. On a payroll system holding national IDs, handing a
        third party a log of who used it and when is not a trade worth making
        for a typeface.

   Both files are VARIABLE fonts - one file covers every weight, which is why
   there are two files here rather than seven. Hence `font-weight: 100 900`:
   it tells the browser this single face can render any weight in that range.
   ========================================================================= */

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans.97b33529e13b.woff2") format("woff2-variations"),
       url("../fonts/WorkSans.97b33529e13b.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  /* swap: show a fallback face immediately and restyle when the font lands.
     The alternative is invisible text while the font downloads. */
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans.dcf31ebe1074.woff2") format("woff2-variations"),
       url("../fonts/OpenSans.dcf31ebe1074.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   AdviceMart System - application styles

   Layered on top of Bootstrap 5 rather than replacing it. Bootstrap supplies
   the grid, forms, tables and components; this file supplies identity and
   the few patterns Bootstrap has no opinion about.
   ========================================================================= */

:root {
  /* Taken from advicemart-eg.com, whose theme publishes them as CSS custom
     properties (--kubio-color-1 and friends, as rgb triplets):

       --kubio-color-1: 177,37,40    the brand red
       --kubio-color-4: 220,23,23    a brighter red, used for emphasis
       --kubio-color-2: 87,86,86     dark grey
       --kubio-color-3: 109,109,109  mid grey

     Read off the live site rather than guessed from a screenshot, so the
     subdomain matches the parent site exactly rather than approximately. */
  --am-red:         #b12528;   /* primary: navigation, buttons, headings   */
  --am-red-dark:    #8c1d20;   /* hover and pressed states                 */
  --am-red-bright:  #dc1717;   /* emphasis only - never a large area       */
  --am-red-deep:    #5b1314;   /* the darkest brand variant                */

  --am-grey:        #575656;
  --am-grey-mid:    #6d6d6d;

  /* Neutrals. A near-white page rather than pure white: this is software
     people stare at for eight hours, and pure white against dark text is
     tiring. Warmed very slightly towards the red so it sits under the brand
     rather than fighting it. */
  --am-paper:       #f8f6f5;
  --am-ink:         #2b2626;
  --am-muted:       #6d6d6d;
  --am-line:        #e2dcdb;

  /* Status colours. Deliberately NOT brand red, except for rejection.
     If red means "the company" and also "something is wrong", every screen
     reads as an error - so workflow states use their own restrained set, and
     red is reserved for the one state that genuinely is a refusal. */
  --am-pending:     #b06f00;
  --am-approved:    #1f7a3f;
  --am-rejected:    #b12528;
  --am-blocked:     #8a4b00;

  /* SURFACES AND WASHES.
     Every one of these used to be written straight into the rule that used
     it, which is how dark mode shipped half-applied: the palette above was
     redefined for dark, these literals were not, and the landing page
     rendered pale text on white tiles. A colour with only one definition
     cannot be redefined for a second theme - so it gets a name. */
  --am-surface:      #ffffff;
  --am-surface-alt:  #f2f4f7;
  --am-wash-muted:   rgba(0,0,0,.05);
  --am-wash-danger:  #fdf2f2;

  --am-wash-pending:  rgba(176,111,0,.12);
  --am-wash-approved: rgba(31,122,63,.12);
  --am-wash-rejected: rgba(177,37,40,.10);
  --am-wash-blocked:  rgba(138,75,0,.12);
  --am-wash-accent:   rgba(13,122,111,.10);
  --am-wash-token:    rgba(177,37,40,.08);

  /* The navigation bar. A token rather than the brand red directly, because
     the right answer differs per theme: brand-red chrome reads as confident
     on white and as unfinished on black. */
  --am-navbar-bg:         var(--am-red);
  --am-navbar-line:       rgba(0,0,0,.12);
  --am-navbar-ink:        rgba(255,255,255,.88);
  --am-navbar-ink-strong: #ffffff;
  --am-navbar-accent:     #ffffff;
  /* The sign-in page fills the WHOLE SCREEN with this. A brand-red wash is
     the right welcome on a light theme and a wall of saturated red on a
     dark one - same reasoning as the navigation bar above. */
  --am-auth-bg: linear-gradient(160deg, var(--am-red) 0%, var(--am-red-dark) 100%);
}

body {
  background: var(--am-paper);
  color: var(--am-ink);
  /* Open Sans for body text, matching the company site. The Arabic faces
     stay in the stack because neither brand font covers Arabic at all - the
     browser falls through to them for Arabic characters, per character, and
     the mix is seamless. */
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
               "Noto Naskh Arabic", Arial, sans-serif;
  font-size: 0.95rem;
}

/* Arabic text needs a slightly larger size and looser line height to stay
   legible - the glyphs carry more detail than Latin letters at the same
   nominal size. Applied wherever we know the content may be Arabic. */
.am-arabic,
[lang="ar"] {
  font-family: "Noto Naskh Arabic", "Segoe UI", "Traditional Arabic", serif;
  font-size: 1.05em;
  line-height: 1.9;
}

/* Headings in Work Sans, as on advicemart-eg.com. The site sets h1 at 4em
   and uppercases it, which suits a marketing hero and would be absurd on a
   data screen - so the family carries the brand here, and the sizing follows
   what a dense table view actually needs. */
h1, h2, h3, h4, h5, h6,
.am-page-header h1,
.navbar-brand {
  font-family: "Work Sans", "Open Sans", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--am-ink);
}

h1 { font-size: 1.55rem; }
h2 { font-size: 1.2rem; }

/* ---- Navigation -------------------------------------------------------- */

.am-navbar {
  background: var(--am-navbar-bg);
  border-bottom: 1px solid var(--am-navbar-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.am-navbar .navbar-brand,
.am-navbar .nav-link {
  color: var(--am-navbar-ink);
}
.am-navbar .nav-link:hover,
.am-navbar .nav-link:focus {
  color: var(--am-navbar-ink-strong);
}
.am-navbar .nav-link.active {
  color: var(--am-navbar-ink-strong);
  font-weight: 600;
  /* AN EXISTING BUG, fixed on the way past: this underlined the active link
     in var(--am-red) on a bar that WAS var(--am-red), so it has never been
     visible in the light theme. The accent has to contrast with the bar it
     sits on, which is a different colour in each theme. */
  box-shadow: inset 0 -2px 0 var(--am-navbar-accent);
}
.am-navbar .navbar-toggler {
  border-color: var(--am-navbar-line);
}

.am-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-right: .5rem;
  border-radius: .4rem;
  background: var(--am-red);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
}
.am-brand-text {
  font-weight: 600;
  font-size: 1rem;
  vertical-align: middle;
}

/* ---- Role badge -------------------------------------------------------- */

.am-role-badge {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.am-role-employee   { background: rgba(255,255,255,.15); color: #fff; }
.am-role-supervisor { background: var(--am-red);        color: #fff; }
.am-role-admin      { background: #b06f00;               color: #fff; }

/* ---- Landing page tiles ------------------------------------------------ */

.am-tile {
  display: block;
  padding: 2.5rem 2rem;
  border: 1px solid var(--am-line);
  border-radius: .75rem;
  background: var(--am-surface);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.am-tile:hover,
.am-tile:focus-visible {
  border-color: var(--am-red);
  box-shadow: 0 6px 20px rgba(26, 43, 71, .10);
  transform: translateY(-2px);
  color: inherit;
}
.am-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.1rem;
  border-radius: .6rem;
  background: var(--am-wash-accent);
  color: var(--am-red);
}
.am-tile h2 {
  font-size: 1.15rem;
  font-weight: 650;
  margin-bottom: .4rem;
}
.am-tile p {
  color: var(--am-muted);
  font-size: .88rem;
  margin: 0;
}

/* ---- Status pills ------------------------------------------------------ */

.am-status {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: .35rem;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
/* The tints are the same hue as the text at low opacity, so a chip reads as
   one colour rather than two. Green for approved and registered rather than
   the brand red: on a screen where red is the company's colour, a red "done"
   badge and a red "rejected" badge look identical at a glance. */
.am-status-pending   { background: var(--am-wash-pending); color: var(--am-pending); }
.am-status-approved  { background: var(--am-wash-approved); color: var(--am-approved); }
.am-status-rejected  { background: var(--am-wash-rejected); color: var(--am-rejected); }
.am-status-blocked   { background: var(--am-wash-blocked); color: var(--am-blocked); }
.am-status-registered { background: rgba(31,122,63,.14);  color: var(--am-approved); }

/* ---- Auth pages -------------------------------------------------------- */

.am-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--am-auth-bg);
}
.am-auth-card {
  width: 100%;
  max-width: 26rem;
  background: var(--am-surface);
  border-radius: .9rem;
  padding: 2.5rem 2.25rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.am-auth-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.75rem;
}
.am-auth-brand .am-brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  font-size: .95rem;
}

/* ---- Page headers ------------------------------------------------------ */

.am-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.am-page-header h1 {
  font-size: 1.4rem;
  font-weight: 650;
  margin: 0;
}
.am-page-header .am-subtitle {
  color: var(--am-muted);
  font-size: .875rem;
  margin: .2rem 0 0;
}

/* ---- Cards & tables ---------------------------------------------------- */

.am-card {
  background: var(--am-surface);
  border: 1px solid var(--am-line);
  border-radius: .6rem;
}
.am-card-header {
  padding: .9rem 1.15rem;
  border-bottom: 1px solid var(--am-line);
  font-weight: 600;
  font-size: .95rem;
}
.am-card-body { padding: 1.15rem; }

.table thead th {
  background: var(--am-surface-alt);
  border-bottom: 1px solid var(--am-line);
  font-size: .78rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--am-muted);
  white-space: nowrap;
}
.table td { vertical-align: middle; }

/* Wide tables scroll inside their own box rather than pushing the page
   sideways. Form1 has 15 columns and will not fit on a laptop otherwise. */
.am-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tabular figures keep digit columns aligned, so wage columns read cleanly. */
.am-numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Masked national IDs in list views. Monospace so the mask lines up. */
.am-masked {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .85rem;
  letter-spacing: .02em;
}

/* ---- Misc -------------------------------------------------------------- */

.am-messages { max-width: 60rem; }

.am-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--am-muted);
}

.btn-am-primary {
  background: var(--am-red);
  border-color: var(--am-red);
  color: #fff;
}
.btn-am-primary:hover,
.btn-am-primary:focus {
  background: var(--am-red-dark);
  border-color: var(--am-red-dark);
  color: #fff;
}

/* Visible focus outline. Removing focus styling breaks keyboard navigation
   entirely for anyone not using a mouse. */
:focus-visible {
  outline: 2px solid var(--am-red);
  outline-offset: 2px;
}

/* =========================================================================
   Utilities that used to be inline style="" attributes.
   -------------------------------------------------------------------------
   They live here because the production Content-Security-Policy is
   "style-src 'self'", which blocks inline style attributes as well as inline
   <style> blocks. That is the real cost of a strict policy, and it is worth
   paying: the same rule is what makes "script-src 'self'" - the one that
   actually stops cross-site scripting - credible rather than aspirational.
   ========================================================================= */

.am-prose        { line-height: 1.7; }
.am-prose-loose  { line-height: 1.8; }
.am-note         { max-width: 52rem; line-height: 1.7; }
.am-narrow       { max-width: 34rem; }
.am-fine-print   { font-size: .78rem; line-height: 1.6; }
.am-fs-sm        { font-size: .8rem; }
.am-tracking     { letter-spacing: .05em; }
.am-brand-name   { font-weight: 650; }
.am-icon-lg      { font-size: 2.5rem; }
.am-error-code   { font-size: 2.6rem; font-weight: 700; }
.am-w-6          { width: 6rem; }
.am-w-14         { width: 14rem; }
.am-scroll-24    { max-height: 24rem; }
.am-tile-static  { cursor: default; }
.am-flush-top    { border-top-left-radius: 0; border-top-right-radius: 0; }
.am-chip-muted   { background: var(--am-wash-muted); color: var(--am-muted); }

/* -------------------------------------------------------------------------
   Delete confirmation screens, and the live client-name check.
   Same reason as the block above: "style-src 'self'" refuses inline styles,
   so anything that would have been a style="" attribute lives here.
   ------------------------------------------------------------------------- */

/* Wider than .am-narrow. The delete screen has to list what is about to be
   removed, and a 34rem column turns that list into a ragged column of
   two-word lines that nobody reads - which defeats the purpose of showing
   it at all. */
.am-narrow-wide  { max-width: 44rem; }

.am-danger-lede  { font-size: 1.05rem; line-height: 1.6; }

/* The value the user has to copy. Given a background so the eye finds it
   without hunting - the whole control depends on them reading it. */
.am-confirm-token {
  background: var(--am-wash-token);
  border: 1px solid rgba(177, 37, 40, .25);
  border-radius: .25rem;
  padding: .05rem .35rem;
  user-select: all;
}

/* The htmx target under the client name field. Reserves no space when empty,
   so the form does not jump as the user types. */
.am-name-check:empty { display: none; }

/* -------------------------------------------------------------------------
 *  A formset row marked for removal
 * -------------------------------------------------------------------------
 *  The row stays on screen, struck through, until the form is saved. It is
 *  the warning: a confirm dialog is one reflex click from the same mistake
 *  and vanishes the moment it is answered, whereas this is still there when
 *  the user looks back at the page, and it can be undone.
 *
 *  Not display:none, which is what it used to be. A row that simply vanished
 *  read as "already deleted", and if the save then failed the server sent it
 *  straight back looking untouched.
 */
.am-row-removed {
  border-color: var(--am-rejected) !important;
  background: var(--am-wash-danger);
  opacity: .7;
}

.am-row-removed input {
  text-decoration: line-through;
  color: var(--am-muted);
}

.am-removed-note {
  color: var(--am-rejected);
}


/* -------------------------------------------------------------------------
   Objection deadline badge in the navigation bar.

   Always visible when the count is non-zero, on every screen. The
   specification asks the system to keep reminding somebody until the
   objection paperwork is filled in, and a reminder that can be dismissed is
   one that gets dismissed on the first day and never seen again.
   ---------------------------------------------------------------------- */

.am-deadline-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

.am-deadline-label {
  font-size: .8125rem;
}

/* ----------------------------------------------------------------------
   Sortable column headings
   ----------------------------------------------------------------------
   Rendered by {% sort_header %}. Plain links, because the Content-Security-
   Policy forbids inline JavaScript - which turns out to be the better design
   anyway: a sorted table has a URL you can bookmark or send to a colleague,
   and the browser's own back button undoes it.

   The arrow is always in the DOM, faint when the column is not the active
   one. Showing it only on the active column makes every other heading shift
   sideways by a character the moment you click, and a table whose columns
   jump around on click reads as broken.
   ---------------------------------------------------------------------- */

.am-sort {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}

.am-sort:hover {
  color: var(--am-primary, inherit);
  text-decoration: underline;
}

.am-sort-arrow {
  font-size: .7rem;
  opacity: .3;
}

.am-sort-active {
  font-weight: 600;
}

.am-sort-active .am-sort-arrow {
  opacity: 1;
}

/* Keyboard users must be able to see where they are. The CSP means this is
   the only way focus can be indicated at all. */
.am-sort:focus-visible {
  outline: 2px solid var(--am-primary, #0d6efd);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ----------------------------------------------------------------------
   Dark theme
   ----------------------------------------------------------------------
   Set by static/js/theme.js, which writes data-bs-theme onto <html> before
   the page paints. Bootstrap 5.3 re-themes its own components from that same
   attribute, so what is left here is this project's palette and the few
   places that hardcode a colour.

   TWO SELECTORS, NOT ONE, and the difference matters:

     [data-bs-theme="dark"]                an explicit choice, always wins
     @media (prefers-color-scheme: dark)   the operating system's preference

   The script resolves both into the attribute, so the media query below is a
   fallback for the moment before the script runs and for the case where it
   cannot run at all. Guarded with :not([data-bs-theme="light"]) so that
   somebody who has deliberately chosen light on a dark laptop still gets
   light.

   THE PALETTE IS NOT AN INVERSION. Flipping the light values gives muddy
   near-black text on grey. These are chosen: a warm off-black ground that
   keeps the red readable on it, and a red lifted towards orange because the
   brand #b12528 is too dark to sit on a dark ground - at that value the
   navigation would read as a black bar.
   ---------------------------------------------------------------------- */

[data-bs-theme="dark"] {
  --am-red:         #fc424a;
  --am-red-dark:    #e02b34;
  --am-red-bright:  #ff7a80;
  --am-red-deep:    #7a1b1d;

  --am-grey:        #9aa1b4;
  --am-grey-mid:    #6c7293;

  --am-paper:       #0f1015;
  --am-ink:         #e9ecf1;
  --am-muted:       #8b90a5;
  --am-line:        #2a3038;

  --am-pending:     #ffab00;
  --am-approved:    #00d25b;
  --am-rejected:    #fc424a;
  --am-blocked:     #ff8f3f;

  --am-surface:      #191c24;
  --am-surface-alt:  #22262f;
  --am-wash-muted:   rgba(255,255,255,.06);
  --am-wash-danger:  #2a1a1e;

  --am-wash-pending:  rgba(255,171,0,.16);
  --am-wash-approved: rgba(0,210,91,.16);
  --am-wash-rejected: rgba(252,66,74,.16);
  --am-wash-blocked:  rgba(255,143,63,.16);
  --am-wash-accent:   rgba(0,144,231,.16);
  --am-wash-token:    rgba(252,66,74,.14);
  --am-navbar-bg:         #14161c;
  --am-navbar-line:       #262b36;
  --am-navbar-ink:        #9aa1b4;
  --am-navbar-ink-strong: #f2f4f8;
  --am-navbar-accent:     var(--am-red);
  --am-auth-bg: linear-gradient(160deg, #1b1f28 0%, #0b0c10 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --am-red:         #fc424a;
    --am-red-dark:    #e02b34;
    --am-red-bright:  #ff7a80;
    --am-red-deep:    #7a1b1d;

    --am-grey:        #9aa1b4;
    --am-grey-mid:    #6c7293;

    --am-paper:       #0f1015;
    --am-ink:         #e9ecf1;
    --am-muted:       #8b90a5;
    --am-line:        #2a3038;

    --am-pending:     #ffab00;
    --am-approved:    #00d25b;
    --am-rejected:    #fc424a;
    --am-blocked:     #ff8f3f;

    --am-surface:      #191c24;
    --am-surface-alt:  #22262f;
    --am-wash-muted:   rgba(255,255,255,.06);
    --am-wash-danger:  #2a1a1e;

    --am-wash-pending:  rgba(255,171,0,.16);
    --am-wash-approved: rgba(0,210,91,.16);
    --am-wash-rejected: rgba(252,66,74,.16);
    --am-wash-blocked:  rgba(255,143,63,.16);
    --am-wash-accent:   rgba(0,144,231,.16);
    --am-wash-token:    rgba(252,66,74,.14);
    --am-navbar-bg:         #14161c;
    --am-navbar-line:       #262b36;
    --am-navbar-ink:        #9aa1b4;
    --am-navbar-ink-strong: #f2f4f8;
    --am-navbar-accent:     var(--am-red);
    --am-auth-bg: linear-gradient(160deg, #1b1f28 0%, #0b0c10 100%);
  }
}


/* Bootstrap's dark card is a flat near-black. Lifting the surface off the
   page ground is what keeps a screen of stacked cards readable as separate
   things rather than one dark wall. */
/* Only Bootstrap's own .card is named here. Everything of this project's own
   now reads var(--am-surface), so each colour has ONE definition per theme
   rather than a light rule and a dark rule that can fall out of step - which
   is exactly how .am-tile was missed and the landing page shipped with pale
   text on white tiles. */
[data-bs-theme="dark"] .card {
  --bs-card-bg: var(--am-surface);
}

/* ----------------------------------------------------------------------
   The theme control itself
   ---------------------------------------------------------------------- */

.am-theme-switch {
  display: flex;
  gap: .25rem;
}

.am-theme-switch button {
  flex: 1;
  font-size: .75rem;
  padding: .2rem .4rem;
  border: 1px solid var(--am-line);
  background: transparent;
  color: inherit;
  border-radius: .25rem;
  cursor: pointer;
}

.am-theme-switch button.active {
  background: var(--am-red);
  border-color: var(--am-red);
  color: #fff;
}

.am-theme-switch button:focus-visible {
  outline: 2px solid var(--am-red);
  outline-offset: 1px;
}

/* ----------------------------------------------------------------------
   Panels that follow the theme
   ----------------------------------------------------------------------
   Bootstrap's `bg-white` and `bg-light` DO NOT. In 5.3 --bs-white-rgb is
   fixed, and --bs-light-rgb is 248,249,250 in the dark theme as well as the
   light one - they are named colours, not semantic ones. A template that
   reaches for them gets a permanently pale surface, which is how the contact
   rows, the engineer rows and the services list stayed white while the text
   on them went pale: three unreadable panels, on three different screens,
   from one wrong class.

   Use these instead of bg-white / bg-light on anything that is a surface.
   ---------------------------------------------------------------------- */

.am-panel     { background: var(--am-surface); }
.am-panel-alt { background: var(--am-surface-alt); }