/* ══════════════════════════════════════════
   COMPONENTS — Reusable UI elements
   modular extract
══════════════════════════════════════════ */

/* ── Pagination ── */
.pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--border);margin-top:8px;font-size:0.78rem;color:var(--muted);}
.pagination-info{display:flex;align-items:center;gap:8px;}
.pagination-pages{display:flex;align-items:center;gap:4px;}
.pagination-btn{
  min-width:32px;height:32px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);color:var(--text);font-size:0.78rem;font-weight:500;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;
}
.pagination-btn:hover{border-color:var(--accent);color:var(--accent);}
.pagination-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.pagination-btn:disabled{opacity:0.4;cursor:default;}
.pagination-per-page{display:flex;align-items:center;gap:6px;}
.pagination-per-page select{
  border:1px solid var(--border);border-radius:6px;padding:4px 8px;
  background:var(--surface);color:var(--text);font-size:0.75rem;font-family:inherit;
}

/* ── Focus rings (a11y, crisp + brand-consistent) ──
   Keyboard-only via :focus-visible so mouse clicks stay clean. Instant
   (no animation) so it works under prefers-reduced-motion too. */
.pagination-btn:focus-visible,
.row-action-btn:focus-visible,
.view-toggle-btn:focus-visible,
.toast .t-close:focus-visible{
  outline: none; box-shadow: var(--focus-ring);
}
.toggle-switch input:focus-visible + .toggle-slider{
  outline: var(--focus-ring-w) solid var(--accent); outline-offset: 2px;
}

/* ── Tables ── */
.table-wrap{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table{border-collapse:separate;border-spacing:0;width:100%;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
thead th{background:var(--surface-2);border-bottom:2px solid var(--border);padding:10px 14px;font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:left;}
tbody td{padding:10px 14px;border-bottom:1px solid var(--border-2);font-size:0.82rem;color:var(--text);}
tbody tr:last-child td{border-bottom:none;}

/* ══ Scheduler (maint/scheduler) — compact list, no horizontal scroll ══ */
.sched-shell { overflow: hidden; }
.sched-shell-head { flex-wrap: wrap; gap: 10px; }
.sched-shell-actions { display: flex; gap: 6px; }

.sched-subnav {
  display: flex;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--border);
}
.sched-subnav__btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.sched-subnav__btn:hover { color: var(--text); background: var(--accent-soft); }
.sched-subnav__btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--accent-soft);
}

.sched-panel { padding: 12px 14px 16px; }
.sched-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.sched-toolbar--history {
  justify-content: flex-start;
}
.sched-toolbar--history .form-control {
  font-size: 12px;
  max-width: 200px;
}
.sched-toolbar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sched-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.sched-chip b { color: var(--text); margin-left: 4px; }
.sched-chip:hover { border-color: var(--accent); color: var(--text); }
.sched-chip.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.sched-chip--danger.is-active { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.sched-chip--warn.is-active { border-color: var(--warning); background: rgba(245, 158, 11, 0.12); color: var(--warning); }

.sched-search-wrap { position: relative; display: flex; align-items: center; }
.sched-search-wrap i {
  position: absolute; left: 10px; font-size: 12px; color: var(--muted); pointer-events: none;
}
.sched-search-wrap input {
  width: 180px; font-size: 12px; height: 30px; padding-left: 28px;
}
.sched-hint {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--muted);
}

.sched-jobs-list,
.sched-execs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(62vh, 640px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}
.sched-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--muted);
  font-size: 12px;
}
.sched-empty i { display: block; font-size: 20px; margin-bottom: 8px; animation: spin 1.2s linear infinite; }

/* Job row — two lines, actions always visible on the right */
.sched-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.sched-row:hover { background: var(--accent-soft); border-color: rgba(181, 136, 11, 0.3); }
.sched-row.is-disabled { opacity: 0.7; }
.sched-row.is-failed { border-left: 3px solid var(--danger); }
.sched-row.is-running { border-left: 3px solid var(--warning); }

.sched-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.sched-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.sched-toggle__track {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}
.sched-toggle__track::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: transform 0.15s;
}
.sched-toggle input:checked + .sched-toggle__track { background: var(--success); }
.sched-toggle input:checked + .sched-toggle__track::after { transform: translateX(16px); }

