/* Presentation only: route, permission and data-state classes remain authoritative. */
#appView {
  --ink: #f2f1ef; --text-strong: #fff; --muted: #b4b5bc;
  --panel: #202126; --panel-2: #17181c; --panel-3: #2a2b32;
  --surface: #202126; --surface-soft: #24252b; --line: #393a43;
  --field: #18191e; --field-ink: #f4f3f1;
  --ui-accent: #ed777e; --ui-accent-soft: #ed777e15; --ui-base: #141518;
  --ui-nav: #101113; --ui-hover: #2a2729; --ui-head: #26272d;
  --experience-accent: #ed777e; --experience-glass: #202126;
  color: var(--ink); background: var(--ui-base); color-scheme: dark;
}
body.light-theme #appView {
  --ink: #25262d; --text-strong: #16171c; --muted: #60616c;
  --panel: #fff; --panel-2: #f4f4f7; --panel-3: #ededf2;
  --surface: #fff; --surface-soft: #f8f8fa; --line: #d9d9e1;
  --field: #fff; --field-ink: #25262d;
  --ui-accent: #ae3445; --ui-accent-soft: #ed777e15; --ui-base: #f2f2f5;
  --ui-nav: #fff; --ui-hover: #f9edef; --ui-head: #f6f6f8;
  --experience-accent: #ae3445; --experience-glass: #fff;
  background: var(--ui-base); color-scheme: light;
}
#appView .sidebar {
  background: var(--ui-nav); border-right: 1px solid var(--line);
  box-shadow: none; padding: 24px 16px; gap: 24px;
}
#appView .sidebar-brand { gap: 12px; padding: 0 8px 20px; border-bottom: 1px solid var(--line); }
#appView .sidebar-brand strong { font-size: 22px; color: var(--text-strong); }
#appView .sidebar-brand span { color: var(--muted); font-size: 12px; }
#appView .sidebar-user { padding: 12px 16px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--ui-accent); }
#appView .sidebar-user span { color: var(--muted); }
#appView .sidebar-user strong { color: var(--ink); }
#appView .main-nav { gap: 5px; }
#appView .main-nav .nav-item {
  position: relative; isolation: isolate; overflow: hidden; min-height: 46px;
  padding: 11px 14px; gap: 13px; border: 1px solid transparent;
  border-radius: 8px; background: transparent; color: var(--muted);
  box-shadow: none; text-align: left;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
