/* Back office (owner and manager dashboard) in the same look as the gamified
   staff app: warm cream ground, deep teal, gold for actions, coral for
   warnings, chunky rounded cards and pressable buttons. Applied while
   body has the class "bo". Always light, like the staff app. */
body.bo {
  --bg: #FFF8EC;
  --surface: #FFFFFF;
  --surface-2: #FDF6EA;
  --ink: #1B1F1D;
  --muted: #6A6F6B;
  --line: #EFE4D1;
  --accent: #0F5E57;
  --accent-ink: #FFFFFF;
  --accent-soft: #DCEBE7;
  --dark: #1B1F1D;
  --ok: #0F5E57;     --ok-soft: #DCEBE7;
  --warn: #8A5A00;   --warn-soft: #FCEBC4;
  --bad: #A3432F;    --bad-soft: #FDE3D9;
  --gold: #F2B233; --gold-2: #FFD36B; --gold-dark: #B9841A; --gold-ink: #3D2A00;
  --coral: #E8704F;
  --teal-2: #14786D; --teal-dark: #093B36;
  --shadow: 0 1px 2px rgba(61, 42, 0, .06), 0 10px 28px -12px rgba(61, 42, 0, .22);
  --r: 22px;
  --r-sm: 14px;
  color-scheme: light;
  color: var(--ink);
  background:
    radial-gradient(70% 30% at 100% 0%, rgba(242, 178, 51, .14), transparent 70%),
    radial-gradient(60% 30% at 0% 40%, rgba(95, 196, 178, .10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
body.bo h1, body.bo h2, body.bo h3 { font-weight: 800; letter-spacing: -.015em; }
body.bo h1 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.1rem); }
body.bo .page { gap: 18px; }

/* Top bar: teal, like the staff app hero */
body.bo .topbar {
  background: linear-gradient(120deg, var(--teal-2), var(--accent) 55%, var(--teal-dark));
  border-bottom: 0; color: #fff; box-shadow: 0 10px 24px -16px rgba(9, 59, 54, .9);
}
body.bo .brand strong { color: #fff; }
body.bo .brand-sub { color: #A9E0D5; }
body.bo .brand-mark { background: radial-gradient(circle at 50% 42%, var(--gold-ink) 0 5px, transparent 6px), conic-gradient(from 210deg, var(--gold) 0 300deg, #FFE7A3 300deg); }
body.bo .who-name { color: #CDE7E1; }
body.bo .topbar .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); }
body.bo .topbar .btn.ghost:hover { background: rgba(255, 255, 255, .16); }

/* Welcome banner */
.bo-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-radius: 28px; padding: 20px 22px; color: #fff;
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(255, 211, 107, .38), transparent 55%),
    radial-gradient(80% 80% at 0% 100%, rgba(95, 196, 178, .35), transparent 60%),
    linear-gradient(160deg, var(--teal-2), var(--accent) 55%, var(--teal-dark));
  box-shadow: 0 16px 34px -18px rgba(9, 59, 54, .8), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.bo-hero::after { content: ''; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 26px solid rgba(255, 255, 255, .06); pointer-events: none; }
.bo-hero-text { display: grid; gap: 2px; position: relative; z-index: 1; min-width: 0; }
.bo-hero-hello { color: #CDE7E1; font-weight: 600; font-size: .92rem; }
.bo-hero-text strong { font: 800 clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem)/1.1 var(--font-display); overflow-wrap: anywhere; }
.bo-hero-date { color: var(--gold-2); font-weight: 700; font-size: .88rem; }
.bo-hero-role {
  position: relative; z-index: 1; flex-shrink: 0;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink);
  font: 800 .8rem var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; box-shadow: 0 3px 0 var(--gold-dark);
}

/* Section tabs as a pill bar */
body.bo .tabs {
  gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 255, 255, .85);
  box-shadow: var(--shadow); backdrop-filter: blur(8px); position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 4;
}
body.bo .tabs a {
  border: 0; margin: 0; padding: 9px 15px; border-radius: 16px; color: var(--muted); font-weight: 700; font-size: .92rem;
}
body.bo .tabs a:hover { color: var(--ink); background: var(--surface-2); }
body.bo .tabs a.active { color: #fff; background: linear-gradient(160deg, var(--teal-2), var(--accent)); box-shadow: 0 3px 0 var(--teal-dark); }
body.bo .tabs .tab-kiosk { margin-left: auto; color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 3px 0 var(--gold-dark); }
body.bo .tabs .tab-kiosk:hover { color: var(--gold-ink); filter: brightness(1.04); }
body.bo .tabs .tab-kiosk + a { color: var(--accent); }

body.bo .scope-note { border-radius: 18px; background: linear-gradient(145deg, #E8F4F1, var(--accent-soft)); border: 1px solid #CFE5DF; font-weight: 600; }

/* Cards */
body.bo .card { border-radius: var(--r); border-color: var(--line); box-shadow: var(--shadow); }
body.bo .card.flush > h2 { background: linear-gradient(180deg, #FFFFFF, var(--surface-2)); }

/* Stat tiles */
body.bo .stats { gap: 14px; }
body.bo .stat {
  position: relative; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line); padding: 16px 18px 16px;
  box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'value ic' 'label label'; align-items: start;
}
body.bo .stat-ic { grid-area: ic; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
body.bo .stat-ic svg { width: 20px; height: 20px; }
body.bo .stat-value { grid-area: value; font-size: 2.4rem; font-weight: 800; }
body.bo .stat-label { grid-area: label; font-weight: 700; color: var(--muted); }
body.bo .stats .stat:nth-child(1) { background: linear-gradient(160deg, var(--teal-2), var(--accent) 60%, var(--teal-dark)); border: 0; color: #fff; }
body.bo .stats .stat:nth-child(1) .stat-value { color: #fff; }
body.bo .stats .stat:nth-child(1) .stat-label { color: #CDE7E1; }
body.bo .stats .stat:nth-child(1) .stat-ic { background: rgba(255, 255, 255, .15); color: var(--gold-2); }
body.bo .stats .stat:nth-child(2) .stat-ic { background: var(--warn-soft); color: var(--gold-dark); }
body.bo .stats .stat:nth-child(3) .stat-ic { background: var(--bad-soft); color: var(--coral); }
body.bo .stat-warn .stat-value { color: var(--gold-dark); }
body.bo .stats .stat:nth-child(3).stat-warn .stat-value { color: var(--coral); }

/* Tables */
body.bo .table th { background: var(--surface-2); color: var(--muted); border-bottom-color: var(--line); }
body.bo .table td { border-bottom-color: #F4ECDD; }
body.bo tr.clickable:hover td { background: #FFFaF1; }
body.bo .avatar { background: linear-gradient(145deg, #FBE4DA, #F3C9BA); color: #8A3A26; }
body.bo .staff-name { font-weight: 800; }
body.bo .thumb { border-radius: 12px; border-color: var(--line); }

/* Pills */
body.bo .pill { font-weight: 800; padding: 4px 10px; }
body.bo .pill-ok { background: var(--accent-soft); color: var(--accent); }
body.bo .pill-warn { background: var(--warn-soft); color: var(--warn); }
body.bo .pill-bad { background: var(--bad-soft); color: var(--bad); }
body.bo .pill-accent { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink); }
body.bo .pill-neutral { background: #F1E9DB; color: var(--muted); border-color: transparent; }

/* Buttons: gold and pressable, like the staff app */
body.bo .btn { border-radius: 16px; font-weight: 800; letter-spacing: .01em; transition: transform .08s, box-shadow .08s, filter .15s; }
body.bo .btn.primary {
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 65%); color: var(--gold-ink);
  box-shadow: 0 4px 0 var(--gold-dark), 0 12px 20px -12px rgba(185, 132, 26, .8);
}
body.bo .btn.primary:hover { filter: brightness(1.04); }
body.bo .btn.primary:active, body.bo .btn.danger:active { transform: translateY(3px); box-shadow: none; }
body.bo .btn.ghost { background: #fff; border: 1px solid var(--line); color: var(--ink); box-shadow: 0 2px 0 #EADFCB; }
body.bo .btn.ghost:hover { background: var(--surface-2); }
body.bo .btn.danger { background: linear-gradient(180deg, #F08A6C, var(--coral)); box-shadow: 0 4px 0 var(--bad); }
body.bo .link { color: var(--accent); font-weight: 700; }

/* Forms */
body.bo input[type=text], body.bo input[type=email], body.bo input[type=password], body.bo input[type=tel], body.bo input[type=number],
body.bo input[type=date], body.bo input[type=time], body.bo input[type=month], body.bo select {
  border-radius: 14px; border-color: var(--line); background: #fff; min-height: 46px;
}
body.bo input:focus, body.bo select:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(242, 178, 51, .22); }
body.bo fieldset { border-radius: 20px; border-color: var(--line); background: rgba(255, 255, 255, .6); }
body.bo legend { font-family: var(--font-display); font-weight: 800; }
body.bo .check input { accent-color: var(--accent); }
body.bo .access-check { border-radius: 16px; background: #fff; }
body.bo .access-check:has(input:checked) { border-color: var(--accent); background: #F3FAF8; }
body.bo .day-chip span { border-color: var(--line); background: #fff; }
body.bo .day-chip input:checked + span { background: linear-gradient(160deg, var(--teal-2), var(--accent)); border-color: transparent; box-shadow: 0 3px 0 var(--teal-dark); }
body.bo .copy-box { border-radius: 14px; background: var(--surface-2); border-color: var(--line); }

/* Notices */
body.bo .notice { border-radius: 18px; }
body.bo .notice.warn { background: linear-gradient(145deg, #FFF3D6, var(--warn-soft)); color: var(--warn); border: 1px solid #F3DDA6; }
body.bo .link-notice { box-shadow: 0 3px 0 #EBD28F; }

/* Pop-up panels */
body.bo .sheet { border-radius: 26px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45); }
body.bo .sheet-head { background: linear-gradient(180deg, #FFFFFF, var(--surface-2)); border-bottom-color: var(--line); }
body.bo .sheet-head h2 { font-size: 1.25rem; }
body.bo .sheet-section { border-top-color: var(--line); }
body.bo .sheet-section.first { border-bottom-color: var(--line); }
body.bo .sheet-wrap { background: rgba(9, 34, 30, .5); backdrop-filter: blur(3px); }
@media (max-width: 560px) { body.bo .sheet, body.bo .sheet-wide { border-radius: 26px 26px 0 0; } }

/* Outlets */
body.bo .loc { gap: 10px; }
body.bo .loc h2::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 4px rgba(242, 178, 51, .22); }

/* Toasts */
body.bo .toast { border-radius: 16px; font-weight: 700; }
body.bo .toast-ok { background: var(--accent); }

body.bo .grid2, body.bo .grid3 { align-items: start; }
@media (max-width: 560px) {
  .bo-hero { padding: 16px 18px; border-radius: 24px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .bo-hero-role { order: -1; padding: 5px 11px; font-size: .68rem; }
  body.bo .tabs { border-radius: 18px; }
  body.bo .tabs a { padding: 8px 12px; font-size: .86rem; }
  body.bo .stat { padding: 14px; }
  body.bo .stat-value { font-size: 2rem; }
  body.bo .stat-ic { width: 32px; height: 32px; }
}

/* Delete profile + delete history */
body.bo .danger-zone { border-top: 1px dashed #F0C3B5; }
body.bo .danger-zone h3 { color: var(--bad); }
.deleted-history summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.deleted-history summary::-webkit-details-marker { display: none; }
.deleted-history summary h2::after { content: ' ›'; color: var(--muted); }
.deleted-history[open] summary h2::after { content: ' ⌄'; }
.deleted-list { list-style: none; margin: 0; padding: 0; display: grid; }
.deleted-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.deleted-list li:last-child { border-bottom: 0; }

/* Clickable Today tiles */
.stat-btn { font: inherit; text-align: left; cursor: pointer; width: 100%; transition: transform .1s, box-shadow .15s; }
.stat-btn:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(61, 42, 0, .08), 0 16px 30px -14px rgba(61, 42, 0, .35); }
.stat-btn:active { transform: translateY(1px); }
.stat-btn:focus-visible { outline: 3px solid var(--gold, #F2B233); outline-offset: 3px; }
.stat-more { font-weight: 800; opacity: .7; }
body:not(.bo) .stat-btn { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; color: var(--ink); }
.who-list { list-style: none; margin: 0; padding: 0; display: grid; }
.who-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.who-list li:last-child { border-bottom: 0; }
.who-list .thumb, .who-list .avatar { width: 44px; height: 44px; flex-shrink: 0; }
.who-text { display: grid; gap: 1px; min-width: 0; }
.who-detail { font-weight: 700; color: var(--accent); font-size: .9rem; }