/* Storage Brain Demo - Core Styles */

/* CSS Variables - Design System */
:root {
  /* Dark Theme Colors */
  --bg-primary: #0A1628;
  --bg-secondary: #0F2137;
  --bg-card: #0D1B2A;
  --bg-card-hover: #1A365D;
  --border-dark: #1A365D;
  --border-light: rgba(26, 54, 93, 0.5);

  /* Accent Colors */
  --gold: #D4AF37;
  --gold-light: #FFB800;
  --cyan: #00D2EF;
  --cyan-dark: #0092B5;
  --emerald: #00BB7F;
  --green: #00C758;
  --green-light: #05DF72;
  --red: #FB2C36;
  --red-light: #FF6568;
  --orange: #FE6E00;
  --purple: #AC4BFF;
  --blue: #3080FF;

  /* Text Colors */
  --text-primary: #FFFFFF;
  --text-secondary: #CAD5E2;
  --text-muted: #62748E;

  /* Light Theme (Guides) */
  --bg-cream: #F5F0E8;
  --bg-cream-dark: #EBE4D8;

  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Monaco, monospace;

  /* Spacing */
  --sidebar-width: 240px;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  opacity: 0;
  animation: pageFadeIn 0.25s ease forwards;
}

body.page-exit {
  opacity: 0;
  transition: opacity 0.15s ease;
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.light-theme {
  --bg-primary: #ECEEF2;
  --bg-secondary: #E3E6EB;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F5F6F9;
  --border-dark: #CDD2D9;
  --border-light: #DDE1E7;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

body.light-theme tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

body.light-theme .info-card {
  background: #EFF6FF;
  border-color: #BFDBFE;
}

body.light-theme .info-card-title {
  color: #1E40AF;
}

body.light-theme .info-card-text {
  color: #334155;
}

body.light-theme .warning-card {
  background: #FFF7ED;
  border-color: #FED7AA;
}

body.light-theme .btn-export {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  border-color: rgba(99, 102, 241, 0.3);
}

body.light-theme .facility-link {
  color: #6366f1;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

.font-mono {
  font-family: var(--font-mono);
}

.text-gold { color: var(--gold); }
.text-cyan { color: var(--cyan); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-orange { color: var(--orange); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* Facility Insights Bar */
.insights-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-dark);
  padding: 0.75rem 1.5rem;
}

.insights-bar-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.insights-icon {
  width: 24px;
  height: 24px;
  color: var(--cyan);
}

.insights-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.insights-badge {
  background: rgba(251, 44, 54, 0.2);
  color: var(--red);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.insights-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

a.insights-bar { text-decoration: none; cursor: pointer; transition: background 0.2s ease; }
a.insights-bar:hover { background: var(--bg-tertiary); }

/* Floating AI Chat Button */
.ai-chat-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 1000;
  text-decoration: none;
}
.ai-chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5);
}
.ai-chat-fab svg {
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

/* Main Container */
.main {
  padding: 1.5rem;
  flex: 1;
}

.page-header {
  margin-bottom: 1rem;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.page-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Portfolio Snapshot — Hero Metrics */
.snapshot {
  background: linear-gradient(135deg, rgba(13, 27, 42, 0.95) 0%, rgba(10, 22, 40, 0.98) 50%, rgba(13, 27, 42, 0.95) 100%);
  border: 1px solid var(--border-dark);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.snapshot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red) 0%, var(--orange) 25%, var(--cyan) 50%, var(--gold) 100%);
  opacity: 0.6;
}

.snapshot-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.snapshot-item {
  flex: 1;
  text-align: center;
}

.snapshot-value {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 0.35rem;
}

.snapshot-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}

.snapshot-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.snapshot-divider {
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, transparent 0%, var(--border-dark) 20%, var(--border-dark) 80%, transparent 100%);
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .snapshot-value { font-size: 2.5rem; }
  .snapshot-grid { gap: 0.5rem; }
}

@media (max-width: 768px) {
  .snapshot-grid {
    flex-wrap: wrap;
  }
  .snapshot-item {
    flex: 1 1 45%;
    min-width: 150px;
  }
  .snapshot-divider { display: none; }
  .snapshot-value { font-size: 2.25rem; }
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1.25rem;
}

.card-dark {
  background: var(--bg-secondary);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.card-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* KPI Cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.kpi-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  text-transform: capitalize;
}

.kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
}

.kpi-subtext {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.kpi-change {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.kpi-change.positive { color: var(--green); }
.kpi-change.negative { color: var(--red); }

.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  position: relative;
}

.kpi-icon[data-info] {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-icon[data-info]:hover {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
}

/* KPI Info Tooltip */
.kpi-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 320px;
  padding: 0.875rem 1rem;
  background: #1A365D;
  border: 1px solid #2D4A6F;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.6;
  pointer-events: auto;
}

.kpi-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: #1A365D;
  border-left: 1px solid #2D4A6F;
  border-top: 1px solid #2D4A6F;
  transform: rotate(45deg);
}

.kpi-icon.blue { background: rgba(48, 128, 255, 0.15); color: var(--blue); }
.kpi-icon.cyan { background: rgba(0, 210, 239, 0.15); color: var(--cyan); }
.kpi-icon.green { background: rgba(0, 199, 88, 0.15); color: var(--green); }
.kpi-icon.gold { background: rgba(212, 175, 55, 0.15); color: var(--gold); }
.kpi-icon.purple { background: rgba(172, 75, 255, 0.15); color: var(--purple); }
.kpi-icon.red { background: rgba(251, 44, 54, 0.15); color: var(--red); }

/* Charts Container */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1.5rem;
  overflow: hidden;
  min-width: 0;
}

.chart-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.chart-container {
  height: 250px;
  position: relative;
  width: 100%;
}

.chart-legend {
  display: flex;
  gap: 1.5rem;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Tables */
.table-container {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.table-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 0.875rem 1rem;
  text-align: left;
  font-size: 0.875rem;
}

th {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-dark);
}

tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

td {
  border-bottom: 1px solid var(--border-light);
}

.facility-link {
  color: var(--cyan);
  text-decoration: none;
}

.facility-link:hover {
  text-decoration: underline;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.badge-critical { background: rgba(251, 44, 54, 0.2); color: var(--red); }
.badge-focus { background: rgba(254, 110, 0, 0.2); color: var(--orange); }
.badge-push { background: rgba(0, 210, 239, 0.2); color: var(--cyan); }
.badge-maximize { background: rgba(0, 187, 127, 0.2); color: var(--emerald); }
.badge-high { background: rgba(251, 44, 54, 0.2); color: var(--red); }
.badge-medium { background: rgba(212, 175, 55, 0.2); color: var(--gold); }
.badge-new { background: rgba(0, 187, 127, 0.2); color: var(--emerald); }
.badge-marketing { background: rgba(0, 210, 239, 0.2); color: var(--cyan); }
.badge-pricing { background: rgba(212, 175, 55, 0.2); color: var(--gold); }
.badge-operations { background: rgba(106, 114, 130, 0.2); color: var(--text-secondary); }
.badge-analytics { background: rgba(172, 75, 255, 0.2); color: var(--purple); }
.badge-ai { background: rgba(0, 187, 127, 0.2); color: var(--emerald); }
.badge-coming-soon { background: rgba(106, 114, 130, 0.15); color: var(--text-muted); }

/* Category Cards */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.category-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1.25rem;
}