#appView .main-nav .nav-item::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, var(--ui-accent-soft), transparent);
  transform: translateX(-101%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
#appView .main-nav .nav-icon { color: inherit; flex-shrink: 0; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
#appView .main-nav .nav-label { transition: transform .28s cubic-bezier(.2,.8,.2,1); }
body #appView .main-nav .nav-item.active {
  color: var(--ui-accent); background: var(--ui-accent-soft);
  border-color: var(--line); box-shadow: inset 3px 0 var(--ui-accent);
}
@media (hover: hover) {
  body #appView .main-nav .nav-item:hover { color: var(--ink); background: var(--ui-hover); border-color: var(--line); }
  #appView .main-nav .nav-item:hover::after { transform: translateX(0); }
  #appView .main-nav .nav-item:hover .nav-icon { transform: translateY(-2px) rotate(-8deg); color: var(--ui-accent); }
  #appView .main-nav .nav-item:hover .nav-label { transform: translateX(4px); }
}
#appView .main-nav .nav-item:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -3px; }
#appView .logout-button { border-top: 1px solid var(--line); border-radius: 0; margin-top: 12px; color: var(--muted); background: transparent; }
#appView .logout-button:hover { color: #ed777e; background: var(--ui-accent-soft); }
#appView .sidebar-toggle { color: var(--ui-accent); background: var(--panel); border: 1px solid var(--line); }
#appView .workspace { gap: 24px; }
#appView .topbar { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px 0 22px; backdrop-filter: none; box-shadow: none; }
#appView .topbar .eyebrow { color: var(--muted); font-size: 11px; margin-bottom: 6px; }
#appView .topbar h2 { color: var(--ink); font-size: 27px; font-weight: 650; }
#appView .topbar-actions { gap: 7px; }
#appView .theme-switch { color: var(--muted); }
#appView :is(.tool-button, .ghost-button):not(.bulk-action-add):not(.bulk-action-delete):not(.bulk-action-type) { background: var(--panel-3); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
#appView .primary-button { background: #b73a46; color: #fff; box-shadow: none; border: 1px solid #ed777e; }
#appView :is(.tool-button, .ghost-button):hover { border-color: var(--ui-accent); }
#appView :is(button, input, select, textarea):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
#appView .stats-grid { gap: 10px; }
#appView .stat { background: #202126; border: 1px solid #393a43; border-top-width: 3px; border-radius: 8px; box-shadow: none; padding: 16px 18px; }
#appView .stat span { color: #c5c5ce; font-weight: 500; font-size: 13px; }
#appView .stat strong { color: #fff; font-size: 32px; margin-top: 12px; font-weight: 600; }
#appView .stat-total { border-top-color: #ed777e; }
#appView .stat-green { border-top-color: #58cba3; }
#appView .stat-red { border-top-color: #eb7b89; }
#appView .stat-blue { border-top-color: #7caaff; }
#appView .stat-amber { border-top-color: #edc66b; }
#appView .stat-purple { border-top-color: #bba1ee; }
#appView :is(.list-panel, .detail-panel, .home-card, .definition-card, .participant-summary-card) { background: var(--surface); border-color: var(--line); box-shadow: none; }
#appView .home-dashboard { gap: 24px; }
#appView .home-card { background: transparent; border: 0; border-radius: 0; padding: 0; }
#appView .home-card-header { border-bottom: 1px solid var(--line); padding: 0 0 16px; margin-bottom: 16px; }
#appView .home-card-header h3 { font-size: 18px; font-weight: 600; color: var(--ink); }
#appView .home-card-header .eyebrow { color: var(--ui-accent); font-size: 11px; }
#appView :is(.home-summary-table, .hotel-block-card, .live-feed-item) { background: var(--surface); border-color: var(--line); }
#appView .report-card { background: var(--surface); border: 1px solid var(--line); color: var(--ink); min-height: 90px; box-shadow: none; }
#appView .report-card .button-icon { color: var(--ui-accent); width: 24px; height: 24px; }
#appView .report-card:hover { border-color: var(--ui-accent); background: var(--ui-hover); }
#appView table { background: var(--surface); color: var(--ink); }
#appView :is(th, td) { border-color: var(--line); }
#appView thead th:not([class*="report-header-"]) { background: var(--ui-head); color: var(--muted); font-size: 12px; padding-top: 14px; padding-bottom: 14px; }
#appView tbody tr { background: transparent; }
#appView tbody tr:hover { background: var(--ui-accent-soft); }
#appView tbody tr.selected-row { background: var(--ui-accent-soft); box-shadow: inset 3px 0 var(--ui-accent); }
#appView :is(.list-footer, .panel-header) { background: transparent; color: var(--muted); border-color: var(--line); }
#appView input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),
#appView select, #appView textarea { background: var(--field); color: var(--field-ink); border-color: var(--line); }
#appView input::placeholder, #appView textarea::placeholder { color: var(--muted); opacity: 1; }
#appView label { color: var(--ink); }
#appView .topbar > div:first-child { flex-shrink: 0; }
body #appView .quick-filters .chip { background: var(--panel-3); color: var(--ink); border-color: var(--line); box-shadow: none; }
body #appView .quick-filters .chip.active { background: var(--ui-accent); color: var(--ui-base); border-color: var(--ui-accent); }
#appView .theme-switch { background: var(--panel); border-color: var(--line); }
body:has(#appView:not(.is-hidden)):not(.light-theme) .modal-panel {
  --ink: #f2f1ef; --muted: #b4b5bc; --panel: #202126; --panel-2: #17181c;
  --panel-3: #2a2b32; --surface: #202126; --line: #393a43; --field: #18191e; --field-ink: #f4f3f1;
  background: var(--panel); color: var(--ink); border-color: var(--line); color-scheme: dark;
}
body:has(#appView:not(.is-hidden)) .site-copyright { background: #18191e; color: #b4b5bc; border-color: #393a43; }
@media (max-width: 1120px) {
  #appView .sidebar { padding: 14px; gap: 12px; }
  #appView .sidebar-brand { padding: 0 0 12px; }
  #appView .main-nav .nav-item { min-height: 44px; }
}
@media (max-width: 760px) {
  #appView .workspace { gap: 16px; }
  #appView .topbar h2 { font-size: 23px; }
  #appView .stat { padding: 12px; }
  #appView .stat strong { font-size: 28px; }
  #appView .home-dashboard { gap: 20px; }
  #appView .main-nav .nav-item:hover .nav-label { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #appView .main-nav .nav-item::after { transition: none; }
  #appView .main-nav .nav-icon, #appView .main-nav .nav-label { transition: none; transform: none; }
}
/* Individual translate preserves existing positioning transforms and animations. */
body :is(#appView, .modal-panel) button:is(.action-save, [data-add-participant-course]) {
  background: #198754; color: #fff; border-color: #157347;
}
body :is(#appView, .modal-panel) button:is(.danger-button, .danger-mini, .danger, .bulk-action-delete) {
  background: #c43b4a; color: #fff; border-color: #a92e3b;
}
body :is(#appView, .modal-panel) button:is(.action-save, [data-add-participant-course]):not(:disabled):hover {
  background: #157347; color: #fff; border-color: #12633d;
}
body :is(#appView, .modal-panel) button:is(.danger-button, .danger-mini, .danger, .bulk-action-delete):not(:disabled):hover {
  background: #aa2f3d; color: #fff; border-color: #932936;
}
body :is(button, input[type=button], input[type=submit], input[type=reset], a[role=button]) {
  transition: translate .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  body :is(button, input[type=button], input[type=submit], input[type=reset], a[role=button]):not(:disabled):not([aria-disabled=true]):hover {
    translate: 0 -2px;
    filter: brightness(1.12);
  }
  body :is(button, input[type=button], input[type=submit], input[type=reset], a[role=button]):not(:disabled):not([aria-disabled=true]):active {
    translate: 0 0;
    filter: brightness(.96);
  }
}
@media (prefers-reduced-motion: reduce) {
  body :is(button, input[type=button], input[type=submit], input[type=reset], a[role=button]) {
    transition: none !important;
    translate: none !important;
  }
}