/* ============================================================================
   access-control.css — styles for the shared access gate (access-control.js).
   Kept in a real stylesheet (not JS-injected) so it works under a strict
   Content-Security-Policy (style-src 'self'), which WD Logistics enforces via
   a meta tag. Inline style="" attributes and injected <style> blocks would be
   refused under that CSP; a same-origin .css file is allowed.
   Uses the host app's Design System v2 CSS variables with safe fallbacks.
   ============================================================================ */
/* ---- Suite palette — the gate used to own a royal-blue palette of its own,
   which meant signing in and then landing on the teal dashboard looked like
   two different products. It now runs on the same accent and navy as
   theme-glass.css (--gl-accent #0e7c8b, --gl-navy #0b2229) and follows the
   light/dark theme instead of being permanently light.

   Both theme mechanisms in the suite are matched, exactly as theme-glass.css
   does, so a fix for one cannot leak into the other:
     - MPFC / Sales:            <html data-theme="light|dark">
     - WD Logistics / Finished Goods: <body class="dark-mode"> (light = absent)
   The base values below are the dark ones, matching each app's own
   pre-theme-resolution default. ---- */
.ac-overlay{--ac-navy:#0b2229;--ac-navy-2:#0f2c35;
  /* Deep Ocean — these three DO render (button gradient, focus ring, top
     bar), unlike the surface vars below which theme-glass.css supersedes. */
  --ac-accent:#0e7c8b;--ac-accent-2:#0a616d;--ac-accent-bright:#35a3b5;
  /* Fallbacks only -- theme-glass.css (loaded LAST on every page that
     mounts this gate; see its own header comment, which already lists
     "the shared login overlay" as one of its targets) sets .ac-card's
     actual background/border/shadow/color via --panel-2/--line/--text
     with !important, at higher specificity than the bare .card rule it
     also ships. These vars only take effect if theme-glass.css is ever
     missing from a page. */
  --ac-surface:#101c25;--ac-surface-2:#1d3040;--ac-line:rgba(255,255,255,.13);
  --ac-text:#e7eff4;--ac-muted:#8ea3b0;--ac-link:#35a3b5;--ac-err:#f0838d;
  --ac-logo-plate:#fff;--ac-logo-pad:8px 14px;
  position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:24px;overflow:auto;
  /* Also superseded by theme-glass.css's flat rgba(4,10,14,.55) scrim on
     .ac-overlay -- kept as the no-theme-glass fallback for the same reason. */
  background:rgba(4,10,14,.55);
  font-family:"IBM Plex Sans Arabic","Segoe UI","Noto Sans Arabic",Tahoma,system-ui,sans-serif}
/* ---- LIGHT ---- */
:root[data-theme="light"] .ac-overlay,
[data-theme="light"] .ac-overlay,
html:not([data-theme]) body:not(.dark-mode) .ac-overlay{
  --ac-surface:#ffffff;--ac-surface-2:#e8eff4;--ac-line:#d8e3ea;
  --ac-text:#10202b;--ac-muted:#566b78;--ac-link:#0e7c8b;--ac-err:#b3222e;
  /* The logo is a fixed-colour raster; on a white card it needs no plate. */
  --ac-logo-plate:transparent;--ac-logo-pad:0}
/* ---- DARK ---- */
:root[data-theme="dark"] .ac-overlay,
[data-theme="dark"] .ac-overlay,
html:not([data-theme]) body.dark-mode .ac-overlay{
  --ac-surface:#101c25;--ac-surface-2:#1d3040;--ac-line:rgba(255,255,255,.13);
  --ac-text:#e7eff4;--ac-muted:#8ea3b0;--ac-link:#35a3b5;--ac-err:#f0838d;
  --ac-logo-plate:#fff;--ac-logo-pad:8px 14px}
/* --panel-2/--line/--text are theme-glass.css's own tokens (already
   light/dark branched there); --ac-surface/--ac-line/--ac-text are the
   fallback if that stylesheet is ever absent. --ac-surface here matches
   what theme-glass.css will actually paint (--panel-2), NOT a lighter
   "primary surface" tone, so .ac-field input below (--ac-surface-2, one
   tier darker/lighter than this) stays visibly distinct from the card
   instead of blending into it. */
.ac-card{background:var(--panel-2,var(--ac-surface));color:var(--text,var(--ac-text));
  border:1px solid var(--line,var(--ac-line));
  border-radius:16px;box-shadow:0 20px 50px rgba(4,14,18,.42);width:100%;max-width:400px;
  padding:32px 28px 24px;text-align:center;position:relative;overflow:hidden}
.ac-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--ac-accent-2),var(--ac-accent),var(--ac-accent-bright))}
.ac-card-wide{max-width:none;margin-top:14px;text-align:start;padding:24px}
.ac-card-wide::before{display:none}
/* login brand: the official logo (shown as-is, never cropped); wordmark is the
   fallback if the image file is missing. The logo artwork is a fixed-colour
   raster, so instead of recolouring it, dark mode sets it on a light plate --
   the same treatment the WD sidebar already gives it. */
