/* The studio's side of Filmroom, in the same world as the marketing site.

   An earlier version put a plum sidebar beside a warm daylight canvas. It read well on its
   own and read wrong next to everything else we make: the site is Velvet -- plum ground,
   rose-gold accent, Fraunces display, grain over the full-bleed fields -- and the admin
   looked like a different company's product. So the whole thing is dark now, and the only
   place light survives is inside form fields, where you need the contrast to type.

   Tokens are lifted from the marketing page deliberately, not approximated.
   Fonts come from fonts.css, self-hosted alongside. */
:root{
  --ground:#120E16;        /* deep plum-black, the page */
  --ground-2:#1A1420;      /* a raised panel */
  --ground-3:#241B2C;      /* hover, and the inside of a field */
  --line:rgba(242,235,238,.10);
  --line-2:rgba(217,163,160,.30);
  --text:#F2EBEE;
  --muted:rgba(242,235,238,.66);
  --faint:rgba(242,235,238,.42);
  --rose:#D9A3A0;          /* the one accent */
  --rose-deep:#B9807E;
  --ok:#8FD0A6;
  --warn:#E0B972;
  --bad:#E08A80;
  --radius:6px;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--ground);color:var(--text);font:400 14px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
a{color:var(--rose)}
img{max-width:100%;display:block}

/* Film has grain; flat fields do not. The same wash as the marketing hero, at a third of
   the strength -- enough to stop the large dark areas reading as dead pixels. */
.grain::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

.shell{display:grid;grid-template-columns:210px 1fr;min-height:100vh}

/* ---------- sidebar ---------- */
.side{background:#0D0A10;color:var(--muted);padding:20px 0;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh}
.side .brand{display:flex;align-items:center;gap:11px;padding:2px 20px 22px;
  text-decoration:none;color:var(--text)}
.side .brand svg{width:24px;height:24px;flex:none}
.side .brand b{font:600 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.side .grp{padding:18px 20px 7px;font:600 9px/1 var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint)}
.side a.nav{display:flex;align-items:center;gap:10px;padding:9px 20px;text-decoration:none;
  color:inherit;font-size:13px;transition:.15s}
.side a.nav:hover{color:var(--text);background:rgba(255,255,255,.035)}
.side a.nav.on{background:var(--ground-2);color:var(--text);
  box-shadow:inset 2px 0 0 var(--rose)}
.side .foot{margin-top:auto;padding:16px 20px 0;font-size:11.5px;color:var(--faint);
  border-top:1px solid var(--line)}
.side .foot b{display:block;color:var(--muted);font-weight:500}

/* ---------- main ---------- */
.main{min-width:0;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:14px;padding:17px 28px;
  border-bottom:1px solid var(--line);background:var(--ground);position:sticky;top:0;z-index:5}
.bar h1{font:400 23px/1.2 var(--serif);letter-spacing:.01em}
.bar .crumb{color:var(--faint);font-size:12.5px}
.bar .sp{margin-left:auto}
.body{padding:28px;flex:1}
.narrow{max-width:620px}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);
  background:transparent;color:var(--text);border-radius:5px;padding:8px 15px;
  font:500 12.5px/1 var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:.15s}
