:root{
  --sth-primary:#123b6b;
  --sth-primary-2:#1f5aa8;
  --sth-bg:#f6f8fb;
  --sth-card:#ffffff;
  --sth-text:#0f172a;
  --sth-muted:#64748b;
  --sth-working:#16a34a;
  --sth-faulty:#dc2626;
  --sth-out:#64748b;
  --sth-reported:#d97706;
  --sth-maint:#ea580c;
  --sth-ready:#2563eb;
  --sth-closed:#16a34a;
}

body{background:var(--sth-bg); color:var(--sth-text);}
.sth-nav{background:linear-gradient(90deg,var(--sth-primary),var(--sth-primary-2));}
.sth-brand{font-weight:800; letter-spacing:1px;}
.sth-hname{font-weight:600;}
.card{border:0; box-shadow:0 6px 18px rgba(15,23,42,0.08); border-radius:16px;}
.btn{border-radius:12px;}
.table{margin:0;}

.sth-pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-weight:600; font-size:0.85rem;}
.sth-dot{width:10px; height:10px; border-radius:999px; display:inline-block;}

.sth-pill.working{background:rgba(22,163,74,0.12);} 
.sth-pill.working .sth-dot{background:var(--sth-working);} 

.sth-pill.faulty{background:rgba(220,38,38,0.12);} 
.sth-pill.faulty .sth-dot{background:var(--sth-faulty);} 

.sth-pill.out{background:rgba(100,116,139,0.12);} 
.sth-pill.out .sth-dot{background:var(--sth-out);} 

/* Work order status pills */
.sth-pill.reported{background:rgba(217,119,6,0.12);} 
.sth-pill.reported .sth-dot{background:var(--sth-reported);} 

.sth-pill.maint{background:rgba(234,88,12,0.12);} 
.sth-pill.maint .sth-dot{background:var(--sth-maint);} 

.sth-pill.ready{background:rgba(37,99,235,0.12);} 
.sth-pill.ready .sth-dot{background:var(--sth-ready);} 

.sth-pill.closed{background:rgba(22,163,74,0.12);} 
.sth-pill.closed .sth-dot{background:var(--sth-closed);} 

.sth-badge-pending{background:rgba(217,119,6,0.12); color:#92400e; padding:4px 10px; border-radius:999px; font-weight:700; font-size:.8rem;}
.sth-badge-approved{background:rgba(22,163,74,0.12); color:#166534; padding:4px 10px; border-radius:999px; font-weight:700; font-size:.8rem;}
.sth-badge-rejected{background:rgba(220,38,38,0.12); color:#991b1b; padding:4px 10px; border-radius:999px; font-weight:700; font-size:.8rem;}

.sth-hero{
  width:100%;
  height:180px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:#0b1220;
}
.sth-hero img{width:100%; height:100%; object-fit:cover; opacity:.85;}
.sth-hero .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
.sth-hero .text{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:18px;
  color:white;
}
.sth-hero .text .title{font-weight:800; font-size:1.1rem;}
.sth-hero .text .sub{opacity:.9;}

@media (max-width: 480px){
  .sth-hero{height:140px;}
}

.qr-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
@media print{
  body{background:#fff;}
  nav,.btn,.alert{display:none !important;}
  .card{box-shadow:none;}
}
@media (max-width: 992px){
  .qr-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width: 576px){
  .qr-grid{grid-template-columns:1fr;}
}