/* ==========================================================================
   icloud_theme.css — iCloud-style surface language for the Manager and
   Supervisor modules.

   Scope: body.mgr-module (manager_base.html) and body.supervisor-module
   (applied by base.html when the request path starts with /supervisor).
   Loaded LAST in both bases so it wins specificity ties with the layers
   below it.

   What "iCloud style" means here, in six rules:

     1. AIRY NEUTRAL GROUND. Pages sit on the iCloud app-store grey (the
        --icloud-bg token), not on a gradient. Cards float on it as solid
        white surfaces.

     2. SOFT DEPTH, NOT GLOSS. One hairline + two soft shadows per card.
        No per-card backdrop-filter — the manager module's design layer
        removed glassmorphism for compositing cost, and that decision holds
        for data-dense surfaces. Frosted blur is reserved for the two chrome
        bars (manager header, supervisor navbar), where iCloud itself uses it.

     3. GENEROUS RADII. 18px cards, 12px controls — the iCloud roundness.

     4. BRAND AND STATUS UNTOUCHED. This file re-skins SURFACES only.
        --kinjo-action still drives buttons/links/focus (blue is interaction),
        the manager rail still carries status colour, green is still identity.
        Nothing here changes what a colour MEANS.

     5. LANGUAGE-AWARE BY CONSTRUCTION. Every offset uses CSS logical
        properties (inline-start/inline-end), so the Arabic (RTL) rendering
        mirrors exactly like the English one with zero duplicate rules.

     6. DARK MODE IS FIRST-CLASS. The colour tokens live in design-tokens.css
        (--icloud-*) and flip on html[data-theme="dark"]; this file only
        declares theme-neutral geometry (radii, blur) and rgba() overlays
        that carry no hue. Under prefers-reduced-motion the card transition
        is dropped entirely.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Geometry tokens — light and dark identical
   -------------------------------------------------------------------------- */
body.mgr-module,
body.supervisor-module {
  --icloud-hairline: rgba(0, 0, 0, 0.08);
  --icloud-hairline-strong: rgba(0, 0, 0, 0.14);
  --icloud-shadow-card:
    0 1px 1px rgba(0, 0, 0, 0.03),
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.06);
  --icloud-shadow-card-hover:
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.10);
  --icloud-shadow-focus: 0 0 0 3px rgba(30, 64, 175, 0.22);
  --icloud-radius-lg: 18px;
  --icloud-radius-md: 12px;
  --icloud-radius-pill: 980px;
  --icloud-blur-chrome: saturate(180%) blur(20px);

  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Naskh Arabic",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--icloud-text);
  background-color: var(--icloud-bg);
}

/* The manager shell paints its own ground; re-ground it. */
body.mgr-module.admin-container {
  background-color: var(--icloud-bg);
}

/* --------------------------------------------------------------------------
   2. Frosted chrome — the two bars iCloud is known for
   -------------------------------------------------------------------------- */

/* Manager: fixed admin header.
   layout.css's --admin-header-ink* tokens (design-tokens.css) are tuned for
   the header's ORIGINAL dark-navy background (--admin-header-bg) -- white
   text at 9.80:1. Repainting the background translucent white here without also
   repointing those tokens left every header control (nav toggle, logo
   wordmark, notification/language buttons, user name/role) rendering
   near-white text on a near-white background. Repointed at --icloud-text /
   --icloud-text-secondary, which are already the correct, WCAG-checked pair
   for --icloud-surface-chrome (and already flip correctly in dark mode, so
   this fix is theme-neutral by construction). */
body.mgr-module .admin-header {
  background: var(--icloud-surface-chrome);
  -webkit-backdrop-filter: var(--icloud-blur-chrome);
  backdrop-filter: var(--icloud-blur-chrome);
  border-bottom: 1px solid var(--icloud-hairline);
  --admin-header-ink: var(--icloud-text);
  --admin-header-ink-muted: var(--icloud-text-secondary);
  --admin-header-ink-soft: var(--icloud-text-secondary);
  --admin-header-hover: var(--icloud-hairline-strong);
  --admin-header-divider: var(--icloud-hairline-strong);
  --admin-header-border: var(--icloud-hairline);
}

/* Supervisor (and any base.html page in scope): fixed top navbar.
   Same bug, different component: .kinjo-navbar's own nav-link/brand colours
   (kinjo.css) are hardcoded white for its original blue-gradient background,
   not tokenised, so they need a direct override rather than a custom
   property repoint. */
body.supervisor-module .kinjo-navbar {
  background: var(--icloud-surface-chrome);
  -webkit-backdrop-filter: var(--icloud-blur-chrome);
  backdrop-filter: var(--icloud-blur-chrome);
  border-bottom: 1px solid var(--icloud-hairline);
  box-shadow: none;
}
body.supervisor-module .kinjo-navbar .navbar-brand,
body.supervisor-module .kinjo-navbar .navbar-brand:hover {
  color: var(--icloud-text);
}
body.supervisor-module .kinjo-navbar .nav-link {
  color: var(--icloud-text-secondary);
}
body.supervisor-module .kinjo-navbar .nav-link:hover,
body.supervisor-module .kinjo-navbar .nav-link:focus-visible {
  color: var(--icloud-text);
  background-color: var(--icloud-hairline-strong);
}
body.supervisor-module .kinjo-brand-icon {
  background: var(--icloud-hairline-strong);
  border-color: var(--icloud-hairline);
}
body.supervisor-module .kinjo-navbar .navbar-toggler {
  border-color: var(--icloud-hairline-strong);
}
body.supervisor-module .kinjo-navbar .navbar-toggler-icon {
  filter: none;
}

