/* ==========================================================
   Syndeo Dashboard — Dark Mode Styles
   Comprehensive overrides for full dark theme coverage
   ========================================================== */

[data-theme='dark'] {
  --bg-color: #0d1117;
  --bg-secondary: #161b22;
  --card-bg: #161b22;
  --card-hover: #1f242b;
  --text-color: #e6edf3;
  --text-muted: #8b949e;
  --border-color: #30363d;
  --accent-color: #58a6ff;
  --link-hover: #79c0ff;
  --table-header-bg: #21262d;
  --table-row-alt: #1c2128;
  --success-color: #3fb950;
  --warning-color: #d29922;
  --danger-color: #f85149;
  --info-color: #17a2b8;
  --secondary-color: #6c757d;
  /* Legacy aliases for compatibility */
  --success: #3fb950;
  --warning: #d29922;
  --danger: #f85149;

  /* Override Bootstrap 5 table variant CSS variables */
  --bs-table-bg: #1a2332;
  --bs-table-color: #e6edf3;
  --bs-table-border-color: #30363d;
}

/* ===== Base Layout & Typography ===== */
[data-theme='dark'] body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3 {
  color: var(--accent-color) !important;
}

[data-theme='dark'] h4,
[data-theme='dark'] h5,
[data-theme='dark'] h6,
[data-theme='dark'] p,
[data-theme='dark'] span:not(.badge),
[data-theme='dark'] label,
[data-theme='dark'] .text-dark {
  color: var(--text-color) !important;
}

[data-theme='dark'] .text-muted {
  color: var(--text-muted) !important;
}

[data-theme='dark'] .navbar,
[data-theme='dark'] .footer,
[data-theme='dark'] footer {
  background-color: var(--bg-secondary) !important;
  color: var(--text-color) !important;
  border-bottom: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
}

[data-theme='dark'] a:not(.btn),
[data-theme='dark'] .link {
  color: var(--info-color) !important;
}
[data-theme='dark'] a:not(.btn):hover,
[data-theme='dark'] .link:hover {
  color: var(--accent-color) !important;
}

/* Semantic text colors - ensure visibility in dark mode */
[data-theme='dark'] .text-primary {
  color: var(--accent-color) !important;
}
[data-theme='dark'] .text-success {
  color: var(--success-color) !important;
}
[data-theme='dark'] .text-warning {
  color: var(--warning-color) !important;
}
[data-theme='dark'] .text-danger {
  color: var(--danger-color) !important;
}
[data-theme='dark'] .text-info {
  color: var(--info-color) !important;
}
[data-theme='dark'] .text-secondary {
  color: var(--secondary-color) !important;
}

/* ===== Cards and Panels ===== */
[data-theme='dark'] .card,
[data-theme='dark'] .modal-content,
[data-theme='dark'] .dropdown-menu {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 8px rgba(0, 0, 0, 0.2);
}

