/* EAMS GOLD theme — Bootstrap 5 overrides. */
:root {
  --gold-900:#3a2e10; --gold-800:#5a4614; --gold-700:#8a6d1f; --gold-600:#a8861f; --gold-500:#c9a227;
  --gold-300:#e6cf85; --gold-100:#f7efd6; --gold-50:#fbf8f1;
  --side-bg:#2b2214; --side-bg-2:#3b2e17; --ink:#2a2419; --muted:#7a6f5c;
  --bs-primary:#a8861f; --bs-primary-rgb:168,134,31; --bs-link-color:#8a6d1f; --bs-link-hover-color:#5a4614;
  --bs-body-bg:#fbf8f1; --bs-body-color:#2a2419; --bs-border-radius:.6rem;
}
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans Devanagari", sans-serif; background: var(--gold-50); }
a { color: var(--gold-700); }

/* layout */
.app { display:flex; min-height:100vh; }
.sidebar { width:248px; flex:0 0 248px; background:linear-gradient(180deg,var(--side-bg),var(--side-bg-2));
  color:#e9dfc6; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; z-index:1030; }
.sidebar .brand { display:flex; align-items:center; gap:.6rem; padding:1.1rem 1.2rem; border-bottom:1px solid rgba(230,207,133,.15); }
.sidebar .brand img { width:34px; height:34px; }
.sidebar .brand b { color:var(--gold-300); letter-spacing:.14em; font-size:.95rem; }
.sidebar .brand small { display:block; color:#b8a882; font-size:.72rem; letter-spacing:0; }
.sidebar nav { padding:.6rem .6rem 1rem; flex:1; }
.sidebar nav a { display:flex; align-items:center; gap:.7rem; padding:.58rem .8rem; margin:.1rem 0; border-radius:.5rem;
  color:#e2d6b8; text-decoration:none; font-size:.9rem; }
.sidebar nav a:hover { background:rgba(230,207,133,.1); color:#fff; }
.sidebar nav a.active { background:linear-gradient(90deg,var(--gold-500),var(--gold-600)); color:#1d160a; font-weight:600;
  box-shadow:0 2px 8px rgba(201,162,39,.35); }
.sidebar nav a i { font-size:1.05rem; width:1.2rem; text-align:center; }
.sidebar .logout { padding:.8rem 1.2rem 1.2rem; border-top:1px solid rgba(230,207,133,.15); }
.sidebar .logout button { width:100%; color:#e2d6b8; background:none; border:0; text-align:left; padding:.4rem 0; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { background:#fff; border-bottom:1px solid #ece3cc; padding:.75rem 1.5rem; display:flex; align-items:center; gap:1rem;
  position:sticky; top:0; z-index:1020; }
.topbar h1 { font-size:1.2rem; margin:0; font-weight:600; color:var(--ink); }
.topbar .who { margin-left:auto; display:flex; align-items:center; gap:.9rem; font-size:.88rem; color:var(--muted); }
.topbar .who .avatar { width:34px; height:34px; border-radius:50%; background:var(--gold-100); color:var(--gold-800);
  display:flex; align-items:center; justify-content:center; font-weight:700; }
.content { padding:1.5rem; }
.menu-toggle { display:none; border:0; background:none; font-size:1.4rem; color:var(--gold-700); }

/* cards and stats */
.card { border:1px solid #ece3cc; border-radius:.8rem; box-shadow:0 1px 3px rgba(90,70,20,.06); }
.card-header { background:#fff; border-bottom:1px solid #f1e9d4; font-weight:600; }
.stat { padding:1rem 1.2rem; }
.stat .label { font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:.4rem; }
.stat .value { font-size:1.9rem; font-weight:700; color:var(--ink); line-height:1.1; margin-top:.25rem; }
.stat.present .value { color:#1f8a4c; } .stat.absent .value { color:#c0392b; }
.stat.late .value { color:#d68910; } .stat.leave .value { color:#b07d12; } .stat.alert .value { color:#c0392b; }

/* buttons */
.btn-gold { background:linear-gradient(180deg,var(--gold-500),var(--gold-600)); color:#1d160a; border:0; font-weight:600; }
.btn-gold:hover { background:linear-gradient(180deg,var(--gold-600),var(--gold-700)); color:#fff; }
.btn-outline-gold { border:1px solid var(--gold-500); color:var(--gold-700); background:#fff; }
.btn-outline-gold:hover { background:var(--gold-100); color:var(--gold-800); }
.btn-primary { background-color:var(--gold-600); border-color:var(--gold-600); }
.btn-primary:hover { background-color:var(--gold-700); border-color:var(--gold-700); }
.form-control:focus, .form-select:focus { border-color:var(--gold-300); box-shadow:0 0 0 .2rem rgba(201,162,39,.2); }
.form-check-input:checked { background-color:var(--gold-600); border-color:var(--gold-600); }

/* tables */
.table { --bs-table-bg:transparent; }
.table thead th { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600;
  border-bottom:1px solid #eadfc4; white-space:nowrap; }
.table td { vertical-align:middle; font-size:.9rem; }
.table-hover tbody tr:hover { background:#fdf9ee; }
.table-responsive { border-radius:.8rem; }

/* status badges */
.badge-status { font-weight:600; font-size:.74rem; padding:.35em .65em; border-radius:1rem; }
.st-ok { background:#e5f5ec; color:#1f7a44; } .st-warn { background:#fdf1dc; color:#a1650a; }
.st-bad { background:#fbe5e2; color:#b0322a; } .st-info { background:#f1ead6; color:#7a5d12; } .st-mute { background:#eee; color:#666; }

/* risk alert card, echoing the approved mockup */
.risk-card { border:1px solid #f2c9c3; background:linear-gradient(180deg,#fff,#fff7f5); }
.risk-card .risk-head { color:#b0322a; font-weight:700; display:flex; align-items:center; gap:.5rem; }
.risk-facts dt { font-weight:500; color:var(--muted); font-size:.85rem; }
.risk-facts dd { font-weight:600; margin-bottom:.4rem; }
.btn-block-risk { background:#d9453a; color:#fff; border:0; font-weight:600; }
.btn-review-risk { background:#f0b429; color:#2a1d00; border:0; font-weight:600; }
.btn-allow-risk { background:#1f9d57; color:#fff; border:0; font-weight:600; }
.btn-block-risk:hover, .btn-allow-risk:hover { filter:brightness(.92); color:#fff; }

/* auth screen */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 20% 0%, #fff6dc 0%, #fbf8f1 45%, #f3ead3 100%); padding:1rem; }
.auth-card { width:100%; max-width:400px; background:#fff; border-radius:1rem; padding:2.2rem 2rem;
  box-shadow:0 10px 40px rgba(90,70,20,.14); border:1px solid #efe4c7; }
.auth-card .logo { width:72px; height:72px; display:block; margin:0 auto .5rem; }
.auth-card .wordmark { text-align:center; letter-spacing:.3em; color:var(--gold-700); font-weight:700; font-size:.85rem; }

.provider-warning { border-left:4px solid #d68910; background:#fff8e8; }
.kv dt { color:var(--muted); font-weight:500; font-size:.84rem; }
.kv dd { margin-bottom:.55rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.82rem; }
.timeline { list-style:none; padding-left:0; border-left:2px solid var(--gold-100); margin-left:.4rem; }
.timeline li { padding:0 0 .8rem 1rem; position:relative; }
.timeline li::before { content:""; position:absolute; left:-7px; top:.35rem; width:12px; height:12px; border-radius:50%;
  background:var(--gold-500); border:2px solid #fff; }
.donut { width:140px; height:140px; }
.filter-bar .form-control, .filter-bar .form-select { font-size:.88rem; }

/* responsive: sidebar becomes an off-canvas drawer on tablet/mobile */
@media (max-width: 991.98px) {
  .sidebar { position:fixed; left:-260px; transition:left .2s ease; }
  body.nav-open .sidebar { left:0; box-shadow:4px 0 24px rgba(0,0,0,.25); }
  body.nav-open .scrim { position:fixed; inset:0; background:rgba(20,15,5,.35); z-index:1025; }
  .menu-toggle { display:inline-block; }
  .content { padding:1rem; }
  .topbar { padding:.6rem 1rem; }
  .topbar .who .name { display:none; }
}
@media (max-width: 575.98px) {
  .stat .value { font-size:1.5rem; }
  .table td, .table th { font-size:.82rem; }
}

/* ---- CR v2: QR attendance office display ---- */
/* v4 — recorded-location map and day history */
.eams-map { height: 420px; width: 100%; border-radius: .5rem; background: #eef0f2; }
.eams-map-tall { height: 520px; border-radius: .5rem .5rem 0 0; }
.eams-timeline { max-height: 560px; overflow-y: auto; }
.eams-timeline .tl-point { cursor: pointer; }
.eams-timeline .tl-point.tl-active > td { background: #fbf3dc; }
.eams-playback .form-range { min-width: 120px; }
/* v6 — employee photos, document previews, extracted-value highlighting */
.emp-photo { object-fit: cover; background: var(--gold-100); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--gold-300); }
.doc-thumb { max-height: 120px; max-width: 100%; }
.ocr-filled { background-color: #fff9e0 !important; border-color: var(--gold-500) !important; }
.ocr-check { border-color: #c0392b !important; box-shadow: 0 0 0 .15rem rgba(192,57,43,.18) !important; }
[data-confirm-details] { border-color: var(--gold-300) !important; }