.category-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.category-count {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}

.category-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.category-subtext {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.category-critical .category-label { color: var(--red); }
.category-focus .category-label { color: var(--orange); }
.category-push .category-label { color: var(--cyan); }
.category-maximize .category-label { color: var(--emerald); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.btn-primary {
  background: var(--gold);
  color: var(--bg-primary);
}

.btn-primary:hover {
  background: var(--gold-light);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-dark);
}

.btn-secondary:hover {
  background: var(--bg-card-hover);
}

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-dark);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tab {
  padding: 0.625rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab:hover {
  background: var(--bg-card-hover);
}

.tab.active {
  background: var(--gold);
  color: var(--bg-primary);
  border-color: var(--gold);
}

/* Search Input */
.search-input {
  background: var(--bg-secondary);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  width: 200px;
}

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

.search-input:focus {
  outline: none;
  border-color: var(--cyan);
}

/* Select Dropdown */
.select {
  background: var(--bg-secondary);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 0.5rem 2rem 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2362748E'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.25rem;
}

.select:focus {
  outline: none;
  border-color: var(--cyan);
}

/* Facility Dropdown (Action Page) */
.facility-select {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  min-width: 300px;
}

/* Progress Bar */
.progress-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-fill.green { background: var(--green); }
.progress-fill.red { background: var(--red); }
.progress-fill.orange { background: var(--orange); }
.progress-fill.cyan { background: var(--cyan); }

/* Action Items */
.action-item {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.action-content {
  flex: 1;
}

.action-title {
  font-weight: 500;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.action-impact {
  text-align: right;
  font-weight: 600;
}

/* Two Column Layout */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* List Items */
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border-light);
}

.list-item:last-child {
  border-bottom: none;
}

.list-item-left {
  display: flex;
  flex-direction: column;
}

.list-item-title {
  font-weight: 500;
}

.list-item-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.list-item-right {
  text-align: right;
}

.list-item-value {
  font-weight: 600;
}

.list-item-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* AI Chat Interface */
.chat-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

.chat-message {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cyan) 0%, var(--emerald) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-name {
  font-weight: 600;
  color: var(--cyan);
}

.chat-content {
  line-height: 1.7;
}

.chat-content ul {
  list-style: none;
  margin: 1rem 0;
}

.chat-content li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.chat-input-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-dark);
  padding: 1rem 1.5rem;
}

.chat-input-inner {
  max-width: 900px;
  margin: 0 auto;
}

.quick-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.quick-action {
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 9999px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.quick-action:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.chat-input-wrapper {
  display: flex;
  gap: 0.75rem;
}

.chat-input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.chat-input::placeholder {
  color: var(--text-muted);
}

.chat-input:focus {
  outline: none;
  border-color: var(--cyan);
}

.chat-send {
  background: var(--gold);
  color: var(--bg-primary);
  border: none;
  border-radius: 12px;
  padding: 0 1.5rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chat-send:hover {
  background: var(--gold-light);
}

/* Legacy light theme overrides removed — handled by variable redefinition in body.light-theme */

/* Guide Cards */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.guide-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 1.5rem;
  transition: transform 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

.guide-card:hover {
  transform: translateY(-2px);
}

.guide-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.guide-icon.green { background: rgba(0, 187, 127, 0.15); color: var(--emerald); }
.guide-icon.cyan { background: rgba(0, 210, 239, 0.15); color: var(--cyan); }
.guide-icon.gold { background: rgba(212, 175, 55, 0.15); color: var(--gold); }
.guide-icon.purple { background: rgba(172, 75, 255, 0.15); color: var(--purple); }
.guide-icon.blue { background: rgba(48, 128, 255, 0.15); color: var(--blue); }

.guide-badges {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.guide-card {
  position: relative;
}

.guide-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.guide-description {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.guide-meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Featured Guide */
.featured-guide {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.featured-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(0, 187, 127, 0.15);
  color: var(--emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
}

.featured-content {
  flex: 1;
}

.featured-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.featured-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.featured-description {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.featured-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.featured-link {
  color: var(--emerald);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
}

.featured-link:hover {
  text-decoration: underline;
}

/* Quick Tips */
.quick-tips {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2rem;
}

.quick-tips-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.tip-card {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 1rem;
}

.tip-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.tip-text {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Password Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border-dark);
  border-radius: 16px;
  padding: 2.5rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.modal-logo {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.modal-subtitle {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.modal-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 1rem;
}

.modal-input:focus {
  outline: none;
  border-color: var(--gold);
}

.modal-btn {
  width: 100%;
  padding: 0.875rem;
  background: var(--gold);
  color: var(--bg-primary);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.modal-btn:hover {
  background: var(--gold-light);
}

.modal-error {
  color: var(--red);
  font-size: 0.875rem;
  margin-top: 1rem;
  display: none;
}

/* Deep Dive Grid */
.deep-dive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Deep Dive Cards */
.deep-dive-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  transition: all 0.2s;
}
.deep-dive-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 210, 239, 0.1);
}
.deep-dive-icon {
  color: var(--cyan);
  margin-bottom: 0.75rem;
}
.deep-dive-title {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.deep-dive-desc {
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.deep-dive-link {
  color: var(--cyan);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Footer */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-dark);
  padding: 3rem 1.5rem;
  margin-top: 4rem;
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-text {
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Utilities */
.hidden { display: none !important; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.w-full { width: 100%; }
.rounded-lg { border-radius: 0.5rem; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* Sticky first column for wide tables */
.sticky-col table {
  border-collapse: separate;
  border-spacing: 0;
}

.sticky-col th:first-child,
.sticky-col td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-card);
  min-width: 180px;
  max-width: 220px;
}

.sticky-col th:first-child {
  z-index: 3;
  background: var(--bg-card);
}

.sticky-col th:first-child::after,
.sticky-col td:first-child::after {
  content: '';
  position: absolute;
  top: 0;
  right: -8px;
  bottom: 0;
  width: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, transparent 100%);
  pointer-events: none;
}

body.light-theme .sticky-col th:first-child,
body.light-theme .sticky-col td:first-child {
  background: #FFFFFF;
}

body.light-theme .sticky-col th:first-child::after,
body.light-theme .sticky-col td:first-child::after {
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 0%, transparent 100%);
}

/* Scroll hint shadow on right edge */
.scroll-hint {
  position: relative;
}

.scroll-hint::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.2) 100%);
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.2s;
}

.scroll-hint.scrolled-end::after {
  opacity: 0;
}

/* Column toggle bar */
.col-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
}

.col-toggles-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.5rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.col-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  white-space: nowrap;
}

.col-toggle:hover {
  border-color: var(--cyan);
  color: var(--text-primary);
}

.col-toggle.active {
  background: rgba(0, 210, 239, 0.1);
  border-color: var(--cyan);
  color: var(--cyan);
}

.col-toggle input {
  display: none;
}

body.light-theme .col-toggle {
  background: rgba(0,0,0,0.03);
  border-color: #CDD2D9;
  color: #475569;
}

body.light-theme .col-toggle.active {
  background: rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
  color: #6366f1;
}

/* ========================================
   Facility Buckets
   ======================================== */
.bucket-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.bucket {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
}

.bucket::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
}

.bucket:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.15);
}

