/* LeonOS shared dashboard theme: approved dark-blue system. */
:root {
  color-scheme: dark;
  --bg: #071019;
  --nav: #08131d;
  --surface: #0d1c27;
  --surface-2: #102534;
  --surface-3: #142d3e;
  --line: #28475d;
  --line-strong: #3a6882;
  --text: #eef7fb;
  --muted: #9eb4c3;
  --blue: #5a9cff;
  --green: #31c46b;
  --cyan: #24d2c8;
  --gold: #d6b25e;
  --orange: #ffae42;
  --yellow: #d6b25e;
  --red: #ff5b64;
  --plum: #d59bff;
  --teal: #35dac4;
  --emerald: #78d6b3;
  --forest: #9bd66f;
  --shadow: 0 18px 40px rgba(0, 0, 0, .34);
  --radius: 8px;
  --leonos-agent-gold: #d6b25e;
  --leonos-agent-line: #28475d;
  --leonos-agent-ink: #eef7fb;
  --leonos-agent-muted: #9eb4c3;
  --leonos-agent-green: #31c46b;
}

html,
body {
  background:
    radial-gradient(circle at 52% 0, rgba(36, 210, 200, .12), transparent 34%),
    linear-gradient(180deg, rgba(13, 37, 54, .82), rgba(5, 13, 21, .98)),
    var(--bg) !important;
  color: var(--text) !important;
}

a { color: inherit; }

.app,
.app-shell,
.dashboard-shell,
.workspace,
.main-content,
.main,
.content,
.page,
.page-shell {
  background: transparent !important;
}

.sidebar,
.side-nav,
.rail,
.navigation {
  background: var(--nav) !important;
  border-color: #1b3548 !important;
  color: var(--text) !important;
  box-shadow: 8px 0 28px rgba(0, 0, 0, .18) !important;
}

header,
.topbar,
.nav-bar,
.toolbar,
.panel h2,
.table-head,
.card-head,
.lane-head,
.panel-header,
.panel-title {
  border-color: var(--line) !important;
}

.brand-mark,
.nav-icon,
.icon,
.tiny-icon,
.status-icon {
  border-color: var(--line-strong) !important;
  color: var(--blue) !important;
  background: rgba(90, 156, 255, .08) !important;
}

.nav-title,
.subtitle,
.side-card span,
.side-card p,
.metric span,
.metric small,
.mini span,
.source-note,
td span,
th,
.muted,
.caption,
.meta,
.help,
.description {
  color: var(--muted) !important;
}

h1,
h2,
h3,
h4,
.metric strong,
.mini strong,
.lane-title,
.side-card b,
td,
.card-title,
.view-title,
.agent-name,
.panel-title,
.title,
.label,
.value {
  color: var(--text) !important;
}

.side-link,
.nav-item,
.scope-item,
.tab,
.filter,
.menu-item {
  color: var(--text) !important;
  border-color: transparent !important;
  background: transparent !important;
}

.side-link:hover,
.side-link.active,
.nav-item:hover,
.nav-item.active,
.tab:hover,
.tab.active,
.filter:hover,
.filter.active,
.menu-item:hover,
.menu-item.active {
  background: rgba(90, 156, 255, .08) !important;
  border-color: rgba(90, 156, 255, .26) !important;
  color: var(--text) !important;
  box-shadow: inset 3px 0 0 #8fc1ff !important;
}

.brand,
.brand-block,
.read-only-card,
.local-card,
.operator-card,
.memory-card,
.executive-header,
.hero,
.side-card,
.panel,
.metric,
.lane-card,
.mini,
.score-card,
.category-card,
.identity,
.watch-card,
.alert-banner,
.command-panel,
.filters,
.drawer-card,
.modal-card,
.summary-cards > *,
.status-chip,
.queue-card,
.status-card,
.summary-card,
.record-card,
.view-shell,
.content-card,
.agent-card,
.dashboard-card,
.tile,
.card,
.scope,
.stat,
.timeline-item,
.detail-panel {
  border-color: var(--line) !important;
  background: linear-gradient(180deg, rgba(20, 45, 62, .98), rgba(9, 26, 38, .98)) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}

.mini,
.tile,
.stat,
.metric,
.status-card,
.summary-card,
.record-card,
.queue-card {
  background: rgba(13, 28, 39, .76) !important;
}