.sched-row__main { flex: 1; min-width: 0; }
.sched-row__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sched-row__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  min-width: 120px;
}
.sched-row__actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.sched-row__actions .btn {
  font-size: 11px;
  padding: 3px 7px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  line-height: 1;
}
.sched-row__actions .btn--run { color: var(--success); }
.sched-row__actions .btn--edit { color: var(--accent); }
.sched-row__actions .btn--del { color: var(--danger); }

.sched-row__sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
  word-break: break-word;
}
.sched-row__sub code {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(124, 58, 237, 0.08);
  color: #6d28d9;
}
.sched-row__err {
  margin-top: 4px;
  font-size: 10px;
  color: var(--danger);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Execution row — same pattern */
.sched-exec-row {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.sched-exec-row.is-failed { border-left: 3px solid var(--danger); }
.sched-exec-row__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sched-exec-row__time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 108px;
}
.sched-exec-row__job {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
  min-width: 100px;
}
.sched-exec-row__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}
.sched-exec-row__actions .btn { font-size: 10px; padding: 3px 8px; }
.sched-exec-row__sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
  word-break: break-word;
}
.sched-exec-row__sub .status-pass,
.sched-exec-row__sub .status-fail,
.sched-exec-row__sub .status-pending { font-size: 10px; padding: 2px 8px; }

.sched-staging-wrap { overflow-x: auto; }
.sched-staging-table { width: 100%; }
.sched-staging-table th,
.sched-staging-table td { font-size: 12px; }
.sched-empty-cell { text-align: center; padding: 24px; color: var(--muted); }

@media (max-width: 768px) {
  .sched-search-wrap input { width: 140px; }
  .sched-row__top { align-items: flex-start; }
  .sched-exec-row__time { min-width: auto; }
}

/* Table row hover */
tbody tr{transition:background var(--t-fast); cursor: pointer;}
tbody tr:hover{background:var(--accent-soft);}

/* ── Status badge utilities (enterprise standard) ── */
.status-pass{background:var(--success-fill);color:var(--status-pass);padding:3px 10px;border-radius:999px;font-size:0.75rem;font-weight:600;}
.status-pending{background:var(--warning-fill);color:var(--status-pending);padding:3px 10px;border-radius:999px;font-size:0.75rem;font-weight:600;}
.status-fail{background:var(--danger-fill);color:var(--status-fail);padding:3px 10px;border-radius:999px;font-size:0.75rem;font-weight:600;}
.status-info{background:var(--info-fill);color:var(--status-info);padding:3px 10px;border-radius:999px;font-size:0.75rem;font-weight:600;}

/* ── Card hover micro-interaction ── */
.stat-card,.card-section{transition:transform 0.2s ease, box-shadow 0.2s ease;}
.stat-card:hover,.card-section:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08);}

/* ── Premium card borders ── */
.card-section,.page{border-radius:var(--r);}

/* ── Cards — Simpler, attractive, futuristic (WWOF gold depth, details rich) */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.card:hover{
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: var(--shadow-md), var(--accent-glow);
  transform: translateY(-1px);
}
.card-head{
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.06), transparent);
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 12px; font-weight: 600;
}
.card-head h3{
  font-size: 12px; font-weight: 600; margin: 0;
  display: flex; align-items: center; gap: 6px;
  color: var(--text); letter-spacing: -.01em;
}
.card-head h3 i{ color: var(--accent); font-size: 12px; }
.card-body{ padding: 14px 16px 16px; }
.card + .card, .filter-toolbar + .table-wrap {
  margin-top: 14px;
}

/* Stat cards — solid left accent, no animation */
.stats-row{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 20px;
}
.stat-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t), box-shadow var(--t), border-color .1s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  border-color: var(--accent);
}
.stat-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-left-width: 4px; }
.stat-card[onclick]{ cursor: pointer; }
/* Futuristic depth for other pages (compliance stats, etc.) */
.stat-card::after {
  content: '';
  position: absolute; top: -15px; right: -15px;
  width: 40px; height: 40px;
  background: radial-gradient(circle, rgba(181,136,11,0.04) 0%, transparent 80%);
  transition: all .3s;
}
.stat-card:hover::after { transform: scale(1.3); }

