/* ============================================
   SMARTY - Global Styles
   Base styles and CSS variables (Bootstrap-compatible)
   Theme-aware variables that adapt to light/dark mode
   ============================================ */

:root {
    /* Bootstrap overrides and custom variables */
    --primary-color: #667eea;
    --primary-dark: #5568d3;
    --secondary-color: #764ba2;
    --accent-color: #f093fb;
    
    /* Layout */
    --header-height: 64px;
    --footer-height: 48px;
    --max-content-width: 1400px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* Theme-aware colors (use Bootstrap variables) */
    --card-bg: var(--bs-body-bg);
    --card-border: var(--bs-border-color);
    --text-muted: var(--bs-secondary-color);
    --surface-bg: var(--bs-secondary-bg);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-color-hover: rgba(0, 0, 0, 0.15);
}

/* Dark theme adjustments */
[data-bs-theme="dark"] {
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-color-hover: rgba(0, 0, 0, 0.4);
}

/* Dark theme support for common Bootstrap components */
[data-bs-theme="dark"] .card {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .card-body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .card-header {
    background-color: var(--bs-secondary-bg);
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .list-group-item {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .list-group-item strong {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] #main-content {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Ensure main-content background is always set, even if Bootstrap/MDB override */
html[data-bs-theme="dark"] #main-content,
html[data-bs-theme="dark"] body #main-content {
    background-color: var(--bs-body-bg) !important;
}

/* Specifically target Bootstrap's potential white background on body/html */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
    background: var(--bs-body-bg) !important;
    background-color: var(--bs-body-bg) !important;
}

/* Ensure viewport background is dark - highest specificity */
html[data-bs-theme="dark"],
body[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
    background: var(--bs-body-bg) !important;
    background-color: var(--bs-body-bg) !important;
}

/* Override Bootstrap's default body background in dark mode */
[data-bs-theme="dark"] body.bg-white,
[data-bs-theme="dark"] body[style*="background"],
html[data-bs-theme="dark"] body.bg-white {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .container,
[data-bs-theme="dark"] .container-fluid {
    background-color: transparent !important;
    color: var(--bs-body-color);
}

/* Ensure containers don't have white backgrounds */
html[data-bs-theme="dark"] .container,
html[data-bs-theme="dark"] .container-fluid {
    background-color: transparent !important;
}

/* Bootstrap grid - ensure rows and columns inherit theme */
[data-bs-theme="dark"] .row {
    background-color: transparent;
}

[data-bs-theme="dark"] [class*="col-"] {
    background-color: transparent;
}

[data-bs-theme="dark"] hr {
    border-color: var(--bs-border-color);
    opacity: 1;
}

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

/* Modals - Dark Theme */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .modal-header {
    background-color: var(--bs-secondary-bg);
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .modal-body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .modal-footer {
    background-color: var(--bs-body-bg);
    border-top-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Offcanvas - Dark Theme */
[data-bs-theme="dark"] .offcanvas {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .offcanvas-header {
    background-color: var(--bs-secondary-bg);
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .offcanvas-body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Dropdowns - Dark Theme */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dropdown-item.active {
    background-color: var(--bs-primary);
    color: white;
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--bs-border-color);
}

/* Toasts - Dark Theme */
[data-bs-theme="dark"] .toast {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .toast-header {
    background-color: var(--bs-secondary-bg);
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .toast-body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Forms - Dark Theme */
[data-bs-theme="dark"] .form-control {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control:focus {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-select {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-label {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-check-input {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .form-check-label {
    color: var(--bs-body-color);
}

/* Input Groups - Dark Theme */
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Tables - Dark Theme */
[data-bs-theme="dark"] .table {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > th {
    background-color: var(--bs-secondary-bg);
}

/* Alerts - Dark Theme */
[data-bs-theme="dark"] .alert {
    border-color: var(--bs-border-color);
}

/* Badges - Dark Theme (usually fine, but ensure contrast) */
[data-bs-theme="dark"] .badge {
    border-color: transparent;
}

/* Nav - Dark Theme */
[data-bs-theme="dark"] .nav-link {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .nav-link:hover,
[data-bs-theme="dark"] .nav-link:focus {
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .nav-link.active {
    color: var(--bs-primary);
    background-color: var(--bs-secondary-bg);
}

/* Pagination - Dark Theme */
[data-bs-theme="dark"] .pagination .page-link {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .pagination .page-link:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Breadcrumb - Dark Theme */
[data-bs-theme="dark"] .breadcrumb {
    background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .breadcrumb-item a {
    color: var(--bs-body-color);
}

/* Progress bars - Dark Theme */
[data-bs-theme="dark"] .progress {
    background-color: var(--bs-secondary-bg);
}

/* Spinners - Dark Theme (usually fine, but ensure visibility) */
[data-bs-theme="dark"] .spinner-border,
[data-bs-theme="dark"] .spinner-grow {
    color: var(--bs-primary);
}

/* ============================================
   Reset and Base Styles
   ============================================ */

html {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Ensure html background is always set in dark theme */
[data-bs-theme="dark"] html {
    background-color: var(--bs-body-bg) !important;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Ensure body background is always set in dark theme */
[data-bs-theme="dark"] body {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

/* ============================================
   Layout
   ============================================ */

#main-content {
    flex: 1;
    margin-top: var(--header-height);
    margin-bottom: var(--footer-height);
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* ============================================
   Custom Utility Extensions
   ============================================ */

.gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   Theme-aware Component Classes
   ============================================ */

/* Cards */
.theme-card {
    background: var(--card-bg);
    border-color: var(--card-border);
    color: var(--bs-body-color);
}

.theme-card-header {
    background: var(--surface-bg);
    border-bottom-color: var(--card-border);
    color: var(--bs-body-color);
}

/* Surfaces */
.theme-surface {
    background: var(--surface-bg);
    color: var(--bs-body-color);
}

/* Kanban columns */
.theme-kanban-column {
    background: var(--surface-bg);
    border-color: var(--card-border);
}

.theme-kanban-card {
    background: var(--card-bg);
    border-color: var(--card-border);
    color: var(--bs-body-color);
}

/* Shadows */
.theme-shadow {
    box-shadow: 0 1px 3px var(--shadow-color);
}

.theme-shadow-hover:hover {
    box-shadow: 0 4px 8px var(--shadow-color-hover);
}

.theme-shadow-lg {
    box-shadow: 0 10px 25px var(--shadow-color-hover);
}

/* Text colors */
.theme-text-muted {
    color: var(--text-muted);
}

/* Form elements */
.theme-form-label {
    color: var(--text-muted);
}

.theme-form-focus:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25);
}

/* Buttons */
.theme-btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border: none;
    color: white;
}

.theme-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

/* Dividers */
.theme-divider {
    background: var(--card-border);
}

.theme-divider-text {
    background: var(--card-bg);
    color: var(--text-muted);
}

/* Status colors (Bootstrap compatible) */
.status-todo {
    color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.status-in-progress {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.status-done {
    color: var(--bs-success);
    border-color: var(--bs-success);
}