/**
 * SunMonitor — Admin Inbox + nav-badges + topbar search CSS
 *
 * Task-driven landing page styling.
 */

/* ─── Inbox KPI-buttons (4 stuks) ──────────────────────────────────── */
#engineerScreen .adm-inbox-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-6, 24px);
}

#engineerScreen .adm-inbox-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--space-4, 14px) var(--space-5, 18px);
  background: var(--surface-card, #fff);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-left-width: 4px;
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.05));
  cursor: pointer;
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease;
  font-family: inherit;
}
#engineerScreen .adm-inbox-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(15, 23, 42, 0.10));
}
#engineerScreen .adm-inbox-stat i {
  font-size: 20px;
  margin-bottom: 4px;
}
#engineerScreen .adm-inbox-stat-value {
  font-size: var(--fs-24, 24px);
  font-weight: var(--fw-bold, 700);
  color: var(--text-primary, #111827);
  line-height: 1;
  letter-spacing: -0.02em;
}
#engineerScreen .adm-inbox-stat-label {
  font-size: var(--fs-11, 11px);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
}

#engineerScreen .adm-inbox-stat-critical { border-left-color: #b91c1c; }
#engineerScreen .adm-inbox-stat-critical i { color: #b91c1c; }
#engineerScreen .adm-inbox-stat-sla      { border-left-color: #ca8a04; }
#engineerScreen .adm-inbox-stat-sla i    { color: #ca8a04; }
#engineerScreen .adm-inbox-stat-high     { border-left-color: #ea580c; }
#engineerScreen .adm-inbox-stat-high i   { color: #ea580c; }
#engineerScreen .adm-inbox-stat-unlinked { border-left-color: #0284c7; }
#engineerScreen .adm-inbox-stat-unlinked i { color: #0284c7; }

/* ─── Inbox action list (rows) ─────────────────────────────────────── */
#engineerScreen .adm-section-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

#engineerScreen .adm-inbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

#engineerScreen .adm-inbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 14px) var(--space-5, 18px);
  background: var(--surface-card, #fff);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-left-width: 4px;
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.05));
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
#engineerScreen .adm-inbox-row:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(15, 23, 42, 0.10));
}

/* Urgency-color left border */
#engineerScreen .adm-inbox-row-breach    { border-left-color: #b91c1c; }
#engineerScreen .adm-inbox-row-critical  { border-left-color: #b91c1c; }
#engineerScreen .adm-inbox-row-high      { border-left-color: #ea580c; }
#engineerScreen .adm-inbox-row-medium    { border-left-color: #94a3b8; }
#engineerScreen .adm-inbox-row-resolved  { border-left-color: #047857; opacity: 0.85; }
#engineerScreen .adm-inbox-row-resolved .adm-inbox-row-icon { background: rgba(16, 185, 129, 0.10); color: #047857; }

#engineerScreen .adm-inbox-row-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
#engineerScreen .adm-inbox-row-breach .adm-inbox-row-icon    { background: rgba(185, 28, 28, 0.10); color: #b91c1c; }
#engineerScreen .adm-inbox-row-critical .adm-inbox-row-icon  { background: rgba(185, 28, 28, 0.10); color: #b91c1c; }
#engineerScreen .adm-inbox-row-high .adm-inbox-row-icon      { background: rgba(234, 88, 12, 0.10); color: #ea580c; }
#engineerScreen .adm-inbox-row-medium .adm-inbox-row-icon    { background: var(--color-gray-100, #f3f4f6); color: var(--text-muted, #6b7280); }

#engineerScreen .adm-inbox-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#engineerScreen .adm-inbox-row-title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}

#engineerScreen .adm-inbox-row-tid {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-11, 11px);
  font-weight: var(--fw-bold, 700);
  color: var(--text-muted, #6b7280);
  padding: 2px 6px;
  background: var(--color-gray-100, #f3f4f6);
  border-radius: var(--radius-sm, 4px);
}

#engineerScreen .adm-inbox-row-name {
  font-size: var(--fs-14, 14px);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-primary, #111827);
  letter-spacing: -0.005em;
}

#engineerScreen .adm-inbox-row-auto {
  font-size: var(--fs-9, 9px);
  font-weight: var(--fw-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-info-active, #0284c7);
  background: rgba(14, 165, 233, 0.10);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
}

#engineerScreen .adm-inbox-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  font-size: var(--fs-12, 12px);
  color: var(--text-secondary, #4b5563);
}
#engineerScreen .adm-inbox-row-meta i {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin-right: 3px;
}
#engineerScreen .adm-inbox-row-unassigned {
  color: var(--color-warning-active, #92400e);
  font-style: italic;
}

#engineerScreen .adm-inbox-row-tail {
  display: flex;
  align-items: center;
  gap: var(--space-3, 10px);
  flex-shrink: 0;
}

