/**
 * Schedule App Theme
 *
 * This file provides theme styling that works with dynamic branding.
 * Brand colors are set by brand-theme.php from database settings.
 *
 * Fallback colors (Pike defaults):
 * - Primary Blue: #005baa
 * - Secondary Blue: #004a8c
 * - Accent Yellow: #ffcc00
 */

:root {
    /* Fallback colors - overridden by brand-theme.php */
    --brand-primary: #005baa;
    --brand-primary-rgb: 0, 91, 170;
    --brand-primary-dark: #004a8c;
    --brand-primary-light: #1a6eb8;

    --brand-secondary: #004a8c;
    --brand-secondary-rgb: 0, 74, 140;
    --brand-secondary-dark: #003a6d;
    --brand-secondary-light: #336ba3;

    --brand-accent: #ffcc00;
    --brand-accent-rgb: 255, 204, 0;
    --brand-accent-dark: #e6b800;

    /* Grey tones for UI elements */
    --ui-grey: #58585a;
    --ui-grey-light: #6e6e70;
    --ui-grey-dark: #3d3d3f;
    --ui-grey-rgb: 88, 88, 90;

    /* Override Bootstrap Primary with brand colors */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);

    /* Override Bootstrap Link Color */
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-dark);
}

/* ============================================
   Light Mode Theme
   Clean white with brand accents
   ============================================ */
[data-bs-theme="light"] {
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-dark);
}

/* ============================================
   Dark Mode Theme
   Dark background with brand accents
   ============================================ */
[data-bs-theme="dark"] {
    --bs-primary: var(--brand-primary-light);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-link-color: var(--brand-primary-light);
    --bs-link-hover-color: var(--brand-primary);

    /* Dark backgrounds */
    --bs-body-bg: #1a1a1a;
    --bs-secondary-bg: #252525;
    --bs-tertiary-bg: #2d2d2d;

    --bs-body-color: #e8e8e8;
    --bs-secondary-color: #a0a0a0;
}

/* ============================================
   Buttons - Handled by brand-theme.php
   Button colors are now dynamic based on branding settings
   ============================================ */

/* ============================================
   Navbar - Brand Colored
   ============================================ */
[data-bs-theme="light"] .navbar {
    background: var(--brand-primary) !important;
    border-bottom: 4px solid var(--brand-accent) !important;
}

[data-bs-theme="light"] .navbar .navbar-brand,
[data-bs-theme="light"] .navbar .nav-link,
[data-bs-theme="light"] .navbar .navbar-text {
    color: white !important;
}

[data-bs-theme="light"] .navbar .nav-link:hover,
[data-bs-theme="light"] .navbar .nav-link:focus {
    color: var(--brand-accent) !important;
}

[data-bs-theme="light"] .navbar .nav-link.active {
    color: var(--brand-accent) !important;
}

[data-bs-theme="dark"] .navbar {
    background: #000000 !important;
    border-bottom: 4px solid var(--brand-primary) !important;
}

[data-bs-theme="dark"] .navbar .nav-link:hover,
[data-bs-theme="dark"] .navbar .nav-link:focus {
    color: var(--brand-accent) !important;
}

/* Mobile hamburger icon - white on colored bg */
[data-bs-theme="light"] .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

/* ============================================
   Cards
   ============================================ */
