/* ============================================================================
   סיפורון · admin-theme.css
   Brings the nine staff tools onto the site's design language: a CREAM page,
   white cards, a night top bar, gold for the one action that matters.

   HOW THIS WORKS, AND WHY IT IS SAFE
   Each tool already ships its own <style> block. This file is linked AFTER it,
   so at equal specificity these rules win — and nothing else has to change. No
   markup is edited, no selector renamed, no gate or query touched. Removing the
   one <link> puts every page back exactly as it was.

   It works because the nine pages share a vocabulary: body (9/9), .wrap and .nav
   (8/9), .btn, .gate, table and th/td (7/9), .pill and .muted (6/9), .tablewrap
   (5/9), .card (4/9). Anything a page invents for itself keeps its own styling,
   which is why this is an overlay rather than a rewrite.

   WHY THE TOOLS WERE DARK, AND WHY THAT CHANGES NOW
   They were dark because they predate the redesign, not because dark suited
   them. The site is cream with night panels; a staff member moving from the
   library to the admin should not feel they have left the product. Dense tables
   read at least as well on white, and better in daylight — which is when anyone
   is actually doing admin.
   ========================================================================== */

:root {
  --at-page:#faf4e8;      /* --paper  */
  --at-card:#ffffff;
  --at-ink:#211a30;       /* --ink    */
  --at-muted:#716979;
  --at-line:rgba(33,26,48,.12);
  --at-night:#070b24;
  --at-gold:#f5c55a;
  --at-gold2:#ffe3a1;
  --at-coral:#c2410c;     /* readable on light, unlike the on-dark coral */
  --at-ok:#166534;

  /* ---- THE PAGES' OWN TOKENS, REPOINTED ---------------------------------
     Each tool defines --paper, --mist, --lamp-soft and --lamp for a DARK page,
     then uses them as text colours hundreds of times. On a cream page that is
     pale gold on cream — the "הודעה פרסומית" heading was the visible symptom,
     and there were 86 more uses waiting to look the same.

     Repointing the tokens fixes every one of those at once, rather than chasing
     individual rules. Checked before doing it: --paper (30 uses), --mist (45)
     and --lamp-soft (11) are used ONLY as colours, never as a background, so
     nothing can turn muddy.

     --lamp is the exception: 31 uses as text but 9 as a background. Darkening it
     makes all 31 readable and costs four explicit background rules, which is a
     far better trade than 31 individual colour overrides. Those four are
     restored to real gold immediately below. */
  --paper:#211a30 !important;      /* was the light text on dark  -> ink        */
  --mist:#716979 !important;       /* secondary text                            */
  --lamp-soft:#7a4c0c !important;  /* emphasis text -> a gold dark enough to read */
  --lamp:#8a5510 !important;       /* accents and links                          */
}

/* The handful of places that used --lamp as a FILL, not as text. Without these
   the darkened token would turn every gold pill and chip into brown. */
