/* ==========================================================
   Syndeo Dashboard — Light Mode Styles
   Base theme (default) before dark-mode overrides
   ========================================================== */

:root,
[data-theme='light'] {
  --bg-color: #ffffff;
  --bg-secondary: #f6f8fa;
  --card-bg: #ffffff;
  --card-hover: #f2f4f7;
  --text-color: #1c1c1c;
  --text-muted: #6c757d;
  --border-color: #dee2e6;
  --accent-color: #007bff;
  --link-hover: #0056b3;
  --table-header-bg: #f8f9fa;
  --table-row-alt: #fdfdfd;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --info-color: #17a2b8;
  --secondary-color: #6c757d;
  /* Legacy aliases for compatibility */
  --success: #28a745;
  --warning: #ffc107;
  --danger: #dc3545;
}

/* ===== Base Layout ===== */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.navbar,
.footer {
  background-color: var(--bg-secondary);
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
}

a {
  color: var(--accent-color);
}
a:hover {
  color: var(--link-hover);
}

/* ===== Cards and Panels ===== */
.card,
.modal-content {
  background-color: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

/* Dropdown menus - explicit light mode styling */
[data-theme='light'] .dropdown-menu {
  background-color: #ffffff !important;
  color: #212529 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

[data-theme='light'] .dropdown-item {
  color: #212529 !important;
}

[data-theme='light'] .dropdown-item:hover,
[data-theme='light'] .dropdown-item:focus {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

[data-theme='light'] .dropdown-divider {
  border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme='light'] .dropdown-item i,
[data-theme='light'] .dropdown-item .fas,
[data-theme='light'] .dropdown-item .far,
[data-theme='light'] .dropdown-item .fab {
  color: #6c757d !important;
}

[data-theme='light'] .dropdown-item:hover i,
[data-theme='light'] .dropdown-item:hover .fas,
[data-theme='light'] .dropdown-item:hover .far,
[data-theme='light'] .dropdown-item:hover .fab {
  color: #212529 !important;
}

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

/* ===== Tables ===== */
table {
  background-color: var(--card-bg);
  color: var(--text-color);
  border-color: var(--border-color);
}

thead {
  background-color: var(--table-header-bg);
}

tr:nth-child(even) {
  background-color: var(--table-row-alt);
}

th,
td {
  border-color: var(--border-color);
}

/* ===== Buttons ===== */
.btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}
.btn-primary:hover {
  background-color: var(--link-hover);
  border-color: var(--link-hover);
}

.btn-outline-primary {
  color: var(--accent-color);
  border-color: var(--accent-color);
}
.btn-outline-primary:hover {
  background-color: var(--accent-color);
  color: #fff;
}

/* Light mode secondary buttons - clean and refined to match light theme */
[data-theme='light'] .btn-secondary {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #495057;
}

[data-theme='light'] .btn-secondary:hover,
[data-theme='light'] .btn-secondary:focus {
  background-color: #e9ecef;
  border-color: #adb5bd;
  color: #212529;
}

/* Ensure icons in secondary buttons have proper color */
[data-theme='light'] .btn-secondary i,
[data-theme='light'] .btn-secondary .fas,
[data-theme='light'] .btn-secondary .far,
[data-theme='light'] .btn-secondary .fab {
  color: #495057;
}

[data-theme='light'] .btn-secondary:hover i,
[data-theme='light'] .btn-secondary:hover .fas,
[data-theme='light'] .btn-secondary:hover .far,
[data-theme='light'] .btn-secondary:hover .fab,
[data-theme='light'] .btn-secondary:focus i,
[data-theme='light'] .btn-secondary:focus .fas,
[data-theme='light'] .btn-secondary:focus .far,
[data-theme='light'] .btn-secondary:focus .fab {
  color: #212529;
}

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

[data-theme='light'] .btn-group .btn-secondary:not(:first-child) {
  border-left-color: #dee2e6;
}

/* Active state for button groups */
[data-theme='light'] .btn-secondary:active,
[data-theme='light'] .btn-secondary.active {
  background-color: #dee2e6;
  border-color: #adb5bd;
  color: #212529;
}

/* ===== Alerts / Badges ===== */
.alert {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-color);
}
.badge {
  background-color: var(--accent-color);
  color: #fff;
}

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

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

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

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

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

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

/* Semantic text colors for light mode */
[data-theme='light'] .text-primary {
  color: var(--accent-color) !important;
}

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

[data-theme='light'] .text-warning {
  color: #c79100 !important;
}

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

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

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

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

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

[data-theme='light'] .text-warning.fas,
[data-theme='light'] .text-warning.far,
[data-theme='light'] .text-warning.fab,
[data-theme='light'] i.text-warning,
.text-warning.fas,
.text-warning.far,
.text-warning.fab,
i.text-warning {
  color: #c79100 !important;
}

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

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

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

/* ===== Forms ===== */
input,
textarea,
select {
  background-color: var(--bg-secondary);
  color: var(--text-color);
  border-color: var(--border-color);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* ===== Charts ===== */
canvas {
  background-color: var(--card-bg);
}

/* Chart.js defaults for light mode */
:root[data-theme='light'] {
  --chart-grid: #e0e0e0;
  --chart-text: #333333;
}

/* ===== Misc UI Elements ===== */
hr {
  border-color: var(--border-color);
}

.table thead th {
  color: var(--text-muted);
}

.dropdown-item:hover {
  background-color: var(--card-hover);
}

/* ===== Tooltips / Popovers ===== */
.tooltip-inner {
  background-color: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

/* ===== Custom: Syndeo metric cards ===== */
.metric-card {
  background-color: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}
.metric-card .metric-value {
  color: var(--accent-color);
}


/* ==== Consistent Pipeline Overview Table Element Placement with Darkmode ==== */
/* ==========================================================
   FIX: Align Pipeline Overview layout with dark mode style
   ========================================================== */
[data-theme='light'] .card:has(.table) {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

[data-theme='light'] .card .card-header {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 1rem;
}

[data-theme='light'] .card .card-body {
  padding: 1rem 1.25rem;
}

[data-theme='light'] .table th,
[data-theme='light'] .table td {
  padding: 0.65rem 0.9rem;
  vertical-align: middle;
}

[data-theme='light'] .progress {
  height: 0.6rem;
  border-radius: 0.375rem;
  background-color: var(--bg-secondary);
}

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

/* Add subtle card elevation for dashboard tables */
[data-theme='light'] .card.table-card {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem;
}

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

[data-theme='light'] .table-hover tbody tr:last-child:hover {
  background-color: rgba(0, 0, 0, 0.075) !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;
}