/*
 * Southern Mindanao Colleges brand overrides.
 * Applied after adminlte.min.css in resources/views/vendor/adminlte/master.blade.php.
 * Primary: #0E6B2C (SMC seal forest green). Accent: #1E8A3F.
 */

:root {
    --smc-green: #0E6B2C;
    --smc-green-2: #0B5624;
    --smc-green-hover: #1E8A3F;
    --smc-green-dark: #084018;
    --smc-gold: #F2C230;
}

/* -------------------------------------------------------------------------
 * Sidebar body background
 * AdminLTE paints the sidebar body via [class*='sidebar-dark-'].
 * ------------------------------------------------------------------------- */
[class*='sidebar-dark-'],
.main-sidebar.sidebar-dark-primary,
.sidebar-dark-primary {
    background-color: var(--smc-green) !important;
}

/* Brand (logo) block at top of sidebar */
.main-sidebar .brand-link,
.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]),
.layout-sm-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]),
.layout-md-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]),
.layout-lg-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]),
.layout-xl-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]) {
    background-color: var(--smc-green-2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.main-sidebar .brand-link .brand-text {
    color: #ffffff !important;
}

/* Sidebar user panel divider */
.main-sidebar .user-panel {
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

/* Active menu items (override AdminLTE's #007bff) */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--smc-green-hover) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.sidebar-dark-primary .nav-sidebar.nav-legacy > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar.nav-legacy > .nav-item > .nav-link.active {
    border-color: var(--smc-green-hover) !important;
}

/* Hover state */
[class*='sidebar-dark-'] .nav-sidebar > .nav-item > .nav-link:hover,
[class*='sidebar-dark-'] .nav-sidebar > .nav-item.menu-open > .nav-link,
[class*='sidebar-dark-'] .nav-sidebar > .nav-item:hover > .nav-link,
[class*='sidebar-dark-'] .nav-sidebar > .nav-item > .nav-link:focus {
    background-color: rgba(0, 0, 0, 0.15) !important;
    color: #ffffff !important;
}

[class*='sidebar-dark-'] .nav-treeview > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}

/* Sidebar search box */
.main-sidebar .form-control-sidebar {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}
.main-sidebar .form-control-sidebar::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* -------------------------------------------------------------------------
 * App-wide primary → SMC green
 * ------------------------------------------------------------------------- */

/* Buttons */
.btn-primary,
.btn-flat.btn-primary {
    background-color: var(--smc-green) !important;
    border-color: var(--smc-green) !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-flat.btn-primary:hover,
.btn-flat.btn-primary:focus {
    background-color: var(--smc-green-hover) !important;
    border-color: var(--smc-green-hover) !important;
    color: #ffffff !important;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--smc-green-dark) !important;
    border-color: var(--smc-green-dark) !important;
    color: #ffffff !important;
}
.btn-outline-primary {
    color: var(--smc-green) !important;
    border-color: var(--smc-green) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--smc-green) !important;
    border-color: var(--smc-green) !important;
    color: #ffffff !important;
}

/* Cards with card-primary outline (used on login form) */
.card-primary.card-outline {
    border-top: 3px solid var(--smc-green) !important;
}
.card-primary:not(.card-outline) > .card-header {
    background-color: var(--smc-green) !important;
    border-bottom-color: var(--smc-green-2) !important;
    color: #ffffff !important;
}

/* Links, badges, text-primary */
a { color: var(--smc-green); }
a:hover, a:focus { color: var(--smc-green-hover); }
.text-primary { color: var(--smc-green) !important; }
.bg-primary, .badge-primary { background-color: var(--smc-green) !important; }

/* Nav-pills (used inside cards / tabs) */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--smc-green) !important;
    color: #ffffff !important;
}

/* Form focus ring */
.form-control:focus {
    border-color: var(--smc-green-hover) !important;
    box-shadow: 0 0 0 0.2rem rgba(14, 107, 44, 0.25) !important;
}

/* Icheck-primary (remember-me checkbox on login) */
.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type=hidden] + label::before {
    background-color: var(--smc-green) !important;
    border-color: var(--smc-green) !important;
}

/* =========================================================================
 * DARK MODE
 * Activated by <html data-theme="dark">. Sidebar stays SMC green (brand),
 * but the rest of the chrome switches to a neutral dark surface set.
 * ========================================================================= */

