/* =====================================================
   BTB BUILDING LIVE — COMPLETE STYLESHEET
   Dark industrial theme | Mobile-first | Marathi+EN
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --bg:     #0d0f14;
  --card:   #161922;
  --inp:    #1e2330;
  --bdr:    #2a3045;
  --txt:    #e8eaf0;
  --muted:  #6b7a99;
  --dim:    #3d4a63;

  --red:    #ff3b3b; --red-d:    #3d0f0f;
  --orange: #ff8c00; --orange-d: #3d2200;
  --yellow: #f5c518; --yellow-d: #2e2500;
  --green:  #00d084; --green-d:  #002e1e;
  --blue:   #3b82f6; --blue-d:   #0d1e3d;

  --r: 12px; --rl: 18px;
  --font: 'Rajdhani', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg); color: var(--txt); font-family: var(--font); min-height: 100vh; }
.hidden { display: none !important; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 3px; }

/* ── ALERTS ───────────────────────────────────── */
.alert-err { background: var(--red-d);   border:1px solid var(--red);   color:var(--red);   padding:.8rem 1rem; border-radius:var(--r); margin-bottom:1rem; font-weight:600; }
.alert-ok  { background: var(--green-d); border:1px solid var(--green); color:var(--green); padding:.8rem 1rem; border-radius:var(--r); margin-bottom:1rem; font-weight:600; }