/* Subtle status animation for attention tiles on other pages (compliance etc.) */
.stat-card[data-status="attention"] .stat-value {
  animation: iconBreathe 3.5s ease-in-out infinite;
}
.stat-card[data-status="attention"]:hover .stat-value {
  animation-play-state: paused;
}
.stat-icon{ width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:8px; }
.stat-card.success{ border-left-color: var(--success); }
.stat-card.warning{ border-left-color: var(--warning); }
.stat-card.danger{ border-left-color: var(--danger); }
.stat-label{
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-2); font-weight: 600; margin-bottom: 4px;
}
.stat-value{
  font-size: 24px; font-weight: 800; letter-spacing: -.03em;
  color: var(--text); line-height: 1;
}
.stat-meta{
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; font-size: 11px; color: var(--muted);
}

/* Stats row variants */
.stats-row-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }
.stats-row-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:14px; }

/* ── Pill badges ── */
.pill{
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 2px 8px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap;   /* Stops "Open" wrapping to "Ope\nn" inside narrow table cells */
}
.pill.accent{ background: var(--accent-fill); color: var(--accent-hover); }
.pill.success{ background: var(--success-fill); color: var(--success); }
.pill.warning{ background: var(--warning-fill); color: var(--warning); }
.pill.danger{ background: var(--danger-fill); color: var(--danger); }
.pill.info{ background: var(--info-fill); color: var(--info); }

/* ── Grid layouts ── */
.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-6-4{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }

/* ══════════════════════════════════════════
   BUTTONS — Clean, not gradient
══════════════════════════════════════════ */
.btn{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  transition: all var(--t-fast);
  position: relative; overflow: hidden;
}
.btn:hover{ border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-sm); }
.btn:active{ box-shadow: none; }
.btn:disabled,.btn[disabled]{ opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn:focus-visible{ outline: none; box-shadow: var(--focus-ring); }
.btn-primary{
  background: var(--success); color: #fff;
  border-color: var(--success);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover{
  background: #256029; border-color: #256029;
  box-shadow: var(--shadow-sm);
  color: #fff;
}
.btn-success{
  background: var(--success); color: #fff;
  border-color: var(--success);
}
.btn-danger{
  background: var(--danger); color: #fff;
  border-color: var(--danger);
}
.btn-ghost{
  background: transparent; border-color: transparent; box-shadow: none;
}
.btn-ghost:hover{ background: var(--accent-soft); box-shadow: none; }
.btn i{ font-size: 13px; }

/* Ripple */
.ripple{
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,.3);
  animation: ripple .5s var(--ease); pointer-events: none;
}

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-group{ margin-bottom: 12px; }
.form-label{
  display: block; font-size: 11px; font-weight: 600;
  color: var(--muted); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: .04em;
}
.form-input, .form-select{
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; font-family: inherit; background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  color: var(--text);
}
.form-input:hover, .form-select:hover{ border-color: var(--muted-2); }
.form-input:focus, .form-select:focus{
  outline: none; border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.form-input::placeholder{ color: var(--muted-2); }
.form-input:disabled, .form-select:disabled{
  opacity: .6; cursor: not-allowed; background: var(--surface-2);
}
.form-input.is-invalid, .form-select.is-invalid{ border-color: var(--danger); }
.form-input.is-valid, .form-select.is-valid{ border-color: var(--success); }

/* Upload drop zone */
.drop-zone{
  border: 1px dashed var(--border);
  border-radius: var(--r);
  padding: 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.drop-zone:hover{
  border-color: var(--accent);
  background: var(--accent-soft);
}
.drop-zone .dz-left{ display: flex; gap: 12px; align-items: center; }
.drop-zone .dz-icon{
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 18px;
}
.drop-zone .dz-title{ font-weight: 700; font-size: 13px; }
.drop-zone .dz-hint{ font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Progress bar utility ── */
.bar{height:6px;background:var(--accent);border-radius:3px;transition:width 0.4s ease;}
.bar-track{height:6px;background:var(--border);border-radius:3px;width:100%;overflow:hidden;}
.bar.success{background:var(--success);}
.bar.warning{background:var(--warning);}
.bar.danger{background:var(--danger);}
.bar.info{background:var(--info);}

/* ══════════════════════════════════════════
   TOASTS
══════════════════════════════════════════ */
.toasts{
  position: fixed; right: 16px; bottom: calc(var(--ticker-h) + 12px);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 80; width: min(380px, calc(100vw - 32px));
}
.toast{
  background: var(--surface); border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--r); box-shadow: var(--shadow-md);
  padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start;
  animation: toastIn .3s var(--ease);
}
@keyframes toastIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform: translateY(0); } }
.toast .t-icon{
  width: 28px; height: 28px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 13px; flex-shrink: 0;
}
.toast .t-icon.success{ background: var(--success-soft); color: var(--success); }
.toast .t-icon.warning{ background: var(--warning-soft); color: var(--warning); }
.toast .t-icon.danger{ background: var(--danger-soft); color: var(--danger); }
.toast .t-icon.info{ background: var(--accent-soft); color: var(--accent); }
.toast .t-body b{ display: block; font-size: 12px; color: var(--text); }
.toast .t-body span{ display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.toast .t-close{
  margin-left: auto; width: 24px; height: 24px; border-radius: 6px;
  border: none; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--muted-2);
  transition: background var(--t-fast);
  font-size: 12px;
}
.toast .t-close:hover{ background: var(--bg); }

/* ── Mini-table styles ── */
.detail-grid .mini-table{ font-size:12px; }
.detail-grid .mini-table th{
  font-size:9px; padding:4px 8px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); background:var(--surface);
}
.detail-grid .mini-table td{ padding:6px 8px; font-size:12px; }

