/* ---------- TOKENS ---------- */
  /* ============ THEME-AGNOSTIC TOKENS ============ */
:root{
    /* Layout / shape — same in both themes */
    --radius-s: 10px;
    --radius:   18px;
    --radius-l: 28px;

    --max: 1320px;
    --pad: clamp(20px, 4vw, 56px);

    --font-display: "Bricolage Grotesque", ui-serif, Georgia, serif;
    --font-body:    "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --ease: cubic-bezier(.2,.7,.2,1);
    --ease-out: cubic-bezier(.16,1,.3,1);

    /* The amber accent works on both themes */
    --amber:     #f5a623;
    --amber-hot: #ffb84d;
    --amber-deep:#db8c0a;
    --amber-glow: 245, 166, 35;
}

/* ============ DARK THEME (default) ============ */
:root[data-theme="dark"], :root:not([data-theme]) {
    --bg:        #0a0908;
    --bg-soft:   #100e0b;
    --bg-card:   #14110d;
    --bg-elev:   #1a1611;
    --line:      #28231d;
    --line-soft: #1d1915;
    --ink:       #faf7f0;
    --ink-mute:  #b8b0a3;
    --ink-low:   #6e675c;

    /* Translucent surface tokens — used for hover, dim overlays, etc. */
    --hover-bg:        var(--hover-bg);
    --subtle-bg:       var(--subtle-bg);
    --subtle-bg-2:     var(--subtle-bg-2);
    --modal-backdrop:  var(--modal-backdrop);
    --shadow-deep:     var(--shadow-deep);
    --shadow-card:     0 8px 24px -8px rgba(0,0,0,.4);
    --grain-opacity:   .06;

    /* Cell colors */
    --cell-shift-bg:    var(--cell-shift-bg);
    --cell-shift-border:var(--cell-shift-border);
    --cell-off-bg:      var(--cell-off-bg);
    --cell-off-color:   #6fb3d1;
    --cell-off-border:  var(--cell-off-border);
    --cell-empty-bg:    var(--cell-empty-bg);
}