.bucket-selected {
  border-width: 2px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

/* Category colors */
.bucket-critical::before { background: #ef4444; }
.bucket-critical .bucket-icon { color: #ef4444; }
.bucket-critical .bucket-tag { color: #ef4444; background: rgba(239, 68, 68, 0.12); }
.bucket-critical .bucket-count { color: #ef4444; }
.bucket-critical .bucket-fill-bar { background: linear-gradient(90deg, #ef4444, #dc2626); }
.bucket-critical .bucket-dot { background: #ef4444; }
.bucket-critical.bucket-selected { border-color: #ef4444; box-shadow: 0 0 24px rgba(239, 68, 68, 0.2); }

.bucket-focus::before { background: #f59e0b; }
.bucket-focus .bucket-icon { color: #f59e0b; }
.bucket-focus .bucket-tag { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.bucket-focus .bucket-count { color: #f59e0b; }
.bucket-focus .bucket-fill-bar { background: linear-gradient(90deg, #f59e0b, #d97706); }
.bucket-focus .bucket-dot { background: #f59e0b; }
.bucket-focus.bucket-selected { border-color: #f59e0b; box-shadow: 0 0 24px rgba(245, 158, 11, 0.2); }

.bucket-push::before { background: #22d3ee; }
.bucket-push .bucket-icon { color: #22d3ee; }
.bucket-push .bucket-tag { color: #22d3ee; background: rgba(34, 211, 238, 0.12); }
.bucket-push .bucket-count { color: #22d3ee; }
.bucket-push .bucket-fill-bar { background: linear-gradient(90deg, #22d3ee, #06b6d4); }
.bucket-push .bucket-dot { background: #22d3ee; }
.bucket-push.bucket-selected { border-color: #22d3ee; box-shadow: 0 0 24px rgba(34, 211, 238, 0.2); }

.bucket-maximize::before { background: #10b981; }
.bucket-maximize .bucket-icon { color: #10b981; }
.bucket-maximize .bucket-tag { color: #10b981; background: rgba(16, 185, 129, 0.12); }
.bucket-maximize .bucket-count { color: #10b981; }
.bucket-maximize .bucket-fill-bar { background: linear-gradient(90deg, #10b981, #059669); }
.bucket-maximize .bucket-dot { background: #10b981; }
.bucket-maximize.bucket-selected { border-color: #10b981; box-shadow: 0 0 24px rgba(16, 185, 129, 0.2); }

/* Bucket internals */
.bucket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.bucket-icon {
  opacity: 0.9;
}

.bucket-tag {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.625rem;
  border-radius: 5px;
  text-transform: uppercase;
}

.bucket-count {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.bucket-range {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

/* Fill bar — proportion of total portfolio */
.bucket-fill-track {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.bucket-fill-bar {
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: width 0.6s ease;
}

/* Stats row */
.bucket-stats {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.bucket-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.375rem 0;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}

.bucket-stat-val {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.bucket-stat-lbl {
  font-size: 0.5625rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Facility dots — each dot = one facility */
.bucket-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 14px;
}

.bucket-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity 0.15s, transform 0.15s;
}

.bucket-dot:hover {
  opacity: 1;
  transform: scale(1.6);
}

/* Light theme */
body.light-theme .bucket {
  background: #FFFFFF;
  border-color: #E2E5EA;
}

body.light-theme .bucket:hover {
  border-color: #CBD0D8;
}

body.light-theme .bucket-fill-track {
  background: rgba(0,0,0,0.06);
}

body.light-theme .bucket-stat {
  background: rgba(0,0,0,0.03);
}

@media (max-width: 1024px) {
  .bucket-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .bucket-row {
    grid-template-columns: 1fr;
  }
  .bucket-count {
    font-size: 2.25rem;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .charts-grid {
    grid-template-columns: 1fr;
  }

  .deep-dive-grid {
    grid-template-columns: 1fr;
  }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .two-col {
    grid-template-columns: 1fr;
  }

  .guide-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tips-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nav {
    display: none;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .category-grid {
    grid-template-columns: 1fr;
  }

  .guide-grid {
    grid-template-columns: 1fr;
  }

  .featured-guide {
    flex-direction: column;
  }
}

/* =====================================================
   APS Dashboard Extensions
   ===================================================== */

/* Logo image in header */
.logo-img {
  height: 32px;
  width: auto;
  border-radius: 6px;
  filter: drop-shadow(0 0 0px transparent);
  animation: logoPulse 4s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(34, 211, 238, 0.15)); }
  50% { filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.4)); }
}

/* KPI grid variants */
.kpi-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.kpi-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Occupancy bar (inline visual) */
.occ-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 120px;
}

.occ-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.occ-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.occ-bar-label {
  font-size: 0.8125rem;
  font-weight: 600;
  min-width: 45px;
  text-align: right;
}

/* Coming Soon overlay */
.coming-soon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

.coming-soon-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 16px;
  padding: 3rem 4rem;
  max-width: 600px;
}

.coming-soon-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.75rem;
}

.coming-soon-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.coming-soon-subtitle {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.coming-soon-list {
  text-align: left;
  list-style: none;
  margin: 0;
  padding: 0;
}

.coming-soon-list li {
  padding: 0.5rem 0;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--border-light);
}

.coming-soon-list li:last-child {
  border-bottom: none;
}

.coming-soon-list .dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Charts full width */
.chart-card-full {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

/* Info/explainer cards */
.info-card {
  background: rgba(0, 210, 239, 0.05);
  border: 1px solid rgba(0, 210, 239, 0.2);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.info-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cyan);
  margin-bottom: 0.5rem;
}

.info-card-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Warning card */
.warning-card {
  background: rgba(254, 110, 0, 0.05);
  border: 1px solid rgba(254, 110, 0, 0.2);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.warning-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--orange);
  margin-bottom: 0.5rem;
}

/* Summary stat row (used in operations page) */
.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-light);
}

.stat-row:last-child {
  border-bottom: none;
}

/* Sortable table header */
th.sortable {
  cursor: pointer;
  user-select: none;
}

th.sortable:hover {
  color: var(--text-primary);
}

th.sortable::after {
  content: ' \25B4\25BE';
  font-size: 0.6rem;
  opacity: 0.4;
}

th.sortable.asc::after {
  content: ' \25B4';
  opacity: 1;
  color: var(--cyan);
}

th.sortable.desc::after {
  content: ' \25BE';
  opacity: 1;
  color: var(--cyan);
}

/* Export button */
.btn-export {
  background: rgba(0, 210, 239, 0.1);
  color: var(--cyan);
  border: 1px solid rgba(0, 210, 239, 0.3);
}

.btn-export:hover {
  background: rgba(0, 210, 239, 0.2);
}

/* Legacy action list light theme overrides removed — handled by variable redefinition */

/* Three column grid */
.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .kpi-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .three-col { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .kpi-grid-3 { grid-template-columns: 1fr; }
  .kpi-grid-5 { grid-template-columns: 1fr; }
}

/* =====================================================
   Team Online Indicator Bar
   ===================================================== */

.team-online-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-dark);
  padding: 0.5rem 1.5rem;
}

.team-online-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.team-online-avatars {
  display: flex;
  align-items: center;
}

.team-avatar {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-secondary);
  margin-left: -6px;
  flex-shrink: 0;
}

.team-avatar:first-child {
  margin-left: 0;
}

.team-avatar-initials {
  font-size: 0.625rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  line-height: 1;
}

.team-avatar-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
}

.team-online-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Light theme */
body.light-theme .team-online-bar {
  background: #E3E6EB;
  border-bottom-color: #CDD2D9;
}

body.light-theme .team-avatar {
  border-color: #E3E6EB;
}

body.light-theme .team-avatar-dot {
  border-color: #E3E6EB;
}

/* Tab System */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-dark);
  margin-bottom: 1.5rem;
}

.tab-btn {
  padding: 0.75rem 1.5rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}

.tab-btn:hover {
  color: var(--text-secondary);
}

.tab-btn.active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Facility Selector */
.facility-selector {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.facility-selector label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.facility-selector select {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-family: var(--font-sans);
  cursor: pointer;
  min-width: 300px;
}

.facility-selector select:focus {
  outline: none;
  border-color: var(--cyan);
}

/* Sparkline Container */
.sparkline-container {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.sparkline-container h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

/* Alert Cards */
.alerts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.alert-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--text-muted);
}

.alert-card.alert-critical {
  border-left-color: var(--red);
  background: rgba(251, 44, 54, 0.05);
}

.alert-card.alert-warning {
  border-left-color: var(--orange);
  background: rgba(254, 110, 0, 0.05);
}

.alert-card.alert-info {
  border-left-color: var(--cyan);
  background: rgba(0, 210, 239, 0.05);
}

.alert-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.alert-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.alert-card-body {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.alert-severity {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.alert-severity.critical {
  background: rgba(251, 44, 54, 0.2);
  color: var(--red);
}

.alert-severity.warning {
  background: rgba(254, 110, 0, 0.2);
  color: var(--orange);
}

.alert-severity.info {
  background: rgba(0, 210, 239, 0.2);
  color: var(--cyan);
}

/* =====================================================
   Revenue Diary
   ===================================================== */

.diary-entry-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  transition: border-color 0.15s;
}

.diary-entry-card:hover {
  border-color: var(--emerald);
}

.diary-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
}

.diary-entry-body {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border-light);
}

.diary-filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.diary-filters select,
.diary-filters input {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-family: var(--font-sans);
}

.diary-filters input {
  min-width: 200px;
}

.diary-filters select:focus,
.diary-filters input:focus {
  outline: none;
  border-color: var(--cyan);
}

.diary-form-group {
  margin-bottom: 1rem;
}

.diary-form-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}

.diary-form-group input,
.diary-form-group select,
.diary-form-group textarea {
  width: 100%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  font-family: var(--font-sans);
}

.diary-form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.diary-form-group input:focus,
.diary-form-group select:focus,
.diary-form-group textarea:focus {
  outline: none;
  border-color: var(--cyan);
}

.diary-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.diary-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* =====================================================
   Property Profile Page
   ===================================================== */

/* Back link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cyan);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  transition: color 0.15s;
}

.back-link:hover {
  color: var(--text-primary);
}

/* Property Header */
.property-header {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  align-items: flex-start;
}

.property-header-left {
  flex: 1;
}

.property-header-right {
  width: 300px;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-dark);
  flex-shrink: 0;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.property-header-right iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.property-name {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.property-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.property-meta-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.property-meta-item svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.property-health-score {
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.property-health-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Section Headers */
.property-section {
  margin-bottom: 2rem;
}

.property-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Competition Matrix */
.competition-matrix {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1.5rem;
}

.competition-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.saturation-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.saturation-low {
  background: rgba(0, 199, 88, 0.15);
  color: var(--green);
}

.saturation-medium {
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold);
}

.saturation-high {
  background: rgba(251, 44, 54, 0.15);
  color: var(--red);
}

/* SF/Capita in facilities table */
.sf-capita-low {
  color: var(--green);
  font-weight: 600;
}

.sf-capita-medium {
  color: var(--gold);
  font-weight: 600;
}

.sf-capita-high {
  color: var(--red);
  font-weight: 600;
}

/* Unit Mix Table */
.unit-mix-table {
  width: 100%;
  border-collapse: collapse;
}

.unit-mix-table th {
  font-size: 0.7rem;
}

.unit-mix-table td {
  font-size: 0.8125rem;
}

/* Property pending data placeholder */
.data-pending {
  background: var(--bg-secondary);
  border: 1px dashed var(--border-dark);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.data-pending-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--text-secondary);
}

/* Donut chart container */
.donut-container {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.donut-chart {
  width: 180px;
  height: 180px;
  position: relative;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Facility link as anchor */
a.facility-link {
  color: var(--cyan);
  text-decoration: none;
}

a.facility-link:hover {
  text-decoration: underline;
}

/* Not Found state */
.not-found {
  text-align: center;
  padding: 4rem 2rem;
}

.not-found h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.not-found p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .property-header {
    flex-direction: column;
  }
  .property-header-right {
    width: 100%;
  }
}

/* =====================================================
   Left Sidebar Navigation
   ===================================================== */

/* Layout wrapper — sits to the right of sidebar */
.layout-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.25s ease;
  overflow-x: hidden;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background: var(--bg-card);
  border-right: 1px solid var(--border-dark);
  display: flex;
  flex-direction: column;
  z-index: 50;
  transition: width 0.25s ease;
  overflow: hidden;
}

.sidebar.collapsed {
  width: 56px;
}

/* Sidebar Logo */
.sidebar-logo {
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--border-dark);
}

.sidebar-logo a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--text-primary);
}

.sidebar-logo .logo-img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.sidebar-logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  display: inline-block;
  line-height: 1.1;
  white-space: nowrap;
}

.sidebar-logo-sub {
  display: block;
  font-size: 0.5625rem;
  font-weight: 400;
  opacity: 0.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-version {
  font-size: 0.55rem;
  font-weight: 500;
  color: #ffffff;
  opacity: 0.85;
  margin-left: 4px;
  letter-spacing: 0.02em;
}

.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .sidebar-version {
  display: none;
}

/* Sidebar Connections Section (Dropdown) */
.sidebar-connections {
  padding: 0.25rem 0.75rem;
  border-bottom: 1px solid var(--border-dark);
}

.conn-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 0.375rem 0;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  transition: color 0.15s;
}

.conn-toggle:hover {
  color: var(--text-secondary);
}

.system-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #00C758;
  border-radius: 50%;
  position: relative;
  margin-right: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0, 199, 88, 0.6);
}

.system-pulse::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 199, 88, 0.4);
  animation: systemPulseRing 2s ease-out infinite;
}

.system-pulse::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: rgba(0, 199, 88, 0.35);
  animation: systemPulseGlow 2s ease-in-out infinite;
}

@keyframes systemPulseRing {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

@keyframes systemPulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.5); opacity: 0; }
}

.conn-label-text {
  flex: 1;
  text-align: left;
}

.conn-count {
  font-size: 0.5625rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 8px;
  margin-right: 4px;
}

.conn-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  opacity: 0.5;
}

.conn-chevron.open {
  transform: rotate(180deg);
}

/* Dropdown list — hidden by default */
.conn-dropdown {
  display: none;
  flex-direction: column;
  padding: 0.125rem 0 0.375rem;
  max-height: 320px;
  overflow-y: auto;
}

.conn-dropdown::-webkit-scrollbar {
  width: 3px;
}

.conn-dropdown::-webkit-scrollbar-thumb {
  background: var(--border-dark);
  border-radius: 2px;
}

.conn-dropdown.open {
  display: flex;
}

/* Connection row — icon + name + status */
.conn-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.25rem;
  border-radius: 6px;
  transition: background 0.15s;
}

.conn-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.conn-row-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.8;
}

.conn-row-icon svg {
  width: 16px;
  height: 16px;
}

.conn-row-name {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conn-row-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.conn-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.conn-row.live .conn-status-dot {
  background: #00C758;
  box-shadow: 0 0 4px rgba(0, 199, 88, 0.5);
}

.conn-row.live .conn-row-status {
  color: #00C758;
}

.conn-row.pending .conn-status-dot {
  background: #F59E0B;
}

.conn-row.pending .conn-row-status {
  color: #F59E0B;
}

.conn-row.error .conn-status-dot {
  background: #FB2C36;
}

.conn-row.error .conn-row-status {
  color: #FB2C36;
}

/* Degraded state (amber) */
.conn-row.degraded .conn-status-dot {
  background: #F59E0B;
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
}

.conn-row.degraded .conn-row-status {
  color: #F59E0B;
}

/* Unknown state (muted) */
.conn-row.unknown .conn-status-dot {
  background: #64748B;
}

.conn-row.unknown .conn-row-status {
  color: #64748B;
}

/* Connection access type badges */
.conn-access-badge {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1.2;
}

.conn-access-api {
  background: rgba(34, 211, 238, 0.12);
  color: #22d3ee;
}

.conn-access-bq {
  background: rgba(0, 199, 88, 0.12);
  color: #00C758;
}

.conn-access-cli {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
}

/* Connection row brand logo images */
.conn-row-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 2px;
}

/* Last-checked tooltip on hover */
.conn-row {
  position: relative;
}

.conn-row-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1E293B;
  color: #CBD5E1;
  font-size: 0.625rem;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}

.conn-row:hover .conn-row-tooltip {
  display: block;
}

/* System pulse color variants */
.system-pulse.pulse-amber {
  background: #F59E0B;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.system-pulse.pulse-amber::before {
  border-color: rgba(245, 158, 11, 0.4);
}

.system-pulse.pulse-amber::after {
  background: rgba(245, 158, 11, 0.35);
}

.system-pulse.pulse-red {
  background: #FB2C36;
  box-shadow: 0 0 6px rgba(251, 44, 54, 0.6);
}

.system-pulse.pulse-red::before {
  border-color: rgba(251, 44, 54, 0.4);
}

.system-pulse.pulse-red::after {
  background: rgba(251, 44, 54, 0.35);
}

.system-pulse.pulse-green {
  background: #00C758;
  box-shadow: 0 0 6px rgba(0, 199, 88, 0.6);
}

.system-pulse.pulse-green::before {
  border-color: rgba(0, 199, 88, 0.4);
}

.system-pulse.pulse-green::after {
  background: rgba(0, 199, 88, 0.35);
}

/* Collapsed connections */
.sidebar.collapsed .sidebar-connections {
  padding: 0.25rem 0.25rem;
  text-align: center;
}

.sidebar.collapsed .conn-dropdown,
.sidebar.collapsed .conn-label-text,
.sidebar.collapsed .conn-chevron {
  display: none !important;
}

.sidebar.collapsed .conn-count {
  display: block;
  margin: 2px auto 0;
}

.sidebar.collapsed .conn-toggle {
  flex-direction: column;
  gap: 0;
  padding: 0.25rem 0;
  pointer-events: none;
}

/* Sidebar Team Presence (bottom) */
.sidebar-team {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
  flex: 1;
}

.sidebar-team-list {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.team-member {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.team-member-name {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  flex-shrink: 0;
  border: 2px solid var(--bg-card);
}

.team-dot-photo {
  background: transparent;
  overflow: hidden;
  padding: 0;
}

.team-dot-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.team-dot-overflow {
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.5rem;
  width: 24px;
  height: 24px;
}

.online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  background: #00C758;
  border-radius: 50%;
  border: 1.5px solid var(--bg-card);
}

.sidebar-team-label {
  font-size: 0.625rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: auto;
}

.sidebar-team-empty {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.sidebar.collapsed .sidebar-team-label,
.sidebar.collapsed .team-member-name {
  display: none;
}

.sidebar.collapsed .sidebar-team-list {
  flex-direction: column;
  gap: 2px;
}

.sidebar.collapsed .team-dot {
  width: 24px;
  height: 24px;
  font-size: 0.5rem;
}

.sidebar.collapsed .sidebar-team {
  flex-direction: column;
  gap: 2px;
}

/* Sidebar Nav — scrollable area */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border-dark);
  border-radius: 2px;
}

/* Sidebar Group */
.sidebar-group {
  margin-bottom: 0.25rem;
}

.sidebar-group-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 0.75rem 1rem 0.375rem;
  white-space: nowrap;
}

.sidebar.collapsed .sidebar-group-label {
  display: none;
}

/* Sidebar Segment Header (branded workflow names) */
.sidebar-segment-header {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  padding: 0.625rem 1rem 0.125rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.sidebar-segment-header:first-of-type {
  padding-top: 0.25rem;
}

.sidebar.collapsed .sidebar-segment-header {
  display: none;
}

body.light-theme .sidebar-segment-header {
  color: #64748B;
}

/* Sidebar Link */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin: 1px 0.5rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s;
  position: relative;
  white-space: nowrap;
}

.sidebar-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-link.active {
  color: var(--cyan);
  background: rgba(34, 211, 238, 0.08);
  font-weight: 600;
}

.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--cyan);
}

.sidebar-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-link-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed .sidebar-link-text,
.sidebar.collapsed .sidebar-badge {
  display: none;
}

.sidebar.collapsed .sidebar-link {
  justify-content: center;
  padding: 0.5rem;
  margin: 1px 0.25rem;
}

/* Sidebar Badge (action count) */
.sidebar-badge {
  margin-left: auto;
  background: var(--orange);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.125rem 0.375rem;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

/* Sidebar Separator — line between Workflow and Analysis groups */
.sidebar-separator {
  height: 1px;
  background: var(--border-dark);
  margin: 0.5rem 1rem;
  opacity: 0.6;
}

.sidebar.collapsed .sidebar-separator {
  margin: 0.5rem 0.25rem;
}

/* Sidebar Live Indicator — small green dot next to Monitor link */
.sidebar-live-indicator {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.sidebar-live-indicator .topbar-live-dot {
  width: 6px;
  height: 6px;
}

.sidebar.collapsed .sidebar-live-indicator {
  display: none;
}

/* ===== Connections Page Styles (Owner UX — Session 13) ===== */

/* Hero Section */
.conn-hero {
  text-align: center;
  margin-bottom: 2rem;
}

.conn-hero h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.conn-hero-sub {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 520px;
  margin: 0 auto;
}

.conn-time-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 20px;
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cyan);
  margin-top: 0.75rem;
}

.conn-time-pill svg {
  width: 14px;
  height: 14px;
}

/* Email Callout Card */
.conn-email-callout {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(34, 211, 238, 0.08));
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 14px;
  padding: 1.75rem 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

.conn-email-callout-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.conn-email-row {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
}

.conn-email-text {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cyan);
  font-family: 'Inter', monospace;
  letter-spacing: 0.01em;
  user-select: all;
}

.conn-copy-btn {
  background: var(--cyan);
  color: #0A1628;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.2s, transform 0.1s;
}

.conn-copy-btn:hover {
  opacity: 0.9;
}

.conn-copy-btn:active {
  transform: scale(0.96);
}

.conn-copy-btn.copied {
  background: #00C758;
}

.conn-email-callout-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.875rem;
  line-height: 1.5;
}