/* --------------------------------------------------------------------------
   3. Cards — one soft surface, hairline, generous radius
   -------------------------------------------------------------------------- */
body.mgr-module .card,
body.supervisor-module .card,
body.mgr-module .mgr-activity-card,
body.mgr-module .mgr-chart-card {
  background-color: var(--icloud-surface);
  border-radius: var(--icloud-radius-lg);
  /* Hairline via inset ring: survives Bootstrap's `border-0 !important`. */
  box-shadow:
    inset 0 0 0 1px var(--icloud-hairline),
    var(--icloud-shadow-card);
  transition: box-shadow 0.25s ease;
}

body.mgr-module .card:hover,
body.supervisor-module .card:hover {
  box-shadow:
    inset 0 0 0 1px var(--icloud-hairline),
    var(--icloud-shadow-card-hover);
}

/* Clickable action cards get the lift; plain cards only deepen slightly. */
body.mgr-module .mgr-action-card:hover {
  box-shadow:
    inset 0 0 0 1px var(--icloud-hairline),
    var(--icloud-shadow-card-hover);
}

body.mgr-module .card-header,
body.supervisor-module .card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--icloud-hairline);
  border-start-start-radius: calc(var(--icloud-radius-lg) - 1px);
  border-start-end-radius: calc(var(--icloud-radius-lg) - 1px);
}

body.mgr-module .card-footer,
body.supervisor-module .card-footer {
  background-color: transparent;
  border-top: 1px solid var(--icloud-hairline);
}

/* Cards that Bootstrap paints (bg-white / bg-primary-subtle / bg-transparent)
   come back to the iCloud surface unless the page deliberately tints them. */
body.supervisor-module .card.bg-white {
  background-color: var(--icloud-surface);
}

/* Muted copy on any surface in scope. */
body.mgr-module .text-muted,
body.supervisor-module .text-muted,
body.mgr-module .text-secondary,
body.supervisor-module .text-secondary {
  color: var(--icloud-text-secondary);
}

/* --------------------------------------------------------------------------
   4. Controls — rounded, quiet, one focus ring
   -------------------------------------------------------------------------- */
body.mgr-module .btn,
body.supervisor-module .btn {
  border-radius: var(--icloud-radius-md);
}

body.mgr-module .btn-pill,
body.supervisor-module .btn-pill {
  border-radius: var(--icloud-radius-pill);
}

body.mgr-module .btn:focus-visible,
body.supervisor-module .btn:focus-visible,
body.mgr-module .form-control:focus,
body.supervisor-module .form-control:focus,
body.mgr-module .form-select:focus,
body.supervisor-module .form-select:focus {
  box-shadow: var(--icloud-shadow-focus);
  border-color: var(--kinjo-action);
  outline: 0;
}

body.mgr-module .form-control,
body.mgr-module .form-select,
body.supervisor-module .form-control,
body.supervisor-module .form-select {
  border-radius: var(--icloud-radius-md);
  border-color: var(--icloud-hairline-strong);
  background-color: var(--icloud-surface);
}

/* --------------------------------------------------------------------------
   5. Data tables — hairline rows, quiet headers
   -------------------------------------------------------------------------- */
body.mgr-module .table,
body.supervisor-module .table {
  --bs-table-border-color: var(--icloud-hairline);
}

body.mgr-module .table thead th,
body.supervisor-module .table thead th {
  color: var(--icloud-text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--icloud-hairline-strong);
}

/* --------------------------------------------------------------------------
   6. Badges & chips — pill geometry, Apple-soft
   -------------------------------------------------------------------------- */
body.mgr-module .badge,
body.supervisor-module .badge {
  border-radius: var(--icloud-radius-pill);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Dark mode — the --icloud-* colour tokens flip on the theme attribute
      (see design-tokens.css); only the neutral overlays need re-declaring.
   -------------------------------------------------------------------------- */
[data-theme="dark"] body.mgr-module,
[data-theme="dark"] body.supervisor-module {
  --icloud-hairline: rgba(255, 255, 255, 0.12);
  --icloud-hairline-strong: rgba(255, 255, 255, 0.20);
  --icloud-shadow-card:
    0 1px 1px rgba(0, 0, 0, 0.20),
    0 2px 6px rgba(0, 0, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.35);
  --icloud-shadow-card-hover:
    0 2px 4px rgba(0, 0, 0, 0.24),
    0 12px 32px rgba(0, 0, 0, 0.42);
  --icloud-shadow-focus: 0 0 0 3px rgba(100, 140, 255, 0.30);
}

/* --------------------------------------------------------------------------
   8. Reduced motion — honour the OS preference.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.mgr-module .card,
  body.supervisor-module .card {
    transition: none;
  }
}