/* AXLE ONE — Spotify-inspired near-black colour palette, 09/10/2026.
 * Spotify dark interface colour roles only; retain all existing AXLE layout and styles.
 * Preserve existing AXLE gold #E7B122; this file changes presentation only.
 * Loaded last after existing app + Ava + shared control styles.
 */
:root {
  color-scheme: dark;
  --bg: #121212;
  --side: #000000;
  --panel: #181818;
  --panel2: #282828;
  --edge: #2a2a2a;
  --text: #ffffff;
  --muted: #b3b3b3;
  --gold: #e7b122;
  --accent: #e7b122;
  --surface-hover: #282828;
  --surface-deep: #121212;
  --axle-subtle: #a7a7a7;
  --axle-panel: #181818;
  --axle-input: #282828;
  --axle-control-border: #3e3e3e;
  --axle-control-hover: #4d4d4d;
  --axle-focus: #e7b122;
}
html, body { background:var(--bg); color:var(--text); font-family:Manrope,Arial,sans-serif; }
body, button, input, select, textarea, .mono, .sidefoot { font-family:Manrope,Arial,sans-serif; }
button, input, select, textarea { font-size:inherit; }
::selection { background:#765d1e; color:#ffffff; }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
::placeholder { color:var(--axle-subtle); }

/* Canvas, navigation and content hierarchy */
.shell, #app { background:var(--bg); }
.shell .main, #app > .main, .main {
  background:var(--bg);
  background-image:none;
  box-shadow:none;
}
.sidebar, #app > .sidebar {
  background:var(--side);
  border-color:#282828;
  box-shadow:none;
}
.signature { border-color:#242424; }
.signature small, .subbrand, .sidebar .nav-group-title { color:var(--axle-subtle); }
.signature-mark { background:transparent; border-color:#59503b; color:var(--gold); }
#nav { gap:18px; }
#nav .nav-group { gap:3px; }
#nav button, .nav button {
  color:#b3b3b3;
  background:transparent;
  border-color:transparent;
  border-radius:10px;
  font-weight:600;
  letter-spacing:0;
}
#nav button .shell-icon { color:#b3b3b3; }
#nav button:hover, .nav button:hover {
  color:#ffffff;
  background:#282828;
  border-color:transparent;
}
#nav button.active, .nav button.active,
#nav button.active:hover, .nav button.active:hover {
  background:#282828;
  border-left-color:transparent;
  color:#ffffff;
}
#nav button.active .shell-icon, .nav button.active > span:first-child {
  color:var(--gold);
}
.side-bottom, .sidefoot { border-color:#282828; color:var(--axle-subtle); }
.topbar, .main > .topbar {
  background:var(--bg);
  background-image:none;
  border-color:#242424;
  box-shadow:none;
  min-height:94px;
}
.topbar-location, .location-divider { color:#a7a7a7; }
.topbar-location span:last-child { color:#b3b3b3; }
.topbar h1, .page-title, h1 { color:#ffffff; letter-spacing:-.85px; }
.topbar p, .topbar-date, .datepill { color:#a7a7a7; }
.topbar-date, .datepill { background:#181818; border-color:#2a2a2a; }
h2, h3, .sectionhead h2 { color:#ffffff; letter-spacing:-.3px; }
.muted, .empty, .fine-print { color:#b3b3b3; }

/* Quiet, flat content panels and data */
.panel, .card, .stats .stat, .auth-panel {
  background:var(--panel);
  background-image:none;
  border:1px solid var(--edge);
  border-radius:14px;
  box-shadow:none;
}
.panel:hover { border-color:#333333; }
.stats .stat { min-height:136px; }
.stat>span, .stat small { color:#b3b3b3; }
.stat strong, .metric {
  color:#ffffff;
  font-family:Manrope,Arial,sans-serif;
  font-weight:800;
}
.item, .listrow, .soft-divider { border-color:var(--edge); }
.item-main strong, .workload-details strong { color:#ffffff; }
.item-main small, .workload-details, .list-filter, .form-stack label { color:#b3b3b3; }
.workload-meter, .progress { background:#2a2a2a; }
.workload-meter-fill, .progress i { background:var(--gold); }

/* Interactive surfaces: charcoal secondary, gold primary */
.button, .button.clear, .mini, .item button, .workload-actions button,
.ava-insight-actions button, .sidebar-mobile-close {
  background:#282828;
  border:1px solid #353535;
  color:#ffffff;
  box-shadow:none;
  border-radius:10px;
}
.button:hover:not(:disabled), .button.clear:hover:not(:disabled),
.mini:hover:not(:disabled), .item button:hover:not(:disabled),
.workload-actions button:hover:not(:disabled),
.ava-insight-actions button:hover:not(:disabled) {
  background:#333333;
  border-color:#4d4d4d;
  color:#ffffff;
  filter:none;
}
.button.primary, .button-quick, .axle-dialog-primary {
  background:var(--gold);
  border-color:var(--gold);
  color:#000000;
  font-weight:800;
}
.button.primary:hover:not(:disabled), .button-quick:hover:not(:disabled),
.axle-dialog-primary:hover:not(:disabled) {
  background:#f2c34a;
  border-color:#f2c34a;
  color:#000000;
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea,
.field, .form-stack input, .form-stack textarea, .form-stack select,
.actions select, .list-filter select, .list-filter input {
  background:var(--axle-input)!important;
  border-color:#3e3e3e!important;
  color:#ffffff!important;
  box-shadow:none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
.field:focus { border-color:var(--gold)!important; }
.form-stack input::placeholder, .form-stack textarea::placeholder { color:var(--axle-subtle); }
input[type="checkbox"], input[type="radio"], .check { accent-color:var(--gold); }

/* Date pickers, menus and confirmation dialogs are portal-based. */
.axle-select-trigger, .axle-date-input, .axle-calendar-trigger, .axle-dialog-input {
  background:#282828;
  border-color:#3e3e3e;
  color:#ffffff;
}
.axle-select-trigger:hover, .axle-date-input:hover,
.axle-calendar-trigger:hover { background:#282828; border-color:#4d4d4d; }
.axle-select-trigger[aria-expanded="true"] { background:#282828; border-color:var(--gold); }
.axle-popover, .axle-dialog {
  background:#181818;
  border-color:#3e3e3e;
  color:#ffffff;
  box-shadow:0 18px 55px #0007;
}
.axle-option { color:#ffffff; }
.axle-option.selected, .axle-option:hover, .axle-option:focus-visible {
  background:#2a2a2a;
  color:#ffffff;
}
/* All selected and hovered dropdown options use a flat neutral highlight, never a gold left stripe. */
.axle-option.selected, .axle-option:hover, .axle-option:focus-visible { box-shadow:none; }
.axle-calendar-nav, .axle-calendar-today, .axle-dialog-secondary {
  background:#282828; border-color:#3e3e3e; color:#ffffff;
}
.axle-calendar-day:hover { background:#2a2a2a; border-color:#4d4d4d; }
.axle-calendar-day.selected { background:var(--gold); color:#000000; }
.axle-dialog-message { color:#b3b3b3; }
.axle-dialog::backdrop { background:#000b; }

/* Informational panels: preserve severity colours; remove decorative gold gradients. */
.ava-intro, .ava-insight, .ava-proposal, .ava-capacity,
.ava-empty, .quote-total, .estimate-context, .timer-running-box {
  background:#181818;
  background-image:none;
  border-color:#353535;
  color:#ffffff;
  box-shadow:none;
}
.ava-intro::after { display:none; }
.ava-intro h2, .ava-insight h3, .ava-proposal h3 { color:#ffffff; }
.ava-intro p.muted, .ava-insight p, .ava-proposal>p,
.ava-capacity, .ava-notice, .ava-sources, .ava-source {
  color:#b3b3b3;
}
.ava-mode, .ava-severity, .pill, .tag.gold {
  background:#282828;
  border-color:#404040;
  color:#e7c56a;
}
.ava-insight-actions button:first-child { background:#282828; color:#efcd76; border-color:#66604c; }
.ava-capacity strong, .quote-total strong,
.timer-running-box strong, .workload-member .workload-number { color:#ffffff; }
.ava-divider, .ava-sources { border-color:#2a2a2a; background-color:transparent; }
#status:not(:empty) { background:#282828; border-color:#404040; color:#ffffff; }
#status.error { background:#392b2b; border-color:#8e4637; color:#ffb7ae; }

/* Prototype-only content and chats */
.event, .dayentry, .bubble, .daybox, .modal,
.mobile-more, .mobile-more button {
  background:#282828;
  border-color:#353535;
}
.event:hover { background:#333333; }
.bubble.user { background:#282828; }
.tag { background:#282828; color:#b3b3b3; }
.datepill { border-color:#3e3e3e; }
.notice { background:#282828; border-color:#404040; color:#b3b3b3; }
.modal-back { background:#000a; }
.chatbar .field { background:#282828; }

/* Keep mobile navigation discreet but still discoverable. */
@media(max-width:900px) {
  .bottom-nav {
    background:#000000f5;
    border-color:#2a2a2a;
    box-shadow:none;
  }
  .bottom-nav button { background:transparent; color:#b3b3b3; }
  .bottom-nav button.active, .bottom-nav button:hover,
  #mobile-menu-toggle[aria-expanded="true"] {
    background:#282828;
    color:var(--gold);
  }
  .sidebar-mobile-close { background:#282828; color:var(--gold); }
  .sidebar-scrim { background:#000b; }
}
@media(max-width:750px) {
  .bottom-nav { background:#000000f5; border-color:#2a2a2a; box-shadow:none; }
  .bottom-nav button.active { background:#282828; color:var(--gold); }
  .mobile-more { background:#121212; border-color:#2a2a2a; }
  .mobile-more button { background:#282828; border-color:#353535; }
}

/* Standalone QuickBooks information screens: presentation only, no OAuth changes. */
body.axle-integration-page {
  background:var(--bg); color:var(--text);
  font:500 15px/1.7 Manrope,Arial,sans-serif;
}
.axle-integration-page header, .axle-integration-page footer { border-color:#2a2a2a; }
.axle-integration-page .sub, .axle-integration-page footer { color:#a7a7a7; }
.axle-integration-page h1, .axle-integration-page h2 { color:#ffffff; }
.axle-integration-page p, .axle-integration-page ol { color:#b3b3b3; }
.axle-integration-page a:not(.button) { color:#eac25a; }
.axle-integration-page .logo { border-color:#6b5936; color:var(--gold); }
.axle-integration-page .button {
  background:var(--gold); color:#000000; border-color:var(--gold);
}
.axle-integration-page .button:hover { background:#f2c34a; color:#000000; }
.axle-integration-page .note {
  background:#181818; border-color:var(--gold); color:#b3b3b3;
}
@media(prefers-reduced-motion:reduce) {
  .button, #nav button, .nav button { transition:none!important; }
}

/* Login uses AXLE's Spotify dark palette, including browser autofill. */
.auth-panel { background:#181818; border-color:#2a2a2a; }
.auth-panel h2 { color:#ffffff; }
.auth-panel .form-stack input:not([type="checkbox"]) {
 background:#282828!important; color:#ffffff!important; border-color:#3e3e3e!important;
}
.auth-panel input:-webkit-autofill,
.auth-panel input:-webkit-autofill:hover,
.auth-panel input:-webkit-autofill:focus {
 -webkit-text-fill-color:#ffffff!important;
 -webkit-box-shadow:0 0 0 1000px #282828 inset!important;
 box-shadow:0 0 0 1000px #282828 inset!important;
 caret-color:#ffffff;
 transition:background-color 9999s ease-out 0s;
}
.auth-remember {
 display:flex!important; flex-direction:row!important;
 align-items:center; gap:10px!important; cursor:pointer; width:fit-content;
 color:#b3b3b3!important; font-size:12px!important;
}
.auth-remember input[type="checkbox"] {
 width:16px; height:16px; margin:0; flex:none; accent-color:var(--gold);
}

/* Global interaction parity audit.
 * Standalone search/number/time fields (not only .form-stack), native select
 * fallbacks, dynamic form controls and browser autofill use the same tokens.
 * No geometry, data behaviour or semantic status colours are changed. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]),textarea,select) {
  box-sizing:border-box;
  border:1px solid var(--axle-control-border)!important;
  border-radius:9px;
  background:var(--axle-input)!important;
  color:var(--text)!important;
  box-shadow:none;
  color-scheme:dark;
  font-family:Manrope,Arial,sans-serif;
}
input[type="search"] {
  -webkit-appearance:none;
  appearance:none;
  background:var(--axle-input)!important;
  border:1px solid var(--axle-control-border)!important;
  border-radius:9px;
  color:var(--text)!important;
  box-shadow:none!important;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]),textarea,select):hover:not(:disabled) {
  border-color:var(--axle-control-hover)!important;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]),textarea,select):focus {
  border-color:var(--axle-focus)!important;
  box-shadow:none!important;
}
:where(input,textarea,select):focus-visible {
  outline:2px solid var(--axle-focus);
  outline-offset:2px;
}
:where(input:not([type="checkbox"]):not([type="radio"]),textarea)::placeholder,
.axle-date-input::placeholder {
  color:var(--axle-subtle)!important;
  opacity:1;
}
:where(input:not([type="checkbox"]):not([type="radio"]),textarea,select):disabled {
  color:var(--axle-subtle)!important;
  background:#242424!important;
  cursor:not-allowed;
}
option,optgroup { background:var(--panel);color:var(--text); }

/* Native search fields must not inherit the browser's raised/inset border.
 * Existing field widths and mobile layouts remain controlled by page CSS. */
#communication-search,
.list-filter input[type="search"] {
  background:var(--axle-input)!important;
  border:1px solid var(--axle-control-border)!important;
  border-radius:9px;
  box-shadow:none!important;
  color:var(--text)!important;
}
#communication-search:focus,
.list-filter input[type="search"]:focus {
  border-color:var(--axle-focus)!important;
  box-shadow:none!important;
}
#communication-search:focus-visible,
.list-filter input[type="search"]:focus-visible {
  outline:2px solid var(--axle-focus);
  outline-offset:2px;
}

/* Chromium's saved-form styling must also use the same surface outside login. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--text)!important;
  -webkit-box-shadow:0 0 0 1000px var(--axle-input) inset!important;
  caret-color:var(--text);
}
/* Decorative dividers and button-like choices stay neutral; gold is reserved
 * for brand actions, selected calendar dates and accessible focus. */
.ava-divider { background:var(--edge); }
.axle-option:hover,.axle-option.selected,.axle-option:focus-visible {
  background:var(--edge);
  color:var(--text);
  box-shadow:none;
}

/* AXLE invisible scrollbar contract.
 * Content remains fully scrollable by wheel, trackpad, touch, keyboard and
 * script. Make all viewport, list, modal, form and portal scrollbars invisible
 * across Firefox, Chromium, Safari and legacy Edge. !important prevents
 * component-specific scrollbar-width:thin rules from re-enabling them. */
html,body,html *,body * {
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
html::-webkit-scrollbar,body::-webkit-scrollbar,
html *::-webkit-scrollbar,body *::-webkit-scrollbar {
  display:none!important;
  width:0!important;
  height:0!important;
  background:transparent!important;
}
/* Scroll behaviour and overflow-y:auto are intentionally left unchanged. */