/* Section Headers */
.conn-section {
  margin-bottom: 2rem;
}

.conn-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.conn-section-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.conn-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.conn-section-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* Service Cards */
.conn-service-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.conn-service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.conn-service-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.conn-service-card.connected {
  border-left: 3px solid #00C758;
}

.conn-service-card.pending {
  border-left: 3px solid rgba(245, 158, 11, 0.6);
}

.conn-service-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  user-select: none;
}

.conn-service-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.conn-service-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.conn-service-icon svg {
  width: 20px;
  height: 20px;
}

.conn-service-info {
  flex: 1;
  min-width: 0;
}

.conn-service-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.conn-service-action {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.conn-service-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.conn-service-time {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.conn-service-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.conn-service-card.connected .conn-service-status {
  color: #00C758;
}

.conn-service-card.pending .conn-service-status {
  color: #F59E0B;
}

.conn-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.conn-service-card.connected .conn-status-dot {
  background: #00C758;
  box-shadow: 0 0 4px rgba(0, 199, 88, 0.5);
}

.conn-service-card.pending .conn-status-dot {
  background: #F59E0B;
}

.conn-service-chevron {
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.conn-service-card.open .conn-service-chevron {
  transform: rotate(180deg);
}

/* Expandable How-To Steps */
.conn-service-steps {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.conn-service-card.open .conn-service-steps {
  max-height: 400px;
}

.conn-steps-inner {
  padding: 0 1.25rem 1.25rem 4.25rem;
  border-top: 1px solid var(--border-dark);
  padding-top: 1rem;
}

.conn-step {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.5rem;
}

.conn-step:last-child {
  margin-bottom: 0;
}

.conn-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.12);
  color: var(--cyan);
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.conn-step-text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.conn-step-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.conn-permission-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  margin-left: 0.5rem;
}

/* Automatic Connections */
.conn-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.conn-auto-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  border-left: 3px solid rgba(34, 211, 238, 0.4);
}

.conn-auto-card .conn-service-icon {
  width: 32px;
  height: 32px;
}

.conn-auto-info {
  flex: 1;
  min-width: 0;
}

.conn-auto-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.conn-auto-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.conn-auto-badge {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cyan);
  background: rgba(34, 211, 238, 0.1);
  border-radius: 4px;
  padding: 3px 8px;
  flex-shrink: 0;
}

