/* ═══════════════════════════════════════════════════════════════
   DONUT BAKERY THEME   (loaded after style.css and each page's own <style>)
   All colours come from the tokens in style.css: dark chocolate on :root,
   cream on :root[data-theme="light"]. Nothing in here hard-codes a palette value.
═══════════════════════════════════════════════════════════════ */
html { background: var(--bg-base); scroll-behavior: smooth; }
body { background: var(--bg-base) !important; color: var(--text-main); }
::selection { background: rgba(var(--accent-rgb), .35); color: var(--text-bright); }

/* sprinkle pattern: one small inline SVG tile (defined as --sprinkle), sits behind everything */
body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: var(--sprinkle) 0 0 / 220px 220px repeat !important;
    animation: none !important; opacity: 1; transform: none;
}
body::after { content: none; }
.admin-wrap, .sidebar, .content, .t-content, .admin-box { position: relative; z-index: 1; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--bg-muted) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-muted); border-radius: 10px; border: 2px solid var(--bg-base); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ── headings: rounded display face for h1 and section titles only ── */
h1, .admin-top h1, .admin-box h1, .page-header h1, .section-title, .section-head h2 {
    font-family: var(--font-display);
    font-weight: 600; letter-spacing: 0; color: var(--text-bright);
    background: none; -webkit-text-fill-color: currentColor;
}

/* ── brand logo in the admin header (static/brand/logo.svg) ── */
.brand-logo { height: 32px; width: auto; flex: none; vertical-align: middle; margin-right: 6px; }
.admin-top a.logout { white-space: nowrap; flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }

/* ── nav pills ── */
.admin-nav a, .tabs a, .pills a {
    background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: 999px !important;
    color: var(--text-main) !important;
    display: inline-flex; align-items: center; min-height: 40px; padding-top: 8px; padding-bottom: 8px;
    transition: transform .25s var(--ease), border-color .25s, background .25s, color .25s, box-shadow .25s !important;
}
.admin-nav a:hover, .tabs a:hover, .pills a:hover {
    transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .55) !important; color: var(--accent-text) !important;
    box-shadow: 0 8px 20px -10px var(--accent-glow);
}
.admin-nav a.active, .tabs a.active, .pills a.on {
    background: var(--accent-tint) !important; border-color: rgba(var(--accent-rgb), .55) !important; color: var(--accent-text) !important;
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .18) inset;
}

/* ── cards (soft shadow, thin warm border; spotlight follows the cursor, set by theme.js) ── */
.sc-card, .server-row, .stat-card, .stat, .plan-card, .bcard, .mbox, .session-card, .profile-card, .toggle-card, .auto-panel,
.console-panel, .admin-box, .pstat, .build, .row.card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-soft);
    position: relative; overflow: hidden;
    transition: transform .35s var(--ease), border-color .3s, box-shadow .35s var(--ease) !important;
}
/* sub-panels inside a card stay flat */
.auto-panel, .pstat { box-shadow: none; border-radius: var(--r-md) !important; }
.console-panel { background: var(--bg-raised) !important; box-shadow: none; }
.sc-card::before, .server-row::before, .stat-card::before, .plan-card::before, .bcard::before, .mbox::before,
.session-card::before, .profile-card::before, .toggle-card::before, .admin-box::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-rgb), .10), transparent 55%);
}
.sc-card:hover::before, .server-row:hover::before, .stat-card:hover::before, .plan-card:hover::before, .bcard:hover::before,
.mbox:hover::before, .session-card:hover::before, .profile-card:hover::before, .toggle-card:hover::before, .admin-box:hover::before { opacity: 1; }
.server-row:hover, .stat-card:hover, .plan-card:hover, .bcard:hover, .session-card:hover {
    transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .40) !important; box-shadow: var(--shadow-lift);
}
.sc-card:hover, .mbox:hover { border-color: var(--border-strong) !important; }
/* the temporary login-code box on the session page keeps its warm "warning" look */
.login-box { border-radius: var(--r-md); }