/* ── SHIFT COLORS ─────────────────────────────── */
.s1 { background:linear-gradient(90deg,#3d2200,#1a0f00); border-color:var(--orange)!important; }
.s2 { background:linear-gradient(90deg,#0d1e3d,#060e1f); border-color:var(--blue)!important;   }
.s3 { background:linear-gradient(90deg,#002e1e,#001a10); border-color:var(--green)!important;  }

/* ════════════════════════════════════════════════
   LOGIN
   ════════════════════════════════════════════════ */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh;
  background: radial-gradient(ellipse at top, #1a2040 0%, var(--bg) 70%); padding:0; flex-direction:column; }

.login-wrap { width:100%; max-width:480px; display:flex; flex-direction:column; }

.login-shift-bar { width:100%; text-align:center; padding:1rem; border-bottom:3px solid; }
.lsb-title { display:block; font-size:clamp(1.2rem,4vw,1.8rem); font-weight:800; letter-spacing:3px; text-transform:uppercase; color:#fff; }
.lsb-clock { display:block; font-family:var(--mono); font-size:.9rem; color:rgba(255,255,255,.5); margin-top:.2rem; letter-spacing:2px; }

.login-box { background:var(--card); border:1px solid var(--bdr); border-top:none;
  border-radius:0 0 var(--rl) var(--rl); padding:2rem 1.5rem; }

.login-brand { text-align:center; margin-bottom:1.5rem; }
.brand-icon { font-size:3rem; display:block; margin-bottom:.4rem; filter:drop-shadow(0 0 16px rgba(59,130,246,.4)); }
.login-brand h1 { font-size:1.7rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.login-brand p  { color:var(--muted); font-size:.85rem; }

.lstep-head { display:flex; align-items:center; gap:.6rem; font-size:.8rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:700; margin-bottom:.9rem; }
.lnum { width:22px; height:22px; background:var(--blue); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:800; flex-shrink:0; }

.mgrp-label { font-size:.7rem; text-transform:uppercase; letter-spacing:2px; color:var(--dim); font-weight:700; margin:.9rem 0 .4rem; }
.mgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; margin-bottom:.25rem; }
.mbtn { background:var(--inp); border:1.5px solid var(--bdr); border-radius:8px; padding:.5rem .25rem;
  font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--muted); cursor:pointer; text-align:center; transition:all .15s; }
.mbtn:hover { border-color:var(--blue); color:var(--txt); background:var(--blue-d); }
.mbtn.sel   { border-color:var(--green); background:var(--green-d); color:var(--green); }

.btn-next { width:100%; margin-top:1rem; background:linear-gradient(135deg,var(--blue),#6366f1); color:#fff; border:none; border-radius:var(--r); padding:.85rem; font-size:1rem; font-weight:700; font-family:var(--font); letter-spacing:1px; cursor:pointer; transition:opacity .2s; }
.btn-next:disabled { opacity:.35; cursor:not-allowed; }
.btn-next:not(:disabled):hover { opacity:.88; }

.sel-machine-bar { display:flex; align-items:center; gap:.6rem; background:var(--green-d); border:1.5px solid var(--green); border-radius:var(--r); padding:.6rem .9rem; font-size:.95rem; font-weight:700; color:var(--green); margin-bottom:1rem; }
.btn-chg { margin-left:auto; background:transparent; border:1px solid var(--green); color:var(--green); border-radius:6px; padding:.2rem .6rem; font-size:.75rem; font-weight:700; font-family:var(--font); cursor:pointer; }

.lfield { margin-bottom:1rem; }
.lfield label { display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:700; margin-bottom:.35rem; }
.lfield input { width:100%; background:var(--inp); border:1.5px solid var(--bdr); border-radius:var(--r); padding:.8rem 1rem; color:var(--txt); font-family:var(--font); font-size:1rem; outline:none; transition:border-color .2s; }
.lfield input:focus { border-color:var(--blue); }

.btn-login { width:100%; background:linear-gradient(135deg,var(--green),#00a86b); color:#000; border:none; border-radius:var(--r); padding:1rem; font-size:1.1rem; font-weight:800; font-family:var(--font); letter-spacing:1px; cursor:pointer; margin-bottom:.6rem; transition:opacity .2s; }
.btn-login:hover { opacity:.9; }
.btn-back  { width:100%; background:transparent; border:1px solid var(--bdr); color:var(--muted); border-radius:var(--r); padding:.7rem; font-size:.9rem; font-family:var(--font); cursor:pointer; }

/* ════════════════════════════════════════════════
   OPERATOR
   ════════════════════════════════════════════════ */
.op-body { min-height:100vh; }

.op-shift-bar { width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:.65rem 1rem; border-bottom:3px solid; }
.osb-title { font-size:clamp(.9rem,3vw,1.3rem); font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#fff; }
.osb-clock { font-family:var(--mono); font-size:.82rem; color:rgba(255,255,255,.5); letter-spacing:1px; }

.op-hdr { display:flex; align-items:center; justify-content:space-between; background:var(--card); border-bottom:2px solid var(--bdr); padding:.7rem 1rem; }
.op-hdr-left { display:flex; align-items:center; gap:.75rem; }
.mach-badge { background:linear-gradient(135deg,var(--blue),#6366f1); color:#fff; font-family:var(--mono); font-size:1rem; font-weight:700; padding:.35rem .8rem; border-radius:8px; letter-spacing:1px; }
.op-name { font-size:.88rem; font-weight:600; color:var(--txt); }
.btn-out { background:var(--red-d); color:var(--red); border:1px solid var(--red); border-radius:8px; padding:.35rem .8rem; font-size:.8rem; font-weight:700; text-decoration:none; font-family:var(--font); }

.flash { position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:200;
  padding:.9rem 1.8rem; border-radius:var(--r); font-size:1rem; font-weight:700; white-space:nowrap; box-shadow:0 4px 20px rgba(0,0,0,.4); animation:slideDown .3s ease; }
.flash.success { background:var(--green-d); border:2px solid var(--green); color:var(--green); }
.flash.error   { background:var(--red-d);   border:2px solid var(--red);   color:var(--red);   }
@keyframes slideDown { from{transform:translateX(-50%) translateY(-16px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }

.op-main { padding:1rem; max-width:680px; margin:0 auto; }
.op-sec  { animation:fadeIn .25s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.sec-title { font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:.9rem; padding-bottom:.5rem; border-bottom:1px solid var(--bdr); }

.shift-pill { display:inline-flex; align-items:center; border:1px solid; border-radius:20px; padding:.25rem .9rem; font-size:.8rem; font-weight:700; cursor:pointer; margin-bottom:.75rem; }
.shift-pill.s1 { background:var(--orange-d); color:var(--orange); border-color:var(--orange); }
.shift-pill.s2 { background:var(--blue-d);   color:var(--blue);   border-color:var(--blue);   }
.shift-pill.s3 { background:var(--green-d);  color:var(--green);  border-color:var(--green);  }

.cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.cat-btn  { background:var(--card); border:2px solid var(--bdr); border-radius:var(--r); padding:1.1rem .75rem; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.45rem; color:var(--txt); font-family:var(--font); min-height:90px; transition:all .15s; }
.cat-btn:hover,.cat-btn.active { border-color:var(--blue); background:var(--blue-d); transform:translateY(-2px); }
.cat-ico { font-size:1.9rem; }
.cat-lbl { font-size:.85rem; font-weight:700; text-align:center; text-transform:uppercase; letter-spacing:.5px; }

.shift-row-btn { width:100%; background:var(--card); border:2px solid var(--bdr); border-radius:var(--r); padding:.9rem 1rem; cursor:pointer; display:flex; align-items:center; gap:1rem; color:var(--txt); font-family:var(--font); margin-bottom:.6rem; transition:all .15s; }
.shift-row-btn:hover,.shift-row-btn.active { border-color:var(--blue); background:var(--blue-d); }
.srb-num { font-size:1.1rem; font-weight:800; font-family:var(--mono); min-width:60px; }
.srb-lbl { flex:1; font-size:.9rem; color:var(--muted); }
.srb-cur { background:var(--green); color:#000; padding:.12rem .55rem; border-radius:20px; font-size:.72rem; font-weight:700; }
.btn-confirm-shift { width:100%; background:var(--blue-d); border:1.5px solid var(--blue); color:var(--blue); border-radius:var(--r); padding:.75rem; font-size:1rem; font-weight:700; font-family:var(--font); cursor:pointer; margin-top:.5rem; transition:all .15s; }
.btn-confirm-shift:hover { background:var(--blue); color:#fff; }

.prob-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.75rem; }
.prob-btn  { background:var(--card); border:2px solid var(--bdr); border-radius:var(--r); padding:1rem .7rem; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.35rem; color:var(--txt); font-family:var(--font); min-height:88px; transition:all .15s; }
.prob-btn:active { transform:scale(.97); }
.prob-btn.c-red:hover,.prob-btn.c-red.active    { border-color:var(--red);    background:var(--red-d);    }
.prob-btn.c-orange:hover,.prob-btn.c-orange.active { border-color:var(--orange); background:var(--orange-d); }
.prob-btn.c-yellow:hover,.prob-btn.c-yellow.active { border-color:var(--yellow); background:var(--yellow-d); }
.prob-btn.c-green:hover,.prob-btn.c-green.active  { border-color:var(--green);  background:var(--green-d);  }
.p-ico  { font-size:1.7rem; }
.p-name { font-size:.78rem; font-weight:700; text-align:center; line-height:1.2; }
.p-mr   { font-size:.72rem; color:var(--muted); text-align:center; }

.btn-back-sm { background:transparent; border:1px solid var(--bdr); border-radius:8px; padding:.35rem .9rem; color:var(--muted); font-family:var(--font); font-size:.85rem; cursor:pointer; margin-bottom:.75rem; display:inline-block; transition:all .15s; }
.btn-back-sm:hover { border-color:var(--muted); color:var(--txt); }

.img-req-badge { background:var(--red-d); border:1px solid var(--red); color:var(--red); padding:.5rem 1rem; border-radius:8px; font-weight:700; font-size:.9rem; text-align:center; margin-bottom:.75rem; }
.img-upload-box { display:block; cursor:pointer; width:100%; }
.img-upload-box input { display:none; }
.img-placeholder { background:var(--card); border:2px dashed var(--bdr); border-radius:var(--rl); height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; color:var(--muted); font-size:.9rem; text-align:center; transition:border-color .2s; }
.img-placeholder:hover { border-color:var(--blue); }
.btn-skip { display:block; width:100%; margin-top:.75rem; background:transparent; border:1px solid var(--bdr); color:var(--muted); border-radius:var(--r); padding:.65rem; font-size:.9rem; font-family:var(--font); cursor:pointer; transition:all .15s; }
.btn-skip:hover { border-color:var(--muted); color:var(--txt); }

.summary-card { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r); padding:1rem; margin-bottom:1rem; }
.sum-row { display:flex; justify-content:space-between; padding:.45rem 0; border-bottom:1px solid var(--bdr); font-size:.95rem; }
.sum-row:last-child { border-bottom:none; }
.sum-row span { color:var(--muted); }
.sum-row b { color:var(--txt); font-weight:700; }

.remark-wrap { margin-bottom:1rem; }
.remark-wrap label { display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:700; margin-bottom:.35rem; }
.remark-wrap textarea { width:100%; background:var(--inp); border:1.5px solid var(--bdr); border-radius:var(--r); padding:.7rem 1rem; color:var(--txt); font-family:var(--font); font-size:1rem; resize:vertical; outline:none; transition:border-color .2s; }
.remark-wrap textarea:focus { border-color:var(--blue); }

.btn-submit { width:100%; background:linear-gradient(135deg,var(--green),#00a86b); color:#000; border:none; border-radius:var(--r); padding:1.05rem; font-size:1.15rem; font-weight:800; font-family:var(--font); letter-spacing:1px; cursor:pointer; text-transform:uppercase; transition:opacity .2s; box-shadow:0 4px 20px rgba(0,208,132,.22); }
.btn-submit:hover { opacity:.9; }
.btn-submit:disabled { opacity:.5; cursor:not-allowed; }

/* Food modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.75); display:flex; align-items:center; justify-content:center; z-index:300; padding:1rem; }
.modal-box { background:var(--card); border:1px solid var(--bdr); border-radius:var(--rl); padding:1.5rem; max-width:400px; width:100%; }
.modal-box h3 { font-size:1.1rem; font-weight:700; margin-bottom:1rem; }
.food-row { margin-bottom:.9rem; }
.food-row label { display:block; color:var(--muted); font-size:.85rem; margin-bottom:.3rem; }
.stars { display:flex; gap:.3rem; }
.star  { font-size:1.7rem; cursor:pointer; opacity:.3; transition:opacity .15s; }

/* ════════════════════════════════════════════════
   DASHBOARD
   ════════════════════════════════════════════════ */
.dash-body { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar { width:210px; min-height:100vh; background:var(--card); border-right:1px solid var(--bdr); display:flex; flex-direction:column; position:fixed; left:0; top:0; bottom:0; z-index:50; }
.sb-logo { display:flex; align-items:center; gap:.75rem; padding:1.3rem 1.1rem; border-bottom:1px solid var(--bdr); font-size:.85rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; line-height:1.2; }
.sb-logo span:first-child { font-size:1.7rem; }
.sb-nav { flex:1; padding:.9rem .6rem; display:flex; flex-direction:column; gap:.3rem; }
.sbn { display:block; padding:.6rem .85rem; border-radius:var(--r); color:var(--muted); text-decoration:none; font-size:.88rem; font-weight:600; transition:all .15s; }
.sbn:hover { background:var(--inp); color:var(--txt); }
.sbn.active { background:var(--blue-d); color:var(--blue); border:1px solid rgba(59,130,246,.3); }
.sb-foot { padding:.9rem; border-top:1px solid var(--bdr); }
.sb-admin { background:var(--orange-d); color:var(--orange); padding:.25rem .7rem; border-radius:20px; font-size:.72rem; font-weight:700; text-align:center; margin-bottom:.5rem; }
.sb-logout { display:block; text-align:center; color:var(--muted); text-decoration:none; font-size:.82rem; padding:.35rem; }
.sb-logout:hover { color:var(--red); }

.dash-main { margin-left:210px; flex:1; padding:1.25rem; min-height:100vh; }

/* Shift banner */
.dash-shift-banner { border-radius:var(--rl); padding:1rem 1.4rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; border:2px solid; margin-bottom:1.1rem; }
.dsb-title { font-size:clamp(1.2rem,2.5vw,1.9rem); font-weight:800; letter-spacing:3px; text-transform:uppercase; color:#fff; }
.dsb-right { display:flex; align-items:center; gap:.75rem; }
.live-pill { background:var(--green-d); color:var(--green); padding:.15rem .65rem; border-radius:20px; font-size:.72rem; font-weight:700; animation:blink 2s infinite; }
@keyframes blink{0%,100%{opacity:1}50%{opacity:.5}}
.dsb-clock { font-family:var(--mono); font-size:.82rem; color:var(--muted); }

/* Filters */
.filters-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; flex-wrap:wrap; gap:.75rem; }
.fb-left .dash-sub { font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.fb-right { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.fb-right select { background:var(--card); border:1px solid var(--bdr); border-radius:8px; padding:.38rem .7rem; color:var(--txt); font-family:var(--font); font-size:.85rem; outline:none; cursor:pointer; }
.fb-right select:focus { border-color:var(--blue); }
.btn-exp { background:var(--green-d); color:var(--green); border:1px solid var(--green); border-radius:8px; padding:.38rem .85rem; font-family:var(--font); font-size:.82rem; font-weight:700; cursor:pointer; text-decoration:none; transition:all .15s; }
.btn-exp:hover { background:var(--green); color:#000; }

/* Stat cards */
.stat-row { display:grid; grid-template-columns:repeat(5,1fr); gap:.9rem; margin-bottom:1.2rem; }
.stat-card { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r); padding:1.1rem; text-align:center; }
.sc-red    { border-color:#3d1a1a; }
.sc-orange { border-color:#3d2500; }
.sc-yellow { border-color:#2e2800; }
.sc-green  { border-color:#003d24; }
.sc-icon { font-size:1.6rem; margin-bottom:.3rem; }
.sc-num  { font-size:2rem; font-weight:800; font-family:var(--mono); line-height:1; margin-bottom:.2rem; }
.sc-lbl  { font-size:.7rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:600; }

/* 3-Column machine grid */
.mach-3col { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }
.mcol { background:var(--card); border:1px solid var(--bdr); border-radius:var(--rl); overflow:hidden; }
.mcol-head { padding:.6rem 1rem; font-size:.75rem; text-transform:uppercase; letter-spacing:2px; font-weight:800; border-bottom:2px solid; }
.vmi-head { background:var(--blue-d);   color:var(--blue);   border-color:var(--blue);   }
.r3-head  { background:var(--orange-d); color:var(--orange); border-color:var(--orange); }
.mn-head  { background:var(--green-d);  color:var(--green);  border-color:var(--green);  }

.mcard { display:flex; align-items:center; gap:.6rem; padding:.55rem .9rem; border-bottom:1px solid var(--bdr); transition:background .15s; }
.mcard:last-child { border-bottom:none; }
.mc-name { font-family:var(--mono); font-size:.85rem; font-weight:700; min-width:70px; }
.mc-stat { flex:1; font-size:.78rem; font-weight:600; }
.mc-cnt  { font-size:.7rem; color:var(--muted); white-space:nowrap; }
.mok   { }
.mwarn { background:var(--orange-d); border-left:3px solid var(--orange); }
.mcrit { background:var(--red-d);    border-left:3px solid var(--red); animation:pulse 2s infinite; }
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}50%{box-shadow:0 0 0 4px rgba(255,59,59,.2)}}

/* Issues table */
.tbl-wrap-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:.65rem; }
.sec-h2 { font-size:.95rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.tbl-wrap { overflow-x:auto; border-radius:var(--r); border:1px solid var(--bdr); }
.itbl { width:100%; border-collapse:collapse; font-size:.85rem; }
.itbl thead th { background:var(--inp); padding:.65rem .9rem; text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:700; white-space:nowrap; border-bottom:1px solid var(--bdr); }
.itbl tbody tr { border-bottom:1px solid var(--bdr); transition:background .1s; }
.itbl tbody tr:hover { background:var(--inp); }
.itbl tbody tr:last-child { border-bottom:none; }
.itbl td { padding:.6rem .9rem; vertical-align:middle; }
.tbl-empty { text-align:center; padding:2rem; color:var(--muted); }
.row-red    { border-left:3px solid var(--red)!important; }
.row-orange { border-left:3px solid var(--orange)!important; }
.row-yellow { border-left:3px solid var(--yellow)!important; }
.row-green  { border-left:3px solid var(--green)!important; }

.shift-pill { background:var(--blue-d); color:var(--blue); padding:.12rem .5rem; border-radius:20px; font-size:.72rem; font-weight:700; }
.cat-pill { padding:.15rem .55rem; border-radius:20px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.cp-red    { background:var(--red-d);    color:var(--red);    }
.cp-orange { background:var(--orange-d); color:var(--orange); }
.cp-yellow { background:var(--yellow-d); color:var(--yellow); }
.cp-green  { background:var(--green-d);  color:var(--green);  }

.img-lnk { color:var(--blue); text-decoration:none; font-size:1.1rem; }
.btn-detail { background:var(--blue-d); color:var(--blue); border:1px solid var(--blue); border-radius:6px; padding:.22rem .65rem; font-size:.75rem; font-weight:700; cursor:pointer; transition:all .15s; font-family:var(--font); }
.btn-detail:hover { background:var(--blue); color:#fff; }

/* Issue detail modal */
.modal-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; border-bottom:1px solid var(--bdr); padding-bottom:.75rem; }
.modal-hdr h3 { font-size:1.1rem; font-weight:700; }
.modal-close { background:var(--red-d); color:var(--red); border:1px solid var(--red); border-radius:6px; padding:.2rem .6rem; cursor:pointer; font-size:.85rem; font-family:var(--font); }
.modal-body { display:flex; flex-direction:column; gap:.1rem; }
.det-row { display:flex; justify-content:space-between; padding:.45rem 0; border-bottom:1px solid var(--bdr); font-size:.92rem; }
.det-row:last-child { border-bottom:none; }
.det-row span { color:var(--muted); }
.det-row b { color:var(--txt); font-weight:700; text-align:right; max-width:60%; }

/* ── USER MANAGEMENT ──────────────────────────── */
.tabs { display:flex; gap:.45rem; margin-bottom:1rem; border-bottom:2px solid var(--bdr); padding-bottom:.5rem; }
.tab  { background:transparent; border:1.5px solid var(--bdr); border-radius:var(--r) var(--r) 0 0; padding:.5rem 1rem; color:var(--muted); font-family:var(--font); font-size:.88rem; font-weight:700; cursor:pointer; transition:all .15s; }
.tab:hover  { background:var(--inp); color:var(--txt); }
.tab.active { background:var(--blue-d); color:var(--blue); border-color:var(--blue); }
.tab-panel  { animation:fadeIn .25s ease; }

.form-card { background:var(--card); border:1px solid var(--bdr); border-radius:var(--r); padding:1.4rem; margin-bottom:1rem; }
.form-card h3 { font-size:.95rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:1rem; }
.frow { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:.8rem; }
.fg   { flex:1; min-width:150px; }
.fg label { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:700; margin-bottom:.3rem; }
.fg input,.fg select { width:100%; background:var(--inp); border:1.5px solid var(--bdr); border-radius:8px; padding:.58rem .85rem; color:var(--txt); font-family:var(--font); font-size:.95rem; outline:none; transition:border-color .2s; }
.fg input:focus,.fg select:focus { border-color:var(--blue); }

.required-star { color:var(--red); }
.csv-info { background:var(--inp); border:1px solid var(--bdr); border-radius:var(--r); padding:1rem; margin-bottom:.75rem; font-size:.88rem; }
.csv-info code { display:block; background:var(--bg); padding:.35rem .7rem; border-radius:6px; font-family:var(--mono); font-size:.82rem; color:var(--green); margin:.35rem 0; }
.csv-info pre  { background:var(--bg); border-radius:6px; padding:.55rem .85rem; font-family:var(--mono); font-size:.78rem; color:var(--muted); overflow-x:auto; margin-top:.3rem; }
.csv-inp { display:block; width:100%; background:var(--inp); border:2px dashed var(--bdr); border-radius:var(--r); padding:.9rem; color:var(--muted); cursor:pointer; font-family:var(--font); }
.csv-inp:hover { border-color:var(--blue); }

.inp-inline { background:var(--inp); border:1.5px solid var(--blue); border-radius:6px; padding:.28rem .6rem; color:var(--txt); font-family:var(--font); font-size:.83rem; width:130px; outline:none; }
.btn-edit-p { background:var(--blue-d);  color:var(--blue);  border:1px solid var(--blue);  border-radius:6px; padding:.22rem .62rem; font-size:.78rem; font-weight:700; font-family:var(--font); cursor:pointer; }
.btn-sv     { background:var(--green-d); color:var(--green); border:1px solid var(--green); border-radius:6px; padding:.22rem .55rem; font-size:.82rem; font-weight:700; cursor:pointer; }
.btn-cx     { background:transparent;    color:var(--muted); border:1px solid var(--bdr);   border-radius:6px; padding:.22rem .55rem; font-size:.82rem; cursor:pointer; }
.btn-del    { background:var(--red-d);   color:var(--red);   border:1px solid var(--red);   border-radius:6px; padding:.22rem .65rem; font-size:.78rem; font-weight:700; font-family:var(--font); cursor:pointer; }
.btn-del:hover { background:var(--red); color:#fff; }

/* ── RESPONSIVE ───────────────────────────────── */
@media(max-width:900px){
  .sidebar { display:none; }
  .dash-main { margin-left:0; }
  .stat-row { grid-template-columns:repeat(3,1fr); }
  .mach-3col { grid-template-columns:1fr; }
  .filters-bar { flex-direction:column; align-items:flex-start; }
}
@media(max-width:600px){
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .cat-grid,.prob-grid { grid-template-columns:1fr; }
  .mgrid { grid-template-columns:repeat(3,1fr); }
}

/* Clock No. pill */
.clock-pill { background:var(--yellow-d,#2e2500); color:var(--yellow,#f5c518); border:1px solid rgba(245,197,24,.3); border-radius:6px; padding:.15rem .6rem; font-family:var(--mono); font-size:.82rem; font-weight:700; }
.clock-bar  { display:flex; align-items:center; gap:.6rem; background:var(--yellow-d,#2e2500); border:1.5px solid var(--yellow,#f5c518); border-radius:var(--r); padding:.55rem .9rem; font-size:.92rem; font-weight:700; color:var(--yellow,#f5c518); margin-bottom:.9rem; }
.required-star { color:var(--red,#ff3b3b); }