/* ABJ Hub, 7 Nov 2026: "A touch of colour". Soft colour across the whole app, on top of the Showroom (light) and
   Evening (dark) looks. Everything here sits behind html.col9, which colour.js sets, so switching it off
   (Settings → New features → "A touch of colour") puts the plain look straight back. Text colours stay the same
   ink as before; only backgrounds, lines, dots and icons pick up colour, so nothing gets harder to read. */
html.col9{
  --c1:#3f7a55; --c2:#3c6ea8; --c3:#2f8585; --c4:#7a5aa0; --c5:#b07c28; --c6:#b05a3c;
  --tint:5%; --tint-line:22%;
}
html.col9[data-theme=dark]{
  --c1:#7cc49a; --c2:#8fb4e6; --c3:#6fc7c0; --c4:#b9a0e0; --c5:#e3b866; --c6:#e79478;
  --tint:9%; --tint-line:28%;
}

/* a warm wash behind every screen: faint green top-left, faint gold top-right */
html.col9 body{background:
  radial-gradient(900px 520px at 0% -8%,rgba(47,107,71,.075),transparent 70%),
  radial-gradient(800px 480px at 100% -10%,rgba(176,141,87,.09),transparent 70%),
  var(--bg);background-attachment:fixed}
html.col9[data-theme=dark] body{background:
  radial-gradient(900px 520px at 0% -8%,rgba(124,196,154,.06),transparent 70%),
  radial-gradient(800px 480px at 100% -10%,rgba(200,169,107,.08),transparent 70%),
  var(--bg);background-attachment:fixed}

/* top bar: a thin green-to-gold line along the bottom, and the open page in brand green */
html.col9 header#top{position:sticky;border-bottom-color:transparent}
html.col9 header#top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--teal) 0%,var(--c3) 38%,var(--gold) 72%,var(--c6) 100%);opacity:.75}
html.col9 #nav a:hover{background:var(--teal-soft);color:var(--teal-dark)}
html.col9 #nav a:hover .ico{opacity:1}
html.col9 #nav a.on{background:var(--teal-soft);color:var(--teal-dark);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 18%,transparent)}
html.col9 #nav a.on .ico{opacity:1}
/* top bar buttons: each page has its own soft colour (icon, faint wash and edge), so the bar is not grey */
html.col9 #nav a{--nc:var(--c3)}
html.col9 #nav a[href="#/sales"]{--nc:var(--c1)}
html.col9 #nav a[href="#/owner"],html.col9 #nav a[href="#/dashboard"]{--nc:var(--c5)}
html.col9 #nav a[href="#/live"]{--nc:var(--c2)}
html.col9 #nav a[href="#/board"]{--nc:var(--c4)}
html.col9 #nav a[href="#/station"],html.col9 #nav a[href="#/today"],html.col9 #nav a[href="#/me"]{--nc:var(--c3)}
html.col9 #nav a[href="#/fitplan"],html.col9 #nav a[href="#/fit"],html.col9 #nav a[href="#/calendar"]{--nc:var(--c6)}
html.col9 #nav a[href="#/nest"],html.col9 #nav a[href="#/offcuts"],html.col9 #nav a[href="#/stock"]{--nc:var(--c5)}
html.col9 #nav a:not(.chat39nav){color:var(--ink);background:color-mix(in srgb,var(--nc) 7%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nc) 16%,transparent)}
html.col9 #nav a:not(.chat39nav) .ico{color:var(--nc);opacity:1}
html.col9 #nav a:not(.chat39nav):hover{background:color-mix(in srgb,var(--nc) 15%,transparent);color:var(--ink);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nc) 32%,transparent)}
html.col9 #nav a.on:not(.chat39nav){background:color-mix(in srgb,var(--nc) 20%,var(--card));color:var(--ink);font-weight:700;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--nc) 55%,transparent)}
html.col9 #nav{gap:5px}
html.col9 .menu9 a:hover,html.col9 .bm-box a:hover,html.col9 #langmenu button:hover{background:var(--teal-soft)}

/* page headings: a short green-to-gold underline under the big title */
html.col9 main h1::after{content:"";display:block;width:44px;height:3px;border-radius:3px;margin-top:9px;
  background:linear-gradient(90deg,var(--teal),var(--gold))}
html.col9 .login h1::after,html.col9 .bootfail h1::after{display:none}
html.col9 .hello6{color:var(--gold)}

/* buttons, tabs and chips: brand green instead of plain black and grey */
/* hover only tints the edge, never the fill, so buttons with their own colour keep readable text */
html.col9 button:not(.primary):not(.danger):hover,html.col9 .btn:not(.primary):hover{border-color:color-mix(in srgb,var(--teal) 45%,transparent)}
html.col9 .stagechips button.on{background:var(--teal);border-color:var(--teal);color:var(--on-accent)}
html.col9 .stagechips button:not(.on):hover{background:var(--teal-soft)}
html.col9 .tabs a.on{color:var(--teal-dark)}
html.col9 .tabs a:not(.on):hover{color:var(--teal)}
html.col9 input:focus,html.col9 select:focus,html.col9 textarea:focus{border-color:var(--teal)}

