/* =============================================================================
   Massaaz.eu – Staff chrome: the admin panel and the master's cabinet
   =============================================================================

   One stylesheet for both, because they are one product. Until now the panel
   carried ~150 lines of CSS inline in admin/_layout.php and the cabinet carried
   a different ~60 inline in master/_shell.php, so the two drifted: different
   navigation, different type scale, different idea of what a card is. A master
   promoted to admin crossed a visible seam.

   It also means the mobile work below is written once instead of twice.

   Loaded after style.css, which supplies the --color-* variables.

   ── The mobile rule that shapes this file ──────────────────────────────────
   Under 900px the sidebar leaves the layout entirely and slides in over the
   content. It used to stay as a 68px icon strip, which on a 360px phone is a
   fifth of the screen given to navigation nobody is reading, and it pushed
   every table into a horizontal scroll. Off-canvas gives the content the whole
   width and costs one tap.
   ========================================================================== */

:root {
  --rail: 240px;
  --rail-min: 68px;

  /* The cabinet's own palette. Kept under the old names because the cabinet
     pages carry inline <style> blocks that reference them — schedule.php draws
     a calendar with --line and --tint, devices.php colours state pills with
     --ok and --stop. Renaming them would be a silent breakage. */
  --dark:  #2d2420;
  --text:  #3d3530;
  --muted: #7a6e65;
  --accent:#8b7355;
  --gold:  #c9a96e;
  --line:  #e8ddd0;
  --tint:  #f4efe7;
  --page:  #f9f6f0;
  --ok:    #4a7c59;
  --stop:  #a8483c;
  --wait:  #8b7355;
}

