/* ============================================================
   sherbet.css — the v3 "Sherbet" look & feel rolled out to the
   classic app. Loaded AFTER styles.css on every shell/auth page:
   re-maps the design tokens and restyles the few components whose
   colours are hard-coded (sidebar, tab bar, toast, badges).
   Light theme becomes v3's paper/ink look; dark theme keeps its
   dark surfaces but adopts the sherbet accents, radii and type.
   The standalone /v3 page keeps its own v3.css.
   ============================================================ */

/* ── Tokens: accents + radii (both themes) ── */
:root {
  /* Coral replaces indigo as the app accent */
  --indigo:      #ff6b6b;
  --indigo-dark: #e35050;
  /* Sherbet fruit tones for the rest */
  --gold:        #e08600;
  --gold-bg:     rgba(255,176,32,.16);
  --gold-border: rgba(255,176,32,.4);
  --red:         #d63c3c;
  --red-bg:      rgba(214,60,60,.08);
  --red-border:  rgba(214,60,60,.25);
  --green:       #2ec27e;
  --green-bg:    rgba(46,194,126,.12);
  --purple:      #9b5de5;
  /* Rounder everything (v3: 22px cards, 14px small) */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-xl: 26px;
}

/* ── Light theme: v3 paper & ink ── */
:root:not([data-theme="dark"]) {
  --indigo-light:  #ffe3e3;               /* coral-soft */
  --indigo-subtle: rgba(255,107,107,.10);
  --text-1:    #2d2440;                   /* ink */
  --text-2:    #6f6785;                   /* ink-2 */
  --text-3:    #948da6;
  --border:    #ece2d9;
  --bg:        #fdf8f2;                   /* paper */
  --surface:   #ffffff;
  --surface-2: #f7f0e8;
  --shadow-xs: 0 1px 3px rgba(45,36,64,.05);
  --shadow-sm: 0 2px 8px rgba(45,36,64,.06);
  --shadow-md: 0 4px 14px rgba(45,36,64,.10);
  --shadow-lg: 0 8px 28px rgba(45,36,64,.16);
}

/* Dark theme: coral-tinted accent surfaces (replaces indigo tints) */
[data-theme="dark"] {
  --indigo-light:  rgba(255,107,107,.2);
  --indigo-subtle: rgba(255,107,107,.12);
}

/* ── Typography: v3's chunky 800-weight headlines ── */
.greeting-text, .modal-header, .auth-card h1,
.profile-name, .stat-value, .logo-label,
.top-bar-page-title { font-weight: 800; }
.section-title { font-weight: 800; }
.link-action { font-weight: 700; }
.badge { font-weight: 700; }

