/**
 * Finapp / HRIS PJT I - Responsive Layout & Theme Styles
 * File: assets/css/responsive-layout.css
 */

/* ==========================================================================
   1. GLOBAL THEME VARIABLES & COLOR OVERRIDES
   ========================================================================== */
:root {
    --primary-color: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-light: rgba(37, 99, 235, 0.12);
}

/* Primary Theme Background Overrides */
.bg-primary,
.appHeader.bg-primary,
.sidebar-balance,
.btn-primary,
.badge-primary,
.icon-box.bg-primary,
.progress-bar,
.wallet-card .wallet-footer .item .icon-wrapper.bg-primary,
.wallet-card .wallet-footer .item .icon-wrapper:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info),
.bill-box .img-wrapper .iconbox:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info),
.gradientSection,
.card-block {
    background-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
}

/* Primary Buttons */
.btn-primary {
    border-color: var(--primary-color) !important;
}

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

/* Primary Text & Links */
.text-primary,
a.text-primary,
.action-button-list > li .btn.text-primary {
    color: var(--primary-color) !important;
}

.appHeader.bg-primary {
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.25) !important;
}

/* Card Button & Heading Links */
.wallet-card .balance .right .button {
    color: var(--primary-color) !important;
    background: var(--primary-light) !important;
}

.wallet-card .balance .right .button:hover {
    background: var(--primary-color) !important;
    color: #FFFFFF !important;
}

.section-heading .link {
    color: rgba(37, 99, 235, 0.85) !important;
}

.section-heading .link:hover {
    color: var(--primary-color) !important;
}

/* Mobile Wallet Background Stripe & Safe Area */
.wallet-card-section:before {
    background: var(--primary-color) !important;
}

.appHeader:before,
.appHeader.bg-primary:before {
    background: var(--primary-color) !important;
}

.appBottomMenu .item.active:before {
    background: var(--primary-color) !important;
}

.appBottomMenu .item.active,
.appBottomMenu .item.active .icon,
.appBottomMenu .item.active ion-icon,
.appBottomMenu .item.active strong {
    color: var(--primary-color) !important;
}

.appBottomMenu .item .action-button {
    background: var(--primary-color) !important;
}

.modal-icon {
    color: var(--primary-color) !important;
}

/* Page Loader */
#loader {
    background-color: var(--primary-color) !important;
    background: var(--primary-color) !important;
}

#loader .loading-icon {
    filter: none !important;
}

.form-check-input:checked,
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}


/* ==========================================================================
   2. RESPONSIVE ADAPTIVE LAYOUT (Screens >= 992px)
   ========================================================================== */