#engineerScreen .adm-inbox-sla {
  font-size: var(--fs-10, 10px);
  font-weight: var(--fw-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--radius-sm, 4px);
}
#engineerScreen .adm-inbox-sla-breach {
  color: #fff;
  background: var(--color-danger-active, #b91c1c);
}
#engineerScreen .adm-inbox-sla-warn {
  color: #fff;
  background: var(--color-warning-active, #d97706);
}

#engineerScreen .adm-inbox-row-arrow {
  font-size: 16px;
  color: var(--text-muted, #6b7280);
  opacity: 0.5;
  transition: opacity .15s ease, transform .15s ease;
}
#engineerScreen .adm-inbox-row:hover .adm-inbox-row-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* ─── Empty state ─────────────────────────────────────────────────── */
#engineerScreen .adm-inbox-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8, 40px) var(--space-5, 20px);
  text-align: center;
  background: var(--surface-card, #fff);
  border: 1px dashed var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
}
#engineerScreen .adm-inbox-empty i {
  font-size: 48px;
  color: var(--color-success-active, #047857);
  margin-bottom: var(--space-4, 14px);
}
#engineerScreen .adm-inbox-empty h3 {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--fs-16, 16px);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-primary, #111827);
}
#engineerScreen .adm-inbox-empty p {
  margin: 0;
  font-size: var(--fs-13, 13px);
  color: var(--text-muted, #6b7280);
  max-width: 400px;
}

/* ─── Status snapshot (bottom) ─────────────────────────────────────── */
#engineerScreen .adm-inbox-snapshot {
  margin-top: var(--space-6, 24px);
}
#engineerScreen .adm-inbox-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3, 12px);
  padding: var(--space-4, 14px);
  background: var(--surface-card, #fff);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
}

#engineerScreen .adm-inbox-snap-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#engineerScreen .adm-inbox-snap-label {
  font-size: var(--fs-10, 10px);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6b7280);
}

#engineerScreen .adm-inbox-snap-value {
  font-size: var(--fs-16, 16px);
  font-weight: var(--fw-bold, 700);
  color: var(--text-primary, #111827);
  letter-spacing: -0.01em;
}

/* ─── Sidebar nav-badge (rood/oranje getal naast tab) ──────────────── */
#engineerScreen .eng-nav-badge {
  margin-left: auto;
  background: var(--color-danger-active, #b91c1c);
  color: #fff;
  font-size: var(--fs-10, 10px);
  font-weight: var(--fw-bold, 700);
  padding: 2px 7px;
  border-radius: var(--radius-full, 999px);
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}
#engineerScreen .eng-sidebar.collapsed .eng-nav-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  margin-left: 0;
  padding: 1px 5px;
  font-size: 9px;
  min-width: 16px;
}

/* ─── Sidebar keyboard-hint footer ─────────────────────────────────── */
#engineerScreen .eng-keyboard-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2, 6px);
  padding: var(--space-2, 6px) var(--space-3, 10px);
  font-size: var(--fs-10, 10px);
  color: var(--text-muted, #6b7280);
  background: var(--color-gray-100, #f3f4f6);
  border-radius: var(--radius-sm, 6px);
  margin-bottom: var(--space-2, 6px);
}
#engineerScreen .eng-keyboard-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: var(--fw-bold, 700);
  background: var(--surface-card, #fff);
  border: 1px solid var(--color-gray-300, #cbd5e1);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm, 4px);
  color: var(--text-primary, #111827);
}
#engineerScreen .eng-sidebar.collapsed .eng-keyboard-hint { display: none; }

/* ─── Topbar global search ─────────────────────────────────────────── */
.adm-global-search {
  flex: 1;
  max-width: 480px;
  margin: 0 var(--space-5, 20px);
  position: relative;
}
.adm-global-search-input {
  width: 100%;
  padding: 7px 12px 7px 36px;
  font-size: var(--fs-13, 13px);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md, 8px);
  color: rgba(255, 255, 255, 0.95);
  transition: background .15s ease, border-color .15s ease;
}
.adm-global-search-input::placeholder {
  color: rgba(255, 255, 255, 0.50);
}
.adm-global-search-input:hover,
.adm-global-search-input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.20);
  outline: none;
}
.adm-global-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.adm-global-search-kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: var(--fw-bold, 700);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm, 4px);
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

/* ─── Topbar taal-switcher ─────────────────────────────────────────── */
.adm-lang-switcher {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md, 6px);
  margin-right: var(--space-3, 10px);
}