/* ============ LIGHT THEME ============ */
:root[data-theme="light"] {
    /* Warm creams, never pure white — keeps the editorial feel */
    --bg:        #f7f3ea;
    --bg-soft:   #ede8db;
    --bg-card:   #ffffff;
    --bg-elev:   #fafaf3;
    --line:      #d6cfbf;
    --line-soft: #e6dfd0;
    --ink:       #1a1611;
    --ink-mute:  #5b5346;
    --ink-low:   #918872;

    --hover-bg:        rgba(0,0,0,.04);
    --subtle-bg:       rgba(0,0,0,.02);
    --subtle-bg-2:     rgba(0,0,0,.03);
    --modal-backdrop:  rgba(247, 243, 234, .82);
    --shadow-deep:     0 30px 80px -20px rgba(40,30,15,.18);
    --shadow-card:     0 6px 16px -6px rgba(40,30,15,.12);
    --grain-opacity:   .015;

    /* Cell colors — more saturated for light bg */
    --cell-shift-bg:    var(--cell-shift-border);
    --cell-shift-border:rgba(245, 166, 35, .35);
    --cell-off-bg:      rgba(50, 120, 180, .12);
    --cell-off-color:   #2871b0;
    --cell-off-border:  rgba(50, 120, 180, .30);
    --cell-empty-bg:    rgba(0,0,0,.02);
}

  /* ---------- RESET ---------- */
  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  body{
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  a{color:inherit; text-decoration:none}
  button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
  img,svg{display:block; max-width:100%}
  ::selection{background: var(--amber); color: var(--bg)}

  /* ---------- AMBIENT (grain + spotlight) ---------- */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:1;
    opacity:.06; mix-blend-mode:overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  .spotlight{
    position:fixed; pointer-events:none; z-index:2;
    width: 520px; height:520px; border-radius:50%;
    background: radial-gradient(closest-side, rgba(var(--amber-glow),.18), rgba(var(--amber-glow),.06) 40%, transparent 70%);
    filter: blur(16px);
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: opacity .6s var(--ease);
    will-change: transform, opacity;
  }
  body.has-cursor .spotlight{opacity:1}

  .progress{
    position: fixed; top:0; left:0; height:2px;
    width: var(--p, 0%);
    background: linear-gradient(90deg, var(--amber-deep), var(--amber-hot));
    z-index: 100;
    transition: width .12s linear;
    box-shadow: 0 0 18px rgba(var(--amber-glow),.55);
  }

  /* ---------- HEADER ---------- */
  .header{
    position: sticky; top:0; z-index: 50;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    background: linear-gradient(to bottom, rgba(10,9,8,.85), rgba(10,9,8,.55));
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease), background .3s var(--ease);
  }
  .header.is-scrolled{ border-bottom-color: var(--line-soft); background: rgba(10,9,8,.92) }
  .header-inner{
    max-width: var(--max); margin: 0 auto;
    padding: 14px var(--pad);
    display: flex; align-items: center; gap: 32px;
  }
  .brand{
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-display);
    font-weight: 700; font-size: 19px; letter-spacing: -.01em;
  }
  .brand-mark{
    width: 32px; height: 32px; border-radius: 9px;
    background:
      radial-gradient(120% 120% at 0% 0%, var(--amber-hot), var(--amber-deep) 60%, #6b3f02 100%);
    position: relative; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 20px -6px rgba(var(--amber-glow),.6);
  }
  .brand-mark::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
    transform: translateX(-100%);
    animation: shine 5s var(--ease) infinite;
  }
  @keyframes shine{ 0%,60%{transform:translateX(-100%)} 90%,100%{transform:translateX(120%)} }
  .brand-mark::after{
    content:"A"; position:absolute; inset:0;
    display:grid; place-items:center;
    color: #1c1206; font-family: var(--font-display); font-weight: 800; font-size: 18px;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
  }
  .brand small{
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
    color: var(--ink-mute); text-transform: uppercase; font-weight: 500;
    display: block; line-height: 1; margin-top: 2px;
  }
  .brand-text{display:flex; flex-direction:column}

  .nav{display:flex; gap: 4px; margin-left: auto; align-items: center}
  .nav a{
    position: relative;
    padding: 8px 14px; border-radius: 8px;
    font-size: 14px; font-weight: 500; color: var(--ink-mute);
    transition: color .2s var(--ease), background .2s var(--ease);
  }
  .nav a:hover{ color: var(--ink); background: var(--hover-bg) }
  .nav a.is-active{ color: var(--ink) }
  .nav a.is-active::after{
    content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
    background: var(--amber); border-radius: 2px;
  }

  .status{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
    color: var(--ink-mute); text-transform: uppercase;
  }
  .status .dot{
    width:7px; height:7px; border-radius:50%;
    background: #62d36f;
    box-shadow: 0 0 0 0 rgba(98,211,111,.7);
    animation: pulse 2.2s var(--ease) infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(98,211,111,.7)}
    70%{box-shadow:0 0 0 9px rgba(98,211,111,0)}
    100%{box-shadow:0 0 0 0 rgba(98,211,111,0)}
  }

  .menu-btn{
    display:none;
    width:42px; height:42px; border-radius:10px;
    border:1px solid var(--line);
  }

  /* ---------- HERO ---------- */
  .hero{
    position: relative;
    padding: clamp(20px, 3vw, 40px) var(--pad) clamp(24px, 3vw, 48px);
    max-width: var(--max); margin: 0 auto;
    overflow: hidden;
  }
  .hero-tag{
    display:inline-flex; align-items:center; gap:10px;
    padding: 8px 14px; border:1px solid var(--line);
    border-radius:999px; font-family:var(--font-mono);
    font-size: 11px; letter-spacing:.16em; text-transform:uppercase;
    color: var(--ink-mute);
    background: linear-gradient(180deg, var(--subtle-bg-2), transparent);
  }
  .hero-tag b{ color: var(--amber); font-weight: 600; letter-spacing:.16em }

  .hero h1{
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(34px, 5.5vw, 80px);
    line-height: .92;
    letter-spacing: -.035em;
    margin: 22px 0 0;
    font-variation-settings: "wdth" 95;
    color: var(--ink);
  }
  .hero h1 .accent{
    color: var(--amber);
    font-style: italic;
    font-variation-settings: "wdth" 75;
    font-weight: 400;
  }
  .hero h1 .stroke{
    -webkit-text-stroke: 1.5px var(--ink);
    color: transparent;
  }
  .hero h1 .word{
    display:inline-block;
    transform: translateY(110%);
    opacity: 0;
    animation: rise .9s var(--ease-out) forwards;
  }
  .hero h1 .word:nth-child(1){ animation-delay: .05s }
  .hero h1 .word:nth-child(2){ animation-delay: .15s }
  .hero h1 .word:nth-child(3){ animation-delay: .25s }
  .hero h1 .word:nth-child(4){ animation-delay: .35s }
  @keyframes rise{ to{ transform: translateY(0); opacity: 1 } }

  .hero-grid{
    display:grid; grid-template-columns: 1.4fr 1fr;
    gap: clamp(24px, 5vw, 80px);
    margin-top: clamp(16px, 2vw, 28px);
    align-items: end;
  }
  .hero-lede{
    font-size: clamp(17px, 1.5vw, 21px);
    color: var(--ink-mute);
    max-width: 56ch;
    line-height: 1.55;
    opacity: 0; transform: translateY(20px);
    animation: rise .9s var(--ease-out) forwards .55s;
  }
  .hero-lede strong{ color: var(--ink); font-weight: 500 }

  .hero-cta{
    display:flex; gap: 12px; flex-wrap:wrap;
    margin-top: 28px;
    opacity: 0; transform: translateY(20px);
    animation: rise .9s var(--ease-out) forwards .7s;
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding: 14px 22px; border-radius: 999px;
    font-weight: 500; font-size: 14.5px;
    border: 1px solid transparent;
    transition: all .3s var(--ease);
    position: relative;
  }
  .btn-primary{
    background: var(--amber); color: #1a1206;
    box-shadow: 0 8px 28px -8px rgba(var(--amber-glow),.6);
  }
  .btn-primary:hover{
    background: var(--amber-hot);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -10px rgba(var(--amber-glow),.7);
  }
  .btn-ghost{
    border-color: var(--line); color: var(--ink);
    background: var(--subtle-bg-2);
  }
  .btn-ghost:hover{ border-color: var(--ink-mute); background: var(--hover-bg) }
  .btn .arrow{
    width: 16px; height: 16px;
    transition: transform .3s var(--ease);
  }
  .btn:hover .arrow{ transform: translate(3px, -3px) }

  .hero-stats{
    display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 14px;
    opacity: 0; transform: translateY(20px);
    animation: rise .9s var(--ease-out) forwards .85s;
  }
  .stat{
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 18px 16px;
    background: linear-gradient(180deg, var(--subtle-bg-2), transparent);
    position: relative;
    overflow: hidden;
    transition: border-color .3s var(--ease), transform .3s var(--ease);
  }
  .stat:hover{ border-color: rgba(var(--amber-glow), .35); transform: translateY(-2px) }
  .stat:hover::after{ opacity: 1 }
  .stat::after{
    content:""; position: absolute; inset:auto 0 0 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
    opacity: 0; transition: opacity .3s var(--ease);
  }
  .stat .k{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--ink-low); text-transform: uppercase }
  .stat .v{ font-family: var(--font-display); font-size: clamp(28px, 4vw, 38px); font-weight: 500; letter-spacing: -.02em; margin-top: 6px }
  .stat .v small{ font-size: .55em; color: var(--ink-mute); margin-left: 4px; font-weight: 400 }

  /* ---------- TICKER ---------- */
  .ticker{
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(245,166,35,.04), transparent 40%, transparent 60%, rgba(245,166,35,.04));
    overflow: hidden;
    margin-top: clamp(40px, 6vw, 72px);
  }
  .ticker-inner{
    display: flex; gap: 60px;
    padding: 18px 0;
    width: max-content;
    animation: scroll-x 50s linear infinite;
    align-items: center;
  }
  .ticker:hover .ticker-inner{ animation-play-state: paused }
  .ticker-item{
    display:inline-flex; align-items:center; gap: 14px;
    font-family: var(--font-mono); font-size: 12.5px;
    color: var(--ink-mute); letter-spacing: .04em;
    white-space: nowrap;
  }
  .ticker-item b{
    color: var(--amber); font-family: var(--font-mono);
    font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; font-size: 11px;
  }
  .ticker-item::after{
    content:"●"; color: var(--ink-low); margin-left: 60px; font-size: 8px; opacity: .6;
  }
  @keyframes scroll-x{ to{ transform: translateX(-50%) } }

  /* ---------- SECTIONS ---------- */
  section.block{
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(36px, 5vw, 72px) var(--pad);
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-mute);
  }
  .eyebrow::before{
    content:""; width: 24px; height: 1px; background: var(--amber);
  }
  .section-head{
    display: grid; grid-template-columns: 1fr auto;
    gap: 32px; align-items: end;
    margin-bottom: clamp(36px, 5vw, 64px);
  }
  .section-head h2{
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.02; letter-spacing: -.025em;
    margin: 16px 0 0;
    max-width: 22ch;
    font-variation-settings: "wdth" 92;
  }
  .section-head h2 em{ color: var(--amber); font-style: italic; font-weight: 400 }
  .section-head .head-meta{
    color: var(--ink-mute); font-size: 14px;
    text-align: right; max-width: 32ch;
  }

  /* ---------- WELCOME / INTRO ---------- */
  .welcome{
    background:
      radial-gradient(80% 120% at 100% 0%, rgba(var(--amber-glow),.08), transparent 50%),
      var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    padding: clamp(32px, 5vw, 72px);
    position: relative;
    overflow: hidden;
  }
  .welcome::before{
    content: "“"; position: absolute;
    top: -30px; right: 30px;
    font-family: var(--font-display); font-size: 320px; line-height: 1;
    color: rgba(var(--amber-glow), .07);
    pointer-events: none;
  }
  .welcome p{
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(20px, 2.4vw, 32px);
    line-height: 1.35;
    letter-spacing: -.012em;
    max-width: 38ch;
    margin: 0;
    color: var(--ink);
  }
  .welcome p + p{ margin-top: 18px; font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-mute); font-family: var(--font-body); font-weight: 400; max-width: 56ch; line-height: 1.6 }
  .welcome .sig{
    display:flex; align-items:center; gap: 14px;
    margin-top: 32px;
    padding-top: 26px; border-top: 1px solid var(--line);
  }
  .sig-mark{
    width:42px; height:42px; border-radius:50%;
    background: linear-gradient(135deg, var(--amber-hot), var(--amber-deep));
    display:grid; place-items:center; color:#1a1206;
    font-family: var(--font-display); font-weight: 700; font-size: 15px;
  }
  .sig-meta{font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--ink-mute); text-transform: uppercase}
  .sig-meta b{ color: var(--ink); font-weight: 500; display:block; letter-spacing: .04em; text-transform: none; font-family: var(--font-body); font-size: 14px }

  /* ---------- BRAND CARDS ---------- */
  .brands{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
  }
  .brand-card{
    grid-column: span 4;
    position: relative;
    border-radius: var(--radius-l);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-card);
    padding: 28px 28px 32px;
    min-height: 280px;
    display: flex; flex-direction: column;
    transition: transform .5s var(--ease-out), border-color .4s var(--ease);
    isolation: isolate;
  }
  .brand-card:nth-child(1){ grid-column: span 6 }
  .brand-card:nth-child(2){ grid-column: span 6 }
  .brand-card:nth-child(3),
  .brand-card:nth-child(4),
  .brand-card:nth-child(5){ grid-column: span 4 }

  .brand-card::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background: radial-gradient(120% 120% at var(--mx,50%) var(--my,0%), rgba(var(--amber-glow),.18), transparent 50%);
    opacity: 0; transition: opacity .5s var(--ease);
  }
  .brand-card:hover{ transform: translateY(-4px); border-color: rgba(var(--amber-glow),.3) }
  .brand-card:hover::before{ opacity: 1 }
  .brand-card:hover .brand-art{ transform: scale(1.04) rotate(-1deg) }
  .brand-card:hover .go{ background: var(--amber); color:#1a1206; border-color: var(--amber) }
  .brand-card:hover .go .arrow{ transform: translate(3px,-3px) }

  .brand-card .top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom: 16px }
  .brand-card .num{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-low); text-transform: uppercase }
  .brand-card .badge{
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
    color: var(--ink-mute); text-transform: uppercase;
    padding: 5px 10px; border:1px solid var(--line); border-radius: 999px;
  }
  .brand-card h3{
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1; letter-spacing: -.025em;
    margin: auto 0 0;
    font-variation-settings: "wdth" 90;
  }
  .brand-card p.role{
    color: var(--ink-mute); font-size: 14.5px; max-width: 36ch;
    margin: 14px 0 22px; line-height: 1.55;
  }
  .brand-card .go{
    align-self:flex-start;
    display:inline-flex; align-items:center; gap:10px;
    padding: 11px 18px; border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 13.5px; font-weight: 500;
    transition: all .3s var(--ease);
  }
  .brand-card .go .arrow{ width:14px; height:14px; transition: transform .3s var(--ease) }

  .brand-art{
    position:absolute; right:-30px; bottom:-30px;
    width: 220px; height: 220px;
    transition: transform .8s var(--ease-out);
    pointer-events: none; opacity: .7;
  }

  /* Per-brand color shifts */
  .brand-card[data-brand="action"]    { background: linear-gradient(135deg, #1a1410 0%, #14110d 100%) }
  .brand-card[data-brand="nu"]        { background: linear-gradient(135deg, #0e1318 0%, #0e1015 100%) }
  .brand-card[data-brand="rto"]       { background: linear-gradient(135deg, #18130e 0%, #14110d 100%) }
  .brand-card[data-brand="mccoy"]     { background: linear-gradient(135deg, #0c0c0a 0%, #100f0c 100%) }
  .brand-card[data-brand="towing"]    { background: linear-gradient(135deg, #14100a 0%, #100d09 100%) }

  .brand-card[data-brand="nu"]    h3 .a{ color: var(--cell-off-color) }
  .brand-card[data-brand="mccoy"] h3 .a{ color: #ffeb3b }   /* keep McCoy's flash yellow as a nod */
  .brand-card[data-brand="towing"] h3 .a{ color: #ffeb3b }

  /* ---------- TOOLS GRID ---------- */
  .tools{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
  }
  .tool{
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 22px 20px;
    background: var(--bg-card);
    display: flex; flex-direction: column; gap: 12px;
    min-height: 156px;
    position: relative;
    transition: all .3s var(--ease);
    overflow: hidden;
  }
  .tool::before{
    content:""; position: absolute; top:0; left:0; right:0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--amber-glow),.5), transparent);
    transform: translateX(-100%);
    transition: transform .6s var(--ease);
  }
  .tool:hover{
    border-color: rgba(var(--amber-glow),.4);
    transform: translateY(-3px);
    background: var(--bg-elev);
  }
  .tool:hover::before{ transform: translateX(0) }
  .tool:hover .tool-arrow{ transform: translate(4px,-4px); color: var(--amber) }

  .tool-icon{
    width: 36px; height: 36px; border-radius: 10px;
    display:grid; place-items:center;
    background: rgba(var(--amber-glow),.08);
    border: 1px solid rgba(var(--amber-glow),.22);
    color: var(--amber);
  }
  .tool-icon svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
  .tool-name{ font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing:-.01em; line-height: 1.15 }
  .tool-desc{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-low); text-transform: uppercase; margin-top: auto }
  .tool-arrow{
    position: absolute; top: 18px; right: 18px;
    width:14px; height:14px; color: var(--ink-low);
    transition: transform .3s var(--ease), color .3s var(--ease);
  }

  /* ---------- INTERNAL: split panel ---------- */
  .split{
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
  }
  .panel{
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    overflow: hidden;
    background: var(--bg-card);
  }
  .panel-head{
    display:flex; align-items:center; justify-content: space-between;
    padding: 22px 26px;
    border-bottom: 1px solid var(--line);
  }
  .panel-head h3{
    font-family: var(--font-display); font-size: 20px; font-weight: 500;
    margin: 0; letter-spacing: -.01em;
  }
  .panel-head .meta{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-low); letter-spacing: .12em; text-transform: uppercase }

  .ops-list{ list-style:none; margin:0; padding: 8px }
  .ops-list a{
    display: grid; grid-template-columns: 32px 1fr auto;
    align-items: center; gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    transition: background .25s var(--ease);
  }
  .ops-list a:hover{ background: var(--hover-bg) }
  .ops-list a:hover .ops-arrow{ transform: translateX(4px); color: var(--amber) }
  .ops-list .num{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-low); letter-spacing: .08em }
  .ops-list .name{ font-size: 16px; font-weight: 500 }
  .ops-list .name small{ display:block; font-size:12.5px; font-weight: 400; color: var(--ink-mute); margin-top: 2px; letter-spacing:0; font-family: var(--font-body) }
  .ops-arrow{ width: 16px; height: 16px; color: var(--ink-low); transition: transform .25s var(--ease), color .25s var(--ease) }

  /* People panel — image-light, info-rich */
  .people-panel{ padding: 0 }
  .people-grid{
    display:grid; grid-template-columns: repeat(2,1fr); gap: 0;
  }
  .people-cell{
    padding: 22px 26px;
    border-top: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    transition: background .25s var(--ease);
  }
  .people-cell:nth-child(2n){ border-right: 0 }
  .people-cell:nth-child(-n+2){ border-top: 0 }
  .people-cell:hover{ background: var(--hover-bg) }
  .people-cell .lbl{ font-family: var(--font-mono); font-size: 11px; color: var(--ink-low); letter-spacing: .12em; text-transform: uppercase }
  .people-cell .val{ font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing:-.02em; margin-top: 6px; line-height: 1.05; font-variation-settings:"wdth" 90 }
  .people-cell .val em{ color: var(--amber); font-style: italic; font-weight: 400 }
  .people-cell a{ display:flex; align-items:center; justify-content: space-between; gap: 12px }
  .people-cell .ops-arrow{ color: var(--ink-low) }
  .people-cell:hover .ops-arrow{ color: var(--amber); transform: translateX(4px) }

  /* ---------- TRACKING ---------- */
  .tracking{
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  }
  .track-card{
    position: relative; overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    padding: 28px 28px 26px;
    background:
      radial-gradient(80% 120% at 0% 100%, rgba(var(--amber-glow),.08), transparent 50%),
      var(--bg-card);
    min-height: 220px;
    display: flex; flex-direction: column;
    transition: border-color .3s var(--ease), transform .3s var(--ease);
  }
  .track-card:hover{ border-color: rgba(var(--amber-glow),.4); transform: translateY(-3px) }
  .track-card .live{
    display:inline-flex; align-items:center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
    color: #62d36f; text-transform: uppercase;
  }
  .track-card .live::before{ content:""; width:7px; height:7px; border-radius:50%; background:#62d36f; box-shadow: 0 0 0 0 rgba(98,211,111,.7); animation: pulse 2.2s var(--ease) infinite }
  .track-card h3{
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(28px, 3.2vw, 40px); margin: 14px 0 10px;
    letter-spacing:-.02em; line-height: 1; font-variation-settings:"wdth" 90;
  }
  .track-card p{ color: var(--ink-mute); font-size: 14.5px; max-width: 40ch; line-height: 1.55; margin: 0 0 24px }
  .track-card .open{
    align-self:flex-start; margin-top: auto;
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13.5px; font-weight: 500;
    color: var(--amber);
  }
  .track-card .open .arrow{ width: 14px; height: 14px; transition: transform .25s var(--ease) }
  .track-card:hover .open .arrow{ transform: translate(4px,-4px) }

  /* mini map illustration */
  .mini-map{
    position: absolute; right: -40px; bottom: -40px;
    width: 240px; height: 240px;
    opacity: .55;
    pointer-events: none;
  }

  /* ---------- FOOTER ---------- */
  footer{
    margin-top: clamp(60px, 8vw, 120px);
    border-top: 1px solid var(--line);
    background: var(--bg-soft);
  }
  .foot-inner{
    max-width: var(--max); margin: 0 auto;
    padding: clamp(48px, 6vw, 80px) var(--pad) clamp(20px, 3vw, 32px);
  }
  .foot-top{
    display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
    margin-bottom: 56px;
  }
  .foot-top h4{
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-low); font-weight: 500;
    margin: 0 0 18px;
  }
  .foot-top ul{ list-style:none; padding:0; margin:0 }
  .foot-top li{ margin: 10px 0 }
  .foot-top a{ color: var(--ink-mute); font-size: 14.5px; transition: color .2s var(--ease) }
  .foot-top a:hover{ color: var(--amber) }
  .foot-display{
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(28px, 3.2vw, 38px);
    letter-spacing: -.02em; line-height: 1.1;
    max-width: 22ch;
    font-variation-settings:"wdth" 92;
  }
  .foot-display em{ color: var(--amber); font-style: italic; font-weight: 400 }
  .foot-bottom{
    display:flex; justify-content: space-between; align-items:center;
    gap: 20px; flex-wrap: wrap;
    padding-top: 24px; border-top: 1px solid var(--line-soft);
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
    color: var(--ink-low); text-transform: uppercase;
  }
  .foot-bottom .where{ color: var(--ink-mute) }

  /* ---------- REVEAL ANIMATION (scroll) ---------- */
  .reveal{ opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out) }
  .reveal.in{ opacity: 1; transform: translateY(0) }
  .reveal[data-d="1"]{ transition-delay: .08s }
  .reveal[data-d="2"]{ transition-delay: .16s }
  .reveal[data-d="3"]{ transition-delay: .24s }
  .reveal[data-d="4"]{ transition-delay: .32s }
  .reveal[data-d="5"]{ transition-delay: .40s }
  .reveal[data-d="6"]{ transition-delay: .48s }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 980px){
    .nav{ display:none }
    .menu-btn{ display:grid; place-items:center; margin-left:auto }
    .status{ display:none }
    .hero-grid{ grid-template-columns: 1fr }
    .hero-stats{ grid-template-columns: 1fr 1fr 1fr }
    .brands{ gap: 12px }
    .brand-card,
    .brand-card:nth-child(1),
    .brand-card:nth-child(2),
    .brand-card:nth-child(3),
    .brand-card:nth-child(4),
    .brand-card:nth-child(5){ grid-column: span 12 }
    .tools{ grid-template-columns: 1fr 1fr }
    .split{ grid-template-columns: 1fr; gap: 24px }
    .tracking{ grid-template-columns: 1fr }
    .foot-top{ grid-template-columns: 1fr 1fr; gap: 32px }
    .section-head{ grid-template-columns: 1fr; gap: 12px }
    .section-head .head-meta{ text-align: left }
  }
  @media (max-width: 560px){
    .hero-stats{ grid-template-columns: 1fr }
    .tools{ grid-template-columns: 1fr }
    .foot-top{ grid-template-columns: 1fr }
    .people-grid{ grid-template-columns: 1fr }
    .people-cell{ border-right: 0 }
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation: none !important; transition: none !important }
    .reveal{ opacity: 1; transform: none }
  }


/* ============================================================
   USER MENU (header) — replaces the old "Operational" status pill
   ============================================================ */
.user-menu{
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: auto;
}
.user-pill{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--subtle-bg-2), transparent);
}
.user-avatar{
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--amber-hot), var(--amber-deep));
  color: #1a1206;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.user-name{
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  letter-spacing: -.005em;
}
.user-role{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 500;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line);
}
.user-role.role-admin{
  background: rgba(245,166,35,.12); color: var(--amber-hot);
  border-color: rgba(245,166,35,.25);
}
.user-role.role-manager{
  background: rgba(111,179,209,.10); color: var(--cell-off-color);
  border-color: rgba(111,179,209,.25);
}
.user-role.role-employee{
  background: var(--hover-bg); color: var(--ink-mute);
}

