:root{
  --steel-950:#161412; --steel-900:#201d1a; --steel-800:#2c2822; --steel-700:#443e34; --steel-500:#8a8172;
  --paper:#f2ede2; --paper-dim:#c9c1b1;
  --safety:#f2c14e; --safety-dim:#cf9f2e; --ink:#17140f;
  --white-card:#ffffff; --border:#e2e6ec; --border-strong:#c9d0da; --ink-900:#16233a; --ink-600:#4a5568; --ink-400:#8a94a3;
  --ok:#3d7a52; --ok-bg:#eaf7ef; --danger:#c1502e;
  --f-display:'Oswald', sans-serif; --f-body:'Barlow', sans-serif; --f-mono:'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-body);
  background: var(--steel-950);
  color: var(--paper-dim);
  min-height: 100vh;
  position: relative;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('/assets/logo-watermark.png');
  background-repeat: no-repeat; background-position: center 55%; background-size: 820px auto;
  opacity: .05;
}
button { font-family: var(--f-body); }
.boot-msg { padding: 60px; text-align: center; color: var(--steel-500); font-size: 14px; }
.app { min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; }

.hazard-bar{height:7px; width:100%; background:repeating-linear-gradient(-45deg, var(--safety), var(--safety) 12px, var(--ink) 12px, var(--ink) 24px);}

