/* VoiceTracker.net v0.5.100 — shared website / billing / app styling.
 * Load last, after the page's older inline presentation rules.
 * Cosmetic only: existing grids, sizes, audio lanes, category colors,
 * permission visibility, VT sessions, and recording code stay authoritative.
 */
html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0b1424; --bg2:#0e1a2e;
  --surface:#132239; --surface2:#182c46; --surface3:#1b3250;
  --blue:#328cf8; --blue-bright:#59a9ff;
  --text:#fff; --muted:#fff; --vt-heading:#fff;
  --spl-blue:#59a9ff; --select:#328cf8;
  --chrome:#132239; --chrome2:#182c46; --panel:#132239; --white:#132239;
  --line:#2a405a; --line-dark:#496482; --border:#2a405a;
  --panel-head-bg:#182c46; --input-bg:#0e1a2e;
  --vt-surface:#132239; --vt-field:#0e1a2e; --vt-stroke:#2a405a;
  --vt-hover:#1b3250;
  --shadow:0 15px 44px rgba(2,10,29,.20);
}
html[data-theme="dark"], html[data-theme="dark"] body,
html[data-theme="dark"] #app, html[data-theme="dark"] main {
  background:var(--bg); color:var(--text);
}
html,body {
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
button,input,select,textarea {font-family:inherit}
::selection {background:#247ee5;color:#fff}

/* The website's quiet navigation: white on hover, without an underline. */
html[data-theme="dark"] .app-header,
html[data-theme="dark"] .brand-row,
html[data-theme="dark"] .menu-strip {
  background:#0c1627; border-color:var(--line); box-shadow:none;
}
html[data-theme="dark"] .menu-btn {
  color:#bbcadc; background:transparent; border-color:transparent;
  box-shadow:none; text-decoration:none; font-weight:650;
  transition:color .18s,background .18s;
}
html[data-theme="dark"] .menu-btn:hover:not(:disabled),
html[data-theme="dark"] .menu-btn.active,
html[data-theme="dark"] .menu-btn.active:hover:not(:disabled) {
  color:#fff; background:transparent; border-color:transparent; box-shadow:none;
}
html[data-theme="dark"] :is(.app-version,.window-title-version) {
  background:var(--surface2); border-color:var(--line); color:#fff;
}

/* White supporting copy throughout the app, including generated account lists. */
html[data-theme="dark"] :is(.brand-descriptor,.brand-row .compact-label,
  .station-tools .admin-panel-header,.brand-row .vt-server-state,
  .page-toolbar h1,.page-toolbar p,.toolbar-info,.caption-meta,
  .billing-note,.empty-list,.empty-state,.log-empty,.upload-message,
  .field-help,.field-title,.form-message,.check-line,.login-plan-hint,.login-body>p,
  .log-editor-status,.log-library-help,.hour-access-summary,.mic-enhance-control,
  .legal-disclaimer,.legal-disclaimer>div:first-child,.form-grid label,
  .billing-team-toolbar label,.log-library-browser label,.station-logo-preview-box,
  .slot-copy span,.admin-row span,.billing-station-row span,.billing-user-row span,
  .log-library-row span,.library-row .muted,.library-wave-source,
  .library-wave-tail-head,.library-wave-tail-head span,.library-wave-tail-times,
  .server-meter small) {color:#fff}
html[data-theme="dark"] #logEditorList .log-edit-row .log-edit-copy>span,
html[data-theme="dark"] #logEditorList .log-edit-row .log-edit-copy strong,
html[data-theme="dark"] #logEditorList .log-edit-row .log-edit-time,
html[data-theme="dark"] #logEditorList .log-edit-row .log-edit-length {color:#fff}

/* Shared navy panels. Do not override the category-tinted hourly log rows. */
html[data-theme="dark"] :is(.spl-panel,.spl-window,.modal-card,
  .site-dialog-card,.vt-settings-dialog,.login-window) {
  background:var(--surface); border-color:var(--line);
  box-shadow:var(--shadow); border-radius:14px;
}
html[data-theme="dark"] :is(.panel-caption,.window-title,.modal-titlebar,
  .tracker-titlebar,.login-window .login-titlebar,
  .vt-settings-dialog>.modal-titlebar) {
  background:var(--surface2); border-color:var(--line); color:#fff;
}
html[data-theme="dark"] .window-title {border-radius:13px 13px 0 0}
html[data-theme="dark"] :is(.log-editor-list,.log-library-list,.library-list,
  .slot-list,.admin-table,.billing-station-list,.billing-user-list) {
  background:var(--bg2); border-color:var(--line);
}
html[data-theme="dark"] :is(.log-editor-header,.log-header) {
  background:var(--surface2); color:#fff; border-color:var(--line);
}
html[data-theme="dark"] :is(.log-editor-header span,.log-header span) {
  border-right-color:var(--line);
}
html[data-theme="dark"] :is(.log-editor-footer,.billing-team-toolbar,
  .billing-station-create,.admin-list-toolbar,.log-library-browser,.log-library-search,
  .library-meta,.admin-actions,.modal-actions,.vt-settings-dialog-footer,
  .lane-meta,.record-status-line,.vt-action-bar,.recorder-controls,.out-wave-tools,
  .in-wave-tools,.vt-wave-tools,.preview-card,.vt-bed-panel,
  .vt-settings-dialog .vt-bed-panel,.user-new-station,.studio-feature-switch,
  .server-meter) {
  background:var(--surface2); border-color:var(--line); color:#fff;
}
html[data-theme="dark"] :is(.library-wave-inner,.site-dialog-body,.login-body) {
  background:var(--surface); color:#fff;
}
html[data-theme="dark"] :is(.login-view,.login-brand) {background:var(--bg)}
html[data-theme="dark"] .login-brand {border-color:var(--line)}
html[data-theme="dark"] :is(.log-library-help,.station-logo-preview-box) {
  background:var(--surface); border-color:var(--line);
}
html[data-theme="dark"] .library-row:hover {background:var(--surface3)}
html[data-theme="dark"] .library-row.active {background:#15518b;color:#fff}
html[data-theme="dark"] .app-legal {background:#0a1322;border-color:var(--line)}
html[data-theme="dark"] .modal-shade {background:rgba(2,10,29,.70)}

/* Compact controls retain their existing sizes and padding. */
html[data-theme="dark"] :is(.spl-btn,.log-mini-btn,.mini-media,.wave-more-btn,.window-close),
html[data-theme="dark"] .wave-lane .mini-media {
  color:#fff; background:rgba(255,255,255,.055);
  border-color:rgba(194,213,237,.30); border-radius:9px;
  box-shadow:none; text-decoration:none;
  transition:background .18s,transform .18s,border-color .18s,box-shadow .18s;
}
html[data-theme="dark"] :is(.spl-btn,.log-mini-btn,.mini-media,.wave-more-btn,.window-close):hover:not(:disabled),
html[data-theme="dark"] .wave-lane .mini-media:hover:not(:disabled) {
  color:#fff; background:rgba(255,255,255,.12);
  border-color:rgba(194,213,237,.45); transform:translateY(-1px);
  box-shadow:none; text-decoration:none;
}
html[data-theme="dark"] .spl-btn.primary,
html[data-theme="dark"] .spl-btn.primary:not(:disabled),
html[data-theme="dark"] .billing-user-actions .spl-btn.team-login {
  color:#fff; background:linear-gradient(180deg,#368ffc,#116fdc);
  border-color:#347cdb; box-shadow:0 5px 15px rgba(7,108,220,.19); font-weight:760;
}
html[data-theme="dark"] .spl-btn.primary:hover:not(:disabled),
html[data-theme="dark"] .billing-user-actions .spl-btn.team-login:hover:not(:disabled) {
  color:#fff; background:linear-gradient(180deg,#4aa3ff,#247ee5);
  border-color:#347cdb; box-shadow:0 7px 19px rgba(7,108,220,.23);
  transform:translateY(-1px);
}
html[data-theme="dark"] .spl-btn:active:not(:disabled),
html[data-theme="dark"] .billing-user-actions .spl-btn.team-login:active:not(:disabled) {
  transform:translateY(0); box-shadow:none;
}
html[data-theme="dark"] .spl-btn.primary:active:not(:disabled),
html[data-theme="dark"] .billing-user-actions .spl-btn.team-login:active:not(:disabled) {
  background:linear-gradient(180deg,#368ffc,#116fdc);
}
html[data-theme="dark"] :is(.spl-btn,.log-mini-btn,.mini-media,.wave-more-btn):disabled {
  opacity:.60; cursor:not-allowed; transform:none; box-shadow:none;
}
html[data-theme="dark"] .wave-more-btn.is-loading {color:transparent}
html[data-theme="dark"] .wave-more-btn.is-loading::after,
html[data-theme="dark"] .spl-btn.is-loading::before {
  border-color:rgba(255,255,255,.28); border-top-color:#fff;
}
html[data-theme="dark"] :is(button,a,input,select,textarea,summary):focus-visible {
  outline:2px solid var(--blue-bright); outline-offset:2px;
}

/* Keep recording, destructive actions and on-air states distinct. */
html[data-theme="dark"] :is(.spl-btn.record,.record-vt-btn,.spl-btn.stop),
html[data-theme="dark"] #recordBtn {color:#ffb9c3}
html[data-theme="dark"] .spl-btn.record.live {background:#642d41;border-color:#bb5b78;color:#ffced9}
html[data-theme="dark"] .spl-btn.danger {background:#592b3c;border-color:#a45c72;color:#ffccd5}
html[data-theme="dark"] .spl-btn.danger:hover:not(:disabled),
html[data-theme="dark"] .spl-btn.record.live:hover:not(:disabled) {background:#71364b;border-color:#c7738b;color:#fff}
html[data-theme="dark"] .spl-btn.start-next {color:#92efb6}
html[data-theme="dark"] .studio-auto-toggle.is-on {background:#1c4938;border-color:#37785a;color:#92efb6}
html[data-theme="dark"] .studio-auto-toggle.is-off {background:var(--surface3);border-color:#496482;color:#fff}
html[data-theme="dark"] .studio-auto-toggle.is-on:hover:not(:disabled) {background:#245c46;color:#b4ffd2}
html[data-theme="dark"] .studio-auto-toggle.is-off:hover:not(:disabled) {background:#244465;color:#fff}
html[data-theme="dark"] :is(.form-error,.library-wave-message.error) {color:#ffb9c3}
html[data-theme="dark"] .slot-badge.recorded {color:#b1d3ff}
html[data-theme="dark"] .slot-badge.delivered {color:#92efb6}
html[data-theme="dark"] .slot-badge.error {color:#ffb9c3}
html[data-theme="dark"] .log-vt-status,
html[data-theme="dark"] .log-vt-status.open {background:var(--surface2);border-color:var(--line);color:#fff}
html[data-theme="dark"] .log-vt-status.recorded {background:#1b3351;border-color:#4e80b4;color:#b1d3ff}
html[data-theme="dark"] .log-vt-status.delivered {background:#1c4938;border-color:#37785a;color:#92efb6}
html[data-theme="dark"] .hours-chip {background:var(--surface2);border-color:#496482;color:#fff!important}
html[data-theme="dark"] .hours-chip.restricted {background:#40331a;border-color:#8d6a2b;color:#ffe2a4!important}
html[data-theme="dark"] .hours-chip.none {background:#592b3c;border-color:#a45c72;color:#ffccd5!important}

/* Readable dark fields, including the older modal-specific input rules. */
html[data-theme="dark"] #app :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  background:var(--bg2); color:#fff; border-color:#496482; border-radius:9px;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {color:#f4f8ff;opacity:1}
html[data-theme="dark"] #app :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus {border-color:var(--blue-bright)}
html[data-theme="dark"] :is(input[type="checkbox"],input[type="radio"],input[type="range"]) {
  accent-color:var(--blue);
}
html[data-theme="dark"] .vt-space-hint kbd {background:var(--bg2);border-color:#496482;color:#fff}
html[data-theme="dark"] input[type="file"]::file-selector-button {
  color:#fff;background:var(--surface2);border:1px solid #496482;border-radius:6px;font:inherit;
}

/* Older inline station-user editor rules need the final palette too. */
html[data-theme="dark"] #teamUserModal .team-edit-section {background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] #teamUserModal .team-permission-item {background:var(--surface2);border-color:var(--line);color:#fff}
html[data-theme="dark"] #teamUserModal :is(.team-edit-heading,.team-schedule summary,
  .team-edit-heading .check-line,.team-permission-item small,.team-schedule-summary) {color:#fff}
html[data-theme="dark"] #teamUserModal .team-schedule-content {border-color:var(--line)}
html[data-theme="dark"] #teamUserModal .team-edit-actions {background:var(--surface2);border-color:var(--line)}
html[data-theme="dark"] :is(.hour-check-grid,.day-check-grid,.check-grid) {background:var(--bg2);border-color:var(--line)}
html[data-theme="dark"] :is(.hour-check-grid label,.day-check-grid label) {background:var(--surface2);border-color:var(--line);color:#fff}
html[data-theme="dark"] :is(.studio-feature-switch small,.vt-diagnostics small,.whmcs-once small) {color:#fff;opacity:1}

/* Studio Monitor chrome and loading overlays share the same navy surfaces. */
html[data-theme="dark"] #studioMonitorBar {background:var(--surface);border-color:var(--line);color:#fff;box-shadow:var(--shadow)}
html[data-theme="dark"] #studioMonitorBar .studio-inline-heading {background:var(--surface2);border-color:var(--line);color:#fff}
html[data-theme="dark"] #studioMonitorBar :is(.studio-inline-label,.studio-inline-extra,.studio-inline-hint) {color:#fff;border-color:var(--line);opacity:1}
html[data-theme="dark"] #studioMonitorBar :is(.studio-inline-updated,.studio-inline-song #studioNowArtist) {color:#fff;opacity:1}
html[data-theme="dark"] #studioMonitorBar :is(.studio-inline-song,.studio-inline-state) {border-color:var(--line)}
html[data-theme="dark"] #studioMonitorBar .studio-inline-connection:not([data-status="connected"]):not([data-status="reachable"]):not([data-status="unreachable"]):not([data-status="auth_failed"]):not([data-status="protocol_error"]) {
  background:var(--surface2);border-color:#496482;color:#fff;
}
html[data-theme="dark"] #studioMonitorBar .studio-inline-progress {background:var(--bg2)}
html[data-theme="dark"] #studioMonitorBar .studio-inline-progress span {background:linear-gradient(90deg,#116fdc,#59a9ff)}
html[data-theme="dark"] :is(.server-meter-track,.station-switch-progress) {background:var(--bg2);border-color:var(--line)}
html[data-theme="dark"] .station-switch-overlay {background:rgba(11,20,36,.90)}
html[data-theme="dark"] .station-switch-panel {background:var(--surface);border-color:var(--line);color:#fff;box-shadow:var(--shadow)}
html[data-theme="dark"] .station-switch-panel p {color:#fff}
html[data-theme="dark"] .station-switch-ring {border-color:var(--line);border-top-color:var(--blue-bright);border-right-color:var(--blue-bright)}
html[data-theme="dark"] .station-switch-progress span {background:var(--blue)}
html[data-theme="dark"] .brand-row .station-logo-control,
html[data-theme="dark"] .brand-row .station-logo-control:disabled,
html[data-theme="dark"] .brand-row .station-logo-control:disabled:hover,
html[data-theme="dark"] .brand-row .station-logo-control:disabled:active {background:var(--surface);border-color:var(--line);box-shadow:none}
html[data-theme="dark"] .brand-row .station-logo-control:hover:not(:disabled) {background:var(--surface2);border-color:var(--blue-bright)}
html[data-theme="dark"] .brand-row .station-logo-square {background:rgba(89,169,255,.10);color:var(--blue-bright)}

@media(prefers-reduced-motion:reduce) {
  html[data-theme="dark"] :is(.menu-btn,.spl-btn,.log-mini-btn,.mini-media,.wave-more-btn,.window-close) {transition:none}
  html[data-theme="dark"] :is(.spl-btn,.log-mini-btn,.mini-media,.wave-more-btn,.window-close):hover:not(:disabled),
  html[data-theme="dark"] .wave-lane .mini-media:hover:not(:disabled),
  html[data-theme="dark"] .spl-btn.primary:hover:not(:disabled),
  html[data-theme="dark"] .billing-user-actions .spl-btn.team-login:hover:not(:disabled) {transform:none}
}