.logout-form{ display: inline; margin: 0 }
.logout-btn{
  font-size: 13px; padding: 8px 14px; border-radius: 8px;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  background: transparent;
  transition: all .2s var(--ease);
}
.logout-btn:hover{
  color: var(--ink);
  border-color: var(--ink-mute);
  background: var(--hover-bg);
}

.admin-link{
  font-size: 13px; padding: 8px 14px; border-radius: 8px;
  color: var(--amber);
  border: 1px solid rgba(245,166,35,.30);
  font-weight: 500;
  transition: all .2s var(--ease);
}
.admin-link:hover{
  background: rgba(245,166,35,.08);
  border-color: rgba(245,166,35,.55);
  color: var(--amber-hot);
}

/* When the People panel is hidden (employees), the .split becomes single column */
.split.single{
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 980px){
  .user-menu{ display: none }
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-body{
  background: var(--bg);
  min-height: 100vh;
}
.login-shell{
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 32px 20px;
  position: relative;
}
.login-shell::before{
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 30%, rgba(var(--amber-glow), .08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.login-card{
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
}
.login-brand{
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  margin-bottom: 32px;
  text-align: center;
}
.brand-mark-lg{
  width: 56px; height: 56px;
  border-radius: 14px;
}
.brand-mark-lg::after{
  font-size: 30px;
}
.login-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -.025em;
  margin: 0;
  font-variation-settings: "wdth" 92;
  line-height: 1.05;
}
.login-sub{
  color: var(--ink-mute); font-size: 14.5px; margin: 8px 0 0;
}

.field{
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.field label{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 500;
}
.field input{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ink); font-size: 15px;
  font-family: var(--font-body);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field input:focus{
  outline: none;
  border-color: var(--amber);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px rgba(var(--amber-glow), .15);
}
.field input::placeholder{ color: var(--ink-low) }

.login-btn{
  width: 100%;
  background: var(--amber); color: #1a1206;
  padding: 14px;
  border-radius: 12px;
  font-weight: 600; font-size: 15px;
  border: 0;
  cursor: pointer;
  transition: all .25s var(--ease);
  margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.login-btn:hover{
  background: var(--amber-hot);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(var(--amber-glow), .55);
}
.login-btn:active{ transform: translateY(0) }

.login-error{
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.22);
  color: #fca5a5;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  margin-bottom: 18px;
}

.login-footer{
  text-align: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-low);
}


/* ============================================================
   SCHEDULE PAGES (Day / Week / Month)
   ============================================================ */

/* Tighter ghost button used in headers */
.btn-ghost-sm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  background: var(--subtle-bg-2);
  transition: all .2s var(--ease);
}
.btn-ghost-sm:hover { color: var(--ink); border-color: var(--ink-mute); background: var(--hover-bg); }

/* Page wrapper */
.sched-main {
  max-width: 1480px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 36px) clamp(20px, 4vw, 48px) 80px;
  position: relative;
  z-index: 3;
}

/* TOOLBAR */
.sched-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.sched-range .eyebrow { display: inline-block; margin-bottom: 4px; }
.sched-range .eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--amber); margin-right: 10px; vertical-align: middle; }
.sched-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -.02em;
  margin: 0;
  font-variation-settings: "wdth" 92;
  line-height: 1.05;
}
.sched-title .sep { color: var(--ink-low); margin: 0 4px; font-weight: 300; }

.sched-nav { display: inline-flex; gap: 4px; align-items: center; }
.nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  color: var(--ink-mute); border: 1px solid var(--line);
  background: var(--subtle-bg-2);
  transition: all .2s var(--ease);
}
.nav-btn:hover { color: var(--ink); border-color: var(--ink-mute); background: var(--hover-bg); }
.nav-btn-text {
  width: auto; padding: 0 14px; font-size: 12.5px; font-weight: 500;
  font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}

.sched-actions { display: flex; align-items: center; gap: 8px; }
.role-badge {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 500;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(245,166,35,.12); color: var(--amber);
  border: 1px solid rgba(245,166,35,.25);
}
.role-badge.role-employee {
  background: var(--hover-bg); color: var(--ink-mute);
  border-color: var(--line);
}

