:root{
  --brand:#e11d1d;         /* Zathrin red */
  --brand-dark:#b30f0f;
  --ink:#1f2328;
  --muted:#6b7280;
  --bg:#f4f5f7;
}
body{ background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

.app-nav{ background:linear-gradient(90deg,var(--brand),var(--brand-dark)); box-shadow:0 2px 6px rgba(0,0,0,.15); }
.app-nav .navbar-brand,.app-nav .nav-link,.app-nav .navbar-text{ color:#fff!important; }
.app-nav .nav-link:hover{ opacity:.85; }
.role-badge{ background:rgba(255,255,255,.25); padding:.1rem .45rem; border-radius:.3rem; font-size:.7rem; font-weight:700; }

.card{ border:none; border-radius:.6rem; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.card-header{ background:#fff; border-bottom:2px solid var(--brand); font-weight:600; }

.btn-brand{ background:var(--brand); color:#fff; }
.btn-brand:hover{ background:var(--brand-dark); color:#fff; }

.login-wrap{ max-width:400px; margin:8vh auto; }
.login-logo{ text-align:center; color:var(--brand); font-size:2.2rem; }

.stat{ text-align:center; padding:1.1rem; }
.stat .num{ font-size:2rem; font-weight:700; color:var(--brand); }
.stat .lbl{ color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; }

.status-pill{ padding:.15rem .6rem; border-radius:1rem; font-size:.75rem; font-weight:600; }
.status-pending{ background:#fff3cd; color:#8a6d00; }
.status-approved{ background:#d1e7dd; color:#0f5132; }
.status-rejected{ background:#f8d7da; color:#842029; }
.status-draft{ background:#e2e3e5; color:#41464b; }

.score-dot{ display:inline-block; width:11px; height:11px; border-radius:50%; }
.score-green{ background:#198754; } .score-amber{ background:#ffc107; } .score-red{ background:#dc3545; }

.photo-preview{ width:100%; max-width:260px; border-radius:.5rem; border:1px solid #ddd; object-fit:cover; }
.qgrid label{ font-weight:600; font-size:.85rem; }
.app-footer{ color:var(--muted); }
.check-list li{ margin-bottom:.2rem; }

/* ============================================================
   Mobile-first polish — RM & TM use phones ~95% of the time
   ============================================================ */
.btn{ min-height:40px; }               /* comfortable tap target */
.form-control, .form-select{ min-height:44px; font-size:16px; } /* 16px stops iOS zoom-on-focus */

@media (max-width: 575.98px){
  main.container-fluid{ padding-left:.7rem; padding-right:.7rem; }
  h4{ font-size:1.15rem; }
  .app-nav .navbar-brand{ font-size:1rem; }
  .stat{ padding:.8rem .4rem; }
  .stat .num{ font-size:1.6rem; }
  .login-wrap{ margin:5vh auto; }

  /* Data tables -> stacked cards (no sideways scrolling on phones) */
  table.table-cards thead{ display:none; }
  table.table-cards, table.table-cards tbody{ display:block; width:100%; }
  table.table-cards tr{
    display:block; background:#fff; border:1px solid #e6e7eb;
    border-radius:.55rem; padding:.5rem .8rem; margin-bottom:.6rem;
    box-shadow:0 1px 2px rgba(0,0,0,.05);
  }
  table.table-cards td{
    display:flex; justify-content:space-between; align-items:center; gap:1rem;
    border:none; padding:.32rem 0; text-align:right;
  }
  table.table-cards td::before{
    content:attr(data-label); font-weight:600; color:var(--muted);
    font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; text-align:left;
  }
  table.table-cards td.td-action{ display:block; text-align:center; padding-top:.55rem; }
  table.table-cards td.td-action::before{ content:none; }
  table.table-cards td.td-action .btn{ width:100%; }
  table.table-cards td[colspan]{ display:block; text-align:center; }
  table.table-cards td[colspan]::before{ content:none; }
  table.table-cards td:empty{ display:none; }
}