/*
  NINE Admin page layout pass
  This file is intentionally loaded after style.css and keeps corrections
  scoped to page families instead of pushing one global layout everywhere.
*/

:root {
  --page-gutter: clamp(22px, 2.2vw, 34px);
  --page-gap: 18px;
  --card-pad: 16px;
  --radius-page: 22px;
  --radius-row: 18px;
  --surface-row: #fff;
  --surface-row-hover: #f5f7f9;
  --line-page: rgba(17, 24, 39, .09);
}

body {
  font-weight: 500;
}

.main {
  gap: var(--page-gap) !important;
  padding: 28px var(--page-gutter) !important;
}

.section-header-bar,
.page-header,
.mail-gmail-topbar {
  min-height: 52px !important;
  margin-bottom: 8px !important;
}

.section-title {
  font-size: clamp(25px, 2vw, 31px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

.section-sub,
.section-meta-line {
  font-weight: 600 !important;
}

.comp-title,
.chip-label,
th,
.dns-stat-label,
.stat-label,
.pgb-metric-lbl,
.pgb-perf-lbl {
  font-weight: 700 !important;
}

.chip-num,
.stat-val,
.q-count-num,
.pgb-metric-val {
  font-weight: 760 !important;
}

.stat-chips,
.stats-row,
.dns-stats-row {
  gap: 14px !important;
}

.stat-chip,
.stat-card,
.dns-stat {
  min-height: 92px !important;
  padding: 16px 18px !important;
  justify-content: center !important;
}

.component-card,
.card,
.settings-card,
.node-card,
.dns-card,
.queue-card {
  border-radius: var(--radius-page) !important;
}

.comp-header,
.card-header,
.settings-card-header,
.node-header {
  padding: 14px 18px !important;
}

/* Mail: needs a dense inbox layout, not generic table spacing. */
.mail-gmail-main {
  padding: 28px var(--page-gutter) !important;
}

.mail-workspace {
  grid-template-columns: 264px minmax(0, 1fr) !important;
  gap: 18px !important;
  min-height: calc(100vh - 158px) !important;
}

.mail-workspace-sidebar {
  padding: 14px 10px !important;
}

.mail-compose-primary {
  height: 48px !important;
  margin: 0 0 14px !important;
}

.mail-folder,
.mail-mini-address {
  min-height: 38px !important;
  padding: 8px 14px !important;
}

.mail-content-card {
  min-width: 0 !important;
}

.mail-toolbar {
  min-height: 56px !important;
  padding: 12px 16px !important;
}

.gmail-row {
  grid-template-columns: 30px 28px minmax(170px, 240px) minmax(0, 1fr) 34px 94px minmax(0, 126px) !important;
  min-height: 46px !important;
  padding: 0 12px !important;
  border-radius: 0 !important;
}

.gmail-sender,
.gmail-message,
.gmail-subject,
.gmail-preview,
.gmail-date {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.gmail-message {
  display: flex !important;
  gap: 6px !important;
}

.gmail-subject {
  flex: 0 1 auto !important;
}

.gmail-preview {
  flex: 1 1 auto !important;
  max-width: none !important;
}

.gmail-hover-actions {
  min-width: 0 !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  overflow: hidden !important;
}

.gmail-hover-actions button {
  padding: 4px 8px !important;
  font-size: 11px !important;
}

/* Database: keep it app-like and dense; table content scrolls inside. */
.db-layout {
  height: 100vh !important;
  overflow: hidden !important;
}

.db-nav-col {
  width: 320px !important;
  padding: 20px 16px !important;
}

.db-main {
  padding: 30px 30px 30px 36px !important;
  overflow: hidden !important;
}

.db-viewer {
  min-width: 0 !important;
  border-radius: 24px !important;
}

.db-viewer-header {
  min-height: 72px !important;
  padding: 16px 18px !important;
}

.db-viewer-toolbar {
  display: grid !important;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.4fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
}

.db-viewer-tools-left,
.db-viewer-meta {
  min-width: 0 !important;
}

.db-viewer-meta {
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

.db-row-search {
  min-width: 220px !important;
}

.db-table-scroll {
  padding: 0 !important;
  overflow: auto !important;
  background: #fff !important;
}

.db-table-scroll table {
  border-spacing: 0 !important;
  width: max-content !important;
  min-width: 100% !important;
}

.db-table-scroll th,
.db-table-scroll td {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 1px solid var(--line-page) !important;
  padding: 12px 14px !important;
  white-space: nowrap !important;
}

.db-table-scroll tbody tr:hover td {
  background: var(--surface-row-hover) !important;
}

.db-footer {
  min-height: 56px !important;
  padding: 10px 18px !important;
}

.db-table-item {
  height: 34px !important;
  margin: 1px 0 !important;
}

/* Redis: reduce internal borders and prevent meter/text collisions. */
.redis-main .component-grid,
.redis-grid {
  gap: 16px !important;
}

.redis-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.redis-kv-grid {
  gap: 12px !important;
  padding: 14px !important;
}

.redis-kv-grid div {
  min-height: 82px !important;
  padding: 14px !important;
}

.redis-memory-meter {
  padding: 16px 18px 10px !important;
}

.redis-memory-track {
  height: 10px !important;
  margin-bottom: 16px !important;
}

.redis-memory-meta {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.redis-memory-meta strong {
  font-size: 22px !important;
  line-height: 1.1 !important;
}

.redis-main table {
  border-spacing: 0 6px !important;
}

/* Services: operational table should stay compact and readable. */
.svc-list {
  padding: 10px 10px 14px !important;
}

.svc-row {
  grid-template-columns: 12px minmax(180px, 1.25fr) 110px 74px minmax(140px, .75fr) minmax(120px, .7fr) 96px !important;
  min-height: 42px !important;
}

.svc-row.svc-header {
  margin-bottom: 6px !important;
}

.svc-resource {
  gap: 4px !important;
}

/* Storage: dashboard cards, chart and CDN nodes need section rhythm. */
.storage-main .stats-row,
.storage-main .component-grid {
  gap: 16px !important;
}

.storage-main .section-divider {
  margin-top: 34px !important;
}

.storage-main .node-card {
  margin-top: 12px !important;
}

.storage-main .node-body {
  grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)) !important;
}

.storage-main .node-section {
  min-height: 132px !important;
}

/* DNS: keep left panel useful without oversized blank areas. */
.dns-console {
  grid-template-columns: 360px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

.dns-zones-panel {
  position: sticky !important;
  top: 24px !important;
  min-height: 0 !important;
}

.dns-zone-list {
  padding: 10px !important;
}

.dns-zone-item {
  min-height: 42px !important;
}

.dns-records-head {
  min-height: 68px !important;
  padding: 14px 18px !important;
}

.dns-records-table {
  border-spacing: 0 8px !important;
}

.dns-record-content {
  max-width: 480px !important;
}

/* Generic monitoring pages: keep them calm and consistent. */
.main:not(.db-main):not(.files-main):not(.mail-gmail-main) .component-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.main:not(.db-main):not(.files-main):not(.mail-gmail-main) .component-card.span-2 {
  grid-column: 1 / -1 !important;
}

.simple-row,
.inbox-preview-item,
.mail-address-row {
  min-height: 38px !important;
}

@media (max-width: 1180px) {
  .mail-workspace,
  .dns-console,
  .redis-grid,
  .storage-main .node-body {
    grid-template-columns: 1fr !important;
  }

  .db-viewer-toolbar {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .main,
  .mail-gmail-main,
  .db-main {
    padding: 18px !important;
  }

  .main:not(.db-main):not(.files-main):not(.mail-gmail-main) .component-grid,
  .stat-chips,
  .stats-row,
  .dns-stats-row {
    grid-template-columns: 1fr !important;
  }

  .gmail-row {
    grid-template-columns: 28px minmax(0, 1fr) 84px !important;
  }

  .mail-star,
  .gmail-row-icons,
  .gmail-preview,
  .gmail-hover-actions {
    display: none !important;
  }
}

/* Last focused pass after screenshot review. */
.db-table-scroll {
  border-top: 1px solid var(--line-page) !important;
}

.db-table-scroll th,
.db-table-scroll td {
  border-right-color: rgba(17, 24, 39, .075) !important;
}

.db-table-scroll th:last-child,
.db-table-scroll td:last-child {
  border-right: 0 !important;
}

.db-table-scroll tbody td {
  border-top-color: rgba(17, 24, 39, .07) !important;
  border-bottom-color: rgba(17, 24, 39, .07) !important;
}

.db-cell-btn {
  max-width: 280px !important;
}

.db-cell-text {
  max-width: 250px !important;
}

.redis-list {
  padding: 8px 12px 14px !important;
}

.redis-list-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 48px !important;
  padding: 10px 6px !important;
  border-bottom: 1px solid rgba(17, 24, 39, .07) !important;
}

.redis-list-row:last-child {
  border-bottom: 0 !important;
}

.redis-list-row > div {
  min-width: 0 !important;
  overflow: hidden !important;
}

.redis-list-row strong,
.redis-list-row span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Hard cleanup after visual review: no beige selection, no grey page wash. */
:root {
  --bg: #ffffff !important;
  --surface-page: #ffffff !important;
  --surface: #ffffff !important;
  --surface-card: #ffffff !important;
  --surface-sidebar: #ffffff !important;
  --surface-soft: #ffffff !important;
  --surface-hover: #f4f6f8 !important;
  --accent: #111827 !important;
  --accent-dk: #000000 !important;
  --accent-strong: #111827 !important;
  --accent-soft: #f1f3f5 !important;
  --accent-soft-2: #e9edf2 !important;
  --accent-ring: rgba(17, 24, 39, .16) !important;
  --line-soft: rgba(17, 24, 39, .08) !important;
  --line: rgba(17, 24, 39, .12) !important;
  --border: rgba(17, 24, 39, .10) !important;
}

html,
body,
.app-layout,
.main,
.login-wrapper,
.services-col,
.subservices-col,
.mail-gmail-main,
.db-layout,
.db-main,
.files-main {
  background: #fff !important;
  background-image: none !important;
}

.main {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.service-link.active,
.subservice-link.active,
.db-layout .db-table-item.active,
.files-entry.is-active > .files-entry-row,
.dns-zone-item.active,
.mail-folder.active,
.tab-btn.active,
.db-tab-btn.active {
  background: #eef1f4 !important;
  color: #111827 !important;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .08) !important;
}

.service-link.active::before,
.subservice-link.active::before,
.db-layout .db-table-item.active::before,
.dns-zone-item.active::before,
.files-entry.is-active > .files-entry-row::before {
  background: #111827 !important;
}

.section-icon,
.badge,
.pill,
.comp-badge,
.db-total-badge,
.tab-count,
.soon-badge,
.global-badge {
  background: #fff !important;
  color: #111827 !important;
  border-color: rgba(17, 24, 39, .12) !important;
}

.btn-primary,
button.btn-primary,
.mail-compose-primary {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #fff !important;
}

.btn-primary:hover,
button.btn-primary:hover,
.mail-compose-primary:hover {
  background: #000 !important;
  border-color: #000 !important;
}

/* Mail should be a workspace, not a floating card with padding around it. */
.mail-gmail-main {
  padding: 22px 30px 0 30px !important;
  gap: 14px !important;
}

.mail-gmail-topbar {
  margin-bottom: 0 !important;
}

.mail-workspace {
  gap: 0 !important;
  min-height: calc(100vh - 128px) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: 22px !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.mail-workspace-sidebar {
  border: 0 !important;
  border-right: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.mail-content-card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.mail-toolbar {
  border-top: 0 !important;
}

.gmail-row {
  border-radius: 0 !important;
}

.gmail-row:hover,
.gmail-row.selected {
  background: #f5f7f9 !important;
}

/* Skill-guided polish pass: dense admin UI, page-specific, screenshot driven. */
:root {
  --admin-blue: #2563eb;
  --admin-blue-soft: #dbeafe;
  --admin-ink: #111827;
  --admin-muted: #6b7280;
  --admin-row: #fbfcfd;
  --admin-row-hover: #f3f6f8;
}

.stat-chips {
  align-items: stretch !important;
}

.stat-chip {
  min-height: 76px !important;
  padding: 13px 18px !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .035) !important;
}

.chip-label {
  font-size: 11px !important;
  line-height: 1.15 !important;
  color: rgba(17, 24, 39, .66) !important;
}

.chip-num {
  font-size: clamp(22px, 1.8vw, 28px) !important;
  line-height: 1.05 !important;
  color: #3b3024 !important;
}

.component-card {
  box-shadow: 0 10px 30px rgba(15, 23, 42, .04) !important;
}

.component-card:hover {
  transform: none !important;
}

.analytics-chart-wrap {
  height: 190px !important;
  padding: 10px 18px 14px !important;
}

.queue-counts-grid {
  gap: 10px !important;
}

.q-count-box {
  min-height: 68px !important;
  border-radius: 16px !important;
  padding: 12px !important;
}

.simple-row {
  padding: 8px 0 !important;
}

/* Reporting pages should not look empty when the data is small. */
.main .component-grid .component-card:not(.span-2) .comp-body {
  min-height: 0 !important;
}

.main .component-grid .component-card:not(.span-2) {
  min-height: 0 !important;
}

/* Mail refinement: inbox density without oversized command surfaces. */
.mail-gmail-topbar {
  grid-template-columns: minmax(220px, 260px) minmax(320px, 1fr) auto !important;
  gap: 16px !important;
}

.mail-search-wrap {
  min-height: 42px !important;
  border-radius: 18px !important;
}

.mail-compose-primary {
  height: 42px !important;
  width: calc(100% - 16px) !important;
  margin: 0 8px 14px !important;
  border-radius: 18px !important;
}

.mail-workspace-sidebar {
  padding-top: 14px !important;
}

.gmail-row {
  min-height: 43px !important;
}

.gmail-row:hover,
.gmail-row.selected {
  background: var(--admin-row-hover) !important;
}

.gmail-row:hover .gmail-hover-actions {
  background: linear-gradient(90deg, rgba(243, 246, 248, 0), var(--admin-row-hover) 18%) !important;
}

.gmail-hover-actions button {
  background: #fff !important;
  border: 1px solid rgba(17, 24, 39, .08) !important;
  border-radius: 999px !important;
}

/* Database: keep the browser feeling, remove bubble-like table cells. */
.db-nav-col {
  width: 304px !important;
}

.db-main {
  padding: 24px 24px 24px 32px !important;
}

.db-viewer {
  border-radius: 20px !important;
}

.db-viewer-header {
  min-height: 64px !important;
  padding: 13px 18px !important;
}

.db-viewer-toolbar {
  padding: 12px 18px !important;
}

.db-table-scroll th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: #f7f8fa !important;
}

.db-table-scroll th,
.db-table-scroll td {
  padding: 10px 12px !important;
  border-right: 1px solid rgba(17, 24, 39, .055) !important;
  border-bottom: 1px solid rgba(17, 24, 39, .06) !important;
}

.db-table-scroll td {
  background: #fff !important;
}

.db-table-scroll tbody tr:nth-child(even) td {
  background: #fcfdfe !important;
}

.db-table-scroll tbody tr:hover td {
  background: #f1f5f9 !important;
}

.db-cell-btn,
.db-cell-text {
  border-radius: 10px !important;
}

.db-cell-btn {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .08) !important;
}

.db-footer {
  min-height: 50px !important;
}

/* Redis: metrics are data, not decorative capsules. */
.redis-kv-grid {
  gap: 10px !important;
}

.redis-kv-grid div {
  min-height: 64px !important;
  padding: 11px 12px !important;
  border-radius: 16px !important;
}

.redis-kv-grid strong {
  font-size: 16px !important;
}

.redis-memory-meter {
  padding: 12px 18px 8px !important;
}

.redis-memory-meta strong {
  font-size: 20px !important;
}

/* Errors: compact filters and console-like rows. */
.errors-toolbar {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) 140px auto !important;
  gap: 10px !important;
  padding: 10px 0 12px !important;
  border-bottom: 0 !important;
}

.errors-toolbar select {
  height: 38px !important;
  border-radius: 14px !important;
  background: #fff !important;
}

.errors-toolbar .btn {
  height: 38px !important;
  border-radius: 14px !important;
}

.error-row {
  grid-template-columns: 120px 84px 112px minmax(260px, 1fr) 86px !important;
  gap: 12px !important;
  min-height: 54px !important;
  padding: 10px 16px !important;
  border-bottom-color: rgba(17, 24, 39, .075) !important;
}

.error-row:nth-child(even) {
  background: #fcfdfe !important;
}

.error-row:hover {
  background: #f4f7fa !important;
}

.severity {
  border-radius: 999px !important;
  padding: 3px 8px !important;
}

/* Token/dev tables inherited too much purple and pill treatment. */
.main button[style*="99,102,241"],
.main button[style*="99, 102, 241"],
.main button[style*="129,140,248"] {
  background: #eef2ff !important;
  color: #1f2937 !important;
  border-color: rgba(37, 99, 235, .24) !important;
}

.main span[style*="#635bff"],
.main span[style*="99,102,241"],
.main span[style*="99, 102, 241"] {
  color: var(--admin-blue) !important;
}

.main [style*="background:#635bff"],
.main [style*="background: #635bff"] {
  background: var(--admin-blue) !important;
}

.disk-bar-fill {
  background: var(--admin-blue) !important;
}

/* Database second review: cells must read as a table, not permanent inputs. */
.db-table-scroll td {
  padding: 0 !important;
}

.db-table-scroll .db-cell-btn {
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 10px !important;
}

.db-table-scroll .db-cell-btn:hover,
.db-table-scroll .db-cell-btn:focus-visible {
  background: #eef2f6 !important;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .10) !important;
}

.db-table-scroll .db-cell-text {
  max-width: 260px !important;
}

.db-table-scroll .db-cell-with-fk {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 0 !important;
}

.db-table-scroll .db-fk-jump {
  border-radius: 999px !important;
  width: 28px !important;
  height: 28px !important;
  margin-right: 4px !important;
}

@media (max-width: 900px) {
  .mail-gmail-topbar,
  .errors-toolbar {
    grid-template-columns: 1fr !important;
  }

  .stat-chip {
    min-height: 70px !important;
  }
}

/* Logs/errors: dense operational list, no wasted padding around rows. */
.errors-toolbar {
  padding: 0 !important;
  border: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important;
  gap: 10px !important;
}

.errors-toolbar select {
  height: 38px !important;
  border-radius: 999px !important;
  background: #fff !important;
}

.errors-toolbar .btn {
  height: 38px !important;
  padding: 0 16px !important;
}

.errors-list {
  padding: 0 !important;
}

.error-row {
  grid-template-columns: 124px 88px 112px minmax(280px, 1fr) 92px !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  min-height: 54px !important;
  border-bottom-color: rgba(17, 24, 39, .08) !important;
}

.error-row:hover {
  background: #f7f8fa !important;
}

.error-meta {
  margin-top: 2px !important;
}

.severity {
  border-radius: 999px !important;
}

/* Data-heavy cards should not carry decorative internal padding. */
.db-layout .db-viewer,
.component-card,
.card,
.settings-card,
.node-card,
.dns-card,
.queue-card,
.mail-content-card {
  box-shadow: none !important;
}

.db-viewer-toolbar,
.db-footer,
.comp-header,
.card-header,
.settings-card-header,
.node-header,
.dns-records-head {
  background: #fff !important;
}

.stat-chip,
.stat-card,
.dns-stat {
  box-shadow: none !important;
}

.mini-bar,
.disk-bar,
.progress-track,
.redis-memory-track,
.token-bar,
.breakdown-bar-wrap {
  background: #edf0f3 !important;
}

.mini-bar-fill,
.disk-bar-fill,
.progress-fill,
.redis-memory-track span,
.token-fill {
  background: #111827 !important;
}

@media (max-width: 900px) {
  .errors-toolbar {
    grid-template-columns: 1fr !important;
  }
}

/* Applied critique pass: denser operations, smaller reporting charts. */
.main:not(.mail-gmail-main):not(.db-main):not(.files-main) {
  gap: 14px !important;
}

.stat-chip,
.stat-card,
.dns-stat {
  min-height: 76px !important;
  padding: 13px 18px !important;
}

.chip-num,
.stat-val {
  font-size: clamp(22px, 1.7vw, 29px) !important;
}

.analytics-chart-wrap,
.component-card canvas {
  max-height: 210px !important;
}

.component-card:has(.analytics-chart-wrap),
.storage-main .component-card:has(canvas),
.main .component-card.span-2:has(canvas) {
  min-height: 0 !important;
}

.component-card:has(.analytics-chart-wrap) .comp-body,
.storage-main .component-card:has(canvas) .comp-body {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.queue-counts-grid {
  gap: 10px !important;
}

.q-count-box {
  min-height: 58px !important;
  padding: 10px 12px !important;
}

.simple-row {
  min-height: 34px !important;
}

/* Database: reduce the spreadsheet feeling while keeping dense scanability. */
.db-main {
  padding: 24px 24px 24px 32px !important;
}

.db-nav-col {
  width: 304px !important;
}

.db-viewer-header {
  min-height: 64px !important;
}

.db-viewer-toolbar {
  padding: 11px 18px !important;
}

.db-table-scroll th,
.db-table-scroll td {
  padding: 10px 12px !important;
  border-right: 0 !important;
}

.db-table-scroll tbody tr {
  box-shadow: inset 0 -1px 0 rgba(17, 24, 39, .07) !important;
}

.db-table-scroll tbody td {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.db-table-scroll tbody tr:nth-child(even) td {
  background: #fbfcfd !important;
}

.db-footer {
  min-height: 50px !important;
}

/* Logs/errors: operational console density. */
.errors-toolbar {
  margin-top: -4px !important;
}

.errors-toolbar + .stat-chips {
  margin-top: 4px !important;
}

.error-row {
  min-height: 46px !important;
  padding: 7px 16px !important;
  align-items: center !important;
}

.error-message {
  line-height: 1.25 !important;
}

.error-time,
.error-meta,
.error-id {
  line-height: 1.25 !important;
}

/* Services/Redis: lower row height, clearer progress tracks. */
.svc-row {
  min-height: 36px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.svc-row.svc-header {
  min-height: 30px !important;
}

.svc-list {
  padding: 6px 10px 10px !important;
}

.mini-bar {
  height: 4px !important;
}

.redis-grid {
  gap: 14px !important;
}

.redis-kv-grid {
  padding: 10px 14px !important;
}

.redis-kv-grid div {
  min-height: 64px !important;
  padding: 12px !important;
}

.redis-memory-meter {
  padding: 14px 18px 6px !important;
}

.redis-list-row {
  min-height: 42px !important;
  padding: 7px 6px !important;
}

/* Empty/light reporting pages should not look deserted. */
.main .component-card {
  min-height: 0 !important;
}

.empty,
.empty-sm,
.files-empty {
  color: #6b7280 !important;
}

.files-main {
  padding: 24px 28px !important;
}

.files-editor-shell {
  border-left: 0 !important;
}

.files-empty {
  min-height: calc(100vh - 170px) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Placement pass (skills-guided, neutre) — 2026-06-13
   Objectif : supprimer les vides involontaires, aligner, garder la densite.
   ────────────────────────────────────────────────────────────────────────── */

/* Les cartes d'une grille se dimensionnent a leur contenu (plus d'etirement
   qui laisse une carte courte avec un grand vide en bas a cote d'une plus haute). */
.component-grid,
.analytics-grid,
.detail-grid-2 {
  align-items: start !important;
}

/* Reporting : les encadres "1 chiffre" ne doivent pas flotter dans un grand vide.
   On resserre la hauteur et on garde le contenu centre et lisible. */
.queue-counts-grid .q-count-box {
  min-height: 54px !important;
  padding: 12px 14px !important;
  gap: 4px !important;
}
.queue-counts-grid .q-count-num { line-height: 1 !important; }

/* KPI chips : contenu colle en haut, sans grand vide en bas. */
.stat-chip,
.stat-card,
.dns-stat {
  justify-content: flex-start !important;
  gap: 6px !important;
}

/* Lignes de liste reporting : rythme regulier, separateur discret. */
.simple-row {
  min-height: 36px !important;
  border-bottom: 1px solid var(--line-soft) !important;
}
.simple-row:last-child { border-bottom: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   FONDATIONS — animations sobres + elements visuels reutilisables (neutre)
   Opt-in, reduced-motion safe. Leger sur les pages denses.
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes nine-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nine-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nine-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nine-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Entree douce, en cascade, du contenu principal (pages standard .main). */
.main > * { animation: nine-fade-up .34s cubic-bezier(.22,.61,.36,1) both; }
.main > *:nth-child(1) { animation-delay: .02s; }
.main > *:nth-child(2) { animation-delay: .06s; }
.main > *:nth-child(3) { animation-delay: .10s; }
.main > *:nth-child(4) { animation-delay: .14s; }
.main > *:nth-child(5) { animation-delay: .18s; }
.main > *:nth-child(n+6) { animation-delay: .20s; }

/* Cartes : survol subtil et coherent (reporting/overview). */
.component-card,
.dns-card,
.queue-card {
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.component-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(15,23,42,.06), 0 16px 34px rgba(15,23,42,.08);
}

/* Lignes de liste / table : transition de hover propre. */
.simple-row, .gmail-row, tbody tr, .subservice-link, .service-link,
.db-table-item, .mail-list-item, .health-item {
  transition: background-color .14s ease, color .14s ease;
}

/* Barres de progression : remplissage anime + couleur data neutre. */
.disk-bar-fill, .mini-bar-fill, .bar-fill, .breakdown-bar {
  transform-origin: left center;
  animation: nine-bar-grow .5s cubic-bezier(.22,.61,.36,1) both;
}

/* — Eléments visuels reutilisables — */

/* Label de section discret avec filet (separe les blocs sans lourdeur). */
.nine-sec {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-2);
}
.nine-sec::after {
  content: ""; flex: 1; height: 1px;
  background: var(--line-soft);
}

/* Mini sparkbar (lecture rapide d'une proportion). */
.nine-spark { display: flex; gap: 3px; height: 8px; border-radius: 999px; overflow: hidden; background: #eef1f4; }
.nine-spark > span { display: block; height: 100%; animation: nine-bar-grow .5s cubic-bezier(.22,.61,.36,1) both; }

/* Pastille de statut homogene. */
.nine-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.nine-dot.ok { background: var(--green); }
.nine-dot.warn { background: var(--yellow); }
.nine-dot.err { background: var(--red); }
.nine-dot.idle { background: rgba(17,24,39,.28); }

/* Skeleton de chargement neutre. */
.nine-skeleton {
  background: linear-gradient(90deg, #f1f3f5 25%, #f8fafc 37%, #f1f3f5 63%);
  background-size: 400% 100%;
  border-radius: 8px;
  animation: nine-shimmer 1.3s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
  .main > *, .disk-bar-fill, .mini-bar-fill, .bar-fill, .breakdown-bar,
  .nine-spark > span, .nine-skeleton { animation: none !important; }
  .component-card { transition: none !important; }
  .component-card:hover { transform: none !important; }
}
/* ═══════════════ FIN FONDATIONS ═══════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   PAGE OVERVIEW — hiérarchie, lecture rapide, séparation des sections
   ══════════════════════════════════════════════════════════════════════════ */

/* Entrée en cascade des cartes de la grille et des KPI (plus lisible qu'un bloc). */
.component-grid > *,
.stat-chips > * { animation: nine-fade-up .34s cubic-bezier(.22,.61,.36,1) both; }
.component-grid > *:nth-child(1){animation-delay:.04s}
.component-grid > *:nth-child(2){animation-delay:.08s}
.component-grid > *:nth-child(3){animation-delay:.12s}
.component-grid > *:nth-child(4){animation-delay:.16s}
.component-grid > *:nth-child(5){animation-delay:.20s}
.component-grid > *:nth-child(6){animation-delay:.24s}
.component-grid > *:nth-child(n+7){animation-delay:.26s}
.stat-chips > *:nth-child(1){animation-delay:.03s}
.stat-chips > *:nth-child(2){animation-delay:.06s}
.stat-chips > *:nth-child(3){animation-delay:.09s}
.stat-chips > *:nth-child(4){animation-delay:.12s}
.stat-chips > *:nth-child(5){animation-delay:.15s}
.stat-chips > *:nth-child(6){animation-delay:.18s}

/* KPI chips : liseré supérieur d'accent au survol pour le repérage. */
.stat-chip { position: relative; overflow: hidden; }
.stat-chip::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.stat-chip:hover::before { transform: scaleX(1); }

/* Barre de navigation rapide : segmented control propre. */
.email-command-bar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px; margin-bottom: 16px;
  background: #f4f6f8; border-radius: 12px; width: fit-content;
}
.email-command {
  padding: 7px 14px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  border: 0; background: transparent; cursor: pointer;
  transition: background .15s, color .15s;
}
.email-command:hover { color: var(--text); background: #fff; }
.email-command.active { color: var(--text); background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.06); }

/* Boîte de réception : non-lus repérables d'un coup d'œil. */
.inbox-preview-item {
  position: relative; padding: 11px 14px 11px 22px !important;
  border-bottom: 1px solid var(--line-soft);
}
.inbox-preview-item:last-child { border-bottom: 0; }
.inbox-preview-item.unread::before {
  content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--admin-blue);
}
.inbox-preview-item.unread .inbox-item-from { font-weight: 700; color: var(--text); }
.inbox-preview-item:hover { background: var(--surface-row-hover); }
.inbox-item-subject { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Queue : tuiles de statut avec teinte sémantique discrète (lecture immédiate). */
.qc-active  { background: #ecfdf3 !important; box-shadow: inset 0 0 0 1px rgba(16,131,95,.14) !important; }
.qc-delayed { background: #fff8ec !important; box-shadow: inset 0 0 0 1px rgba(161,92,7,.14) !important; }
.qc-failed  { background: #fef2f3 !important; box-shadow: inset 0 0 0 1px rgba(180,35,50,.16) !important; }
.qc-waiting, .qc-done { background: #f7f8fa !important; box-shadow: inset 0 0 0 1px rgba(17,24,39,.06) !important; }
.queue-status-line { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; }

/* Analytics & listes latérales : rythme régulier + compteur en pastille. */
.analytics-side-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); }
.analytics-side .simple-row,
.mail-address-row { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.analytics-side .simple-row:last-child,
.mail-address-row:last-child { border-bottom: 0; }
.simple-count {
  min-width: 26px; padding: 1px 8px; border-radius: 999px;
  background: #f1f3f5; color: var(--text); font-weight: 700; font-size: 12px; text-align: center;
}
.mail-address-row:hover { background: var(--surface-row-hover); border-radius: 8px; }

/* Tables overview (sortants / échecs) : entêtes nettes, lignes aérées juste ce qu'il faut. */
#outbound table th, #failures table th, #audit .simple-row { font-weight: 700; }
.badge-service { background: #eef2ff !important; color: #3730a3 !important; border: 0 !important; font-weight: 600 !important; }