/* SECTIONS (one per category) */
.sched-section {
  margin-bottom: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--bg-card);
  overflow: hidden;
}
.sched-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--hover-bg), transparent);
}
.sched-section-head h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 20px; margin: 0; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 12px;
}
.sched-section-head h2::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber);
}
.sched-section-rental-agents .sched-section-head h2::before { background: #6fb3d1; }
.sched-section-shuttle-drivers .sched-section-head h2::before { background: #f97316; }
.sched-section-car-washers .sched-section-head h2::before { background: #10b981; }

.sched-count {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex; gap: 8px;
}

/* TABLE (week view) */
.sched-table-wrap { overflow-x: auto; }
.sched-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 900px;
}
.sched-table th, .sched-table td {
  padding: 10px 8px;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.sched-table thead th {
  background: var(--subtle-bg-2);
  font-family: var(--font-mono);
  font-weight: 500; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute);
  position: sticky; top: 0;
}
.sched-table thead th .day-num { color: var(--ink); font-weight: 600; font-size: 13px; letter-spacing: -.01em; text-transform: none; font-family: var(--font-body); margin-bottom: 2px; }
.sched-table thead th.is-today { background: rgba(245,166,35,.10); }
.sched-table thead th.is-today .day-num { color: var(--amber-hot); }
.sched-table thead th.is-weekend { background: var(--cell-empty-bg); }
.sched-table thead th.is-weekend.is-today { background: rgba(245,166,35,.10); }

.sched-name-col {
  text-align: left !important;
  width: 200px;
  position: sticky; left: 0; z-index: 2;
  background: var(--bg-card) !important;
}
.sched-name-cell {
  text-align: left;
  display: flex; align-items: center; gap: 12px;
  padding-left: 16px !important;
  position: sticky; left: 0;
  background: var(--bg-card);
  z-index: 1;
}
.emp-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--amber-hot), var(--amber-deep));
  display: grid; place-items: center;
  color: #1a1206;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: .02em;
  flex-shrink: 0;
}
.emp-name { font-weight: 500; color: var(--ink); }
.emp-role { font-size: 11.5px; color: var(--ink-mute); margin-top: 1px; }

.sched-cell { min-width: 110px; }
.sched-cell.is-today { background: rgba(245,166,35,.04); }
.sched-cell.is-weekend { background: var(--subtle-bg); }

/* CELL CONTENTS */
.cell-empty {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 80px; min-height: 30px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--ink-low);
  font-size: 14px;
  background: var(--cell-empty-bg);
}

.cell-off {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 80px; padding: 6px 10px;
  border-radius: 6px;
  background: var(--cell-off-bg);
  color: var(--cell-off-color);
  font-style: italic;
  font-weight: 500; font-size: 12px;
  letter-spacing: .04em;
  border: 1px solid var(--cell-off-border);
}

.cell-shift {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--cell-shift-bg);
  border: 1px solid var(--cell-shift-border);
  font-weight: 500; font-size: 12px;
  color: var(--ink);
}
.cell-time { white-space: nowrap; }
.cell-code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 4px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: var(--ink-mute);
}
.cell-note {
  font-size: 8px; color: var(--amber);
}

/* DAY VIEW */
.sched-day-grid { display: flex; flex-direction: column; gap: 16px; }
.day-list { padding: 6px; }
.day-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 12px;
  transition: background .2s var(--ease);
}
.day-row:hover { background: var(--hover-bg); }
.day-row + .day-row { border-top: 1px solid var(--line-soft); }
.day-emp { display: flex; align-items: center; gap: 14px; }
.day-shift {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 14px;
}
.row-empty { opacity: .5; }
.row-off .day-shift { color: var(--cell-off-color); }
.day-note {
  grid-column: 1 / -1;
  font-size: 12.5px; color: var(--ink-mute);
  background: rgba(245,166,35,.05);
  border-left: 2px solid var(--amber);
  padding: 8px 12px;
  border-radius: 4px;
  margin-top: 4px;
  font-style: italic;
}

.kpi {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--subtle-bg-2);
  color: var(--ink-mute);
  text-transform: uppercase;
}
.kpi-working { color: var(--amber); border-color: rgba(245,166,35,.25); background: rgba(245,166,35,.06); }
.kpi-off     { color: var(--cell-off-color); border-color: rgba(111,179,209,.25); background: rgba(111,179,209,.06); }
.kpi-empty   { color: var(--ink-low); }

/* MONTH VIEW */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 12px;
  background: var(--bg-card);
}
.month-dow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
  padding: 8px 0;
  font-weight: 500;
}
.month-cell {
  display: flex; flex-direction: column;
  min-height: 92px; padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: var(--subtle-bg);
  transition: all .2s var(--ease);
  text-decoration: none;
  color: var(--ink);
  position: relative;
}
.month-cell:hover { border-color: rgba(245,166,35,.4); transform: translateY(-1px); background: rgba(245,166,35,.04); }
.month-cell.is-outside { opacity: .3; }
.month-cell.is-weekend { background: var(--subtle-bg); }
.month-cell.is-today {
  border-color: rgba(245,166,35,.5);
  background: rgba(245,166,35,.06);
  box-shadow: 0 0 0 2px rgba(245,166,35,.15);
}
.month-cell-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.month-day-num {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500;
  letter-spacing: -.01em;
}
.month-cell.is-today .month-day-num { color: var(--amber-hot); }
.month-today-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(245,166,35,.7);
  animation: pulse 2.2s var(--ease) infinite;
}
.month-density {
  height: 3px;
  background: var(--hover-bg);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.density-bar {
  display: block; height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--amber-deep), var(--amber-hot));
  border-radius: 2px;
}
.month-stats {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: auto;
}
.month-stats .kpi { padding: 2px 7px; font-size: 10px; }

/* LEGEND */
.sched-legend {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  padding: 16px 22px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.legend-title {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin-right: 4px;
}
.legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px;
}
.legend-code {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 5px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--c, #888) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #888) 30%, transparent);
  color: var(--c, #888);
}
.legend-label { color: var(--ink-mute); }

/* MOBILE */
@media (max-width: 720px) {
  .sched-toolbar { grid-template-columns: 1fr; gap: 12px; }
  .sched-actions { display: none; }
  .month-grid { gap: 3px; padding: 6px; }
  .month-cell { min-height: 70px; padding: 6px; }
  .month-day-num { font-size: 13px; }
}


/* ============================================================
   EDITING (step C.3): modal, forms, employee list
   ============================================================ */

/* Editable cells get a hover affordance */
.sched-cell.is-editable {
  cursor: pointer;
  position: relative;
  transition: background .15s var(--ease);
}
.sched-cell.is-editable:hover {
  background: rgba(245,166,35,.06) !important;
}
.sched-cell.is-editable:hover .cell-empty {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(245,166,35,.08);
}
.sched-cell.is-editable:focus {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}
.sched-cell.is-editable:active { transform: scale(.98); }

/* Flash status banner */
.flash-status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.22);
  color: #6ee7b7;
  font-size: 13.5px; font-weight: 500;
  margin-bottom: 24px;
  animation: flash-in .4s var(--ease);
}
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* MODAL */
.modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
  pointer-events: none;
}
.modal.is-open {
  display: block;
  pointer-events: auto;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: backdrop-in .25s var(--ease);
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.modal-dialog {
  position: relative;
  margin: 5vh auto;
  max-width: 540px;
  width: calc(100% - 32px);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  animation: modal-in .35s var(--ease-out);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.modal-title {
  font-family: var(--font-display);
  font-weight: 500; font-size: 22px;
  letter-spacing: -.02em;
  margin: 0 0 4px;
  font-variation-settings: "wdth" 92;
}
.modal-sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-mute);
}
.modal-sub strong { color: var(--ink); font-weight: 500; }
.modal-sub .sep { color: var(--ink-low); margin: 0 6px; }
.modal-close {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.modal-close:hover { color: var(--ink); border-color: var(--ink-mute); background: var(--hover-bg); }

.modal-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; }

/* FORM ELEMENTS */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.field-label small { font-family: var(--font-body); font-size: 11px; color: var(--ink-low); text-transform: none; letter-spacing: 0; }
.field-hint { font-size: 11.5px; color: var(--ink-low); margin-top: 2px; }
.field input[type="text"],
.field input[type="number"],
.field input[type="time"],
.field input[type="email"],
.field input[type="password"],
.field select,
.field textarea {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--ink);
  font-size: 14px;
  font-family: var(--font-body);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 60px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245,166,35,.15);
}

/* TOGGLE ROW (off checkbox, active checkbox) */
.toggle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--subtle-bg-2);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.toggle-row:hover { border-color: rgba(245,166,35,.3); background: rgba(245,166,35,.03); }
.toggle-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--amber);
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-label { font-size: 13.5px; color: var(--ink); }
.toggle-label strong { font-weight: 500; }

/* TIME FIELDS GROUP */
.time-fields {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin: 0;
  background: var(--subtle-bg);
  transition: opacity .2s var(--ease);
}
.time-fields.is-disabled {
  opacity: .35;
  pointer-events: none;
}
.time-fields legend {
  padding: 0 8px;
}
.presets {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.preset-btn {
  font-size: 12px; font-family: var(--font-mono); font-weight: 500;
  padding: 7px 11px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-mute);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.preset-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(245,166,35,.06);
}
.time-inputs {
  display: flex; align-items: end; gap: 10px;
}
.time-inputs label { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.time-inputs label span {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-low);
}
.time-sep { color: var(--ink-low); padding-bottom: 12px; }

/* MODAL ACTIONS BAR */
.modal-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.modal-actions-right { display: flex; gap: 8px; align-items: center; }

.btn-primary-sm {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 9px;
  background: var(--amber); color: #1a1206;
  font-size: 13.5px; font-weight: 600;
  border: 0; cursor: pointer;
  transition: all .2s var(--ease);
}
.btn-primary-sm:hover { background: var(--amber-hot); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(245,166,35,.5); }
.btn-primary-sm svg { stroke: currentColor; }

.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 9px;
  font-size: 13px; font-weight: 500;
  background: transparent;
  color: #f87171;
  border: 1px solid rgba(248,113,113,.25);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.btn-danger:hover { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.5); }

.btn-danger-ghost {
  font-size: 12.5px; padding: 7px 12px; border-radius: 7px;
  font-family: inherit; font-weight: 500;
  color: #f87171;
  background: transparent;
  border: 1px solid rgba(248,113,113,.2);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.btn-danger-ghost:hover { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.5); }

.form-error {
  display: block;
  font-size: 12.5px;
  color: #f87171;
  margin-top: 4px;
}

/* EMPLOYEE MANAGEMENT PAGE */
.emp-list { padding: 6px; }
.emp-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 12px;
  transition: background .15s var(--ease);
}
.emp-row:hover { background: var(--subtle-bg-2); }
.emp-row + .emp-row { border-top: 1px solid var(--line-soft); }
.emp-row.is-archived { opacity: .55; }
.emp-info { display: flex; align-items: center; gap: 14px; }
.emp-badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--hover-bg);
  border: 1px solid var(--line);
  color: var(--ink-low);
  padding: 2px 7px; border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.emp-meta .kpi { font-size: 10.5px; padding: 3px 8px; }