[data-theme='dark'] .card-header,
[data-theme='dark'] .card-footer,
[data-theme='dark'] .modal-header,
[data-theme='dark'] .modal-footer {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .card:hover {
  background-color: var(--card-hover) !important;
}

[data-theme='dark'] .card-body {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

/* ==============================
   DARK THEME – TABLE OVERRIDES
   Universal overrides for all tables including Bootstrap .table-striped
   ============================== */

/* Base table appearance */
[data-theme='dark'] table,
[data-theme='dark'] .table,
[data-theme='dark'] .financial-table {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
  border-collapse: collapse;
  width: 100%;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header styling - override Bootstrap bg-dark, table-primary, etc */
[data-theme='dark'] thead,
[data-theme='dark'] .table thead th,
[data-theme='dark'] .financial-table thead,
[data-theme='dark'] .financial-table thead th,
[data-theme='dark'] thead.bg-dark,
[data-theme='dark'] thead.table-primary {
  background-color: #21262d !important;
  color: var(--text-muted) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--border-color);
}

/* Override Bootstrap .table-striped rows with higher specificity */
[data-theme='dark'] .table-striped > tbody > tr:nth-of-type(odd),
[data-theme='dark'] .financial-table > tbody > tr:nth-of-type(odd),
[data-theme='dark'] tbody tr:nth-child(odd) {
  background-color: #1a1f26 !important;
}

[data-theme='dark'] .table-striped > tbody > tr:nth-of-type(even),
[data-theme='dark'] .financial-table > tbody > tr:nth-of-type(even),
[data-theme='dark'] tbody tr:nth-child(even) {
  background-color: #161b22 !important;
}

/* Ensure hover highlight works on all tables */
[data-theme='dark'] tbody tr:hover,
[data-theme='dark'] .table tbody tr:hover,
[data-theme='dark'] .financial-table tbody tr:hover {
  background-color: #1f242b !important;
}

/* Table borders and cell colors - global reset */
[data-theme='dark'] th,
[data-theme='dark'] td,
[data-theme='dark'] table th,
[data-theme='dark'] table td {
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
  padding: 0.55rem 1rem;
  vertical-align: middle;
}

/* Override ALL inline backgrounds and light tints */
[data-theme='dark'] table [style*="background-color: #fff"],
[data-theme='dark'] table [style*="background:#fff"],
[data-theme='dark'] table [style*="background-color:white"],
[data-theme='dark'] table [style*="background-color:#ffffff"],
[data-theme='dark'] table [style*="background-color:#f8f9fa"],
[data-theme='dark'] table [style*="background-color:#eef7fc"],
[data-theme='dark'] table [style*="background:#f8f9fa"],
[data-theme='dark'] table [style*="background:#eef7fc"],
[data-theme='dark'] tr[style*="#fff"],
[data-theme='dark'] tr[style*="white"],
[data-theme='dark'] tr[style*="#f8f9fa"],
[data-theme='dark'] tr[style*="#eef7fc"],
[data-theme='dark'] td[style*="background"],
[data-theme='dark'] tr td {
  background-color: transparent !important;
  color: var(--text-color) !important;
}

/* Totals and summary rows pop */
[data-theme='dark'] tr:last-child td {
  color: var(--accent-color) !important;
  font-weight: 600;
}

/* Align numeric cells for financial data */
[data-theme='dark'] td:nth-child(2),
[data-theme='dark'] td:nth-child(3),
[data-theme='dark'] td:nth-child(4),
[data-theme='dark'] td:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Gray-out placeholder or inactive values */
[data-theme='dark'] table td:has(span),
[data-theme='dark'] table td:empty {
  color: var(--text-muted);
}

/* Scenario table and non-.table elements */
[data-theme='dark'] .scenario-table,
[data-theme='dark'] table:not(.table) {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .scenario-table th,
[data-theme='dark'] .scenario-table td,
[data-theme='dark'] table:not(.table) th,
[data-theme='dark'] table:not(.table) td {
  border: 1px solid var(--border-color) !important;
  color: var(--text-color) !important;
}

/* Optional – Distinguish Table Types by Context */
[data-theme='dark'] .income-statement-table thead,
[data-theme='dark'] #income-statement table thead {
  background-color: #263040 !important;
}
[data-theme='dark'] .cash-flow-table thead,
[data-theme='dark'] #cash-flow table thead {
  background-color: #2b3545 !important;
}
[data-theme='dark'] .balance-sheet-table thead,
[data-theme='dark'] #balance-sheet table thead {
  background-color: #303a4d !important;
}
[data-theme='dark'] .scenario-analysis-table thead,
[data-theme='dark'] #scenario-analysis table thead {
  background-color: #353f52 !important;
}

/* Bootstrap table variants in dark mode - override CSS variables */
/* Redefine Bootstrap .table-highlight to use dark theme variables */
[data-theme='dark'] .table-highlight,
[data-theme='dark'] tr.table-highlight,
[data-theme='dark'] .highlight-row,
[data-theme='dark'] .section-header {
  --bs-table-bg: #1a2332 !important;
  --bs-table-color: #e6edf3 !important;
  --bs-table-border-color: #30363d !important;
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: var(--bs-table-border-color) !important;
}

/* Optional: subtle hover/focus effect */
[data-theme='dark'] .table-highlight:hover,
[data-theme='dark'] tr.table-highlight:hover {
  --bs-table-bg: #1f2838 !important;
  background-color: var(--bs-table-bg) !important;
}

