/* =========================================================
   SALIHIN SPS Portal Theme Layer
   Clean Global Theme Tokens + Layout
   File: assets/drezoc/css/sps-theme.css

   Purpose:
   - Own global application colours, topbar, sidebar, forms, tables.
   - Do NOT style dashboard module/card layout here.
   - Dashboard-specific glass UI is handled in sps-dashboard.css.
========================================================= */

/* =========================================================
   TOKENS
========================================================= */

:root,
html[data-bs-theme="light"] {
    color-scheme: light;

    --sps-body-bg: #f4f9fd;
    --sps-page-bg: #f7fbff;

    --sps-surface: rgba(255, 255, 255, .78);
    --sps-surface-solid: #ffffff;
    --sps-surface-soft: #eef7ff;
    --sps-surface-muted: #f4f8fc;

    --sps-border: rgba(181, 211, 235, .72);
    --sps-border-soft: rgba(181, 211, 235, .42);

    --sps-text: #16233d;
    --sps-heading: #14203a;
    --sps-muted: #566578;
    --sps-link: #2866ca;

    --sps-blue: #2866ca;
    --sps-cyan: #18c5d2;
    --sps-green: #21b957;
    --sps-red: #e85f78;

    --sps-gradient: linear-gradient(135deg, #18c5d2 0%, #2866ca 100%);
    --sps-shadow: 0 14px 34px rgba(28, 78, 136, .10);
    --sps-shadow-hover: 0 20px 46px rgba(28, 78, 136, .16);

    --sps-sidebar-bg:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .16), transparent 24%),
        linear-gradient(180deg, #315fb1 0%, #22b7ca 58%, #63d8cf 100%);
    --sps-sidebar-border: rgba(255, 255, 255, .18);
    --sps-sidebar-text: rgba(255, 255, 255, .92);
    --sps-sidebar-muted: rgba(255, 255, 255, .60);
    --sps-sidebar-active: rgba(255, 255, 255, .18);
    --sps-sidebar-active-border: rgba(255, 255, 255, .30);
}

