/**
 * HygieneTech — Blue Brand Theme v2.0
 * =========================================
 * Blue primary (logo-aligned: navy + sky blue)
 * Stone neutrals (warm, premium, not cold)
 * Loads AFTER style.css + color-6.css to override Mofi theme variables.
 *
 * Light: Warm white (#FAFAF9) + white surfaces + blue accents
 * Dark:  Deep blue-slate (#0b1120) + navy-tinted surfaces + bright blue
 */

/* =========================================
   LIGHT MODE — Mofi Variable Overrides
   ========================================= */
:root {
    /* Brand */
    --theme-default: #2563eb;
    --theme-secondary: #0891b2;

    /* Surfaces */
    --light-background: rgba(250, 250, 249, 0.85);
    --body-font-color: #1C1917;
    --recent-chart-bg: #FAFAF9;
    --light-bg: #F5F5F4;
    --white: #fff;
    --light2: #F5F5F4;
    --chart-border: #E7E5E4;
    --recent-box-bg: #F5F5F4;
    --recent-border: rgba(120, 113, 108, 0.2);
    --course-light-btn: #F5F5F4;
    --course-bg: #FAFAF9;
    --balance-profie-bg: #dbeafe;
    --view-grid-bg: rgba(236, 253, 245, 0.5);
    --view-border-marker: #bfdbfe;
    --light-slate: #F5F5F4;
    --sidebar-border: rgba(28, 25, 23, 0.06);
    --text-gray: rgba(120, 113, 108, 0.9);
    --chart-text-color: rgba(120, 113, 108, 0.85);
    --recent-dashed-border: rgba(120, 113, 108, 0.25);
    --chart-dashed-border: rgba(120, 113, 108, 0.15);
    --chart-progress-light: rgba(120, 113, 108, 0.08);
    --product-shadow: 0px 1px 0px rgba(28, 25, 23, 0.06);
    --light-shade-primary: #eff6ff;
    --bs-heading-color: #1C1917;

    /* Calendar buttons auto-inherit from --theme-default */
}

/* Tag overrides */
:root .customLook {
    --tag-bg: var(--theme-default);
    --tag-hover: var(--theme-secondary);
}


/* =========================================
   DARK MODE — Mofi Variable Overrides
   ========================================= */
.dark-only {
    --theme-default: #60a5fa;
    --theme-secondary: #22D3EE;
    --light-background: #131c2e;
    --recent-chart-bg: #0b1120;
    --light-bg: #111827;
    --white: #131c2e;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --light2: #111827;
    --chart-border: #1a2637;
    --recent-box-bg: #111827;
    --recent-border: rgba(255, 255, 255, 0.08);
    --body-font-color: rgba(245, 245, 244, 0.85);
    --course-light-btn: #111827;
    --view-grid-bg: #111827;
    --view-border-marker: rgba(96, 165, 250, 0.15);
    --light-slate: #111827;
    --text-gray: rgba(168, 162, 158, 0.85);
    --chart-text-color: rgba(168, 162, 158, 0.8);
    --recent-dashed-border: rgba(168, 162, 158, 0.25);
    --chart-dashed-border: rgba(168, 162, 158, 0.15);
    --chart-progress-light: rgba(168, 162, 158, 0.08);
    --product-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
    --light-shade-primary: rgba(37, 99, 235, 0.12);
    --bs-heading-color: rgba(245, 245, 244, 0.9);
}


/* =========================================
   GLOBAL SURFACE REFINEMENTS — Light
   ========================================= */

/* Body background: warm stone-50 */
body {
    background-color: #FAFAF9 !important;
}

/* Page body wrapper */
.page-wrapper .page-body-wrapper .page-body {
    background-color: #FAFAF9;
}

