/* ═══════════════════════════════════════════════════════════════════════════
   admin-theme.css — r73 modern reskin for the event admin.
   Layered AFTER admin.css so it wins the cascade without touching wiring.
   Works in both dark (default) and body.daymode. Customer instances
   (?event=) default to daymode via admin-gate.js.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --a-accent: #6366F1;
  --a-accent-deep: #4F46E5;
  --a-accent-soft: rgba(99, 102, 241, .14);
  --a-radius: 14px;
  --a-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
body.daymode {
  --a-accent-soft: #EEF2FF;
  --a-shadow: 0 4px 14px rgba(15, 23, 42, .08);
  --dark: #F6F7FB;
  --dark2: #FFFFFF;
  --dark3: #EFF1F7;
  --text: #0F172A;
  --muted: #5B6472;
}

body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* ── PIN / gate screen ── */
#pin-screen {
  background: radial-gradient(1100px 500px at 50% -10%, rgba(99,102,241,.25), transparent), var(--dark);
  gap: 6px;
}
body.daymode #pin-screen {
  background: radial-gradient(1100px 500px at 50% -10%, #E4E7FF, transparent), #F6F7FB;
}
.pin-logo { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.02em; font-size: 1.5rem; }
.pin-input {
  border-radius: 12px; font-size: 20px; letter-spacing: .35em; text-align: center;
  border: 1.5px solid var(--border-strong); background: var(--dark2); color: var(--text);
}
.pin-input:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 3px var(--a-accent-soft); }
.pin-btn {
  background: var(--a-accent); border: none; border-radius: 100px; font-weight: 700;
  padding: 12px 28px; cursor: pointer; transition: transform .12s, background .12s; color: #fff;
}
.pin-btn:hover { background: var(--a-accent-deep); transform: translateY(-1px); }

