/* ====================================================================
   WHITEBOARD LOOK  (shared: this exact file is in BOTH boards.
   If you change it in one folder, copy it to the other.)
   ==================================================================== */

/* COLORS AND FONTS: all in one place. Change a line here to change the look.
   The theme is "M stripe, high contrast": near-black page, lighter grey
   tiles with a light edge so they stand out, light-blue accents, and the
   light blue / dark blue / red stripe across the top. */
:root {
  color-scheme: dark;
  --page:      #050608;   /* the background behind everything */
  --surface:   #121419;   /* columns and number boxes */
  --surface-2: #272a31;   /* car tiles and buttons */
  --tile-edge: #636874;   /* the light edge around each car tile */
  --ink:       #ffffff;   /* main text */
  --ink-2:     #c0c5cf;   /* second text */
  --muted:     #8d93a0;   /* small print */
  --grid:      #41454f;   /* empty part of progress bars, divider lines */
  --border:    rgba(255,255,255,0.14);
  --accent:    #4fb3e8;   /* M light blue: buttons, bars, order numbers */
  --accent-2:  #7cc8f0;   /* lighter blue: the step name on each tile */
  --stripe-1:  #4fb3e8;   /* the stripe across the top, left to right */
  --stripe-2:  #1c3f94;
  --stripe-3:  #e2231a;
  /* FONTS: titles in Titillium (racing-team look), everything else in
     Barlow (clean, like German road signs). They load from Google Fonts
     (link in board.html); without internet, Windows' own font is used. */
  --font-title: "Titillium Web", "Segoe UI", sans-serif;
  --font-body:  "Barlow", "Segoe UI", sans-serif;
  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;
  --cyan:     #22d3ee;   /* job clock: a tech is clocked in */
  /* ALARM COLORS on car tiles (bright on purpose, so they jump out).
     Yellow = warning, red = over the limit. Each has the outline color,
     the glow around the tile, and a faint tint inside the tile. */
  --al-yellow: #ffd21a;  --al-yellow-glow: rgba(255, 210, 26, 0.55);  --al-yellow-tint: #36311a;
  --al-red:    #ff3030;  --al-red-glow:    rgba(255, 48, 48, 0.65);   --al-red-tint:    #3a2024;
  --al-green:  #2bd94a;  --al-green-glow:  rgba(43, 217, 74, 0.5);    --al-green-tint:  #1d3322;
  --al-blue:   #3d9bff;  --al-blue-glow:   rgba(61, 155, 255, 0.55);  --al-blue-tint:   #1c2a40;
  --al-cyan:   #22d3ee;  --al-cyan-glow:   rgba(34, 211, 238, 0.45);  --al-cyan-tint:   #1d3238;
  /* FLASH SPEED: one full on-and-off blink. Bigger = slower. */
  --blink-yellow: 2s;
  --blink-red:    1.2s;
  --radius: 10px;
  --base: 16px;           /* text size. "Big screen" makes it larger. */
  --col-width: 250px;     /* width of one whiteboard column */
}
body.big { --base: 21px; --col-width: 320px; }

/* ---------- TV MODE (online public views on the 42" shop TVs) ----------
   Bigger text, the board fills the screen, and nothing to click: no
   search, buttons, footer or Done buttons. Change --base to make
   everything bigger or smaller on the TV. */
