.badge { display:inline-flex; align-items:center; gap:.25rem; padding:.125rem .5rem; border-radius:9999px; font-size:.7rem; font-weight:600; }
.badge-red { background:#fee2e2; color:#b91c1c; }
.badge-amber { background:#fef3c7; color:#b45309; }
.badge-green { background:#d1fae5; color:#047857; }
.badge-blue { background:#dbeafe; color:#1d4ed8; }
.badge-gray { background:#e5e7eb; color:#374151; }
.badge-purple { background:#ede9fe; color:#6d28d9; }
.nav-item { display:flex; align-items:center; gap:.75rem; padding:.6rem .9rem; border-radius:.5rem; color:#cbd5e1; cursor:pointer; font-size:.875rem; transition:all .15s; }
.nav-item:hover { background:#1e293b; color:#fff; }
.nav-item.active { background:#0369a1; color:#fff; }
.card { background:#fff; border-radius:.75rem; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.tbl th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:#64748b; padding:.6rem .75rem; background:#f8fafc; border-bottom:1px solid #e2e8f0; position:sticky; top:0; }
.tbl td { padding:.55rem .75rem; border-bottom:1px solid #f1f5f9; font-size:.825rem; color:#334155; }
.tbl tr:hover td { background:#f8fafc; }
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius:.5rem; font-size:.825rem; font-weight:600; cursor:pointer; transition:all .15s; border:none; }
.btn-primary { background:#0369a1; color:#fff; } .btn-primary:hover { background:#075985; }
.btn-secondary { background:#e2e8f0; color:#334155; } .btn-secondary:hover { background:#cbd5e1; }
.btn-danger { background:#fee2e2; color:#b91c1c; } .btn-danger:hover { background:#fecaca; }
.btn-success { background:#059669; color:#fff; } .btn-success:hover { background:#047857; }
.btn-sm { padding:.25rem .6rem; font-size:.75rem; }
.inp { width:100%; padding:.5rem .75rem; border:1px solid #cbd5e1; border-radius:.5rem; font-size:.85rem; outline:none; }
.inp:focus { border-color:#0369a1; box-shadow:0 0 0 3px rgba(3,105,161,.12); }
.lbl { display:block; font-size:.75rem; font-weight:600; color:#475569; margin-bottom:.25rem; }
.modal-bg { position:fixed; inset:0; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; z-index:50; padding:1rem; }
.modal { background:#fff; border-radius:.75rem; max-width:640px; width:100%; max-height:90vh; overflow-y:auto; }
.stat-card { border-radius:.75rem; padding:1.1rem 1.25rem; color:#fff; cursor:pointer; transition:transform .15s; }
.stat-card:hover { transform:translateY(-2px); }
.tab { padding:.5rem 1rem; font-size:.825rem; font-weight:600; color:#64748b; cursor:pointer; border-bottom:2px solid transparent; }
.tab.active { color:#0369a1; border-color:#0369a1; }
@media print { .no-print { display:none !important; } }

/* ============ MOBILE / TABLET (field-use) ============ */
/* Prevent iOS Safari auto-zoom on focus (needs >=16px) + bigger touch targets everywhere */
.inp, select.inp, textarea.inp { font-size:16px; min-height:44px; }
textarea.inp { min-height:auto; }
.btn { min-height:42px; }
.nav-item { min-height:46px; }

/* Off-canvas sidebar: desktop default (static, always visible) */
#sidebar { transition: transform .25s ease; }
#mobile-topbar { display:none; }
#sidebar-backdrop { display:none; }

@media (max-width: 900px) {
  /* Sidebar becomes a slide-in drawer over the content */
  #sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: 82vw; max-width: 300px;
    transform: translateX(-100%);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #sidebar.open { transform: translateX(0); box-shadow: 8px 0 24px rgba(0,0,0,.25); }
  #sidebar-backdrop.open {
    display: block; position: fixed; inset: 0; z-index: 39;
    background: rgba(15,23,42,.5);
  }
  #mobile-topbar {
    display: flex; align-items: center; gap: .75rem;
    position: sticky; top: 0; z-index: 30;
    background: #0f172a; color: #fff;
    padding: .75rem 1rem; padding-top: calc(.75rem + env(safe-area-inset-top));
  }
  #mobile-topbar button { min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; }
  main#main-content { padding: 1rem; padding-bottom: 2rem; }
  .card { border-radius: .6rem; }
  /* Bigger, easier-to-hit action buttons on small screens */
  .btn { padding:.6rem 1rem; font-size:.9rem; }
  .btn-sm { padding:.45rem .8rem; font-size:.8rem; min-height:38px; }
}

/* Modal becomes full-screen on phones for easier form filling with gloves */
@media (max-width: 640px) {
  .modal-bg { padding: 0; align-items: stretch; }
  .modal { max-width: 100%; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}

/* Horizontally scrollable table wrapper with a sticky lead column so techs
   keep sight of "what row am I on" while swiping through data on a phone. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap table { min-width: 640px; }
.tbl-wrap.sticky-col th:first-child, .tbl-wrap.sticky-col td:first-child {
  position: sticky; left: 0; background: #fff; z-index: 1;
}
.tbl-wrap.sticky-col thead th:first-child { background: #f8fafc; z-index: 2; }
.tbl-wrap.sticky-col tbody tr:hover td:first-child { background: #f8fafc; }

@media (max-width: 480px) {
  body { -webkit-text-size-adjust: 100%; }
}