html[data-bs-theme="dark"] {
    color-scheme: dark;

    --sps-body-bg: #0d141d;
    --sps-page-bg: #111923;

    --sps-surface: rgba(24, 32, 43, .78);
    --sps-surface-solid: #1b2430;
    --sps-surface-soft: #202b38;
    --sps-surface-muted: #17202b;

    --sps-border: rgba(255, 255, 255, .10);
    --sps-border-soft: rgba(255, 255, 255, .07);

    --sps-text: #dfe8f3;
    --sps-heading: #f4f8fc;
    --sps-muted: #9aa8b8;
    --sps-link: #7bb7ff;

    --sps-blue: #3d8cff;
    --sps-cyan: #23d1df;
    --sps-green: #35cb72;
    --sps-red: #ff7890;

    --sps-gradient: linear-gradient(135deg, #19b9c8 0%, #3578e5 100%);
    --sps-shadow: 0 18px 42px rgba(0, 0, 0, .28);
    --sps-shadow-hover: 0 24px 54px rgba(0, 0, 0, .40);

    --sps-sidebar-bg:
        radial-gradient(circle at 20% 0%, rgba(35, 209, 223, .10), transparent 24%),
        linear-gradient(180deg, #111827 0%, #172333 50%, #112d35 100%);
    --sps-sidebar-border: rgba(255, 255, 255, .09);
    --sps-sidebar-text: rgba(244, 248, 252, .90);
    --sps-sidebar-muted: rgba(244, 248, 252, .48);
    --sps-sidebar-active: rgba(35, 209, 223, .14);
    --sps-sidebar-active-border: rgba(35, 209, 223, .28);
}

/* =========================================================
   BASE LAYOUT
========================================================= */

html,
body {
    background: var(--sps-body-bg) !important;
    color: var(--sps-text) !important;
}

body,
.page-content,
.content-page,
.container-fluid {
    color: var(--sps-text) !important;
}

.page-content {
    background:
        radial-gradient(circle at 8% 8%, rgba(24, 197, 210, .07), transparent 24%),
        radial-gradient(circle at 92% 0%, rgba(40, 102, 202, .07), transparent 26%),
        var(--sps-body-bg) !important;
}

a {
    color: var(--sps-link);
}

hr {
    border-color: var(--sps-border) !important;
}

::selection {
    background: rgba(24, 197, 210, .22);
}

/* =========================================================
   TOPBAR
========================================================= */

.navbar-custom {
    background: rgba(255, 255, 255, .78) !important;
    border-bottom: 1px solid var(--sps-border) !important;
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

html[data-bs-theme="dark"] .navbar-custom {
    background: rgba(17, 24, 35, .78) !important;
}

.navbar-custom .nav-link,
.navbar-custom .button-toggle-menu,
.navbar-custom .nav-user {
    color: var(--sps-text) !important;
}

.navbar-custom .nav-link:hover,
.navbar-custom .button-toggle-menu:hover {
    color: var(--sps-blue) !important;
}

/* =========================================================
   SIDEBAR
========================================================= */

.main-menu {
    background: var(--sps-sidebar-bg) !important;
    border-right: 1px solid var(--sps-sidebar-border) !important;
    box-shadow: 10px 0 34px rgba(0, 0, 0, .14) !important;
}

.main-menu .logo-box {
    background: transparent !important;
    border-bottom: 0 !important;
}

.main-menu .menu-title {
    color: var(--sps-sidebar-muted) !important;
    font-weight: 850;
    letter-spacing: .08em;
}

.main-menu .menu-link {
    color: var(--sps-sidebar-text) !important;
    border: 1px solid transparent;
    border-radius: 12px;
    margin-inline: 8px;
}

.main-menu .menu-icon,
.main-menu .menu-text,
.main-menu .menu-arrow {
    color: inherit !important;
}

.main-menu .menu-link:hover,
.main-menu .menu-link:focus,
.main-menu .menu-link.active,
.main-menu .menu-link[aria-current="page"] {
    background: var(--sps-sidebar-active) !important;
    border-color: var(--sps-sidebar-active-border) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
    color: var(--sps-heading);
}

.page-content .text-muted {
    color: var(--sps-muted) !important;
}

.sps-section-kicker,
.sps-announcement-meta,
[class*="sps-"][class*="kicker"] {
    color: var(--sps-cyan);
}

/* =========================================================
   BRAND ICONS
========================================================= */

.sps-dashboard-icon,
.sps-feature-icon,
.sps-module-icon,
.sps-announcement-icon,
.sps-admin-dashboard-icon,
.sps-admin-module-icon,
.sps-service-title-icon,
.sps-service-dept-icon,
.sps-eatt-title-icon,
.sps-staff-avatar,
.sps-crm-header-icon,
.sps-crm-action-icon,
.sps-hr-title-icon,
.sps-hr-module-icon,
.sps-sop-title-icon,
.sps-mk-title-icon,
.sps-report-title-icon,
.sps-staff-title-icon,
.sps-alumni-title-icon,
.sps-account-title-icon,
.sps-ai-title-icon,
.sps-ai-hub-title-icon {
    background: var(--sps-gradient) !important;
    color: #ffffff !important;
}

[class^="sps-"][class*="-icon"] svg,
[class*=" sps-"][class*="-icon"] svg,
.sps-staff-avatar svg {
    color: currentColor !important;
    stroke: currentColor !important;
}

/* =========================================================
   FORMS
========================================================= */

.form-control,
.form-select,
.input-group-text,
.page-content input,
.page-content select,
.page-content textarea {
    background-color: var(--sps-surface-solid);
    border-color: var(--sps-border);
    color: var(--sps-text);
}

.form-control::placeholder,
.page-content input::placeholder,
.page-content textarea::placeholder {
    color: var(--sps-muted);
}

.form-control:focus,
.form-select:focus,
.page-content input:focus,
.page-content select:focus,
.page-content textarea:focus {
    border-color: rgba(24, 153, 220, .58) !important;
    box-shadow:
        0 0 0 4px rgba(24, 197, 210, .10),
        0 10px 22px rgba(28, 78, 136, .08) !important;
}

html[data-bs-theme="dark"] input:disabled,
html[data-bs-theme="dark"] select:disabled,
html[data-bs-theme="dark"] textarea:disabled,
html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-select:disabled {
    background-color: #26313f !important;
    color: #8794a5 !important;
}

/* =========================================================
   TABLES / DATATABLES
========================================================= */

.table,
table {
    color: var(--sps-text);
    border-color: var(--sps-border);
}

.table > :not(caption) > * > *,
table > :not(caption) > * > * {
    color: var(--sps-text);
    border-color: var(--sps-border);
}

html[data-bs-theme="dark"] table thead th,
html[data-bs-theme="dark"] .table thead th,
html[data-bs-theme="dark"] table.dataTable thead th {
    background-color: #202a36 !important;
    color: #f4f8fc !important;
    border-color: var(--sps-border) !important;
}

html[data-bs-theme="dark"] table tbody td,
html[data-bs-theme="dark"] .table tbody td,
html[data-bs-theme="dark"] table.dataTable tbody td {
    background-color: #1d242e !important;
    color: #dfe8f3 !important;
    border-color: var(--sps-border) !important;
}

.dataTables_wrapper,
.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
    color: var(--sps-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--sps-text) !important;
    border-color: var(--sps-border) !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #1d242e !important;
}

html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--sps-gradient) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* =========================================================
   BOOTSTRAP COMPONENTS
   Keep global components stable. SPS dashboard cards are handled separately.
========================================================= */

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group-item {
    background-color: var(--sps-surface-solid) !important;
    border-color: var(--sps-border) !important;
    color: var(--sps-text) !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
    background-color: var(--sps-surface-soft) !important;
    border-color: var(--sps-border) !important;
    color: var(--sps-heading) !important;
}

.dropdown-item {
    color: var(--sps-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background-color: var(--sps-surface-soft) !important;
    color: var(--sps-heading) !important;
}

/* =========================================================
   FOOTER
========================================================= */

.footer,
footer {
    background: var(--sps-surface-solid) !important;
    border-top: 1px solid var(--sps-border) !important;
    color: var(--sps-muted) !important;
}

/* =========================================================
   DARK MODE FINE TUNING
========================================================= */

html[data-bs-theme="dark"] img {
    opacity: .96;
}

html[data-bs-theme="dark"] .logo-light img,
html[data-bs-theme="dark"] .logo-dark img,
html[data-bs-theme="dark"] .nav-user img {
    opacity: 1;
}

html[data-bs-theme="dark"] .bg-white {
    background-color: var(--sps-surface-solid) !important;
}

html[data-bs-theme="dark"] .text-dark {
    color: var(--sps-heading) !important;
}

html[data-bs-theme="dark"] .text-muted {
    color: var(--sps-muted) !important;
}

html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-start,
html[data-bs-theme="dark"] .border-end {
    border-color: var(--sps-border) !important;
}

/* =========================================================
   SPS THEME TOGGLE CONTROL
========================================================= */

#theme-mode,
#light-dark-mode,
.sps-theme-toggle-button,
[data-sps-theme-toggle] {
    cursor: pointer;
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   CI3 REFRACTOR LAYOUT HOTFIX
   Purpose:
   - Keep sidebar fixed/full height when page scrolls.
   - Prevent sidebar gradient from ending halfway down the page.
   - Preserve mobile/offcanvas behaviour from the original Drezoc template.
   Added: 2026-07-07
========================================================= */

html,
body {
    min-height: 100%;
}

body {
    overflow-x: hidden;
}

.layout-wrapper {
    min-height: 100vh;
}

.main-menu {
    background-attachment: fixed !important;
}

.main-menu > [data-simplebar],
.main-menu .simplebar-wrapper,
.main-menu .simplebar-mask,
.main-menu .simplebar-offset,
.main-menu .simplebar-content-wrapper {
    max-height: calc(100vh - var(--bs-topbar-height));
}

.main-menu .simplebar-content-wrapper {
    overflow-x: hidden !important;
}

@media (min-width: 1201px) {
    .layout-wrapper {
        display: block !important;
        width: 100%;
    }

    .main-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: var(--bs-sidebar-width) !important;
        min-width: var(--bs-sidebar-width) !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        margin-left: 0 !important;
        opacity: 1 !important;
        overflow: hidden !important;
    }

    .main-menu [data-simplebar] {
        height: calc(100vh - var(--bs-topbar-height)) !important;
    }

    .page-content {
        margin-left: var(--bs-sidebar-width) !important;
        width: calc(100% - var(--bs-sidebar-width)) !important;
        min-height: 100vh !important;
    }

    html.sidebar-enable:not([data-sidebar-size="full"]) .main-menu {
        width: var(--bs-sidebar-width-sm) !important;
        min-width: var(--bs-sidebar-width-sm) !important;
    }

    html.sidebar-enable:not([data-sidebar-size="full"]) .page-content {
        margin-left: var(--bs-sidebar-width-sm) !important;
        width: calc(100% - var(--bs-sidebar-width-sm)) !important;
    }

    html[data-sidebar-size="full"] .page-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 1200px) {
    .layout-wrapper {
        display: block !important;
        width: 100%;
    }

    .main-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: var(--bs-sidebar-width) !important;
        min-width: var(--bs-sidebar-width) !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        margin-left: calc(var(--bs-sidebar-width) * -1) !important;
        opacity: 0 !important;
        overflow: hidden !important;
        z-index: 1055 !important;
    }

    html.sidebar-enable .main-menu {
        margin-left: 0 !important;
        opacity: 1 !important;
    }

    .page-content {
        margin-left: 0 !important;
        width: 100% !important;
        min-height: 100vh !important;
    }

    .navbar-custom {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }
}