/* =============================================================================
   Odometer UI — styles on Tabler (Bootstrap 5), following GPMS app.css
   ============================================================================= */

/* ── Navbar (GPMS) ─────────────────────────────────────────────────────────── */
.navbar { border-bottom: 1px solid var(--tblr-border-color); box-shadow: 0 1px 6px rgba(0,0,0,.06); }
.navbar .nav-item.active > .nav-link { color: var(--tblr-primary) !important; font-weight: 600; }
.navbar .nav-item.active > .nav-link .nav-link-icon i { color: var(--tblr-primary); }
.page-body { padding-top: 1.5rem; padding-bottom: 2rem; }

/* ── Cards (GPMS) ──────────────────────────────────────────────────────────── */
.card { border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius-lg, 12px); box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.card-header { border-bottom: 1px solid var(--tblr-border-color); font-weight: 600; padding: 14px 18px; }

/* ── Stat cards (Dashboard) ───────────────────────────────────────────────── */
.kpi { padding: 18px 20px !important; transition: transform .15s; }
.kpi:hover { transform: translateY(-2px); }
.kpi .kpi-value { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.kpi .kpi-label { color: var(--tblr-muted-color, #6c757d); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }

/* ── Login page (GPMS) ─────────────────────────────────────────────────────── */
.login-body { background: linear-gradient(135deg, #1a2742 0%, #2d6a4f 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { background: var(--tblr-card-bg, #fff); border-radius: 16px; padding: 40px; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo i { font-size: 3rem; color: #2d6a4f; }
.login-logo h4 { font-weight: 700; color: #1a2742; margin-top: 8px; }

/* ── Status badges ─────────────────────────────────────────────────────────── */
.st { font-size: .75rem; font-weight: 600; padding: .25em .55em; border-radius: .4rem; white-space: nowrap; }
.st-AutoAccepted { background: #d1f2df; color: #146c43; }
.st-Approved { background: #cfe2ff; color: #084298; }
.st-NeedsReview { background: #fff3cd; color: #997404; }
.st-RetakeRequired { background: #ffe5d0; color: #984c0c; }
.st-Rejected { background: #f8d7da; color: #842029; }
.st-Confirmed { background: #d1f2df; color: #146c43; }
.st-Draft { background: #fff3cd; color: #997404; }
.st-None { background: #e9ecef; color: #495057; }
.reason { font-size: .7rem; background: #eef1f5; color: #495057; border-radius: .3rem; padding: .1em .4em; margin: 0 .2em .2em 0; display: inline-block; }

/* ── Review screen ─────────────────────────────────────────────────────────── */
.queue-item { cursor: pointer; border-left: 4px solid transparent; }
.queue-item.active { border-left-color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), .06); }
.review-photo { max-height: 62vh; max-width: 100%; transition: transform .2s; cursor: zoom-in; }
.review-photo.zoomed { cursor: zoom-out; }
.value-big { font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Photo modal ───────────────────────────────────────────────────────────── */
.photo-stage { background: #111; overflow: auto; max-height: 80vh; }
.photo-stage img { max-width: 100%; max-height: 75vh; transition: transform .2s; }

.e-grid.clickable .e-rowcell { cursor: pointer; }
.pager { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; padding-top: .5rem; }
.mono { font-variant-numeric: tabular-nums; }