body.tv { --base: 19px; --col-width: 300px; }
body.tv .wrap { padding: 0 14px 14px; }
body.tv header { padding: 8px 0; margin-bottom: 8px; }
body.tv header img { height: 34px; }
body.tv .controls, body.tv footer, body.tv #dataCheck, body.tv #arrangeBar,
body.tv .upd-btns, body.tv .note-row, body.tv .clock-btns, body.tv #openAllBtn { display: none !important; }
body.tv .section-title { margin: 12px 0 6px; }
body.tv .section-title > span, body.tv .section-title .link { display: none; }   /* the small explanations */
body.tv .board.buckets { overflow-x: hidden; }
body.tv .bucket { min-width: 0; }
body.tv .tv-cols { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* hidden always means hidden */
body { margin: 0; background: var(--page); color: var(--ink);
       font: var(--base)/1.45 var(--font-body); }
/* The three-color M stripe across the very top, angled like the M
   badge: slanted cuts with a thin dark gap between the colors. */
:root { --m-stripe: linear-gradient(120deg, var(--stripe-1) 0 33%, var(--page) 33% 33.6%, var(--stripe-2) 33.6% 66.4%, var(--page) 66.4% 67%, var(--stripe-3) 67%); }
body::before { content: ""; display: block; height: 7px; background: var(--m-stripe); }
.wrap { padding: 0 16px 40px; }
/* Every title uses the title font */
h1, h3, .section-title, .col-head, .tracker h3, .tv-col h3, .lane-row h3 { font-family: var(--font-title); }

/* ---------- Header ---------- */
header { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
         padding: 14px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
header img { height: 36px; width: auto; }
.titles h1 { font-size: 1.45em; margin: 0; font-weight: 600; font-style: italic; text-transform: uppercase; letter-spacing: 1px; line-height: 1.1; }
.titles .clock { color: var(--ink-2); font-size: .85em; }
header .spacer { flex: 1; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

button, select, input[type=search], input[type=number] {
  font: inherit; font-size: .9em; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--tile-edge); border-radius: 6px; padding: 7px 12px; }
button { cursor: pointer; }
button:hover, select:hover { border-color: var(--accent); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #04121c; }
input[type=number] { width: 90px; }

/* Role / tech tabs */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { border-radius: 999px; padding: 6px 14px; }
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #04121c; }

#status { color: var(--ink-2); font-size: .85em; margin: 0 0 12px; }
#status.error { color: var(--serious); }
#status code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; color: var(--ink); }
.warn { color: var(--warning); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); vertical-align: middle; }

.section-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
                 font-size: .85em; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-2); margin: 20px 0 10px; }
.section-title span { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 400; color: var(--muted); }
.why { color: var(--ink-2); font-size: .9em; margin: 0 0 12px; }

/* ---------- Number tiles ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
button.stat:hover { border-color: var(--accent); }
.stat.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.stat .v { font-size: 1.8em; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat .v small { font-size: .5em; color: var(--muted); font-weight: 500; }
.stat .l { font-size: .85em; color: var(--ink-2); }
.stat .h { font-size: .78em; color: var(--muted); margin-top: 2px; }
.stat.bad .v { color: var(--serious); }
.progress { height: 6px; background: var(--grid); border-radius: 3px; margin: 6px 0 2px; overflow: hidden; }
.progress div { height: 100%; background: var(--accent); }
.progress.met div { background: var(--good); }    /* goal reached: bar turns green */

/* ---------- Arrange order (front counter sets the order cars are done) ---------- */
.slot { position: relative; }
.order-n { position: absolute; top: -7px; left: -7px; z-index: 3; min-width: 22px; height: 22px; padding: 0 4px;
           display: grid; place-items: center; border-radius: 11px; background: var(--accent); color: #04121c;
           font-weight: 700; font-size: .8em; box-shadow: 0 0 0 2px var(--page); }
#arrangeBar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px;
              border: 1px dashed var(--accent); border-radius: var(--radius); color: var(--ink-2); font-size: .9em; }
#arrangeBar[hidden] { display: none; }
#sharedNote { margin: 0 0 12px; font-size: .9em; }   /* "can't reach the shared store" */
.arranging .slot { cursor: grab; }
.arranging .car-link, .arranging .clock-btns { pointer-events: none; }   /* drag, don't open the RO */
.arranging .cards { outline: 1px dashed var(--border); outline-offset: 4px; border-radius: 6px; min-height: 20px; }
.slot.dragging { opacity: .35; }