/* Card refinements */
.page-body .card {
    border: 1px solid rgba(28, 25, 23, 0.06);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(28, 25, 23, 0.04), 0 1px 2px rgba(28, 25, 23, 0.03);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.page-body .card:hover {
    box-shadow: 0 4px 12px rgba(28, 25, 23, 0.06), 0 2px 4px rgba(28, 25, 23, 0.04);
}

.page-body .card .card-header {
    border-bottom: 1px solid rgba(28, 25, 23, 0.06);
    background: transparent;
}

.page-body .card .card-footer {
    border-top: 1px solid rgba(28, 25, 23, 0.06);
    background: transparent;
}

/* =========================================
   GLOBAL SURFACE REFINEMENTS — Dark
   ========================================= */
body.dark-only {
    background-color: #0b1120 !important;
}

body.dark-only .page-wrapper .page-body-wrapper .page-body {
    background-color: #0b1120 !important;
}

/* Card in dark mode — deep obsidian surface */
body.dark-only .page-body .card {
    background-color: #131c2e !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
}

body.dark-only .page-body .card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.2);
    border-color: rgba(96, 165, 250, 0.1) !important;
}

body.dark-only .page-body .card .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    background: transparent !important;
}

body.dark-only .page-body .card .card-footer {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
    background: transparent !important;
}


/* =========================================
   BUTTONS — Blue Primary
   ========================================= */

/* Primary button */
.btn-primary,
.btn-primary:focus {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
}

.btn-primary:active,
.btn-primary.active {
    background-color: #1e40af !important;
    border-color: #1e40af !important;
}

/* Outline primary */
.btn-outline-primary {
    color: #2563eb !important;
    border-color: #2563eb !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

/* Dark mode buttons */
body.dark-only .btn-primary,
body.dark-only .btn-primary:focus {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

body.dark-only .btn-primary:hover {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

body.dark-only .btn-outline-primary {
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}

body.dark-only .btn-outline-primary:hover {
    background-color: #60a5fa !important;
    color: #0b1120 !important;
}

/* Secondary button */
.btn-secondary {
    background-color: #0891b2 !important;
    border-color: #0891b2 !important;
}

.btn-secondary:hover {
    background-color: #0E7490 !important;
    border-color: #0E7490 !important;
}


/* =========================================
   BADGES — Refined
   ========================================= */
.badge.bg-primary,
.badge.badge-primary {
    background-color: #2563eb !important;
}

body.dark-only .badge.bg-primary,
body.dark-only .badge.badge-primary {
    background-color: rgba(96, 165, 250, 0.2) !important;
    color: #60a5fa !important;
}

.badge.bg-secondary,
.badge.badge-secondary {
    background-color: #0891b2 !important;
}

body.dark-only .badge.bg-secondary,
body.dark-only .badge.badge-secondary {
    background-color: rgba(34, 211, 238, 0.2) !important;
    color: #22D3EE !important;
}


/* =========================================
   FORM FOCUS STATES
   ========================================= */
.form-control:focus,
.form-select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

body.dark-only .form-control:focus,
body.dark-only .form-select:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
}


/* =========================================
   LINKS
   ========================================= */
a {
    color: #2563eb;
}

a:hover {
    color: #1d4ed8;
}

body.dark-only a:not(.btn):not(.nav-link) {
    color: #60a5fa;
}

body.dark-only a:not(.btn):not(.nav-link):hover {
    color: #93bbfd;
}


/* =========================================
   PAGINATION — Blue Active
   ========================================= */
.pagination .page-item.active .page-link {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

body.dark-only .pagination .page-item.active .page-link {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}


/* =========================================
   PROGRESS BARS
   ========================================= */
.progress-bar {
    background-color: #2563eb;
}


/* =========================================
   BREADCRUMB
   ========================================= */
.breadcrumb .breadcrumb-item a {
    color: #2563eb;
}

.breadcrumb .breadcrumb-item.active {
    color: #78716C;
}

body.dark-only .breadcrumb .breadcrumb-item a {
    color: #60a5fa;
}


/* =========================================
   SCROLLBAR — Subtle & Modern
   ========================================= */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(120, 113, 108, 0.2);
    border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 113, 108, 0.35);
}

body.dark-only ::-webkit-scrollbar-thumb {
    background: rgba(245, 245, 244, 0.1);
}

body.dark-only ::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 245, 244, 0.2);
}