/* ── buttons: pill shaped, subtle lift, soft pink glow on focus ── */
button:where(:not(.mcv-menu-i)), .btn, .sc-btn, .save-btn, .admin-submit, .btn-new, .btn-manage, .btn-leave, .btn-del, .btn-xs, .btn-ghost, .del-btn, a.manage-link {
    font-family: inherit; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; justify-content: center;
    background: var(--bg-overlay) !important; color: var(--text-bright) !important;
    border: 1px solid var(--border-strong) !important; border-radius: 999px !important;
    transition: transform .25s var(--ease), box-shadow .3s var(--ease), border-color .25s, background .25s, filter .25s !important;
}
button:where(:not(.mcv-menu-i))::after, .btn::after, .sc-btn::after, .save-btn::after, .admin-submit::after { content: none !important; }   /* no shine sweep */
button:where(:not(.mcv-menu-i)):hover, .btn:hover, .sc-btn:hover, .save-btn:hover, .admin-submit:hover, .btn-new:hover, .btn-manage:hover {
    transform: translateY(-1px); border-color: rgba(var(--accent-rgb), .65) !important; box-shadow: 0 8px 20px -10px var(--accent-glow);
}
button:where(:not(.mcv-menu-i)):active, .btn:active, .sc-btn:active, .save-btn:active, .admin-submit:active { transform: translateY(0) scale(.97); transition-duration: .08s !important; }
button:disabled, .btn:disabled { opacity: .45; transform: none !important; box-shadow: none !important; cursor: not-allowed; }
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .35);
}

/* primary: filled frosting pink, chocolate text (white text in light mode) */
.btn:not(.ghost):not(.danger), .sc-btn.primary, .save-btn, .admin-submit, .btn-new, .btn-manage, button[type=submit]:not(.danger):not(.btn-leave):not(.btn-del):not(.ghost) {
    background: var(--accent) !important; border-color: transparent !important; color: var(--on-accent) !important;
    box-shadow: 0 6px 18px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn:not(.ghost):not(.danger):hover, .sc-btn.primary:hover, .save-btn:hover, .admin-submit:hover, .btn-new:hover, .btn-manage:hover, button[type=submit]:not(.danger):not(.btn-leave):not(.btn-del):not(.ghost):hover {
    background: var(--accent-mid) !important; border-color: transparent !important; box-shadow: 0 10px 24px -10px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .32);
}
/* switched-on state of toggle chips / tab buttons (soft pink tint, same as the active nav pill) */
button.on, button.active, .btn.on {
    background: var(--accent-tint) !important; color: var(--accent-text) !important; border-color: rgba(var(--accent-rgb), .55) !important;
}
/* danger */
.btn.danger, .btn-leave, .btn-del, .del-btn, button.danger {
    background: rgba(var(--danger-rgb), .10) !important; border-color: rgba(var(--danger-rgb), .45) !important; color: var(--danger) !important;
}
.btn.danger:hover, .btn-leave:hover, .btn-del:hover, .del-btn:hover, button.danger:hover {
    background: rgba(var(--danger-rgb), .20) !important; border-color: rgba(var(--danger-rgb), .75) !important; box-shadow: 0 8px 20px -10px rgba(var(--danger-rgb), .6);
}
/* ripple (theme.js) */
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .35); transform: scale(0); animation: ripple .65s ease-out forwards; pointer-events: none; z-index: -1; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ── inputs ── */
input[type=text], input[type=password], input[type=number], input[type=search], input[type=date], input:not([type]), select, textarea, .search input, .field input, .admin-field input {
    background: var(--input-bg) !important; border: 1px solid var(--border-strong) !important; border-radius: var(--r-sm) !important; color: var(--text-bright);
    transition: border-color .25s, box-shadow .3s var(--ease), background .25s !important;
}
input:hover, select:hover, textarea:hover { border-color: rgba(var(--accent-rgb), .40) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--border-focus) !important; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .22); outline: none; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .9; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* ── banners ── */
.saved-banner, .error-banner, .banner, .toggle-msg { border-radius: var(--r-md) !important; animation: slideIn .5s var(--ease) both; }
.saved-banner, .banner.ok { background: rgba(var(--ok-rgb), .10) !important; border-color: rgba(var(--ok-rgb), .40) !important; color: var(--ok); }
.error-banner, .banner.err { background: rgba(var(--danger-rgb), .10) !important; border-color: rgba(var(--danger-rgb), .40) !important; color: var(--danger); }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── status badges, health badge, pills ── */
.badge, .chip, .plan-pill, .pill { border-radius: 999px !important; }
.badge.offline, .plan-pill.free { color: var(--text-main); }          /* muted text is too faint on --bg-muted */
.badge.online .dot, .badge.linked .dot { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--ok-rgb), .6); } 70% { box-shadow: 0 0 0 7px rgba(var(--ok-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--ok-rgb), 0); } }