:root {
    /* Light-mode surface tokens (defaults - AdminLTE stays visually the same) */
    --smc-surface: #f4f6f9;
    --smc-surface-card: #ffffff;
    --smc-surface-navbar: #ffffff;
    --smc-surface-alt: #f8f9fa;
    --smc-border: #dee2e6;
    --smc-border-strong: #ced4da;
    --smc-text: #212529;
    --smc-text-muted: #6c757d;
    --smc-input-bg: #ffffff;
    --smc-input-text: #495057;
    --smc-shadow: rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] {
    --smc-surface: #1a1d21;
    --smc-surface-card: #24272b;
    --smc-surface-navbar: #24272b;
    --smc-surface-alt: #2b2f34;
    --smc-border: #3a3f45;
    --smc-border-strong: #4a4f55;
    --smc-text: #e6e8ea;
    --smc-text-muted: #a4aab0;
    --smc-input-bg: #2b2f34;
    --smc-input-text: #e6e8ea;
    --smc-shadow: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

/* -----------------------------------------------------------------
 * Dark: page shell
 * ----------------------------------------------------------------- */
html[data-theme="dark"] body,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .main-footer {
    background-color: var(--smc-surface) !important;
    color: var(--smc-text) !important;
}

html[data-theme="dark"] .main-footer {
    border-top-color: var(--smc-border) !important;
}

/* -----------------------------------------------------------------
 * Dark: navbar
 * ----------------------------------------------------------------- */
html[data-theme="dark"] .main-header.navbar.navbar-white,
html[data-theme="dark"] .main-header.navbar {
    background-color: var(--smc-surface-navbar) !important;
    border-bottom-color: var(--smc-border) !important;
}
html[data-theme="dark"] .main-header.navbar .nav-link,
html[data-theme="dark"] .main-header.navbar .navbar-nav .nav-link {
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .main-header.navbar .nav-link:hover {
    color: var(--smc-green-hover) !important;
}

/* -----------------------------------------------------------------
 * Dark: content headers / breadcrumbs
 * ----------------------------------------------------------------- */
html[data-theme="dark"] .content-header h1,
html[data-theme="dark"] .content-header h2,
html[data-theme="dark"] .content-header h3,
html[data-theme="dark"] .breadcrumb {
    color: var(--smc-text) !important;
    background: transparent !important;
}
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before,
html[data-theme="dark"] .breadcrumb-item.active {
    color: var(--smc-text-muted) !important;
}

/* -----------------------------------------------------------------
 * Dark: cards
 * ----------------------------------------------------------------- */
html[data-theme="dark"] .card {
    background-color: var(--smc-surface-card) !important;
    color: var(--smc-text) !important;
    border-color: var(--smc-border) !important;
    box-shadow: 0 1px 3px var(--smc-shadow) !important;
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: var(--smc-surface-card) !important;
    border-color: var(--smc-border) !important;
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-subtitle {
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .card.card-outline {
    border-top-width: 3px !important;
}

/* -----------------------------------------------------------------
 * Dark: tables
 * ----------------------------------------------------------------- */
html[data-theme="dark"] .table {
    color: var(--smc-text) !important;
    background-color: transparent !important;
}
html[data-theme="dark"] .table thead th {
    background-color: var(--smc-surface-alt) !important;
    color: var(--smc-text) !important;
    border-color: var(--smc-border) !important;
}
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
    border-color: var(--smc-border) !important;
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}
html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered td,
html[data-theme="dark"] .table-bordered th {
    border-color: var(--smc-border) !important;
}

/* DataTables shell */
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate,
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .paginate_button {
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .page-link {
    background-color: var(--smc-surface-card) !important;
    border-color: var(--smc-border) !important;
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--smc-green) !important;
    border-color: var(--smc-green) !important;
    color: #fff !important;
}
html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--smc-surface-alt) !important;
    color: var(--smc-text-muted) !important;
}

/* -----------------------------------------------------------------
 * Dark: forms
 * ----------------------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select {
    background-color: var(--smc-input-bg) !important;
    color: var(--smc-input-text) !important;
    border-color: var(--smc-border-strong) !important;
}
html[data-theme="dark"] .form-control::placeholder {
    color: var(--smc-text-muted) !important;
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--smc-surface-alt) !important;
    color: var(--smc-text-muted) !important;
}
html[data-theme="dark"] .input-group-text {
    background-color: var(--smc-surface-alt) !important;
    color: var(--smc-text) !important;
    border-color: var(--smc-border-strong) !important;
}
html[data-theme="dark"] label,
html[data-theme="dark"] .col-form-label {
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .form-text {
    color: var(--smc-text-muted) !important;
}
html[data-theme="dark"] .custom-control-label,
html[data-theme="dark"] .form-check-label {
    color: var(--smc-text) !important;
}

/* -----------------------------------------------------------------
 * Dark: modals, dropdowns, popovers, tooltips
 * ----------------------------------------------------------------- */
html[data-theme="dark"] .modal-content {
    background-color: var(--smc-surface-card) !important;
    color: var(--smc-text) !important;
    border-color: var(--smc-border) !important;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--smc-border) !important;
}
html[data-theme="dark"] .modal-header .close {
    color: var(--smc-text) !important;
    text-shadow: none !important;
}
html[data-theme="dark"] .modal-backdrop.show { opacity: .7; }

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--smc-surface-card) !important;
    border-color: var(--smc-border) !important;
    color: var(--smc-text) !important;
    box-shadow: 0 6px 18px var(--smc-shadow) !important;
}
html[data-theme="dark"] .dropdown-item {
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--smc-border) !important;
}