/* =========================================
   SELECTION
   ========================================= */
::selection {
    background: rgba(37, 99, 235, 0.15);
    color: #1e40af;
}

body.dark-only ::selection {
    background: rgba(96, 165, 250, 0.25);
    color: #eff6ff;
}


/* =========================================
   LOGIN PAGE ENHANCEMENTS
   ========================================= */
.login-card {
    background: linear-gradient(135deg, #FAFAF9 0%, #F5F5F4 100%);
}

.login-card .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
    transition: all 0.3s ease;
}

.login-card .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

body.dark-only .login-card {
    background: linear-gradient(135deg, #131c2e 0%, #111827 100%) !important;
}


/* =========================================
   TABLE REFINEMENTS — Light
   ========================================= */
.table thead th {
    background-color: #F5F5F4;
    color: #44403C;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #E7E5E4;
}

.table tbody tr {
    transition: background-color 0.15s ease;
}

.table tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.03);
}

/* Table refinements — Dark */
body.dark-only .table thead th {
    background-color: #111827 !important;
    color: rgba(245, 245, 244, 0.7) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-only .table tbody tr:hover {
    background-color: rgba(96, 165, 250, 0.04) !important;
}


/* =========================================
   DROPDOWN REFINEMENTS
   ========================================= */
.dropdown-menu {
    border: 1px solid rgba(28, 25, 23, 0.08);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(28, 25, 23, 0.1), 0 2px 8px rgba(28, 25, 23, 0.05);
    padding: 6px;
}

.dropdown-item {
    border-radius: 6px;
    padding: 8px 12px;
    transition: background-color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #eff6ff;
    color: #1e40af;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #2563eb;
    color: #fff;
}

body.dark-only .dropdown-menu {
    background-color: #1a2637;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
}

body.dark-only .dropdown-item {
    color: rgba(245, 245, 244, 0.85);
}

body.dark-only .dropdown-item:hover,
body.dark-only .dropdown-item:focus {
    background-color: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
}

body.dark-only .dropdown-item.active,
body.dark-only .dropdown-item:active {
    background-color: #2563eb;
    color: #fff;
}


/* =========================================
   MODAL REFINEMENTS
   ========================================= */
.modal-content {
    border-radius: 14px;
    border: 1px solid rgba(28, 25, 23, 0.08);
    box-shadow: 0 20px 60px rgba(28, 25, 23, 0.12);
}

body.dark-only .modal-content {
    background-color: #1a2637 !important;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

body.dark-only .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-only .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
}


/* =========================================
   ALERT REFINEMENTS
   ========================================= */
.alert-success {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.alert-danger {
    background-color: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
}

.alert-warning {
    background-color: #FFFBEB;
    border-color: #FDE68A;
    color: #92400E;
}

.alert-info {
    background-color: #ECFEFF;
    border-color: #A5F3FC;
    color: #155E75;
}


/* =========================================
   NAV TABS — Refined
   ========================================= */
.nav-tabs .nav-link.active {
    color: #2563eb !important;
    border-bottom-color: #2563eb !important;
}

body.dark-only .nav-tabs .nav-link.active {
    color: #60a5fa !important;
    border-bottom-color: #60a5fa !important;
    background-color: transparent !important;
}

.nav-pills .nav-link.active {
    background-color: #2563eb !important;
    color: #fff !important;
}


/* =========================================
   SWITCH / TOGGLE REFINEMENTS
   ========================================= */
.form-check-input:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

body.dark-only .form-check-input:checked {
    background-color: #60a5fa;
    border-color: #60a5fa;
}


/* =========================================
   TOASTS
   ========================================= */
body.dark-only .toast {
    background-color: #1a2637;
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(245, 245, 244, 0.85);
}


/* =========================================
   TOOLTIP OVERRIDES
   ========================================= */
.tooltip .tooltip-inner {
    background-color: #1C1917;
    border-radius: 6px;
    font-size: 0.8125rem;
}

body.dark-only .tooltip .tooltip-inner {
    background-color: #F5F5F4;
    color: #1C1917;
}