.emp-actions { display: flex; gap: 6px; }

/* FORM CARD (employee create/edit) */
.form-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--bg-card);
  padding: clamp(20px, 3vw, 32px);
  max-width: 640px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-grid .span-2 { grid-column: 1 / -1; }
.form-actions {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.empty-state {
  text-align: center;
  padding: 60px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-l);
  background: var(--subtle-bg);
  color: var(--ink-mute);
}
.empty-state a { color: var(--amber); }

/* MOBILE */
@media (max-width: 720px) {
  .modal-dialog { margin: 2vh auto; max-width: 100%; border-radius: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .emp-row { grid-template-columns: 1fr; gap: 8px; }
  .emp-meta, .emp-actions { justify-self: start; }
}


/* ============================================================
   TEMPLATES (step C.4): dropdown menu + radio mode + template list
   ============================================================ */

/* DROPDOWN */
.dropdown { position: relative; display: inline-block; }
.dropdown > [data-toggle] {
  display: inline-flex; align-items: center; gap: 6px;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  min-width: 280px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.6);
  padding: 6px;
  z-index: 50;
  display: none;
  animation: dd-in .18s var(--ease-out);
}
@keyframes dd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown.is-open .dropdown-menu { display: block; }
.dropdown-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background .15s var(--ease);
  text-decoration: none;
}
.dropdown-item:hover:not(:disabled):not(.is-disabled) { background: var(--hover-bg); }
.dropdown-item.is-disabled, .dropdown-item:disabled {
  opacity: .4; cursor: not-allowed;
}
.dropdown-item-form { margin: 0; }
.dropdown-item-form .dropdown-item { width: 100%; }
.dd-icon {
  font-size: 18px; line-height: 1;
  width: 28px; text-align: center;
  flex-shrink: 0;
}
.dd-text { display: flex; flex-direction: column; line-height: 1.3; }
.dd-text strong { font-weight: 500; font-size: 13.5px; }
.dd-text small {
  font-size: 11.5px; color: var(--ink-low);
  margin-top: 1px;
}
.dropdown-sep {
  height: 1px; border: 0; background: var(--line-soft);
  margin: 6px 8px;
}

/* RADIO ROWS (modal mode toggles) */
.mode-fields {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--subtle-bg);
}
.mode-fields legend {
  padding: 0 6px;
  margin-bottom: 4px;
}
.radio-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s var(--ease);
}
.radio-row:hover { background: var(--hover-bg); }
.radio-row input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--amber);
  cursor: pointer;
  flex-shrink: 0;
}
.radio-row span { font-size: 13.5px; }
.radio-row strong { font-weight: 500; color: var(--ink); }

/* TEMPLATE LIST PAGE */
.tpl-body {
  padding: 18px 22px;
}
.tpl-description {
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.4;
}
.tpl-description-muted {
  color: var(--ink-low);
  font-style: italic;
  font-family: var(--font-body);
  font-weight: 400;
}
.tpl-actions {
  display: flex; gap: 10px; align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* MOBILE adjustments */
@media (max-width: 720px) {
  .dropdown-menu { right: auto; left: 0; min-width: 240px; }
}


/* ============================================================
   MULTI-CATEGORIES (step C.5): checkbox grid, category chips
   ============================================================ */

/* CHECKBOX GRID — used in employee form */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--subtle-bg);
}
.checkbox-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s var(--ease);
}
.checkbox-row:hover { background: var(--hover-bg); }
.checkbox-row input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--amber);
  cursor: pointer;
  flex-shrink: 0;
}
.checkbox-row span { font-size: 13.5px; }
.checkbox-row input[type="checkbox"]:checked + span {
  color: var(--amber-hot);
  font-weight: 500;
}

/* "Create a new category" disclosure */
.new-category {
  margin-top: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 0 12px;
}
.new-category summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 12.5px;
  color: var(--ink-mute);
  list-style: none;
  user-select: none;
  transition: color .15s var(--ease);
}
.new-category summary::-webkit-details-marker { display: none; }
.new-category summary:hover { color: var(--amber); }
.new-category[open] summary { color: var(--amber); }
.new-category-body {
  padding-bottom: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.new-category-body input {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--ink);
  font-size: 13.5px;
  font-family: var(--font-body);
}
.new-category-body input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245,166,35,.15);
}

/* CATEGORY CHIPS — used in employee list */
.cat-chip {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 4px;
  border-radius: 999px;
  background: rgba(245,166,35,.08);
  border: 1px solid rgba(245,166,35,.22);
  color: var(--amber);
  font-size: 11px; font-weight: 500;
  letter-spacing: .01em;
}
.emp-position-label {
  color: var(--ink-low);
  font-size: 11.5px;
  margin-left: 4px;
}


/* ============================================================
   THEME TOGGLE BUTTON + LIGHT MODE TARGETED FIXES
   ============================================================ */

/* Toggle button — sun/moon */
.theme-toggle {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: all .2s var(--ease);
  position: relative;
}
.theme-toggle:hover {
  color: var(--amber);
  border-color: var(--amber);
  background: var(--hover-bg);
  transform: rotate(15deg);
}
.theme-toggle svg { display: block; transition: opacity .2s var(--ease), transform .3s var(--ease); }
[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Day view: row-off color uses our token */
.row-off .day-shift { color: var(--cell-off-color); }

/* Light mode targeted fixes — for elements where pure variables aren't enough */
[data-theme="light"] body {
  /* The hub gradient hits at the bottom on dark — soften on light */
}

/* The main hub has a specific 'page' background gradient defined in the body */
[data-theme="light"] .grain {
  /* The grain SVG is white-ish noise — make it darker for visibility on cream bg */
  filter: invert(1) opacity(0.4);
}

/* Hub: brand mark logo (the small amber dot) — fine on both */

/* Hub: marquee ticker — has dark gradient backgrounds */
[data-theme="light"] .ticker {
  background: linear-gradient(90deg, var(--bg-card), var(--bg-soft) 8%, var(--bg-soft) 92%, var(--bg-card));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Hub: header glass effect on scroll */
[data-theme="light"] .header.is-scrolled {
  background: rgba(247, 243, 234, .85);
  backdrop-filter: blur(12px) saturate(1.4);
}

/* Login page: gradient backdrop becomes lighter */
[data-theme="light"] .auth-page {
  background: radial-gradient(ellipse at top, #fefdf9, var(--bg) 60%);
}

/* Form inputs — slightly stronger borders on light bg for visibility */
[data-theme="light"] .field input,
[data-theme="light"] .field select,
[data-theme="light"] .field textarea {
  background: var(--bg-card);
  border-color: var(--line);
}

/* Schedule section header gradient — lighter on light theme */
[data-theme="light"] .sched-section-head {
  background: linear-gradient(180deg, var(--subtle-bg), transparent);
}

/* Modal dialog shadow — softer on light */
[data-theme="light"] .modal-dialog {
  border: 1px solid var(--line);
}

/* Cell shift hover state — slightly darker on light */
[data-theme="light"] .sched-cell.is-editable:hover {
  background: rgba(245, 166, 35, .10) !important;
}

/* Avatar — keep the dark text on amber gradient (works on both themes) */

/* Flash status — adapt green/red shades for light bg */
[data-theme="light"] .flash-status {
  background: rgba(16, 185, 129, .14);
  color: #047857;
  border-color: rgba(16, 185, 129, .35);
}

/* Danger buttons — adapt for light */
[data-theme="light"] .btn-danger {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, .25);
}
[data-theme="light"] .btn-danger:hover {
  background: rgba(185, 28, 28, .08);
  border-color: rgba(185, 28, 28, .5);
}
[data-theme="light"] .btn-danger-ghost {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, .25);
}
[data-theme="light"] .btn-danger-ghost:hover {
  background: rgba(185, 28, 28, .08);
  border-color: rgba(185, 28, 28, .5);
}
[data-theme="light"] .form-error { color: #b91c1c; }

/* Today highlight on month grid stays amber — works on both */

/* Role badge "Manager mode" — fine on both due to amber */
[data-theme="light"] .role-badge.role-employee {
  background: var(--bg-card);
  color: var(--ink-mute);
}

/* Dropdown menu shadow — softer on light */
[data-theme="light"] .dropdown-menu {
  box-shadow: var(--shadow-deep);
}


/* Login page — fixed-position theme toggle */
.login-theme-toggle {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 100;
}


/* ============================================================
   STEP E: Admin dashboard, memos, header admin dropdown
   ============================================================ */

/* HEADER ADMIN DROPDOWN — same styles as the schedule templates dropdown,
   but wired to the global header */
.header-admin-dd {
  margin-right: 4px;
}

/* MEMOS LIST */
.memo-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--bg-card);
  padding: 22px 26px;
  margin-bottom: 16px;
  transition: border-color .2s var(--ease);
}
.memo-card:hover { border-color: var(--ink-low); }
.memo-card.is-pinned {
  border-color: rgba(245,166,35,.30);
  background: linear-gradient(180deg, rgba(245,166,35,.04), transparent 60%), var(--bg-card);
}

.memo-head { margin-bottom: 14px; }
.memo-title-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.memo-pin {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 5px;
  background: rgba(245,166,35,.12);
  color: var(--amber);
  border: 1px solid rgba(245,166,35,.25);
}
.memo-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -.02em;
  margin: 0;
  font-variation-settings: "wdth" 92;
  color: var(--ink);
}
.memo-meta {
  font-size: 12.5px;
  color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.memo-meta strong { color: var(--ink); font-weight: 500; }
.memo-meta .sep { color: var(--ink-low); }
.memo-meta em { font-style: italic; color: var(--ink-low); }

.memo-content {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 14px 0 0;
  white-space: pre-line; /* belt and suspenders with nl2br */
}

.memo-actions {
  display: flex; gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

/* WIDE FORM CARD (for memos which need more horizontal space) */
.form-card-wide {
  max-width: 760px;
}
.form-card-wide .field { margin-bottom: 20px; }

/* ADMIN DASHBOARD */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.admin-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--bg-card);
  padding: 24px 26px;
  display: flex; flex-direction: column;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.admin-card:hover {
  border-color: rgba(245,166,35,.40);
  transform: translateY(-2px);
}
.admin-card-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.admin-card-icon {
  font-size: 28px;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--subtle-bg-2);
  border: 1px solid var(--line-soft);
}
.admin-card-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
.admin-card-body { flex: 1; margin-bottom: 18px; }

.admin-stat {
  display: flex; flex-direction: column;
}
.admin-stat-row {
  display: flex; gap: 24px;
  margin-bottom: 12px;
}
.admin-stat-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -.03em;
  color: var(--amber);
  line-height: 1;
  font-variation-settings: "wdth" 88;
}
.admin-stat-value.admin-stat-muted {
  color: var(--ink-low);
}
.admin-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
.admin-card-meta {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 12px 0 0;
  line-height: 1.5;
}
.admin-card-meta strong { color: var(--ink); font-weight: 500; }
.admin-card-meta small {
  display: inline-block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ink-low);
}

