/* Admin. Same palette as the public site, different density.
   DESIGN.md section 10: ground is --surface not --paper, no stucco, no Garamond,
   Be Vietnam Pro throughout, base 16px, table cells 15px, 44px table rows,
   48px touch targets, tabular numerals on every time and duration. */
:root{
  --paper:#F7F2EA; --surface:#FFFDF9; --surface-2:#F0E9DE;
  --ink:#2E241E; --ink-muted:#736A5E; --ink-faint:#A4988B;
  --wood:#8A5A3C; --line:#E2D8C8;
  --burgundy:#7E1C2B; --burgundy-h:#6A1624;
  --focus:#8A5A3C;
  --warn:#9A6A1F; --danger:#7E1C2B; --ok:#5B7052;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  --row:44px;
  --z-panel:20; --z-sticky:30; --z-backdrop:40; --z-dialog:50; --z-toast:60;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--surface)}
body{margin:0;background:var(--surface);color:var(--ink);
     font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;font-kerning:normal}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
h1,h2,h3{margin:0}
.h1{font:500 1.5rem/1.3 var(--sans)}
.h2{font:500 1.25rem/1.35 var(--sans)}
.h3{font:500 1rem/1.4 var(--sans)}
.small{font-size:0.9375rem}          /* 15px, table cells and calendar labels */
.muted{color:var(--ink-muted)}
.num{font-variant-numeric:tabular-nums}

/* shell */
.shell{display:grid;grid-template-columns:1fr;min-height:100vh}
@media(min-width:900px){.shell{grid-template-columns:248px 1fr}}
.side{border-right:1px solid var(--line);padding:var(--s3);background:var(--surface)}
.brand{font:500 1.0625rem/1.3 var(--sans);color:var(--wood);text-decoration:none;
       display:flex;align-items:center;min-height:48px;margin-bottom:var(--s2)}
.side nav ul{list-style:none;margin:0;padding:0}
.side nav a,.side nav span{display:flex;align-items:center;min-height:48px;padding:0 var(--s2);
       border-radius:4px;text-decoration:none}
.side nav a:hover{background:var(--surface-2)}
.side nav a[aria-current="page"]{background:var(--surface-2);font-weight:500}
.side nav span{color:var(--ink-faint);cursor:default}
.side .note{margin-top:var(--s3);color:var(--ink-faint);font-size:0.9375rem}
.main{padding:var(--s3);min-width:0}
@media(min-width:900px){.main{padding:var(--s4)}}
/* The panel is fixed, so reserve its width instead of letting it cover the
   last technician column. */
@media(min-width:900px){.main--panel{padding-right:calc(380px + var(--s4))}}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
     flex-wrap:wrap;margin-bottom:var(--s3)}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
     padding:0 var(--s3);border-radius:4px;border:1px solid var(--line);background:var(--surface);
     font:500 1rem/1.4 var(--sans);color:var(--ink);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--burgundy);border-color:var(--burgundy);color:var(--surface)}
.btn-primary:hover{background:var(--burgundy-h);border-color:var(--burgundy-h)}
.btn-danger{color:var(--danger);border-color:var(--line)}
.btn-sm{min-height:40px;padding:0 var(--s2);font-size:0.9375rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.seg button{min-height:48px;padding:0 var(--s3);border:0;background:var(--surface);
     font:400 1rem/1.4 var(--sans);color:var(--ink);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface-2);font-weight:500}
.seg button+button{border-left:1px solid var(--line)}
label{display:block;font-weight:500;margin-bottom:6px}
input[type=text],input[type=number],select,textarea{
     width:100%;min-height:48px;padding:10px var(--s2);border:1px solid var(--line);
     border-radius:4px;background:var(--surface);font:400 1rem/1.4 var(--sans);color:var(--ink)}
textarea{min-height:96px;line-height:1.6}

/* tables. Density comes from row height, not from type size. */
/* Wide content scrolls inside its own box. The page body never does. */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:4px}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{text-align:left;padding:0 var(--s2);height:var(--row);border-bottom:1px solid var(--line);
      font-size:0.9375rem;vertical-align:middle}
thead th{background:var(--surface-2);font-weight:500;height:var(--row)}
td.right,th.right{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--surface-2)}

/* banners */
.banner{border:1px solid var(--line);border-radius:4px;padding:var(--s2) var(--s3);
        margin-bottom:var(--s3);display:flex;gap:var(--s2);align-items:flex-start}
.banner-warn{border-color:var(--warn)}
.banner .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;margin-top:8px}
.banner-warn .dot{background:var(--warn)}

