/* Qiwako Theme - Harmonious Green Color Palette */
/* Based on primary color #116530 using color wheel principles */

:root {
    /* Primary Color - Deep Forest Green (#116530) */
    /* HSL: 145°, 71%, 23% */
    --qiwako-primary: #116530;
    --qiwako-primary-dark: #0A3D1F;
    --qiwako-primary-darker: #052610;
    --qiwako-primary-light: #1A7A3D;
    --qiwako-primary-lighter: #2D8F52;
    --qiwako-primary-lightest: #E6F5EB;
    
    /* Secondary Color - Replaced with primary-based colors (removed #00E0A0) */
    /* Using primary color variants instead */
    --qiwako-secondary: var(--qiwako-primary-light);
    --qiwako-secondary-dark: var(--qiwako-primary);
    --qiwako-secondary-darker: var(--qiwako-primary-dark);
    --qiwako-secondary-light: var(--qiwako-primary-lighter);
    --qiwako-secondary-lighter: var(--qiwako-primary-lighter);
    --qiwako-secondary-lightest: var(--qiwako-primary-lightest);
    
    /* Success - Green (Analogous, brighter than primary) */
    /* HSL: 150°, 75%, 40% */
    --qiwako-success: #1A9D5A;
    --qiwako-success-dark: #147A45;
    --qiwako-success-light: #2DBF75;
    --qiwako-success-lightest: #D4F4E5;
    
    /* Info - Teal/Green-Blue (Analogous, between primary and secondary) */
    /* HSL: 170°, 70%, 35% */
    --qiwako-info: #1A8A7A;
    --qiwako-info-dark: #146B5E;
    --qiwako-info-light: #2DA89A;
    --qiwako-info-lightest: #D4F2EF;
    
    /* Warning - Yellow-Green (Analogous, warmer) */
    /* HSL: 85°, 70%, 50% */
    --qiwako-warning: #A8C84A;
    --qiwako-warning-dark: #869A3B;
    --qiwako-warning-light: #C4D96B;
    --qiwako-warning-lightest: #F4F8E3;
    
    /* Danger - Warm Red (Complementary, but softened for harmony) */
    /* HSL: 5°, 70%, 50% */
    --qiwako-danger: #D64A4A;
    --qiwako-danger-dark: #AB3B3B;
    --qiwako-danger-light: #E66B6B;
    --qiwako-danger-lightest: #F9E6E6;
    
    /* Neutral Colors */
    --qiwako-dark: #001A14;
    --qiwako-light: #F0F8F4;
    --qiwako-gray-100: #F5F9F7;
    --qiwako-gray-200: #E8F0EC;
    --qiwako-gray-300: #D1E0D9;
    --qiwako-gray-400: #9FB8AD;
    --qiwako-gray-500: #6B8A7A;
    --qiwako-gray-600: #4A6B5E;
    --qiwako-gray-700: #2D4A3D;
    --qiwako-gray-800: #1A2E26;
    --qiwako-gray-900: #0A1410;
}

/* Override Bootstrap primary color - MUST use !important to override Bootstrap */
/* Force override with higher specificity */
.bg-primary,
[class*="bg-primary"],
[class~="bg-primary"] {
    background-color: var(--qiwako-primary) !important;
}

/* Force override navbar - use multiple selectors */
.navbar.bg-primary,
.navbar-dark.bg-primary,
nav.bg-primary,
nav.navbar-dark.bg-primary,
[class*="navbar"][class*="bg-primary"] {
    background-color: var(--qiwako-primary) !important;
}

.card-header.bg-primary {
    background-color: var(--qiwako-primary) !important;
    color: #fff !important;
}

.text-primary {
    color: var(--qiwako-primary) !important;
}

.border-primary {
    border-color: var(--qiwako-primary) !important;
}

/* Force override Bootstrap button primary - use multiple selectors for maximum specificity */
.btn-primary,
button.btn-primary,
a.btn-primary,
input.btn-primary,
[class*="btn-primary"],
[class~="btn-primary"] {
    background-color: var(--qiwako-primary) !important;
    border-color: var(--qiwako-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--qiwako-primary-dark) !important;
    border-color: var(--qiwako-primary-dark) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--qiwako-primary) !important;
    border-color: var(--qiwako-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--qiwako-primary) !important;
    border-color: var(--qiwako-primary) !important;
    color: #fff !important;
}

/* Secondary buttons */
.btn-secondary {
    background-color: var(--qiwako-secondary);
    border-color: var(--qiwako-secondary);
    color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--qiwako-secondary-dark);
    border-color: var(--qiwako-secondary-dark);
    color: #fff;
}