table {
  background: rgba(13, 28, 39, .78) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

thead,
th {
  background: rgba(22, 55, 76, .9) !important;
}

tr,
th,
td {
  border-color: var(--line) !important;
}

tr[data-id]:hover,
tbody tr:hover {
  background: rgba(90, 156, 255, .06) !important;
}

.pill,
.status,
.badge,
.chip,
.tag,
.status-confirmed,
.status-possible {
  background: rgba(49, 196, 107, .10) !important;
  border-color: rgba(49, 196, 107, .34) !important;
  color: #c4f6df !important;
}

.status.watch,
.warning,
.warn,
.status-blocked,
.yellow,
.badge.orange,
.badge.yellow,
.pill.watch {
  color: #ffd9a6 !important;
  border-color: rgba(255, 174, 66, .42) !important;
  background: rgba(255, 174, 66, .11) !important;
}

.status.blocked,
.danger,
.red,
.status-red,
.badge.red,
.pill.not {
  color: #ffc8cc !important;
  border-color: rgba(255, 91, 100, .42) !important;
  background: rgba(255, 91, 100, .12) !important;
}

.status-unknown,
.gray {
  color: var(--muted) !important;
  border-color: var(--line) !important;
  background: rgba(158, 180, 195, .09) !important;
}

.dot,
.green {
  background: var(--green) !important;
}

button,
.button,
.primary,
.agent-profile-action,
.agent-card-action,
.network-card-link,
.open-link,
.row-actions button {
  color: #fff !important;
  background: #0c457e !important;
  border-color: #2f78b7 !important;
  box-shadow: none !important;
}

button:hover,
.button:hover,
.open-link:hover,
.agent-profile-action:hover,
.agent-card-action:hover,
.network-card-link:hover {
  background: #2367c4 !important;
  border-color: #5a9cff !important;
}

button.secondary,
.button.secondary,
.ghost,
.row-actions button[data-decision="Hold"] {
  color: var(--text) !important;
  background: rgba(13, 28, 39, .72) !important;
  border-color: var(--line) !important;
}

input,
textarea,
select {
  background: #08131d !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted) !important;
}

.agent-profile-panel,
.agent-directory,
.agent-command-suite,
.agent-network-strip {
  color: var(--text) !important;
  border-color: var(--line) !important;
  background:
    radial-gradient(circle at 20% 0, rgba(214, 178, 94, .12), transparent 34%),
    linear-gradient(145deg, #0d1c27, #102534 62%, #142d3e) !important;
  box-shadow: var(--shadow) !important;
}

.agent-profile-fact,
.agent-profile-metric,
.agent-suite-lead,
.agent-suite-card,
.agent-strip-card,
.agent-card,
.agent-card-metrics div,
.agent-suite-metrics div,
.agent-strip-metric {
  border-color: var(--line) !important;
  background: rgba(5, 18, 29, .58) !important;
  color: var(--text) !important;
}

.agent-profile-media,
.agent-card img,
.agent-suite-card img,
.agent-strip-card img,
.patch-portrait {
  background: #102534 !important;
}

.agent-profile-kicker,
.agent-card-kicker,
.accent,
.gold {
  color: var(--gold) !important;
}

.agent-profile-persona,
.agent-profile-quote,
.agent-card-metrics b,
.agent-suite-metrics b,
.agent-strip-metric b {
  color: var(--green) !important;
}

.source-note,
pre,
code {
  background: rgba(5, 18, 29, .58) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  .app,
  .app-shell,
  .dashboard-shell,
  .workspace,
  .page-shell {
    display: block !important;
    min-width: 0 !important;
  }

  .sidebar,
  .side-nav,
  .rail,
  .navigation {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .main,
  main,
  .main-content,
  .content,
  .page {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  header,
  .topbar,
  .toolbar,
  .panel-header,
  .card-head {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 12px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .header-actions,
  .actions,
  .filters,
  .cta-row {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .dashboard-grid,
  .main-grid,
  .content-grid,
  .summary-grid,
  .metric-grid,
  .stats-grid,
  .cards-grid,
  .card-grid,
  .summary-cards,
  .panel-grid,
  .two-column,
  .three-column,
  .columns,
  .board,
  .lanes {
    grid-template-columns: 1fr !important;
  }

  .panel,
  .card,
  .dashboard-card,
  .content-card,
  .metric,
  .mini,
  .tile,
  .table-wrap,
  .table-shell,
  .records-scroll {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  table {
    width: max-content !important;
    min-width: 100% !important;
  }

  .table-wrap,
  .table-shell,
  .records-scroll,
  .content-card:has(table),
  .panel:has(table),
  .card:has(table) {
    overflow-x: auto !important;
  }
}