/* ── toasts ── */
.toast { border-radius: var(--r-md) !important; box-shadow: var(--shadow-soft) !important; }

/* ── tables ── */
table { border-collapse: separate; border-spacing: 0; }
th { color: var(--text-muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 11.5px; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: rgba(var(--accent-rgb), .06); }
td, th { border-color: var(--border) !important; }

/* ── lists / rows ── */
.chan-row, .auto-list-item, .tick-row { transition: background .2s, transform .25s var(--ease), border-color .2s; border-radius: var(--r-sm); }
.chan-row:hover, .auto-list-item:hover { background: rgba(var(--ink-rgb), .04); transform: translateX(3px); }
.tick-list { background: var(--bg-raised); border-color: var(--border) !important; border-radius: var(--r-md) !important; }
.tick-row:hover { background: rgba(var(--accent-rgb), .08) !important; }

/* links */
a { transition: color .2s; }
a:hover { color: var(--accent-text); }
.server-row img.icon, .profile-card img { transition: transform .4s var(--ease), box-shadow .4s; }
.server-row:hover img.icon { transform: scale(1.08) rotate(-3deg); box-shadow: 0 0 24px -4px var(--accent-glow); }

/* usage bars: frosting to dough */
.usage-bar { background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent)) !important; background-size: 200% 100%; animation: flow 3s linear infinite; border-radius: 99px; }
@keyframes flow { to { background-position: -200% 0; } }

/* money chart, uptime bar, connection history (colours come from the page's own rules, now variables) */
.chart-box .gl { stroke: var(--border-strong); }
.uptime-bar { border-radius: 999px; }

/* ── entrance animation (theme.js sets --i per element) ── */
.reveal { opacity: 0; transform: translateY(14px) scale(.985); animation: reveal .65s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ── login card ── */
.admin-box { box-shadow: var(--shadow-lift), 0 0 70px -34px var(--accent-glow) !important; }
.admin-box .brand-dot { animation: pulseDot 2.4s ease-in-out infinite; background: var(--accent) !important; }
@keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 3px var(--accent-tint); } 50% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); } }
.login-banner { display: block; width: 100%; height: auto; border-radius: var(--r-md); margin: 0 0 20px; }
.admin-error { color: var(--danger) !important; border-color: rgba(var(--danger-rgb), .35) !important; }
/* the login card must never be clipped on short screens */
body:has(> .admin-box) { height: auto !important; min-height: 100vh; overflow: auto !important; padding: 16px; }

/* ── light / dark switch (button added by theme.js) ── */
button.theme-toggle {
    position: fixed; left: 16px; bottom: 16px; z-index: 60; margin: 0; padding: 0;
    width: 44px; height: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; border-radius: 50% !important;
    background: var(--bg-surface) !important; border: 1px solid var(--border-strong) !important; box-shadow: var(--shadow-soft);
}
button.theme-toggle:hover { transform: translateY(-2px) rotate(-8deg); }

/* ── mobile: clean at 360px, touch targets at least 40px ── */
@media (max-width: 640px), (pointer: coarse) {
    button:where(:not(.mcv-menu-i):not(.mcv-more)), .btn, .sc-btn, .save-btn, .admin-submit, .btn-new, .btn-manage, .btn-leave, .btn-del, .btn-xs, .btn-ghost, .del-btn, a.manage-link {
        min-height: 40px;
    }
    input[type=text], input[type=password], input[type=number], input[type=search], input[type=date], input:not([type]), select { min-height: 40px; }
    .mcv-menu-i { min-height: 40px; }
    .console-input-row input, .search input, .field input, .admin-field input { font-size: 16px; }   /* stops iOS zooming into the field */
}
@media (max-width: 480px) {
    .admin-wrap { padding-left: 12px; padding-right: 12px; }
    .admin-top { gap: 8px; }
    .admin-top h1 { font-size: 19px; min-width: 0; overflow-wrap: anywhere; }
    .admin-nav { gap: 8px; }
    .admin-nav a { padding-left: 13px; padding-right: 13px; }
    .brand-logo { height: 28px; margin-right: 4px; }
    .admin-box { padding: 26px 20px !important; }
    button.theme-toggle { left: 10px; bottom: 10px; }
}

/* ── reduced motion: no animations or transitions at all ── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
    .ripple { display: none; }
}