html[data-theme="dark"] .popover,
html[data-theme="dark"] .tooltip-inner {
    background-color: var(--smc-surface-card) !important;
    color: var(--smc-text) !important;
    border-color: var(--smc-border) !important;
}

/* -----------------------------------------------------------------
 * Dark: alerts / callouts / list groups / badges
 * ----------------------------------------------------------------- */
html[data-theme="dark"] .list-group-item {
    background-color: var(--smc-surface-card) !important;
    color: var(--smc-text) !important;
    border-color: var(--smc-border) !important;
}
html[data-theme="dark"] .alert {
    border-color: var(--smc-border) !important;
}
html[data-theme="dark"] .callout {
    background-color: var(--smc-surface-card) !important;
    color: var(--smc-text) !important;
}
html[data-theme="dark"] hr {
    border-top-color: var(--smc-border) !important;
}

/* -----------------------------------------------------------------
 * Dark: nav-tabs
 * ----------------------------------------------------------------- */
html[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--smc-border) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--smc-text-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
}
html[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--smc-border) !important;
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--smc-surface-card) !important;
    border-color: var(--smc-border) var(--smc-border) var(--smc-surface-card) !important;
    color: var(--smc-text) !important;
}

/* -----------------------------------------------------------------
 * Dark: sidebar (keep green brand, but a touch deeper for contrast)
 * ----------------------------------------------------------------- */
html[data-theme="dark"] .main-sidebar {
    background: linear-gradient(180deg, #052110 0%, #084018 40%, #0B5624 100%) !important;
}

/* -----------------------------------------------------------------
 * Dark: info-box (AdminLTE filter cards)
 * ----------------------------------------------------------------- */
html[data-theme="dark"] .info-box {
    background-color: var(--smc-surface-card) !important;
    color: var(--smc-text) !important;
    box-shadow: 0 1px 3px var(--smc-shadow) !important;
}
html[data-theme="dark"] .info-box .info-box-text,
html[data-theme="dark"] .info-box .info-box-number,
html[data-theme="dark"] .info-box .progress-description {
    color: var(--smc-text) !important;
}
/* info-box-icon.bg-* variants keep their saturated colors — they're semantic badges */

/* Small-box variants (dashboard tiles) */
html[data-theme="dark"] .small-box > .inner {
    color: #ffffff;
}
html[data-theme="dark"] .small-box > .small-box-footer {
    color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(0, 0, 0, 0.25) !important;
}

/* -----------------------------------------------------------------
 * Dark: vue-tables-2 (.VueTables)
 * ----------------------------------------------------------------- */
html[data-theme="dark"] .VueTables,
html[data-theme="dark"] .VueTables__table {
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .VueTables__table {
    background-color: var(--smc-surface-card) !important;
}
html[data-theme="dark"] .VueTables__table thead th {
    background-color: var(--smc-surface-alt) !important;
    color: var(--smc-text) !important;
    border-color: var(--smc-border) !important;
}
html[data-theme="dark"] .VueTables__table tbody tr {
    background-color: var(--smc-surface-card) !important;
}
html[data-theme="dark"] .VueTables__table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .VueTables__table td {
    border-color: var(--smc-border) !important;
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .VueTables__search-field label,
html[data-theme="dark"] .VueTables__limit-field label,
html[data-theme="dark"] .VueTables__wrapper label {
    color: var(--smc-text) !important;
}
html[data-theme="dark"] .VueTables__search input,
html[data-theme="dark"] .VueTables__limit select {
    background-color: var(--smc-input-bg) !important;
    color: var(--smc-input-text) !important;
    border-color: var(--smc-border-strong) !important;
}
html[data-theme="dark"] .VuePagination__count {
    color: var(--smc-text-muted) !important;
}

/* -----------------------------------------------------------------
 * Filter-active outline (Vue components use #007bff — recolor to brand)
 * ----------------------------------------------------------------- */
.admission-filter-card.filter-active {
    outline-color: var(--smc-green) !important;
}
html[data-theme="dark"] .admission-filter-card.filter-active {
    outline-color: var(--smc-green-hover) !important;
}

/* -----------------------------------------------------------------
 * Theme toggle icon spacing
 * ----------------------------------------------------------------- */
#smc-theme-toggle { cursor: pointer; }
#smc-theme-toggle i { font-size: 1.05rem; }