body.staff { background: #f0ede8; margin: 0; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.staff-layout { display: flex; min-height: 100vh; }

.staff-sidebar {
  width: var(--rail); flex-shrink: 0; background: var(--color-dark, #2d2420);
  padding: 1.25rem 0; position: fixed; top: 0; left: 0; bottom: 0;
  overflow-x: hidden; overflow-y: auto; z-index: 60;
  transition: width .18s ease, transform .22s ease;
}
.staff-main {
  margin-left: var(--rail); padding: 2rem; flex: 1; min-width: 0;
  transition: margin-left .18s ease;
}

/* Collapsed on a desktop: icons only. The class lives on <html> and is set by
   the inline script in the head, so a reloaded page does not flash the wide
   rail and then snap shut. */
html.rail-collapsed .staff-sidebar { width: var(--rail-min); }
html.rail-collapsed .staff-main    { margin-left: var(--rail-min); }
html.rail-collapsed .rail-label,
html.rail-collapsed .staff-sidebar__logo span,
html.rail-collapsed .rail-foot,
html.rail-collapsed .rail-who { display: none; }
html.rail-collapsed .staff-nav a { justify-content: center; padding-left: 0; padding-right: 0; }
html.rail-collapsed .staff-sidebar__logo { text-align: center; padding: 0 0 1.25rem; font-size: 1.15rem; }

.staff-sidebar__logo {
  font-family: var(--font-serif, Georgia, serif); font-size: 1.4rem; font-weight: 700;
  white-space: nowrap; color: #fff; padding: 0 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 1rem;
  text-decoration: none; display: block;
}
.staff-sidebar__logo span { color: var(--color-gold, #c9a96e); }

.staff-nav a {
  display: flex; align-items: center; gap: .7rem; position: relative;
  padding: .7rem 1.25rem; color: rgba(255,255,255,.72);
  font-size: .875rem; text-decoration: none; white-space: nowrap;
  border-left: 3px solid transparent; transition: background .15s, color .15s;
}
/* Every icon reserves the same box, so the labels line up whatever the glyph
   inside is doing. This is what stopped the icons jumping row to row. */
.staff-nav a svg { flex: 0 0 18px; width: 18px; height: 18px; }
.staff-nav a:hover, .staff-nav a.active {
  background: rgba(255,255,255,.08); color: #fff; border-left-color: var(--color-gold, #c9a96e);
}
.staff-nav__sep { height: 1px; background: rgba(255,255,255,.1); margin: .9rem 1.25rem; }

.rail-count {
  margin-left: auto; background: var(--color-gold, #c9a96e); color: var(--color-dark, #2d2420);
  font-size: .7rem; font-weight: 800; border-radius: 999px; padding: .1rem .45rem;
}
html.rail-collapsed .rail-count {
  position: absolute; top: .45rem; right: .8rem; margin: 0;
  padding: 0; width: 8px; height: 8px; overflow: hidden; text-indent: -99px;
}
.rail-toggle {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit;
  padding: .7rem 1.25rem; color: rgba(255,255,255,.55); font-size: .8rem;
}
.rail-toggle:hover { color: #fff; }
html.rail-collapsed .rail-toggle { justify-content: center; padding-left: 0; padding-right: 0; }
.rail-foot { padding: .5rem 1.25rem 0; }
.rail-foot select {
  width: 100%; background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
  padding: .4rem .5rem; font: inherit; font-size: .8rem;
}
.rail-who { font-size: .72rem; color: rgba(255,255,255,.45); padding: .6rem 1.25rem 0; white-space: nowrap; }

/* ── Page header ──────────────────────────────────────────────────────────── */
.staff-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap;
}
.staff-title { font-family: var(--font-serif, Georgia, serif); font-size: 2rem; color: var(--color-dark, #2d2420); margin: 0; }
.staff-date { font-size: .875rem; color: var(--color-text-muted, #7a6e65); }

/* The burger. Hidden on a desktop, where the rail is always there. */
.staff-burger {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 42px;
  border: 1px solid #ddd4c8; border-radius: 10px; background: #fff;
  color: var(--color-dark, #2d2420); cursor: pointer; padding: 0;
}
.staff-scrim {
  position: fixed; inset: 0; background: rgba(45,36,32,.45);
  z-index: 55; border: 0; padding: 0; cursor: pointer;
}
.staff-scrim[hidden] { display: none; }

/* ── Cards, tables, badges ────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.stat-card { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.stat-card__num {
  font-family: var(--font-serif, Georgia, serif); font-size: 2.5rem; font-weight: 700;
  color: var(--color-taupe, #8b7355); line-height: 1.1;
}
.stat-card__label { font-size: .8rem; color: var(--color-text-muted, #7a6e65); margin-top: .25rem; }

/* Wide tables scroll inside their own box, never by moving the page. A table
   that widens the document leaves every other element shifted and the burger
   off-screen — which is exactly what the panel did on a phone. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.admin-table th {
  background: #f5f0eb; padding: .75rem 1rem; text-align: left; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--color-stone, #7a6e65);
  white-space: nowrap;
}
.admin-table td { padding: .75rem 1rem; border-bottom: 1px solid #f0ede8; font-size: .875rem; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.badge--pending, .badge--new { background: #fef3c7; color: #92400e; }
.badge--confirmed { background: #d1fae5; color: #065f46; }
.badge--cancelled { background: #fee2e2; color: #991b1b; }
.badge--completed, .badge--done { background: #e0e7ff; color: #3730a3; }
.badge--no_show { background: #ece7e0; color: #6b5740; }
.badge--gold { background: var(--color-gold, #c9a96e); color: var(--color-dark, #2d2420); }
.badge--muted { background: #ece7e0; color: #6b5740; }

.section-card { background: #fff; border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.06); margin-bottom: 1.5rem; }
.section-card__title { font-family: var(--font-serif, Georgia, serif); font-size: 1.25rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.adm-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.adm-field label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-stone, #7a6e65); font-weight: 600; }
.adm-field input[type=text], .adm-field input[type=email], .adm-field input[type=number],
.adm-field input[type=time], .adm-field input[type=date], .adm-field input[type=password],
.adm-field input[type=tel],  .adm-field input[type=url],  .adm-field input[type=file],
.adm-field textarea, .adm-field select {
  width: 100%; padding: .6rem .75rem; border: 1px solid #ddd4c8; border-radius: 8px;
  font-family: inherit; font-size: .875rem; background: #fff; color: var(--color-text, #3d3530);
}
.adm-field textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.adm-field input:focus, .adm-field textarea:focus, .adm-field select:focus {
  outline: 2px solid var(--color-taupe, #8b7355); outline-offset: 1px; border-color: var(--color-taupe, #8b7355);
}
.adm-field small { font-size: .7rem; color: var(--color-stone, #7a6e65); }
.adm-check { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }

/* ── Check lists (health.php, security.php) ───────────────────────────────────
   Both pages print a long list of one-line facts. They used to print them as
   full-width rows with the detail on a second line: thirty-three checks became
   several screens of scrolling for maybe two lines that mattered, and on a
   1900px display each row was a badge, four words, and 1500px of nothing.

   Now they flow into as many columns as fit, and the detail sits on the same
   line as the name — "PHP · 8.2.30" rather than "PHP" above "8.2.30". The
   result is roughly a third of the height on a desktop and unchanged on a
   phone, where one column is all that fits anyway. */
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0 1.5rem; }
.chk {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .3rem 0; border-top: 1px solid #f0ede8; font-size: .8rem; min-width: 0;
}
/* :first-child would only clear the first cell of the whole grid; every column
   starts a fresh visual list, so the top border has to go from the first row of
   each. There is no per-column selector, so the borders stay and the container
   loses its own top padding instead — the seam then reads as a separator
   between rows rather than a stray line above the first. */
.chk-grid > .chk:nth-child(-n+1) { border-top: 0; }
.chk__pill {
  flex: 0 0 auto; padding: .1rem .45rem; border-radius: 999px;
  font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.chk__pill--ok   { background: #d1fae5; color: #065f46; }
.chk__pill--warn { background: #fef3c7; color: #92400e; }
.chk__pill--bad  { background: #fee2e2; color: #991b1b; }
.chk__body { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.chk__detail { color: var(--color-text-muted, #7a6e65); font-size: .75rem; }
.chk__detail::before { content: " · "; }
.chk__ms { flex: 0 0 auto; font-size: .7rem; color: var(--color-stone, #7a6e65); }
/* A failure has to survive being one cell among nine. */
.chk--bad  { background: #fef4f3; box-shadow: inset 3px 0 0 #991b1b; padding-left: .5rem; }
.chk--warn { background: #fffbf0; box-shadow: inset 3px 0 0 #92400e; padding-left: .5rem; }

/* The three counters. They were three cards stretched across the full width
   with 2rem numerals — a quarter of the first screen spent on three integers. */
.chk-sum { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem;
           padding: .7rem 1rem; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.chk-sum span { font-size: .8rem; color: var(--color-text-muted, #7a6e65); }
.chk-sum b { font-size: 1.05rem; font-weight: 700; margin-right: .3rem; }
.chk-sum .n-ok b   { color: #065f46; }
.chk-sum .n-warn b { color: #92400e; }
.chk-sum .n-bad b  { color: #991b1b; }
.adm-tabs { display: flex; gap: .25rem; border-bottom: 1px solid #e5ddd2; margin-bottom: 1.25rem; flex-wrap: wrap; }
.adm-tab {
  padding: .55rem 1rem; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: .8rem; font-weight: 600; color: var(--color-text-muted, #7a6e65); border-bottom: 2px solid transparent;
}
.adm-tab.active { color: var(--color-taupe, #8b7355); border-bottom-color: var(--color-taupe, #8b7355); }
.adm-panel[hidden] { display: none; }
.adm-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.adm-flash { padding: .85rem 1.1rem; border-radius: 8px; margin-bottom: 1.5rem; font-size: .875rem; }
.adm-flash--ok  { background: #d1fae5; color: #065f46; }
.adm-flash--err { background: #fee2e2; color: #991b1b; }
.adm-hours { display: grid; grid-template-columns: 90px 1fr 1fr 100px; gap: .6rem; align-items: center; margin-bottom: .5rem; }
.adm-hours__day { font-size: .8rem; font-weight: 600; color: var(--color-text, #3d3530); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid #ddd4c8;
  background: #fff; color: var(--color-text, #3d3530); cursor: pointer; padding: 0;
  text-decoration: none; vertical-align: middle;
}
.icon-btn + .icon-btn { margin-left: .25rem; }
.icon-btn:hover { border-color: var(--color-taupe, #8b7355); color: var(--color-taupe, #8b7355); }
.icon-btn--ok   { background: #d1fae5; border-color: #a7e0c4; color: #065f46; }
.icon-btn--warn { background: #fef3c7; border-color: #eddba0; color: #92400e; }
.icon-btn--stop { background: #fee2e2; border-color: #f3bdbd; color: #991b1b; }
.row-actions { display: flex; gap: .25rem; align-items: center; white-space: nowrap; }
.row-actions .icon-btn + .icon-btn { margin-left: 0; }

/* ── The cabinet's own components ─────────────────────────────────────────── */
/* Scoped to .cab so the bare element selectors the cabinet pages rely on cannot
   reach an admin screen. They are element selectors because the cabinet markup
   predates this file and uses <label><span>…</span><input></label> throughout. */
.cab h1 { font-family: var(--font-serif, Georgia, serif); font-weight: normal; font-size: 1.6rem; color: var(--dark); margin: 0 0 .25rem; }
.cab h1::after { content: ""; display: block; width: 44px; height: 2px; background: var(--gold); margin-top: .6rem; }
.cab h2 { font-size: 1.05rem; margin: 1.75rem 0 .6rem; color: var(--dark); }
.cab p { margin: .5rem 0; }
.cab .muted { color: var(--muted); font-size: .875rem; }
.cab .card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem; margin-bottom: .75rem; }
.cab .flash { padding: .8rem 1rem; border-radius: 10px; margin: 1rem 0; font-size: .9375rem; }
.cab .flash--ok  { background: #eaf3ed; color: #2f5c3c; border-left: 4px solid var(--ok); }
.cab .flash--err { background: #fbecea; color: #7d332a; border-left: 4px solid var(--stop); }
.cab label { display: block; margin: .875rem 0 0; }
.cab label span { display: block; font-size: .8125rem; color: var(--muted); margin-bottom: .3rem; }
.cab input, .cab select, .cab textarea {
  width: 100%; padding: .7rem .75rem; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: .9375rem; background: #fff; color: var(--text);
}
.cab input[type=checkbox] { width: auto; }
.cab input:focus, .cab select:focus, .cab textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
.cab .btn {
  margin-top: 1rem; padding: .75rem 1.4rem; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: .9375rem;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.cab .btn--full { width: 100%; text-align: center; }
.cab .btn--ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.cab .btn--sm { margin: 0; padding: .45rem 1rem; font-size: .8125rem; }
.cab table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cab th {
  background: var(--tint); text-align: left; padding: .625rem .8rem; font-size: .6875rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.cab td { padding: .7rem .8rem; border-top: 1px solid var(--tint); font-size: .875rem; vertical-align: top; }
.cab .pill {
  display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .625rem;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--wait);
}
.cab .pill--confirmed { background: var(--ok); }
.cab .pill--cancelled { background: var(--stop); }
.cab .pill--completed { background: #6b5740; }

/* The sign-in screen has no sidebar: it is the one staff page a stranger sees. */
.staff-login { max-width: 400px; margin: 8vh auto; padding: 0 1rem; }

/* ── Phones and small tablets ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Off canvas. The rail is full width again while open, because at this size
     an icon-only strip is a guessing game. */
  .staff-sidebar {
    width: var(--rail); transform: translateX(-100%);
    box-shadow: 0 0 40px rgba(0,0,0,.35);
  }
  html.rail-open .staff-sidebar { transform: translateX(0); }
  /* The desktop collapse must not follow us here: it would hide the labels of
     a drawer that has room for them. */
  html.rail-collapsed .staff-sidebar { width: var(--rail); }
  html.rail-collapsed .rail-label,
  html.rail-collapsed .staff-sidebar__logo span,
  html.rail-collapsed .rail-foot,
  html.rail-collapsed .rail-who { display: revert; }
  html.rail-collapsed .staff-nav a { justify-content: flex-start; padding-left: 1.25rem; padding-right: 1.25rem; }

  .staff-main { margin-left: 0; padding: 1rem; }
  html.rail-collapsed .staff-main { margin-left: 0; }

  .staff-burger { display: inline-flex; }
  .rail-toggle { display: none; }

  .staff-header { margin-bottom: 1.25rem; }
  .staff-title { font-size: 1.4rem; }
  .staff-date { display: none; }

  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .stat-card { padding: 1rem; }
  .stat-card__num { font-size: 1.9rem; }
  .section-card { padding: 1rem; }
  .adm-hours { grid-template-columns: 1fr 1fr; }

  /* Tables keep their columns and scroll sideways inside their own box. */
  .admin-table, .cab table { display: block; overflow-x: auto; white-space: nowrap; }
  .admin-table td, .cab td { white-space: normal; min-width: 7rem; }

  /* Anything that was a row of buttons becomes a column of tappable ones. */
  .adm-actions .btn, .adm-actions button { width: 100%; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .staff-main { padding: .75rem; }
}

/* A drawer that slides is a drawer that can make somebody ill. */
@media (prefers-reduced-motion: reduce) {
  .staff-sidebar, .staff-main { transition: none; }
}