/* ---------- Weekly trackers (Tech Board, top of the page) ---------- */
.trackers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; padding: 4px; }   /* room for the glows */
.tracker { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.tracker h3 { margin: 0 0 6px; font-size: 1.1em; }
.tracker .big { font-size: 1.8em; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tracker .big small { font-size: .5em; color: var(--muted); font-weight: 500; }
.tracker .h { font-size: .78em; color: var(--muted); margin: 2px 0 6px; }
.tracker .row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--grid); color: var(--ink-2); }
.tracker .row b { color: var(--ink); font-size: 1.2em; font-variant-numeric: tabular-nums; }
.tracker .days { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .8em; color: var(--ink-2); padding-bottom: 6px; }
.tracker .days span { color: var(--muted); }

/* ---------- Awards, goals and wins on the weekly boxes ----------
   Glows are layered, so a box can be the Labor Leader AND hit its goal.
   --gk goes from 0 (80% of the goal) to 1 (100%), set in tech.js. */
:root { --win: #2bd94a; --leader: #22d3ee; }
.tracker { position: relative; transition: box-shadow .4s;
           --ring: 0 0 0 0 transparent; --goal-shadow: 0 0 0 0 transparent; --lead-shadow: 0 0 0 0 transparent;
           box-shadow: var(--ring), var(--goal-shadow), var(--lead-shadow); }
.tracker.goal-glow { --goal-shadow: 0 0 calc(14px + 26px * var(--gk)) calc(3px + 9px * var(--gk)) rgb(43 217 74 / calc(0.45 + 0.4 * var(--gk))); }
.tracker.goal-met { --ring: 0 0 0 2px var(--win); border-color: var(--win); }       /* the solid outline: 100% or more only */
.tracker.leader { --lead-shadow: 0 0 22px 4px rgb(34 211 238 / 0.45); }
.tracker.leader.goal-glow { --goal-shadow: 0 0 0 0 transparent; }                    /* the leader keeps the cyan glow */
.tracker.goal-met .progress div, .shop-goal.goal-met .progress div { background: var(--win); }
.goal-hit { color: var(--win) !important; font-weight: 600; }
.tracker.leader .progress div { background: var(--leader); }
.tracker.leader.goal-met .progress div { background: var(--win); }
.leader-chip { font: 600 .68em var(--font-title); letter-spacing: 1.2px; text-transform: uppercase; color: #7cfcff; }
.tracker h3 { display: flex; align-items: center; gap: 7px; }
.trophy { font-size: .95em; }
.m-mini { display: inline-block; width: 28px; height: 11px;   /* small angled M stripe next to the leader's name */
          background: linear-gradient(110deg, var(--stripe-1) 0 31%, transparent 31% 36%, var(--stripe-2) 36% 64%, transparent 64% 69%, var(--stripe-3) 69%); }
.rank { margin-left: auto; font: 400 .75em var(--font-body); color: var(--muted); }
.level { font-size: .75em; color: var(--muted); margin: -4px 0 6px; }
.level b { color: var(--accent-2); font-weight: 600; }
.badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.badge { font-size: .78em; padding: 2px 9px; border-radius: 999px; background: #3a3e47; border: 1px solid #9aa1ad; color: #fff; white-space: nowrap; cursor: default; }
.miles { margin-top: 6px; font-size: .75em; color: var(--muted); }
.miles span { color: var(--ink-2); }

/* Shop goal bar, above the boxes */
.shop-goal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; transition: box-shadow .4s; }
.shop-goal.goal-met { border-color: var(--win); box-shadow: 0 0 0 2px var(--win), 0 0 34px 10px rgb(43 217 74 / 0.7); }
.shop-goal .sg-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.shop-goal .sg-title { font: 600 .85em var(--font-title); text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-2); }
.shop-goal .big { font-size: 1.5em; font-weight: 650; font-variant-numeric: tabular-nums; }
.shop-goal .big small { font-size: .5em; color: var(--muted); font-weight: 500; }
.shop-goal .h { font-size: .8em; color: var(--muted); }

/* Wins today, one line */
#winsLine { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: baseline; margin-bottom: 10px; padding: 7px 12px;
            border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: .85em; color: var(--ink);
            box-shadow: 0 0 16px 2px rgb(43 217 74 / 0.3); }