/* the numbers strip on Sales & design: each figure gets its own colour dot and a faint wash */
html.col9 .kp6{--k:var(--c1);background:linear-gradient(180deg,color-mix(in srgb,var(--k) var(--tint),transparent),transparent 75%)}
html.col9 .kp6:nth-child(6n+2){--k:var(--c2)} html.col9 .kp6:nth-child(6n+3){--k:var(--c4)}
html.col9 .kp6:nth-child(6n+4){--k:var(--c5)} html.col9 .kp6:nth-child(6n+5){--k:var(--c6)} html.col9 .kp6:nth-child(6n+6){--k:var(--c3)}
html.col9 .kp6 span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--k);margin-right:7px;vertical-align:1px}
html.col9 .kp6:hover{background:color-mix(in srgb,var(--k) calc(var(--tint) + 3%),transparent)}
html.col9 .kpi{border-top:3px solid var(--c1)}
html.col9 .kpi:nth-child(6n+2){border-top-color:var(--c2)} html.col9 .kpi:nth-child(6n+3){border-top-color:var(--c4)}
html.col9 .kpi:nth-child(6n+4){border-top-color:var(--c5)} html.col9 .kpi:nth-child(6n+5){border-top-color:var(--c6)} html.col9 .kpi:nth-child(6n+6){border-top-color:var(--c3)}

/* boards: each column keeps a faint wash of its own colour (production stages and the sales columns) */
html.col9 .col{background:linear-gradient(180deg,hsla(var(--h),50%,45%,.11),hsla(var(--h),50%,45%,.035) 160px),var(--bg-2)}
html.col9 .scol{background:linear-gradient(180deg,hsla(var(--h),50%,45%,.11),hsla(var(--h),50%,45%,.035) 160px),var(--bg-2)!important}
html.col9[data-theme=dark] .col,html.col9[data-theme=dark] .scol{background:linear-gradient(180deg,hsla(var(--h),45%,60%,.10),hsla(var(--h),45%,60%,.03) 160px),var(--bg-2)!important}
html.col9 .col h3,html.col9 .scol h3{border-bottom:2px solid hsla(var(--h),45%,45%,.28);padding-bottom:7px}
html.col9 .addlead{background:color-mix(in srgb,var(--teal) 4%,var(--card));border-color:color-mix(in srgb,var(--teal) 35%,transparent)}
html.col9 .av6{background:var(--teal)!important;color:var(--on-accent)}

/* Me → Go to: each button gets a faint tint of its own, so the list is easier to scan */
html.col9 .grid.goto>.btn{--k:var(--c1);background:color-mix(in srgb,var(--k) var(--tint),var(--card));border-color:color-mix(in srgb,var(--k) var(--tint-line),transparent)}
html.col9 .grid.goto>.btn:nth-child(6n+2){--k:var(--c2)} html.col9 .grid.goto>.btn:nth-child(6n+3){--k:var(--c5)}
html.col9 .grid.goto>.btn:nth-child(6n+4){--k:var(--c4)} html.col9 .grid.goto>.btn:nth-child(6n+5){--k:var(--c3)} html.col9 .grid.goto>.btn:nth-child(6n+6){--k:var(--c6)}
html.col9 .grid.goto>.btn:hover{background:color-mix(in srgb,var(--k) calc(var(--tint) + 6%),var(--card));border-color:var(--k)}
html.col9 .grid.goto>.btn .ico{color:var(--k);opacity:1}

/* cards: a whisper of green on the edge of the "next step" boxes and the hints */
html.col9 .hint,html.col9 .stagewhy{background:color-mix(in srgb,var(--c2) 6%,var(--card));border-color:color-mix(in srgb,var(--c2) 20%,transparent)}
html.col9 .card>h2:first-child,html.col9 .card>h3:first-child{color:var(--ink)}

/* phones: the bottom bar shows the open page as a soft green pill */
@media (max-width:760px){
  html.col9 #bottomnav{background:color-mix(in srgb,var(--card) 92%,transparent)}
  html.col9 #bottomnav a.on{color:var(--teal-dark)}
  html.col9 #bottomnav a.on .ico{background:var(--teal-soft);border-radius:999px;padding:3px 14px;width:auto;box-sizing:content-box;color:var(--teal)}
  html.col9 main h1::after{width:36px;margin-top:7px}
}
@media print{html.col9 body{background:#fff}html.col9 header#top::after,html.col9 main h1::after{display:none}}