.btn-outline-secondary {
    color: var(--qiwako-gray-600);
    border-color: var(--qiwako-gray-400);
    background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--qiwako-gray-500);
    border-color: var(--qiwako-gray-500);
    color: #fff;
}

/* Success buttons and elements */
.bg-success {
    background-color: var(--qiwako-success) !important;
}

.btn-success {
    background-color: var(--qiwako-success);
    border-color: var(--qiwako-success);
}

.btn-success:hover {
    background-color: var(--qiwako-success-dark);
    border-color: var(--qiwako-success-dark);
}

.btn-outline-success {
    color: var(--qiwako-success);
    border-color: var(--qiwako-success);
}

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

.text-success {
    color: var(--qiwako-success) !important;
}

/* Info buttons and elements */
.bg-info {
    background-color: var(--qiwako-info) !important;
}

.btn-info {
    background-color: var(--qiwako-info);
    border-color: var(--qiwako-info);
}

.btn-info:hover {
    background-color: var(--qiwako-info-dark);
    border-color: var(--qiwako-info-dark);
}

.btn-outline-info {
    color: var(--qiwako-info);
    border-color: var(--qiwako-info);
}

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

.text-info {
    color: var(--qiwako-info) !important;
}

/* Warning buttons and elements */
.bg-warning {
    background-color: var(--qiwako-warning) !important;
}

.btn-warning {
    background-color: var(--qiwako-warning);
    border-color: var(--qiwako-warning);
}

.btn-warning:hover {
    background-color: var(--qiwako-warning-dark);
    border-color: var(--qiwako-warning-dark);
}

.text-warning {
    color: var(--qiwako-warning-dark) !important;
}

/* Danger buttons and elements */
.bg-danger {
    background-color: var(--qiwako-danger) !important;
}

.btn-danger {
    background-color: var(--qiwako-danger);
    border-color: var(--qiwako-danger);
}

.btn-danger:hover {
    background-color: var(--qiwako-danger-dark);
    border-color: var(--qiwako-danger-dark);
}

.btn-outline-danger {
    color: var(--qiwako-danger);
    border-color: var(--qiwako-danger);
}

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

.text-danger {
    color: var(--qiwako-danger) !important;
}

.text-primary {
    color: var(--qiwako-primary) !important;
}

.border-primary {
    border-color: var(--qiwako-primary) !important;
}

/* Navbar styling */
.navbar-dark.bg-primary,
.navbar-dark {
    background-color: var(--qiwako-primary) !important;
}

.navbar-brand {
    font-weight: 600;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-size: 1.1rem !important;
    padding: 0.25rem 0 !important;
    line-height: 1.2 !important;
}

.navbar-brand:hover {
    color: #fff !important;
}

.navbar-brand img {
    height: 28px !important;
    width: auto !important;
    filter: brightness(0) invert(1);
    transition: transform 0.2s;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

.navbar-brand span {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

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

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

/* Badge primary */
.badge.bg-primary {
    background-color: var(--qiwako-primary) !important;
}

.badge.bg-success {
    background-color: var(--qiwako-success) !important;
}

.badge.bg-info {
    background-color: var(--qiwako-info) !important;
}

.badge.bg-warning {
    background-color: var(--qiwako-warning) !important;
}

.badge.bg-danger {
    background-color: var(--qiwako-danger) !important;
}

/* Active states */
.nav-link.active {
    color: var(--qiwako-primary) !important;
}

.nav-link:hover {
    color: var(--qiwako-primary-light) !important;
}

/* Cards with primary accent */
.card-header.bg-primary {
    background-color: var(--qiwako-primary) !important;
}

.card-header.bg-success {
    background-color: var(--qiwako-success) !important;
}

.card-header.bg-info {
    background-color: var(--qiwako-info) !important;
}

.card-header.bg-warning {
    background-color: var(--qiwako-warning) !important;
}

.card-header.bg-danger {
    background-color: var(--qiwako-danger) !important;
}

/* Admin sidebar active state */
.admin-sidebar .nav-link.active {
    background: var(--qiwako-primary-lightest);
    border-left-color: var(--qiwako-primary);
    color: var(--qiwako-primary-dark);
}

.admin-sidebar .nav-link:hover {
    border-left-color: var(--qiwako-primary);
    background: var(--qiwako-primary-lightest);
}

/* Footer */
footer {
    background-color: var(--qiwako-dark);
    color: var(--qiwako-light);
}

/* Custom buttons */
.btn-qiwako {
    background-color: var(--qiwako-primary);
    color: #fff;
    border-color: var(--qiwako-primary);
}

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

/* Form controls focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--qiwako-primary);
    box-shadow: 0 0 0 0.25rem rgba(17, 101, 48, 0.25);
}

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

.page-link:hover {
    color: var(--qiwako-primary-dark);
    background-color: var(--qiwako-primary-lightest);
    border-color: var(--qiwako-primary);
}

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

/* Dropdown */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--qiwako-primary-lightest);
    color: var(--qiwako-primary-dark);
}

