/* =====================================================================
   Coffee on Point admin — "Roast" redesign (PREVIEW)
   Loaded AFTER admin/admin.css. A modern app shell: espresso sidebar,
   white cards floating on oat, crema buttons. Same palette as the site.
   ===================================================================== */
:root, :root[data-theme="light"] {
  --espresso:#16100C; --roast:#221812; --roast-2:#2E2119;
  --crema:#E6AE72; --caramel:#C4733B;
  --grad-crema:linear-gradient(120deg, #EDB97F 0%, #C4733B 100%);
  --matcha:#2F6B49;
  --leaf:#4C700C;   /* the logo green: top bar and footer, same as the public site */

  --ground:#F4EFE8; --surface:#FFFFFF; --surface-2:#F2EBE1; --field:#FBF8F3;
  --ink:#1E1611; --ink-soft:#5C5048; --ink-faint:#6F6459; --line:rgba(30,22,17,.10);
  --primary:#9C5322; --primary-deep:#7E4119; --accent:#9C5322; --accent-ink:#7E4119;
  --gilt:#E6AE72; --on-gilt:#16100C;
  --ok:#2F6B49; --ok-soft:#E3EFE7; --danger:#A3321E; --danger-soft:#F8E5E0;
  --serif:"Fraunces", Georgia, serif;
  --sans:"DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono:"DM Sans", system-ui, sans-serif;
  --radius:20px;
  --shadow:0 24px 50px -30px rgba(22,16,12,.32);
  --shadow-sm:0 10px 26px -18px rgba(22,16,12,.28);
}
body { font-family:var(--sans); background:var(--ground); letter-spacing:-.005em; }

/* top bar: the logo green, see-through — identical to the public site's.
   90% is the lightest that keeps white text readable over this light page (4.68:1). */
.topbar { background:rgba(76,112,12,.90); backdrop-filter:saturate(1.25) blur(16px); -webkit-backdrop-filter:saturate(1.25) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.14); box-shadow:none; }
.tb-brand { color:#FFFFFF; text-decoration:none; }
.tb-brand b { font-family:var(--serif); font-weight:600; font-size:18px; letter-spacing:-.01em; color:#FFFFFF; }
.tb-brand span { font-family:var(--sans); font-weight:600; letter-spacing:.2em; color:rgba(255,255,255,.92); }
.tb-user { color:rgba(255,255,255,.92); }
/* on the green only white is readable */
.pill { font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.04em; background:transparent;
  border:1px solid rgba(255,255,255,.42); color:rgba(255,255,255,.92); padding:7px 14px; }
.pill:hover { border-color:#FFFFFF; color:#FFFFFF; }
.pill b { color:#FFFFFF; }

/* footer: the logo green, the same close as every public page */
.adm-foot { background:var(--leaf); color:#FFFFFF; margin-top:48px; }
.adm-foot-in { max-width:1280px; margin:0 auto; padding:48px 20px 36px; }
.adm-foot .foot-brand { display:flex; gap:14px; align-items:center; }
.adm-foot .foot-brand img { border-radius:50%; display:block; }
.adm-foot .foot-brand b { display:block; font-family:var(--serif); font-weight:600; font-size:23px; color:#FFFFFF; }
.adm-foot .foot-brand p { margin:3px 0 0; font-size:14px; color:rgba(255,255,255,.92); }
.adm-foot .foot-legal { margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,.22);
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12.5px; color:rgba(255,255,255,.92); }
.adm-foot .foot-legal a { color:rgba(255,255,255,.92); }
.adm-foot .foot-legal a:hover { color:#FFFFFF; text-decoration:underline; }
.layout { padding-bottom:40px; }

/* sidebar: an espresso panel */
.sidenav { background:var(--espresso); border-radius:22px; padding:10px; top:84px; box-shadow:var(--shadow); gap:2px; }
.sidenav button, .sidenav .sn-group, .sidenav .sn-child { color:#C8B9A9; font-weight:500; border-radius:14px; }
.sidenav button:hover, .sidenav .sn-group:hover, .sidenav .sn-child:hover { background:rgba(246,239,230,.07); color:#F6EFE6; }
.sidenav button.on, .sidenav .sn-child.on { background:var(--grad-crema); color:var(--espresso); font-weight:700; }
.sidenav button.on .sn-dot { background:var(--espresso); }
.sidenav .sn-group.on-parent { color:#F6EFE6; }
.sn-dot { background:rgba(246,239,230,.35); }
.sn-caret { color:rgba(246,239,230,.45); }
.sidenav .sn-group.dirty .sn-dot, .sidenav button.dirty .sn-dot { background:var(--crema); }

/* headings */
.panel-head h2 { font-family:var(--serif); font-weight:600; font-size:34px; letter-spacing:-.025em; }
.panel-head p { font-size:15px; }
.card-head h3 { font-family:var(--serif); font-weight:600; font-size:21px; letter-spacing:-.01em; }

/* cards float, no hard outlines */
.card { border:none; border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:24px; }
.item-row { border:1px solid var(--line); border-radius:16px; background:var(--field); }
.empty, .add-btn { border-radius:16px; }

/* fields */
input[type=text], input[type=password], input[type=date], input[type=time], input[type=url],
input[type=email], input[type=number], textarea, select {
  font-family:var(--sans); background:var(--field); border:1px solid var(--line); border-radius:12px; padding:11px 13px; }
input:focus, textarea:focus, select:focus { border-color:var(--caramel); box-shadow:0 0 0 4px rgba(230,174,114,.28); }
.field > label, .flabel { font-weight:600; letter-spacing:.01em; }
.lang-tag { font-family:var(--sans); font-weight:700; color:var(--primary); }
.slug-row { border-radius:12px; background:var(--field); }
.slug-pre { font-family:var(--sans); background:var(--surface-2); }

/* buttons: the crema pill is the primary action everywhere */
.btn-primary { background:var(--grad-crema); color:var(--espresso); font-weight:700;
  box-shadow:0 12px 26px -14px rgba(196,115,59,.9); }
.btn-primary:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 16px 30px -14px rgba(196,115,59,1); }
.btn-ghost { background:var(--surface); border:1px solid var(--line); }
.btn-ghost:hover { border-color:var(--caramel); }
.badge { font-family:var(--sans); font-weight:700; letter-spacing:.08em; }
.badge.live { color:var(--matcha); background:var(--ok-soft); border-color:transparent; }
.switch input:checked { background:var(--caramel); border-color:var(--caramel); }

/* events list */
.evl-row { border:none; border-radius:18px; box-shadow:var(--shadow-sm); padding:14px 18px; }
.evl-date b { font-family:var(--serif); font-size:30px; }
.evl-date span { font-family:var(--sans); font-weight:700; color:var(--primary); }
.evl-title { font-size:16px; }
.evl-meta { font-family:var(--sans); }
.evl-tabs { border-bottom:1px solid var(--line); }
.evl-tab { font-weight:500; }
.evl-tab.on { font-weight:700; border-bottom-color:var(--caramel); }
.evl-tab.on span { background:var(--grad-crema); color:var(--espresso); }

/* guest list */
.gl-code { font-family:var(--sans); font-weight:600; letter-spacing:.14em; }
.gl-in { color:var(--matcha); }

/* save bar + toast */
.savebar { background:rgba(22,16,12,.94); border-top:none; box-shadow:0 -20px 40px -24px rgba(0,0,0,.5); }
.savebar .msg, .savebar .msg b { color:#F6EFE6; }
.savebar .btn-ghost { background:transparent; color:#F6EFE6; border-color:rgba(246,239,230,.25); }
.toast { background:var(--espresso); color:#F6EFE6; }

/* sign-in */
/* sign-in pages: the same green bar and footer, with the card centred between them */
.login-body { display:flex; flex-direction:column; align-items:stretch; place-items:stretch;
  min-height:100vh; min-height:100dvh; padding:0; background:var(--ground); }
.login-body .login-card { margin:auto; width:calc(100% - 32px); }
.login-body > .topbar { flex:none; }
.login-body .adm-foot { margin-top:0; }
.login-card { border:none; border-radius:26px; box-shadow:0 40px 80px -30px rgba(0,0,0,.7); }
.login-card h1 { font-family:var(--serif); font-weight:600; }

@media (max-width: 860px) {
  .sidenav { border-radius:18px; padding:6px; }
  .sidenav button, .sidenav .sn-group, .sidenav .sn-child { border:none; }
}

/* the logo disc needs a light ring to read on the green bar and footer */
.tb-brand img, .adm-foot .foot-brand img, .login-logo {
  box-shadow:0 0 0 2px rgba(255,255,255,.88), 0 6px 16px -6px rgba(0,0,0,.4); }

/* the footer sits at the bottom of the window even when a page is short */
body:not(.login-body) { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
body:not(.login-body) > .layout, body:not(.login-body) > .door-wrap { flex:1 0 auto; width:100%; }
body:not(.login-body) > .adm-foot { flex:none; }

/* phones: five buttons plus the logo only fit at the compact size, on one line each */
@media (max-width: 560px) {
  .topbar-in { gap:8px; padding:0 12px; }
  .tb-tools { gap:5px; }
  .pill { padding:5px 9px; font-size:11px; letter-spacing:.03em; white-space:nowrap; }
}
@media (max-width: 440px) { .tb-brand div { display:none; } }

/* logo upload (Page & info): square file, shown as the circle the site uses */
.img-prev.logo, .img-drop.logo { width:150px; max-width:150px; aspect-ratio:1; border-radius:50%; }
.img-prev.logo img { aspect-ratio:1; height:100%; object-fit:cover; }
.img-drop.logo { padding:10px; text-align:center; }