/* SBR Air — Dashboard rules from index.html 17–484, scoped to body.mode-admin (V0 step 3). V2: legacy sidebar (.sidebar, .sb-*) and top bar (.topbar, .tb-*) rules removed — replaced by shared/ui/sbr-air.shell.css. Global rules live in legacy-modes.css. Exception: README.md (E2 .section-title). */

body.mode-admin #sbr-admin-app {
  display: none;
  width: 100%;
  min-height: 100vh;
  flex-direction: row;
}
body.mode-admin #sbr-admin-app {
  display: flex;
}

/* ── SIDEBAR / TOP BAR: moved to shared/ui/sbr-air.shell.css in V2 ── */

/* ── MAIN ── */
body.mode-admin .main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* ── CONTENT ── */
body.mode-admin .content {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  padding: 24px;
  min-width: 0;
}

body.mode-admin .view { display: none; }
body.mode-admin .view.active { display: block; }

/* ── METRICS ROW ── */
body.mode-admin .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
body.mode-admin .metric {
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: var(--lxr-12,12px);
  padding: 16px 18px;
}
body.mode-admin .metric-val { font-size: 28px; font-weight: var(--lxw-7,700); color: var(--text); letter-spacing: -1px; margin-bottom: 3px; }
body.mode-admin .metric-lbl { font-size: var(--lxf-11,11px); color: var(--text-muted); margin-bottom: 4px; }
body.mode-admin .metric-sub { font-size: var(--lxf-11,11px); }

/* ── GRID LAYOUTS ── */
body.mode-admin .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
body.mode-admin .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
body.mode-admin .grid-65 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin-bottom: 14px; }

/* ── PANEL ── */
body.mode-admin .panel {
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: var(--lxr-12,12px);
  overflow: visible;
}
body.mode-admin .panel-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.mode-admin .panel-title { font-size: var(--lxf-13,13px); font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
body.mode-admin .panel-action { font-size: var(--lxf-11,11px); color: var(--green); cursor: pointer; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--green-border); transition: all .15s; }
body.mode-admin .panel-action:hover { background: var(--green-dim); }
body.mode-admin .panel-body { padding: 14px; }

/* ── WORKER ROWS ── */
body.mode-admin .w-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
  cursor: pointer;
}
body.mode-admin .w-row:last-child { border-bottom: none; }
body.mode-admin .w-row:hover { background: var(--navy-hover); }
body.mode-admin .w-av {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--lxf-8,8px); font-weight: var(--lxw-7,700);
  flex-shrink: 0;
}
body.mode-admin .w-name { font-size: var(--lxf-12,12px); font-weight: 500; color: var(--text); flex: 1; }
body.mode-admin .w-meta { font-size: var(--lxf-11,11px); color: var(--text-muted); }
body.mode-admin .w-time { font-size: var(--lxf-11,11px); color: var(--text-muted); white-space: nowrap; }
body.mode-admin .w-status {
  font-size: var(--lxf-10,10px); font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
body.mode-admin .ws-in { background: var(--green-dim); color: var(--green); }
body.mode-admin .ws-out { background: var(--lxb-wlo,rgba(255,255,255,0.04)); color: var(--text-dim); }
body.mode-admin .ws-flag { background: var(--amber-dim); color: var(--amber); }
body.mode-admin .ws-late { background: var(--red-dim); color: var(--red); }

/* ── JOB ROWS ── */
body.mode-admin .j-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}
body.mode-admin .j-row:last-child { border-bottom: none; }
body.mode-admin .j-row:hover { background: var(--navy-hover); }
body.mode-admin .j-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
body.mode-admin .j-info { flex: 1; min-width: 0; }
body.mode-admin .j-title { font-size: var(--lxf-12,12px); font-weight: 500; color: var(--text); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mode-admin .j-sub { font-size: var(--lxf-11,11px); color: var(--text-muted); }
body.mode-admin .j-count { font-size: var(--lxf-11,11px); font-weight: 600; white-space: nowrap; }
body.mode-admin .j-count.ok { color: var(--green); }
body.mode-admin .j-count.warn { color: var(--amber); }
body.mode-admin .j-count.overrun { color: var(--red); }
body.mode-admin .j-count.upcoming { color: var(--text-dim); }
body.mode-admin .j-count.complete { color: #085041; background: #E1F5EE; padding: 2px 8px; border-radius: var(--lxr-10,10px); }
body.mode-admin .j-dot.overrun { animation: overrun-pulse 1.5s infinite; }

/* ── FLAG ALERT ── */
body.mode-admin .flag-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--lxb-at,rgba(245,158,11,0.04));
}
body.mode-admin .flag-alert:last-child { border-bottom: none; }
body.mode-admin .flag-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--amber-dim);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
body.mode-admin .flag-icon svg { width: 14px; height: 14px; color: var(--amber); }
body.mode-admin .flag-title { font-size: var(--lxf-12,12px); font-weight: 500; color: var(--text); margin-bottom: 2px; }
body.mode-admin .flag-desc { font-size: var(--lxf-11,11px); color: var(--text-muted); line-height: 1.4; }
body.mode-admin .flag-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
body.mode-admin .fa-btn { font-size: var(--lxf-10,10px); padding: 3px 9px; border-radius: 5px; cursor: pointer; border: 1px solid var(--border-md); background: transparent; color: var(--text-muted); font-family: inherit; transition: all .15s; }
body.mode-admin .fa-btn:hover { color: var(--text); background: var(--lxb-wlo,rgba(255,255,255,0.05)); }
body.mode-admin .fa-btn.approve { border-color: var(--green-border); color: var(--green); }
body.mode-admin .fa-btn.approve:hover { background: var(--green-dim); }