/* ── Topbar ── */
.topbar {
  background: color-mix(in srgb, var(--dark2) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 12px 18px;
}
.topbar-logo {
  font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.01em;
  font-size: 1.02rem; color: var(--text);
}
body:not(.daymode) .topbar-logo { color: var(--gold-light); }
.topbar-btn { border-radius: 100px; padding: 7px 13px; font-size: 11.5px; }
.topbar-btn:hover { border-color: var(--a-accent); }

/* ── Section tabs ── */
.tab-bar {
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
  padding: 6px 10px; gap: 2px;
}
.tab {
  border: none; border-radius: 100px; padding: 9px 16px; margin: 3px 1px;
  border-bottom: none; text-transform: none; letter-spacing: .2px; font-size: 12.5px;
  transition: background .15s, color .15s;
}
.tab:hover { background: var(--dark3); color: var(--text); }
.tab.active {
  background: var(--a-accent); color: #fff !important;
  border-bottom: none; box-shadow: 0 2px 8px rgba(99, 102, 241, .35);
}

/* ── Sub tabs ── */
.subtab-bar { padding: 8px 12px; gap: 4px; background: transparent; }
.subtab { border-radius: 100px; padding: 7px 14px; border: 1px solid transparent; }
.subtab:hover { background: var(--dark3); color: var(--text); }
.subtab.active { background: var(--a-accent-soft); color: var(--a-accent); border-color: color-mix(in srgb, var(--a-accent) 40%, transparent); }
body:not(.daymode) .subtab.active { color: #C7CBFF; }

/* ── Panels & cards ── */
.panel { max-width: 680px; padding: 20px 16px 60px; }
.card, .ann-card, .log-entry, .modal, .sg-block {
  border-radius: var(--a-radius);
  border: 1px solid var(--border);
  box-shadow: var(--a-shadow);
}
body.daymode .card, body.daymode .ann-card, body.daymode .log-entry,
body.daymode .modal, body.daymode .sg-block { background: #fff; }

/* ── Forms & buttons ── */
.form-input, select.form-input, textarea.form-input {
  border-radius: 11px; border: 1.5px solid var(--border-strong);
  padding: 11px 13px; font-size: 14px; transition: border-color .12s, box-shadow .12s;
}
.form-input:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 3px var(--a-accent-soft); }
button, .btn { font-family: 'Inter', sans-serif; }

/* Primary-looking action buttons that admin.js styles inline stay put; give
   generic buttons consistent rounding. */
.panel button:not(.tab):not(.subtab):not(.module-arrows button) { border-radius: 10px; }

/* ── Modals ── */
.modal-overlay { backdrop-filter: blur(4px); background: rgba(8, 10, 16, .55); }
body.daymode .modal-overlay { background: rgba(15, 23, 42, .35); }

/* ── Logs ── */
.log-entry { padding: 10px 13px; }
.log-action-chip { border-radius: 100px; }

/* ── Scrollbars ── */
::-webkit-scrollbar { height: 8px; width: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 100px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Small screens: tab bars scroll cleanly ── */
@media (max-width: 720px) {
  .tab { padding: 8px 13px; font-size: 12px; }
  .panel { padding: 14px 12px 80px; }
}

/* r77 — heading legibility + typography in day mode; Inter everywhere */
.panel h1, .panel h2, .panel h3 { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 800; letter-spacing: -.01em; }
body.daymode h1, body.daymode h2, body.daymode h3, body.daymode .panel h2 { color: var(--text) !important; text-shadow: none !important; }
body.daymode .panel h2 * { color: inherit; }

/* r77b — real heading class is .sec-title (legacy hardcoded white Playfair) */
.sec-title { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: -.01em; color: var(--text) !important; text-shadow: none !important; }
/* Primary actions go accent in day mode; dark keeps the legacy gold */
body.daymode .btn-gold { background: var(--a-accent) !important; border-color: var(--a-accent-deep) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(99,102,241,.28) !important; }
body.daymode .btn-gold:hover { background: var(--a-accent-deep) !important; }

/* ═══ r84 — deep-panel day mode: schedule grid, chips, borders ═══ */
body.daymode .sg-track { background: rgba(15, 23, 42, .05); }
body.daymode .sg-track .tick { background: rgba(15, 23, 42, .08); }
body.daymode .sg-time-tick { border-left-color: rgba(15, 23, 42, .12); }
body.daymode .sg-stage-label { color: #B45309; }
body.daymode .sg-block.main { background: linear-gradient(135deg, #FEF3C7, #FDE68A); border-color: #F59E0B; }
body.daymode .sg-block.side { background: linear-gradient(135deg, #CCFBF1, #99F6E4); border-color: #14B8A6; }
body.daymode .sg-block.acoustic { background: linear-gradient(135deg, #EDE9FE, #DDD6FE); border-color: #8B5CF6; }
body.daymode .sg-block.main * { color: #78350F !important; }
body.daymode .sg-block.side * { color: #134E4A !important; }
body.daymode .sg-block.acoustic * { color: #4C1D95 !important; }
body.daymode .sg-block:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, .18); filter: none; }
/* translucent-white chrome that vanishes on light backgrounds */
body.daymode .btn-outline { border-color: rgba(15, 23, 42, .22); color: var(--text); }
body.daymode .btn-outline:hover { background: rgba(15, 23, 42, .05); }
body.daymode .log-filter { border-color: rgba(15, 23, 42, .18); }
body.daymode .log-filter:hover { border-color: rgba(15, 23, 42, .35); }
body.daymode .log-entry { background: #fff; }
body.daymode .log-entry-icon { background: rgba(15, 23, 42, .05); }
body.daymode .log-empty { background: #fff; border-color: rgba(15, 23, 42, .15); }
body.daymode .module-arrows button:hover:not(:disabled) { background: rgba(15, 23, 42, .06); }
body.daymode .log-search { background: #fff; }

/* ═══ r85 — sidebar shell + Overview ═══ */
body.cw-shell #app { display: block !important; }
#cw-side { position: fixed; left: 0; top: 57px; bottom: 0; width: 240px; overflow-y: auto; background: var(--dark2); border-right: 1px solid var(--border); padding: 12px 10px 40px; z-index: 150; }
body.cw-shell #subtab-bars { display: contents; }
#cw-side .subtab-bar { display: flex !important; flex-direction: column; gap: 2px; padding: 2px 0 10px; overflow: visible; }
#cw-side .subtab { justify-content: flex-start; text-align: left; width: 100%; border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--text); opacity: .92; }
#cw-side .subtab.active { background: var(--a-accent); color: #fff !important; border-color: transparent; box-shadow: 0 2px 8px rgba(99,102,241,.3); opacity: 1; }
/* r87 — heads are real buttons: clickable, and hidden by JS when empty */
.cw-side-head { display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 14px 12px 5px; }
button.cw-side-head:hover { color: var(--a-accent); }
.cw-side-head-static { cursor: default; }
.cw-side-overview { width: 100%; border: none; background: transparent; font-weight: 800; font-size: 13.5px; cursor: pointer; }
body.cw-shell .panel { margin-left: 240px; max-width: 1150px; padding: 24px 30px 80px; }
body.cw-shell .tab-bar { display: none !important; }
@media (max-width: 860px) {
  #cw-side { position: static; width: auto; top: auto; display: flex; flex-direction: row; overflow-x: auto; padding: 8px; border-right: none; border-bottom: 1px solid var(--border); }
  #cw-side .subtab-bar { flex-direction: row; }
  #cw-side .subtab { white-space: nowrap; }
  .cw-side-head { white-space: nowrap; padding: 10px 8px 5px; }
  body.cw-shell .panel { margin-left: 0; }
}
/* Overview panel */
.cw-ov-hero { background: linear-gradient(120deg, var(--a-accent), #A855F7); color: #fff; border-radius: 18px; padding: 26px 26px; margin-bottom: 16px; }
.cw-ov-name { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.cw-ov-meta { font-size: 13px; opacity: .9; margin-top: 4px; }
.cw-ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cw-ov-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; background: var(--dark2); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; font-family: inherit; color: var(--text); }
.cw-ov-card:hover { transform: translateY(-2px); border-color: var(--a-accent); box-shadow: 0 8px 20px rgba(99,102,241,.15); }
.cw-ov-card span { font-size: 21px; }
.cw-ov-card b { font-size: 13.5px; font-weight: 800; }
.cw-ov-card small { font-size: 11.5px; color: var(--muted); }
body.daymode .cw-ov-card { background: #fff; }
.cw-ov-plan { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; background: var(--dark2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
body.daymode .cw-ov-plan { background: linear-gradient(120deg, #EEF2FF, #fff); }
.cw-ov-plan-label { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cw-ov-plan-tier { font-size: 18px; font-weight: 800; }
.cw-ov-plan-sub { font-size: 12px; color: var(--muted); }
.cw-ov-plan-btn { text-decoration: none; padding: 9px 16px; border-radius: 100px; font-size: 12.5px; font-weight: 700; border: 1.5px solid var(--border-strong); color: var(--text); }
.cw-ov-links { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* ═══ r86 — studio CTA, pins, theme picker, modals, modules hub ═══ */
.cw-studio-cta { display: flex; align-items: center; gap: 10px; margin: 4px 2px 6px; padding: 12px 12px; border-radius: 14px; background: linear-gradient(120deg, var(--a-accent), #A855F7); color: #fff; text-decoration: none; box-shadow: 0 6px 16px rgba(99,102,241,.3); transition: transform .12s; }
.cw-studio-cta:hover { transform: translateY(-1px); }
.cw-studio-cta > span:first-child { font-size: 20px; }
.cw-studio-cta b { display: block; font-size: 13px; }
.cw-studio-cta small { font-size: 10.5px; opacity: .85; line-height: 1.3; display: block; }
#cw-side .subtab { position: relative; padding-right: 30px; }
.cw-pin { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: 0; cursor: pointer; color: #F59E0B; }
#cw-side .subtab:hover .cw-pin { opacity: .8; }
.cw-pin.on { opacity: 1 !important; }
.cw-theme-box { padding: 14px 12px 8px; border-top: 1px solid var(--border); margin-top: 10px; }
.cw-accent-row { display: flex; gap: 8px; padding: 4px 2px; }
.cw-accent-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .1s; }
.cw-accent-dot:hover { transform: scale(1.15); }
.cw-accent-dot.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--dark2); }
.cw-shell-modal { position: fixed; inset: 0; z-index: 999; background: rgba(15,23,42,.5); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cw-shell-modal-card { position: relative; background: var(--dark2); border: 1px solid var(--border); border-radius: 18px; padding: 22px; max-width: 480px; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(15,23,42,.35); }
body.daymode .cw-shell-modal-card { background: #fff; }
.cw-shell-modal-x { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 16px; cursor: pointer; color: var(--muted); }
.cw-shell-modal-title { font-weight: 800; font-size: 15px; margin-bottom: 12px; color: var(--text); }
.cw-preview-frame { width: 100%; height: min(62vh, 640px); border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.cw-modal-link { display: inline-block; margin-top: 10px; padding: 8px 16px; border-radius: 100px; font-size: 12.5px; font-weight: 700; text-decoration: none; border: 1.5px solid var(--border-strong); color: var(--text); }
.cw-qr-target { display: flex; justify-content: center; padding: 8px; }
.cw-qr-target canvas, .cw-qr-target img { border-radius: 12px; background: #fff; padding: 8px; }
.cw-modal-sub { font-size: 12px; color: var(--muted); margin-top: 8px; }
.cw-ov-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.cw-ov-pin b { font-size: 13px; }
.cw-mod-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--dark2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; }
body.daymode .cw-mod-row { background: #fff; }
.cw-mod-row.off { opacity: .65; }
.cw-mod-icon { font-size: 20px; }
.cw-mod-info { flex: 1; min-width: 0; }
.cw-mod-info b { font-size: 13.5px; display: block; color: var(--text); }
.cw-mod-info small { font-size: 11.5px; color: var(--muted); }
.cw-mod-btn { padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--border-strong); background: transparent; color: var(--text); }
.cw-mod-btn:hover { border-color: var(--a-accent); color: var(--a-accent); }
.cw-mod-chip { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.cw-mod-chip.on { color: #059669; }

/* r86c — phone-framed preview modal */
.cw-phone-wrap { display: flex; justify-content: center; padding: 6px 0; }
.cw-phone-wrap .cw-preview-frame { width: 390px; max-width: 100%; height: min(68vh, 700px); border: 6px solid #0F172A; border-radius: 28px; background: #fff; }

/* ═══ r87 — IA pass: topbar dropdowns, analytics hub, settings nav, hero ═══ */
.cw-top-dd { position: relative; display: inline-block; }
.cw-top-dd-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--dark2); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 44px rgba(15,23,42,.28); padding: 6px; display: none; z-index: 400; }
body.daymode .cw-top-dd-menu { background: #fff; }
.cw-top-dd-menu.open { display: block; }
.cw-dd-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: transparent; border-radius: 9px; padding: 10px 12px; font: 600 13px 'Inter', system-ui, sans-serif; color: var(--text); cursor: pointer; text-decoration: none; }
.cw-dd-item:hover { background: var(--a-accent-soft); color: var(--a-accent); }
.cw-dd-danger { color: #DC2626 !important; }
.cw-dd-sep { height: 1px; background: var(--border); margin: 5px 8px; }

/* Overview hero actions + event link row */
.cw-ov-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cw-ov-hero-btn { border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14); color: #fff; border-radius: 100px; padding: 10px 18px; font: 700 13px 'Inter', system-ui, sans-serif; cursor: pointer; }
.cw-ov-hero-btn:hover { background: rgba(255,255,255,.26); }
.cw-ov-linkrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; background: var(--dark2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; }
body.daymode .cw-ov-linkrow { background: #fff; }
.cw-ov-linkurl { font: 600 13px ui-monospace, monospace; color: var(--text); overflow-wrap: anywhere; }
.cw-ov-linkbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.cw-ov-linkbtn { padding: 7px 14px; border-radius: 100px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--border-strong); background: transparent; color: var(--text); text-decoration: none; }
.cw-ov-linkbtn:hover { border-color: var(--a-accent); color: var(--a-accent); }

/* Analytics hub */
.cw-ana-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cw-ana-tab { border: 1px solid var(--border-strong); background: transparent; color: var(--text); border-radius: 100px; padding: 7px 14px; font: 700 12.5px 'Inter', system-ui, sans-serif; cursor: pointer; }
.cw-ana-tab:hover { border-color: var(--a-accent); color: var(--a-accent); }
.cw-ana-tab.active { background: var(--a-accent); border-color: var(--a-accent); color: #fff; }
.cw-ana-frame { width: 100%; height: min(72vh, 820px); border: 1px solid var(--border); border-radius: 14px; background: #fff; }

/* Settings "On this page" jump nav */
.cw-set-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 18px; }
.cw-set-chip { border: 1px solid var(--border-strong); background: transparent; color: var(--muted); border-radius: 100px; padding: 6px 13px; font: 600 12px 'Inter', system-ui, sans-serif; cursor: pointer; }
.cw-set-chip:hover { border-color: var(--a-accent); color: var(--a-accent); }
.cw-set-flash { outline: 2px solid var(--a-accent); outline-offset: 2px; transition: outline-color .3s; }