/* ============================================================
   Gradual facelift — six small steps from the current app to the
   design used in the native build. js/facelift.js decides which
   steps are on; they are cumulative (fl-3 means fl-1 + fl-2 + fl-3).

   The order is deliberate: the steps nobody can really object to come
   first (spacing, colour), and the ones that change what a screen IS
   come last, by which point the palette already feels normal.

   Phase 1  softer geometry          — corners, spacing, lighter shadows
   Phase 2  the palette              — clinic navy/blue -> iris blue, cooler greys
   Phase 3  typography               — tracked uppercase labels, lighter figures
   Phase 4  flatter surfaces         — hairlines instead of drop shadows
   Phase 5  the punch button         — becomes the anatomical iris
   Phase 6  the home hero            — stats become one dark viewing field

   Nothing here changes behaviour. Every rule is presentational, so a
   phase can be switched off at any time with no data consequence.
   ============================================================ */

/* ---------- Phase 1 · softer geometry ---------- */
.fl-1 {
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(11, 29, 58, .04), 0 4px 14px rgba(11, 29, 58, .05);
  --shadow-lift: 0 2px 6px rgba(11, 29, 58, .07), 0 10px 26px rgba(11, 29, 58, .09);
}
.fl-1 .card { padding: 18px; }
.fl-1 .stat-grid, .fl-1 .action-grid { gap: 12px; }

/* ---------- Phase 2 · the palette ---------- */
.fl-2 {
  --primary: #1B6FE8;        /* iris */
  --primary-dark: #1358BE;
  --teal: #0FB5C9;           /* limbal ring */
  --bg: #F6F8FC;             /* sclera */
  --ink: #0C1B30;
  --muted: #66778C;
  --line: #E4EAF2;
  --green: #12A05C;
  --amber: #E2912A;
  --red: #D64550;
}

/* ---------- Phase 3 · typography ---------- */
/* Section headings become small, wide-tracked labels so they introduce a
   number without competing with it. */
.fl-3 .shortcut-head,
.fl-3 .section-head,
.fl-3 .bal-head {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
/* Figures get lighter and tabular, so columns of times stop jittering. */
.fl-3 .stat-num {
  font-weight: 300;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.fl-3 .tot b { font-weight: 300; font-variant-numeric: tabular-nums; }

/* ---------- Phase 4 · flatter surfaces ---------- */
.fl-4 .card {
  box-shadow: none;
  border: 1px solid var(--line);
}
.fl-4 .card:hover { box-shadow: none; }
.fl-4 { --navy: #07142B; --navy-2: #0E2242; }

/* ---------- Phase 5 · the punch button becomes an iris ---------- */
/* The pupil is the state: wide open while on the clock, small when not.
   Built from the gradient the stylesheet already defines, so this adds no
   images and no markup. */
.fl-5 .iris-punch,
.fl-5 .iris-ring {
  background: radial-gradient(circle at 38% 34%,
                rgba(255, 255, 255, .55) 0 3%,
                rgba(255, 255, 255, 0) 12%),
              radial-gradient(circle at 50% 50%,
                #07142B 0 20%,
                #1B6FE8 21% 46%,
                #0FB5C9 47% 52%,
                #07142B 53%);
  box-shadow: 0 2px 10px rgba(7, 20, 43, .35);
}
.fl-5 .iris-punch > *, .fl-5 .iris-ring > * { opacity: .9; }
/* Clocked in — the pupil dilates. The class is set by the app when it knows
   the state; without it the button simply keeps the resting look. */
.fl-5 .iris-punch.is-in {
  background: radial-gradient(circle at 38% 34%,
                rgba(255, 255, 255, .55) 0 3%,
                rgba(255, 255, 255, 0) 12%),
              radial-gradient(circle at 50% 50%,
                #07142B 0 38%,
                #1B6FE8 39% 46%,
                #0FB5C9 47% 52%,
                #07142B 53%);
}

/* ---------- Phase 6 · the home hero ---------- */
/* The three stat cards become one dark viewing field: the bright app with a
   single dark instrument in it, which is the whole idea of the new design. */
.fl-6 .stat-grid {
  background: linear-gradient(180deg, #07142B, #0E2242);
  border-radius: 26px;
  padding: 18px 12px;
  gap: 0;
}
.fl-6 .stat-grid .card.stat {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 10px 8px;
}
.fl-6 .stat-grid .stat-num { color: #0FB5C9; }
.fl-6 .stat-grid .stat-label { color: rgba(255, 255, 255, .55); }
.fl-6 .stat-grid .stat-icon { filter: saturate(.85) brightness(1.15); }
.fl-6 .welcome-card { border: 0; box-shadow: none; background: transparent; padding-inline: 0; }

/* Respect a reduced-motion preference: nothing here animates, but any
   transition the base stylesheet adds should stay calm during the change. */
@media (prefers-reduced-motion: reduce) {
  .fl-1 *, .fl-2 *, .fl-3 *, .fl-4 *, .fl-5 *, .fl-6 * {
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   ADMIN PANEL
   Only Omar, Dr. Ibrahim, Rawan and Ali ever see this, and they
   asked for it all at once — so admin.html forces the final phase
   instead of waiting for the staff schedule. These rules sit on
   top of fl-1…fl-6 and cover the pieces the staff app does not
   have: the sidebar, the data tables and the form controls.
   ============================================================ */

/* The sidebar becomes the same dark field as the punch card, with the
   selected item marked by a filled pill rather than a border sliver. */
.fl-4 .admin-side {
  background: linear-gradient(180deg, #07142B, #0E2242);
  padding: 16px 10px;
}
.fl-4 .admin-side h1 {
  font-size: .95rem;
  letter-spacing: .2px;
  padding: 4px 12px 18px;
}
.fl-4 .admin-side a {
  border-radius: 12px;
  border-inline-start: 0;
  padding: 9px 12px;
  margin-bottom: 2px;
  color: #93A6BF;
}
.fl-4 .admin-side a:hover { background: rgba(255, 255, 255, .06); }
.fl-4 .admin-side a.active {
  background: rgba(27, 111, 232, .22);
  color: #fff;
  border-inline-start: 0;
  border-bottom-color: transparent;
}
/* Group headings match the eyebrow labels used everywhere else. */
.fl-4 .admin-side .menu-group {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.fl-4 .admin-side .menu-group { color: #5C708C; padding: 16px 12px 5px; }

/* Tables: hairlines instead of a shaded header strip, so rows of
   numbers read as data rather than as a spreadsheet. */
.fl-4 .grid {
  box-shadow: none;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.fl-4 .grid th {
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.fl-4 .grid td { border-bottom: 1px solid var(--line); }
.fl-4 .grid tr:last-child td { border-bottom: 0; }
.fl-4 .grid tr:hover td { background: #F3F7FC; }
/* Figures in tables line up and stop jittering between rows. */
.fl-3 .grid td { font-variant-numeric: tabular-nums; }

/* Controls: same geometry as the cards around them. */
.fl-4 .admin-main input,
.fl-4 .admin-main select,
.fl-4 .admin-main textarea {
  border-radius: 12px;
  border: 1px solid var(--line);
}
.fl-4 .admin-main .btn { border-radius: 12px; }
.fl-4 .admin-main h2 {
  font-size: 1.15rem;
  letter-spacing: -.2px;
}

/* The panel's own background, so the white cards have something to sit on. */
.fl-2 .admin-main { background: var(--bg); }