/* PMS Section */
.conn-pms-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1.5rem;
}

.conn-pms-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1rem;
}

.conn-pms-header .conn-service-icon {
  width: 40px;
  height: 40px;
}

.conn-pms-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.conn-pms-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.conn-pms-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.conn-pms-option {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 1rem;
}

.conn-pms-option-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.conn-pms-option-title .conn-auto-badge {
  font-size: 0.5625rem;
}

.conn-pms-option-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Progress Tracker (compact) */
.conn-progress {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.conn-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.conn-progress-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.conn-progress-count {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--cyan);
}

.conn-progress-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.conn-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.conn-progress-dots {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.conn-progress-dot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.conn-pdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-dark);
}

.conn-pdot.live {
  background: #00C758;
  box-shadow: 0 0 4px rgba(0, 199, 88, 0.4);
}

.conn-pdot-label {
  font-size: 0.5rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Trust & Safety */
.conn-trust {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.conn-trust-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.conn-trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.conn-trust-item svg {
  width: 16px;
  height: 16px;
  color: #00C758;
  flex-shrink: 0;
}

/* What Happens Next */
.conn-next {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(34, 211, 238, 0.05));
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.conn-next-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.conn-next-icon svg {
  width: 22px;
  height: 22px;
  color: #818cf8;
}

.conn-next-text {
  flex: 1;
}

.conn-next-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.conn-next-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.conn-next-link {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.conn-next-link:hover {
  text-decoration: underline;
}

/* Help/Support */
.conn-help {
  text-align: center;
  padding: 1rem 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.conn-help a {
  color: var(--cyan);
  text-decoration: none;
}

.conn-help a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px) {
  .conn-email-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  .conn-email-text {
    font-size: 0.875rem;
  }
  .conn-pms-options {
    grid-template-columns: 1fr;
  }
  .conn-service-row {
    padding: 0.875rem 1rem;
  }
  .conn-steps-inner {
    padding-left: 1rem;
  }
  .conn-trust-grid {
    flex-direction: column;
    gap: 0.75rem;
  }
  .conn-next {
    flex-direction: column;
    text-align: center;
  }
  .conn-auto-grid {
    grid-template-columns: 1fr;
  }
}

/* Sidebar Bottom — user + collapse button */
.sidebar-bottom {
  padding: 0.75rem;
  border-top: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  overflow: hidden;
}

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.sidebar-user-info {
  overflow: hidden;
}

.sidebar-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 0.625rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar.collapsed .sidebar-user-info {
  display: none;
}

.sidebar-collapse-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.sidebar.collapsed .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

/* Top Bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-dark);
  height: 48px;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 1.5rem;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar-title {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

/* LIVE Surveillance Badge */
.topbar-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #00C758;
  background: rgba(0, 199, 88, 0.08);
  border: 1px solid rgba(0, 199, 88, 0.2);
  padding: 2px 10px 2px 8px;
  border-radius: 12px;
  margin-left: 12px;
  user-select: none;
}

.topbar-live-dot {
  width: 6px;
  height: 6px;
  background: #00C758;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0, 199, 88, 0.6);
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(0, 199, 88, 0.6); }
  50% { opacity: 0.3; box-shadow: 0 0 2px rgba(0, 199, 88, 0.2); }
}

.sidebar-toggle-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 6px;
}