.topbar{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; background:var(--steel-900); border-bottom:2px solid var(--steel-700); flex-wrap:wrap; gap:12px;}
.brand{display:flex; align-items:center; gap:14px;}
.brand-mark{display:flex; align-items:center; justify-content:center;}
.brand-mark img{width:44px; height:auto; display:block;}
.brand-text{font-family:var(--f-display); font-weight:600; font-size:17px; color:#fff; text-transform:uppercase; letter-spacing:.3px;}
.brand-sub{font-family:var(--f-mono); font-size:10px; color:var(--steel-500); margin-top:2px;}
.topbar-actions{display:flex; align-items:center; gap:12px;}
.ghost-link-btn{background:none; border:1px solid var(--steel-700); color:var(--paper-dim); border-radius:4px; padding:8px 13px; font-size:12px; cursor:pointer; text-decoration:none; font-family:var(--f-mono);}
.ghost-link-btn:hover{border-color:var(--safety); color:#fff;}
.user-chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:12px; color:var(--paper-dim);}
.user-chip .dot{width:6px; height:6px; border-radius:50%; background:var(--ok); flex-shrink:0;}
.logout-btn{background:none; border:1px solid var(--steel-700); color:var(--paper-dim); border-radius:4px; padding:8px 13px; font-size:12px; cursor:pointer; font-family:var(--f-mono);}
.logout-btn:hover{border-color:var(--danger); color:var(--danger);}

.main{flex:1; max-width:1280px; width:100%; margin:0 auto; padding:28px 32px 80px; position:relative; z-index:1;}
.page-title{font-family:var(--f-display); font-weight:600; font-size:24px; color:#fff; margin:0 0 6px; text-transform:uppercase;}
.page-desc{font-size:13.5px; color:var(--steel-500); margin:0 0 24px; line-height:1.6;}
.page-desc b{color:var(--paper-dim); font-weight:600;}

.filters{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px;}
.filters select, .filters input{background:var(--steel-950); border:1.5px solid var(--steel-700); border-radius:4px; color:#fff; font-family:var(--f-body); font-size:13px; padding:9px 12px; outline:none;}
.filters input{min-width:220px; flex:1;}
.filters select:focus, .filters input:focus{border-color:var(--safety);}

.field{margin-bottom:12px;}
.field.full{grid-column:1/-1;}
.field label{display:block; font-size:11px; color:var(--steel-500); margin-bottom:6px; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.3px;}
.field input, .field select, .field textarea{width:100%; background:var(--steel-950); border:1.5px solid var(--steel-700); border-radius:4px; color:#fff; font-family:var(--f-body); font-size:13px; padding:9px 11px; outline:none; resize:vertical;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--safety);}
.field-note{font-size:11px; color:var(--steel-500); margin-top:5px;}

.empty-state{color:var(--steel-500); text-align:center; padding:60px 20px; font-size:14px; grid-column:1/-1;}
.footnote{font-size:11.5px; color:var(--steel-500); text-align:center; padding:20px; line-height:1.7; font-family:var(--f-mono);}

/* ---------- login / admin ---------- */
.login-view{flex:1; display:flex; align-items:center; justify-content:center; padding:32px;}
.login-card{width:100%; max-width:380px; background:var(--steel-900); border:2px solid var(--steel-700); padding:34px 32px; position:relative;}
.login-card .rivet{background:var(--steel-500);}
.login-title{font-family:var(--f-display); font-weight:600; font-size:21px; color:#fff; margin:0 0 8px; text-transform:uppercase;}
.login-desc{font-size:13px; color:var(--paper-dim); margin:0 0 22px; line-height:1.5;}
.login-error{display:none; font-size:13px; color:var(--danger); background:rgba(193,80,46,0.12); border:1px solid rgba(193,80,46,0.35); border-radius:4px; padding:9px 12px; margin-bottom:14px;}
.login-error.show{display:block;}
.login-btn{width:100%; background:var(--safety); color:var(--ink); border:none; border-radius:4px; padding:11px; font-weight:700; font-size:14px; cursor:pointer; margin-top:6px; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.4px;}
.login-btn:hover{background:var(--safety-dim);}
.back-link{display:block; text-align:center; margin-top:16px; font-size:12.5px; color:var(--steel-500); background:none; border:none; cursor:pointer; width:100%; padding:6px; font-family:var(--f-mono);}
.back-link:hover{color:var(--safety);}

.tab-row{display:flex; gap:6px; margin-bottom:24px; border-bottom:2px solid var(--steel-700); flex-wrap:wrap;}
.tab-btn{background:none; border:none; color:var(--steel-500); font-size:13.5px; padding:10px 4px; margin-right:22px; cursor:pointer; border-bottom:2px solid transparent; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.3px;}
.tab-btn.active{color:#fff; border-bottom-color:var(--safety);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.panel-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap;}
.panel-toolbar .hint{font-size:12.5px; color:var(--steel-500); font-family:var(--f-mono);}
.toolbar-left{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.filter-select{background:var(--steel-950); border:1.5px solid var(--steel-700); border-radius:4px; padding:8px 12px; font-family:var(--f-body); font-size:12.5px; color:#fff; outline:none; cursor:pointer;}
.filter-select:focus{border-color:var(--safety);}
.primary-btn{background:var(--safety); color:var(--ink); border:none; border-radius:4px; padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.3px;}
.primary-btn:hover{background:var(--safety-dim);}

.table-wrap{background:var(--steel-900); border:2px solid var(--steel-700); overflow:hidden; overflow-x:auto;}
table{width:100%; border-collapse:collapse;}
thead th{text-align:left; font-size:11px; font-weight:500; color:var(--steel-500); padding:14px 18px; border-bottom:1px solid var(--steel-700); white-space:nowrap; font-family:var(--f-mono); text-transform:uppercase;}
tbody td{padding:14px 18px; font-size:13px; border-bottom:1px solid var(--steel-800); color:var(--paper-dim); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--steel-800);}
.row-actions{display:flex; gap:8px;}
.icon-btn{background:none; border:1px solid var(--steel-700); color:var(--steel-500); border-radius:4px; padding:5px 10px; font-size:12px; cursor:pointer; font-family:var(--f-mono);}
.icon-btn:hover{border-color:var(--safety); color:#fff;}
.icon-btn.danger{color:var(--danger); border-color:rgba(193,80,46,0.4);}
.icon-btn.danger.confirming{background:var(--danger); color:#fff; border-color:var(--danger);}
.icon-btn:disabled{opacity:.4; cursor:not-allowed;}
.owner-tag{font-family:var(--f-mono); font-size:11.5px; color:var(--steel-500);}
.order-id{font-family:var(--f-mono); font-size:12.5px; color:#fff;}
.product-name{color:#fff; font-weight:500;}
.date-cell{font-family:var(--f-mono); font-size:12px; color:var(--paper-dim);}

.modal-overlay{display:none; position:fixed; inset:0; background:rgba(10,8,6,0.8); z-index:60; align-items:center; justify-content:center; padding:24px;}
.modal-overlay.open{display:flex;}
.modal-card{width:100%; max-width:480px; max-height:88vh; overflow-y:auto; background:var(--steel-900); border:2px solid var(--steel-700); padding:26px 26px 22px;}
.modal-title{font-family:var(--f-display); font-weight:600; font-size:18px; color:#fff; margin:0 0 18px; text-transform:uppercase;}
.modal-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}
.ghost-btn{background:none; border:1px solid var(--steel-700); color:var(--paper-dim); border-radius:4px; padding:9px 15px; font-size:13px; cursor:pointer;}
.ghost-btn:hover{border-color:var(--safety);}

@media (max-width:640px){
  .topbar{padding:14px 18px;}
  .main{padding:20px 16px 70px;}
  .modal-grid{grid-template-columns:1fr;}
}

/* ============ order tracking dashboard components ============ */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px;}
.stat-card{background:var(--steel-900); border:2px solid var(--steel-700); padding:16px 18px;}
.stat-num{font-family:var(--f-display); font-size:26px; font-weight:600; color:#fff;}
.stat-num.amber{color:var(--safety);}
.stat-label{font-size:11.5px; color:var(--steel-500); margin-top:4px; font-family:var(--f-mono);}

.date-cell.warranty{color:var(--paper-dim);}
.date-cell.warranty.expired{color:var(--danger);}

.progress-cell{display:flex; align-items:center; gap:10px; min-width:140px;}
.progress-track{flex:1; height:4px; background:var(--steel-700); overflow:hidden;}
.progress-fill{height:100%; background:var(--safety);}
.progress-pct{font-family:var(--f-mono); font-size:11.5px; color:var(--steel-500); width:32px; text-align:right;}

.status-badge{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; padding:4px 10px; font-family:var(--f-mono);}
.status-badge .dot{width:6px; height:6px; border-radius:50%;}
.status-production{background:rgba(242,193,78,0.12); color:var(--safety);}
.status-production .dot{background:var(--safety);}
.status-qc{background:rgba(63,122,82,0.18); color:#8fbf6f;}
.status-qc .dot{background:#8fbf6f;}
.status-queued{background:var(--steel-800); color:var(--steel-500);}
.status-queued .dot{background:var(--steel-500);}
.status-completed{background:var(--steel-800); color:var(--paper-dim);}
.status-completed .dot{background:var(--steel-500);}

.history-section{margin-top:34px;}
.history-toggle{
  display:flex; align-items:center; gap:10px; width:100%; background:var(--steel-900);
  border:2px solid var(--steel-700); padding:16px 18px; cursor:pointer;
  font-size:14px; color:#fff; font-weight:500; text-align:left; font-family:var(--f-mono);
}
.history-toggle:hover{border-color:var(--safety);}
.history-toggle .chevron{width:16px; height:16px; flex-shrink:0; transition:transform .18s ease; color:var(--safety);}
.history-toggle.open .chevron{transform:rotate(90deg);}
.history-toggle .count-badge{
  font-family:var(--f-mono); font-size:11.5px; color:var(--steel-500); background:var(--steel-800);
  padding:2px 9px; margin-left:2px;
}
.history-body{display:none; margin-top:12px;}
.history-body.open{display:block;}

@media (max-width:640px){
  .stat-row{grid-template-columns:repeat(2,1fr);}
}