[data-theme='dark'] .table-success,
[data-theme='dark'] tr.table-success {
  background-color: #1c3328 !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .table-warning,
[data-theme='dark'] tr.table-warning,
[data-theme='dark'] .table-light {
  background-color: #3d3318 !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .table-danger,
[data-theme='dark'] tr.table-danger {
  background-color: #3d1c1c !important;
  color: var(--text-color) !important;
}

/* ===== Buttons ===== */
[data-theme='dark'] .btn-primary {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}
[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] .btn-primary:focus {
  background-color: var(--link-hover) !important;
  border-color: var(--link-hover) !important;
}

[data-theme='dark'] .btn-outline-primary {
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  background-color: transparent !important;
}
[data-theme='dark'] .btn-outline-primary:hover {
  background-color: var(--accent-color) !important;
  color: #fff !important;
}

[data-theme='dark'] .btn-outline-warning {
  color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
  background-color: transparent !important;
}
[data-theme='dark'] .btn-outline-warning:hover {
  background-color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
  color: #0d1117 !important;
}

[data-theme='dark'] .btn-outline-secondary {
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
  background-color: transparent !important;
}
[data-theme='dark'] .btn-outline-secondary:hover {
  background-color: var(--card-hover) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .btn-outline-success {
  color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  background-color: transparent !important;
}
[data-theme='dark'] .btn-outline-success:hover {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: #0d1117 !important;
}

[data-theme='dark'] .btn-secondary {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .btn-secondary:hover,
[data-theme='dark'] .btn-secondary:focus {
  background-color: var(--card-hover) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

/* Ensure icons in secondary buttons have proper color in dark mode */
[data-theme='dark'] .btn-secondary i,
[data-theme='dark'] .btn-secondary .fas,
[data-theme='dark'] .btn-secondary .far,
[data-theme='dark'] .btn-secondary .fab {
  color: var(--text-color) !important;
}

/* Button groups in dark mode */
[data-theme='dark'] .btn-group .btn-secondary:not(:last-child) {
  border-right-color: var(--border-color) !important;
}

[data-theme='dark'] .btn-group .btn-secondary:not(:first-child) {
  border-left-color: var(--border-color) !important;
}

/* Active state for button groups in dark mode */
[data-theme='dark'] .btn-secondary:active,
[data-theme='dark'] .btn-secondary.active {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--accent-color) !important;
}

[data-theme='dark'] .btn-light {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .btn-dark {
  background-color: var(--text-color) !important;
  color: var(--bg-color) !important;
}

/* ===== Alerts / Badges ===== */
[data-theme='dark'] .alert {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .alert-info {
  background-color: #1c2f40 !important;
  border-color: #2a4a66 !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .alert-success {
  background-color: #1c3328 !important;
  border-color: var(--success) !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .alert-warning {
  background-color: #3d3318 !important;
  border-color: var(--warning) !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .alert-danger {
  background-color: #3d1c1c !important;
  border-color: var(--danger) !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .badge {
  background-color: var(--accent-color) !important;
  color: #fff !important;
}

[data-theme='dark'] .badge-secondary {
  background-color: var(--bg-secondary) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color);
}

/* Semantic badge background colors */
[data-theme='dark'] .bg-primary {
  background-color: var(--accent-color) !important;
  color: #fff !important;
}

[data-theme='dark'] .bg-success {
  background-color: var(--success-color) !important;
  color: #fff !important;
}

[data-theme='dark'] .bg-warning {
  background-color: var(--warning-color) !important;
  color: #000 !important;
}

[data-theme='dark'] .bg-danger {
  background-color: var(--danger-color) !important;
  color: #fff !important;
}

[data-theme='dark'] .bg-info {
  background-color: var(--info-color) !important;
  color: #fff !important;
}

[data-theme='dark'] .bg-secondary {
  background-color: var(--secondary-color) !important;
  color: #fff !important;
}

/* Ensure icons with semantic text color classes override parent color */
[data-theme='dark'] .text-primary.fas,
[data-theme='dark'] .text-primary.far,
[data-theme='dark'] .text-primary.fab,
[data-theme='dark'] i.text-primary {
  color: var(--accent-color) !important;
}

[data-theme='dark'] .text-success.fas,
[data-theme='dark'] .text-success.far,
[data-theme='dark'] .text-success.fab,
[data-theme='dark'] i.text-success {
  color: var(--success-color) !important;
}

[data-theme='dark'] .text-warning.fas,
[data-theme='dark'] .text-warning.far,
[data-theme='dark'] .text-warning.fab,
[data-theme='dark'] i.text-warning {
  color: var(--warning-color) !important;
}

[data-theme='dark'] .text-danger.fas,
[data-theme='dark'] .text-danger.far,
[data-theme='dark'] .text-danger.fab,
[data-theme='dark'] i.text-danger {
  color: var(--danger-color) !important;
}

[data-theme='dark'] .text-info.fas,
[data-theme='dark'] .text-info.far,
[data-theme='dark'] .text-info.fab,
[data-theme='dark'] i.text-info {
  color: var(--info-color) !important;
}

[data-theme='dark'] .text-secondary.fas,
[data-theme='dark'] .text-secondary.far,
[data-theme='dark'] .text-secondary.fab,
[data-theme='dark'] i.text-secondary {
  color: var(--secondary-color) !important;
}

/* ===== Forms ===== */
[data-theme='dark'] input:not([type="radio"]):not([type="checkbox"]),
[data-theme='dark'] textarea,
[data-theme='dark'] select,
[data-theme='dark'] .form-control,
[data-theme='dark'] .form-select {
  background-color: var(--bg-secondary) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme='dark'] input:not([type="radio"]):not([type="checkbox"]):focus,
[data-theme='dark'] textarea:focus,
[data-theme='dark'] select:focus,
[data-theme='dark'] .form-control:focus,
[data-theme='dark'] .form-select:focus {
  background-color: var(--bg-secondary) !important;
  border-color: var(--accent-color) !important;
  color: var(--text-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(88,166,255,0.25) !important;
}

[data-theme='dark'] .form-label {
  color: var(--text-color) !important;
}

[data-theme='dark'] ::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7;
}

/* Input group text (e.g., percentage displays, prefixes, suffixes) */
[data-theme='dark'] .input-group-text {
  background-color: var(--bg-secondary) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}

/* ===== Charts ===== */
[data-theme='dark'] canvas {
  background-color: var(--card-bg) !important;
}

[data-theme='dark'] .chart-container {
  background-color: var(--card-bg) !important;
}

/* Dynamically set chart.js defaults in JS */
:root[data-theme='dark'] {
  --chart-grid: #30363d;
  --chart-text: #e6edf3;
  --chart-bg: #161b22;
}

/* ===== Misc UI Elements ===== */
[data-theme='dark'] hr {
  border-color: var(--border-color) !important;
  opacity: 1;
}

[data-theme='dark'] .dropdown-menu,
[data-theme='dark'] .dropdown-menu-dark {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .dropdown-item {
  color: var(--text-color) !important;
}

[data-theme='dark'] .dropdown-item:hover,
[data-theme='dark'] .dropdown-item:focus {
  background-color: var(--card-hover) !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .dropdown-divider {
  border-color: var(--border-color) !important;
}

/* ===== Toggle switch icon adjustment ===== */
[data-theme='dark'] .theme-toggle-icon {
  filter: brightness(1.4);
}

/* ===== Tooltips, Popovers ===== */
[data-theme='dark'] .tooltip-inner {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color);
}

[data-theme='dark'] .popover {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme='dark'] .popover-header {
  background-color: var(--bg-secondary) !important;
  color: var(--text-color) !important;
  border-bottom-color: var(--border-color) !important;
}

[data-theme='dark'] .popover-body {
  color: var(--text-color) !important;
}

/* ===== Custom: Syndeo metric cards ===== */
[data-theme='dark'] .metric-card {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
}
[data-theme='dark'] .metric-card .metric-value {
  color: var(--accent-color) !important;
}
[data-theme='dark'] .metric-card.positive {
  border-left: 4px solid var(--success-color) !important;
}
[data-theme='dark'] .metric-card.warning {
  border-left: 4px solid var(--warning-color) !important;
}
[data-theme='dark'] .metric-card.negative {
  border-left: 4px solid var(--danger-color) !important;
}

/* ===== Breadcrumbs ===== */
[data-theme='dark'] .breadcrumb {
  background-color: var(--bg-secondary) !important;
}

[data-theme='dark'] .breadcrumb-item a {
  color: var(--accent-color) !important;
}

[data-theme='dark'] .breadcrumb-item.active {
  color: var(--text-muted) !important;
}

/* ===== Pagination ===== */
[data-theme='dark'] .page-link {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--accent-color) !important;
}

[data-theme='dark'] .page-link:hover {
  background-color: var(--card-hover) !important;
  color: var(--link-hover) !important;
}

[data-theme='dark'] .page-item.active .page-link {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

/* ===== List Groups ===== */
[data-theme='dark'] .list-group-item {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .list-group-item:hover {
  background-color: var(--card-hover) !important;
}

/* ===== Nav Tabs ===== */
[data-theme='dark'] .nav-tabs {
  border-bottom-color: var(--border-color) !important;
}

[data-theme='dark'] .nav-tabs .nav-link {
  color: var(--text-muted) !important;
  border-color: transparent !important;
}

[data-theme='dark'] .nav-tabs .nav-link:hover {
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

[data-theme='dark'] .nav-tabs .nav-link.active {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) var(--border-color) var(--card-bg) !important;
  color: var(--text-color) !important;
}

/* ===== Progress Bars ===== */
[data-theme='dark'] .progress {
  background-color: var(--bg-secondary) !important;
  height: 0.6rem;
  border-radius: 0.375rem;
}

[data-theme='dark'] .progress-bar {
  border-radius: 0.375rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 0.6rem;
}

/* ===== Close Buttons ===== */
[data-theme='dark'] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ===== Code Blocks ===== */
[data-theme='dark'] code,
[data-theme='dark'] pre {
  background-color: var(--bg-secondary) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color);
}

/* ===== Smooth Transitions ===== */
html {
  transition: background-color 0.25s ease, color 0.25s ease;
}

body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

.card,
.modal,
table,
.btn,
input,
textarea,
select {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ==========================================================
   FINAL OVERRIDE – Force darker .table-highlight in dark mode
   ========================================================== */
[data-theme='dark'] {
  /* Override Bootstrap variable directly */
  --bs-table-bg: #1c2833 !important;
  --bs-table-color: #e6edf3 !important;
  --bs-table-border-color: #30363d !important;
}

/* Override computed background and color */
[data-theme='dark'] .table-highlight,
[data-theme='dark'] tr.table-highlight,
[data-theme='dark'] tbody > tr.table-highlight > td {
  background-color: #1c2833 !important; /* deep muted navy */
  color: #e6edf3 !important;
  border-color: #30363d !important;
}

/* Ensure hover remains subtle and consistent */
[data-theme='dark'] .table-highlight:hover,
[data-theme='dark'] tr.table-highlight:hover {
  background-color: #243340 !important;
}

/* ===============================
   FIX: Table header cells flickering white in dark mode
   Prevents Bootstrap light theme variables from being cached
   =============================== */
[data-theme='dark'] table th,
[data-theme='dark'] .table th,
[data-theme='dark'] .card table th,
[data-theme='dark'] .card-body table th {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
  transition: none !important;
}

/* Force Bootstrap table variables to use dark theme colors */
[data-theme='dark'] {
  --bs-table-bg: var(--card-bg) !important;
  --bs-table-striped-bg: #161b22 !important;
  --bs-table-striped-color: var(--text-color) !important;
  --bs-table-hover-bg: #1f242b !important;
  --bs-table-hover-color: var(--text-color) !important;
}

/* Override any inline styles or light classes on table headers */
[data-theme='dark'] th[style*="background"],
[data-theme='dark'] tr th[class*="light"],
[data-theme='dark'] tr th.bg-light,
[data-theme='dark'] thead th {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

/* =========================================================
   UNIVERSAL SMART TABLE LAYOUT
   Applies to all tables sitewide
   - Adaptive column widths
   - Intelligent text wrapping (word-level only, not character-level)
   - Auto-align numeric data
   - Consistent dark-mode styling
   ========================================================= */

/* Base layout for all tables */
table,
.card table,
.financial-table,
.ratio-section table,
.breakeven-section table,
.user-details-section table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
}

/* Containment for tables inside cards or sections */
.card-body,
.ratio-section,
.breakeven-section,
.user-details-section {
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 0.5rem;
}

/* Cell appearance - NO aggressive wrapping */
table th,
table td {
  padding: 0.55rem 1rem;
  vertical-align: middle;
  border: 1px solid rgba(48, 54, 61, 0.5); /* Softer, semi-transparent borders matching card style */
  color: var(--text-color, #e6edf3);
  background-color: transparent;
  white-space: nowrap; /* Default: no wrapping */
  line-height: 1.4;
}

/* Headers should never wrap */
table th {
  white-space: nowrap !important;
}

/* Only allow smart wrapping on specific content cells (deal titles, descriptions, notes) */
table td.wrap-content,
table td.deal-title,
table td.description,
table td.notes {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word; /* Only break at word boundaries */
  hyphens: auto;
  max-width: 300px; /* Prevent overly wide cells */
}

/* Buttons and action columns should NEVER wrap */
table td .btn,
table td button,
table td a.btn {
  white-space: nowrap !important;
}

/* Action columns stay compact */
table th:last-child,
table td:last-child {
  white-space: nowrap;
}

/* Intelligent column alignment */
table td {
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* Numeric alignment */
table td[data-type="number"],
table td[data-type="currency"],
table td[data-type="percentage"] {
  text-align: right !important;
}

/* Responsive behavior for mobile - horizontal scroll */
@media (max-width: 768px) {
  .table-responsive,
  .card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Allow wrapping on deal titles for mobile only */
  table td.deal-title {
    white-space: normal;
    max-width: 200px;
  }
}

/* =========================================
   DARK THEME – Colors and consistency
   ========================================= */
[data-theme='dark'] table,
[data-theme='dark'] .card table {
  background-color: var(--card-bg, #161b22) !important;
  border-color: var(--border-color, #30363d) !important;
  color: var(--text-color, #e6edf3) !important;
}

[data-theme='dark'] table th,
[data-theme='dark'] table td {
  border-color: var(--border-color, #30363d) !important;
  color: var(--text-color, #e6edf3) !important;
}

/* Headers with subtle contrast */
[data-theme='dark'] table thead th {
  background-color: #20262f !important;
  font-weight: 600;
  color: var(--text-color, #e6edf3) !important;
  border-bottom: 2px solid var(--border-color, #30363d) !important;
}

/* Hover state for rows */
[data-theme='dark'] table tr:hover {
  background-color: #1f242b !important;
}

/* Softer highlight for .table-info rows */
[data-theme='dark'] .table-info,
[data-theme='dark'] tr.table-info,
[data-theme='dark'] .table-info td,
[data-theme='dark'] tr.table-info > td {
  background-color: #1b2733 !important;
  color: #e6edf3 !important;
  border-color: #2e3a46 !important;
}

[data-theme='dark'] tr.table-info:hover {
  background-color: #22313d !important;
}

/* =========================================================
   INVESTMENT SUMMARY CARD - ENHANCED COLORS FOR DARK MODE
   Ensures text colors are vibrant and visible in dark theme
   ========================================================= */

/* Investment Summary Card - Primary color (Total Investment) */
[data-theme='dark'] .card-body .text-primary {
  color: #4da3ff !important;
}

/* Investment Summary Card - Success color (3-Year ROI) */
[data-theme='dark'] .card-body .text-success {
  color: #3dd365 !important;
}

/* Investment Summary Card - Info color (3-Year Cash Flow) */
[data-theme='dark'] .card-body .text-info {
  color: #3fc1f0 !important;
}

/* Investment Summary Card - Warning color (Year 1 ROE) */
[data-theme='dark'] .card-body .text-warning {
  color: #ffb834 !important;
}

/* =========================================================
   AI ANALYSIS MARKDOWN CONTENT - THEME AWARE BACKGROUNDS
   Override .bg-light to use dark theme card background
   ========================================================= */
[data-theme='dark'] .bg-light,
[data-theme='dark'] .analysis-content.bg-light,
[data-theme='dark'] .markdown-content.bg-light {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}


/* ===== Modal Backdrop - Consistent blur effect across both themes ===== */
.modal-backdrop {
  opacity: 0.3 !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
}

.modal-backdrop.show {
  opacity: 0.3 !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
}

/* Ensure modal content stays above blurred backdrop */
.modal {
  z-index: 1056;
}

[data-theme='dark'] .modal-backdrop {
  opacity: 0.3 !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
}

[data-theme='dark'] .modal-backdrop.show {
  opacity: 0.3 !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
}

/* ===== Deal Score Colors - Force semantic colors in dark mode ===== */
[data-theme='dark'] .card-body .h4.text-success,
[data-theme='dark'] .card-body h4.text-success,
[data-theme='dark'] .card-body .text-success {
  color: var(--success-color) !important;
}

[data-theme='dark'] .card-body .h4.text-warning,
[data-theme='dark'] .card-body h4.text-warning,
[data-theme='dark'] .card-body .text-warning {
  color: var(--warning-color) !important;
}

[data-theme='dark'] .card-body .h4.text-danger,
[data-theme='dark'] .card-body h4.text-danger,
[data-theme='dark'] .card-body .text-danger {
  color: var(--danger-color) !important;
}

/* =========================================================
   CHAT WIDGET - DARK MODE STYLES
   Ensure bot messages and text are readable in dark mode
   ========================================================= */

/* Chat messages container background */
[data-theme='dark'] #chatMessages {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Bot message bubbles */
[data-theme='dark'] .chat-bubble-assistant {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

/* Ensure all text in bot messages is visible */
[data-theme='dark'] .chat-bubble-assistant,
[data-theme='dark'] .chat-bubble-assistant p,
[data-theme='dark'] .chat-bubble-assistant div,
[data-theme='dark'] .chat-bubble-assistant span,
[data-theme='dark'] .chat-bubble-assistant li {
  color: var(--text-color) !important;
}

/* Chat sender label */
[data-theme='dark'] .chat-sender {
  color: var(--text-muted) !important;
}

/* Chat timestamp should remain visible */
[data-theme='dark'] .chat-timestamp {
  color: var(--text-muted) !important;
  opacity: 0.8 !important;
}

/* Error messages in chat */
[data-theme='dark'] .chat-bubble-error {
  background-color: #3d1c1c !important;
  border-color: var(--danger-color) !important;
  color: var(--text-color) !important;
}

/* User message bubbles - keep gradient but ensure readability */
[data-theme='dark'] .chat-bubble-user {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff !important;
}

/* Empty state text */
[data-theme='dark'] #emptyState {
  color: var(--text-muted) !important;
}

/* Chat card header */
[data-theme='dark'] .card-header h6 {
  color: var(--text-color) !important;
}

/* =========================================================
   NAVBAR TOGGLE ICON - BRAND COLOR
   Change toggle icon to match Syndeo brand color #d47b0f
   ========================================================= */

/* Navbar toggle icon - use Syndeo brand orange */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23d47b0f' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

[data-theme='dark'] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23d47b0f' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Toggle button border */
.navbar-toggler {
  border-color: #d47b0f !important;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(212, 123, 15, 0.25) !important;
}

/* =========================================================
   STARRED DEALS DASHBOARD CARD - DARK MODE
   Make star icon white in dark mode for visibility
   ========================================================= */

[data-theme='dark'] .card-header .fa-star.text-warning {
  color: #ffffff !important;
}

/* Also apply to any star icons in warning-themed card headers */
[data-theme='dark'] .card-header.bg-warning .fa-star {
  color: #ffffff !important;
}

[data-theme='dark'] .card.border-warning .card-header .fa-star {
  color: #ffffff !important;
}

/* =========================================================
   NAVBAR DROPDOWN HEADERS - DARK MODE
   Fix readability of dropdown headers
   ========================================================= */

/* Navbar dropdown headers */
[data-theme='dark'] .dropdown-header {
  background-color: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-color);
}

/* User email in navbar dropdown */
[data-theme='dark'] .navbar .dropdown-menu .dropdown-header {
  background-color: #1a1f26 !important;
  color: var(--text-muted) !important;
}

/* Ensure dropdown menu background is dark */
[data-theme='dark'] .navbar .dropdown-menu {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Dropdown items in navbar */
[data-theme='dark'] .navbar .dropdown-item {
  color: var(--text-color) !important;
}

[data-theme='dark'] .navbar .dropdown-item:hover,
[data-theme='dark'] .navbar .dropdown-item:focus {
  background-color: var(--card-hover) !important;
  color: var(--accent-color) !important;
}

/* Fix table last row styling consistency */
[data-theme='dark'] .table-hover tbody tr:last-child,
[data-theme='dark'] .table tbody tr:last-child {
  background-color: inherit !important;
}

[data-theme='dark'] .table-hover tbody tr:last-child:hover {
  background-color: var(--card-hover) !important;
}

.table-hover tbody tr:last-child,
.table tbody tr:last-child {
  background-color: inherit !important;
}

.table-hover tbody tr:last-child:hover {
  background-color: rgba(0, 0, 0, 0.075) !important;
}

/* Fix STATUS badge text readability in dark mode */
[data-theme='dark'] .badge-soft {
  color: #ffffff !important;
}

[data-theme='dark'] .badge-find,
[data-theme='dark'] .badge-offer,
[data-theme='dark'] .badge-review,
[data-theme='dark'] .badge-dead {
  color: #ffffff !important;
}