/* ─── SCREEN 2: PARCEL LEDGER CARDS ─── */

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.kpi-stat-card {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-md);
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.15s;
}

.kpi-stat-card:hover {
  border-color: var(--primary);
}

.kpi-num {
  font-family: var(--font-num);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}

.kpi-label {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
}

.kpi-stat-card.kpi-warning {
  background: var(--warning-bg);
  border-color: rgba(196, 130, 10, 0.25);
}

.kpi-stat-card.kpi-warning .kpi-num { color: var(--warning); }

.kpi-stat-card.kpi-error {
  background: var(--error-bg);
  border-color: rgba(199, 74, 59, 0.25);
}

.kpi-stat-card.kpi-error .kpi-num { color: var(--error); }

/* Search Bar */
.ledger-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-pill);
  padding: 10px 16px;
  transition: all 0.2s;
}

.ledger-search-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
  background: var(--canvas);
}

.ledger-search-wrap svg { width: 17px; height: 17px; stroke: var(--muted); fill: none; stroke-width: 2; flex-shrink: 0; }

.ledger-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
}

.ledger-search-input::placeholder { color: var(--muted-soft); }

/* 1) 2-Column Compact Grid */
.room-grid-compact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.compact-room-card {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.compact-room-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20, 20, 19, 0.08);
  background: var(--surface-cream-strong);
}

.compact-room-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.compact-room-no {
  font-family: var(--font-num);
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

.compact-room-name {
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-room-sub {
  font-size: 10.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bay-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-bg);
  padding: 2px 8px;
  border-radius: var(--rounded-xs);
}

.status-badge-claude {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--rounded-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-badge-claude.ready { background: var(--success-bg); color: var(--success); }
.status-badge-claude.warning { background: var(--warning-bg); color: var(--warning); }
.status-badge-claude.error { background: var(--error-bg); color: var(--error); }

.count-chip { 
  background: var(--ink); 
  color: var(--canvas); 
  font-family: var(--font-num); 
  font-size: 11px; 
  font-weight: 700; 
  padding: 2px 6px; 
  border-radius: var(--rounded-pill); 
}

/* ─── FILTER STRIP ─── */

.ledger-filter-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
  scrollbar-width: none; /* Hide scrollbar Firefox */
}
.ledger-filter-strip::-webkit-scrollbar { display: none; } /* Hide scrollbar Webkit */

.screen-tab-pill {
  padding: 6px 14px;
  border-radius: var(--rounded-pill);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  background: var(--surface-card); /* Give it a default background */
  border: 1px solid var(--hairline);
  transition: all 0.15s;
  cursor: pointer;
  white-space: nowrap;
}
.screen-tab-pill:hover { 
  color: var(--ink); 
  background: var(--surface-cream-strong); 
}
.screen-tab-pill.active {
  background: var(--primary);
  color: #ffffff;
  font-weight: 600;
  border-color: var(--primary);
}

/* Warning Pill */
.screen-tab-pill.tab-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: transparent;
}
.screen-tab-pill.tab-warning.active {
  background: var(--warning);
  color: #ffffff;
}

/* Error Pill */
.screen-tab-pill.tab-error {
  background: var(--error-bg);
  color: var(--error);
  border-color: transparent;
}
.screen-tab-pill.tab-error.active {
  background: var(--error);
  color: #ffffff;
}

/* ─── DARK MODE FIXES FOR FILTER STRIP ─── */
[data-theme="dark"] .screen-tab-pill:not(.active) {
  background: var(--surface-card);
  color: var(--muted);
  border-color: var(--hairline);
}
[data-theme="dark"] .screen-tab-pill.active {
  color: #ffffff;
}

/* Fix warning contrast in dark mode */
[data-theme="dark"] .screen-tab-pill.tab-warning:not(.active) {
  background: rgba(212, 160, 23, 0.15); 
  color: #e8a55a; /* Brighter amber */
}
[data-theme="dark"] .screen-tab-pill.tab-warning.active {
  color: #ffffff; /* Keep white on active yellow */
}

/* Fix error contrast in dark mode */
[data-theme="dark"] .screen-tab-pill.tab-error:not(.active) {
  background: rgba(198, 69, 69, 0.20);
  color: #ef9a9a; /* Brighter red */
}
[data-theme="dark"] .screen-tab-pill.tab-error.active {
  color: #ffffff;
}