/**
 * LG Pike Brand Theme
 * 
 * Official brand colors:
 * - Pike Blue: #005baa
 * - Pike Yellow: #ffcc00
 * - Pike Grey: #58585a
 * - Pike Black: #000000
 */

:root {
    /* Pike Brand Colors */
    --pike-blue: #005baa;
    --pike-blue-dark: #004a8c;
    --pike-blue-light: #1a6eb8;
    --pike-blue-rgb: 0, 91, 170;
    
    --pike-yellow: #ffcc00;
    --pike-yellow-dark: #e6b800;
    --pike-yellow-rgb: 255, 204, 0;
    
    --pike-grey: #58585a;
    --pike-grey-light: #6e6e70;
    --pike-grey-dark: #3d3d3f;
    --pike-grey-rgb: 88, 88, 90;
    
    --pike-black: #000000;
    --pike-white: #ffffff;
    
    /* Override Bootstrap Primary */
    --bs-primary: var(--pike-blue);
    --bs-primary-rgb: var(--pike-blue-rgb);
    
    /* Override Bootstrap Link Color */
    --bs-link-color: var(--pike-blue);
    --bs-link-hover-color: var(--pike-blue-dark);
}

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

/* ============================================
   Dark Mode - Pike Theme  
   Dark background with Pike Blue accents
   ============================================ */
[data-bs-theme="dark"] {
    --bs-primary: var(--pike-blue-light);
    --bs-primary-rgb: 26, 110, 184;
    --bs-link-color: var(--pike-blue-light);
    --bs-link-hover-color: var(--pike-blue);
    
    /* Pike grey/black backgrounds */
    --bs-body-bg: #1a1a1a;
    --bs-secondary-bg: #252525;
    --bs-tertiary-bg: #2d2d2d;
    
    --bs-body-color: #e8e8e8;
    --bs-secondary-color: #a0a0a0;
}

/* ============================================
   Buttons - Pike Blue (Unified Style)
   All buttons use solid Pike blue with white text
   ============================================ */
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
    --bs-btn-bg: var(--pike-blue) !important;
    --bs-btn-border-color: var(--pike-blue) !important;
    --bs-btn-color: #fff !important;
    --bs-btn-hover-bg: var(--pike-blue-dark) !important;
    --bs-btn-hover-border-color: var(--pike-blue-dark) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-active-bg: #003d73 !important;
    --bs-btn-active-border-color: #003d73 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-disabled-bg: var(--pike-blue) !important;
    --bs-btn-disabled-border-color: var(--pike-blue) !important;
    --bs-btn-disabled-color: #fff !important;
    background-color: var(--pike-blue) !important;
    border-color: var(--pike-blue) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background-color: var(--pike-blue-dark) !important;
    border-color: var(--pike-blue-dark) !important;
    color: #fff !important;
}

/* Dark mode - slightly lighter blue for visibility */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-bg: var(--pike-blue-light) !important;
    --bs-btn-border-color: var(--pike-blue-light) !important;
    --bs-btn-color: #fff !important;
    --bs-btn-hover-bg: var(--pike-blue) !important;
    --bs-btn-hover-border-color: var(--pike-blue) !important;
    --bs-btn-hover-color: #fff !important;
    background-color: var(--pike-blue-light) !important;
    border-color: var(--pike-blue-light) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-secondary:hover,
[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--pike-blue) !important;
    border-color: var(--pike-blue) !important;
    color: #fff !important;
}

/* Active/Selected button state - Pike Yellow highlight */
.btn.active,
.btn-primary.active,
.btn-secondary.active,
.btn-outline-primary.active,
.btn-outline-secondary.active,
.btn-group .btn.active {
    background-color: var(--pike-yellow) !important;
    border-color: var(--pike-yellow) !important;
    color: #000 !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.5) !important;
}

.btn.active:hover,
.btn-primary.active:hover,
.btn-secondary.active:hover,
.btn-outline-primary.active:hover,
.btn-outline-secondary.active:hover {
    background-color: var(--pike-yellow-dark) !important;
    border-color: var(--pike-yellow-dark) !important;
    color: #000 !important;
}

/* Dark mode active state */
[data-bs-theme="dark"] .btn.active,
[data-bs-theme="dark"] .btn-primary.active,
[data-bs-theme="dark"] .btn-secondary.active,
[data-bs-theme="dark"] .btn-outline-primary.active,
[data-bs-theme="dark"] .btn-outline-secondary.active,
[data-bs-theme="dark"] .btn-group .btn.active {
    background-color: var(--pike-yellow) !important;
    border-color: var(--pike-yellow) !important;
    color: #000 !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.5) !important;
}

/* Radio/Checkbox button checked state (btn-check) - Pike Yellow */
.btn-check:checked + .btn,
.btn-check:checked + .btn-primary,
.btn-check:checked + .btn-secondary,
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary {
    background-color: var(--pike-yellow) !important;
    border-color: var(--pike-yellow) !important;
    color: #000 !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.5) !important;
}

.btn-check:checked + .btn:hover,
.btn-check:checked + .btn-outline-primary:hover,
.btn-check:checked + .btn-outline-secondary:hover {
    background-color: var(--pike-yellow-dark) !important;
    border-color: var(--pike-yellow-dark) !important;
    color: #000 !important;
}

/* Dark mode checked state */
[data-bs-theme="dark"] .btn-check:checked + .btn,
[data-bs-theme="dark"] .btn-check:checked + .btn-primary,
[data-bs-theme="dark"] .btn-check:checked + .btn-secondary,
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-primary,
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-secondary {
    background-color: var(--pike-yellow) !important;
    border-color: var(--pike-yellow) !important;
    color: #000 !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.5) !important;
}

/* ============================================
   Navbar - Pike Branded
   ============================================ */
[data-bs-theme="light"] .navbar {
    background: var(--pike-blue) !important;
    border-bottom: 4px solid var(--pike-yellow) !important;
}

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

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

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

[data-bs-theme="dark"] .navbar {
    background: var(--pike-black) !important;
    border-bottom: 4px solid var(--pike-blue) !important;
}

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

/* Mobile hamburger icon - white on blue */
[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(--pike-blue);
}

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

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

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

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

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

.metric-card__number {
    color: var(--pike-blue) !important;
}

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

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

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

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

/* ============================================
   Links
   ============================================ */
a {
    color: var(--pike-blue);
}

a:hover {
    color: var(--pike-blue-dark);
}

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

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

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

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

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

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

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

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

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

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

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

.sheet-done-btn {
    color: var(--pike-blue) !important;
}

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

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

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

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

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

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

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--pike-blue);
}

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

[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(--pike-yellow) !important;
}

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

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

[data-bs-theme="dark"] .offcanvas {
    background: var(--pike-black);
    border-left: 3px solid var(--pike-blue);
}

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

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

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

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

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

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

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

::-webkit-scrollbar-thumb:hover {
    background: var(--pike-blue);
}

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

:focus-visible {
    outline: 2px solid var(--pike-blue);
    outline-offset: 2px;
}

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