/* ── Row actions ── */
.row-actions{
  opacity: 0; transition: opacity var(--t-fast);
  display: flex; gap: 4px;
}
tbody tr:hover .row-actions{ opacity: 1; }
.row-action-btn{
  width: 24px; height: 24px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--surface-2);
  display: grid; place-items: center; cursor: pointer;
  color: var(--muted); font-size: 11px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.row-action-btn:hover{ color: var(--accent); border-color: var(--accent); }

/* ── Expandable detail row ── */
.detail-row td{ padding:0 !important; border-bottom:1px solid var(--border-2); }
.detail-panel{
  max-height:0; overflow:hidden; transition: max-height .35s var(--ease), padding .35s var(--ease);
  background: var(--surface-2); padding: 0 16px;
}
.detail-row.open .detail-panel{
  max-height:500px; padding:14px 16px;
}
.detail-panel h4{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted-2); font-weight:700; margin:0 0 8px;
}
.detail-grid{ display:grid; grid-template-columns:3fr 2fr; gap:16px; align-items:start; }
.expand-icon{ transition:transform .2s var(--ease); display:inline-block; }
tr.expanded .expand-icon{ transform:rotate(90deg); }

/* ── Sub-badge ── */
.sub-badge.danger{ background: rgba(184,50,48,.18); color: #e8524f; }
.sub-badge.warning{ background: rgba(196,127,23,.18); color: #e0a030; }
.sub-badge.success{ background: rgba(74,124,89,.18); color: #6aad7a; }

/* ── Toggle switch ── */
.toggle-wrap{ display:flex; align-items:center; gap:8px; }
.toggle-switch{
  position:relative; width:40px; height:22px; cursor:pointer;
}
.toggle-switch input{ display:none; }
.toggle-slider{
  position:absolute; inset:0; background:var(--border);
  border-radius:11px; transition:background var(--t-fast);
}
.toggle-slider::after{
  content:''; position:absolute; width:16px; height:16px;
  background:#fff; border-radius:50%; top:3px; left:3px;
  transition:transform var(--t-fast);
  box-shadow: var(--shadow-xs);
}
.toggle-switch input:checked + .toggle-slider{ background:var(--success); }
.toggle-switch input:checked + .toggle-slider::after{ transform:translateX(18px); }

/* ── View toggle (Internal/Vendor) ── */
.view-toggle{
  display:inline-flex; border:1px solid var(--border); border-radius:var(--r-sm);
  overflow:hidden; font-size:12px; font-weight:600;
}
.view-toggle-btn{
  padding:7px 16px; cursor:pointer; border:none; background:var(--surface-2);
  color:var(--muted); font-family:inherit; font-size:12px; font-weight:600;
  transition:all var(--t-fast);
  display:flex; align-items:center; gap:5px;
}
.view-toggle-btn.active{
  background:var(--accent); color:#fff;
}
.view-toggle-btn:not(.active):hover{ background:var(--accent-soft); color:var(--accent); }

/* ── Security chip ── */
.security-chip{
  display:flex; align-items:center; gap:5px;
  padding:5px 8px; border-radius:var(--r-sm);
  border:1px solid rgba(74,124,89,.3); background:rgba(74,124,89,.08);
  font-size:11px; font-weight:600; color:var(--success);
  cursor:default;
}

/* ── Config drop zone ── */
.config-drop{
  border:1px dashed var(--border); border-radius:var(--r-sm);
  padding:14px 16px; text-align:center; cursor:pointer;
  transition:border-color var(--t), background var(--t);
  font-size:12px; color:var(--muted);
}
.config-drop:hover{ border-color:var(--accent); background:var(--accent-soft); }

/* ── Section divider ── */
.section-divider{
  display:flex; align-items:center; gap:10px;
  margin:20px 0 14px; font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; font-weight:700; color:var(--muted-2);
}
.section-divider::after{
  content:''; flex:1; height:1px; background:var(--border);
}

/* ── Reveal animations ── */
.reveal{
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal.visible{ opacity: 1; transform: none; }
.stagger-1{ transition-delay: .05s; }
.stagger-2{ transition-delay: .10s; }
.stagger-3{ transition-delay: .15s; }
.stagger-4{ transition-delay: .20s; }

/* ── Country code badge (Windows flag emoji fix) ── */
.country-code-badge{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 20px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  color: #fff; flex-shrink: 0;
}

/* ── Skeleton loader ── */
.skeleton{
  background: linear-gradient(90deg, var(--border-2) 25%, #eceef2 50%, var(--border-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }

/* ── Nice data table skeleton (professional UI for SQL/Redis loads) ──
   Used for /map browse tabs (lots, pos, etc.), inquiry results, lists.
   Mimics column content with varied width bars. */
.table-skeleton td {
  padding: 6px 8px !important;
  vertical-align: middle;
}
.table-skeleton .skeleton {
  height: 12px;
  margin: 2px 0;
  border-radius: 3px;
}

/* Branded loading icon / state (replaces plain "Loading…") */
.app-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--text-muted);
  font-size: 12px;
}
.app-loader .loader-icon {
  width: 16px;
  height: 16px;
  border: 2px solid #d1d5db; /* visible light track for the full circle */
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite !important;
  flex-shrink: 0;
  /* Functional loading spinner — must rotate to show activity.
     Exempted from animations-off and reduced-motion rules. */
}
.app-loader .loader-icon.bi {
  font-size: 16px;
  animation: spin 1s linear infinite !important;
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  /* Skeletons (decorative shimmer) can be static. */
  .skeleton { animation: none !important; }
  /* Loader spinners are kept even under reduced motion — they are
     critical progress indicators, not "background animation". */
}

/* ── Spin animation ── */
@keyframes spin{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }

/* ── Entity edit modal ── */
.entity-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:none; align-items:center; justify-content:center;
  z-index:200; overflow-y:auto; padding:20px;
}
.entity-modal-backdrop.show{ display:flex; }
.entity-modal{
  width:min(520px,calc(100vw - 40px));
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);
  animation:palIn .2s var(--ease);
}
@keyframes palIn{ from{ opacity:0; transform: translateY(-8px) scale(.98); } to{ opacity:1; transform: none; } }
.entity-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.entity-modal-head h3{ margin:0; font-size:16px; font-weight:700; }
.entity-modal-body{ padding:16px 20px; }
.entity-modal-body .form-group{ margin-bottom:12px; }
.entity-modal-foot{
  display:flex; justify-content:flex-end; gap:8px;
  padding:12px 20px; border-top:1px solid var(--border);
}

/* ── Certificate modal ── */
.coc-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center;
  z-index:200; overflow-y:auto;
  padding:20px;
}
.coc-modal-backdrop.show{ display:flex; }
.coc-modal{
  width:min(1000px,calc(100vw - 60px));
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);
  animation:palIn .25s var(--ease);
}
.coc-modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; border-top:4px solid var(--accent-deep, #5c3d2e);
  background:var(--surface-2); border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.coc-modal-header h2{
  font-size:20px; font-weight:700; margin:0; color:var(--text);
  font-family: Georgia, 'Times New Roman', serif;
}
.coc-modal-meta{
  display:flex; align-items:center; gap:24px; font-size:12px; color:var(--muted);
}
.coc-modal-meta a{ color:#8b0000; text-decoration:underline; cursor:pointer; font-weight:600; }
.coc-modal-meta a:hover{ color:#5c3d2e; }
.coc-modal-actions{ display:flex; gap:6px; }
.coc-modal-body{ padding:24px 28px; background:var(--surface); }
.coc-legal{
  margin-bottom:20px; line-height:1.7; font-size:13px;
}
.coc-legal p{ margin:0 0 8px; color:#5c3d2e; }
.coc-quad{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px;
}
.coc-quad-box{
  border:1px solid var(--border); border-radius:6px;
  padding:16px 18px; background:var(--surface-2);
}
.coc-quad-box h4{
  font-size:14px; font-weight:700; margin:0 0 12px;
  color:#8b0000;
}
.coc-quad-row{
  padding:2px 0; font-size:13px;
}
.coc-quad-row .cqr-label{ font-weight:700; color:var(--text); }
.coc-quad-row .cqr-value{ color:var(--text-2); }
.coc-line-items{ margin-top:10px; }
.coc-line-items table{ width:100%; border-collapse:collapse; font-size:12px; }
.coc-line-items thead th{
  background:var(--surface-2); padding:8px 10px; font-size:12px; font-weight:700;
  color:var(--text-2); border-bottom:2px solid var(--border); text-align:left;
}
.coc-line-items tbody td{
  padding:8px 10px; border-bottom:1px solid var(--border-2);
  color:var(--text);
}

/* ── Collapsible details ── */
details.coc-collapse{ margin-bottom:12px; }
details.coc-collapse summary{
  font-size:12px; font-weight:700; color:var(--accent);
  cursor:pointer; padding:8px 12px; border-radius:var(--r-sm);
  background:var(--accent-soft); border:1px solid rgba(181,136,11,.15);
  list-style:none; display:flex; align-items:center; gap:6px;
}
details.coc-collapse summary::-webkit-details-marker{ display:none; }
details.coc-collapse summary::before{ content:'▸'; font-size:10px; transition:transform .2s; }
details.coc-collapse[open] summary::before{ transform:rotate(90deg); }
details.coc-collapse .collapse-body{ padding:12px 0 0; }

/* ── Permission matrix ── */
.perm-matrix{ width:100%; border-collapse:collapse; font-size:12px; }
.perm-matrix th{
  background:var(--surface-2); padding:8px 10px;
  font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:600; border-bottom:1px solid var(--border);
  text-align:center; white-space:nowrap;
}
.perm-matrix th:first-child{ text-align:left; min-width:160px; }
.perm-matrix td{
  padding:7px 10px; border-bottom:1px solid var(--border-2);
  text-align:center; color:var(--text-2);
}
.perm-matrix td:first-child{ text-align:left; font-weight:500; font-size:12px; }
.perm-matrix .perm-yes{ color:var(--success); font-size:16px; font-weight:700; }
.perm-matrix .perm-own{ color:var(--warning); font-size:11px; font-weight:600; }
.perm-matrix .perm-no{ color:var(--border); font-size:13px; }
.perm-matrix tbody tr:hover{ background:var(--accent-soft); }

/* ── COC Preview ── */
.cert-preview{
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 20px; background: var(--surface);
}
.cert-preview h4{
  text-align: center; font-size: 14px; color: var(--success);
  margin: 0 0 16px; font-weight: 700;
}
.cert-row{
  display: flex; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--border-2);
  font-size: 12px;
}
.cert-row:last-child{ border: none; }
.cert-row .cr-label{ color: var(--muted); }
.cert-row .cr-value{ font-weight: 600; color: var(--text); }

/* ── Responsive components — 4 breakpoints ── */

/* Ultrawide / large desktop (>1200px): default styles apply */

@media (max-width: 1200px){
  .stats-row{ grid-template-columns: repeat(3, 1fr); }
  .results-toolbar{ gap: 6px; }
  .results-toolbar select, .results-toolbar input{ max-width: 180px !important; }
}

@media (max-width: 900px){
  .stats-row{ grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-6-4{ grid-template-columns: 1fr; }
  .page-header h1{ font-size: 20px; }
  .results-table th, .results-table td{ padding: 6px 8px; font-size: 11px; }
  .db-main-grid{ grid-template-columns: 1fr !important; }
  .db-sidebar{ order: -1; }
}

@media (max-width: 700px){
  .stats-row{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card{ padding: 10px 12px; }
  .stat-value{ font-size: 20px; }
  .form-row{ grid-template-columns: 1fr; }
  .results-toolbar{ flex-direction: column; align-items: stretch; }
  .results-toolbar select, .results-toolbar input{ max-width: 100% !important; width: 100% !important; }
  /* 2026-06-01 — drop the mobile overflow-x override; the desktop
     rule wraps to multiple rows now, which works on every width. */
  .ptab{ padding: 8px 12px; font-size: 11px; }
  .db-stats-row{ flex-direction: column; }
  .pipeline-container{ overflow-x: auto; }
  .card-body{ padding: 12px; }
}

@media (max-width: 480px){
  .stats-row{ grid-template-columns: 1fr; }
  .page-header h1{ font-size: 16px; }
  .page-header .ptab-desc{ font-size: 11px; }
  .results-table{ font-size: 10px; }
  .btn{ padding: 4px 8px; font-size: 11px; }
  .drop-zone{ padding: 16px; }
  .drop-zone p{ font-size: 12px; }
}


/* ══════════════════════════════════════════
   COMMAND PALETTE (Ctrl+K)
══════════════════════════════════════════ */
#cmd-palette {
  position: fixed; inset: 0; z-index: 10001;
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
#cmd-palette.open { display: flex; }

.cmd-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  animation: cmdFadeIn .15s ease;
}
@keyframes cmdFadeIn { from { opacity:0; } to { opacity:1; } }

.cmd-dialog {
  position: relative; z-index: 1;
  width: 560px; max-width: 94vw;
  max-height: 480px;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow: var(--shadow-xl), var(--accent-glow);
  overflow: hidden;
  animation: cmdSlideIn .2s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column;
}
@keyframes cmdSlideIn { from { opacity:0; transform:translateY(-12px) scale(.97); } to { opacity:1; transform:none; } }

.cmd-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #E4E0D7);
}
.cmd-input-wrap > i {
  font-size: 16px; color: var(--muted, #7a7268); flex-shrink: 0;
}
.cmd-input-wrap input {
  flex: 1; border: none; outline: none;
  font-size: 15px; font-weight: 500;
  color: var(--text, #2C3034);
  background: transparent;
}
.cmd-input-wrap input::placeholder { color: var(--muted, #b5b0a7); font-weight: 400; }
.cmd-input-wrap kbd {
  font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  background: var(--surface-2, #FAF8F5);
  border: 1px solid var(--border, #E4E0D7);
  color: var(--muted, #7a7268);
  flex-shrink: 0;
}

.cmd-results {
  overflow-y: auto; max-height: 380px;
  padding: 6px 0;
}
.cmd-group-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted, #b5b0a7);
  padding: 10px 18px 4px;
}
.cmd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; cursor: pointer;
  transition: background .1s;
}
.cmd-item:hover, .cmd-item.active {
  background: rgba(212, 175, 55, 0.08);
}
.cmd-item > i:first-child {
  font-size: 16px; color: var(--accent, #B5880B);
  width: 24px; text-align: center; flex-shrink: 0;
}
.cmd-item-text { flex: 1; min-width: 0; }
.cmd-item-label { font-size: 13px; font-weight: 600; color: var(--text, #2C3034); }
.cmd-item-desc { font-size: 11px; color: var(--muted, #7a7268); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-item-arrow {
  font-size: 12px; color: var(--muted, #b5b0a7);
  opacity: 0; transition: opacity .1s;
}
.cmd-item:hover .cmd-item-arrow, .cmd-item.active .cmd-item-arrow { opacity: 1; }
.cmd-empty {
  text-align: center; padding: 30px 18px;
  font-size: 13px; color: var(--muted, #7a7268);
}

/* ══════════════════════════════════════════
   RESPONSIVE / ZOOM / MOBILE — 2026-05-30
   Phone-width + high-zoom polish for the
   shared surfaces (tables, forms, modals,
   v360 pills, action icons). No framework.
══════════════════════════════════════════ */

/* Defensive: any wide table should scroll horizontally on phones rather
   than push siblings off-screen. Pair with .table-wrap where possible —
   this is the fallback for inline / legacy markup. */
@media (max-width: 768px){
  .page table,
  .results-table,
  .scheduler-execs-table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .page table thead,
  .results-table thead{ display: table-header-group; }
  .page table tbody,
  .results-table tbody{ display: table-row-group; }

  /* Side-by-side flex layouts collapse to stacked. Operators dragging the
     window narrow (or rotating a tablet) should not get cropped controls. */
  .page-header,
  .results-toolbar,
  .ptab-bar{ flex-wrap: wrap; }

  /* Form-row + grid-2 already collapse at 700px in the existing block;
     this catches the 700-768px window so phones in landscape stack too. */
  .form-row{ grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   CLEAN FILTER TOOLBAR — matches approved Master Data template
   (from Parking Lot / UI Audit recommendations)
   Replaces ad-hoc inline flex + widths.
   Use across data browse, compliance, admin lists, broker previews, etc.
══════════════════════════════════════════ */
/* Simpler, attractive, futuristic compact filter toolbar - full details visible, low space */
.filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 0;
  font-size: 12px;
}
.filter-toolbar input.form-control,
.filter-toolbar select.form-control {
  font-size: 12px;
  height: 32px;
  padding: 4px 10px;
}
.filter-toolbar .pill {
  font-size: 11px;
  padding: 3px 8px;
  align-self: center;
}
.filter-toolbar .btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
}
.filter-toolbar .spacer {
  flex: 1 1 auto;
}
.filter-toolbar .ms-wrap {
  display: inline-block;
  vertical-align: middle;
}
.filter-toolbar .ms-wrap > .form-control {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  line-height: 22px;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* Security → Audit — time-window presets + custom range */
.audit-filter-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e8e6f0);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.audit-filter-section--row {
  padding-top: 10px;
  border-top: 1px solid var(--border, #e8e6f0);
}
.audit-filter-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.audit-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.audit-preset-btn {
  border: 1px solid var(--border, #e8e6f0);
  background: var(--surface-2, #f8f7fc);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.audit-preset-btn:hover {
  border-color: var(--accent, #0078d4);
  color: var(--accent, #0078d4);
}
.audit-preset-btn.active {
  background: var(--accent-fill, rgba(0, 120, 212, 0.1));
  border-color: var(--accent, #0078d4);
  color: var(--accent-hover, #005a9e);
}
.audit-custom-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 6px;
  padding: 10px 12px;
  background: var(--surface-2, #f8f7fc);
  border-radius: 8px;
  border: 1px dashed var(--border, #e8e6f0);
}
.audit-range-field label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 3px;
}
.audit-range-field .form-control {
  font-size: 12px;
  height: 32px;
  min-width: 130px;
}
.audit-range-sep {
  color: var(--muted);
  font-size: 14px;
  padding-bottom: 6px;
}
.audit-range-summary {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.audit-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
}
.audit-log-table td.audit-ts-cell {
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.35;
}
.audit-ts-relative {
  font-weight: 700;
  color: var(--text);
}
.audit-ts-full {
  font-size: 10px;
  color: var(--muted);
}

/* Scope limited banner (from Parking Lot RBAC section) — clean, matches approved template */
.scope-limited-banner {
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--warning);
  display: flex;
  align-items: center;
  gap: 8px;
}
.scope-limited-banner .icon { font-size: 14px; }

/* Modal sizing under narrow viewports / high zoom. openModal() already
   uses `width:95vw; max-width:min(95vw, Npx)` inline, but the print/
   shared .coc-modal class still has a fixed width that doesn't reflow. */
@media (max-width: 480px){
  #crudModal > div{
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
}

/* Touch targets: icon-only action buttons in tables (edit / deactivate
   pencils) need a minimum hit area on phones. `min-width/height:32px`
   keeps the visual the same on desktop (because the existing padding
   already exceeds 32px there) and only inflates the bare-icon variant
   on touch surfaces. */
@media (max-width: 900px){
  .btn,
  button.icon-btn,
  .action-icon,
  tbody button{
    min-width: 32px;
    min-height: 32px;
  }
  /* Don't inflate the close-x in the modal header — it already has
     its own min-width:32px applied inline. Don't inflate nav-icon-btn
     which is sized explicitly in nav.css. */
}

/* v360 / lot-inquiry header — pills + badges. The container is built
   inline in workflow.js with `display:flex` but no `flex-wrap`, so on
   narrow screens the pills push the title off-screen. We can't edit
   inline styles from CSS easily, so we add a generic safety net for
   any flex row holding a `.pill` so pills wrap to the next line. */
@media (max-width: 900px){
  /* Any flex row whose direct child is a pill / badge wraps. The
     `:has` selector is supported in all modern Chromium / Safari /
     Firefox (2024+); on older browsers the layout simply falls back
     to the pre-fix behavior (pills off-screen — not worse than today). */
  div:has(> .pill){ flex-wrap: wrap; }
  div:has(> .pill).header-actions,
  div:has(> .pill).v360-header{ row-gap: 6px; }
}

/* High-zoom (150-200%) — viewport height shrinks, so modals + dropdowns
   that used fixed `max-height:480px` start spilling. Cap to viewport. */
@media (max-height: 600px){
  .cmd-dialog{ max-height: 90vh; }
  .cmd-results{ max-height: calc(90vh - 60px); }
}