.toolbar button.on,
.seg button.on,
ol.steps > li::before {
  background: linear-gradient(135deg,#ffe18d,var(--at-gold)) !important;
  color: #302000 !important;
  border-color: transparent !important;
}
/* bulk-import's primary action is a bare .btn with a gold fill; the generic
   .btn rule below would otherwise leave its main button looking secondary. */
#startBtn {
  background: linear-gradient(135deg,#ffe18d,var(--at-gold)) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  color: #302000 !important;
}

/* ---- the page ---- */
body {
  background: var(--at-page) !important;
  color: var(--at-ink) !important;
}

h1, h2, h3 { color: var(--at-ink); }
a { color: #8a5510; }

.sub, .muted, .hint, .note { color: var(--at-muted) !important; }

/* ---- the top bar stays night, like the header on every public page ---- */
.nav {
  background: var(--at-night) !important;
  border-bottom: 1px solid rgba(245,197,90,.14) !important;
  backdrop-filter: none !important;
}
/* Everything inside the bar, not a list of the elements I happened to think of.
   Repointing --paper to ink is right for the cream page but wrong for the one
   surface that is still night, and a bare <strong> in reports-admin's bar was
   left as ink-on-night at 1.2:1 by an earlier, narrower version of this rule.
   The .btn rule below is more specific, so it still wins for buttons. */
.nav, .nav * { color: #fff4dc !important; }
.nav .muted, .nav .sub { color: #cbc8dc !important; }
.nav .btn {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff4dc !important;
}
.nav .btn:hover { border-color: var(--at-gold) !important; color: var(--at-gold2) !important; }

/* ---- surfaces ---- */
.card, .box, .gate, .stat, .tablewrap, #upgBox {
  background: var(--at-card) !important;
  border: 1px solid var(--at-line) !important;
  color: var(--at-ink) !important;
  box-shadow: 0 18px 40px -32px rgba(33,26,48,.45);
}
.gate p, .card p, .box p { color: var(--at-muted); }
.gate pre {
  background: #f4efe4 !important;
  border: 1px solid var(--at-line) !important;
  color: #4a3d1a !important;
}

/* ---- stat tiles: LAYOUT lives here now, not only in admin.html --------------
   .stats/.stat were declared inline in admin.html and nowhere else, so this
   file could only ever re-colour them — any other staff page wanting the same
   tile had to redeclare the grid. Moving the layout here makes the tile
   genuinely shared (admin.html and site-health.html both use it).

   These rules are byte-equivalent to what admin.html already declares, so that
   page renders identically; its own copy simply becomes redundant rather than
   conflicting. Deliberately NOT !important — a page that needs a different
   column width should be able to say so. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat { border-radius: 14px; padding: 14px 16px; }
.stat .n { color: #8a5510 !important; font-family: "Suez One", serif; font-size: 1.8rem; }
.stat .l { color: var(--at-muted) !important; font-size: .85rem; }

/* 320px is the narrowest phone still in real use. Two columns of 120px plus a
   12px gap needs 252px of content box, which fits — but a long Hebrew label
   would otherwise force a horizontal scrollbar on the whole page. */
@media (max-width: 380px) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
  .stat { padding: 12px 12px; }
  .stat .n { font-size: 1.5rem; }
}

/* ---- reports: each one its own card ----------------------------------------
   .report was built for the dark page — a white border at .14 and a white fill
   at .06. Both vanish on cream, so the reports read as flat rows divided by a
   hairline instead of as separate items. Same surface treatment as .card, with
   a little more padding because these hold a paragraph of free text. */
.reports { gap: 14px !important; }
.report {
  background: var(--at-card) !important;
  border: 1px solid var(--at-line) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  box-shadow: 0 18px 40px -32px rgba(33,26,48,.45);
}
.report h2 { color: var(--at-ink) !important; }
.report .date { color: var(--at-muted) !important; }
.report .message { color: #3a3348 !important; }

/* the controls: the <select> already picked up the theme's input rule, but the
   bare <button>s did not and kept the dark-page navy, so the two sat side by
   side looking unrelated. */
.report .actions button {
  background: #fff !important;
  border: 1px solid rgba(33,26,48,.2) !important;
  color: var(--at-ink) !important;
  cursor: pointer;
}
.report .actions button:hover { border-color: #b8912f !important; color: #7a5c12 !important; }
.report .actions .delete {
  border-color: rgba(194,65,12,.45) !important;
  color: var(--at-coral) !important;
}
.report .actions .delete:hover {
  background: rgba(194,65,12,.07) !important;
  border-color: var(--at-coral) !important;
  color: var(--at-coral) !important;
}

/* ---- tables: white, with a faint header band ---- */
table { color: var(--at-ink); }
th {
  background: #f6f1e6 !important;
  color: var(--at-muted) !important;
  border-bottom: 1px solid var(--at-line) !important;
}
td { border-bottom: 1px solid rgba(33,26,48,.08) !important; }
tr.me td { background: rgba(245,197,90,.14) !important; }
tbody tr:hover td { background: rgba(33,26,48,.03); }

/* ---- controls ---- */
input[type=text], input[type=email], input[type=url], input[type=search],
input[type=date], input[type=number], input[type=password],
textarea, select, .search {
  background: #fff !important;
  border: 1px solid rgba(33,26,48,.18) !important;
  color: var(--at-ink) !important;
}
input::placeholder, textarea::placeholder { color: #9a93a4 !important; }
input:focus, textarea:focus, select:focus, .search:focus {
  outline: 2px solid var(--at-gold) !important;
  border-color: transparent !important;
}
select option { color: #000; }
input[type=file] { color: var(--at-muted) !important; }

/* ---- buttons ---- */
.btn {
  background: #fff !important;
  border: 1px solid rgba(33,26,48,.2) !important;
  color: var(--at-ink) !important;
}
.btn:hover { border-color: #b8912f !important; color: #7a5c12 !important; }
.btn.gold, .btn-gold, .btn-primary {
  background: linear-gradient(135deg,#ffe18d,var(--at-gold)) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  color: #302000 !important;
  box-shadow: 0 14px 30px -16px rgba(245,197,90,.8);
}
.btn.gold:hover, .btn-gold:hover, .btn-primary:hover { color: #302000 !important; filter: brightness(.98); }
.btn.danger, .btn-danger {
  background: #fff !important;
  border-color: rgba(194,65,12,.45) !important;
  color: var(--at-coral) !important;
}
.btn:disabled, .btn.disabled {
  background: #efe6d6 !important;
  border-color: var(--at-line) !important;
  color: var(--at-muted) !important;
}

/* ---- small type ---- */
.pill { background: rgba(245,197,90,.24) !important; color: #7a4c0c !important; }
.pill.live, .pill.ok { background: rgba(22,120,60,.14) !important; color: var(--at-ok) !important; }
.pill.queued { background: rgba(33,26,48,.08) !important; color: var(--at-muted) !important; }
.tag.customer { background: rgba(33,26,48,.07) !important; color: var(--at-muted) !important; }
.tag.tester   { background: rgba(194,65,12,.12) !important; color: var(--at-coral) !important; }
.tag.developer{ background: rgba(37,99,235,.12) !important; color: #1d4ed8 !important; }
.tag.admin    { background: rgba(245,197,90,.26) !important; color: #7a4c0c !important; }

.msg.ok, .ok { color: var(--at-ok) !important; }
.msg.err, .bad, .err { color: var(--at-coral) !important; }

code { background: rgba(33,26,48,.07) !important; color: #4a3d1a !important; }

/* ---- the progress bar in bulk-import ---- */
.bar { background: rgba(33,26,48,.1) !important; }

/* ---- the sidebar is its own thing and stays night; only make sure the page
        underneath does not fight it ---- */
body.snav-on { background: var(--at-page) !important; }

/* ---- respect a reduced-motion preference for the hover tint ---- */
@media (prefers-reduced-motion: reduce) {
  tbody tr:hover td { background: transparent; }
}