.admin-card-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

/* MOBILE adjustments */
@media (max-width: 720px) {
  .header-admin-dd { display: none; }
  .admin-grid { grid-template-columns: 1fr; }
  .memo-card { padding: 18px 20px; }
}


/* ============================================================
   STEP F: Categories management page
   ============================================================ */

.cat-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
}
.cat-info {
  display: flex; align-items: center; gap: 14px;
}
.cat-order-badge {
  display: inline-grid; place-items: center;
  min-width: 36px; height: 36px;
  padding: 0 8px;
  border-radius: 9px;
  background: var(--subtle-bg-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: .04em;
}
.cat-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -.01em;
  margin: 0 0 4px;
  color: var(--ink);
}
.cat-meta {
  font-size: 12.5px;
  color: var(--ink-mute);
}
.cat-meta-warn {
  color: var(--amber);
  font-weight: 500;
  margin-left: 4px;
}
.cat-actions {
  display: flex; gap: 8px;
  flex-shrink: 0;
}

/* Hint text used in form/index pages */
.sched-hint {
  margin-top: 24px;
  padding: 14px 18px;
  background: var(--subtle-bg);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.sched-hint strong { color: var(--ink); font-weight: 500; }

/* Mobile */
@media (max-width: 720px) {
  .cat-row { flex-direction: column; align-items: flex-start; }
  .cat-actions { width: 100%; justify-content: flex-end; }
}


/* ============================================================
   STEP G: Hub access (login) section + disabled links
   ============================================================ */

/* HUB ACCESS section in employee form */
.hub-access-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--subtle-bg);
  display: flex; flex-direction: column; gap: 12px;
}

.login-status-card {
  display: flex; flex-direction: column; gap: 12px;
}
.login-status-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px;
  flex-wrap: wrap;
}
.login-status-row code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 2px 8px; border-radius: 6px;
  color: var(--amber);
}
.login-badge-on {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(16, 185, 129, .12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, .30);
}

/* Reset password disclosure */
.reset-pw {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 0 12px;
}
.reset-pw summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 13px;
  color: var(--ink-mute);
  list-style: none;
  user-select: none;
  transition: color .15s var(--ease);
}
.reset-pw summary::-webkit-details-marker { display: none; }
.reset-pw summary:hover { color: var(--amber); }
.reset-pw[open] summary { color: var(--amber); }
.reset-pw-body {
  padding-bottom: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.reset-pw-body input {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--ink);
  font-size: 13.5px;
  font-family: var(--font-body);
}
.reset-pw-body input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245,166,35,.15);
}

/* Danger toggle row (Remove hub access) */
.toggle-row-danger {
  border-color: rgba(248,113,113,.25);
}
.toggle-row-danger:hover {
  border-color: rgba(248,113,113,.5);
  background: rgba(248,113,113,.04);
}
.toggle-row-danger input[type="checkbox"] {
  accent-color: #f87171;
}
.toggle-row-danger strong { color: #f87171; }

/* Login fields revealed when "Give hub access" is toggled */
.login-fields {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--subtle-bg-2);
}
.field-label-sm {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
  margin-bottom: 4px;
  display: block;
}
.login-fields input {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--ink);
  font-size: 13.5px;
  font-family: var(--font-body);
}
.login-fields input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245,166,35,.15);
}

/* DISABLED LINKS — visual cue for "coming soon" links in the hub */
.link-disabled {
  position: relative;
  cursor: not-allowed !important;
  opacity: 0.55;
  filter: grayscale(0.4);
}
.link-disabled::after {
  content: "Soon";
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(245,166,35,.12);
  color: var(--amber);
  border: 1px solid rgba(245,166,35,.30);
  pointer-events: none;
  z-index: 2;
}
/* For inline list items (site map), the badge would overflow — use a simpler look */
.foot-col .link-disabled::after { display: none; }
.foot-col .link-disabled {
  text-decoration: line-through;
}
.foot-col .link-disabled::before {
  content: "🔒 ";
  font-size: 10px;
}

/* Login form hint */
.login-card .field-hint {
  margin-top: 4px;
  display: block;
}


/* ============================================================
   STEP H: Search bar, filters, drag handles, sortable states
   ============================================================ */

/* SEARCH + FILTERS BAR */
.search-filter-bar {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  margin-bottom: 14px;
  align-items: center;
}
.search-input-wrap {
  position: relative;
  display: flex; align-items: center;
}
.search-input-wrap .search-icon {
  position: absolute;
  left: 14px;
  color: var(--ink-low);
  pointer-events: none;
}
.search-input-wrap input[type="search"] {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 36px 11px 38px;
  color: var(--ink);
  font-size: 14px;
  font-family: var(--font-body);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search-input-wrap input[type="search"]:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245,166,35,.15);
}
.search-input-wrap input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-clear {
  position: absolute;
  right: 8px;
  width: 22px; height: 22px;
  border: 0;
  background: var(--hover-bg);
  color: var(--ink-mute);
  border-radius: 50%;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.search-clear:hover { color: var(--ink); }

.filter-select {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.filter-select:hover { border-color: var(--ink-mute); }
.filter-select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245,166,35,.15);
}

.search-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  padding: 6px 12px;
  background: var(--subtle-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

/* DRAG HANDLE */
.drag-handle {
  display: inline-grid; place-items: center;
  width: 28px; height: 32px;
  margin-right: 8px;
  color: var(--ink-low);
  cursor: grab;
  border-radius: 6px;
  transition: color .15s var(--ease), background .15s var(--ease);
  user-select: none;
  flex-shrink: 0;
}
.drag-handle:hover {
  color: var(--amber);
  background: var(--hover-bg);
}
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { display: block; }

/* SORTABLEJS visual states */
.sortable-ghost {
  opacity: 0.4;
  background: var(--cell-shift-bg) !important;
  border-radius: 12px;
}
.sortable-drag {
  cursor: grabbing !important;
  box-shadow: var(--shadow-deep);
  background: var(--bg-card);
  border-radius: 12px;
  z-index: 1000;
}

/* Employee row tweaks for drag handle integration */
.emp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
}
.emp-row .emp-info {
  flex: 1;
}
.emp-badge-login {
  background: rgba(16, 185, 129, .12);
  color: #34d399;
  border-color: rgba(16, 185, 129, .28);
  font-family: var(--font-mono);
}

/* Category section in employees list — slight tweak */
.emp-list { padding: 6px; }

/* Empty search state */
.empty-search {
  text-align: center;
  padding: 40px;
  color: var(--ink-mute);
  font-style: italic;
}

/* Warning chip for uncategorized employees */
.cat-chip-warn {
  background: rgba(248,113,113,.10);
  border-color: rgba(248,113,113,.30);
  color: #f87171;
}

/* MOBILE adjustments */
@media (max-width: 720px) {
  .search-filter-bar {
    grid-template-columns: 1fr;
  }
  .filter-select { width: 100%; }
  .drag-handle {
    width: 32px; height: 36px;
  }
  .emp-row { flex-wrap: wrap; }
}


/* ============================================================
   STEP I: Tighter employee row layout + delete button variant
   ============================================================ */

/* OVERRIDE the previous .emp-row layout — content + actions stay close together */
.emp-list .emp-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
}
.emp-list .emp-row .emp-info {
  flex: 0 1 auto;        /* don't grow into empty space */
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;          /* allow text truncation if too long */
}
.emp-list .emp-row .emp-actions {
  flex: 0 0 auto;
  margin-left: auto;     /* push actions to the right edge */
  display: flex;
  gap: 6px;
  align-items: center;
}

/* But cap the section width so the gap between content and actions stays reasonable.
   On very wide screens (1400px+), centered list looks much more polished. */
.emp-section {
  max-width: 1100px;
}

/* DELETE BUTTON — stronger red than "Archive" so it's visually distinct */
.btn-danger-strong {
  background: rgba(248, 113, 113, .08);
  color: #f87171;
  border-color: rgba(248, 113, 113, .35);
  font-weight: 600;
}
.btn-danger-strong:hover {
  background: rgba(248, 113, 113, .15);
  border-color: rgba(248, 113, 113, .60);
}
[data-theme="light"] .btn-danger-strong {
  background: rgba(185, 28, 28, .08);
  color: #b91c1c;
  border-color: rgba(185, 28, 28, .35);
}
[data-theme="light"] .btn-danger-strong:hover {
  background: rgba(185, 28, 28, .15);
  border-color: rgba(185, 28, 28, .60);
}


/* ============================================================
   STEP J: Ticker management page (settings + items list)
   ============================================================ */

/* SETTINGS CARD */
.ticker-settings-card .ticker-settings-form {
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.ticker-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 720px) {
  .ticker-settings-grid { grid-template-columns: 1fr; }
}

/* SPEED slider with live value display */
.speed-slider-wrap {
  display: flex; align-items: center; gap: 14px;
}
.speed-slider-wrap input[type="range"] {
  flex: 1;
  accent-color: var(--amber);
}
.speed-display {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--amber);
  font-weight: 500;
  min-width: 44px;
  text-align: right;
}

/* SIZE radio pills */
.size-options {
  display: flex; gap: 8px;
}
.size-option {
  flex: 1;
  cursor: pointer;
}
.size-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.size-option-pill {
  display: block;
  text-align: center;
  padding: 9px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--ink-mute);
  transition: all .15s var(--ease);
}
.size-option:hover .size-option-pill {
  border-color: var(--ink-mute);
  color: var(--ink);
}
.size-option input[type="radio"]:checked + .size-option-pill {
  background: var(--amber);
  color: var(--bg);
  border-color: var(--amber);
  font-weight: 500;
}

/* ADD form & ITEMS LIST */
.ticker-add-form { padding: 14px 18px; }
.ticker-add-grid {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 12px;
  align-items: end;
}
.ticker-add-grid input {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--ink);
  font-size: 13.5px;
  font-family: var(--font-body);
}
.ticker-add-grid input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245,166,35,.15);
}
@media (max-width: 720px) {
  .ticker-add-grid { grid-template-columns: 1fr; }
}

.ticker-list {
  padding: 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.ticker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background .15s var(--ease);
}
.ticker-row:hover { background: var(--hover-bg); }
.ticker-row.is-inactive { opacity: 0.55; }

.ticker-edit-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ticker-fields {
  flex: 1;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px;
}
.ticker-fields input {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-body);
}
.ticker-fields input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 2px rgba(245,166,35,.15);
}
.ticker-active-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .ticker-fields { grid-template-columns: 1fr; }
  .ticker-edit-form { flex-wrap: wrap; }
}