/* calendar */
.legend{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s2);font-size:0.9375rem}
.legend span{display:inline-flex;align-items:center;gap:8px}
.key{width:22px;height:16px;border:1px solid var(--line);border-radius:2px;display:inline-block}
.cal-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:4px}
.cal{display:grid;grid-template-columns:84px repeat(4,minmax(150px,1fr));min-width:760px}
.cal .head{position:sticky;top:0;z-index:var(--z-sticky);background:var(--surface-2);
     border-bottom:1px solid var(--line);padding:0 var(--s2);height:var(--row);
     display:flex;align-items:center;font-weight:500;font-size:0.9375rem}
.col{position:relative;border-left:1px solid var(--line);
     display:grid;grid-template-rows:repeat(23,var(--row))}
.timecol{display:grid;grid-template-rows:repeat(23,var(--row))}
.timecol div{font-size:0.9375rem;color:var(--ink-muted);padding:0 var(--s2);
     font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line);
     display:flex;align-items:flex-start;line-height:1}
.col .slot{border-bottom:1px solid var(--line)}
/* Status is carried by fill pattern AND a 3px left border, never colour alone,
   because the room is bright and the iPad is often at an angle. */
.ev{margin:2px 4px;border-radius:2px;padding:6px 8px;font-size:0.9375rem;overflow:hidden;
    border:1px solid var(--line);border-left-width:3px;cursor:pointer;text-align:left;
    display:block;width:calc(100% - 8px);min-height:48px}
.ev b{display:block;font-weight:500}
.ev em{font-style:normal;color:var(--ink-muted)}
.ev--booked{background:var(--surface-2);border-left-color:var(--ink-muted)}
.ev--service{border-left-color:var(--ok);
  background:repeating-linear-gradient(0deg,var(--surface-2) 0 6px,var(--surface) 6px 12px)}
.ev--conflict{outline:2px solid var(--warn);outline-offset:-2px}
.buffer{margin:0 4px;border-radius:2px;border:1px solid var(--line);border-top:0;
  background:repeating-linear-gradient(45deg,var(--surface-2) 0 5px,var(--surface) 5px 10px)}
.offshift{margin:2px 4px;border-radius:2px;overflow:hidden;white-space:nowrap;
  background:repeating-linear-gradient(90deg,var(--surface-2) 0 2px,var(--surface) 2px 8px);
  display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:0.9375rem}

/* side panel */
.panel{position:fixed;inset:0 0 0 auto;width:min(380px,100%);background:var(--surface);
  border-left:1px solid var(--line);padding:var(--s3);z-index:var(--z-panel);overflow:auto}
.panel dl{margin:0}
.panel dt{font-weight:500;margin-top:var(--s2)}
.panel dd{margin:0;color:var(--ink-muted)}

/* toast. Bottom left, dismissible. */
.toast{position:fixed;left:var(--s3);bottom:var(--s3);z-index:var(--z-toast);
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:var(--s2) var(--s3);display:flex;gap:var(--s3);align-items:center;max-width:420px}
@media(min-width:900px){.toast{left:calc(248px + var(--s3))}}

/* gallery manager */
.drop{border:1px dashed var(--line);border-radius:4px;padding:var(--s4);text-align:center;
      background:var(--surface-2)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s2);
       margin-top:var(--s3)}
.tile{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface)}
.tile img{aspect-ratio:4/5;object-fit:cover;width:100%}
.tile .meta{padding:var(--s1) var(--s2);font-size:0.9375rem;display:flex;
            justify-content:space-between;align-items:center;gap:8px}
.status{font-size:0.9375rem;color:var(--ink-muted)}
.status::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:6px;background:var(--ink-faint);vertical-align:middle}
.status--pub::before{background:var(--ok)}
.status--draft::before{background:var(--warn)}
/* Loading skeleton. Every list has loading, empty and error states. */
.skel{aspect-ratio:4/5;background:var(--surface-2);position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-100%);animation:sweep 1.4s infinite}
@keyframes sweep{to{transform:translateX(100%)}}
.facets{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:0 var(--s2);border:1px solid var(--line);border-radius:4px;
      background:var(--surface);font:400 0.9375rem/1.4 var(--sans);color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--wood);background:var(--surface-2);font-weight:500}
.empty{border:1px solid var(--line);border-radius:4px;padding:var(--s4);text-align:center}

dialog{border:1px solid var(--line);border-radius:4px;padding:var(--s3);max-width:460px;
       background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgba(46,36,30,.32)}

@media(prefers-reduced-motion:reduce){.skel::after{animation:none}}