#winsLine .wins-title { font: 600 .85em var(--font-title); text-transform: uppercase; letter-spacing: 1.5px; color: var(--win); }
#winsLine i { color: var(--muted); font-style: normal; font-size: .9em; }

/* ---------- The whiteboard: columns of car cards ---------- */
.board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.col { flex: 0 0 var(--col-width); background: var(--surface); border: 1px solid var(--border);
       border-radius: var(--radius); padding: 10px; min-height: 120px; }
.col.dim { opacity: .45; }
.col.dim:hover { opacity: 1; }
.col.mine { border-color: var(--accent); }
.col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
            font-weight: 600; font-size: .9em; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.col-head .n { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.col-sub { font-size: .75em; color: var(--muted); margin-bottom: 8px; min-height: 1em; }
.col-sub.bad { color: var(--serious); }
.cards { display: grid; gap: 8px; }
.col .empty-col { color: var(--muted); font-size: .8em; text-align: center; padding: 14px 0; }

/* Front Counter BUCKETS: a few wide columns that spread out into one
   column per step when you click their title. They stretch to fill the
   screen, so there's less sideways scrolling. */
.board.buckets { align-items: stretch; gap: 8px; }
/* Each folded bucket gets an equal share of the screen width. Below
   170px they stop shrinking and the board scrolls sideways instead. */
.bucket { flex: 1 1 0; min-width: 170px; background: var(--surface); border: 1px solid var(--border);
          border-radius: var(--radius); padding: 8px; }
.bucket .car { padding: 8px 9px; }
.bucket .tag { white-space: normal; }   /* long tags wrap instead of poking out */
.bucket.open { flex: 0 0 auto; border-color: var(--tile-edge); }   /* as wide as its steps need */
.bucket.dim { opacity: .45; }
.bucket.dim:hover { opacity: 1; }
.bucket.mine { border-color: var(--accent); }
.bucket-head { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
               background: none; border: none; border-bottom: 2px solid var(--grid); border-radius: 0; padding: 2px 0 6px;
               font-family: var(--font-title); font-weight: 600; font-size: 1em; text-transform: uppercase; letter-spacing: 1px; text-align: left; }
.bucket-head:hover { color: var(--accent-2); border-color: var(--accent); }
.bucket-head .n { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bucket .col-sub { margin-top: 4px; }
.bucket-cols { display: flex; gap: 8px; margin-top: 8px; align-items: flex-start; }
.bucket-cols .col { background: var(--page); flex: 0 0 var(--col-width); min-height: 80px; }
/* The small step heading inside a folded-up bucket */
.step-head { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 6px;
             font-family: var(--font-title); font-weight: 600; font-size: .75em; text-transform: uppercase;
             letter-spacing: 1px; color: var(--muted); }
.step-group + .step-group { margin-top: 12px; }
/* In a column that's partly yours, the steps that aren't yours fade back */
.bucket.mine .step-group.dim { opacity: .45; }
.bucket.mine .step-group.dim:hover { opacity: 1; }

/* Swimlanes: one row per tech */
.lanes { display: grid; gap: 14px; }
.lane-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.lane-row h3 { margin: 0 0 8px; font-size: 1em; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.lane-row h3 span { font-weight: 400; font-size: .8em; color: var(--ink-2); }
.lane-row .board .col { background: var(--page); }

/* One car. A normal tile is plain grey; the thicker left edge only takes
   a color when the car has an alarm (yellow, red...), so those pop. */
.car { display: block; position: relative; isolation: isolate; text-decoration: none; color: var(--ink);
       background: var(--surface-2); border: 1px solid var(--tile-edge); border-left: 4px solid var(--tile-edge);
       border-radius: 6px; padding: 9px 11px; overflow-wrap: anywhere; min-width: 0; }
.car:has(.car-link:hover) { border-color: var(--accent); }
.car-link { display: block; color: inherit; text-decoration: none; }
.car .card-top { display: flex; justify-content: space-between; gap: 8px; font-size: .78em; color: var(--ink-2); }
.car .age { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.car .vehicle { font-weight: 650; font-size: 1em; line-height: 1.25; margin: 2px 0; }
.car .cust { font-size: .82em; color: var(--ink-2); }
/* The step name ("Repair in progress"): title font, light blue */
.car .label-name { font-family: var(--font-title); font-weight: 600; font-size: .78em; text-transform: uppercase;
                   letter-spacing: 1px; color: var(--accent-2); margin-top: 3px; }
.car .jobs { margin: 6px 0 0; padding-left: 18px; font-size: .82em; color: var(--ink-2); }
.car .jobs .more { list-style: none; margin-left: -18px; color: var(--muted); }
.car .amounts { font-size: .8em; color: var(--ink-2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.car .tags { margin-top: 4px; }
.car .reason { font-size: .78em; color: var(--ink-2); margin-top: 3px; }
.tag { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: .75em; padding: 1px 7px;
       border-radius: 999px; margin: 2px 4px 2px 0; background: var(--page); border: 1px solid var(--border); }
.tag i { font-style: normal; font-weight: 700; }
.tag.serious { color: var(--serious); border-color: rgba(236,131,90,.5); }
.tag.plain i { color: var(--accent-2); }
.tag.muted-tag { color: var(--muted); }

/* To-do list (one row per car that needs someone) */
.todo { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.empty { border: 1.5px dashed rgba(255,255,255,0.18); border-radius: 8px; padding: 18px 16px; text-align: center; color: var(--ink-2); grid-column: 1 / -1; }

/* ---------- ALARMS: OUTLINE GLOW ----------
   Ashley picked "outline glow" (option C): the tile's edge lights up in
   the alarm color, with a soft glow around it and a faint tint inside.
   The tile itself stays dark, so the words stay easy to read.
     border-*   outline and glow only
     tile-*     outline, glow and the faint tint
     flash-*    blinks on and off
   Which look applies when is set in LABEL_ALERTS, ALARM and JOB_CLOCK
   in shop-core.js. The colors are --al-* at the top of this file. */
.car.border-yellow, .car.tile-yellow, .car.flash-border, .car.flash-yellow { --al: var(--al-yellow); --al-glow: var(--al-yellow-glow); --al-tint: var(--al-yellow-tint); }
.car.border-red, .car.tile-red, .car.flash-red                             { --al: var(--al-red);    --al-glow: var(--al-red-glow);    --al-tint: var(--al-red-tint); }
.car.tile-green                                                            { --al: var(--al-green);  --al-glow: var(--al-green-glow);  --al-tint: var(--al-green-tint); }
.car.flash-blue                                                            { --al: var(--al-blue);   --al-glow: var(--al-blue-glow);   --al-tint: var(--al-blue-tint); }
.car.clock-on                                                              { --al: var(--al-cyan);   --al-glow: var(--al-cyan-glow);   --al-tint: var(--al-cyan-tint); }
/* Every alarm: colored edge (a thicker stripe on the left) plus the glow */
.car.border-yellow, .car.tile-yellow, .car.flash-border, .car.flash-yellow, .car.border-red, .car.tile-red,
.car.flash-red, .car.tile-green, .car.flash-blue, .car.clock-on {
  border-color: var(--al); box-shadow: inset 0 0 0 1px var(--al), 0 0 14px 3px var(--al-glow);
}
/* The "tile" looks add the faint tint inside */
.car.tile-yellow, .car.flash-yellow, .car.tile-red, .car.flash-red, .car.tile-green, .car.flash-blue, .car.clock-on { background: var(--al-tint); }
/* Blinking: back to a plain tile for half of each blink */
.car.flash-border, .car.flash-yellow, .car.flash-blue { animation: alarm-blink var(--blink-yellow) steps(1, end) infinite; animation-delay: var(--sync-yellow, 0ms); }
.car.flash-red { animation: alarm-blink var(--blink-red) steps(1, end) infinite; animation-delay: var(--sync-red, 0ms); }
@keyframes alarm-blink { 50% { border-color: var(--tile-edge); box-shadow: none; background: var(--surface-2); } }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .car.flash-border, .car.flash-yellow, .car.flash-blue, .car.flash-red { animation: none; }
}

/* ---------- Footer: data check ---------- */
footer { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: .8em; }
#dataCheck { margin-top: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; font-size: .85em; }
#dataCheck textarea { width: 100%; background: var(--page); color: var(--ink); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font: 12px/1.4 ui-monospace, Consolas, monospace; }
.link { background: none; border: none; color: var(--accent-2); padding: 0; font-size: .95em; text-decoration: underline; text-transform: none; letter-spacing: 0; }

/* Side-by-side TV view: one tall column per person */
.tv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.tv-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.tv-col h3 { margin: 0 0 8px; font-size: 1.1em; }
.tv-col h3 span { display: block; font-weight: 400; font-size: .75em; color: var(--ink-2); }
.tv-col.away { opacity: .55; }
.tv-sec { background: var(--page); border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-top: 8px; }
.tv-sec .cards { margin-top: 6px; }
.tv-sec.zero { opacity: .55; padding: 5px 8px; }

/* JOB CLOCK: the colors come from the alarm looks above
   (cyan clocked in, yellow at 75%, red at 100%, blinking red at 125%). */
:root { --orange: #ff8c1a; }
.clock-line { font-size: .85em; font-weight: 600; margin-top: 5px; font-variant-numeric: tabular-nums; }
.clock-line.over { color: var(--al-red); }
.clock-bar { margin: 4px 0 2px; }
.clock-bar div { background: var(--al, var(--cyan)); }   /* same color as the tile's outline */
.clock-bar.over div { background: var(--al-red); }
.clock-btns { margin-top: 8px; }
.clock-btn { width: 100%; font-weight: 650; padding: 9px 12px; }
.clock-btn.in  { background: #0e5f6b; border-color: var(--cyan); }
.clock-btn.out { background: var(--surface); border-color: var(--orange); }
.muted-note { font-size: .8em; color: var(--ink-2); }

/* ---------- Opening Procedures page (opening.html) ---------- */
.opening { max-width: 960px; margin: 0 auto; }
.opening .hello { font: italic 600 1.8em var(--font-title); text-transform: uppercase; letter-spacing: 1px; margin: 18px 0 4px; }
.open-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.open-tile { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
             padding: 14px 16px; color: var(--ink); text-decoration: none; }
.open-tile:hover { border-color: var(--accent); }
.open-tile b { display: block; font: 600 1.1em var(--font-title); text-transform: uppercase; letter-spacing: 1px; }
.open-tile span { font-size: .82em; color: var(--muted); }

/* ====================================================================
   SHOP TALK: messages, car notes, updates
   ==================================================================== */
/* Red number for unread messages (on the Messages button and in the list) */
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 4px;
         border-radius: 10px; background: var(--stripe-3); color: #fff; font-size: .8em; font-weight: 700; }
#talkBtn.has-new { border-color: var(--accent); }

/* The Messages panel, sliding in from the right */
.talk { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(620px, 100vw);
        display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--tile-edge);
        box-shadow: -10px 0 30px rgba(0,0,0,.6); }
.talk::before { content: ""; height: 7px; flex: none; background: var(--m-stripe); }
.talk-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.talk-head h2 { margin: 0; font: italic 600 1.15em var(--font-title); text-transform: uppercase; letter-spacing: 1px; }
.talk-head #talkWho { flex: 1; color: var(--ink-2); font-size: .85em; }
.talk-head select { padding: 3px 6px; }
.talk-body { flex: 1; min-height: 0; display: flex; }
#talkList { flex: 0 0 190px; overflow-y: auto; padding: 8px; border-right: 1px solid var(--border); }
#talkList h3 { margin: 10px 4px 4px; font-size: .72em; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; }
#talkList h3:first-child { margin-top: 2px; }
.chat { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 6px; text-align: left;
        background: none; border: 1px solid transparent; margin-bottom: 2px; padding: 6px 8px; font-size: .85em; }
.chat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat.on { background: var(--surface-2); border-color: var(--accent); }
.chat.new span { font-weight: 700; color: var(--ink); }
.talk-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#talkTitle { padding: 10px 14px 8px; border-bottom: 1px solid var(--border); }
#talkTitle span { display: block; font-size: .78em; color: var(--muted); }
#talkMsgs { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 85%; align-self: flex-start; background: var(--surface-2); border: 1px solid var(--tile-edge);
       border-left: 3px solid var(--accent); border-radius: 8px; padding: 6px 10px; }
.msg.mine { align-self: flex-end; border-left-color: var(--tile-edge); border-right: 3px solid var(--stripe-2); }
.msg-top { display: flex; gap: 10px; justify-content: space-between; font-size: .75em; color: var(--muted); }
.msg-top b { color: var(--accent-2); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
#talkForm { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
#talkText { flex: 1; resize: vertical; font: inherit; font-size: .9em; color: var(--ink); background: var(--page);
            border: 1px solid var(--tile-edge); border-radius: 6px; padding: 7px 10px; }
#talkForm button { align-self: flex-end; background: var(--accent); border-color: var(--accent); color: #04121c; font-weight: 700; }
@media (max-width: 560px) {   /* phone: chat list on top, messages below */
  .talk-body { flex-direction: column; }
  #talkList { flex: 0 0 auto; max-height: 34vh; border-right: none; border-bottom: 1px solid var(--border); }
}

/* Shop TV: one slim line with the latest team chat */
#talkStrip { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: baseline; cursor: pointer; margin: 0 0 12px;
             padding: 6px 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px;
             background: var(--surface); font-size: .85em; color: var(--ink-2); }
#talkStrip .strip-title { font: 600 .85em var(--font-title); text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-2); }
#talkStrip b { color: var(--ink); }
#talkStrip i { color: var(--muted); font-style: normal; font-size: .9em; }

/* GLOW: a tech with an unread private message or note on their car.
   A slow light-blue pulse around their column, so it's noticed on the TV
   without showing what the message says. */
.tv-col.glow, .lane-row.glow { border-color: var(--accent); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 1px var(--accent), 0 0 10px 1px rgba(79,179,232,.35); }
                  50%      { box-shadow: 0 0 0 2px var(--accent-2), 0 0 26px 6px rgba(79,179,232,.6); } }
@media (prefers-reduced-motion: reduce) { .tv-col.glow, .lane-row.glow { animation: none; box-shadow: 0 0 0 2px var(--accent), 0 0 18px 4px rgba(79,179,232,.5); } }
.new-msg { font-size: .9em; }

/* The 💬 notes button on a car (shows on hover when there are no notes yet) */
.note-row { display: flex; justify-content: flex-end; margin-top: 4px; }
.note-row.none { display: none; }
.car:hover .note-row.none, .car:focus-within .note-row.none { display: flex; }
.note-btn { font-size: .72em; padding: 2px 8px; border-radius: 999px; background: var(--page); color: var(--ink-2); }
.note-btn.unread { background: var(--accent); border-color: var(--accent); color: #04121c; font-weight: 700; }
.arranging .note-btn { pointer-events: none; }

/* Update flags on a car tile */
.tag.flag { color: var(--ink); border-color: var(--accent); background: rgba(79,179,232,.16); }
.tag.flag.approved, .tag.flag.partsIn { border-color: var(--good); background: rgba(12,163,12,.2); }
.tag.flag.declined { border-color: var(--critical); background: rgba(208,59,59,.22); }

/* The Updates list */
.upds { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.upd { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 10px 12px; }
.upd.approved, .upd.partsIn { border-left-color: var(--good); }
.upd.declined { border-left-color: var(--critical); }
.upd-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.upd-top b { font-family: var(--font-title); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: .9em; }
.upd-top i { font-style: normal; }
.upd-top span { font-size: .75em; color: var(--muted); white-space: nowrap; }
.upd-car { font-weight: 650; margin-top: 2px; }
.upd-todo { font-size: .82em; font-weight: 600; margin-top: 3px; }

/* PULSING UPDATES: they need someone to act.
   Hot pink = customer approved: add and order the parts.
   Cyan     = inspection done: write up the inspection.
   They pulse on the Updates list and on the car's tile until handled. */
:root { --hot-pink: #ff2d95; }
/* A thin, light outline in the color, plus a glow around the outside
   that slowly breathes brighter and dimmer. Softer than the alarms. */
.upd.pulse-pink, .tag.flag.pulse-pink { --pulse: var(--hot-pink); --pulse-line: rgb(255 45 149 / 0.6); --pulse-soft: rgb(255 45 149 / 0.3);  --pulse-glow: rgb(255 45 149 / 0.6); }
.upd.pulse-cyan, .tag.flag.pulse-cyan { --pulse: var(--cyan);     --pulse-line: rgb(34 211 238 / 0.6);  --pulse-soft: rgb(34 211 238 / 0.28); --pulse-glow: rgb(34 211 238 / 0.58); }
.upd.pulse-pink, .upd.pulse-cyan { border-color: var(--pulse-line); border-left-color: var(--pulse); animation: update-pulse 3s ease-in-out infinite; }
.upd.pulse-pink .upd-todo, .upd.pulse-cyan .upd-todo { color: var(--pulse); }
.tag.flag.pulse-pink, .tag.flag.pulse-cyan { border-color: var(--pulse-line); background: var(--page); animation: update-pulse-small 3s ease-in-out infinite; }
@keyframes update-pulse       { 0%, 100% { box-shadow: 0 0 14px 2px var(--pulse-soft); } 50% { box-shadow: 0 0 28px 7px var(--pulse-glow); } }
@keyframes update-pulse-small { 0%, 100% { box-shadow: 0 0 5px 1px var(--pulse-soft); }  50% { box-shadow: 0 0 12px 3px var(--pulse-glow); } }
/* FOLLOW-UP (estimate sent): counting down = normal. At 10 minutes the
   box turns LAVENDER ("time to follow up"); at 15 it also gets the thin
   outline and breathing glow, like the pink and cyan ones. */
:root { --lavender: #b794f6; --lavender-tint: #272033; }
.upd.follow-due, .upd.follow-late, .tag.flag.follow-due, .tag.flag.follow-late {
  --pulse: var(--lavender); --pulse-line: rgb(183 148 246 / 0.6); --pulse-soft: rgb(183 148 246 / 0.3); --pulse-glow: rgb(183 148 246 / 0.6); }
.upd.follow-due, .upd.follow-late { background: var(--lavender-tint); border-left-color: var(--lavender); }
.upd.follow-due .follow-line, .upd.follow-late .follow-line { color: var(--lavender); }
.upd.follow-late { border-color: var(--pulse-line); border-left-color: var(--lavender); animation: update-pulse 3s ease-in-out infinite; }
.tag.flag.follow-due, .tag.flag.follow-late { border-color: var(--pulse-line); background: var(--lavender-tint); }
.tag.flag.follow-late { animation: update-pulse-small 3s ease-in-out infinite; }
.follow-line { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .upd.follow-late, .tag.flag.follow-late { animation: none; box-shadow: 0 0 16px 2px var(--pulse-glow); } }
@media (prefers-reduced-motion: reduce) { .upd.pulse-pink, .upd.pulse-cyan, .tag.flag.pulse-pink, .tag.flag.pulse-cyan { animation: none; box-shadow: 0 0 16px 2px var(--pulse-glow); } }
.upd-detail { font-size: .82em; color: var(--ink-2); }
.upd-btns { display: flex; gap: 8px; margin-top: 8px; }
.upd-btns button, .upd-btns .btn { padding: 4px 12px; font-size: .82em; }
a.btn { display: inline-block; color: var(--ink); text-decoration: none; background: var(--surface-2);
        border: 1px solid var(--tile-edge); border-radius: 6px; }
a.btn:hover { border-color: var(--accent); }
.section-title .tabs { text-transform: none; letter-spacing: 0; }
.section-title .tab { font-size: .9em; padding: 3px 12px; }