/* ===== Use the CSS variables on the actual hub ticker ===== */
.ticker {
  --ticker-speed: 40s;
  --ticker-font-size: 14px;
}
.ticker-inner {
  animation-duration: var(--ticker-speed) !important;
}
.ticker-item {
  font-size: var(--ticker-font-size) !important;
}


/* ============================================================
   STEP K: Header light-mode fix + ticker color customization +
   memo eyebrow link + color picker UI
   ============================================================ */

/* ===== FIX: HEADER IN LIGHT MODE =====
   The base .header had a hardcoded dark gradient that didn't adapt to light theme,
   making the header look dark gray with illegible nav items in light mode.
   We override the gradient with cream tones to match the light body. */
[data-theme="light"] .header {
  background: linear-gradient(to bottom, rgba(247, 243, 234, .85), rgba(247, 243, 234, .55));
}
/* The is-scrolled override already exists from step D, but let's reinforce */
[data-theme="light"] .header.is-scrolled {
  background: rgba(247, 243, 234, .92);
  border-bottom-color: rgba(0, 0, 0, .08);
}

/* Make sure all header child text uses theme variables.
   The .nav a, .btn-ghost-sm, etc. already use --ink-mute / --ink, so they adapt.
   But the brand subtext small was hardcoded — make sure it uses var. */
[data-theme="light"] .brand small {
  color: var(--ink-low);
}

/* ===== HERO MEMO LINK ===== */
.hero-memo-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.hero-memo-link:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

/* ===== TICKER COLOR CUSTOMIZATION =====
   Default values. The hub will inject inline CSS variables that override these.
   Override existing ticker rules with var() fallbacks. */
.ticker {
  /* Speed/font already set by step J. Now also color vars: */
  background: var(--ticker-bg, linear-gradient(90deg, #1a1410, #0a0908 8%, #0a0908 92%, #1a1410)) !important;
  color: var(--ticker-color, var(--ink)) !important;
}
.ticker-item b {
  color: var(--ticker-label-color, var(--amber)) !important;
}

/* In light mode, default ticker stays cream-on-dark (a deliberate contrast). The user
   can override entirely via custom colors. */

/* ===== COLOR PICKER UI (admin page) ===== */
.ticker-colors-section {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.ticker-colors-section > .field-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
}
.ticker-colors-section > .field-label small {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-low);
  margin-left: 6px;
}

.ticker-colors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .ticker-colors-grid { grid-template-columns: 1fr; }
}

.color-picker-block {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: var(--subtle-bg);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.color-picker-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}
.color-picker-label small {
  font-weight: 400;
  color: var(--ink-low);
  margin-left: 4px;
}
.color-picker-row {
  display: flex; align-items: center; gap: 8px;
}
.color-input {
  width: 38px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  background: transparent;
}
.color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.color-input::-webkit-color-swatch { border-radius: 4px; border: none; }
.color-input::-moz-color-swatch { border-radius: 4px; border: none; }
.color-text {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}
.color-text:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 2px rgba(245,166,35,.15);
}
.color-clear {
  width: 28px; height: 28px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-mute);
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px; line-height: 1;
  display: grid; place-items: center;
  transition: all .15s var(--ease);
}
.color-clear:hover {
  color: #f87171;
  border-color: rgba(248,113,113,.4);
}

.color-presets {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
.color-swatch {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
  position: relative;
}
.color-swatch:hover {
  transform: scale(1.18);
  box-shadow: 0 4px 8px -2px rgba(0,0,0,.3);
  z-index: 2;
}
.color-swatch:active { transform: scale(1.05); }


/* ============================================================
   STEP L: Notification bell + panel + animations
   ============================================================ */

.notif-bell-wrap {
  position: relative;
  display: inline-block;
}

.notif-bell-btn {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--subtle-bg-2);
  color: var(--ink-mute);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all .2s var(--ease);
}
.notif-bell-btn:hover {
  color: var(--amber);
  border-color: var(--amber);
  background: var(--hover-bg);
}

/* Badge */
.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
  animation: notif-badge-in .3s var(--ease-out);
}
@keyframes notif-badge-in {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Pulse animation when count INCREASES */
.notif-bell-btn.notif-pulse {
  animation: notif-pulse 1.2s var(--ease);
}
@keyframes notif-pulse {
  0%   { transform: rotate(0); }
  10%  { transform: rotate(-12deg); }
  20%  { transform: rotate(12deg); }
  30%  { transform: rotate(-8deg); }
  40%  { transform: rotate(8deg); }
  50%  { transform: rotate(-4deg); }
  60%  { transform: rotate(4deg); }
  70%, 100% { transform: rotate(0); }
}

/* Panel */
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: 92vw;
  max-height: 480px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.6);
  z-index: 60;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: notif-panel-in .18s var(--ease-out);
}
@keyframes notif-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--subtle-bg);
}
.notif-panel-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.notif-panel-actions {
  display: flex; gap: 12px;
}
.notif-action-link {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  transition: color .15s var(--ease);
}
.notif-action-link:hover { color: var(--amber); }
.notif-action-danger:hover { color: #f87171; }

/* List */
.notif-list {
  overflow-y: auto;
  flex: 1;
}
.notif-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-low);
  font-size: 13px;
  font-style: italic;
}

/* Row */
.notif-row {
  position: relative;
  display: flex;
  border-bottom: 1px solid var(--line-soft);
  transition: background .15s var(--ease);
}
.notif-row:last-child { border-bottom: 0; }
.notif-row:hover { background: var(--hover-bg); }
.notif-row.is-unread { background: rgba(245, 166, 35, .04); }
.notif-row.is-unread::before {
  content: "";
  position: absolute;
  top: 50%; left: 4px;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
}

.notif-row-link {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 12px 16px 12px 18px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  min-width: 0;
}
.notif-row-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.notif-row-body {
  flex: 1;
  min-width: 0;
}
.notif-row-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
  word-break: break-word;
}
.notif-row.is-read .notif-row-title { font-weight: 400; color: var(--ink-mute); }
.notif-row-msg {
  font-size: 12px;
  color: var(--ink-mute);
  line-height: 1.4;
  margin-bottom: 4px;
  word-break: break-word;
}
.notif-row-time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-low);
  text-transform: uppercase;
}

.notif-row-del {
  width: 28px;
  border: 0;
  background: none;
  color: var(--ink-low);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s var(--ease), color .15s var(--ease);
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 12px;
}
.notif-row:hover .notif-row-del { opacity: 1; }
.notif-row-del:hover { color: #f87171; }

/* Mobile */
@media (max-width: 480px) {
  .notif-panel {
    width: 92vw;
    right: -50px;
  }
}


/* ============================================================
   STEP N: Multi-language UI — locale switcher + profile page
   ============================================================ */

/* Locale switcher in header */
.locale-switch {
  position: relative;
  display: inline-block;
}
.locale-switch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--subtle-bg-2);
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.locale-switch-btn:hover {
  color: var(--amber);
  border-color: var(--amber);
}
.locale-switch-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 32px -10px rgba(0,0,0,.5);
  padding: 4px;
  z-index: 60;
}
.locale-switch-menu[hidden] { display: none !important; }
.locale-switch-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--ink-mute);
  text-decoration: none;
  font-size: 13px;
  transition: background .15s, color .15s;
}
.locale-switch-item:hover {
  background: var(--hover-bg);
  color: var(--ink);
}
.locale-switch-item.is-active {
  color: var(--amber);
  background: rgba(245,166,35,.08);
}
.locale-switch-item.is-active::after {
  content: "✓";
  margin-left: auto;
}

/* Login page: locale row at bottom */
.login-locale-row {
  margin-top: 28px;
  display: flex; justify-content: center; gap: 16px;
}
.login-locale-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-low);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.login-locale-link:hover {
  color: var(--amber);
  background: var(--hover-bg);
}
.login-locale-link.is-active {
  color: var(--amber);
}

/* Profile page */
.profile-form { display: flex; flex-direction: column; gap: 0; }
.profile-section-body { padding: 16px 18px; }
.profile-pw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .profile-pw-grid { grid-template-columns: 1fr; }
}

.locale-radio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 600px) {
  .locale-radio-grid { grid-template-columns: 1fr; }
}
.locale-radio-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 2px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.locale-radio-card:hover {
  border-color: var(--ink-mute);
}
.locale-radio-card.is-active,
.locale-radio-card:has(input:checked) {
  border-color: var(--amber);
  background: rgba(245,166,35,.06);
}
.locale-radio-card input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.locale-flag { font-size: 28px; line-height: 1; }
.locale-label { display: flex; flex-direction: column; gap: 2px; }
.locale-label strong {
  font-size: 14px;
  color: var(--ink);
}
.locale-label small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-low);
}

/* Profile page — light theme */
[data-theme="light"] .locale-radio-card.is-active,
[data-theme="light"] .locale-radio-card:has(input:checked) {
  background: rgba(245,166,35,.10);
}


/* ============================================================
   STEP L hotfix: respect HTML [hidden] attribute on notif elements
   ============================================================ */
.notif-panel[hidden]  { display: none !important; }
.notif-badge[hidden]  { display: none !important; }


/* ============================================================
   Header reorder: user-pill grouped with logout (right side)
   ============================================================ */

.user-menu .user-pill {
  margin-left: 8px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.user-menu .logout-form {
  margin-left: 4px;
}

@media (max-width: 1100px) {
  .user-menu .user-name {
    display: none;
  }
}


/* ============================================================
   STEP O: Forms (Check Out / Check In) feature
   ============================================================ */

/* Section blocks on /forms */
.forms-section {
  max-width: 1100px;
  margin: 0 auto 32px;
}

.forms-section-head {
  margin-bottom: 14px;
}

.forms-section-head h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.forms-section-desc {
  color: var(--ink-mute);
  font-size: 14px;
  margin: 4px 0 0;
}

/* Card grid for "Choose a form" */
.forms-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* Single card */
.forms-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: var(--bg-card);
  border: 2px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: all .2s var(--ease);
  position: relative;
}

.forms-card-active:hover {
  border-color: var(--amber);
  background: rgba(245, 166, 35, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(245, 166, 35, 0.2);
}

.forms-card-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.forms-card-icon {
  font-size: 38px;
  line-height: 1;
  flex-shrink: 0;
}

.forms-card-body {
  flex: 1;
}

.forms-card-body h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

.forms-card-body p {
  margin: 0;
  color: var(--ink-mute);
  font-size: 13px;
  line-height: 1.5;
}

.forms-card-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-low);
  font-weight: 500;
}

.forms-card-arrow {
  font-size: 28px;
  color: var(--ink-low);
  transition: transform .2s var(--ease), color .2s var(--ease);
}

.forms-card-active:hover .forms-card-arrow {
  color: var(--amber);
  transform: translateX(4px);
}

/* List of drafts / recent submissions */
.forms-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.forms-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s var(--ease);
}