.card {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .card {
    background: var(--bs-secondary-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.card-header {
    background: transparent;
    border-bottom: 2px solid var(--brand-primary);
}

[data-bs-theme="dark"] .card-header {
    border-bottom-color: var(--brand-primary-light);
}

/* ============================================
   Dashboard Metric Cards
   ============================================ */
.metric-card {
    border-left: 4px solid var(--brand-primary) !important;
}

.metric-card--urgent {
    border-left-color: var(--bs-danger) !important;
}

.metric-card--warning {
    border-left-color: var(--brand-accent) !important;
}

.metric-card--success {
    border-left-color: var(--bs-success) !important;
}

.metric-card__number {
    color: var(--brand-primary) !important;
}

[data-bs-theme="dark"] .metric-card__number {
    color: var(--brand-primary-light) !important;
}

/* ============================================
   Form Controls
   ============================================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-switch .form-check-input:checked {
    background-color: var(--brand-primary);
}

/* ============================================
   Links
   ============================================ */
a {
    color: var(--brand-primary);
}

a:hover {
    color: var(--brand-primary-dark);
}

[data-bs-theme="dark"] a {
    color: var(--brand-primary-light);
}

[data-bs-theme="dark"] a:hover {
    color: var(--brand-accent);
}

/* ============================================
   Alerts
   ============================================ */
.alert-primary {
    --bs-alert-bg: rgba(var(--brand-primary-rgb), 0.15);
    --bs-alert-border-color: rgba(var(--brand-primary-rgb), 0.3);
    --bs-alert-color: var(--brand-primary-dark);
}

[data-bs-theme="dark"] .alert-primary {
    --bs-alert-color: var(--brand-primary-light);
}

.alert-warning {
    --bs-alert-bg: rgba(var(--brand-accent-rgb), 0.15);
    --bs-alert-border-color: rgba(var(--brand-accent-rgb), 0.3);
}

/* ============================================
   Tables
   ============================================ */
.table > thead {
    background: var(--brand-primary);
    color: white;
}

[data-bs-theme="dark"] .table > thead {
    background: var(--ui-grey-dark);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-striped-bg: rgba(var(--brand-primary-rgb), 0.03);
}

/* ============================================
   Mobile Select Picker
   ============================================ */
.mobile-select-trigger:hover,
.mobile-select-trigger:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
}

.picker-list-item.selected {
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--brand-primary);
}

[data-bs-theme="dark"] .picker-list-item.selected {
    background: rgba(var(--brand-primary-rgb), 0.2);
    color: var(--brand-primary-light);
}

.sheet-done-btn {
    color: var(--brand-primary) !important;
}

[data-bs-theme="dark"] .sheet-done-btn {
    color: var(--brand-primary-light) !important;
}

/* ============================================
   Progress Bars & Badges
   ============================================ */
.progress-bar {
    background-color: var(--brand-primary);
}

.badge.bg-primary {
    background-color: var(--brand-primary) !important;
}

/* ============================================
   Pagination
   ============================================ */
.page-link {
    color: var(--brand-primary);
}

.page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* ============================================
   Dropdowns
   ============================================ */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(var(--brand-primary-rgb), 0.1);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--brand-primary);
}

/* ============================================
   Offcanvas (Mobile Menu)
   ============================================ */
[data-bs-theme="light"] .offcanvas {
    background: var(--brand-primary);
}

[data-bs-theme="light"] .offcanvas .nav-link {
    color: white !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

[data-bs-theme="light"] .offcanvas .nav-link:hover {
    background: rgba(255,255,255,0.1);
    color: var(--brand-accent) !important;
}

[data-bs-theme="light"] .offcanvas .offcanvas-header {
    border-bottom: 3px solid var(--brand-accent);
}

[data-bs-theme="light"] .offcanvas .btn-close {
    filter: brightness(0) invert(1);
}

[data-bs-theme="dark"] .offcanvas {
    background: #000000;
    border-left: 3px solid var(--brand-primary);
}

/* ============================================
   Employee Cards
   ============================================ */
.employee-card,
.card.employee-card {
    border-left: 4px solid var(--brand-primary);
}

/* ============================================
   Quick Action Buttons (Dashboard)
   ============================================ */
.quick-action-btn:hover {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: white !important;
}

/* ============================================
   Day View Mobile Nav
   ============================================ */
.mobile-nav-buttons .btn {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.mobile-nav-buttons .btn:active {
    background: var(--brand-primary-dark) !important;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bs-tertiary-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--ui-grey);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary);
}

/* ============================================
   Selection & Focus
   ============================================ */
::selection {
    background: rgba(var(--brand-primary-rgb), 0.3);
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

[data-bs-theme="dark"] :focus-visible {
    outline-color: var(--brand-accent);
}