/* Control Tower visual polish pass — shared shell/card/table treatment */
:root {
  --ct-bg: #f4f7f5;
  --ct-bg-soft: #eef4f0;
  --ct-card: #ffffff;
  --ct-border: rgba(32, 69, 54, 0.10);
  --ct-border-strong: rgba(98, 146, 160, 0.26);
  --ct-text: #17251f;
  --ct-muted: #64756d;
  --ct-slate: #6292a0;
  --ct-slate-dark: #4f7f8c;
  --ct-green: #5dbe8a;
  --ct-red: #c4485a;
  --ct-amber: #c88a2f;
  --ct-radius: 16px;
  --ct-shadow: 0 14px 36px rgba(22, 45, 36, 0.07), 0 1px 2px rgba(22,45,36,0.05);
  --ct-shadow-sm: 0 6px 20px rgba(22, 45, 36, 0.055);
}

body {
  background:
    radial-gradient(circle at top right, rgba(98,146,160,0.08), transparent 28rem),
    var(--ct-bg) !important;
  color: var(--ct-text);
}

/* Nav-injected pages */
#ct-nav ~ .header {
  margin: 18px 24px 0;
  padding: 22px 26px !important;
  border: 1px solid var(--ct-border) !important;
  border-radius: var(--ct-radius);
  background: rgba(255,255,255,0.92) !important;
  box-shadow: var(--ct-shadow-sm);
  text-align: left !important;
}
#ct-nav ~ .header h1 { font-size: clamp(24px, 3vw, 34px) !important; letter-spacing: -0.04em; }
#ct-nav ~ .header .sub,
#ct-nav ~ .header p,
#ct-nav ~ .header .subtitle { color: var(--ct-muted) !important; }
#ct-nav ~ .header .owner-tag { margin-top: 10px; }
#ct-nav ~ .header .header-top { width: 100%; }

#ct-nav ~ .nav-tabs,
#ct-nav ~ .controls,
#ct-nav ~ .toolbar,
#ct-nav ~ .legend-bar,
#ct-nav ~ .kpi-row,
#ct-nav ~ .aging-bar,
#ct-nav ~ .as-of,
#ct-nav ~ .table-wrap,
#ct-nav ~ .pagination {
  margin-left: 24px !important;
  margin-right: 24px !important;
}
#ct-nav ~ .nav-tabs,
#ct-nav ~ .controls,
#ct-nav ~ .toolbar,
#ct-nav ~ .legend-bar {
  margin-top: 14px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--ct-border) !important;
  border-radius: 14px;
  background: rgba(255,255,255,0.88) !important;
  box-shadow: var(--ct-shadow-sm);
}
#ct-nav ~ .main {
  max-width: 1480px !important;
  padding: 24px !important;
}

/* Utility pages with static sidebars */
body.ct-utility-page .main {
  background:
    radial-gradient(circle at top right, rgba(98,146,160,0.08), transparent 28rem),
    var(--ct-bg) !important;
}
body.ct-utility-page .topbar {
  margin: 18px 24px 0;
  border: 1px solid var(--ct-border) !important;
  border-radius: var(--ct-radius);
  box-shadow: var(--ct-shadow-sm);
  background: rgba(255,255,255,0.92) !important;
}
body.ct-utility-page .content { padding: 24px !important; }