.forms-list-row:hover {
  border-color: var(--ink-mute);
}

.forms-list-row-submitted {
  background: var(--bg-soft);
}

.forms-list-row-link {
  text-decoration: none;
  color: inherit;
}

.forms-list-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.forms-list-type {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 600;
}

.forms-list-meta {
  font-size: 13px;
  color: var(--ink-mute);
}

.forms-list-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Empty states */
.forms-empty {
  padding: 24px 20px;
  text-align: center;
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--ink-mute);
}

.forms-empty p {
  margin: 0;
  font-size: 14px;
}

/* ===== FORM BUILDER (the actual check-out form) ===== */

.form-builder {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.form-section-head {
  padding: 14px 20px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}

.form-section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.form-section-body {
  padding: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field-full {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.field-required {
  color: var(--amber);
  font-weight: 700;
}

.form-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}

.form-select:focus {
  outline: none;
  border-color: var(--amber);
}

/* Sticky action bar */
.form-actions-sticky {
  position: sticky;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4);
  flex-wrap: wrap;
}

.form-actions-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

@media (max-width: 600px) {
  .form-actions-sticky {
    flex-direction: column;
    align-items: stretch;
  }
  .form-actions-right {
    flex-direction: column;
    width: 100%;
  }
  .form-actions-right .btn-primary,
  .form-actions-right .btn-secondary {
    width: 100%;
  }
}

/* Errors block */
.form-errors {
  max-width: 900px;
  margin: 0 auto 16px;
  padding: 14px 18px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.form-errors strong {
  font-size: 18px;
  line-height: 1;
}

.form-errors ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 13px;
}

/* ===== READ-ONLY (show.blade.php) ===== */

.form-readonly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

.form-readonly-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field-label-sm {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-low);
  font-weight: 500;
}

.field-value {
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}

/* Status badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge-draft {
  background: rgba(150, 150, 150, 0.15);
  color: var(--ink-mute);
  border: 1px solid var(--line);
}

.status-badge-submitted {
  background: rgba(34, 197, 94, 0.15);
  color: rgb(74, 222, 128);
  border: 1px solid rgba(34, 197, 94, 0.4);
}

/* ===== FILTER BAR (submissions admin) ===== */

.forms-filter-bar {
  max-width: 1100px;
  margin: 0 auto 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.form-search-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
}

.form-search-input:focus {
  outline: none;
  border-color: var(--amber);
}

.forms-pagination {
  max-width: 1100px;
  margin: 24px auto 0;
  display: flex;
  justify-content: center;
}


/* ============================================================
   STEP O.2: Vehicle inspection — drawing canvas + signature pad
   ============================================================ */

/* Theme variables for SVG (reuses Action Hub palette) */
:root {
  --vh-stroke: #1a1a1a;
  --vh-fill:   #ffffff;
  --vh-glass:  rgba(100, 140, 180, 0.08);
  --vh-label:  #888;
}
[data-theme="dark"] {
  --vh-stroke: #faf7f0;
  --vh-fill:   #1c1b18;
  --vh-glass:  rgba(180, 200, 230, 0.06);
  --vh-label:  #6c6968;
}

/* Instruction banner */
.inspection-instructions {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.3);
  border-radius: 10px;
  margin: 16px 0;
}

.inspection-instructions-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.inspection-instructions p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}

/* Toolbar above the diagram */
.inspection-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  flex-wrap: wrap;
}

.inspection-toolbar-left,
.inspection-toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mark-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}

.mark-counter strong {
  color: var(--amber);
  font-size: 14px;
  font-weight: 600;
}

.mark-counter-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff2d2d;
  box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.2);
}

/* Canvas container — vehicle SVG + drawable canvas overlay */
.inspection-canvas-wrap {
  position: relative;
  width: 100%;
  background: var(--vh-fill);
  border: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  /* Maintain aspect ratio of vehicle photos (1200:800 = 1.5) */
  aspect-ratio: 3 / 2;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* Disable browser pan/zoom on touch over the canvas */
}

.vehicle-svg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none; /* SVG underneath should not capture pointer events */
}

.vehicle-svg-container.is-active {
  display: block;
}

.vehicle-svg-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* The drawable canvas overlaid on top */
.damage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  z-index: 2;
}

/* Placeholder hint visible when canvas is empty */
.canvas-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-low);
  text-transform: uppercase;
}

.canvas-placeholder-damage {
  bottom: auto;
  top: 16px;
  left: auto;
  right: 16px;
  background: var(--bg-card);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  align-items: flex-start;
  font-size: 11px;
}

/* ===== SIGNATURE PAD ===== */

.signature-instructions {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
}

.signature-pad-wrap {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 200px;
  background: var(--bg-card);
  border: 2px dashed var(--line);
  border-radius: 12px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.signature-canvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
  display: block;
}

.canvas-placeholder-signature {
  font-size: 18px;
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
}

.signature-clear-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-mute);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  z-index: 4;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}

.signature-clear-btn:hover {
  color: rgb(220, 38, 38);
  border-color: rgba(220, 38, 38, 0.4);
}

/* ===== READ-ONLY DISPLAY (show.blade.php) ===== */

.inspection-readonly-wrap {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: var(--vh-fill);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.inspection-readonly-wrap .vehicle-svg-container {
  display: block;
  width: 100%;
  height: 100%;
}

.damage-readonly-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.signature-readonly-wrap {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.signature-readonly-img {
  width: 100%;
  max-width: 480px;
  height: auto;
  background: #fff;
  border-radius: 4px;
  display: block;
  margin: 0 auto 6px;
}

.signature-readonly-line {
  height: 1px;
  background: var(--ink);
  margin: 0 auto 6px;
}

.signature-readonly-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-low);
}

/* ===== Mobile adjustments ===== */
@media (max-width: 600px) {
  .inspection-toolbar {
    padding: 10px;
  }
  .canvas-placeholder-damage {
    top: 8px;
    right: 8px;
    padding: 6px 10px;
    font-size: 10px;
  }
  .signature-pad-wrap {
    height: 160px;
  }
}


/* ============================================================
   STEP O.3: Manager panel (prominent "View all submissions")
   ============================================================ */

.forms-manager-section {
  max-width: 1100px;
  margin: 0 auto 32px;
}

.forms-manager-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.12), rgba(245, 166, 35, 0.04));
  border: 2px solid rgba(245, 166, 35, 0.35);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

.forms-manager-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--amber);
}

.forms-manager-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--bg-card);
  border: 1.5px solid var(--amber);
  border-radius: 12px;
  color: var(--amber);
  flex-shrink: 0;
}

.forms-manager-card-body {
  flex: 1;
  min-width: 0;
}

.forms-manager-card-body .eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 600;
  margin-bottom: 4px;
}

.forms-manager-card-body h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

.forms-manager-card-body p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-mute);
}

.forms-manager-card-actions {
  flex-shrink: 0;
}

.forms-manager-card-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Mobile: stack vertically */
@media (max-width: 700px) {
  .forms-manager-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
  }
  .forms-manager-card-actions {
    grid-column: 1 / -1;
  }
  .forms-manager-card-actions .btn-primary {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   STEP O.4: Photo upload + print styles
   ============================================================ */

/* === PHOTO UPLOAD (in check-out form) === */

.form-section-desc {
  margin: 0 0 14px;
  color: var(--ink-mute);
  font-size: 13px;
  line-height: 1.5;
}

.photo-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 200px));
  gap: 14px;
  margin-bottom: 12px;
}

.photo-slot {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.photo-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-soft);
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-preview.is-empty {
  flex-direction: column;
  gap: 8px;
}

.photo-placeholder-icon {
  font-size: 24px;
  opacity: 0.4;
}

.photo-placeholder-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-low);
}

.photo-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(220, 38, 38, 0.92);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: background .15s var(--ease);
  z-index: 2;
}

.photo-remove-btn:hover {
  background: rgb(220, 38, 38);
}

.photo-file-input {
  display: none;
}

.photo-file-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
  text-align: center;
}

.photo-file-label:hover {
  border-color: var(--amber);
  background: rgba(245, 166, 35, 0.04);
}

.photo-hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink-low);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* === PHOTO READ-ONLY GRID (on show page) === */

.photo-readonly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.photo-readonly-item {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .15s var(--ease);
}

.photo-readonly-item:hover {
  transform: scale(1.01);
  border-color: var(--amber);
}

.photo-readonly-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === PRINT STYLES === */

@media print {
  /* Hide non-essential UI when printing */
  .header,
  .grain,
  .no-print,
  .sched-actions button,
  .flash-status,
  .signature-clear-btn,
  .inspection-toolbar,
  script {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .sched-main {
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Force light styling for printing */
  .form-section,
  .form-section-head,
  .inspection-canvas-wrap,
  .signature-pad-wrap,
  .photo-readonly-item {
    background: white !important;
    border-color: #ccc !important;
    color: black !important;
    page-break-inside: avoid;
  }

  .form-section-head h2 {
    color: black !important;
  }

  .field-value,
  .field-label-sm,
  .v-label {
    color: black !important;
  }

  /* Make sure vehicle SVG renders well */
  .vehicle-svg-container svg {
    --vh-stroke: black !important;
    --vh-fill: white !important;
    --vh-label: #666 !important;
  }

  /* Status badge subtle on print */
  .status-badge {
    background: white !important;
    border: 1px solid #999 !important;
    color: black !important;
  }

  /* Signature stays visible on print */
  .signature-readonly-img,
  .damage-readonly-overlay {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}


/* ============================================================
   STEP O.5: Vehicle photo background + compact form layout
   ============================================================ */

/* Vehicle picker (above canvas) */
.inspection-vehicle-picker {
  margin-bottom: 14px;
}

/* The vehicle PHOTO that replaces the SVG diagram */
.vehicle-photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* For read-only display (show.blade.php), let the image be contain-fitted */
.inspection-readonly-wrap .vehicle-photo-bg {
  object-fit: cover;
}

/* Compact form sections (reduce vertical padding) */
.form-section-body {
  padding: 16px 18px;
}

.form-section-head {
  padding: 12px 18px;
}

.form-section-head h2 {
  font-size: 15px;
}

/* Tighter form spacing */
.form-builder {
  gap: 14px;
}

.form-grid {
  gap: 14px;
}

/* Photo hint smaller too */
.photo-hint {
  font-size: 11px;
  margin-top: -4px;
}

/* Compact instructions banner */
.inspection-instructions {
  padding: 10px 14px;
  margin: 10px 0;
  gap: 10px;
}

.inspection-instructions-icon {
  font-size: 14px;
}

.inspection-instructions p {
  font-size: 12px;
  line-height: 1.5;
}

/* Print: ensure vehicle photo prints */
@media print {
  .vehicle-photo-bg {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  /* Backgrounds for printing - the photos need a light background */
  .inspection-readonly-wrap {
    background: white !important;
  }
}