.sidebar-toggle-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar-right .theme-toggle-btn {
  background: none;
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 0.375rem;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s;
}

.topbar-right .theme-toggle-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.topbar-right .logout-btn {
  background: none;
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-sans);
  transition: color 0.2s, border-color 0.2s;
}

.topbar-right .logout-btn:hover {
  color: var(--red);
  border-color: var(--red);
}

.topbar-right .aps-logo {
  height: 26px;
  background: #fff;
  padding: 4px 10px;
  border-radius: 5px;
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 49;
}

/* Sidebar tooltip for collapsed mode */
.sidebar-tooltip {
  position: fixed;
  left: 62px;
  padding: 0.375rem 0.75rem;
  background: #1A365D;
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Fixed elements offset for sidebar (e.g. AI chat input) */
.chat-input-container {
  left: var(--sidebar-width);
}

/* Light theme — sidebar overrides */
body.light-theme .sidebar {
  background: #FFFFFF;
  border-right-color: #E2E5EA;
}

body.light-theme .sidebar-logo {
  border-bottom-color: #E2E5EA;
}

body.light-theme .sidebar-link {
  color: #475569;
}

body.light-theme .sidebar-link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #0F172A;
}

body.light-theme .sidebar-link.active {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
}

body.light-theme .sidebar-link.active::before {
  background: #6366f1;
}

body.light-theme .sidebar-group-label {
  color: #94A3B8;
}

body.light-theme .sidebar-bottom {
  border-top-color: #E2E5EA;
}

body.light-theme .sidebar-collapse-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}

body.light-theme .topbar {
  background: #FFFFFF;
  border-bottom-color: #E2E5EA;
}

body.light-theme .sidebar-tooltip {
  background: #0F172A;
}