/* Cards, KPI tiles, and tables */
.card,
.kpi,
.kpi-card,
.kpi-tile,
.mega-kpi,
.table-wrap,
.aging-bar,
.help-box,
.ebitda-chip,
.qa-item,
.action-item,
.stat-card,
.overview-card {
  border: 1px solid var(--ct-border) !important;
  border-radius: var(--ct-radius) !important;
  background: rgba(255,255,255,0.94) !important;
  box-shadow: var(--ct-shadow-sm);
}
.card:hover,
.kpi:hover,
.kpi-card:hover,
.kpi-tile:hover,
.mega-kpi:hover,
.qa-item:hover {
  border-color: var(--ct-border-strong) !important;
  box-shadow: var(--ct-shadow) !important;
  transform: translateY(-1px);
}
.card,
.kpi,
.kpi-card,
.mega-kpi { transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.kpi-row { gap: 16px !important; }
.kpi-label,
.card-title,
.sec-title,
.table-header h3 {
  letter-spacing: .03em;
}
.sec-title {
  border-left-color: var(--ct-slate) !important;
  color: var(--ct-text) !important;
}

/* Tabs, buttons, inputs */
.tab-btn,
.time-btn,
.month-btn,
.year-btn,
.office-pill,
.filter-btn,
.toggle-pending,
.btn-secondary,
.btn-export,
.qa-btn,
button,
select,
input[type="text"],
input[type="number"],
.search-input,
.office-select,
.sort-select,
.status-filter {
  border-radius: 10px !important;
}
.tab-btn.active,
.time-btn.active,
.month-btn.active,
.year-btn.active,
.office-pill.active,
.filter-btn.active {
  background: var(--ct-slate) !important;
  border-color: var(--ct-slate) !important;
  color: #fff !important;
}
.btn-primary,
.btn-export,
.qa-btn.export {
  background: var(--ct-slate) !important;
  border-color: var(--ct-slate) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-export:hover,
.qa-btn.export:hover {
  background: var(--ct-slate-dark) !important;
}
select,
input[type="text"],
input[type="number"],
.search-input,
.office-select,
.sort-select,
.status-filter {
  background: #fff !important;
  border: 1px solid var(--ct-border) !important;
  color: var(--ct-text) !important;
}

/* Tables */
.table-wrap { overflow: hidden; }
.table-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,251,249,0.96));
  border-bottom: 1px solid var(--ct-border) !important;
}
table {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
thead th,
table thead th,
.help-table th,
.log-table th,
.admin-table th,
.cost-table th {
  background: #eef5f1 !important;
  color: #45645a !important;
  border-bottom: 1px solid var(--ct-border) !important;
  font-weight: 800 !important;
}
tbody tr:nth-child(odd) { background: rgba(98,146,160,0.025) !important; }
tbody tr:hover td,
tr:hover td { background: rgba(98,146,160,0.075) !important; }
td,
tbody td,
.help-table td,
.log-table td,
.admin-table td,
.cost-table td {
  border-bottom: 1px solid rgba(32,69,54,0.07) !important;
}

/* Badges */
.badge,
.aging-badge,
.card-badge {
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.badge-blue,
.badge-orange { background: rgba(98,146,160,0.13) !important; color: var(--ct-slate-dark) !important; }
.badge-green { background: rgba(93,190,138,0.14) !important; color: #2f8b5d !important; }
.badge-red { background: rgba(196,72,90,0.12) !important; color: var(--ct-red) !important; }
.badge-yellow,
.badge-amber { background: rgba(200,138,47,0.13) !important; color: var(--ct-amber) !important; }

/* Dashboard page keeps its cockpit layout, just softens the surface */
.app .content { background: var(--ct-bg) !important; }
.content-topbar,
.app .card,
.app .kpi-tile,
.exec-card {
  border-color: var(--ct-border) !important;
  box-shadow: var(--ct-shadow-sm);
}
.content-topbar { background: rgba(255,255,255,0.94) !important; }

@media (max-width: 768px) {
  body { padding-left: 0 !important; }
  #ct-nav ~ .header,
  #ct-nav ~ .nav-tabs,
  #ct-nav ~ .controls,
  #ct-nav ~ .toolbar,
  #ct-nav ~ .legend-bar,
  #ct-nav ~ .kpi-row,
  #ct-nav ~ .aging-bar,
  #ct-nav ~ .as-of,
  #ct-nav ~ .table-wrap,
  #ct-nav ~ .pagination {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
  #ct-nav ~ .main,
  body.ct-utility-page .content { padding: 16px 12px !important; }
  body.ct-utility-page .topbar { margin: 12px; }
}

/* Page-specific polish fixes */
#ct-nav ~ .legend-bar { overflow: visible !important; align-items: flex-start !important; row-gap: 10px !important; }
#ct-nav ~ .legend-bar .threshold-control { margin-left: 0 !important; }
#ct-nav ~ .kpi-row { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)) !important; }
.loading.error-state { text-align: center; padding: 46px 24px !important; }
.export-btn { background: var(--ct-slate) !important; border-color: var(--ct-slate) !important; color: #fff !important; font-weight: 700 !important; }
.export-btn:hover { background: var(--ct-slate-dark) !important; }