/* Alert primary */
.alert-primary {
    background-color: var(--qiwako-primary-lightest);
    border-color: var(--qiwako-primary-light);
    color: var(--qiwako-primary-dark);
}

/* Alert success */
.alert-success {
    background-color: var(--qiwako-success-lightest);
    border-color: var(--qiwako-success-light);
    color: var(--qiwako-success-dark);
}

/* Alert info */
.alert-info {
    background-color: var(--qiwako-info-lightest);
    border-color: var(--qiwako-info-light);
    color: var(--qiwako-info-dark);
}

/* Alert warning */
.alert-warning {
    background-color: #FFF8E1;
    border-color: var(--qiwako-warning-light);
    color: var(--qiwako-warning-dark);
}

/* Alert danger */
.alert-danger {
    background-color: var(--qiwako-danger-lightest);
    border-color: var(--qiwako-danger-light);
    color: var(--qiwako-danger-dark);
}

/* Progress bar */
.progress-bar.bg-primary {
    background-color: var(--qiwako-primary) !important;
}

.progress-bar.bg-success {
    background-color: var(--qiwako-success) !important;
}

.progress-bar.bg-info {
    background-color: var(--qiwako-info) !important;
}

.progress-bar.bg-warning {
    background-color: var(--qiwako-warning) !important;
}

.progress-bar.bg-danger {
    background-color: var(--qiwako-danger) !important;
}

/* Table hover */
.table-hover tbody tr:hover {
    background-color: var(--qiwako-primary-lightest);
}

/* Modal */
.modal-header.bg-primary {
    background-color: var(--qiwako-primary) !important;
}

/* Breadcrumb */
.breadcrumb-item.active {
    color: var(--qiwako-primary);
}

/* Spinner */
.spinner-border-primary {
    color: var(--qiwako-primary);
}

/* Remove blue focus color from all buttons */
.btn:focus,
.btn:focus-visible,
.btn:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(17, 101, 48, 0.25) !important;
    outline: none !important;
}

.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(17, 101, 48, 0.25) !important;
    background-color: var(--qiwako-primary-dark) !important;
    border-color: var(--qiwako-primary-dark) !important;
}

.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(17, 101, 48, 0.25) !important;
    background-color: var(--qiwako-primary) !important;
    border-color: var(--qiwako-primary) !important;
    color: #fff !important;
}

.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-secondary:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(17, 101, 48, 0.25) !important;
    background-color: var(--qiwako-secondary-dark) !important;
    border-color: var(--qiwako-secondary-dark) !important;
}

.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(107, 138, 122, 0.25) !important;
    background-color: var(--qiwako-gray-500) !important;
    border-color: var(--qiwako-gray-500) !important;
    color: #fff !important;
}

.btn-success:focus,
.btn-success:focus-visible,
.btn-success:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(26, 157, 90, 0.25) !important;
}

.btn-outline-success:focus,
.btn-outline-success:focus-visible,
.btn-outline-success:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(26, 157, 90, 0.25) !important;
}

.btn-info:focus,
.btn-info:focus-visible,
.btn-info:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(26, 138, 122, 0.25) !important;
}

.btn-outline-info:focus,
.btn-outline-info:focus-visible,
.btn-outline-info:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(26, 138, 122, 0.25) !important;
}

.btn-warning:focus,
.btn-warning:focus-visible,
.btn-warning:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(168, 200, 74, 0.25) !important;
}

.btn-danger:focus,
.btn-danger:focus-visible,
.btn-danger:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(214, 74, 74, 0.25) !important;
}

.btn-outline-danger:focus,
.btn-outline-danger:focus-visible,
.btn-outline-danger:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(214, 74, 74, 0.25) !important;
}

/* Remove blue focus from form controls */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--qiwako-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(17, 101, 48, 0.25) !important;
    outline: none !important;
}

/* Remove blue focus from links and other interactive elements */
a:focus,
a:focus-visible {
    outline: 2px solid var(--qiwako-primary) !important;
    outline-offset: 2px !important;
}

/* Remove blue focus from dropdown */
.dropdown-toggle:focus,
.dropdown-item:focus {
    box-shadow: 0 0 0 0.25rem rgba(17, 101, 48, 0.25) !important;
    outline: none !important;
}

/* Remove blue focus from pagination */
.page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(17, 101, 48, 0.25) !important;
    outline: none !important;
}

/* Remove blue focus from modal close button */
.btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(17, 101, 48, 0.25) !important;
    outline: none !important;
}

/* ============================================
   DARK THEME SUPPORT (User Preferences)
   ============================================ */