body.light-theme .sidebar-connections {
  border-bottom-color: #E2E5EA;
}

body.light-theme .conn-count {
  background: rgba(0, 0, 0, 0.06);
  color: #64748B;
}

body.light-theme .conn-row:hover {
  background: rgba(0, 0, 0, 0.03);
}

body.light-theme .conn-row-name {
  color: #475569;
}

body.light-theme .conn-toggle {
  color: #94A3B8;
}

body.light-theme .conn-toggle:hover {
  color: #64748B;
}

/* Feature flags — disabled sidebar links */
.sidebar-link-disabled {
  opacity: 0.35;
  pointer-events: auto;
  cursor: not-allowed;
  position: relative;
}
.sidebar-link-disabled::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2362748E' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center;
}

/* Coming Soon overlay */
.coming-soon-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 22, 40, 0.8);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.coming-soon-card {
  background: #131E33;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  padding: 2rem 2.5rem;
  text-align: center;
  max-width: 360px;
}
.coming-soon-card svg {
  margin-bottom: 1rem;
}
.coming-soon-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
}
.coming-soon-card p {
  color: #62748E;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.coming-soon-close {
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.coming-soon-close:hover {
  opacity: 0.9;
}

body.light-theme .coming-soon-overlay {
  background: rgba(255, 255, 255, 0.85);
}
body.light-theme .coming-soon-card {
  background: #FFFFFF;
  border-color: #E2E5EA;
}
body.light-theme .coming-soon-card h3 {
  color: #1E293B;
}

body.light-theme .team-dot {
  border-color: #FFFFFF;
}

body.light-theme .online-dot {
  border-color: #FFFFFF;
}

/* Responsive — tablet (768-1024) */
@media (max-width: 1024px) {
  .sidebar:not(.open) {
    width: 56px;
  }
  .sidebar:not(.open) .sidebar-logo-text,
  .sidebar:not(.open) .sidebar-group-label,
  .sidebar:not(.open) .sidebar-segment-header,
  .sidebar:not(.open) .sidebar-link-text,
  .sidebar:not(.open) .sidebar-badge,
  .sidebar:not(.open) .sidebar-user-info,
  .sidebar:not(.open) .conn-dropdown,
  .sidebar:not(.open) .conn-chevron,
  .sidebar:not(.open) .conn-label-text,
  .sidebar:not(.open) .sidebar-team-label {
    display: none;
  }
  .sidebar:not(.open) .sidebar-link {
    justify-content: center;
    padding: 0.5rem;
    margin: 1px 0.25rem;
  }
  .layout-content {
    margin-left: 56px;
  }
  .chat-input-container {
    left: 56px;
  }
}

/* Responsive — mobile (<768) */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -240px;
    width: 240px;
    transition: left 0.25s ease;
    z-index: 100;
  }
  .sidebar.open {
    left: 0;
  }
  .sidebar.open .sidebar-logo-text,
  .sidebar.open .sidebar-group-label,
  .sidebar.open .sidebar-segment-header,
  .sidebar.open .sidebar-link-text,
  .sidebar.open .sidebar-badge,
  .sidebar.open .sidebar-user-info,
  .sidebar.open .conn-dropdown,
  .sidebar.open .conn-chevron,
  .sidebar.open .conn-label-text,
  .sidebar.open .sidebar-team-label {
    display: initial;
  }
  .sidebar.open .sidebar-link {
    justify-content: flex-start;
    padding: 0.5rem 0.75rem;
    margin: 1px 0.5rem;
  }
  .layout-content {
    margin-left: 0;
  }
  .sidebar-toggle-btn {
    display: flex;
  }
  .chat-input-container {
    left: 0;
  }
}

/* =====================================================
   Baseline / Full Audit Page
   ===================================================== */

/* Hero Section */
.baseline-hero {
  background: linear-gradient(135deg, rgba(13, 27, 42, 0.95) 0%, rgba(10, 22, 40, 0.98) 50%, rgba(13, 27, 42, 0.95) 100%);
  border: 1px solid var(--border-dark);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.baseline-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red) 0%, var(--orange) 25%, var(--cyan) 50%, var(--emerald) 100%);
  opacity: 0.6;
}

.baseline-hero-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.baseline-hero-kpis {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.baseline-hero-kpi {
  text-align: center;
}

.baseline-hero-kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.baseline-hero-kpi-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}