@media (min-width: 992px) {
    :root {
        --responsive-sidebar-width: 270px;
        --responsive-header-height: 56px;
        --responsive-gap: 20px;
        --bg-responsive: #F2F3F8;
    }

    body {
        background-color: var(--bg-responsive) !important;
        font-family: "Poppins", sans-serif;
    }

    /* --- App Header on Large Screens --- */
    .appHeader {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--responsive-header-height) !important;
        position: fixed !important;
        top: 0 !important;
        z-index: 1040 !important;
        padding: 0 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 2px 10px rgba(37, 99, 235, 0.25) !important;
    }

    .appHeader:before {
        left: 0 !important;
        width: 100% !important;
    }

    .appHeader .left {
        left: 24px !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    .appHeader .header-brand-responsive {
        display: flex !important;
        align-items: center !important;
        width: calc(var(--responsive-sidebar-width) - 48px) !important;
        justify-content: space-between !important;
    }

    .appHeader .header-brand-responsive .logo {
        max-height: 28px;
        width: auto;
    }

    .appHeader .headerButton.sidebar-toggle-responsive {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #FFFFFF !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 32px !important;
        cursor: pointer !important;
        text-decoration: none !important;
        padding: 0 !important;
        margin-left: auto !important;
        transition: opacity 0.2s ease, transform 0.2s ease !important;
    }

    .appHeader .headerButton.sidebar-toggle-responsive ion-icon {
        font-size: 32px !important;
    }

    .appHeader .headerButton.sidebar-toggle-responsive:hover {
        background: transparent !important;
        color: #FFFFFF !important;
        opacity: 0.8 !important;
        transform: scale(1.08) !important;
    }

    .appHeader .headerButton.sidebar-toggle-responsive:active {
        transform: scale(0.92) !important;
    }

    /* --- Permanent Docked Left Sidebar --- */
    #sidebarPanel {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: fixed !important;
        left: 0 !important;
        top: var(--responsive-header-height) !important;
        bottom: 0 !important;
        width: var(--responsive-sidebar-width) !important;
        height: calc(100vh - var(--responsive-header-height)) !important;
        z-index: 1030 !important;
        pointer-events: auto !important;
        background: #FFFFFF !important;
        border-right: 1px solid #E2E2EC !important;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(0) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #sidebarPanel.fade {
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #sidebarPanel .modal-dialog {
        position: static !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        transition: none !important;
        max-width: 100% !important;
        height: auto !important;
        z-index: auto !important;
    }

    #sidebarPanel .modal-content {
        width: 100% !important;
        height: auto !important;
        border-radius: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    #sidebarPanel::-webkit-scrollbar {
        width: 4px;
    }

    #sidebarPanel::-webkit-scrollbar-thumb {
        background: #E2E2EC;
        border-radius: 4px;
    }

    #sidebarPanel .modal-body {
        width: 100% !important;
        margin-bottom: 0 !important;
        padding: 0 0 40px !important;
    }

    /* Sidebar Profile Box */
    #sidebarPanel .profileBox {
        padding: 12px 16px !important;
        display: flex;
        align-items: center;
    }

    #sidebarPanel .profileBox .image-wrapper img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        object-fit: cover;
    }

    #sidebarPanel .sidebar-close {
        display: none !important;
    }

    /* Responsive Sidebar Collapsed / Hidden State */
    body.sidebar-hidden #sidebarPanel {
        transform: translateX(-100%) !important;
    }

    /* --- Main App Capsule Container --- */
    #appCapsule {
        margin-left: var(--responsive-sidebar-width) !important;
        width: calc(100% - var(--responsive-sidebar-width)) !important;
        padding-top: calc(var(--responsive-header-height) + 24px) !important;
        padding-bottom: 48px !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    body.sidebar-hidden #appCapsule {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 36px !important;
        padding-right: 36px !important;
    }

    /* --- Custom Modern Scrollbars --- */
    html, body {
        overflow-y: auto !important;
        scrollbar-width: auto;
    }

    ::-webkit-scrollbar {
        width: 10px !important;
        height: 10px !important;
    }

    ::-webkit-scrollbar-track {
        background: #ECECF2 !important;
    }

    ::-webkit-scrollbar-thumb {
        background: #B4B4CC !important;
        border-radius: 6px !important;
        border: 2px solid #ECECF2 !important;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #8888A8 !important;
    }

    /* --- Cards & Dashboard Components --- */
    .wallet-card-section:before {
        display: none !important;
    }

    .wallet-card-section {
        padding-top: 0 !important;
    }

    .wallet-card,
    .stat-box,
    .transactions .item,
    .goals .item,
    .bill-box,
    .blog-card {
        border: 1px solid #E6E6F0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
        border-radius: 14px !important;
        background: #FFFFFF;
    }

    .section-heading .title {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #27173E !important;
    }

    /* Hide Mobile Bottom Menu */
    .appBottomMenu {
        display: none !important;
    }

    /* --- Modal & Action Sheets on Large Screens --- */
    .modal.action-sheet .modal-dialog {
        max-width: 480px !important;
        margin: 3.5rem auto !important;
        transform: none !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 0 !important;
    }

    .modal.action-sheet .modal-content {
        border-radius: 16px !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid #DCDCE9 !important;
        padding: 0 !important;
        overflow: hidden;
    }

    .modal.action-sheet .modal-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 24px !important;
        border-bottom: 1px solid #DCDCE9 !important;
        background: #FAFAFC;
    }

    .modal.action-sheet .modal-header .modal-title {
        text-align: left !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #27173E !important;
        padding: 0 !important;
    }

    .modal.action-sheet .modal-body {
        padding: 24px !important;
    }

    .modal.action-sheet .action-sheet-content {
        max-height: none !important;
        padding: 0 !important;
    }

    /* App Footer on Responsive Layout */
    .appFooter {
        background: #FFFFFF;
        border: 1px solid #E6E6F0;
        border-radius: 14px;
        padding: 20px;
        margin-top: 24px;
    }

    /* --- Header Profile Dropdown --- */
    .header-profile-dropdown .dropdown-toggle::after {
        display: none !important;
    }

    .header-profile-dropdown .dropdown-menu {
        min-width: 250px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        border: 1px solid #E6E6F0 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
        overflow: hidden !important;
        margin-top: 12px !important;
        background: #FFFFFF !important;
    }

    .header-profile-dropdown .dropdown-profile-header {
        background: #FAFAFC;
        padding: 16px;
        border-bottom: 1px solid #ECECF2;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .header-profile-dropdown .dropdown-profile-header img {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        object-fit: cover;
    }

    .header-profile-dropdown .dropdown-profile-header .name {
        font-size: 15px;
        font-weight: 600;
        color: #27173E;
        margin: 0;
        line-height: 1.2;
    }

    .header-profile-dropdown .dropdown-profile-header .kopeg {
        font-size: 12px;
        color: #717579;
        margin: 3px 0 0;
    }

    .header-profile-dropdown .dropdown-item {
        padding: 12px 18px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #27173E !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }

    .header-profile-dropdown .dropdown-item ion-icon {
        font-size: 20px !important;
    }

    .header-profile-dropdown .dropdown-item:hover {
        background: #F4F4F8 !important;
    }

    .header-profile-dropdown .dropdown-item.text-danger:hover {
        background: #FFF2F4 !important;
        color: #FF396F !important;
    }

    /* --- Header Notification Dropdown --- */
    .header-notification-dropdown .dropdown-toggle::after {
        display: none !important;
    }

    .header-notification-dropdown .notification-dropdown-menu {
        width: 320px !important;
        max-width: 90vw !important;
        padding: 0 !important;
        border-radius: 12px !important;
        border: 1px solid #E6E6F0 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
        overflow: hidden !important;
        margin-top: 10px !important;
        background: #FFFFFF !important;
    }

    .header-notification-dropdown .dropdown-notification-header {
        background: #FAFAFC;
        padding: 14px 18px;
        border-bottom: 1px solid #ECECF2;
    }

    .header-notification-dropdown .dropdown-notification-header h6 {
        font-size: 15px;
        font-weight: 600;
        color: #27173E;
    }

    .header-notification-dropdown .dropdown-notification-list {
        max-height: 360px;
        overflow-y: auto;
    }

    .header-notification-dropdown .dropdown-notification-list::-webkit-scrollbar {
        width: 4px;
    }

    .header-notification-dropdown .dropdown-notification-list::-webkit-scrollbar-thumb {
        background: #E2E2EC;
        border-radius: 4px;
    }

    .header-notification-dropdown .dropdown-notification-item {
        transition: background 0.15s ease !important;
    }

    .header-notification-dropdown .dropdown-notification-item:hover {
        background: #F8F9FD !important;
    }

    .header-notification-dropdown .dropdown-notification-footer {
        background: #FAFAFC;
        border-top: 1px solid #ECECF2;
    }
}