:root{
  --bg:#07101d; --panel:#101b2d; --panel2:#17243a; --line:#30415a; --line2:#2b4f73;
  --text:#f4f7fb; --muted:#a9bad2; --blue:#2f80ed; --steel:#4aa3ff; --green:#27c35a;
  --yellow:#f3d21b; --orange:#ff8a1f; --red:#ef4444; --field:#081322;
  --c1:#4aa3ff; --c2:#f3d21b; --c3:#27c35a; --c4:#ff8a1f; --c5:#a98cff; --c6:#68adff; --c7:#ff6b6b; --c8:#2ecc71;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;color:var(--text);min-height:100vh;
  background:radial-gradient(circle at 50% -10%, #17345a 0, #07101d 55%) fixed;}
a{color:var(--steel)}

/* Topbar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding:14px 22px;background:#050b14;border-bottom:1px solid var(--line);}
.brand-group{display:flex;align-items:center;gap:14px}
.brand-logo{width:52px;height:52px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--steel),var(--blue));display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:24px;color:#06152a;box-shadow:0 6px 18px rgba(0,0,0,.45);letter-spacing:1px;}
.topbar h1{margin:0;font-size:1.3rem;letter-spacing:.4px}
.topbar p{margin:4px 0 0;color:var(--muted);font-size:.85rem}
.top-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.who{color:#cfe0f5;font-size:.85rem;font-weight:700;margin-right:2px}
.who b{color:#fff}
.link-button{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:9px 14px;font-weight:800;
  cursor:pointer;text-decoration:none;font-size:.88rem;font-family:inherit;display:inline-flex;align-items:center;
  gap:7px;transition:filter .12s,border-color .12s;}
.link-button:hover{filter:brightness(1.1)}
.secondary-link{background:#123a5a;color:#9fd0ff;border:1px solid var(--line2)}
.secondary-link:hover{border-color:var(--steel);color:#fff}
.danger-link{background:#3a1414;color:#ff8f8f;border:1px solid #6b2020}

/* Tabs */
nav.tabs{display:flex;gap:8px;padding:12px 22px 0;flex-wrap:wrap;background:#050b1466;border-bottom:1px solid var(--line);}
.tab{appearance:none;border:1px solid var(--line);background:#0d1b2c88;color:#cfe0f5;padding:9px 18px;
  border-radius:9px 9px 0 0;font-weight:800;font-size:.92rem;cursor:pointer;border-bottom:none;transition:.12s;
  font-family:inherit;margin-bottom:-1px;}
.tab:hover{color:#fff;border-color:var(--line2)}
.tab.active{background:var(--panel);color:var(--steel);border-color:var(--line2);box-shadow:inset 0 3px 0 var(--steel)}

main{max-width:1120px;margin:0 auto;padding:18px}
.view{display:none}
.view.active{display:block}

/* Stat cards */
.stats{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}
.stat-card span{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;font-weight:800}
.stat-card strong{display:block;font-size:1.75rem;margin-top:5px}
.stat-card small{display:block;color:var(--muted);font-size:.72rem;margin-top:3px}
.stat-card.hl-yellow{border-color:#6b4f00;background:#171f2d}
.stat-card.hl-yellow strong{color:#ffe676}
.stat-card.hl-blue strong{color:#9fd0ff}
.stat-card.hl-green strong{color:#7ee2a8}

/* Panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}
.panel h2{margin:0 0 4px;font-size:1.1rem}
.panel .hint{color:var(--muted);font-size:.86rem;margin:0 0 16px}
.panel.yellow{background:#171f2d;border-color:#6b4f00}
.panel.yellow > h2{color:var(--yellow)}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.field{display:block}
.field.full{grid-column:1/-1}
label{display:block;margin-bottom:6px;color:var(--muted);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}
input,select,textarea{width:100%;background:var(--field);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:11px;font-size:.95rem;font-family:inherit;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--steel)}
input::placeholder{color:#5f7794}
.work-order-field input{border-color:var(--yellow)}
.key-field input{border-color:var(--orange);font-weight:800}
.customer-field input{border-color:var(--green)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
button.pickup{background:var(--green);color:#06150a}
button.parts-check{background:var(--yellow);color:#171300}

/* Toolbar */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.toolbar .search{flex:1;min-width:180px}
.seg{display:inline-flex;background:var(--field);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{appearance:none;border:none;background:transparent;color:var(--muted);padding:9px 15px;font-size:.86rem;
  font-weight:800;cursor:pointer;font-family:inherit;transition:.12s}
.seg button.active{background:var(--blue);color:#fff}

/* Groups + rows */
.group{margin-bottom:16px}
.group-head{display:flex;align-items:center;gap:10px;margin:0 2px 8px;font-size:.78rem;font-weight:900;
  color:var(--steel);text-transform:uppercase;letter-spacing:.06em}
.group-head .count{background:var(--field);color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:2px 10px;font-size:.7rem;font-weight:800;letter-spacing:0}
.row{display:grid;grid-template-columns:1.3fr 2fr .6fr .8fr auto;gap:13px;align-items:center;padding:13px 14px;
  border:1px solid var(--line);border-radius:10px;background:#0e1a2b;margin-bottom:8px;border-left:6px solid var(--yellow);}
.row.ordered{border-left-color:var(--green);opacity:.6}
.row .pn{font-weight:900;color:#fff}
.row .desc{color:#d9e8f8;font-size:.9rem}
.row .meta{display:block;color:var(--muted);font-size:.76rem;margin-top:4px}
.qty-pill{background:var(--field);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-weight:900;text-align:center}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.icon-btn{appearance:none;border:1px solid var(--line);background:var(--field);color:var(--muted);border-radius:8px;
  width:36px;height:36px;cursor:pointer;font-size:15px;transition:.12s;display:inline-flex;align-items:center;
  justify-content:center;font-weight:900}
.icon-btn.done:hover{border-color:var(--green);color:var(--green)}
.icon-btn.del:hover{border-color:var(--red);color:var(--red)}
.badge{font-size:.68rem;padding:2px 9px;border-radius:999px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.badge.pending{background:#3b2d00;color:#ffe676;border:1px solid #7a5e00}
.badge.ordered{background:rgba(39,195,90,.15);color:#7ee2a8;border:1px solid #1c6b38}
.badge.role{background:#123a5a;color:#9fd0ff;border:1px solid var(--line2)}
.badge.role.admin{background:#3a2140;color:#e6c8ff;border-color:#5a3f8c}
.badge.inactive{background:#2a1414;color:#ff8f8f;border:1px solid #6b2020}

.empty{padding:35px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px}
.empty .big{color:var(--text);font-weight:800;margin-bottom:6px;font-size:1rem}

/* Tables */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 12px;font-size:.9rem;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:900}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
.totrow td{font-weight:900;border-top:2px solid var(--line2);color:var(--steel)}
.inline-form{display:inline-flex;gap:6px;align-items:center;margin:0}
.inline-form select,.inline-form input{padding:7px 9px;font-size:.82rem;width:auto}

/* Bars */
.bar-item{margin-bottom:13px}
.bar-top{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;margin-bottom:5px}
.bar-top .name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-top .pct{color:var(--muted);flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:700}
.bar-track{background:var(--field);border-radius:7px;height:13px;overflow:hidden;border:1px solid var(--line)}
.bar-fill{height:100%;transition:width .4s ease}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.footer-actions{display:flex;gap:10px;flex-wrap:wrap}
.note{font-size:.78rem;color:var(--muted);margin-top:12px}
.msg{border-radius:9px;padding:11px 14px;margin-bottom:14px;font-weight:700;font-size:.9rem}
.msg.ok{background:rgba(39,195,90,.14);color:#7ee2a8;border:1px solid #1c6b38}
.msg.err{background:rgba(239,68,68,.14);color:#ff9b9b;border:1px solid #6b2020}

/* Centered auth pages */
.auth-wrap{max-width:420px;margin:8vh auto;padding:0 20px}
.auth-brand{text-align:center;margin-bottom:22px}
.auth-brand .logo{width:70px;height:70px;border-radius:16px;margin:0 auto 12px;
  background:linear-gradient(135deg,var(--steel),var(--blue));display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:32px;color:#06152a;}
.auth-brand h1{margin:0;font-size:1.35rem;letter-spacing:1px}
.auth-brand .sub{color:var(--steel);letter-spacing:6px;font-weight:700;font-size:.8rem;margin-top:4px}
.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
.auth-card .btn-row{margin-top:18px}
.auth-card .link-button{width:100%;justify-content:center;padding:12px}
.auth-foot{text-align:center;color:#5f7794;font-size:.78rem;margin-top:18px}

/* Permissions grid */
.perm-table th.role-col{text-align:center}
.perm-table td.perm-cell{text-align:center}
.perm-table input[type=checkbox]{width:18px;height:18px;accent-color:var(--steel)}
.perm-name{font-weight:700;color:#dbe8f4}

/* Chips for add-user permission preview */
.role-help{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:6px}
.role-help .rc{background:var(--field);border:1px solid var(--line);border-radius:9px;padding:10px}
.role-help .rc h4{margin:0 0 6px;font-size:.85rem;color:var(--steel)}
.role-help .rc ul{margin:0;padding-left:16px;color:var(--muted);font-size:.78rem;line-height:1.5}

footer.page-foot{text-align:center;padding:26px;color:#5f7794;font-size:.8rem}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--green);
  color:#062015;padding:11px 20px;border-radius:9px;font-weight:900;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;
  pointer-events:none;transition:.25s;z-index:60}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--red);color:#fff}

@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.two-col{grid-template-columns:1fr}}
@media(max-width:640px){.row{grid-template-columns:1fr auto}.topbar{flex-direction:column;align-items:flex-start}}

/* ---- Easy date pickers (added 1.5.0) --------------------------------------
   Date fields already use type="date" but the native calendar icon is hard to
   see/hit on the dark theme. Show a clear white calendar icon and stretch the
   calendar button across the whole field, so clicking ANYWHERE on a date field
   opens the calendar — no more typing dates. */
input[type="date"]{
  position:relative;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fd0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:18px 18px;
  padding-right:40px;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  position:absolute;top:0;left:0;width:100%;height:100%;
  margin:0;padding:0;cursor:pointer;opacity:0;
}