/* Score Ring — CSS conic-gradient donut */
.score-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.score-ring-inner {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-ring-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.score-ring-label {
  font-size: 0.5625rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* Tab enhancements for baseline */
.tab-btn .tab-issues-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  background: rgba(251, 44, 54, 0.2);
  color: var(--red);
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  min-width: 18px;
}

.tab-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.tab-btn .tab-coming {
  font-size: 0.5625rem;
  color: var(--text-muted);
  margin-left: 4px;
  font-weight: 400;
}

/* Review Health Badges */
.review-health {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: capitalize;
}

.review-health-healthy { background: rgba(0, 199, 88, 0.15); color: var(--green); }
.review-health-building { background: rgba(0, 210, 239, 0.15); color: var(--cyan); }
.review-health-weak { background: rgba(254, 110, 0, 0.15); color: var(--orange); }
.review-health-critical { background: rgba(251, 44, 54, 0.15); color: var(--red); }

/* Column group left-border tints */
.col-profile { border-left: 2px solid rgba(99, 102, 241, 0.3); }
.col-reviews { border-left: 2px solid rgba(34, 211, 238, 0.3); }
.col-response { border-left: 2px solid rgba(0, 187, 127, 0.3); }
.col-performance { border-left: 2px solid rgba(212, 175, 55, 0.3); }
.col-competition { border-left: 2px solid rgba(172, 75, 255, 0.3); }

/* GBP Review Health Donut (CSS) */
.gbp-donut-wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.gbp-donut {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.gbp-donut-center {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.gbp-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gbp-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.gbp-dot::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.gbp-dot-healthy::before { background: var(--green); }
.gbp-dot-building::before { background: var(--cyan); }
.gbp-dot-weak::before { background: var(--orange); }
.gbp-dot-critical::before { background: var(--red); }

/* Profile completeness bar */
.profile-bar {
  width: 60px;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

.profile-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

/* Findings section */
.findings-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Filter bar */
.baseline-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.baseline-filters input,
.baseline-filters select {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  font-family: var(--font-sans);
}

.baseline-filters input:focus,
.baseline-filters select:focus {
  outline: none;
  border-color: var(--cyan);
}

.baseline-filters .btn-export {
  margin-left: auto;
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  padding: 0.4rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.2s;
}

.baseline-filters .btn-export:hover {
  background: rgba(99, 102, 241, 0.2);
}

/* Table check/x icons */
.check-yes { color: var(--green); }
.check-no { color: var(--red); opacity: 0.5; }

/* Sortable column headers */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th.sortable:hover {
  color: var(--cyan);
}

th.sortable::after {
  content: ' \2195';
  font-size: 0.625rem;
  opacity: 0.4;
}

th.sortable.sort-asc::after {
  content: ' \2191';
  opacity: 0.8;
  color: var(--cyan);
}

th.sortable.sort-desc::after {
  content: ' \2193';
  opacity: 0.8;
  color: var(--cyan);
}

/* Responsive — hero stacking */
@media (max-width: 900px) {
  .baseline-hero-inner {
    flex-direction: column;
    text-align: center;
  }
  .baseline-hero-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .baseline-hero-kpis {
    grid-template-columns: 1fr;
  }
  .gbp-donut-wrap {
    flex-direction: column;
    align-items: center;
  }
}

body.light-theme .baseline-hero {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 246, 249, 0.98) 50%, rgba(255, 255, 255, 0.95) 100%);
}

body.light-theme .score-ring-inner {
  background: var(--bg-primary);
}

body.light-theme .profile-bar {
  background: rgba(0, 0, 0, 0.08);
}

body.light-theme .baseline-filters .btn-export {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  border-color: rgba(99, 102, 241, 0.3);
}

/* EST Badge — marks estimated data fields */
.est-badge {
  font-size: 0.5625rem;
  padding: 0 3px;
  border-radius: 2px;
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  font-weight: 600;
  margin-left: 3px;
  vertical-align: super;
  letter-spacing: 0.02em;
}

body.light-theme .est-badge {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

/* Shared Listing Indicator — co-located facilities */
.shared-indicator {
  font-size: 0.5625rem;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(34, 211, 238, 0.12);
  color: var(--cyan);
  margin-left: 4px;
  cursor: help;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.light-theme .shared-indicator {
  background: rgba(99, 102, 241, 0.08);
  color: #6366f1;
}

/* Data Confidence Banner */
.data-confidence-banner {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.15);
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.data-confidence-banner strong {
  color: var(--text-secondary);
}

body.light-theme .data-confidence-banner {
  background: rgba(99, 102, 241, 0.05);
  border-color: rgba(99, 102, 241, 0.2);
  color: #64748B;
}

body.light-theme .data-confidence-banner strong {
  color: #334155;
}

/* ========== ONBOARDING PAGE (Session 17) ========== */

.onb-hero {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #22d3ee, #10b981) 1;
}

.onb-hero-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.onb-hero-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.onb-hero-step {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dark);
}

.onb-hero-step.done {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
}

.onb-hero-step.done svg { color: #10b981; }

.onb-hero-bar {
  width: 100%;
  max-width: 400px;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  margin: 0 auto 0.5rem;
  overflow: hidden;
}

.onb-hero-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #22d3ee, #10b981);
  transition: width 0.6s ease;
}

.onb-hero-pct {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Agreement cards */
.onb-agreements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}

.onb-doc-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.onb-doc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.onb-doc-type {
  font-size: 0.6875rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.onb-badge {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.onb-badge-signed { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.onb-badge-pending { background: rgba(212, 175, 55, 0.15); color: #D4AF37; }
.onb-badge-overdue { background: rgba(251, 44, 54, 0.15); color: #FB2C36; }

.onb-doc-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.onb-doc-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.onb-doc-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.onb-doc-pricing {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.25rem;
}

.onb-doc-pricing-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.onb-doc-pricing-row.total {
  font-weight: 700;
  color: var(--text-primary);
  border-top: 1px solid var(--border-dark);
  margin-top: 0.25rem;
  padding-top: 0.5rem;
}

.onb-doc-download {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: all 0.2s;
  margin-top: auto;
  align-self: flex-start;
}

.onb-doc-download:hover { border-color: var(--cyan); color: var(--cyan); }

/* Invoice summary */
.onb-invoice-summary {
  display: flex;
  gap: 1.25rem;
  margin: 1rem 0 1.5rem;
}

.onb-invoice-stat {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  padding: 1.25rem;
  text-align: center;
}

.onb-invoice-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
}

.onb-invoice-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Invoice table */
.onb-invoice-table-wrap {
  overflow-x: auto;
}

.onb-invoice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.onb-invoice-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-dark);
  background: var(--bg-secondary);
}

.onb-invoice-table td {
  padding: 0.75rem 1rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-dark);
}

.onb-invoice-table tr:hover td { background: rgba(255,255,255,0.02); }

.onb-invoice-download {
  color: var(--text-muted);
  transition: color 0.2s;
}

.onb-invoice-download:hover { color: var(--cyan); }

/* Light theme overrides */
body.light-theme .onb-hero {
  background: #ffffff;
  border-color: #E2E8F0;
}

body.light-theme .onb-hero-step {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #64748B;
}

body.light-theme .onb-hero-step.done {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
  color: #059669;
}

body.light-theme .onb-hero-bar { background: #E2E8F0; }

body.light-theme .onb-doc-card {
  background: #ffffff;
  border-color: #E2E8F0;
}

body.light-theme .onb-doc-pricing {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

body.light-theme .onb-doc-download {
  border-color: #E2E8F0;
  color: #64748B;
}

body.light-theme .onb-invoice-stat {
  background: #ffffff;
  border-color: #E2E8F0;
}

body.light-theme .onb-invoice-table th {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #64748B;
}

body.light-theme .onb-invoice-table td {
  border-color: #E2E8F0;
  color: #334155;
}

body.light-theme .onb-invoice-table tr:hover td { background: #F8FAFC; }

/* Responsive */
@media (max-width: 768px) {
  .onb-agreements-grid { grid-template-columns: 1fr; }
  .onb-invoice-summary { flex-direction: column; }
  .onb-hero-steps { gap: 0.75rem; }
}

/* ===== Partnership Plan Card (Session 18) ===== */
.onb-plan-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dark);
  border-left: 3px solid #D4AF37;
  border-radius: 12px;
  padding: 2rem;
  margin-top: 1rem;
}

.onb-plan-header {
  margin-bottom: 1.75rem;
}

.onb-plan-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.onb-badge-founding {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.875rem;
  border-radius: 20px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  background: linear-gradient(135deg, #D4AF37 0%, #F5D060 100%);
  color: #1a1200;
  width: fit-content;
}

.onb-plan-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0.25rem;
}

.onb-plan-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Pricing hero */
.onb-plan-hero {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.onb-plan-price-block {
  display: flex;
  flex-direction: column;
}

.onb-plan-price {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.onb-plan-price-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.onb-plan-price-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.onb-plan-original {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.onb-plan-original s {
  color: var(--text-muted);
  opacity: 0.6;
}

.onb-plan-discount {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  margin-left: 0.375rem;
}

.onb-plan-waived {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  margin-left: 0.375rem;
}

/* Section labels */
.onb-plan-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

/* Coverage grid */
.onb-coverage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.onb-coverage-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

.onb-coverage-count {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
}

.onb-coverage-type {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}

/* Perks list */
.onb-perks-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
}

.onb-perk-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Summary footer */
.onb-plan-summary {
  background: var(--bg-secondary);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  padding: 1.25rem;
}

.onb-plan-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  text-align: center;
}

.onb-plan-summary-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
}

.onb-plan-summary-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.125rem;
}

.onb-plan-savings .onb-plan-summary-value {
  color: #10B981;
}

.onb-plan-savings-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-dark);
}

/* Light theme — plan card */
body.light-theme .onb-plan-card {
  background: #ffffff;
  border-color: #E2E8F0;
  border-left-color: #D4AF37;
}

body.light-theme .onb-coverage-card {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

body.light-theme .onb-plan-summary {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

body.light-theme .onb-plan-hero {
  border-color: #E2E8F0;
}

/* Responsive — plan card */
@media (max-width: 768px) {
  .onb-coverage-grid { grid-template-columns: repeat(2, 1fr); }
  .onb-plan-summary-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .onb-plan-hero { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .onb-plan-card { padding: 1.25rem; }
}