.ac-brand{margin:4px 0 2px;min-height:70px;display:flex;align-items:center;justify-content:center}
.ac-brand-img{max-width:250px;max-height:120px;width:auto;height:auto;object-fit:contain;display:block;
  background:var(--ac-logo-plate);padding:var(--ac-logo-pad);border-radius:12px}
.ac-brand-wordmark{display:none;font-weight:800;font-size:26px;letter-spacing:.01em;line-height:1;
  background:linear-gradient(135deg,var(--ac-accent-2),var(--ac-accent),var(--ac-accent-bright));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ac-h{font-size:20px;font-weight:700;margin:14px 0 4px;color:var(--ac-text)}
.ac-sub{font-size:12.5px;color:var(--ac-muted);margin-bottom:20px;line-height:1.5}
.ac-field{margin-bottom:13px;text-align:start}
.ac-field label{display:block;font-size:12px;color:var(--ac-muted);margin-bottom:5px}
.ac-field input{width:100%;background:var(--panel-3,var(--ac-surface-2));border:1px solid var(--line,var(--ac-line));
  color:var(--text,var(--ac-text));font:inherit;font-size:14px;padding:10px 12px;border-radius:9px;transition:border-color .15s,box-shadow .15s}
.ac-field input:focus{outline:none;border-color:var(--ac-accent-bright);box-shadow:0 0 0 3px rgba(14,124,139,.26)}
.ac-pw{position:relative}
.ac-pw button{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--ac-link);font-size:11px;font-weight:600;cursor:pointer}
.ac-btn{width:100%;background:linear-gradient(135deg,var(--ac-accent),var(--ac-accent-2));color:#fff;border:none;
  font:inherit;font-weight:700;font-size:14px;padding:12px;border-radius:10px;cursor:pointer;margin-top:8px;
  box-shadow:0 6px 16px rgba(15,109,125,.32);transition:filter .15s,transform .05s}
.ac-btn:hover{filter:brightness(1.1)}
.ac-btn:active{transform:translateY(1px)}
.ac-btn:focus-visible{outline:2px solid var(--ac-accent-bright);outline-offset:2px}
.ac-err{color:var(--bad,var(--ac-err));font-size:12.5px;margin-top:10px;min-height:16px}
.ac-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--ac-line);
  font-size:10.5px;color:var(--ac-muted);line-height:1.55}
.ac-foot-plain{margin-top:16px;font-size:10.5px;color:var(--ac-muted);line-height:1.55}
.ac-copyright{margin-top:12px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--ac-link);opacity:.85}
/* discreet in-app copyright, bottom corner, never blocks clicks */
/* direction:ltr because the credit is a fixed Latin string — under dir="rtl"
   bidi reorders it to "developed by @waliddiab — 2026 ©", moving the © and
   the year to the wrong end of the line. */