/* ── CALENDAR ── */
body.mode-admin .cal-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
body.mode-admin .cal-nav { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border-md); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--lxf-13,13px); transition: all .15s; font-family: inherit; }
body.mode-admin .cal-nav:hover { background: var(--lxb-wlo,rgba(255,255,255,0.05)); color: var(--text); }
body.mode-admin .cal-month { font-size: 15px; font-weight: 600; color: var(--text); min-width: 140px; }
body.mode-admin .cal-legend { display: flex; gap: 10px; margin-left: auto; }
body.mode-admin .cal-leg-item { display: flex; align-items: center; gap: 5px; font-size: var(--lxf-11,11px); color: var(--text-muted); }
body.mode-admin .cal-leg-dot { width: 8px; height: 8px; border-radius: 2px; }
body.mode-admin .cal-grid { display: grid; grid-template-columns: 40px repeat(7,1fr); border: 1px solid var(--border); border-radius: var(--lxr-12,12px); overflow: hidden; background: var(--navy-card); min-width: 0; }
body.mode-admin .cal-head { background: var(--navy-mid); font-size: var(--lxf-10,10px); font-weight: 600; color: var(--text-muted); text-align: center; padding: 8px 2px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
body.mode-admin .cal-head:last-child { border-right: none; }
body.mode-admin .cal-week-lbl { font-size: var(--lxf-9,9px); color: var(--text-dim); padding: 6px 2px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: center; background: var(--navy-mid); }
body.mode-admin .cal-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3px;
  min-height: 60px;
  cursor: pointer;
  transition: background .1s;
  vertical-align: top;
}
body.mode-admin .cal-cell:last-child { border-right: none; }
body.mode-admin .cal-cell:hover { background: var(--navy-hover); }
body.mode-admin .cal-cell.today { background: var(--lxb-gt,rgba(0,200,150,0.05)); }
body.mode-admin .cal-cell.today:hover { background: var(--lxb-gt,rgba(0,200,150,0.1)); }
body.mode-admin .cal-cell.empty { background: var(--lxb-kt,rgba(0,0,0,0.15)); cursor: default; }
body.mode-admin .cal-cell.empty:hover { background: var(--lxb-kt,rgba(0,0,0,0.15)); }
body.mode-admin .cal-day-num { font-size: var(--lxf-11,11px); color: var(--text-muted); margin-bottom: 3px; text-align: right; padding-right: 2px; }
body.mode-admin .cal-day-today { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: var(--lxc-0a1628,#0a1628); font-size: var(--lxf-10,10px); font-weight: var(--lxw-7,700); align-items: center; justify-content: center; float: right; }
body.mode-admin .cal-ev { font-size: var(--lxf-9,9px); padding: 1px 3px; border-radius: 3px; margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; max-width: 100%; }
body.mode-admin .ev-g1 { background: var(--lxb-gt,rgba(0,200,150,0.15)); color: var(--lxc-00c896,#00c896); }
body.mode-admin .ev-g2a { background: var(--lxb-vt,rgba(139,92,246,0.2)); color: var(--lxc-a78bfa,#a78bfa); }
body.mode-admin .ev-g2b { background: var(--lxb-bt,rgba(59,130,246,0.2)); color: var(--lxc-60a5fa,#60a5fa); }
body.mode-admin .ev-g2c { background: var(--lxb-at,rgba(245,158,11,0.2)); color: var(--lxc-fbbf24,#fbbf24); }
body.mode-admin .ev-flag { background: var(--lxb-rt,rgba(239,68,68,0.15)); color: var(--lxc-f87171,#f87171); }
body.mode-admin .cal-more { font-size: var(--lxf-9,9px); color: var(--text-dim); padding: 1px 4px; }

/* ── DAY DETAIL ── */
body.mode-admin .day-detail-panel {
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: var(--lxr-12,12px);
  padding: 16px;
  margin-top: 14px;
  display: none;
}
body.mode-admin .day-detail-panel.visible { display: block; }

/* ── TIMESHEET TABLE ── */
body.mode-admin .ts-wrap { overflow-x: auto; }
body.mode-admin .ts-table { width: 100%; border-collapse: collapse; font-size: var(--lxf-12,12px); }

/* Payroll tooltip */
body.mode-admin .ts-payroll-val { position:relative; cursor:help; }
body.mode-admin .ts-table th { text-align: left; font-size: var(--lxf-10,10px); font-weight: 600; text-transform: var(--lx-upper,uppercase); letter-spacing: var(--lx-ls,.06em); color: var(--text-dim); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
body.mode-admin .ts-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
body.mode-admin .ts-table tr:last-child td { border-bottom: none; }
body.mode-admin .ts-table tr:hover td { background: var(--navy-hover); }
body.mode-admin .ts-table tr.flagged td { background: var(--lxb-at,rgba(245,158,11,0.04)); }
body.mode-admin .ts-name { font-weight: 500; }
body.mode-admin .ts-ot { color: var(--amber); font-weight: 500; }
body.mode-admin .ts-approve-btn { font-size: var(--lxf-10,10px); padding: 3px 10px; border-radius: 5px; cursor: pointer; border: 1px solid var(--green-border); color: var(--green); background: transparent; font-family: inherit; transition: all .15s; }
body.mode-admin .ts-approve-btn:hover { background: var(--green-dim); }
body.mode-admin .ts-approve-btn.approved { background: var(--green-dim); color: var(--green); border-color: var(--green-border); cursor: default; }
body.mode-admin .ts-flag-btn { font-size: var(--lxf-10,10px); padding: 3px 10px; border-radius: 5px; cursor: pointer; border: 1px solid var(--lxl-at,rgba(245,158,11,0.3)); color: var(--amber); background: transparent; font-family: inherit; }

/* ── DISPATCH FORM ── */
body.mode-admin .dispatch-form { background: var(--navy-card); border: 1px solid var(--border); border-radius: var(--lxr-12,12px); padding: 20px; margin-bottom: 14px; }
body.mode-admin .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
body.mode-admin .form-group { display: flex; flex-direction: column; gap: 6px; }
body.mode-admin .form-label { font-size: var(--lxf-11,11px); font-weight: 500; color: var(--text-muted); text-transform: var(--lx-upper,uppercase); letter-spacing: var(--lx-ls,.06em); }
body.mode-admin .form-input {
  background: var(--navy-mid);
  border: 1px solid var(--border-md);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: var(--lxf-13,13px);
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
body.mode-admin .form-input:focus { border-color: var(--green); }
body.mode-admin .form-input::placeholder { color: var(--text-dim); }
body.mode-admin select.form-input { cursor: pointer; }
body.mode-admin .team-select-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
body.mode-admin .team-option {
  padding: 10px 12px;
  border: 1px solid var(--border-md);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
body.mode-admin .team-option:hover { border-color: var(--green-border); background: var(--green-dim); }
body.mode-admin .team-option.selected { border-color: var(--green); background: var(--green-dim); }
body.mode-admin .team-opt-name { font-size: var(--lxf-12,12px); font-weight: 500; color: var(--text); margin-bottom: 2px; }
body.mode-admin .team-opt-count { font-size: var(--lxf-10,10px); color: var(--text-muted); }
body.mode-admin .qr-preview {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--lxr-10,10px);
  padding: 16px;
  text-align: center;
  display: none;
}
body.mode-admin .qr-preview.visible { display: block; }
body.mode-admin .qr-box {
  width: 80px; height: 80px;
  background: white;
  border-radius: 6px;
  margin: 0 auto 10px;
  display: grid;
  grid-template-columns: repeat(7,9px);
  grid-template-rows: repeat(7,9px);
  gap: 1.5px;
  padding: 6px;
  align-items: center;
  justify-content: center;
}
body.mode-admin .qb { background: var(--lxb-0a1628,#0a1628); border-radius: 1px; }
body.mode-admin .qw { background: white; }
body.mode-admin .qr-label { font-size: var(--lxf-11,11px); color: var(--text-muted); }

/* ── HISTORY ── */
body.mode-admin .hist-filters { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
body.mode-admin .hist-filter-select {
  background: var(--navy-card);
  border: 1px solid var(--border-md);
  border-radius: 7px;
  padding: 7px 12px;
  color: var(--text);
  font-size: var(--lxf-12,12px);
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
body.mode-admin .hist-storage-note { margin-left: auto; font-size: var(--lxf-11,11px); color: var(--text-dim); display: flex; align-items: center; gap: 5px; }

/* ── PUNCH LOG ── */
body.mode-admin .punch-log { background: var(--navy-card); border: 1px solid var(--border); border-radius: var(--lxr-12,12px); overflow: hidden; }
body.mode-admin .pl-row { display: grid; grid-template-columns: 90px 140px 100px 90px 90px 80px 1fr; gap: 0; border-bottom: 1px solid var(--border); align-items: center; }
body.mode-admin .pl-row:last-child { border-bottom: none; }
body.mode-admin .pl-row:hover .pl-cell { background: var(--navy-hover); }
body.mode-admin .pl-head .pl-cell { background: var(--navy-mid); font-size: var(--lxf-10,10px); font-weight: 600; text-transform: var(--lx-upper,uppercase); letter-spacing: var(--lx-ls,.06em); color: var(--text-dim); }
body.mode-admin .pl-cell { padding: 10px 12px; font-size: var(--lxf-12,12px); color: var(--text); }
body.mode-admin .pl-gps-ok { color: var(--green); font-size: var(--lxf-11,11px); }
body.mode-admin .pl-gps-flag { color: var(--amber); font-size: var(--lxf-11,11px); }

/* ── TAGS ── */
body.mode-admin .tag { display: inline-block; font-size: var(--lxf-10,10px); font-weight: 500; padding: 2px 8px; border-radius: var(--lxr-10,10px); }
body.mode-admin .tag-g1 { background: var(--green-dim); color: var(--green); }
body.mode-admin .tag-g2 { background: var(--blue-dim); color: var(--blue); }
body.mode-admin .tag-flag { background: var(--amber-dim); color: var(--amber); }
body.mode-admin .tag-ot { background: var(--lxb-rt,rgba(239,68,68,0.1)); color: var(--red); }

/* ── MISC ── */
body.mode-worker .section-title { font-size: var(--lxf-13,13px); font-weight: 600; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
body.mode-admin .divider { height: 1px; background: var(--border); margin: 16px 0; }
body.mode-admin .empty-state { text-align: center; padding: 32px; color: var(--text-muted); font-size: var(--lxf-13,13px); }

/* V2 (approved plan C §3.1): Dashboard scrollbars visible again (5 px, the original Dashboard value).
   The global rule in legacy-modes.css keeps width 0 for the Worker App. Track / thumb rules are global. */
body.mode-admin ::-webkit-scrollbar { width: 5px; height: 5px; }