.btn:hover{border-color:var(--rose);color:var(--rose);background:rgba(217,163,160,.07)}
.btn.key{background:var(--rose);border-color:var(--rose);color:#1A1015}
.btn.key:hover{background:#E7B5B2;border-color:#E7B5B2;color:#1A1015}
.btn.sm{padding:6px 11px;font-size:11.5px}
.btn.danger{color:var(--bad);border-color:rgba(224,138,128,.35)}
.btn.danger:hover{background:rgba(224,138,128,.14);border-color:var(--bad);color:var(--bad)}
.btn[disabled]{opacity:.38;pointer-events:none}

/* Matched by exclusion rather than by listing the text-ish types: an <input> with no type
   attribute is a text field, and no input[type=text] selector matches it. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]),
select,textarea{width:100%;background:var(--ground-3);
  border:1px solid var(--line);color:var(--text);border-radius:5px;padding:9px 12px;
  font:400 13.5px/1.5 var(--sans)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(217,163,160,.16)}
textarea{min-height:110px;resize:vertical}
label{display:block;font:600 9.5px/1.6 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin:15px 0 6px}
::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.5)}

.card{background:var(--ground-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:23px 25px;margin-bottom:18px}
.card h2{font:400 20px/1.25 var(--serif);margin:0 0 14px}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{flex:1 1 200px}
.stack{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}

.flash{background:var(--ground-2);border:1px solid var(--line);
  border-left:2px solid var(--rose);border-radius:5px;padding:12px 16px;margin:0 0 16px;
  font-size:13.5px;color:var(--muted)}

/* ---------- the allowance meter ---------- */
.meter{background:var(--ground-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 19px;margin-bottom:20px;display:flex;gap:18px;align-items:center;
  flex-wrap:wrap}
.meter .lab{font-size:13px;color:var(--muted)}
.meter .lab b{color:var(--text);font-weight:600}
.meter .track{flex:1;min-width:140px;height:5px;border-radius:3px;
  background:rgba(242,235,238,.09);overflow:hidden}
.meter .track i{display:block;height:100%;background:var(--rose)}
.meter .track i.warn{background:var(--warn)}
.meter .track i.over{background:var(--bad)}

/* ---------- weddings ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:16px}
.wed{background:var(--ground-2);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;display:block;transition:.18s}
.wed:hover{border-color:var(--line-2);transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.45)}
.wed .still{aspect-ratio:16/10;position:relative;background:#0A070C;display:block}
.wed .still img{width:100%;height:100%;object-fit:cover}
.wed .pill{position:absolute;top:9px;left:9px;font:600 8.5px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;padding:5px 8px;border-radius:3px;
  background:rgba(10,7,12,.72);backdrop-filter:blur(6px);color:var(--muted)}
.wed .pill.live{color:var(--ok)}
.wed .pill.archived{color:var(--warn)}
.wed .in{padding:13px 15px 15px;display:block}
.wed b{display:block;font:400 17px/1.25 var(--serif);margin-bottom:3px;color:var(--text)}
.wed span{display:block;font-size:11.5px;color:var(--faint)}
.wed .nums{margin-top:10px;display:flex;gap:14px;font-size:11.5px;color:var(--muted)}
.empty{text-align:center;padding:64px 20px;color:var(--muted)}
.empty h2{font:400 24px/1.3 var(--serif);margin-bottom:8px;color:var(--text)}

/* ---------- films ---------- */
.films{display:flex;flex-direction:column;gap:9px}
.film{display:flex;gap:14px;align-items:center;background:var(--ground-2);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px}
.film:hover{border-color:var(--line-2)}
.film .th{width:80px;aspect-ratio:16/9;border-radius:3px;flex:none;background:#0A070C;
  overflow:hidden}
.film .th img{width:100%;height:100%;object-fit:cover}
.film .nm{flex:1;min-width:0}
.film .nm b{display:block;font-weight:500;font-size:13.5px}
.film .nm span{font-size:11.5px;color:var(--faint)}
.tag{font:600 8.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  padding:5px 8px;border-radius:3px;background:rgba(217,163,160,.16);color:var(--rose)}
.tag.ok{background:rgba(143,208,166,.14);color:var(--ok)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  color:var(--muted);word-break:break-all}
.code{font:600 21px/1 var(--sans);letter-spacing:.3em;color:var(--rose)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font:600 9.5px/1.6 var(--sans);letter-spacing:.17em;
  text-transform:uppercase;color:var(--faint);padding:0 10px 10px;
  border-bottom:1px solid var(--line)}
td{padding:12px 10px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
summary{color:var(--faint)}
summary:hover{color:var(--rose)}
.small{font-size:12.5px} .muted{color:var(--muted)} .faint{color:var(--faint)}

@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;overflow-x:auto;padding:10px;
    gap:4px;align-items:center;border-right:0;border-bottom:1px solid var(--line)}
  .side .grp,.side .foot{display:none}
  .side .brand{padding:0 12px 0 6px}
  .body{padding:18px}
  .bar{padding:14px 18px}
}