.ac-site-credit{position:fixed;bottom:6px;left:10px;z-index:5;font-size:10px;font-weight:600;
  letter-spacing:.02em;color:var(--muted,#7a8ba0);opacity:.55;pointer-events:none;
  direction:ltr;background:rgba(127,139,160,.08);padding:2px 8px;border-radius:10px}
.ac-langtoggle{position:absolute;top:12px;inset-inline-end:12px;z-index:2;
  background:var(--panel-3,var(--ac-surface-2));border:1px solid var(--line,var(--ac-line));color:var(--ac-link);
  font:inherit;font-size:11px;font-weight:600;padding:4px 10px;border-radius:7px;cursor:pointer}
.ac-langtoggle:hover{filter:brightness(1.08)}

/* admin page */
/* The users and activity tables carry more columns than a phone is wide, so
   each block scrolls on its own axis -- without this the table pushed the
   whole page into horizontal scroll on mobile (in all four apps, since this
   admin panel is shared). The headings/buttons outside these containers stay
   fixed in place. */
#acUserList,#acUserEditor,.ac-activity{overflow-x:auto}
.ac-admin table{width:100%;border-collapse:collapse;font-size:13px}
.ac-admin th,.ac-admin td{padding:9px 10px;border-bottom:1px solid var(--line,#dde4ec);text-align:start}
.ac-admin th{color:var(--muted,#4a5a70);font-size:11.5px;text-transform:uppercase}
.ac-chip{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:20px;
  background:var(--teal-tint,#e6f2f0);color:var(--teal,#1a8079);font-weight:600}
.ac-pagegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:8px 0}
.ac-pagegrid label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text,#1a2432)}
.ac-mini{padding:5px 11px;font-size:12px;border-radius:7px;border:1px solid var(--line,#dde4ec);
  background:var(--ink,#f4f6f9);color:var(--text,#1a2432);cursor:pointer;font:inherit}
.ac-mini.primary{background:var(--teal,#1a8079);color:#fff;border-color:var(--teal,#1a8079)}
.ac-mini.danger{color:var(--bad,#c02a37);border-color:var(--bad,#c02a37)}

/* small layout helpers (replace former inline styles for CSP compliance) */
.ac-row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ac-h0{margin:0}
.ac-subname{font-size:11px;color:var(--muted,#7a8ba0)}
.ac-end{text-align:end;white-space:nowrap}
.ac-lastlogin{font-size:11.5px;color:var(--muted,#7a8ba0)}
.ac-check-row{display:flex;align-items:center;gap:8px;font-size:13px;margin:8px 0}
.ac-pages-lbl{font-size:12px;color:var(--muted,#4a5a70);margin:6px 0}
.ac-actions{display:flex;gap:8px;margin-top:8px}

/* module -> screens permission accordion (admin editor) */
.ac-mod{border:1px solid var(--line,#dde4ec);border-radius:9px;margin:8px 0;overflow:hidden}
.ac-mod-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;background:var(--ink,#f4f6f9)}
.ac-mod-toggle{flex:1;display:flex;align-items:center;gap:8px;background:none;border:0;
  cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;color:var(--text,#1a2432);text-align:start;padding:0}
.ac-mod-caret{font-size:11px;color:var(--muted,#4a5a70);width:12px;display:inline-block}
.ac-mod-count{font-size:10.5px;padding:2px 8px;border-radius:20px;font-weight:600;
  background:var(--teal-tint,#e6f2f0);color:var(--teal,#1a8079)}
.ac-mod-all{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted,#4a5a70);white-space:nowrap;cursor:pointer}
.ac-mod-templates{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;border-top:1px dashed var(--line,#dde4ec)}
.ac-mod-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;padding:10px}
.ac-mod-body.ac-collapsed{display:none}
.ac-screen{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text,#1a2432)}
.ac-disabled{opacity:.4;pointer-events:none}
.ac-admin-hint{display:none;font-size:12px;color:var(--muted,#4a5a70);
  background:var(--teal-tint,#e6f2f0);border-radius:7px;padding:8px 10px;margin:6px 0}
.ac-admin-hint.ac-show{display:block}

/* shared upload-activity log (admin) */
.ac-activity{margin-top:22px;padding-top:16px;border-top:1px solid var(--line,#dde4ec)}
.ac-activity table{width:100%;border-collapse:collapse;margin-top:8px}
.ac-activity th,.ac-activity td{padding:8px 10px;border-bottom:1px solid var(--line,#dde4ec);text-align:start;font-size:12.5px}
.ac-activity th{color:var(--muted,#4a5a70);font-size:11px;text-transform:uppercase;letter-spacing:.02em}

/* danger zone: reset all data (admin) */
.ac-danger{margin-top:22px;padding:14px;border:1px solid var(--bad,#c02a37);border-radius:9px;
  background:rgba(192,42,55,.05)}
.ac-danger .ac-h0{color:var(--bad,#c02a37)}
.ac-mini.danger.armed{background:var(--bad,#c02a37);color:#fff;font-weight:700}

@media (prefers-reduced-motion:reduce){.ac-btn{transition:none}}