/* Dark Theme Variables */
[data-theme="dark"],
.theme-dark,
html.theme-dark,
body.theme-dark {
    /* Dark mode color overrides */
    --qiwako-bg-dark: #0a1410;
    --qiwako-bg-darker: #052610;
    --qiwako-text-dark: #f0f8f4;
    --qiwako-text-muted-dark: #9fb8ad;
    --qiwako-border-dark: #2d4a3d;
    
    /* Background colors */
    background-color: var(--qiwako-bg-dark) !important;
    color: var(--qiwako-text-dark) !important;
}

/* Dark Theme - Body and main content */
[data-theme="dark"] body,
.theme-dark body,
html.theme-dark body {
    background-color: var(--qiwako-bg-dark) !important;
    color: var(--qiwako-text-dark) !important;
}

/* Dark Theme - Cards */
[data-theme="dark"] .card,
.theme-dark .card,
html.theme-dark .card {
    background-color: var(--qiwako-bg-darker) !important;
    color: var(--qiwako-text-dark) !important;
    border-color: var(--qiwako-border-dark) !important;
}

[data-theme="dark"] .card-header,
.theme-dark .card-header,
html.theme-dark .card-header {
    background-color: var(--qiwako-primary-dark) !important;
    color: var(--qiwako-text-dark) !important;
    border-color: var(--qiwako-border-dark) !important;
}

/* Dark Theme - Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
.theme-dark .form-control,
.theme-dark .form-select,
html.theme-dark .form-control,
html.theme-dark .form-select {
    background-color: var(--qiwako-bg-darker) !important;
    color: var(--qiwako-text-dark) !important;
    border-color: var(--qiwako-border-dark) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
.theme-dark .form-control:focus,
.theme-dark .form-select:focus,
html.theme-dark .form-control:focus,
html.theme-dark .form-select:focus {
    background-color: var(--qiwako-bg-darker) !important;
    color: var(--qiwako-text-dark) !important;
    border-color: var(--qiwako-primary) !important;
}

/* Dark Theme - Tables */
[data-theme="dark"] .table,
.theme-dark .table,
html.theme-dark .table {
    color: var(--qiwako-text-dark) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
.theme-dark .table-striped > tbody > tr:nth-of-type(odd),
html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--qiwako-bg-darker) !important;
}

/* Dark Theme - Text muted */
[data-theme="dark"] .text-muted,
.theme-dark .text-muted,
html.theme-dark .text-muted {
    color: var(--qiwako-text-muted-dark) !important;
}

/* Dark Theme - Links */
[data-theme="dark"] a,
.theme-dark a,
html.theme-dark a {
    color: var(--qiwako-primary-lighter) !important;
}

[data-theme="dark"] a:hover,
.theme-dark a:hover,
html.theme-dark a:hover {
    color: var(--qiwako-primary-light) !important;
}

/* Dark Theme - Bootstrap bg-light and bg-white */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white,
.theme-dark .bg-light,
.theme-dark .bg-white,
html.theme-dark .bg-light,
html.theme-dark .bg-white {
    background-color: var(--qiwako-bg-darker) !important;
    color: var(--qiwako-text-dark) !important;
}

/* Dark Theme - Bootstrap text-dark */
[data-theme="dark"] .text-dark,
.theme-dark .text-dark,
html.theme-dark .text-dark {
    color: var(--qiwako-text-dark) !important;
}

/* Dark Theme - Dropdown menus */
[data-theme="dark"] .dropdown-menu,
.theme-dark .dropdown-menu,
html.theme-dark .dropdown-menu {
    background-color: var(--qiwako-bg-darker) !important;
    border-color: var(--qiwako-border-dark) !important;
}

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

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

/* Dark Theme - Modals */
[data-theme="dark"] .modal-content,
.theme-dark .modal-content,
html.theme-dark .modal-content {
    background-color: var(--qiwako-bg-darker) !important;
    color: var(--qiwako-text-dark) !important;
    border-color: var(--qiwako-border-dark) !important;
}

/* Dark Theme - List groups */
[data-theme="dark"] .list-group-item,
.theme-dark .list-group-item,
html.theme-dark .list-group-item {
    background-color: var(--qiwako-bg-darker) !important;
    color: var(--qiwako-text-dark) !important;
    border-color: var(--qiwako-border-dark) !important;
}

/* Auto Theme - Follows system preference */
.theme-auto,
html.theme-auto {
    /* System preference is handled via JavaScript */
    /* This class is just for identification */
}

/* Dark Theme - Ensure proper contrast for readability */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
.theme-dark .container,
.theme-dark .container-fluid,
html.theme-dark .container,
html.theme-dark .container-fluid {
    color: var(--qiwako-text-dark) !important;
}