/* THW Lager Beta design system — mobile portrait first. */
:root {
  color-scheme: light;
  --beta-ink: #15283e;
  --beta-muted: #687b91;
  --beta-subtle: #93a1b2;
  --beta-navy: #12375d;
  --beta-blue: #2869a8;
  --beta-line: #e3eaf1;
  --beta-paper: #ffffff;
  --beta-canvas: #f3f6f9;
  --beta-soft: #edf3f8;
  --beta-radius: 18px;
  --beta-shadow: 0 5px 18px rgb(20 48 77 / 6%);
  --beta-touch: 48px;
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--beta-ink);
  background: var(--beta-canvas);
  font-synthesis: none;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; background: var(--beta-canvas); }
body { min-width: 320px; min-height: 100vh; min-height: 100dvh; margin: 0; overflow-x: hidden; background: var(--beta-canvas); color: var(--beta-ink); }
body, button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #72a9df; outline-offset: 2px; }
.hidden { display: none !important; }

/* Authentication */
.login-screen { min-height: 100vh; min-height: 100dvh; grid-template-columns: minmax(0, 1fr) minmax(380px, 520px); background: var(--beta-canvas); }
.login-visual { padding: clamp(28px, 6vw, 88px); background: linear-gradient(150deg, #102d4f 0%, #184d78 100%); }
.login-copy h1 { max-width: 12ch; font-size: clamp(36px, 5vw, 58px); letter-spacing: -1.5px; }
.login-copy p { max-width: 42ch; font-size: 16px; }
.login-card-wrap { padding: clamp(24px, 6vw, 56px); }
.login-card { max-width: 390px; }
.login-card h2 { font-size: 28px; letter-spacing: -.5px; }
.login-card > p { font-size: 15px; }
.login-card .eyebrow, .eyebrow { letter-spacing: .11em; }
.login-card .field { margin-bottom: 17px; }
.login-note { color: var(--beta-muted); font-size: 13px; line-height: 1.55; border-radius: 12px; }
.login-error { padding: 11px 13px; border-radius: 11px; background: #fff0ef; color: #a53c35; font-size: 14px; line-height: 1.4; }

/* App frame and shared controls */
.app-shell { min-height: 100vh; min-height: 100dvh; background: var(--beta-canvas); }
.sidebar { background: #102d4f; }
.main-area { min-width: 0; }
.topbar { gap: 12px; }
.mobile-brand { align-items: center; gap: 10px; }
.mobile-brand .brand-mark { border-radius: 12px; background: var(--beta-navy); }
.mobile-brand strong { font-size: 15px; letter-spacing: -.1px; }
.mobile-brand small { font-size: 11px; }
.top-actions { gap: 6px; }
.top-actions .icon-button { border-radius: 13px; }
.top-add, .primary-button, .secondary-button { min-height: var(--beta-touch); border-radius: 13px; font-size: 14px; font-weight: 650; transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.top-add, .primary-button { background: var(--beta-navy); border-color: var(--beta-navy); box-shadow: 0 3px 8px rgb(18 55 93 / 12%); }
.top-add:active, .primary-button:active, .secondary-button:active { transform: scale(.985); }
.secondary-button { background: var(--beta-paper); border-color: #d8e2ec; color: #28445f; }
.icon-button { width: 44px; height: 44px; border-radius: 13px; }
.view { width: 100%; min-width: 0; }
.page-heading { gap: 14px; }
.page-heading h1 { color: var(--beta-ink); font-size: clamp(25px, 6vw, 32px); letter-spacing: -.7px; line-height: 1.12; }
.page-heading p { color: var(--beta-muted); font-size: 14px; line-height: 1.45; }
.eyebrow { color: #7287a0; font-size: 10px; font-weight: 750; }

/* Consistent surfaces and dashboard */
.panel, .stat-card { overflow: hidden; border: 1px solid var(--beta-line); border-radius: var(--beta-radius); background: var(--beta-paper); box-shadow: var(--beta-shadow); }
.panel-heading { align-items: center; padding: 19px 20px 15px; }
.panel-heading h2, .detail-card h2 { color: var(--beta-ink); font-size: 17px; letter-spacing: -.15px; }
.panel-heading p { color: var(--beta-muted); font-size: 12px; }
.stat-card { min-width: 0; padding: 16px; }
.stat-top { color: var(--beta-muted); font-size: 12px; font-weight: 600; }
.stat-icon { width: 34px; height: 34px; border-radius: 11px; }
.stat-value { margin-top: 12px; color: var(--beta-ink); font-size: 30px; line-height: 1; }
.stat-note { margin-top: 7px; color: var(--beta-subtle); font-size: 11px; }
.location-list { padding-bottom: 14px; }
.location-row, .child-row { transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.location-row:active, .child-row:active { transform: scale(.995); }
.location-row .loc-icon, .child-row .loc-icon, .item-thumb { border-radius: 13px; background: #edf4fa; color: #2d6392; }
.loc-info strong, .child-row strong { color: var(--beta-ink); }
.loc-info small, .child-row small { color: var(--beta-muted); }
.loc-meta { color: #71849a; }
.activity-row, .history-row { border-color: #edf1f5; }
.activity-text, .history-title { color: #53677c; }
.activity-text strong, .history-title strong { color: var(--beta-ink); }
.empty-inline { color: var(--beta-muted); font-size: 13px; }
.onboarding-card { padding: 22px; border-radius: 16px; background: linear-gradient(145deg, #f2f8fd, white); }
.onboarding-card h3 { font-size: 20px; }
.onboarding-card p, .flow-hint p { color: var(--beta-muted); font-size: 14px; }

/* Lists, search and mobile-friendly record cards */
.toolbar { gap: 9px; }
.search-box { min-width: 0; min-height: var(--beta-touch); border: 1px solid var(--beta-line); border-radius: 13px; box-shadow: 0 2px 7px rgb(20 48 77 / 3%); }
.search-box input { font-size: 16px; }
.toolbar select { min-height: var(--beta-touch); border-color: var(--beta-line); border-radius: 12px; color: #40566d; font-size: 14px; }
.table-panel { border-radius: var(--beta-radius); }
td { color: #53677c; }
.item-cell strong { color: var(--beta-ink); }
.code-pill { color: #526b84; }
.status-pill, .role-pill { padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 650; }
.user-name-cell strong { color: var(--beta-ink); font-size: 14px; }
.user-name-cell small { color: var(--beta-muted); font-size: 11px; }
.role-pill.admin { background: #edf4ff; color: #315f93; }
.user-status { font-size: 12px; }
.user-edit { min-height: 42px; border-radius: 11px; font-size: 13px; }
.history-panel { padding: 8px 20px; }
.history-row { gap: 13px; padding: 16px 0; }
.history-detail { color: var(--beta-muted); font-size: 12px; line-height: 1.45; }
.history-stamp { color: var(--beta-subtle); font-size: 11px; }

/* Record details */
.detail-back { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin: 0 0 10px; padding: 0 10px 0 0; color: #48627d; font-size: 14px; font-weight: 650; }
.detail-title-row { gap: 13px; margin-bottom: 17px; }
.detail-title-row > .loc-icon { width: 46px; height: 46px; flex: none; border-radius: 14px; font-size: 21px; }
.detail-title-row h1 { color: var(--beta-ink); font-size: clamp(24px, 6vw, 30px); line-height: 1.12; overflow-wrap: anywhere; }
.detail-title-row p { color: var(--beta-muted); font-size: 13px; }
.detail-actions { gap: 8px; }
.detail-actions .secondary-button { min-height: 46px; }
.detail-grid { gap: 13px; }
.detail-main { gap: 13px; }
.detail-card { padding: 18px; }
.detail-properties { gap: 17px 13px; }
.property-label { color: var(--beta-subtle); font-size: 11px; }
.property-value { color: var(--beta-ink); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.child-row { min-height: 60px; }
.barcode-card { min-width: 0; padding: 18px; border: 1px solid var(--beta-line); border-radius: var(--beta-radius); background: var(--beta-paper); box-shadow: var(--beta-shadow); }
.barcode-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.barcode-card-heading .eyebrow { margin-bottom: 4px; }
.barcode-card-heading h2 { margin: 0; color: var(--beta-ink); font-size: 17px; }
.barcode-format { flex: none; padding: 6px 9px; border-radius: 999px; background: var(--beta-soft); color: #496783; font-size: 11px; font-weight: 700; }
.barcode-frame { display: grid; min-height: 116px; place-items: center; overflow: hidden; padding: 11px 9px; border: 1px solid #edf1f5; border-radius: 13px; background: white; }
.barcode-svg { display: block; width: 100%; max-width: 100%; height: auto; max-height: 150px; }
.barcode-value { margin: 9px 0 0; color: #20344b; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 18px; font-weight: 700; letter-spacing: .09em; text-align: center; }
.barcode-caption { margin: 8px 0 13px; color: var(--beta-muted); font-size: 12px; line-height: 1.4; text-align: center; }
.barcode-print { width: 100%; }
.field-hint { color: var(--beta-muted); font-size: 12px; line-height: 1.4; }

/* Dialogs and scanner: every panel keeps its own scroll and safe-area padding. */
.modal-backdrop { z-index: 80; overscroll-behavior: contain; background: rgb(8 25 43 / 56%); backdrop-filter: blur(5px); }
.modal { width: min(500px, 100%); max-height: min(90dvh, 900px); overflow: auto; overscroll-behavior: contain; border: 1px solid rgb(227 234 241 / 90%); border-radius: 22px; padding: 22px; background: var(--beta-paper); box-shadow: 0 24px 80px rgb(8 25 43 / 24%); }
.modal-header { gap: 16px; margin-bottom: 17px; }
.modal-header h2 { color: var(--beta-ink); font-size: 22px; letter-spacing: -.4px; line-height: 1.2; }
.form-fields { gap: 15px; }
.field { gap: 7px; }
.field label { color: #536a81; font-size: 13px; font-weight: 650; }
.field input, .field select, .field textarea { min-height: 48px; height: 48px; border-color: #dbe4ec; border-radius: 12px; padding: 0 13px; color: var(--beta-ink); font-size: 16px; }
.field textarea { min-height: 100px; padding: 12px 13px; }
.modal-footer { position: sticky; bottom: 0; z-index: 1; gap: 9px; margin: 17px -1px -1px; padding: 12px 1px max(2px, env(safe-area-inset-bottom)); background: var(--beta-paper); }
.modal-footer .primary-button, .modal-footer .secondary-button { min-height: 50px; font-size: 14px; }
.add-menu-options { gap: 9px; }
.add-choice { min-height: 76px; border-color: var(--beta-line); border-radius: 15px; padding: 12px; }
.add-choice-icon { width: 46px; height: 46px; border-radius: 14px; }
.add-choice strong { color: var(--beta-ink); font-size: 15px; }
.add-choice small { color: var(--beta-muted); font-size: 12px; line-height: 1.35; }
.flow-hint .onboarding-button { min-height: 50px; }
.scanner-modal { width: min(520px, 100%); }
#scanner-video { width: 100%; height: clamp(210px, 38dvh, 390px); min-height: 210px; max-height: none; aspect-ratio: 4 / 3; border-radius: 16px; background: #081a2b; object-fit: cover; }
.scanner-message { min-height: 44px; color: var(--beta-muted); font-size: 14px; line-height: 1.4; }
.scanner-actions { gap: 9px; }
.scanner-actions .secondary-button { min-height: 49px; border-radius: 13px; font-size: 14px; }
.scanner-help { color: var(--beta-muted); font-size: 12px; line-height: 1.45; }
.camera-consent-modal { overflow-y: auto; }
.camera-consent-copy, .camera-secure-help p { color: var(--beta-muted); font-size: 15px; line-height: 1.5; }
.camera-secure-help, .camera-consent-actions { gap: 9px; }
.camera-secure-help .secondary-button, .camera-secure-help .primary-button, .camera-consent-actions button { min-height: 50px; border-radius: 13px; font-size: 14px; }
.toast { z-index: 100; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: min(92vw, 520px); padding: 13px 17px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 14px; font-size: 13px; line-height: 1.4; }

/* Phone and small tablet portrait workflow */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1280px) {
  html, body { width: 100%; overflow-x: hidden; }
  .sidebar { display: none !important; }
  .main-area { width: 100%; min-height: 100dvh; margin: 0 !important; padding: 0 16px calc(96px + env(safe-area-inset-bottom)) !important; }
  .topbar { position: sticky; top: 0; z-index: 15; height: 62px; min-height: 62px; margin: 0 -16px; padding: 0 13px; gap: 10px; border-bottom: 1px solid rgb(220 229 237 / 88%); background: rgb(243 246 249 / 94%); backdrop-filter: blur(18px); }
  .mobile-brand { display: flex; min-width: 0; color: var(--beta-ink); text-decoration: none; }
  .mobile-brand .brand-mark { width: 36px; height: 36px; border: 0; }
  .mobile-brand strong { font-size: 14px; }
  .mobile-brand small { display: block; }
  .breadcrumbs, .menu-toggle, #scan-open { display: none !important; }
  .top-add { display: inline-flex !important; min-height: 40px; height: 40px; padding: 0 10px; border-radius: 12px; font-size: 12px; }
  .top-actions { margin-left: auto; }
  .mobile-admin-link, .mobile-logout { display: grid !important; }
  .top-actions .icon-button { width: 42px; height: 42px; }
  .view { padding: 22px 0 14px; }
  .page-heading { align-items: flex-start; margin-bottom: 17px; }
  .page-heading h1 { font-size: clamp(25px, 7vw, 31px); }
  .page-heading p { max-width: 38ch; font-size: 13px; }
  .heading-date { display: none; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
  .stat-card { min-height: 104px; padding: 14px; border-radius: 16px; }
  .stat-card:nth-child(3) { grid-column: auto; }
  .stat-value { font-size: 29px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .panel-heading { padding: 17px 15px 13px; }
  .panel-heading h2 { font-size: 17px; }
  .panel-heading p { font-size: 12px; }
  .location-panel .panel-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .location-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .location-actions .text-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 5px; border-radius: 12px; background: var(--beta-soft); color: var(--beta-navy); font-size: 13px; font-weight: 700; }
  .location-actions .text-button:first-child { background: var(--beta-navy); color: white; }
  .location-list { display: grid; gap: 8px; padding: 0 12px 13px; }
  .location-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; grid-template-rows: auto auto; min-height: 78px; gap: 2px 10px; padding: 12px; border: 1px solid var(--beta-line); border-radius: 15px; background: white; }
  .location-row .loc-icon { grid-column: 1; grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 13px; }
  .location-row .loc-info { grid-column: 2 / 4; grid-row: 1; min-width: 0; }
  .location-row .loc-info strong { font-size: 15px; }
  .location-row .loc-info small { font-size: 12px; }
  .location-row .loc-meta { grid-column: 2; grid-row: 2; text-align: left; font-size: 11px; }
  .location-row .row-arrow { grid-column: 3; grid-row: 2; justify-self: end; margin: 0; }
  .activity-list { padding: 0 15px 9px; }
  .activity-row { gap: 11px; padding: 13px 0; }
  .activity-text { font-size: 13px; }
  .activity-time { font-size: 10px; }
  .page-heading.compact { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .page-heading.compact .primary-button { width: 100%; }
  .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 11px; }
  .search-box { grid-column: 1 / -1; width: 100%; }
  .toolbar select { width: 100%; min-width: 0; }
  .table-panel { margin: 0; border-radius: 16px; }
  .table-wrap { overflow: visible; }
  table, tbody { display: block; width: 100%; }
  thead { display: none; }
  tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; min-height: 82px; padding: 13px; border-bottom: 1px solid #edf1f5; }
  tbody td { display: block; min-width: 0; padding: 0; border: 0; font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
  tbody td:nth-child(3) { grid-column: 1 / -1; color: var(--beta-muted); font-size: 11px; }
  .item-cell { gap: 10px; }
  .item-thumb { width: 42px; height: 42px; flex: none; border-radius: 13px; }
  .item-cell strong { font-size: 14px; line-height: 1.3; }
  .item-cell small, .code-pill { font-size: 11px; }
  .status-pill { align-self: start; margin-right: 28px; font-size: 11px; }
  .row-menu { position: absolute; top: 10px; right: 7px; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; }
  .users-table tbody td:first-child { grid-column: 1 / -1; }
  .users-table tbody td:nth-child(2) { grid-column: 1; align-self: center; }
  .users-table tbody td:nth-child(3) { grid-column: 2; grid-row: 2; align-self: center; text-align: right; }
  .users-table tbody td:nth-child(4) { grid-column: 1; grid-row: 3; align-self: center; }
  .users-table tbody td:nth-child(5) { grid-column: 2; grid-row: 3; align-self: center; text-align: right; }
  .user-name-cell { min-width: 0; }
  .user-edit { min-height: 44px; }
  .detail-title-row { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .detail-title-row h1 { font-size: clamp(24px, 7vw, 30px); }
  .detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0; }
  .detail-actions .secondary-button { width: 100%; min-width: 0; padding: 0 8px; font-size: 13px; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .detail-main { gap: 12px; }
  .detail-properties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-panel { padding: 4px 15px; }
  .history-row { gap: 10px; padding: 14px 0; }
  .history-stamp { font-size: 10px; }
  .footer { padding: 16px 0 5px; color: var(--beta-subtle); font-size: 10px; }
  .mobile-nav { display: flex !important; position: fixed !important; inset: auto 0 0 !important; z-index: 30; min-height: 70px; align-items: center; justify-content: space-around; gap: 3px; padding: 6px 6px max(7px, env(safe-area-inset-bottom)); border-top: 1px solid rgb(220 229 237 / 90%); background: rgb(255 255 255 / 96%); box-shadow: 0 -5px 22px rgb(20 48 77 / 8%); backdrop-filter: blur(18px); }
  .mobile-nav-item { display: flex !important; flex: 1 1 0; min-width: 0; min-height: 54px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 3px 1px; border-radius: 13px; color: #74859a; font-size: 10px; font-weight: 650; line-height: 1.1; text-decoration: none; }
  .mobile-nav-item > span:first-child { display: grid; min-height: 22px; place-items: center; font-size: 21px; line-height: 1; }
  .mobile-nav-item.active { background: #edf3f8; color: var(--beta-navy); }
  .mobile-new { background: transparent; }
  .scan-fab { display: grid; flex: 0 0 54px; width: 54px; height: 54px; place-items: center; margin: -14px 2px 0; border: 3px solid white; border-radius: 19px; background: var(--beta-navy); box-shadow: 0 5px 15px rgb(18 55 93 / 23%); color: #fff; font-size: 24px; }
  .mobile-nav-item svg, .scan-fab svg { width: 22px; height: 22px; }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-width: none; max-height: calc(100dvh - env(safe-area-inset-top) - 8px); margin: 0; border-radius: 22px 22px 0 0; padding: 20px 17px max(14px, env(safe-area-inset-bottom)); }
  .modal-header { flex: none; margin-bottom: 17px; }
  .modal-header h2 { font-size: 21px; }
  .modal form { display: flex; min-height: 0; flex-direction: column; overflow: visible; }
  .form-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .field.full { grid-column: auto; }
  .modal-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 17px 0 0; padding: 12px 0 0; border-top: 1px solid var(--beta-line); }
  .modal-footer .primary-button, .modal-footer .secondary-button { width: 100%; min-height: 50px; }
  .scanner-modal { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #scanner-video { height: clamp(205px, 34dvh, 340px); min-height: 205px; }
  .scanner-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .scanner-actions .secondary-button { width: 100%; }
  .login-screen { display: flex; flex-direction: column; }
  .login-visual { min-height: auto; padding: 21px 20px 23px; }
  .login-brand { margin-bottom: 25px; }
  .login-copy h1 { max-width: 14ch; margin: 8px 0; font-size: 29px; }
  .login-copy p { font-size: 13px; line-height: 1.5; }
  .login-foot { margin-top: 18px; font-size: 10px; }
  .login-card-wrap { flex: 1; align-items: flex-start; padding: 27px 20px max(28px, env(safe-area-inset-bottom)); }
  .login-card { width: 100%; max-width: 480px; }
  .login-card h2 { font-size: 25px; }
  .login-card > p { font-size: 14px; }
  .login-card .field { margin-bottom: 15px; }
  .login-card .field input { height: 50px; font-size: 16px; }
  .login-card .primary-button { min-height: 52px; font-size: 15px; }
  .login-note { font-size: 12px; }
}

@media (max-width: 390px), (pointer: coarse) and (max-width: 430px) {
  .main-area { padding-right: 13px !important; padding-left: 13px !important; }
  .topbar { margin-right: -13px; margin-left: -13px; padding-right: 9px; padding-left: 10px; }
  .mobile-brand { gap: 8px; }
  .mobile-brand .brand-mark { width: 33px; height: 33px; }
  .mobile-brand small { display: none; }
  .top-actions .icon-button { width: 40px; }
  .stat-card { padding: 12px; }
  .stat-top { font-size: 11px; }
  .stat-note { font-size: 10px; }
  .mobile-nav { padding-right: 4px; padding-left: 4px; }
  .mobile-nav-item { font-size: 9px; }
  .scan-fab { flex-basis: 50px; width: 50px; height: 50px; }
}

/* The installed app is portrait-only; touch devices get a clear rotation prompt. */
.orientation-overlay { display: none; }
@media (orientation: landscape) and (pointer: coarse) {
  .orientation-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: #102d4f; color: white; text-align: center; }
  .orientation-card { width: min(100%, 360px); }
  .orientation-symbol { display: block; margin-bottom: 18px; color: #9ec9ef; font-size: 54px; line-height: 1; }
  .orientation-card h2 { margin: 0 0 8px; font-size: 25px; }
  .orientation-card p { margin: 0; color: #d4e0ec; font-size: 15px; line-height: 1.5; }
}

@media (min-width: 901px) and (pointer: fine) {
  .main-area { padding-right: clamp(30px, 4vw, 72px); padding-left: clamp(30px, 4vw, 72px); }
  .view { max-width: 1480px; margin-right: auto; margin-left: auto; }
  .topbar { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Compact, readable stock tables on desktop and portrait phones. */
.entity-table-wrap { min-width: 0; width: 100%; overflow: hidden; }
.entity-table { width: 100%; table-layout: fixed; border-collapse: collapse; white-space: normal; }
.entity-table thead { display: table-header-group; }
.entity-table th { padding: 12px 15px; color: var(--beta-subtle); font-size: 10px; letter-spacing: .055em; }
.entity-table td { min-width: 0; padding: 13px 15px; border-bottom: 1px solid var(--beta-line); color: var(--beta-muted); font-size: 13px; vertical-align: middle; }
.entity-table tbody tr { cursor: pointer; transition: background .15s ease; }
.entity-table tbody tr:hover { background: #f5f8fb; }
.entity-table tbody tr:last-child td { border-bottom: 0; }
.entity-table .entity-primary strong, .entity-table .entity-primary small { display: block; }
.entity-table .entity-primary strong { overflow-wrap: anywhere; color: var(--beta-ink); font-size: 14px; font-weight: 700; line-height: 1.25; }
.entity-table .entity-primary small { margin-top: 4px; color: var(--beta-subtle); font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.entity-table .count-cell { width: 100px; color: var(--beta-ink); font-weight: 650; }
.entity-table .mobile-summary, .mobile-inline-number, .mobile-inline-location { display: none; }
.entity-table .mobile-count-label { display: none; }
.entity-table .status-cell { width: 140px; }
.location-table th:first-child { width: 58%; }
.area-table th:first-child { width: 76%; }
.inventory-table th:first-child { width: 31%; }
.inventory-table th:nth-child(2) { width: 21%; }
.inventory-table th:nth-child(3) { width: 30%; }
.inventory-table th:nth-child(4) { width: 18%; }
.detail-item-table th:first-child { width: 46%; }
.detail-item-table th:nth-child(2) { width: 30%; }
.detail-item-table th:nth-child(3) { width: 24%; }

@media (max-width: 720px) {
  .location-list { display: block; padding: 0 13px 12px; }
  .entity-table-wrap { overflow: visible; }
  .entity-table, .entity-table tbody { display: block; width: 100%; }
  .entity-table thead { display: none; }
  .entity-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; min-height: 66px; padding: 11px 3px; border-bottom: 1px solid var(--beta-line); }
  .entity-table tbody tr:last-child { border-bottom: 0; }
  .entity-table td { display: block; min-width: 0; width: auto; padding: 0; border: 0; }
  .entity-table .entity-primary strong { font-size: 14px; }
  .entity-table .entity-primary small { margin-top: 3px; font-size: 12px; }
  .location-table .count-cell { display: none; }
  .entity-table .mobile-summary { display: block; color: var(--beta-muted); font-size: 11px; font-weight: 600; line-height: 1.4; text-align: right; white-space: nowrap; }
  .area-table .count-cell { display: block; width: auto; color: var(--beta-muted); font-size: 12px; text-align: right; white-space: nowrap; }
  .area-table .mobile-count-label { display: inline; }
  .entity-table .number-cell, .entity-table .location-cell { display: none; }
  .entity-table .mobile-inline-number { display: inline; color: var(--beta-subtle); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11px; }
  .entity-table .mobile-inline-location { display: inline; }
  .entity-table .status-cell { width: auto; text-align: right; }
  .entity-table .status-pill { display: inline-flex; min-height: 28px; align-items: center; padding: 5px 8px; font-size: 10px; white-space: nowrap; }
  .inventory-table tbody tr, .detail-item-table tbody tr { min-height: 74px; }
  .detail-card .entity-table-wrap { margin: 0 -4px; }
}

/* The latest changes stay in view on every page, while the history page keeps its full log. */
.dashboard-grid-locations { grid-template-columns: minmax(0, 1fr); }
.latest-activity-panel { margin-top: 16px; }
.latest-activity-panel .panel-heading { padding-bottom: 12px; }
.latest-activity-panel .panel-heading .text-button { display: inline-flex; align-items: center; gap: 5px; }
.latest-activity-list { padding: 0 20px 7px; }
.latest-activity-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding: 12px 0; border-top: 1px solid var(--beta-line); }
.latest-activity-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: var(--beta-soft); color: #426b91; font-size: 17px; }
.latest-activity-content { min-width: 0; }
.latest-activity-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--beta-muted); font-size: 13px; line-height: 1.35; }
.latest-activity-title strong { color: var(--beta-ink); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.latest-activity-title > span { color: var(--beta-muted); }
.latest-activity-content p { margin: 3px 0 6px; color: var(--beta-muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.latest-activity-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--beta-subtle); font-size: 11px; line-height: 1.3; }
.latest-activity-meta > span { display: inline-flex; align-items: center; gap: 5px; color: #657a90; font-weight: 600; }
.latest-activity-meta [data-mdi] { font-size: 14px; }
.latest-activity-meta time { font-variant-numeric: tabular-nums; }
.latest-activity-empty { padding: 15px 0; color: var(--beta-subtle); font-size: 13px; text-align: center; }
@media (max-width: 720px) {
  .dashboard-grid-locations { grid-template-columns: minmax(0, 1fr); }
  .latest-activity-panel { margin-top: 12px; }
  .latest-activity-panel .panel-heading { align-items: flex-start; gap: 8px; padding: 16px 15px 11px; }
  .latest-activity-panel .panel-heading h2 { font-size: 16px; }
  .latest-activity-panel .panel-heading p { font-size: 11px; }
  .latest-activity-panel .panel-heading .text-button { flex: none; min-height: 38px; padding: 0 2px; font-size: 11px; }
  .latest-activity-list { padding: 0 15px 6px; }
  .latest-activity-row { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; padding: 11px 0; }
  .latest-activity-icon { width: 32px; height: 32px; }
  .latest-activity-title { font-size: 12px; }
  .latest-activity-title strong { font-size: 13px; }
  .latest-activity-content p { font-size: 11px; }
  .latest-activity-meta { gap: 4px 10px; font-size: 10px; }
}


/* Compact, aligned history rows on entity detail pages. */
.detail-history { display: grid; gap: 0; }
.detail-history-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--line, #e5eaf0); }
.detail-history-row:last-child { border-bottom: 0; }
.detail-history-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; color: #3c6d9b; background: #edf4fa; }
.detail-history-icon svg { width: 18px; height: 18px; }
.detail-history-content { flex: 1; min-width: 0; }
.detail-history-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--ink, #152c47); font-size: 14px; }
.detail-history-heading span { color: #5b6f88; }
.detail-history-content p { margin: 4px 0 7px; color: #60748c; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.detail-history-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; color: #8292a6; font-size: 12px; }
.detail-history-meta span { display: inline-flex; align-items: center; gap: 4px; }
.detail-history-meta svg { width: 14px; height: 14px; }
@media (max-width: 640px) { .detail-history-row { gap: 9px; padding: 12px 0; } .detail-history-icon { flex-basis: 32px; width: 32px; height: 32px; } .detail-history-heading { font-size: 13px; } .detail-history-content p { font-size: 12px; } }

.danger-button { border-color: #f0caca; color: #a43e3e; background: #fffafa; }
.danger-button:hover { border-color: #e3aaaa; background: #fff1f1; }
@media (max-width: 900px), (pointer: coarse) and (max-width: 1280px) { .detail-actions .danger-button { color: #a43e3e; } }


/* Role assignment and annual digital inspection workflows. */
.role-stack { display: flex; flex-wrap: wrap; gap: 5px; }
.user-card small { max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-field { margin: 0; padding: 12px; border: 1px solid var(--beta-line); border-radius: 13px; }
.role-field legend, .checklist-picker legend { padding: 0 5px; color: #536a81; font-size: 13px; font-weight: 700; }
.role-check, .checklist-picker-row { display: flex; align-items: center; gap: 11px; min-height: 54px; padding: 8px 4px; color: var(--beta-ink); }
.role-check input[type="checkbox"], .checklist-picker-row input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 0; accent-color: var(--beta-navy); }
.role-check span, .checklist-picker-row span { display: grid; gap: 2px; }
.role-check strong, .checklist-picker-row strong { font-size: 14px; }
.role-check small, .checklist-picker-row small { color: var(--beta-muted); font-size: 12px; line-height: 1.35; }
.role-field .field-hint { display: block; margin-top: 6px; }
.inspection-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; margin: 0 0 18px; }
.inspection-stat { display: grid; gap: 5px; padding: 16px 18px; border: 1px solid var(--beta-line); border-radius: var(--beta-radius); background: var(--beta-paper); box-shadow: var(--beta-shadow); }
.inspection-stat > span { color: var(--beta-muted); font-size: 13px; font-weight: 650; }
.inspection-stat strong { color: var(--beta-ink); font-size: 28px; line-height: 1.1; }
.inspection-stat small { color: var(--beta-subtle); font-size: 12px; }
.inspection-section { margin: 0 0 18px; }
.inspection-due-list { padding: 0 18px 8px; }
.inspection-due-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 10px 0; border: 0; border-top: 1px solid var(--beta-line); background: transparent; color: var(--beta-ink); text-align: left; }
.inspection-due-mark, .checklist-card-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 13px; background: #fff3e2; color: #a46716; }
.inspection-due-mark svg, .checklist-card-icon svg { width: 20px; height: 20px; }
.inspection-due-name, .checklist-card-body { display: grid; flex: 1; min-width: 0; gap: 3px; }
.inspection-due-name strong, .checklist-card-body strong { overflow: hidden; color: var(--beta-ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.inspection-due-name small, .checklist-card-body small { overflow: hidden; color: var(--beta-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.inspection-due-date { color: #9a641b; font-size: 12px; font-weight: 650; white-space: nowrap; }
.inspection-due-status { padding: 5px 9px; border-radius: 999px; background: #fff3e2; color: #9a641b; font-size: 11px; font-weight: 700; white-space: nowrap; }
.inspection-empty { padding: 20px; color: var(--beta-muted); font-size: 14px; text-align: center; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 12px; }
.section-heading h2 { margin: 0; color: var(--beta-ink); font-size: 18px; }
.section-heading p { margin: 4px 0 0; color: var(--beta-muted); font-size: 13px; }
.checklist-card-list { display: grid; gap: 9px; }
.checklist-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 13px 16px; border: 1px solid var(--beta-line); border-radius: var(--beta-radius); background: var(--beta-paper); box-shadow: var(--beta-shadow); color: var(--beta-ink); text-align: left; }
.checklist-card-icon { background: #eaf3fb; color: #315f93; }
.checklist-progress { display: grid; justify-items: end; gap: 2px; color: var(--beta-ink); }
.checklist-progress strong { font-size: 15px; }
.checklist-progress small { color: var(--beta-muted); font-size: 11px; }
.checklist-title { align-items: center; }
.checklist-progress-large { flex: none; padding: 9px 12px; border-radius: 999px; background: #eaf3fb; color: #315f93; font-size: 13px; font-weight: 750; }
.checklist-entry-list { display: grid; gap: 12px; }
.check-entry-card { padding: 17px; }
.check-entry-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.check-entry-heading .eyebrow { overflow-wrap: anywhere; }
.check-entry-heading h2 { margin: 0; color: var(--beta-ink); font-size: 18px; }
.check-entry-heading p { margin: 3px 0 0; color: var(--beta-muted); font-size: 13px; }
.check-entry-state { flex: none; padding: 6px 10px; border-radius: 999px; background: #fff3e2; color: #9a641b; font-size: 11px; font-weight: 750; }
.check-entry-state.done { background: #e9f5ef; color: #21734e; }
.check-entry-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.check-entry-fields .field { display: grid; gap: 6px; }
.check-entry-fields .field.full { grid-column: 1/-1; }
.check-entry-fields .field > span { color: #536a81; font-size: 13px; font-weight: 650; }
.check-entry-fields select, .check-entry-fields input, .check-entry-fields textarea { width: 100%; min-height: 46px; border: 1px solid #dbe4ec; border-radius: 12px; padding: 10px 12px; background: white; color: var(--beta-ink); font: inherit; font-size: 15px; }
.check-entry-fields textarea { min-height: 84px; resize: vertical; }
.check-entry-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.check-entry-footer small { color: var(--beta-muted); font-size: 12px; }
.check-entry-footer .primary-button { min-height: 44px; }
.checklist-picker { margin: 0; padding: 10px 12px; border: 1px solid var(--beta-line); border-radius: 13px; }
.checklist-picker-list { display: grid; max-height: min(40dvh, 360px); overflow: auto; }
.checklist-picker-row { border-bottom: 1px solid #edf1f5; }
.checklist-picker-row:last-child { border-bottom: 0; }
.deleted-entry { color: var(--beta-muted); }
@media (max-width: 700px) {
  .inspection-summary { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .inspection-stat { padding: 12px 10px; border-radius: 14px; }
  .inspection-stat > span { font-size: 11px; }
  .inspection-stat strong { font-size: 23px; }
  .inspection-stat small { font-size: 10px; line-height: 1.3; }
  .inspection-due-list { padding: 0 12px 7px; }
  .inspection-due-row { flex-wrap: wrap; gap: 8px; }
  .inspection-due-mark { flex-basis: 34px; width: 34px; height: 34px; }
  .inspection-due-name { flex-basis: calc(100% - 50px); }
  .inspection-due-date { margin-left: 42px; }
  .inspection-due-status { margin-left: auto; }
  .checklist-card { gap: 9px; padding: 11px; }
  .checklist-card-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .checklist-card-body small { font-size: 10px; }
  .checklist-title { align-items: flex-start; }
  .checklist-progress-large { font-size: 11px; }
  .check-entry-card { padding: 14px; }
  .check-entry-fields { grid-template-columns: 1fr; gap: 10px; }
  .check-entry-fields .field.full { grid-column: auto; }
  .check-entry-footer { align-items: flex-start; flex-direction: column; }
  .check-entry-footer .primary-button { width: 100%; }
}

/* Shared THWin-inspired operational tables and consistent page rhythm. */
:root { --beta-radius: 14px; }
.view { display: none; }
.view.active { display: block; }
.page-heading, .detail-title-row { margin-bottom: 16px; }
.page-heading.compact { align-items: center; }
.page-heading.compact h1 { font-size: clamp(24px, 4vw, 29px); }
.panel, .stat-card, .inspection-stat { border-radius: var(--beta-radius); box-shadow: 0 2px 8px rgb(20 48 77 / 4%); }
.panel-heading { border-bottom: 1px solid var(--beta-line); }
.stats-grid { gap: 8px; }
.stat-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; min-height: 0; padding: 13px 15px; }
.stat-top { display: contents; }
.stat-top > span:first-child { color: var(--beta-muted); font-size: 12px; }
.stat-icon { grid-column: 2; grid-row: 1 / 3; }
.stat-value { grid-column: 1; grid-row: 2; margin-top: 5px; font-size: 24px; }
.stat-note { display: none; }
.location-panel .panel-heading { border-bottom: 1px solid var(--beta-line); }
.entity-table, .users-table, .record-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.entity-table th, .users-table th, .record-table th { padding: 11px 14px; border-bottom: 1px solid var(--beta-line); color: var(--beta-subtle); font-size: 10px; font-weight: 750; letter-spacing: .055em; text-align: left; text-transform: uppercase; }
.entity-table td, .users-table td, .record-table td { padding: 12px 14px; border-bottom: 1px solid var(--beta-line); color: var(--beta-muted); font-size: 13px; vertical-align: middle; overflow-wrap: anywhere; }
.users-table tbody tr:last-child td, .record-table tbody tr:last-child td, .entity-table tbody tr:last-child td { border-bottom: 0; }
.users-table tbody tr:hover, .record-table tbody tr[data-open]:hover, .record-table tbody tr[data-open-checklist]:hover { background: #f5f8fb; }
.record-table tbody tr[data-open], .record-table tbody tr[data-open-checklist] { cursor: pointer; }
.record-table td strong { color: var(--beta-ink); font-weight: 700; }
.record-table td small { display: block; margin-top: 3px; color: var(--beta-subtle); font-size: 11px; }
.history-record-table th:nth-child(1) { width: 21%; }
.history-record-table th:nth-child(2) { width: 14%; }
.history-record-table th:nth-child(3) { width: 31%; }
.history-record-table th:nth-child(4) { width: 15%; }
.history-record-table th:nth-child(5) { width: 19%; }
.history-record-table time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.history-action, .checklist-progress-inline { display: inline-flex; padding: 5px 8px; border-radius: 6px; background: #edf3f8; color: #385a7c; font-size: 11px; font-weight: 700; }
.inspection-section { overflow: hidden; }
.inspection-section .panel-heading { align-items: flex-start; }
.inspection-summary { gap: 8px; margin-bottom: 14px; }
.inspection-stat { grid-template-columns: 1fr auto; align-items: center; padding: 12px 15px; }
.inspection-stat > span { font-size: 12px; }
.inspection-stat strong { font-size: 21px; }
.inspection-stat small { display: none; }
.inspection-record-table th:first-child { width: 48%; }
.inspection-record-table th:nth-child(2) { width: 32%; }
.inspection-record-table th:nth-child(3) { width: 20%; }
.checklist-record-table th:first-child { width: 34%; }
.checklist-record-table th:nth-child(2) { width: 22%; }
.checklist-record-table th:nth-child(3) { width: 22%; }
.checklist-record-table th:nth-child(4) { width: 22%; }
.history-panel { padding: 0; }
.detail-history-row, .latest-activity-row { border-bottom: 1px solid var(--beta-line); }
.detail-history-row:last-child, .latest-activity-row:last-child { border-bottom: 0; }
.detail-history-icon, .latest-activity-icon { border-radius: 8px; }

@media (max-width: 720px) {
  .page-heading, .page-heading.compact { gap: 10px; margin-bottom: 13px; }
  .page-heading.compact { display: flex; flex-direction: column; align-items: stretch; }
  .page-heading.compact .primary-button { width: 100%; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 11px; }
  .stat-card { min-height: 64px; padding: 10px 12px; border-radius: 11px; }
  .stat-top > span:first-child { font-size: 11px; }
  .stat-icon { width: 29px; height: 29px; }
  .stat-value { font-size: 22px; }
  .panel-heading { padding: 14px 13px 11px; }
  .record-table, .record-table tbody { display: block; width: 100%; }
  .record-table thead { display: none; }
  .record-table tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px 12px; min-height: 0; padding: 11px 13px; border-bottom: 1px solid var(--beta-line); }
  .record-table tbody td { display: block; min-width: 0; padding: 0; border: 0; color: var(--beta-muted); font-size: 11px; line-height: 1.35; }
  .record-table tbody td::before { display: block; margin-bottom: 3px; color: var(--beta-subtle); content: attr(data-label); font-size: 9px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
  .record-table tbody td.entity-primary { grid-column: 1 / -1; }
  .record-table tbody td.entity-primary strong { font-size: 13px; }
  .record-table tbody td.entity-primary::before { display: none; }
  .history-record-table tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .history-record-table tbody td:first-child { grid-column: 1 / -1; }
  .history-record-table tbody td:nth-child(3) { grid-column: 1 / -1; }
  .history-record-table tbody td:nth-child(5) { text-align: right; }
  .history-record-table time { white-space: normal; }
  .inspection-record-table tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
  .inspection-record-table tbody td:first-child { grid-column: 1 / -1; }
  .inspection-record-table tbody td:last-child { text-align: right; }
  .checklist-record-table tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
  .checklist-record-table tbody td:first-child { grid-column: 1 / -1; }
  .checklist-record-table tbody td:last-child { text-align: right; }
  .inspection-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .inspection-stat { display: grid; grid-template-columns: 1fr; justify-items: start; gap: 3px; padding: 9px 10px; border-radius: 11px; }
  .inspection-stat > span { font-size: 10px; }
  .inspection-stat strong { font-size: 19px; }
  .inspection-section { margin-bottom: 11px; }
  .history-panel { padding: 0; }
  .history-record-table .history-action { padding: 4px 6px; font-size: 10px; }
  .detail-card { padding: 14px; }
  .detail-properties { gap: 12px 10px; }
  .latest-activity-row { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
  .latest-activity-icon { width: 28px; height: 28px; }
}