/* IBM Plex Mono — precision numeric typography */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

/* Modern theme overrides */
:root {
  /* Synapse main-page inspired palette */
  --brand-indigo: #1d3f9f; /* electric brand blue */
  --brand-violet: #5a4bff; /* violet accent */
  --brand-indigo-soft: #294f9a; /* calmer indigo */
  --brand-violet-soft: #6b60d0; /* calmer violet */
  --brand-indigo-400: #2f6fd3;
  --brand-violet-400: #7d73ff;
  --brand-cyan: #1ec6f3;
  --accent-quiet: #5f739a;
  --semantic-good: #1f8f63;
  --semantic-warning: #bf8223;
  --semantic-danger: #bf3b4b;

  /* Theme variables (overridden per theme below) */
  --bg-gradient-start: #0f172a;
  --bg-gradient-end: #111827;
  --canvas: radial-gradient(1200px 600px at 10% -10%, rgba(29, 63, 159, 0.14), transparent),
            radial-gradient(900px 500px at 90% -20%, rgba(30, 198, 243, 0.14), transparent),
            linear-gradient(180deg, var(--bg-gradient-start), var(--bg-gradient-end));

  --surface: #ffffff; /* all data surfaces are white by request */
  --surface-contrast: #0f172a;
  --text-muted: #607493;
  --ring: rgba(30, 198, 243, 0.32);
  --elev: 0 10px 30px rgba(2, 6, 23, 0.12), 0 4px 10px rgba(2, 6, 23, 0.06);
  --elev-soft: 0 6px 18px rgba(2, 6, 23, 0.08), 0 2px 8px rgba(2, 6, 23, 0.04);

  --radius: 14px;
  --font-ui: "Segoe UI", "Avenir Next", "Inter", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

/* Light/Dark themes */
[data-theme="dark"] {
  --bg-gradient-start: #0f172a; /* slate-900 */
  --bg-gradient-end: #0b1438;   /* synapse navy */
  --canvas: radial-gradient(1200px 600px at 10% -10%, rgba(29, 63, 159, 0.16), transparent),
            radial-gradient(900px 500px at 90% -20%, rgba(30, 198, 243, 0.16), transparent),
            linear-gradient(180deg, var(--bg-gradient-start), var(--bg-gradient-end));
  /* surfaces stay white as requested */
}

[data-theme="light"] {
  --bg-gradient-start: #f4f7ff; /* synapse light canvas */
  --bg-gradient-end: #e8efff;
  --canvas: radial-gradient(1100px 450px at 8% -12%, rgba(29, 63, 159, 0.08), transparent),
            radial-gradient(950px 420px at 95% -20%, rgba(30, 198, 243, 0.08), transparent),
            linear-gradient(180deg, var(--bg-gradient-start), var(--bg-gradient-end));
}

/* Explicit dark mode driven by the Light mode toggle */
body[data-theme="dark"] {
  color: #dbe7fb;
}

body[data-theme="dark"] .top-navbar {
  background: linear-gradient(135deg, #1b3272, #433a9b);
}

body[data-theme="dark"] .navbar-text,
body[data-theme="dark"] .top-navbar .nav-link,
body[data-theme="dark"] .top-navbar .navbar-brand,
body[data-theme="dark"] .top-navbar .form-check-label {
  color: #e7efff !important;
}

body[data-theme="dark"] .card {
  background: #111a2b;
  color: #e5ecfb;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.42), 0 4px 14px rgba(2, 6, 23, 0.32);
}

body[data-theme="dark"] .card .card-body,
body[data-theme="dark"] .card .card-title,
body[data-theme="dark"] .card .card-subtitle,
body[data-theme="dark"] .card .text-muted {
  color: #d2def3 !important;
}

body[data-theme="dark"] .metric-card .card-body {
  background: linear-gradient(180deg, #111a2b, #0f1829);
}

body[data-theme="dark"] .btn-outline-secondary {
  border-color: rgba(148, 163, 184, 0.34);
  color: #d8e4fb;
  background: rgba(30, 41, 59, 0.72);
}

body[data-theme="dark"] .btn-outline-secondary:hover {
  border-color: rgba(148, 163, 184, 0.5);
  background: rgba(51, 65, 85, 0.78);
}

body[data-theme="dark"] .form-select,
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .input-group-text {
  background-color: #182235;
  border-color: rgba(148, 163, 184, 0.3);
  color: #e5ecfb;
}

body[data-theme="dark"] .form-select option {
  background-color: #182235;
  color: #e5ecfb;
}

body[data-theme="dark"] .table {
  color: #dbe7fb;
  border-color: rgba(148, 163, 184, 0.22);
}

body[data-theme="dark"] .table thead th {
  background: linear-gradient(180deg, #1a253a, #162033);
  color: #dbe7fb;
  border-color: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] .table tbody td {
  background-color: #111a2b;
  border-color: rgba(148, 163, 184, 0.16);
}

body[data-theme="dark"] .text-dark {
  color: #dbe7fb !important;
}

body[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: #1a2740;
}

body[data-theme="dark"] .dropdown-menu {
  background-color: #151f32;
  border-color: rgba(148, 163, 184, 0.24);
  color: #dbe7fb;
}

body[data-theme="dark"] .dropdown-item,
body[data-theme="dark"] .dropdown-menu .form-check-label,
body[data-theme="dark"] .dropdown-menu .btn-link {
  color: #dbe7fb !important;
}

body[data-theme="dark"] .dropdown-item:hover {
  background-color: #22304a;
}

body[data-theme="dark"] .segmented-control {
  background: #101a2c;
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: inset 0 1px 3px rgba(2, 6, 23, 0.45);
}

body[data-theme="dark"] .segmented-control label {
  color: #a9badb;
}

body[data-theme="dark"] .segmented-control label:hover {
  color: #dbe7fb;
  background: rgba(71, 85, 105, 0.38);
}

body[data-theme="dark"] .segmented-control input[type="radio"]:checked + label {
  background: #22324f;
  color: #f3f7ff;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.35);
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-filter-card,
body[data-theme="dark"] .dashboard-modern-shell .dashboard-chart-card,
body[data-theme="dark"] .dashboard-modern-shell .dashboard-table-card {
  border-color: rgba(148, 163, 184, 0.22);
  background: #111a2b;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-chart-card .card-header,
body[data-theme="dark"] .dashboard-modern-shell .dashboard-table-card .card-header {
  background: linear-gradient(180deg, #1a253a, #162033);
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-page-info,
body[data-theme="dark"] .dashboard-modern-shell .dashboard-page-info .page-total {
  color: #dbe7fb;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-page-info .page-divider {
  color: #9fb1d4;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-page-btn {
  background: #1a253a;
  border-color: rgba(148, 163, 184, 0.34);
  color: #dbe7fb;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.24);
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-page-btn:hover:not(:disabled) {
  border-color: rgba(148, 163, 184, 0.55);
  background: #22324f;
  color: #f3f7ff;
}

body[data-theme="dark"] .dashboard-modern-shell .quick-filter-chip {
  background: #172235;
  border-color: rgba(148, 163, 184, 0.25);
  color: #dbe7fb;
}

body {
  background: var(--canvas);
  background-attachment: fixed;
  font-family: var(--font-ui);
  color: #0f172a;
}

.main-content {
  background: transparent !important;
  padding-top: 28px !important;
}

.main-content #page-content { max-width: none; margin: 0; }

.card {
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--elev);
  background: #ffffff;
  color: #111111;
  backdrop-filter: none;
  border: none;
}

/* Utility classes to ensure consistency from HTML */
.bg-white { background-color: #ffffff !important; }
.rounded-4 { border-radius: var(--radius) !important; }
.border-0 { border: 0 !important; }

.card .card-title,
.card .card-subtitle {
  letter-spacing: 0.2px;
}

.metric-card .card-body {
  background: linear-gradient(180deg, #ffffff, #f9fafb);
  border-radius: var(--radius);
}

/* Ensure readable text inside cards */
.card .card-body,
.card .card-title,
.card .card-subtitle { color: #111111; }
.card .text-muted { color: var(--text-muted) !important; }
.card .bg-light { background-color: #f8fafc !important; }

.top-navbar {
  backdrop-filter: saturate(150%) blur(8px);
  background: linear-gradient(135deg, var(--brand-indigo-soft), var(--brand-violet-soft));
  background-size: 100% 100%;
  animation: none; /* Avoid animated gradient repaint jitter in sticky nav */
}

.top-navbar .navbar-brand {
  letter-spacing: 0.2px;
}

.top-navbar .nav-link {
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.top-navbar .nav-link.active {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
}

.top-navbar .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.34);
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
}

.top-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(191, 219, 254, 0.45);
}

.top-navbar .navbar-toggler-icon {
  filter: invert(1) brightness(2.2);
}

.btn,
.form-select,
.form-control {
  border-radius: 10px;
}

.btn-primary,
.bg-primary {
  background-image: linear-gradient(135deg, var(--brand-indigo), var(--brand-violet));
  border: 0;
}

.btn-outline-secondary {
  border-color: rgba(29, 63, 159, 0.24);
  color: #24488b;
  background: rgba(255,255,255,0.65);
}

.btn:hover { filter: brightness(0.98); }
.btn:active { transform: translateY(1px); }

.progress {
  background-color: rgba(255,255,255,0.35);
  border-radius: 999px;
}

.progress-bar.bg-warning { background-image: linear-gradient(135deg, #f59e0b, #fbbf24); }
.progress-bar.bg-success { background-image: linear-gradient(135deg, #10b981, #34d399); }
.progress-bar.bg-primary { background-image: linear-gradient(135deg, var(--brand-indigo-400), var(--brand-violet-400)); }

.table-hover tbody tr:hover {
  background-color: #edf2ff;
}

.table thead th {
  background: linear-gradient(180deg, #f7f9ff, #edf2ff);
  position: sticky;
  top: 0;
  z-index: 1;
  color: #0f172a;
}

/* High-contrast, consistent table surfaces */
.table { color: #0f172a; background-color: var(--surface); border-color: #e5e7eb; }
.table tbody td { background-color: #ffffff; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f8fafc; }

/* Charts on light surfaces */
.card .chart-container {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border-radius: var(--radius);
  padding: 12px;
  height: 340px;
}
.card .chart-container canvas {
  background: transparent;
  width: 100% !important;
  height: 100% !important;
}

/* Revert forced text color overrides */
.card, .card * { color: inherit; }
.chartjs-render-monitor, canvas { color: inherit !important; }

/* Quick filters card readability */
.card .form-select, .card label, .card h6.card-title { color: #111111; }
.card .form-select { background-color: #ffffff; border-color: #e5e7eb; color: #0f172a; }
.card .form-select option { color: #0f172a; }

.chart-container canvas {
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.06));
  border-radius: 12px;
}

.form-select.form-select-sm {
  border-radius: 10px;
  box-shadow: 0 0 0 3px transparent;
  transition: box-shadow .15s ease;
}

.form-select.form-select-sm:focus {
  box-shadow: 0 0 0 3px var(--ring);
}

.navbar .nav-link {
  font-weight: 500;
}

.navbar .nav-link .bi {
  font-size: 1rem;
}

.card.border-0.shadow-sm {
  border-radius: var(--radius) !important;
  box-shadow: var(--elev-soft) !important;
}

.metric-icon {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}

.metric-icon.metric-icon-reduction {
  background: rgba(176, 86, 98, 1) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(176, 86, 98, 1);
}

.metric-icon.metric-icon-reduction-rate {
  background: rgba(194, 120, 44, 1) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(194, 120, 44, 1);
}

.metric-icon.metric-icon-lead-time {
  background: rgba(37, 99, 235, 0.85) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.85);
}

.dashboard-modern-shell .metric-icon.metric-icon-billed {
  background-image: linear-gradient(135deg, var(--brand-indigo-soft), var(--brand-violet-soft)) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dashboard-modern-shell .dashboard-sync-btn {
  background-image: linear-gradient(135deg, var(--brand-indigo-soft), var(--brand-violet-soft)) !important;
  border: 0;
  box-shadow: 0 2px 8px rgba(41, 79, 154, 0.22);
}

.dashboard-modern-shell .dashboard-sync-btn:hover {
  filter: brightness(0.98);
  box-shadow: 0 4px 12px rgba(41, 79, 154, 0.28);
}

/* Dashboard modernization layer */
.dashboard-modern-shell .dashboard-page-toolbar {
  padding: 6px 2px 2px;
}

.dashboard-modern-shell .dashboard-filter-card {
  border: 1px solid rgba(53, 92, 168, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 250, 255, 0.93));
  overflow: visible;
  position: relative;
}

.dashboard-modern-shell .dashboard-filter-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, rgba(53, 92, 168, 0.9), rgba(77, 167, 207, 0.85));
  pointer-events: none;
}

.dashboard-modern-shell .quick-filter-status {
  font-size: 0.8rem;
  color: #355ca8;
  background: rgba(77, 167, 207, 0.09);
  border: 1px solid rgba(77, 167, 207, 0.24);
  border-radius: 999px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
}

.dashboard-modern-shell .dashboard-filter-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.dashboard-modern-shell .dashboard-filter-btn.has-selection {
  border-color: rgba(53, 92, 168, 0.3);
  background: linear-gradient(180deg, #ffffff, #f7faff);
  box-shadow: 0 0 0 2px rgba(77, 167, 207, 0.09);
}

.dashboard-modern-shell .filter-count-badge {
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f78be, #6b60d0);
  color: #ffffff;
  font-size: 0.72rem;
  line-height: 20px;
  text-align: center;
  font-weight: 700;
  padding: 0 6px;
}

.dashboard-modern-shell .active-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-modern-shell .quick-filter-chip {
  border: 1px solid rgba(29, 63, 159, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: #1f2f53;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
}

.dashboard-modern-shell .quick-filter-chip:hover {
  background: #f6f9ff;
  border-color: rgba(29, 63, 159, 0.35);
}

.dashboard-modern-shell .quick-filter-chip .chip-label {
  font-weight: 600;
  text-transform: capitalize;
}

.dashboard-modern-shell .quick-filter-chip .chip-value {
  color: #4a5f89;
}

.dashboard-modern-shell .dashboard-metric-card {
  border: 1px solid rgba(29, 63, 159, 0.08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.dashboard-modern-shell .dashboard-metric-card,
.dashboard-modern-shell .dashboard-chart-card,
.dashboard-modern-shell .dashboard-table-card {
  animation: dashboardCardRise .42s ease both;
}

.dashboard-modern-shell .dashboard-chart-card {
  animation-delay: 0.05s;
}

.dashboard-modern-shell .dashboard-table-card {
  animation-delay: 0.08s;
}

.dashboard-modern-shell .dashboard-metric-card:hover {
  transform: translateY(-2px);
  border-color: rgba(53, 92, 168, 0.2);
  box-shadow: 0 9px 18px rgba(15, 23, 42, 0.1);
}

.dashboard-modern-shell .dashboard-chart-card,
.dashboard-modern-shell .dashboard-table-card {
  border: 1px solid rgba(29, 63, 159, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dashboard-modern-shell .dashboard-chart-card .card-header,
.dashboard-modern-shell .dashboard-table-card .card-header {
  background: linear-gradient(180deg, #fcfdff, #f5f8ff);
  border-bottom: 1px solid #eaf0fb;
}

.dashboard-modern-shell .dashboard-table-card .card-header {
  padding: 0.48rem 0.78rem;
}

.dashboard-modern-shell .dashboard-chart-card .card-header {
  min-height: 60px;
  display: flex;
  align-items: center;
}

.dashboard-modern-shell .dashboard-chart-body {
  height: 340px;
}

.dashboard-modern-shell .dashboard-table-card .card-body {
  min-height: 416px;
}

.dashboard-modern-shell #topRepsTable,
.dashboard-modern-shell #statePerformanceTable,
.dashboard-modern-shell #topAttorneysTable,
.dashboard-modern-shell #attorneyAnalysisTable {
  min-height: 400px;
}

/* Keep all performance table cards a consistent size on multi-column layouts */
@media (min-width: 768px) {
  .dashboard-modern-shell .dashboard-table-card {
    min-height: 540px;
    height: 100%;
  }

  .dashboard-modern-shell .dashboard-table-card .card-header {
    flex: 0 0 auto;
    min-height: 60px;
  }

  .dashboard-modern-shell .dashboard-table-card .card-body {
    flex: 1 1 auto;
    min-height: 0;
  }

  .dashboard-modern-shell #topRepsTable,
  .dashboard-modern-shell #statePerformanceTable,
  .dashboard-modern-shell #topAttorneysTable,
  .dashboard-modern-shell #attorneyAnalysisTable {
    height: 100%;
    min-height: 0;
  }
}

.dashboard-modern-shell .dashboard-page-btn {
  border-radius: 999px;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: #d0dcf8;
  color: #365896;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(12, 23, 43, 0.08);
}

.dashboard-modern-shell .dashboard-table-header-row {
  flex-wrap: wrap;
  gap: 6px 10px;
}

.dashboard-modern-shell .dashboard-table-header-controls {
  margin-left: auto;
  flex-wrap: wrap;
  row-gap: 4px;
  gap: 6px;
  justify-content: flex-end;
}

.dashboard-modern-shell .dashboard-table-sort-controls {
  flex-wrap: wrap;
  gap: 4px;
}

/* Compact segmented labels inside card headers */
.dashboard-modern-shell .card-header .segmented-control label {
  padding: 4px 8px;
  font-size: 0.78rem;
}

.dashboard-modern-shell .dashboard-table-pagination-controls {
  margin-left: auto;
  flex-wrap: nowrap;
  background: linear-gradient(180deg, #fcfdff, #f6f9ff);
  border: 1px solid #e1e9fb;
  border-radius: 999px;
  padding: 2px 5px;
  gap: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.dashboard-modern-shell .dashboard-page-info {
  min-width: 44px;
  text-align: center;
  font-size: 0.78rem;
  color: #1f2f53;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
}

.dashboard-modern-shell .dashboard-page-info .page-current {
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f78be, #6b60d0);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  line-height: 1;
}

.dashboard-modern-shell .dashboard-page-info .page-divider {
  color: #6b7ea5;
  font-weight: 700;
}

.dashboard-modern-shell .dashboard-page-info .page-total {
  color: #4b5f88;
  min-width: 14px;
}

.dashboard-modern-shell .dashboard-page-btn:hover:not(:disabled) {
  border-color: #a9c0ea;
  color: #2f4f86;
  transform: translateY(-1px);
}

.dashboard-modern-shell .dashboard-page-btn:disabled {
  opacity: 0.45;
  box-shadow: none;
  transform: none;
}

@media (max-width: 1200px) {
  .dashboard-modern-shell .dashboard-table-header-controls {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 992px) {
  .dashboard-modern-shell .dashboard-page-toolbar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }

  .dashboard-modern-shell .dashboard-page-toolbar > h1 {
    margin-bottom: 0;
    font-size: 2rem;
  }

  .dashboard-modern-shell .dashboard-page-toolbar > div:last-child {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .dashboard-modern-shell .dashboard-page-toolbar .dashboard-sync-btn,
  .dashboard-modern-shell .dashboard-page-toolbar .dashboard-force-sync-btn {
    min-height: 44px;
    line-height: 1.2;
    justify-content: center;
  }

  .dashboard-modern-shell .dashboard-table-sort-controls {
    width: 100%;
  }

  .dashboard-modern-shell .dashboard-table-pagination-controls {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: 2px;
  }
}

@media (max-width: 900px) {
  .dashboard-modern-shell .row > .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .dashboard-modern-shell .dashboard-page-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .dashboard-modern-shell .dashboard-table-pagination-controls {
    padding: 6px 10px;
    gap: 8px;
  }

  .dashboard-modern-shell .segmented-control label {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .dashboard-modern-shell .dashboard-chart-body,
  .card .chart-container {
    height: 280px;
  }
}

@media (max-width: 576px) {
  .dashboard-modern-shell .dashboard-page-toolbar > h1 {
    font-size: 1.9rem;
    line-height: 1.15;
  }

  .dashboard-modern-shell .dashboard-page-toolbar > div:last-child {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-modern-shell .dashboard-page-toolbar .dashboard-sync-btn,
  .dashboard-modern-shell .dashboard-page-toolbar .dashboard-force-sync-btn {
    font-size: 0.95rem;
  }

  .dashboard-modern-shell .segmented-control label {
    min-height: 42px;
    padding: 10px 8px;
    font-size: 0.78rem;
  }

  .dashboard-modern-shell .dashboard-chart-body,
  .card .chart-container {
    height: 240px;
    padding: 10px;
  }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  PRECISION LEDGER — Payments Design System              ║
   ║  Typography-first, data-dense, surgical color use.      ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── CSS Variables ──────────────────────────────────────── */
.payments-modern-shell {
  --pl-blue:       #2563eb;
  --pl-blue-dim:   rgba(37,99,235,0.08);
  --pl-indigo:     #4f46e5;
  --pl-slate:      #0f172a;
  --pl-slate-mid:  #334155;
  --pl-slate-soft: #64748b;
  --pl-border:     rgba(15,23,42,0.08);
  --pl-border-mid: rgba(15,23,42,0.13);
  --pl-surface:    #ffffff;
  --pl-surface-2:  #f8fafc;
  --pl-mono:       'IBM Plex Mono', 'Roboto Mono', ui-monospace, monospace;
  /* Risk colors */
  --pl-critical:   #dc2626;
  --pl-high:       #ea580c;
  --pl-medium:     #d97706;
  --pl-low:        #16a34a;
  --pl-none:       #94a3b8;
  /* Debug/amber */
  --pl-amber:      #b45309;
  --pl-amber-bg:   rgba(180,83,9,0.05);
  --pl-amber-border: rgba(180,83,9,0.18);
}

/* ── Page toolbar ───────────────────────────────────────── */
.payments-modern-shell .payments-page-toolbar {
  padding: 4px 2px 2px;
}
.payments-modern-shell .pmt-page-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.payments-modern-shell .pmt-page-subtitle {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  font-weight: 700;
  margin-top: 1px;
}
body[data-theme="dark"] .payments-modern-shell .pmt-page-title {
  color: #dbe7fb;
}
body[data-theme="dark"] .payments-modern-shell .pmt-page-subtitle {
  color: #3d5070;
}

/* ── Filter card ────────────────────────────────────────── */
.payments-modern-shell .payments-filter-card {
  background: var(--pl-surface);
  border: 1px solid var(--pl-border-mid);
  border-radius: 12px;
  overflow: visible;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.03);
}

.payments-modern-shell .payments-filter-card .card-body,
.payments-modern-shell .payments-filter-card .dropdown {
  overflow: visible;
}

.payments-modern-shell .payments-filter-card .dropdown-menu {
  z-index: 1080;
}

/* Filter toolbar header */
.payments-modern-shell .payments-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pl-border);
}

.payments-modern-shell .payments-filter-toolbar h6 {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pl-slate);
}

.payments-modern-shell .payments-filter-toolbar small {
  font-size: 0.72rem;
  color: var(--pl-slate-soft);
}

/* Filter inputs — Precision Ledger style */
.payments-modern-shell .payments-filter-card .form-label {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--pl-slate-soft);
  margin-bottom: 0.3rem;
}

/* Search input */
.payments-modern-shell .payments-filter-card .form-control {
  border-radius: 8px;
  border-color: rgba(15,23,42,0.14);
  font-size: 0.82rem;
  height: 36px;
  padding: 0.3rem 0.75rem;
  background: var(--pl-surface);
  transition: border-color .15s, box-shadow .15s;
}

.payments-modern-shell .payments-filter-card .form-control:focus {
  border-color: var(--pl-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* Dropdown trigger — precision filter button */
.payments-modern-shell .payments-filter-card .btn-outline-secondary {
  height: 36px;
  border-radius: 8px;
  border-color: rgba(15,23,42,0.14);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--pl-slate);
  background: var(--pl-surface);
  transition: border-color .15s, background .15s, color .15s;
  padding: 0.3rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.payments-modern-shell .payments-filter-card .btn-outline-secondary:hover,
.payments-modern-shell .payments-filter-card .btn-outline-secondary:focus,
.payments-modern-shell .payments-filter-card .btn-outline-secondary.show {
  background: rgba(37,99,235,0.05) !important;
  border-color: rgba(37,99,235,0.35) !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.08) !important;
}
/* Active filter indicator on button */
.payments-modern-shell .payments-filter-card .btn-outline-secondary.filter-active {
  border-color: rgba(37,99,235,0.4) !important;
  background: rgba(37,99,235,0.07) !important;
  color: #1d4ed8 !important;
}
.payments-modern-shell .payments-filter-card .btn-outline-secondary.filter-active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #2563eb;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}

/* Dropdown menus — precision panel */
.payments-modern-shell .payments-filter-card .dropdown-menu {
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(15,23,42,0.1), 0 2px 8px rgba(15,23,42,0.06);
  padding: 0.55rem;
  background: var(--pl-surface);
  min-width: 210px;
  max-height: 320px;
  overflow-y: auto;
}

/* Dropdown search input */
.payments-modern-shell .payments-filter-card .dropdown-menu .form-control-sm {
  height: 30px;
  font-size: 0.78rem;
  border-radius: 6px;
  border-color: rgba(15,23,42,0.14);
  padding: 0.22rem 0.6rem;
  background: rgba(248,250,252,0.8);
  margin-bottom: 0.4rem !important;
}
.payments-modern-shell .payments-filter-card .dropdown-menu .form-control-sm:focus {
  border-color: var(--pl-blue);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}

/* Custom checkbox rows in dropdown */
.payments-modern-shell .payments-filter-card .dropdown-menu .form-check {
  padding: 0.2rem 0.3rem 0.2rem 1.75rem;
  border-radius: 6px;
  transition: background .12s;
  cursor: pointer;
  margin: 1px 0;
}
.payments-modern-shell .payments-filter-card .dropdown-menu .form-check:hover {
  background: rgba(37,99,235,0.05);
}
.payments-modern-shell .payments-filter-card .dropdown-menu .form-check-input {
  border-radius: 4px;
  border-color: rgba(15,23,42,0.2);
  margin-top: 0.16em;
  cursor: pointer;
}
.payments-modern-shell .payments-filter-card .dropdown-menu .form-check-input:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}
.payments-modern-shell .payments-filter-card .dropdown-menu .form-check-input:focus {
  box-shadow: 0 0 0 2px rgba(37,99,235,0.18);
}
.payments-modern-shell .payments-filter-card .dropdown-menu .form-check-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--pl-slate);
  cursor: pointer;
  padding-left: 0.25rem;
  user-select: none;
}
/* All-option row bolder */
.payments-modern-shell .payments-filter-card .dropdown-menu .form-check:first-of-type .form-check-label {
  font-weight: 700;
  color: var(--pl-slate-mid);
}

/* Divider inside dropdown */
.payments-modern-shell .payments-filter-card .dropdown-menu hr {
  border-color: rgba(15,23,42,0.08);
  margin: 0.35rem 0;
}

/* Apply button inside dropdown */
.payments-modern-shell .payments-filter-card .dropdown-menu .btn-primary {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.35rem 1rem;
  border-radius: 7px;
  background: #1d4ed8;
  border-color: #1d4ed8;
  width: 100%;
  transition: background .15s;
}
.payments-modern-shell .payments-filter-card .dropdown-menu .btn-primary:hover {
  background: #1e40af;
  border-color: #1e40af;
}
/* Sticky apply footer */
.payments-modern-shell .payments-filter-card .dropdown-menu .position-sticky {
  background: var(--pl-surface) !important;
  padding-top: 0.4rem !important;
  margin-top: 0.3rem !important;
  border-top: 1px solid rgba(15,23,42,0.08) !important;
}

/* Filter status pill */
.payments-modern-shell .payments-filter-status {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pl-blue);
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.2);
}

/* Active filter chips */
.payments-modern-shell .payments-active-filter-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.payments-modern-shell .payments-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1d40ae;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.2);
}

.payments-modern-shell .payments-filter-chip .chip-label {
  color: var(--pl-slate-soft);
  font-weight: 600;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.payments-modern-shell .payments-filter-chip .chip-value {
  color: #1d40ae;
  font-weight: 700;
}

/* Filter summary */
.payments-modern-shell .payments-filter-summary {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pl-slate-soft);
  background: var(--pl-surface-2);
  border: 1px solid var(--pl-border-mid);
}

/* ── Table cards ────────────────────────────────────────── */
.payments-modern-shell .payments-metric-card,
.payments-modern-shell .payments-chart-card,
.payments-modern-shell .payments-table-card {
  border: 1px solid var(--pl-border-mid);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.03);
}

.payments-modern-shell .payments-metric-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.payments-modern-shell .payments-metric-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37,99,235,0.22);
  box-shadow: 0 8px 20px rgba(15,23,42,0.09);
}

/* Card headers */
.payments-modern-shell .payments-chart-card .card-header,
.payments-modern-shell .payments-table-card .card-header {
  background: var(--pl-surface);
  border-bottom: 1px solid var(--pl-border);
  padding: 14px 20px;
}

/* ── Table header typography ────────────────────────────── */
.payments-modern-shell .payments-table-card .table thead th {
  font-size: 0.63rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #8fa3c4 !important;
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(15,23,42,0.08) !important;
  padding: 10px 8px !important;
  white-space: nowrap;
}

/* ── Table rows ─────────────────────────────────────────── */
.payments-modern-shell .payments-table-card .table tbody td {
  padding: 10px 8px !important;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(15,23,42,0.05) !important;
  vertical-align: middle;
}

/* Hover state */
.payments-modern-shell .payments-table-card .table-hover tbody tr:hover td {
  background: rgba(37,99,235,0.03) !important;
}

/* Risk accent — left border stripe system */
.payments-modern-shell .pmt-row { position: relative; }
.payments-modern-shell .pmt-row td:first-child { padding-left: 18px !important; position: relative; }
.payments-modern-shell .pmt-row td:first-child::before {
  content: '';
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 3px;
  border-radius: 0 2px 2px 0;
}
.payments-modern-shell .pmt-row.risk-critical td:first-child::before { background: var(--pl-critical); }
.payments-modern-shell .pmt-row.risk-high td:first-child::before { background: var(--pl-high); }
.payments-modern-shell .pmt-row.risk-medium td:first-child::before { background: var(--pl-medium); }
.payments-modern-shell .pmt-row.risk-low td:first-child::before { background: var(--pl-low); box-shadow: none; opacity: 0.5; }
.payments-modern-shell .pmt-row.risk-none td:first-child::before { background: var(--pl-none); opacity: 0.3; }

/* ── Invoice link ───────────────────────────────────────── */
.payments-modern-shell .pmt-invoice-link {
  font-family: var(--pl-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pl-blue);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.payments-modern-shell .pmt-invoice-link:hover {
  color: var(--pl-indigo);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Monospaced numeric cells ───────────────────────────── */
.payments-modern-shell .pmt-num {
  font-family: var(--pl-mono);
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--pl-slate);
}
.payments-modern-shell .pmt-num-balance {
  font-family: var(--pl-mono);
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #dc2626;
}
.payments-modern-shell .pmt-num-collected {
  font-family: var(--pl-mono);
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #16a34a;
}

/* ── Risk badge ─────────────────────────────────────────── */
.payments-modern-shell .pmt-risk-badge {
  display: inline-block;
  font-size: 0.63rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase;
  padding: 0.18em 0.55em !important;
  border-radius: 4px !important;
}

/* ── Days open badge ────────────────────────────────────── */
.payments-modern-shell .pmt-days-badge {
  font-family: var(--pl-mono);
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 0.15em 0.45em !important;
  border-radius: 4px !important;
}

/* ── Status badge ───────────────────────────────────────── */
.payments-modern-shell .pmt-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.2em 0.65em 0.2em 0.45em;
  border-radius: 5px;
  white-space: nowrap;
}
.payments-modern-shell .pmt-status .pmt-status-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.payments-modern-shell .pmt-status-paid   { background: rgba(22,163,74,0.1);  color: #15803d; border: 1px solid rgba(22,163,74,0.2); }
.payments-modern-shell .pmt-status-partial{ background: rgba(202,138,4,0.1); color: #b45309; border: 1px solid rgba(202,138,4,0.2); }
.payments-modern-shell .pmt-status-unpaid { background: rgba(220,38,38,0.07); color: #b91c1c; border: 1px solid rgba(220,38,38,0.15); }
.payments-modern-shell .pmt-status-voided { background: rgba(100,116,139,0.1); color: #475569; border: 1px solid rgba(100,116,139,0.2); }
.payments-modern-shell .pmt-status-paid    .pmt-status-dot { background: #16a34a; }
.payments-modern-shell .pmt-status-partial .pmt-status-dot { background: #d97706; }
.payments-modern-shell .pmt-status-unpaid  .pmt-status-dot { background: #dc2626; }
.payments-modern-shell .pmt-status-voided  .pmt-status-dot { background: #64748b; }

/* ── Match confidence — mini spark bar ──────────────────── */
.payments-modern-shell .pmt-conf-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.payments-modern-shell .pmt-conf-bar-track {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: rgba(15,23,42,0.08);
  overflow: hidden;
}
.payments-modern-shell .pmt-conf-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.payments-modern-shell .pmt-conf-label {
  font-family: var(--pl-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.payments-modern-shell .pmt-conf-100 .pmt-conf-bar-fill { background: #16a34a; }
.payments-modern-shell .pmt-conf-100 .pmt-conf-label    { color: #15803d; }
.payments-modern-shell .pmt-conf-high .pmt-conf-bar-fill { background: #22c55e; }
.payments-modern-shell .pmt-conf-high .pmt-conf-label    { color: #16a34a; }
.payments-modern-shell .pmt-conf-low  .pmt-conf-bar-fill { background: #f59e0b; }
.payments-modern-shell .pmt-conf-low  .pmt-conf-label    { color: #b45309; }
.payments-modern-shell .pmt-conf-zero .pmt-conf-bar-fill { background: #ef4444; }
.payments-modern-shell .pmt-conf-zero .pmt-conf-label    { color: #b91c1c; }
.payments-modern-shell .pmt-conf-atty .pmt-conf-bar-fill { background: #6366f1; }
.payments-modern-shell .pmt-conf-atty .pmt-conf-label    { color: #4f46e5; }

/* ── Person name cells ──────────────────────────────────── */
.payments-modern-shell .pmt-name {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--pl-slate);
  line-height: 1.3;
}
.payments-modern-shell .pmt-rep-name,
.payments-modern-shell .pmt-att-name {
  font-size: 0.77rem;
  color: var(--pl-slate-soft);
  line-height: 1.3;
}

/* ── Reason tag ─────────────────────────────────────────── */
.payments-modern-shell .pmt-reason-tag {
  display: inline-block;
  font-size: 0.7rem;
  color: #475569;
  background: rgba(71,85,105,0.07);
  border-radius: 4px;
  padding: 0.12em 0.42em;
  line-height: 1.5;
}

/* ── Eye / metadata button ──────────────────────────────── */
.payments-modern-shell .pmt-eye-btn {
  background: none;
  border: 1px solid transparent;
  padding: 0.3rem 0.45rem;
  border-radius: 7px;
  color: #94a3b8;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all .15s;
}
.payments-modern-shell .pmt-eye-btn:hover {
  color: var(--pl-blue);
  border-color: rgba(37,99,235,0.2);
  background: rgba(37,99,235,0.06);
}

/* ── Section header — editorial treatment ───────────────── */
.payments-modern-shell .pmt-section-title {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pl-slate);
  display: flex;
  align-items: center;
  gap: 8px;
}
.payments-modern-shell .pmt-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pl-mono);
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 28px;
  padding: 0.1em 0.55em;
  border-radius: 6px;
  background: var(--pl-blue);
  color: #fff;
  letter-spacing: -0.01em;
}
.payments-modern-shell .pmt-section-subtitle {
  font-size: 0.72rem;
  color: var(--pl-slate-soft);
  margin-top: 2px;
  font-weight: 400;
}

/* Debug section — amber accent, clean table */
.payments-modern-shell .pmt-section-count-debug {
  background: #b45309;
}
.payments-modern-shell .payments-table-card.pmt-debug-card {
  border-color: rgba(180,83,9,0.22);
  border-left: 3px solid #d97706;
  background: var(--pl-surface);
}
.payments-modern-shell .pmt-debug-card .card-header {
  background: var(--pl-surface) !important;
  border-bottom: 1px solid rgba(180,83,9,0.14) !important;
}
.payments-modern-shell .pmt-debug-card .table thead th {
  background: var(--pl-surface) !important;
  color: var(--pl-slate-mid) !important;
  border-bottom: 1px solid var(--pl-border) !important;
  border-bottom-color: var(--pl-border) !important;
}
.payments-modern-shell .pmt-debug-title {
  color: #b45309;
}
.payments-modern-shell .pmt-debug-card .table tbody td {
  border-bottom-color: var(--pl-border) !important;
}
.payments-modern-shell .pmt-debug-card .table-hover tbody tr:hover td {
  background: rgba(180,83,9,0.03) !important;
}
/* Dark mode debug card */
body[data-theme="dark"] .payments-modern-shell .payments-table-card.pmt-debug-card {
  border-color: rgba(217,119,6,0.3);
  border-left-color: #d97706;
  background: var(--pl-surface);
}
body[data-theme="dark"] .payments-modern-shell .pmt-debug-card .card-header {
  background: var(--pl-surface) !important;
  border-bottom-color: rgba(217,119,6,0.2) !important;
}
body[data-theme="dark"] .payments-modern-shell .pmt-debug-title {
  color: #fbbf24;
}
body[data-theme="dark"] .payments-modern-shell .pmt-section-count-debug {
  background: #92400e;
}

/* Failure type badges — precision style */
.payments-modern-shell .pmt-fail-badge {
  display: inline-block;
  font-size: 0.63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2em 0.6em;
  border-radius: 4px;
}
.payments-modern-shell .pmt-fail-notfound   { background: rgba(220,38,38,0.1);  color: #b91c1c; border: 1px solid rgba(220,38,38,0.2); }
.payments-modern-shell .pmt-fail-parse      { background: rgba(239,68,68,0.12); color: #991b1b; border: 1px solid rgba(239,68,68,0.2); }
.payments-modern-shell .pmt-fail-lowconf    { background: rgba(245,158,11,0.12);color: #92400e; border: 1px solid rgba(245,158,11,0.2); }
.payments-modern-shell .pmt-fail-attorney   { background: rgba(99,102,241,0.1); color: #3730a3; border: 1px solid rgba(99,102,241,0.2); }
.payments-modern-shell .pmt-fail-error      { background: rgba(220,38,38,0.1);  color: #b91c1c; border: 1px solid rgba(220,38,38,0.2); }

/* Resync button */
.payments-modern-shell .pmt-resync-btn {
  background: none;
  border: 1px solid var(--pl-border-mid);
  border-radius: 7px;
  padding: 0.28rem 0.5rem;
  color: var(--pl-slate-soft);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all .15s;
}
.payments-modern-shell .pmt-resync-btn:hover {
  border-color: rgba(37,99,235,0.3);
  color: var(--pl-blue);
  background: rgba(37,99,235,0.05);
}

/* ── Pagination controls ────────────────────────────────── */
.payments-modern-shell .payments-table-header-row { gap: 12px; }
.payments-modern-shell .payments-table-header-controls { row-gap: 8px; }

.payments-modern-shell .payments-table-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid var(--pl-border-mid);
  background: var(--pl-surface-2);
}

.payments-modern-shell .payments-page-btn {
  min-width: 0;
  border-radius: 6px !important;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border: none !important;
  background: none !important;
  color: var(--pl-slate-soft) !important;
  transition: all .15s;
}
.payments-modern-shell .payments-page-btn:hover:not(:disabled) {
  background: rgba(37,99,235,0.08) !important;
  color: var(--pl-blue) !important;
}
.payments-modern-shell .payments-page-btn:disabled { opacity: 0.35; }

.payments-modern-shell .payments-page-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--pl-mono);
  font-size: 0.72rem;
  padding: 1px 6px;
}
.payments-modern-shell .payments-page-info .page-current {
  color: var(--pl-blue);
  font-weight: 700;
}
.payments-modern-shell .payments-page-info .page-divider { color: #cbd5e1; }
.payments-modern-shell .payments-page-info .page-total {
  color: var(--pl-slate-soft);
  font-weight: 600;
}

/* ── Table viewport & loading overlay ───────────────────── */
.payments-modern-shell .payments-table-viewport {
  position: relative;
  min-height: 340px;
}
.payments-modern-shell .payments-table-viewport--debug .table-responsive {
  max-height: 420px;
  overflow-y: auto;
}
.payments-modern-shell .payments-table-loading-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(248,250,252,0.85);
  backdrop-filter: blur(1px);
  pointer-events: none;
  z-index: 5;
}
.payments-modern-shell .payments-table-viewport.is-loading .payments-table-loading-overlay {
  display: flex;
}

/* ── Segmented controls — precision pill tabs ───────────── */
.payments-modern-shell .segmented-control {
  background: var(--pl-surface-2);
  border: 1px solid var(--pl-border-mid);
  border-radius: 8px;
  padding: 2px;
  gap: 1px;
  box-shadow: none;
}
.payments-modern-shell .segmented-control label {
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pl-slate-soft);
}
.payments-modern-shell .segmented-control label:hover {
  color: var(--pl-slate);
  background: rgba(15,23,42,0.04);
}
.payments-modern-shell .segmented-control input[type="radio"]:checked + label {
  background: var(--pl-surface);
  color: var(--pl-blue);
  box-shadow: 0 1px 3px rgba(15,23,42,0.1);
  font-weight: 800;
}

/* ── Negl column dark mode ──────────────────────────────── */
.payments-modern-shell .pmt-negl-btn {
  font-size: 0.7rem;
  border-radius: 6px;
}

/* ════════════════════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════════════════════ */
body[data-theme="dark"] .payments-modern-shell {
  --pl-border:     rgba(148,163,184,0.12);
  --pl-border-mid: rgba(148,163,184,0.2);
  --pl-surface:    #111a2b;
  --pl-surface-2:  #0f1829;
  --pl-slate:      #dbe7fb;
  --pl-slate-mid:  #a9bddf;
  --pl-slate-soft: #64748b;
  --pl-amber-bg:   rgba(180,83,9,0.08);
  --pl-amber-border: rgba(180,83,9,0.25);
}

body[data-theme="dark"] .payments-modern-shell .payments-metric-card,
body[data-theme="dark"] .payments-modern-shell .payments-filter-card,
body[data-theme="dark"] .payments-modern-shell .payments-chart-card,
body[data-theme="dark"] .payments-modern-shell .payments-table-card {
  background: #111a2b !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

body[data-theme="dark"] .payments-modern-shell .payments-filter-card {
  background: #111a2b !important;
}

body[data-theme="dark"] .payments-modern-shell .payments-filter-toolbar {
  border-bottom-color: rgba(148,163,184,0.12);
}

body[data-theme="dark"] .payments-modern-shell .payments-chart-card .card-header,
body[data-theme="dark"] .payments-modern-shell .payments-table-card .card-header {
  background: linear-gradient(180deg, #162035, #111a2b) !important;
  border-bottom-color: rgba(148,163,184,0.15) !important;
}

body[data-theme="dark"] .payments-modern-shell .payments-filter-card .form-label,
body[data-theme="dark"] .payments-modern-shell .payments-filter-card label,
body[data-theme="dark"] .payments-modern-shell .payments-filter-card .btn-outline-secondary,
body[data-theme="dark"] .payments-modern-shell .payments-filter-toolbar h6,
body[data-theme="dark"] .payments-modern-shell .payments-filter-toolbar small {
  color: #dbe7fb !important;
}

body[data-theme="dark"] .payments-modern-shell .payments-filter-card .form-control {
  background: #0d1625 !important;
  color: #dbe7fb !important;
  border-color: rgba(148,163,184,0.25) !important;
}

body[data-theme="dark"] .payments-modern-shell .payments-filter-card .form-control::placeholder {
  color: #4a6080 !important;
}

body[data-theme="dark"] .payments-modern-shell .payments-filter-status {
  color: #7da0ff;
  background: rgba(37,99,235,0.15);
  border-color: rgba(37,99,235,0.3);
}

body[data-theme="dark"] .payments-modern-shell .payments-filter-chip {
  color: #a5c8ff;
  background: rgba(37,99,235,0.15);
  border-color: rgba(37,99,235,0.3);
}

body[data-theme="dark"] .payments-modern-shell .payments-filter-chip .chip-label { color: #64748b; }
body[data-theme="dark"] .payments-modern-shell .payments-filter-chip .chip-value { color: #a5c8ff; }

body[data-theme="dark"] .payments-modern-shell .payments-filter-summary {
  color: #64748b;
  background: rgba(15,24,41,0.8);
  border-color: rgba(148,163,184,0.2);
}

/* Dark mode — filter dropdown buttons */
body[data-theme="dark"] .payments-modern-shell .payments-filter-card .btn-outline-secondary {
  background: #0f1829 !important;
  border-color: rgba(148,163,184,0.2) !important;
  color: #a9bddf !important;
}
body[data-theme="dark"] .payments-modern-shell .payments-filter-card .btn-outline-secondary:hover,
body[data-theme="dark"] .payments-modern-shell .payments-filter-card .btn-outline-secondary.show {
  background: rgba(37,99,235,0.12) !important;
  border-color: rgba(37,99,235,0.4) !important;
  color: #7da0ff !important;
}
body[data-theme="dark"] .payments-modern-shell .payments-filter-card .btn-outline-secondary.filter-active {
  background: rgba(37,99,235,0.15) !important;
  border-color: rgba(37,99,235,0.45) !important;
  color: #7da0ff !important;
}

/* Dark mode — dropdown menus */
body[data-theme="dark"] .payments-modern-shell .payments-filter-card .dropdown-menu {
  background: #111a2b !important;
  border-color: rgba(148,163,184,0.18) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3) !important;
}
body[data-theme="dark"] .payments-modern-shell .payments-filter-card .dropdown-menu .form-control-sm {
  background: #0c1528 !important;
  border-color: rgba(148,163,184,0.22) !important;
  color: #dbe7fb !important;
}
body[data-theme="dark"] .payments-modern-shell .payments-filter-card .dropdown-menu .form-control-sm::placeholder {
  color: #3d5070 !important;
}
body[data-theme="dark"] .payments-modern-shell .payments-filter-card .dropdown-menu .form-check:hover {
  background: rgba(37,99,235,0.1) !important;
}
body[data-theme="dark"] .payments-modern-shell .payments-filter-card .dropdown-menu .form-check-label {
  color: #a9bddf !important;
}
body[data-theme="dark"] .payments-modern-shell .payments-filter-card .dropdown-menu .form-check:first-of-type .form-check-label {
  color: #dbe7fb !important;
}
body[data-theme="dark"] .payments-modern-shell .payments-filter-card .dropdown-menu hr {
  border-color: rgba(148,163,184,0.12) !important;
}
body[data-theme="dark"] .payments-modern-shell .payments-filter-card .dropdown-menu .position-sticky {
  background: #111a2b !important;
  border-top-color: rgba(148,163,184,0.12) !important;
}

/* Dark table */
body[data-theme="dark"] .payments-modern-shell .payments-table-card .table {
  color: #dbe7fb;
  border-color: rgba(148,163,184,0.15);
}

body[data-theme="dark"] .payments-modern-shell .payments-table-card .table thead th {
  background: #101d31 !important;
  color: #4a6080 !important;
  border-bottom-color: rgba(148,163,184,0.15) !important;
}

body[data-theme="dark"] .payments-modern-shell .payments-table-card .table tbody td {
  background-color: #111a2b !important;
  color: #dbe7fb !important;
  border-bottom-color: rgba(148,163,184,0.08) !important;
}

body[data-theme="dark"] .payments-modern-shell .payments-table-card .table-hover tbody tr:hover td {
  background-color: #162035 !important;
}

body[data-theme="dark"] .payments-modern-shell .payments-table-card .table-responsive,
body[data-theme="dark"] .payments-modern-shell .payments-table-card .card-body {
  background-color: #111a2b !important;
}

body[data-theme="dark"] .payments-modern-shell .pmt-name { color: #e2ecfb; }
body[data-theme="dark"] .payments-modern-shell .pmt-rep-name,
body[data-theme="dark"] .payments-modern-shell .pmt-att-name { color: #64748b; }
body[data-theme="dark"] .payments-modern-shell .pmt-num { color: #cbd5e1; }
body[data-theme="dark"] .payments-modern-shell .pmt-num-balance { color: #f87171; }
body[data-theme="dark"] .payments-modern-shell .pmt-num-collected { color: #4ade80; }
body[data-theme="dark"] .payments-modern-shell .pmt-invoice-link { color: #7da0ff; }
body[data-theme="dark"] .payments-modern-shell .pmt-invoice-link:hover { color: #a5c8ff; }

body[data-theme="dark"] .payments-modern-shell .pmt-status-paid   { background: rgba(22,163,74,0.15);  color: #4ade80; border-color: rgba(22,163,74,0.25); }
body[data-theme="dark"] .payments-modern-shell .pmt-status-partial{ background: rgba(202,138,4,0.15);  color: #fbbf24; border-color: rgba(202,138,4,0.25); }
body[data-theme="dark"] .payments-modern-shell .pmt-status-unpaid { background: rgba(220,38,38,0.12);  color: #f87171; border-color: rgba(220,38,38,0.2); }
body[data-theme="dark"] .payments-modern-shell .pmt-status-voided { background: rgba(100,116,139,0.2);  color: #cbd5e1; border-color: rgba(148,163,184,0.28); }

body[data-theme="dark"] .payments-modern-shell .pmt-conf-bar-track { background: rgba(148,163,184,0.15); }
body[data-theme="dark"] .payments-modern-shell .pmt-conf-100 .pmt-conf-label  { color: #4ade80; }
body[data-theme="dark"] .payments-modern-shell .pmt-conf-high .pmt-conf-label { color: #4ade80; }
body[data-theme="dark"] .payments-modern-shell .pmt-conf-low .pmt-conf-label  { color: #fbbf24; }
body[data-theme="dark"] .payments-modern-shell .pmt-conf-zero .pmt-conf-label { color: #f87171; }
body[data-theme="dark"] .payments-modern-shell .pmt-conf-atty .pmt-conf-label { color: #a5b4fc; }

body[data-theme="dark"] .payments-modern-shell .pmt-reason-tag { color: #94a3b8; background: rgba(148,163,184,0.1); }
body[data-theme="dark"] .payments-modern-shell .pmt-eye-btn { color: #4a6080; }
body[data-theme="dark"] .payments-modern-shell .pmt-eye-btn:hover { color: #7da0ff; background: rgba(37,99,235,0.12); border-color: rgba(37,99,235,0.3); }
body[data-theme="dark"] .payments-modern-shell .pmt-resync-btn { border-color: rgba(148,163,184,0.2); color: #64748b; }
body[data-theme="dark"] .payments-modern-shell .pmt-resync-btn:hover { color: #7da0ff; background: rgba(37,99,235,0.1); border-color: rgba(37,99,235,0.3); }

/* Dark debug card */
body[data-theme="dark"] .payments-modern-shell .pmt-debug-card {
  background: #111a2b !important;
  border-color: rgba(217,119,6,0.3) !important;
  border-left-color: #d97706 !important;
}
body[data-theme="dark"] .payments-modern-shell .pmt-debug-card .card-header {
  background: #111a2b !important;
  border-bottom-color: rgba(217,119,6,0.2) !important;
}
body[data-theme="dark"] .payments-modern-shell .pmt-debug-card .table thead th {
  background: #111a2b !important;
  color: #475569 !important;
  border-bottom: 1px solid rgba(148,163,184,0.12) !important;
}
body[data-theme="dark"] .payments-modern-shell .pmt-debug-card .table tbody td {
  background-color: #111a2b !important;
  color: #a9bddf !important;
  border-bottom-color: rgba(148,163,184,0.08) !important;
}
body[data-theme="dark"] .payments-modern-shell .pmt-debug-card .table-hover tbody tr:hover td {
  background-color: #162035 !important;
}
body[data-theme="dark"] .payments-modern-shell .pmt-debug-title { color: #fbbf24; }
body[data-theme="dark"] .payments-modern-shell .pmt-section-count-debug { background: #92400e; }

/* Dark pagination */
body[data-theme="dark"] .payments-modern-shell .payments-table-pagination-controls {
  background: rgba(15,24,41,0.9);
  border-color: rgba(148,163,184,0.2);
}
body[data-theme="dark"] .payments-modern-shell .payments-page-btn { color: #64748b !important; }
body[data-theme="dark"] .payments-modern-shell .payments-page-btn:hover:not(:disabled) {
  background: rgba(37,99,235,0.12) !important;
  color: #7da0ff !important;
}
body[data-theme="dark"] .payments-modern-shell .payments-page-info .page-current { color: #7da0ff; }
body[data-theme="dark"] .payments-modern-shell .payments-page-info .page-total { color: #64748b; }
body[data-theme="dark"] .payments-modern-shell .payments-page-info .page-divider { color: #1e2d45; }

/* Dark segmented control */
body[data-theme="dark"] .payments-modern-shell .segmented-control {
  background: #0d1625;
  border-color: rgba(148,163,184,0.2);
}
body[data-theme="dark"] .payments-modern-shell .segmented-control label { color: #4a6080; }
body[data-theme="dark"] .payments-modern-shell .segmented-control label:hover {
  color: #94a3b8;
  background: rgba(148,163,184,0.06);
}
body[data-theme="dark"] .payments-modern-shell .segmented-control input[type="radio"]:checked + label {
  background: #162035;
  color: #7da0ff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Dark negl buttons */
body[data-theme="dark"] .payments-modern-shell .pmt-negl-btn { border-color: rgba(148,163,184,0.2); color: #4a6080; }
body[data-theme="dark"] .payments-modern-shell .pmt-negl-btn:hover { border-color: rgba(125,160,255,0.35); color: #7da0ff; background: rgba(37,99,235,0.12); }
body[data-theme="dark"] .payments-modern-shell .pmt-negl-badge-rr { background: rgba(6,148,162,0.18); color: #22d3ee; border-color: rgba(6,148,162,0.3); }
body[data-theme="dark"] .payments-modern-shell .pmt-negl-stat { color: #3d5070; }
body[data-theme="dark"] .payments-modern-shell .pmt-negl-stat strong { color: #7da0ff; }
body[data-theme="dark"] .payments-modern-shell .pmt-negl-view-btn { color: #4a6080; }
body[data-theme="dark"] .payments-modern-shell .pmt-negl-view-btn:hover { color: #7da0ff; }

body[data-theme="dark"] .payments-modern-shell .payments-table-loading-overlay {
  background: rgba(15,24,41,0.85);
}

/* Payments invoice modal dark-mode consistency */
body[data-theme="dark"] #invoiceDetailModal .modal-content {
  background: #0f1829 !important;
  color: #dbe7fb !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
}

body[data-theme="dark"] #invoiceDetailModal .modal-header,
body[data-theme="dark"] #invoiceDetailModal .modal-footer {
  background: #0f1829 !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
}

body[data-theme="dark"] #invoiceDetailModal .modal-body {
  background: #0f1829 !important;
  color: #dbe7fb !important;
}

body[data-theme="dark"] #invoiceDetailModal .card {
  background: #111a2b !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
}

body[data-theme="dark"] #invoiceDetailModal .card .card-header {
  background: linear-gradient(180deg, #1a253a, #162033) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24) !important;
  color: #dbe7fb !important;
}

body[data-theme="dark"] #invoiceDetailModal .bg-light,
body[data-theme="dark"] #invoiceDetailModal .table-light,
body[data-theme="dark"] #invoiceDetailModal .bg-body-tertiary,
body[data-theme="dark"] #invoiceDetailModal .bg-body-secondary {
  background: #16243d !important;
  color: #dbe7fb !important;
}

body[data-theme="dark"] #invoiceDetailModal .text-muted,
body[data-theme="dark"] #invoiceDetailModal small,
body[data-theme="dark"] #invoiceDetailModal .text-body-secondary {
  color: #a9bddf !important;
}

body[data-theme="dark"] #invoiceDetailModal .table,
body[data-theme="dark"] #invoiceDetailModal .table tbody td,
body[data-theme="dark"] #invoiceDetailModal .table tbody th {
  color: #dbe7fb !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}

body[data-theme="dark"] #invoiceDetailModal .input-group-text,
body[data-theme="dark"] #invoiceDetailModal .form-control {
  background: #0f1829 !important;
  color: #dbe7fb !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

body[data-theme="dark"] #invoiceDetailModal .form-control::placeholder {
  color: #9fb3d8 !important;
}

body[data-theme="dark"] #invoiceDetailModal .btn-close {
  filter: invert(1) grayscale(100%);
}

/* Decision band readability in dark mode */
body[data-theme="dark"] #invoiceDetailModal .decision-band-range,
body[data-theme="dark"] #invoiceDetailModal .decision-band-value {
  font-weight: 700;
}

body[data-theme="dark"] #invoiceDetailModal .decision-band-row.is-active.decision-band-accept {
  background: rgba(22, 101, 52, 0.28) !important;
  border-color: rgba(74, 222, 128, 0.35) !important;
}

body[data-theme="dark"] #invoiceDetailModal .decision-band-row.is-active.decision-band-accept .decision-band-range,
body[data-theme="dark"] #invoiceDetailModal .decision-band-row.is-active.decision-band-accept .decision-band-value {
  color: #c8f7dc !important;
}

body[data-theme="dark"] #invoiceDetailModal .decision-band-row.is-active.decision-band-caution {
  background: rgba(217, 119, 6, 0.28) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
}

body[data-theme="dark"] #invoiceDetailModal .decision-band-row.is-active.decision-band-caution .decision-band-range,
body[data-theme="dark"] #invoiceDetailModal .decision-band-row.is-active.decision-band-caution .decision-band-value {
  color: #fff1cc !important;
}

body[data-theme="dark"] #invoiceDetailModal .decision-band-row.is-active.decision-band-hard-stop {
  background: rgba(153, 27, 27, 0.28) !important;
  border-color: rgba(248, 113, 113, 0.42) !important;
}

body[data-theme="dark"] #invoiceDetailModal .decision-band-row.is-active.decision-band-hard-stop .decision-band-range,
body[data-theme="dark"] #invoiceDetailModal .decision-band-row.is-active.decision-band-hard-stop .decision-band-value {
  color: #ffd6db !important;
}

body[data-theme="dark"] #invoiceDetailModal .decision-band-row:not(.is-active) .decision-band-range {
  color: #dbe7fb !important;
}

/* Expenses dark-mode readability + surface contrast */
body[data-theme="dark"] .expenses-modern-shell .card {
  background: #111a2b !important;
  color: #e5ecfb !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
}

body[data-theme="dark"] .expenses-modern-shell .card .card-header {
  background: linear-gradient(180deg, #1a253a, #162033) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24) !important;
}

body[data-theme="dark"] .expenses-modern-shell .card .card-title,
body[data-theme="dark"] .expenses-modern-shell .card .card-subtitle,
body[data-theme="dark"] .expenses-modern-shell .card .card-body,
body[data-theme="dark"] .expenses-modern-shell .expenses-meta-text {
  color: #dbe7fb !important;
}

body[data-theme="dark"] .expenses-modern-shell .expenses-filter-label {
  color: #d6e5ff !important;
  font-weight: 600;
}

body[data-theme="dark"] .expenses-modern-shell .form-select,
body[data-theme="dark"] .expenses-modern-shell .form-control {
  background-color: #182235 !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  color: #e5ecfb !important;
}

body[data-theme="dark"] .expenses-modern-shell .form-select option {
  background-color: #182235 !important;
  color: #e5ecfb !important;
}

body[data-theme="dark"] .expenses-modern-shell .rep-performance-item {
  background: #131f33 !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
}

body[data-theme="dark"] .expenses-modern-shell .rep-performance-item h6,
body[data-theme="dark"] .expenses-modern-shell .rep-performance-item .fw-semibold,
body[data-theme="dark"] .expenses-modern-shell .rep-performance-item .fw-bold {
  color: #edf3ff !important;
}

body[data-theme="dark"] .expenses-modern-shell .rep-performance-item .text-muted,
body[data-theme="dark"] .expenses-modern-shell .text-muted {
  color: #a9bddf !important;
}

body[data-theme="dark"] .expenses-modern-shell .rep-performance-item .progress {
  background-color: #22324d !important;
}

.expenses-modern-shell .expenses-rows-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.2px;
}

.expenses-modern-shell .expenses-rowcount-control label {
  min-width: 40px;
}

.expenses-modern-shell .expenses-filter-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.expenses-modern-shell .expenses-filter-menu {
  max-height: 300px;
  overflow-y: auto;
  min-width: 220px;
}

.expenses-modern-shell .expenses-filter-count-badge {
  background: #2563eb;
  color: #ffffff;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.expenses-modern-shell .expenses-date-input-group .input-group-text {
  background: rgba(243, 247, 255, 0.95);
  border-color: rgba(148, 163, 184, 0.28);
  color: #4a5f89;
}

.expenses-modern-shell .expenses-table-toolbar {
  padding-top: 4px;
  padding-bottom: 2px;
}

.expenses-modern-shell .expenses-sort-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.2px;
}

.expenses-modern-shell .expenses-sort-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  border: 1px solid #dbe5f5;
}

.expenses-modern-shell .expenses-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 9px;
  padding: 6px 10px;
  background: transparent;
  color: #475569;
  font-size: 0.8rem;
  font-weight: 600;
  transition: all 0.15s ease;
}

.expenses-modern-shell .expenses-sort-btn:hover {
  background: rgba(79, 70, 229, 0.08);
  color: #1e3a8a;
}

.expenses-modern-shell .expenses-sort-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.expenses-modern-shell .expenses-sort-indicator i {
  font-size: 0.72rem !important;
}

.expenses-modern-shell .expenses-breakdown-chart-wrap {
  position: relative;
  height: 320px;
}

.expenses-modern-shell .expenses-breakdown-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.expenses-modern-shell .expenses-chart-empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.9rem;
}

.expenses-modern-shell .expenses-table-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(29, 63, 159, 0.16);
  background: rgba(243, 247, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.expenses-modern-shell .expenses-page-btn {
  min-width: 36px;
  border-radius: 999px;
}

.expenses-modern-shell .expenses-page-number-group {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.expenses-modern-shell .expenses-page-number-btn {
  min-width: 34px;
  border-radius: 999px;
}

.expenses-modern-shell .expenses-page-number-btn.active {
  background: #24488b;
  border-color: #24488b;
  color: #ffffff;
}

.expenses-modern-shell .expenses-page-btn:focus-visible,
.expenses-modern-shell .expenses-page-number-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(53, 92, 168, 0.25);
}

.expenses-modern-shell .expenses-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 600;
}

.expenses-modern-shell .expenses-page-summary {
  color: #607493;
  font-weight: 500;
}

body[data-theme="dark"] .expenses-modern-shell .expenses-rows-label,
body[data-theme="dark"] .expenses-modern-shell .expenses-sort-label {
  color: #b8cae8;
}

body[data-theme="dark"] .expenses-modern-shell .expenses-filter-dropdown-btn {
  color: #dbe7fb !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  background: rgba(24, 34, 53, 0.92) !important;
}

body[data-theme="dark"] .expenses-modern-shell .expenses-filter-menu {
  background: #182235 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}

body[data-theme="dark"] .expenses-modern-shell .expenses-filter-menu .form-check-label,
body[data-theme="dark"] .expenses-modern-shell .expenses-filter-menu .btn-link {
  color: #dbe7fb !important;
}

body[data-theme="dark"] .expenses-modern-shell .expenses-filter-menu .form-check-input {
  background-color: #0f1829;
  border-color: rgba(148, 163, 184, 0.35);
}

body[data-theme="dark"] .expenses-modern-shell .expenses-filter-count-badge {
  background: #355ca8;
}

body[data-theme="dark"] .expenses-modern-shell .expenses-date-input-group .input-group-text {
  background: rgba(24, 34, 53, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  color: #dbe7fb !important;
}

body[data-theme="dark"] .expenses-modern-shell .expenses-sort-control {
  background: #101a2c;
  border-color: rgba(148, 163, 184, 0.3);
}

body[data-theme="dark"] .expenses-modern-shell .expenses-sort-btn {
  color: #a9bddf;
}

body[data-theme="dark"] .expenses-modern-shell .expenses-sort-btn:hover {
  background: rgba(71, 85, 105, 0.35);
  color: #dbe7fb;
}

body[data-theme="dark"] .expenses-modern-shell .expenses-sort-btn.active {
  background: #22324f;
  color: #f3f7ff;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.35);
}

body[data-theme="dark"] .expenses-modern-shell .expenses-table-pagination-controls {
  background: rgba(19, 30, 52, 0.9);
  border-color: rgba(148, 163, 184, 0.3);
}

body[data-theme="dark"] .expenses-modern-shell .expenses-page-btn {
  color: #c8d7f3;
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(15, 24, 41, 0.55);
}

body[data-theme="dark"] .expenses-modern-shell .expenses-page-btn:hover:not(:disabled) {
  color: #e5ecfb;
  border-color: rgba(147, 197, 253, 0.42);
  background: rgba(35, 50, 79, 0.75);
}

body[data-theme="dark"] .expenses-modern-shell .expenses-page-btn:disabled {
  color: #6f86ad;
  border-color: rgba(100, 116, 139, 0.35);
  background: rgba(15, 24, 41, 0.3);
}

body[data-theme="dark"] .expenses-modern-shell .expenses-page-number-group {
  background: rgba(15, 24, 41, 0.95);
  border-color: rgba(148, 163, 184, 0.3);
}

body[data-theme="dark"] .expenses-modern-shell .expenses-page-number-btn {
  color: #b7c7e8;
  border-color: rgba(148, 163, 184, 0.26);
  background: rgba(15, 24, 41, 0.45);
}

body[data-theme="dark"] .expenses-modern-shell .expenses-page-number-btn:hover:not(.active) {
  color: #e5ecfb;
  border-color: rgba(147, 197, 253, 0.4);
  background: rgba(35, 50, 79, 0.75);
}

body[data-theme="dark"] .expenses-modern-shell .expenses-page-number-btn.active {
  background: #355ca8;
  border-color: #355ca8;
  color: #f3f7ff;
}

body[data-theme="dark"] .expenses-modern-shell .expenses-page-btn:focus-visible,
body[data-theme="dark"] .expenses-modern-shell .expenses-page-number-btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.35);
}

body[data-theme="dark"] .expenses-modern-shell .expenses-page-ellipsis {
  color: #8ea5cd;
}

body[data-theme="dark"] .expenses-modern-shell .expenses-page-summary {
  color: #a9bddf;
}

body[data-theme="dark"] .expenses-modern-shell .expenses-chart-empty-state {
  color: #a9bddf !important;
}

/* Subtle custom scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Use OS-level dark preference only when user has not explicitly chosen a theme */
@media (prefers-color-scheme: dark) {
  body:not([data-theme]) {
    color: #dbe7fb;
  }

  body:not([data-theme]) .card {
    background: #111a2b;
    color: #e5ecfb;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 14px 30px rgba(2, 6, 23, 0.42), 0 4px 14px rgba(2, 6, 23, 0.32);
  }

  body:not([data-theme]) .card .card-body,
  body:not([data-theme]) .card .card-title,
  body:not([data-theme]) .card .card-subtitle,
  body:not([data-theme]) .card .text-muted {
    color: #d2def3 !important;
  }

  body:not([data-theme]) .card .chart-container {
    background: #0f1829;
  }
}

@keyframes navbarGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Final dark-mode hard overrides for dashboard surfaces */
body[data-theme="dark"] .bg-white,
body[data-theme="dark"] .card.bg-white,
body[data-theme="dark"] .card-body.bg-white,
body[data-theme="dark"] .dashboard-modern-shell .bg-white {
  background-color: #111a2b !important;
  color: #e5ecfb !important;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-filter-card,
body[data-theme="dark"] .dashboard-modern-shell .dashboard-chart-card,
body[data-theme="dark"] .dashboard-modern-shell .dashboard-table-card,
body[data-theme="dark"] .dashboard-modern-shell .dashboard-metric-card {
  background: #111a2b !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-chart-card .card-body,
body[data-theme="dark"] .dashboard-modern-shell .dashboard-table-card .card-body,
body[data-theme="dark"] .dashboard-modern-shell .dashboard-chart-body,
body[data-theme="dark"] .dashboard-modern-shell #topRepsTable,
body[data-theme="dark"] .dashboard-modern-shell #statePerformanceTable,
body[data-theme="dark"] .dashboard-modern-shell #topAttorneysTable,
body[data-theme="dark"] .dashboard-modern-shell #attorneyAnalysisTable {
  background-color: #0f1829 !important;
}

body[data-theme="dark"] .card .chart-container {
  background: #0f1829 !important;
}

body[data-theme="dark"] .card .chart-container canvas {
  background: #0f1829 !important;
}

body[data-theme="dark"] .card .text-muted {
  color: #a9badb !important;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-filter-card::before {
  background: linear-gradient(90deg, rgba(125, 160, 255, 0.86), rgba(96, 165, 250, 0.86));
}

body[data-theme="dark"] .dashboard-modern-shell .rep-performance-item,
body[data-theme="dark"] .dashboard-modern-shell .state-performance-item,
body[data-theme="dark"] .dashboard-modern-shell .attorney-performance-item,
body[data-theme="dark"] .dashboard-modern-shell .attorney-rep-performance-item,
body[data-theme="dark"] .dashboard-modern-shell .attorney-analysis-item,
body[data-theme="dark"] .dashboard-modern-shell .performance-empty-row {
  background: #131f33 !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}

body[data-theme="dark"] .dashboard-modern-shell .rep-performance-item h6,
body[data-theme="dark"] .dashboard-modern-shell .state-performance-item h6,
body[data-theme="dark"] .dashboard-modern-shell .attorney-performance-item h6,
body[data-theme="dark"] .dashboard-modern-shell .attorney-rep-performance-item h6,
body[data-theme="dark"] .dashboard-modern-shell .attorney-analysis-item h6 {
  color: #eef4ff !important;
}

body[data-theme="dark"] .dashboard-modern-shell .rep-performance-item .text-muted,
body[data-theme="dark"] .dashboard-modern-shell .state-performance-item .text-muted,
body[data-theme="dark"] .dashboard-modern-shell .attorney-performance-item .text-muted,
body[data-theme="dark"] .dashboard-modern-shell .attorney-rep-performance-item .text-muted,
body[data-theme="dark"] .dashboard-modern-shell .attorney-analysis-item .text-muted {
  color: #a9badb !important;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-filter-btn,
body[data-theme="dark"] .dashboard-modern-shell .dashboard-filter-btn.has-selection {
  background: #172235 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  color: #dbe7fb !important;
}

body[data-theme="dark"] .dashboard-modern-shell .quick-filter-status {
  background: rgba(71, 85, 105, 0.36) !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  color: #dbe7fb !important;
}

/* Final dark-mode paginator overrides (dashboard) */
body[data-theme="dark"] .dashboard-modern-shell .dashboard-table-pagination-controls {
  background: rgba(19, 30, 52, 0.92) !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.16) !important;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-page-info {
  color: #dbe7fb !important;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-page-info .page-current {
  background: linear-gradient(135deg, #4f78be, #6b60d0) !important;
  color: #ffffff !important;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-page-info .page-divider {
  color: #9fb1d4 !important;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-page-info .page-total {
  color: #b7c7e8 !important;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-page-btn {
  background: #1a253a !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  color: #dbe7fb !important;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.28) !important;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-page-btn:hover:not(:disabled) {
  border-color: rgba(148, 163, 184, 0.55) !important;
  background: #22324f !important;
  color: #f3f7ff !important;
}

body[data-theme="dark"] .dashboard-modern-shell .dashboard-page-btn:disabled {
  background: rgba(148, 163, 184, 0.22) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  color: #dbe7fb !important;
  opacity: 0.55 !important;
}

/* Modern Segmented Control */
.segmented-control {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
}

.segmented-control input[type="radio"] {
  display: none;
}

.segmented-control label {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  border: none;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

@keyframes dashboardCardRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-modern-shell .dashboard-metric-card,
  .dashboard-modern-shell .dashboard-chart-card,
  .dashboard-modern-shell .dashboard-table-card {
    animation: none !important;
  }
}

.segmented-control label:hover {
  color: #334f83;
  background: rgba(255, 255, 255, 0.5);
}

.segmented-control input[type="radio"]:checked + label {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: none;
}

.segmented-control input[type="radio"]:checked + label:hover {
  background: #ffffff;
  color: #0f172a;
}

/* Responsive segmented controls */
@media (max-width: 768px) {
  .segmented-control {
    flex-wrap: wrap;
    gap: 1px;
  }
  
  .segmented-control label {
    font-size: 0.8rem;
    padding: 8px 10px;
    min-height: 38px;
    min-width: 50px;
  }
}

@media (max-width: 576px) {
  .dashboard-modern-shell .dashboard-table-card .card-header {
    flex-direction: row;
    align-items: stretch !important;
    padding: 0.44rem 0.65rem;
  }

  .dashboard-modern-shell .dashboard-table-sort-controls .segmented-control {
    width: 100%;
  }

  .dashboard-modern-shell .dashboard-table-header-controls {
    gap: 6px;
  }

  .segmented-control {
    width: 100%;
    margin-top: 8px;
  }
  
  .segmented-control label {
    flex: 1;
    text-align: center;
    font-size: 0.78rem;
    padding: 10px 8px;
    min-height: 42px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start !important;
  }
  
  .card-header .segmented-control {
    margin-top: 8px;
    align-self: stretch;
  }
}

/* Modern Performance Table Styles - Applied to all performance items */
.rep-performance-item,
.state-performance-item,
.attorney-performance-item,
.attorney-rep-performance-item,
.attorney-analysis-item {
  background: #ffffff;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  min-height: 76px;
  height: 76px;
}

.rep-performance-item:hover,
.state-performance-item:hover,
.attorney-performance-item:hover,
.attorney-rep-performance-item:hover,
.attorney-analysis-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--brand-indigo) !important;
}

.rep-performance-item::before,
.state-performance-item::before,
.attorney-performance-item::before,
.attorney-rep-performance-item::before,
.attorney-analysis-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-indigo), var(--brand-violet));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.rep-performance-item:hover::before,
.state-performance-item:hover::before,
.attorney-performance-item:hover::before,
.attorney-rep-performance-item:hover::before,
.attorney-analysis-item:hover::before {
  opacity: 1;
}

.rank-indicator {
  font-family: var(--font-ui);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 2px solid #ffffff;
}

.dashboard-rank-indicator {
  width: 32px;
  height: 32px;
  font-size: 0.875rem;
}

.performance-identity {
  flex: 1 1 160px;
  min-width: 0;
  overflow: hidden;
}

.performance-identity h6,
.performance-identity-tight h6 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.performance-identity-tight {
  flex: 1 1 120px;
  min-width: 0;
  overflow: hidden;
}

.performance-primary {
  flex: 1;
}

.performance-secondary {
  flex: 0 0 140px;
}

.performance-secondary-tight {
  flex-basis: 120px;
}

.perf-label-primary {
  font-size: 0.7rem;
}

.perf-value-primary {
  font-size: 1.1rem;
}

.perf-label-secondary {
  font-size: 0.65rem;
}

.perf-value-secondary {
  font-size: 0.875rem;
}

.perf-label-primary,
.perf-value-primary,
.perf-label-secondary,
.perf-value-secondary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.performance-corner-flag {
  top: 8px;
  left: 8px;
}

.performance-empty-row {
  height: 76px;
  opacity: 0.3;
}

/* Attorney analysis rows need flexible vertical space on laptop/mobile to avoid clipping. */
.attorney-analysis-item {
  min-height: 76px;
  height: auto;
  overflow: visible;
}

.attorney-analysis-item .performance-identity,
.attorney-analysis-item .performance-secondary {
  min-width: 0;
}

.attorney-analysis-item .performance-identity h6 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attorney-analysis-item .performance-secondary .perf-label-secondary {
  margin-bottom: 2px;
}

.attorney-analysis-item .performance-secondary .perf-label-secondary:last-child {
  margin-bottom: 0;
}

@media (max-width: 1366px) {
  .attorney-analysis-item .row > .col .d-flex {
    gap: 10px;
  }

  .attorney-analysis-item .performance-identity,
  .attorney-analysis-item .performance-identity-tight {
    flex: 0 0 36%;
    min-width: 170px;
  }

  .attorney-analysis-item .attorney-analysis-primary {
    flex: 0 0 29%;
  }

  .attorney-analysis-item .performance-secondary,
  .attorney-analysis-item .performance-secondary-tight {
    flex: 0 0 31%;
  }
}

@media (max-width: 1200px) {
  .attorney-analysis-item .row > .col .d-flex {
    align-items: flex-start !important;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .attorney-analysis-item .performance-identity,
  .attorney-analysis-item .performance-identity-tight,
  .attorney-analysis-item .attorney-analysis-primary,
  .attorney-analysis-item .performance-secondary,
  .attorney-analysis-item .performance-secondary-tight {
    flex: 1 1 100%;
    min-width: 0;
    text-align: left !important;
  }

  .attorney-analysis-item .performance-secondary .perf-label-secondary {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Subtle tone overlays by performance tier */
.performance-tone-success-dark {
  background: linear-gradient(90deg, rgba(31, 143, 99, 0.08) 0%, #ffffff 16%);
}

.performance-tone-warning {
  background: linear-gradient(90deg, rgba(191, 130, 35, 0.1) 0%, #ffffff 16%);
}

.performance-tone-lime {
  background: linear-gradient(90deg, rgba(133, 153, 0, 0.11) 0%, #ffffff 16%);
}

.performance-tone-danger {
  background: linear-gradient(90deg, rgba(191, 59, 75, 0.1) 0%, #ffffff 16%);
}

.performance-tone-orange {
  background: linear-gradient(90deg, rgba(234, 88, 12, 0.1) 0%, #ffffff 16%);
}

@media (max-width: 900px) {
  .performance-identity,
  .performance-identity-tight {
    flex: 1 1 auto;
    min-width: 0;
  }

  .performance-secondary,
  .performance-secondary-tight {
    flex: 1 1 auto;
  }
}

.rep-performance-item .progress,
.state-performance-item .progress,
.attorney-performance-item .progress,
.attorney-rep-performance-item .progress {
  background-color: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}

.rep-performance-item .progress-bar,
.state-performance-item .progress-bar,
.attorney-performance-item .progress-bar,
.attorney-rep-performance-item .progress-bar {
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.rep-performance-item .progress-bar::after,
.state-performance-item .progress-bar::after,
.attorney-performance-item .progress-bar::after,
.attorney-rep-performance-item .progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Trophy styling for top performers */
.rep-performance-item .bi-trophy-fill,
.state-performance-item .bi-trophy-fill,
.attorney-performance-item .bi-trophy-fill,
.attorney-rep-performance-item .bi-trophy-fill {
  font-size: 1.2rem;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  transition: transform 0.2s ease;
}

.rep-performance-item .bi-trophy-fill:hover,
.state-performance-item .bi-trophy-fill:hover,
.attorney-performance-item .bi-trophy-fill:hover,
.attorney-rep-performance-item .bi-trophy-fill:hover {
  transform: scale(1.1);
}

/* Trophy colors */
.trophy-gold {
  color: #ffd700 !important; /* Gold */
  text-shadow: 0 1px 3px rgba(255, 215, 0, 0.4);
}

.trophy-silver {
  color: #c0c0c0 !important; /* Silver */
  text-shadow: 0 1px 3px rgba(192, 192, 192, 0.4);
}

.trophy-bronze {
  color: #cd7f32 !important; /* Bronze */
  text-shadow: 0 1px 3px rgba(205, 127, 50, 0.4);
}

/* Enhanced text styling */
.rep-performance-item h6,
.state-performance-item h6,
.attorney-performance-item h6,
.attorney-rep-performance-item h6 {
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}

.rep-performance-item .text-muted,
.state-performance-item .text-muted,
.attorney-performance-item .text-muted,
.attorney-rep-performance-item .text-muted {
  font-size: 0.8rem;
}

/* Performance indicators with updated color ranges */
.rep-performance-item .bi-star-fill,
.state-performance-item .bi-star-fill,
.attorney-performance-item .bi-star-fill,
.attorney-rep-performance-item .bi-star-fill {
  color: var(--semantic-good) !important; /* Dark green for 70-100% */
}

.rep-performance-item .bi-check-circle-fill,
.state-performance-item .bi-check-circle-fill,
.attorney-performance-item .bi-check-circle-fill,
.attorney-rep-performance-item .bi-check-circle-fill {
  color: var(--semantic-warning) !important; /* Soft yellow/amber for 50-70% */
}

.rep-performance-item .bi-dash-circle-fill,
.state-performance-item .bi-dash-circle-fill,
.attorney-performance-item .bi-dash-circle-fill,
.attorney-rep-performance-item .bi-dash-circle-fill {
  color: #ea580c !important; /* Orange for 30-50% */
}

.rep-performance-item .bi-exclamation-triangle-fill,
.state-performance-item .bi-exclamation-triangle-fill,
.attorney-performance-item .bi-exclamation-triangle-fill,
.attorney-rep-performance-item .bi-exclamation-triangle-fill {
  color: var(--semantic-danger) !important; /* Red for below 30% */
}

/* Custom performance color classes */
.bg-success-dark {
  background-color: var(--semantic-good) !important; /* Dark green */
}

.text-success-dark {
  color: var(--semantic-good) !important; /* Dark green */
}

.bg-warning-soft {
  background-color: var(--semantic-warning) !important; /* Non-blinding yellow/amber */
}

.text-warning-soft {
  color: var(--semantic-warning) !important; /* Non-blinding yellow/amber */
}

.bg-orange {
  background-color: #ea580c !important; /* Orange */
}

.text-orange {
  color: #ea580c !important; /* Orange */
}

.bg-lime {
  background-color: #859900 !important; /* Soft olive-lime */
}

.text-lime {
  color: #6b7f00 !important; /* Muted olive-lime for readability */
}

/* Progress bar colors for new ranges */
.progress-bar.bg-success-dark {
  background-color: #065f46 !important;
}

.progress-bar.bg-warning-soft {
  background-color: #d97706 !important;
}

.progress-bar.bg-orange {
  background-color: #ea580c !important;
}

/* Badge styles for consistent colors */
.badge.bg-success-dark {
  background-color: #065f46 !important;
  color: #ffffff !important;
}

.badge.bg-warning-soft {
  background-color: #d97706 !important;
  color: #ffffff !important;
}

.badge.bg-orange {
  background-color: #ea580c !important;
  color: #ffffff !important;
}

.badge.bg-danger {
  background-color: var(--semantic-danger) !important;
  color: #ffffff !important;
}

/* Mobile responsiveness for performance items */
@media (max-width: 576px) {
  .rep-performance-item,
  .state-performance-item,
  .attorney-performance-item,
  .attorney-rep-performance-item {
    margin-bottom: 12px !important;
    padding: 16px !important;
  }
  
  .rep-performance-item .row,
  .state-performance-item .row,
  .attorney-performance-item .row,
  .attorney-rep-performance-item .row {
    flex-direction: column;
    text-align: center;
  }
  
  .rep-performance-item .col-auto,
  .state-performance-item .col-auto,
  .attorney-performance-item .col-auto,
  .attorney-rep-performance-item .col-auto {
    margin-bottom: 12px;
  }
  
  .rep-performance-item .text-end,
  .state-performance-item .text-end,
  .attorney-performance-item .text-end,
  .attorney-rep-performance-item .text-end {
    text-align: center !important;
  }
  
  .rank-indicator {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
  }
}

/* ========================================
   Chat Message Styles - CEO Assistant
   ======================================== */
.chat-container {
  min-height: 400px;
  max-height: calc(100vh - 500px);
  overflow-y: auto;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Message base styles */
.message {
  display: flex;
  width: 100%;
  margin-bottom: 8px;
}

/* User messages (right-aligned, blue) */
.message.user {
  justify-content: flex-end;
}

.message.user .message-bubble {
  background: linear-gradient(135deg, var(--brand-indigo), var(--brand-violet));
  color: #ffffff;
  border-radius: 18px 18px 4px 18px;
  padding: 12px 16px;
  max-width: 70%;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Assistant messages (left-aligned, white) */
.message.assistant {
  justify-content: flex-start;
}

.message.assistant .message-bubble {
  background: #ffffff;
  color: #0f172a;
  border-radius: 18px 18px 18px 4px;
  padding: 12px 16px;
  max-width: 70%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Enhanced text formatting inside messages */
.message-bubble strong {
  font-weight: 600;
}

.message-bubble em {
  font-style: italic;
}

/* Bullet items inside messages */
.message-bubble .bullet-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}

.message-bubble .bullet-item:last-child {
  margin-bottom: 0;
}

.message-bubble .bullet-item .bi {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Markdown formatting within message bubbles */
.message-bubble h1, .message-bubble h2, .message-bubble h3,
.message-bubble h4, .message-bubble h5, .message-bubble h6 {
  margin-top: 0.75em;
  margin-bottom: 0.5em;
  font-weight: 600;
  line-height: 1.3;
}

.message-bubble h1 { font-size: 1.5em; }
.message-bubble h2 { font-size: 1.3em; }
.message-bubble h3 { font-size: 1.15em; }
.message-bubble h4 { font-size: 1.05em; }
.message-bubble h5, .message-bubble h6 { font-size: 1em; }

.message-bubble p {
  margin-bottom: 0.75em;
}

.message-bubble ul, .message-bubble ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.message-bubble li {
  margin-bottom: 0.25em;
}

.message-bubble code {
  background: #f1f5f9;
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: 'Courier New', monospace;
  color: #e11d48;
}

.message-bubble pre {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 1em;
  overflow-x: auto;
  margin: 0.75em 0;
}

.message-bubble pre code {
  background: none;
  padding: 0;
  color: #0f172a;
}

.message-bubble blockquote {
  border-left: 3px solid #fbbf24;
  background: #fffbeb;
  padding: 0.75em 1em;
  margin: 0.75em 0;
  font-style: italic;
}

.message-bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75em 0;
}

.message-bubble th, .message-bubble td {
  border: 1px solid #e2e8f0;
  padding: 0.5em;
  text-align: left;
}

.message-bubble th {
  background: #f8fafc;
  font-weight: 600;
}

.message-bubble tr:nth-child(even) {
  background: #f9fafb;
}

.message-bubble a {
  color: #4f46e5;
  text-decoration: underline;
}

.message-bubble a:hover {
  color: #6366f1;
}

.message-bubble hr {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 1em 0;
}

.ceo-assistant-rich-result {
  color: inherit;
}

/* Dark mode chat styling (full CEO Assistant page) */
body[data-theme="dark"] .ceo-assistant-shell .card,
body[data-theme="dark"] .ceo-assistant-shell .card-header,
body[data-theme="dark"] .ceo-assistant-shell .card-body {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #e5e7eb !important;
}

body[data-theme="dark"] .ceo-assistant-shell .chat-container {
  background: #0f172a;
  border: 1px solid #334155;
}

body[data-theme="dark"] .ceo-assistant-shell .message.assistant .message-bubble {
  background: #1f2937;
  color: #e5e7eb;
  border-color: #334155;
}

body[data-theme="dark"] .ceo-assistant-shell .message.user .message-bubble {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #ffffff;
}

body[data-theme="dark"] .ceo-assistant-shell .message-bubble code {
  background: #0b1220;
  color: #fda4af;
}

body[data-theme="dark"] .ceo-assistant-shell .message-bubble pre {
  background: #0b1220;
  border-color: #334155;
}

body[data-theme="dark"] .ceo-assistant-shell .message-bubble pre code {
  color: #e5e7eb;
}

body[data-theme="dark"] .ceo-assistant-shell .message-bubble blockquote {
  background: #3f3207;
  border-left-color: #f59e0b;
}

body[data-theme="dark"] #ceoUsageHistoryModal .modal-content {
  background: #111827;
  color: #e5e7eb;
  border-color: #334155;
}

body[data-theme="dark"] #ceoUsageHistoryModal .modal-header {
  border-bottom-color: #334155;
}

body[data-theme="dark"] #ceoUsageHistoryModal .table {
  color: #e5e7eb;
}

body[data-theme="dark"] #ceoUsageHistoryModal .table th,
body[data-theme="dark"] #ceoUsageHistoryModal .table td {
  border-color: #334155;
}

@media (max-width: 768px) {
  .top-navbar .navbar-collapse.show {
    margin-top: 10px;
    padding: 10px 0 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
  }

  .top-navbar .navbar-nav {
    gap: 4px;
    margin-bottom: 10px;
  }

  .top-navbar .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92) !important;
  }

  .top-navbar .navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
  }

  .top-navbar .navbar-collapse.show .d-flex.align-items-center.gap-3 {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .top-navbar .navbar-collapse.show #auth-user-menu .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Mobile responsiveness for chat */
@media (max-width: 768px) {
  .dashboard-chatbot-container {
    bottom: 14px !important;
    right: 14px !important;
    z-index: 950 !important;
  }

  #chatbot-toggle {
    width: 52px !important;
    height: 52px !important;
  }

  #chatbot-panel {
    width: min(92vw, 420px) !important;
    right: 0 !important;
    bottom: 66px !important;
    max-height: 70vh !important;
    min-width: 0 !important;
    min-height: 320px !important;
    resize: none !important;
  }

  .message-bubble {
    max-width: 85% !important;
    font-size: 0.9rem;
  }
  
  .chat-container {
    min-height: 300px;
    max-height: calc(100vh - 400px);
    padding: 12px;
  }
}

/* Scrollbar styling for chat */
.chat-container::-webkit-scrollbar {
  width: 8px;
}

.chat-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.chat-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 999px;
}

/* Animation for new messages */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message {
  animation: slideIn 0.3s ease-out;
}

/* Streaming cursor animation */
.streaming-cursor {
  display: inline-block;
  margin-left: 2px;
  animation: blink 1s infinite;
  color: var(--brand-indigo);
  font-weight: bold;
}

@keyframes blink {
  0%, 50% { 
    opacity: 1; 
  }
  51%, 100% { 
    opacity: 0; 
  }
}

.streaming-response {
  white-space: pre-wrap;
  word-wrap: break-word;
}