.adm-lang-btn {
  padding: 4px 9px;
  font-size: 10px;
  font-weight: var(--fw-bold, 700);
  font-family: var(--font-mono, monospace);
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: var(--transition-fast, all .15s ease);
}
.adm-lang-btn:hover {
  color: #fff;
}
.adm-lang-btn.on {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* JS markeert de actieve taal via attribute lookup */

@media (max-width: 768px) {
  /* Mobile: verberg lang-switcher uit topbar (zit in mobile menu via toggleMobileMenu)
     zodat burger-knop voldoende tap-ruimte krijgt aan de rand. */
  .adm-lang-switcher {
    display: none !important;
  }
}

/* ─── Cmd+K modal overlay ──────────────────────────────────────────── */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(4px);
  z-index: 999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px 16px;
}
.cmdk-overlay.open { display: flex; }

.cmdk-panel {
  width: 100%;
  max-width: 560px;
  background: var(--surface-card, #fff);
  border-radius: var(--radius-xl, 14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.cmdk-header {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 14px) var(--space-5, 18px);
  border-bottom: 1px solid var(--color-gray-200, #e2e8f0);
}
.cmdk-header i {
  font-size: 18px;
  color: var(--text-muted, #6b7280);
}
.cmdk-input {
  flex: 1;
  font-size: var(--fs-16, 16px);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary, #111827);
}
.cmdk-input::placeholder { color: var(--text-muted, #6b7280); }
.cmdk-close-hint {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--color-gray-100, #f3f4f6);
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-muted, #6b7280);
}

.cmdk-results {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2, 6px);
}
.cmdk-section-title {
  padding: var(--space-2, 6px) var(--space-3, 12px);
  font-size: var(--fs-10, 10px);
  font-weight: var(--fw-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6b7280);
}
.cmdk-result {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 10px) var(--space-3, 12px);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  color: var(--text-primary, #111827);
  font-size: var(--fs-13, 13px);
}
.cmdk-result:hover,
.cmdk-result.active {
  background: var(--color-brand-soft, rgba(217, 119, 6, 0.10));
  color: var(--color-brand-active, #d97706);
}
.cmdk-result i { font-size: 16px; color: var(--text-muted, #6b7280); }
.cmdk-result-name { flex: 1; font-weight: var(--fw-semibold, 600); }
.cmdk-result-meta { font-size: var(--fs-11, 11px); color: var(--text-muted, #6b7280); font-family: var(--font-mono, monospace); }
.cmdk-empty {
  padding: var(--space-7, 28px) var(--space-5, 20px);
  text-align: center;
  font-size: var(--fs-13, 13px);
  color: var(--text-muted, #6b7280);
}

/* ─── Keyboard shortcuts help modal (Sprint C) ─────────────────────── */
.adm-shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.adm-shortcuts-overlay.open { display: flex; }

.adm-shortcuts-panel {
  background: var(--surface-card, #fff);
  border-radius: var(--radius-xl, 14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.adm-shortcuts-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4, 16px) var(--space-5, 20px);
  border-bottom: 1px solid var(--color-gray-200, #e2e8f0);
}
.adm-shortcuts-hd h2 {
  margin: 0;
  font-size: var(--fs-15, 15px);
  font-weight: var(--fw-semibold, 600);
  color: var(--text-primary, #111827);
  display: flex;
  align-items: center;
  gap: 8px;
}
.adm-shortcuts-hd h2 i { font-size: 18px; color: var(--color-brand-active, #d97706); }
.adm-shortcuts-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted, #6b7280);
  border-radius: var(--radius-sm, 6px);
}
.adm-shortcuts-close:hover { background: var(--color-gray-100, #f3f4f6); color: var(--text-primary, #111827); }
.adm-shortcuts-close i { font-size: 18px; }

.adm-shortcuts-body {
  padding: var(--space-3, 12px) var(--space-5, 20px);
  overflow-y: auto;
}

.adm-shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2, 8px) 0;
  border-bottom: 1px solid var(--color-gray-100, #f3f4f6);
}
.adm-shortcut-row:last-child { border-bottom: 0; }

.adm-shortcut-keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.adm-shortcut-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: var(--fw-bold, 700);
  background: var(--color-gray-100, #f3f4f6);
  border: 1px solid var(--color-gray-300, #cbd5e1);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm, 4px);
  color: var(--text-primary, #111827);
}

.adm-shortcut-label {
  font-size: var(--fs-13, 13px);
  color: var(--text-secondary, #4b5563);
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  #engineerScreen .adm-inbox-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #engineerScreen .adm-inbox-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .adm-global-search { display: none; }  /* Topbar te smal — gebruik cmd+K via knop */

  /* Cmd+K modal full-screen op mobile */
  .cmdk-overlay {
    padding: 0;
    align-items: stretch;
  }
  .cmdk-panel {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}

@media (max-width: 560px) {
  #engineerScreen .adm-inbox-stats {
    grid-template-columns: 1fr;
  }
  #engineerScreen .adm-inbox-row {
    flex-wrap: wrap;
  }
  #engineerScreen .adm-inbox-row-tail {
    margin-left: auto;
  }
}