/* ── Buttons: pill-shaped, bold (v3 setup-btn / hero-classic) ── */
.btn, .btn-outline, .logout-btn, .impersonate-back-btn { border-radius: 999px; }
.btn { font-weight: 800; }
.auth-card .btn-primary { border-radius: 999px; }
.btn-primary { box-shadow: 0 2px 8px rgba(255,107,107,.35); }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(255,107,107,.4); }
.btn-danger { box-shadow: 0 1px 3px rgba(214,60,60,.3); }
.btn-danger:hover { background: #b93030; box-shadow: 0 4px 10px rgba(214,60,60,.35); }
.btn-success:hover { background: #17915a; }

/* ── Logo mark ── */
.logo-mark { background: var(--indigo); border-radius: 9px; }

/* ── Sidebar: sherbet ink (v3 .v3-side) ── */
.sidebar { background: #2d2440; }
.sidebar-logo, .sidebar-footer { border-color: rgba(255,255,255,.08); }
.sidebar-divider { background: rgba(255,255,255,.08); }
.sidebar-section-label { color: rgba(255,255,255,.4); font-weight: 800; }
.sidebar-item {
  color: rgba(255,255,255,.75);
  font-weight: 700;
  border-radius: 12px;
}
.sidebar-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-item.active { background: var(--indigo); color: #fff; }
.sidebar-user-name { color: #fff; font-weight: 800; }
.sidebar-user-sub { color: rgba(255,255,255,.55); }
.sidebar-dark-row { color: rgba(255,255,255,.5); }
.sidebar-user--managed { background: rgba(255,176,32,.16); }
.persona-section { border-top-color: rgba(255,255,255,.08); }
.persona-return-tag { color: #ffb020; background: rgba(255,176,32,.22); border-radius: 999px; }

/* ── Mobile tab bar: floating pill (v3 .tab-bar) ── */
@media (max-width: 899px) {
  .tab-bar {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 32px);
    max-width: calc(var(--max-w) - 32px);
    height: var(--tab-h);
    border-top: none;
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(45,36,64,.18);
    padding: 8px;
  }
  .tab-item { border-radius: 999px; font-weight: 800; gap: 2px; padding-bottom: 0; }
  .tab-item.active { background: var(--indigo); color: #fff; }
  .tab-item.active::before { display: none; }
  /* Content + toasts clear the floating bar */
  .page-content { padding-bottom: calc(var(--tab-h) + 28px + env(safe-area-inset-bottom, 0px)); }
  .toast-wrap { bottom: calc(var(--tab-h) + 24px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Toast: ink pill (v3 .toast) ── */
.toast { background: #2d2440; font-weight: 800; }

/* ── Badges: sherbet tints (hard-coded slate in styles.css) ── */
.diff-easy   { background: rgba(46,194,126,.15);  color: #17915a; }
.diff-medium { background: rgba(255,176,32,.2);   color: #b96e00; }
.diff-hard   { background: rgba(255,107,107,.16); color: #d63c3c; }
.cat-adult   { background: rgba(155,93,229,.14);  color: #7431c4; }
.cat-child   { background: rgba(46,194,126,.15);  color: #17915a; }
[data-theme="dark"] .diff-easy   { color: #4fd89b; }
[data-theme="dark"] .diff-medium { color: #ffb020; }
[data-theme="dark"] .diff-hard   { color: #ff8a8a; }
[data-theme="dark"] .cat-adult   { color: #bf94f2; }
[data-theme="dark"] .cat-child   { color: #4fd89b; }

/* ── Account tab shows as Admin (ink pill) while on /admin ──
   Ink is the one serious colour in the sherbet set, for the one
   serious screen; keeps the pill at five slots. */
@media (max-width: 899px) {
  .tab-item.tab-item-admin.active { background: #2d2440; color: #fff; }
}

/* ── Manage Chores: v3 card language ──
   Each room is a panel: a white container on the paper background does the
   separating (v3's dashboard-panel language). Headers read like v3 section
   titles (emoji tile, coral count pill) and chore cards take v3's rotating
   soft tints (c-coral … c-grape, assigned by chore id in app.js). */
#page-chores .room-section {
  background: var(--surface);
  border-radius: 20px;
  padding: 6px 10px 12px;
  box-shadow: 0 2px 10px rgba(45,36,64,.07);
  margin-bottom: 16px;
}
#page-chores .room-header { gap: 11px; padding: 10px 6px; border-radius: 16px; }
#page-chores .room-icon {
  width: 40px; height: 40px;
  background: var(--bg);   /* paper tile on the white panel */
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
}
#page-chores .room-name { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
#page-chores .room-meta {
  background: var(--indigo); color: #fff;
  border-radius: 999px; padding: 2px 10px;
  font-size: 11px; font-weight: 800;
}
#page-chores .room-disabled .room-meta { background: var(--text-3); }

.chore-def-card {
  border-radius: 16px;
  border: 2px solid transparent;
  box-shadow: none;
}
.chore-def-card.c-coral { background: #ffe3e3; border-color: #ffc4c4; }
.chore-def-card.c-sky   { background: #dcf0ff; border-color: #a8d9ff; }
.chore-def-card.c-mint  { background: #d9f7e8; border-color: #a4ebc9; }
.chore-def-card.c-sun   { background: #fff1d6; border-color: #ffd98a; }
.chore-def-card.c-grape { background: #efe3ff; border-color: #d7bdf7; }
.chore-def-card .chore-def-name { font-size: 14px; font-weight: 800; letter-spacing: -.2px; color: #2d2440; }
.chore-def-card .chore-def-desc { color: #6f6785; }
.chore-def-card .chore-def-freq {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.72);
  border: none;
  border-radius: 999px;
  padding: 3px 11px;
  font-weight: 700; color: #6f6785;
}
.chore-def-card .freq-editable:hover { background: #fff; color: var(--indigo); }
.chore-def-card .chore-def-edit { color: rgba(45,36,64,.45); }
.chore-def-card .chore-def-edit:hover { color: #2d2440; }
/* Badges sit on tinted cards — give them a white underlay for contrast. */
.chore-def-card .badge { box-shadow: inset 0 0 0 99px rgba(255,255,255,.55); }

/* Dark theme: the pastel tints are light-only — switch to translucent
   washes on the dark surface so text contrast holds. */
[data-theme="dark"] .chore-def-card.c-coral { background: rgba(255,107,107,.10); border-color: rgba(255,107,107,.3); }
[data-theme="dark"] .chore-def-card.c-sky   { background: rgba(61,169,252,.10);  border-color: rgba(61,169,252,.3); }
[data-theme="dark"] .chore-def-card.c-mint  { background: rgba(46,194,126,.10);  border-color: rgba(46,194,126,.3); }
[data-theme="dark"] .chore-def-card.c-sun   { background: rgba(255,176,32,.10);  border-color: rgba(255,176,32,.3); }
[data-theme="dark"] .chore-def-card.c-grape { background: rgba(155,93,229,.10);  border-color: rgba(155,93,229,.3); }
[data-theme="dark"] .chore-def-card .chore-def-name { color: var(--text-1); }
[data-theme="dark"] .chore-def-card .chore-def-desc { color: var(--text-2); }
[data-theme="dark"] .chore-def-card .chore-def-freq { background: rgba(255,255,255,.08); color: var(--text-2); }
[data-theme="dark"] .chore-def-card .freq-editable:hover { background: rgba(255,255,255,.14); color: var(--indigo); }
[data-theme="dark"] .chore-def-card .chore-def-edit { color: var(--text-3); }
[data-theme="dark"] .chore-def-card .chore-def-edit:hover { color: var(--text-1); }
[data-theme="dark"] .chore-def-card .badge { box-shadow: none; }