/* ==========================================================================
   Forstaff Front-End 13 - Core UI & Independent Design System Stylesheet
   File: public/assets/css/forstaff.css
   
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   01. DESIGN TOKENS & BASE FOUNDATION (--fs-* System Colors, Badges, Events)
   02. APPLICATION LAYOUT SHELL & TOP HEADER (.fs-layout-page, .fs-aside, etc.)
   03. SIDEBAR NAVIGATION & CUSTOM SCROLLBAR (.fs-menu, .fs-menu-link)
   04. SEGMENTED SWITCHERS & VIEW CONTROLS (.fs-switch-group, .fs-view-switcher)
   05. STANDALONE TYPOGRAPHY UTILITIES (.fs-1 - .fs-10, .fs-fw-*, .fs-text-*)
   06. STANDALONE BADGES & STATUS TAGS (.fs-badge, .badge-forstaff, .fs-badge-list)
   07. STANDALONE CARD CONTAINERS (.fs-card, .fs-card-header, .fs-card-toolbar)
   08. STANDALONE DATA TABLES (.fs-table, .fs-table-dashed, .fs-table-hover)
   09. STANDALONE BUTTONS & ICON CONTROLS (.fs-btn, .fs-btn-icon)
   10. STANDALONE FORM INPUTS & GROUPS (.fs-form-group, .fs-input, .fs-select)
   11. STANDALONE FILE UPLOAD COMPONENT (.fs-file-upload, .fs-file-input)
   12. STANDALONE AVATAR & USER SYMBOLS (.fs-avatar, .fs-avatar-circle)
   13. STANDALONE MODALS (.fs-modal-header, .fs-modal-body, .fs-modal-footer)
   14. STANDALONE BREADCRUMBS (.fs-breadcrumb, .fs-breadcrumb-item)
   15. STANDALONE UTILITIES & SPACING (.col-xl-2-4, .fs-sticky-actions, footer)
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS & BASE FOUNDATION
   ========================================================================== */
:root {
    /* ==========================================================================
       01. Core Brand & System Color Tokens (Pure HEX)
       ========================================================================== */
    --fs-primary: #194A97;
    --fs-primary-hover: #133B78;
    --fs-primary-active: #0F2D5C;
    --fs-primary-light: #EEF4FC;

    --fs-purple: #7239EA;
    --fs-purple-hover: #5D22D6;
    --fs-purple-active: #4811B5;
    --fs-purple-light: #F8F5FF;

    --fs-success: #10B981;
    --fs-success-hover: #059669;
    --fs-success-active: #047857;
    --fs-success-light: #E8FFF3;

    --fs-danger: #E13B52;
    --fs-danger-hover: #C8233B;
    --fs-danger-active: #A81B30;
    --fs-danger-light: #FFF5F8;

    --fs-warning: #FFB822;
    --fs-warning-hover: #E09B00;
    --fs-warning-active: #B57D00;
    --fs-warning-light: #FFF8DD;

    --fs-info: #009EF7;
    --fs-info-hover: #0086D1;
    --fs-info-light: #F1FAFF;

    --fs-sidebar-bg: #194A97;
    --fs-sidebar-hover: #133B78;
    --fs-sidebar-active: rgba(255, 255, 255, 0.2);
    --fs-sidebar-text-muted: rgba(255, 255, 255, 0.65);
    --fs-sidebar-width: 260px;

    /* ==========================================================================
       02. Neutral, Surface & Typography Tokens
       ========================================================================== */
    --fs-white: #FFFFFF;
    --fs-black: #000000;

    /* Backgrounds */
    --fs-bg-page: #F5F8FA;
    --fs-bg-card: #FFFFFF;
    --fs-bg-subtle: #F9FAFB;
    --fs-bg-hover: #F4F6F9;
    --fs-bg-active: #EEF2F6;

    /* Text Colors */
    --fs-text-heading: #181C32;
    --fs-text-body: #3F4254;
    --fs-text-muted: #7E8299;
    --fs-text-disabled: #A1A5B7;
    --fs-text-light: #FFFFFF;

    /* Borders */
    --fs-border-color: #E4E6EF;
    --fs-border-subtle: #EFF2F5;
    --fs-border-dashed: #E1E3EA;

    /* ==========================================================================
       03. Dedicated Event & Badge Variables (Mapped to System Palette)
       ========================================================================== */
    /* Event - Regular Schedule (Primary Navy) */
    --fs-event-regular-bg: var(--fs-primary);
    --fs-event-regular-border: var(--fs-primary);
    --fs-event-regular-text: #FFFFFF;
    --fs-event-regular-hover-bg: var(--fs-primary-hover);

    /* Event - Override / Custom (Purple) */
    --fs-event-override-bg: var(--fs-purple);
    --fs-event-override-border: var(--fs-purple);
    --fs-event-override-text: #FFFFFF;
    --fs-event-override-hover-bg: var(--fs-purple-hover);

    /* Event - WFH / Work From Home (Success Green) */
    --fs-event-wfh-bg: var(--fs-success);
    --fs-event-wfh-border: var(--fs-success);
    --fs-event-wfh-text: #FFFFFF;
    --fs-event-wfh-hover-bg: var(--fs-success-hover);

    /* Event - Libur / Day Off (Danger Red) */
    --fs-event-libur-bg: var(--fs-danger);
    --fs-event-libur-border: var(--fs-danger);
    --fs-event-libur-text: #FFFFFF;
    --fs-event-libur-hover-bg: var(--fs-danger-hover);

    /* Event - Cuti / Approved Leave (Warning Amber) */
    --fs-event-leave-bg: #f59e0b;
    --fs-event-leave-border: #f59e0b;
    --fs-event-leave-text: #FFFFFF;
    --fs-event-leave-hover-bg: #d97706;

    /* Event - Izin / Approved Permission (Info Cyan) */
    --fs-event-permission-bg: #06b6d4;
    --fs-event-permission-border: #06b6d4;
    --fs-event-permission-text: #FFFFFF;
    --fs-event-permission-hover-bg: #0891b2;

    /* Dedicated Light Badge Palette (High Contrast & Accessible) */
    --fs-badge-primary-bg: var(--fs-primary-light);
    --fs-badge-primary-text: var(--fs-primary);

    --fs-badge-purple-bg: var(--fs-purple-light);
    --fs-badge-purple-text: var(--fs-purple);

    --fs-badge-success-bg: var(--fs-success-light);
    --fs-badge-success-text: var(--fs-success);

    --fs-badge-danger-bg: var(--fs-danger-light);
    --fs-badge-danger-text: var(--fs-danger);

    --fs-badge-warning-bg: var(--fs-warning-light);
    --fs-badge-warning-text: #B57D00;

    --fs-badge-info-bg: var(--fs-info-light);
    --fs-badge-info-text: #0086D1;

    --fs-badge-secondary-bg: #F5F8FA;
    --fs-badge-secondary-text: #7E8299;
}


body,
html {
    height: 100%;
    background-color: var(--fs-bg-page, #F5F8FA);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
}


/* ==========================================================================
   02. APPLICATION LAYOUT SHELL & TOP HEADER
   ========================================================================== */
.fs-layout-page {
    display: flex;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

/* Sidebar Drawer Overlay (Backdrop for mobile view) */
.fs-aside-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    touch-action: none;
    overscroll-behavior: none;
}

.fs-aside-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Sidebar Component */
.fs-aside {
    width: var(--fs-sidebar-width);
    background-color: var(--fs-sidebar-bg) !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    position: fixed;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.25rem;
    overflow: hidden !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Desktop View (>= 992px) */
@media (min-width: 992px) {
    .fs-aside-overlay {
        display: none !important;
    }

    .fs-aside {
        left: 0;
        z-index: 1000;
        box-shadow: 3px 0 15px rgba(0, 0, 0, 0.06);
    }

    .fs-main-wrapper {
        margin-left: var(--fs-sidebar-width);
        padding-top: 70px !important;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-width: 0;
        width: auto;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Desktop Collapsed Sidebar State */
    body.fs-sidebar-collapsed .fs-aside {
        transform: translateX(-100%) !important;
    }

    body.fs-sidebar-collapsed .fs-main-wrapper {
        margin-left: 0 !important;
    }
}

/* Mobile & Tablet View (< 992px) */
@media (max-width: 991.98px) {
    /* Prevent body background scrolling when sidebar drawer is open */
    html.fs-aside-open,
    body.fs-aside-open {
        overflow: hidden !important;
        height: 100% !important;
        touch-action: none !important;
    }

    .fs-aside {
        left: 0;
        z-index: 1050;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.25);
        transform: translateX(-100%);
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        bottom: 0;
        top: 0;
        padding-top: calc(1.5rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .fs-aside.show {
        transform: translateX(0);
    }

    .fs-sidebar-scroll-wrapper {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 24px)) !important;
    }

    .fs-main-wrapper {
        margin-left: 0 !important;
        padding-top: 70px !important;
        width: 100% !important;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
}

/* Top Header Bar */
.fs-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;
    height: 70px !important;
    min-height: 70px !important;
    flex-shrink: 0 !important;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: fixed !important;
    top: 0;
    right: 0;
    left: var(--fs-sidebar-width);
    z-index: 1020 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    box-sizing: border-box !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.fs-sidebar-collapsed .fs-header {
    left: 0 !important;
}

@media (max-width: 991.98px) {
    .fs-header {
        left: 0 !important;
    }
}

.fs-toggle-btn {
    background: transparent;
    border: none;
    color: var(--fs-primary);
    font-size: 1.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.fs-toggle-btn:hover {
    background-color: #f1f5f9;
}

/* Universal Navbar Search Component */
.fs-universal-search-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.fs-universal-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    min-height: 40px;
    width: 380px;
    padding: 0 12px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-sizing: border-box;
}

.fs-universal-search-bar:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.fs-universal-search-wrapper.active .fs-universal-search-bar,
.fs-universal-search-bar:focus-within {
    background-color: #ffffff;
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 3px rgba(27, 58, 96, 0.12);
}

.fs-universal-search-icon {
    color: #94a3b8;
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.fs-universal-search-bar:focus-within .fs-universal-search-icon,
.fs-universal-search-wrapper.active .fs-universal-search-icon {
    color: var(--fs-primary);
}

.fs-universal-search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

.fs-universal-search-input::placeholder {
    color: #94a3b8;
    font-size: 0.85rem;
}

.fs-universal-search-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    user-select: none;
}

.fs-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    font-size: 10px;
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    color: #64748b;
    background-color: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.fs-universal-search-clear {
    color: #94a3b8;
    padding: 0 !important;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border-radius: 50%;
    transition: all 0.15s ease;
}

.fs-universal-search-clear:hover {
    color: #ef4444;
    background-color: #fee2e2;
}

/* Dropdown Results Box (Pure Body / List Only) */
.fs-universal-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 100%;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
    z-index: 1060;
    overflow: hidden;
    padding: 4px 0;
    animation: fsSearchSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fs-universal-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin: 2px 6px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background-color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.fs-universal-search-item:hover,
.fs-universal-search-item.active {
    background-color: #f1f5f9;
}

.fs-universal-search-item:hover .fs-universal-search-item-arrow,
.fs-universal-search-item.active .fs-universal-search-item-arrow {
    color: var(--fs-primary) !important;
    transform: translateX(3px);
}

.fs-universal-search-item-arrow {
    transition: transform 0.15s ease, color 0.15s ease;
}

.fs-universal-search-item-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background-color: #f8fafc;
    border: 1px solid #edf2f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fs-universal-search-item:hover .fs-universal-search-item-icon-wrap,
.fs-universal-search-item.active .fs-universal-search-item-icon-wrap {
    background-color: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.fs-universal-search-item-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.fs-universal-search-item-icon {
    font-size: 1rem;
}

.fs-search-highlight {
    background-color: #fef08a !important;
    color: #854d0e !important;
    font-weight: 700;
    padding: 0 2px;
    border-radius: 2px;
}

/* Responsive styling */
@media (max-width: 991.98px) {
    .fs-universal-search-bar {
        width: 250px;
    }
}

@media (max-width: 575.98px) {
    .fs-universal-search-bar {
        width: 180px;
        padding: 0 8px;
        gap: 6px;
    }
    .fs-universal-search-input::placeholder {
        font-size: 0.78rem;
    }
}

.fs-user-name {
    color: var(--fs-primary);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}

.fs-user-role {
    color: var(--fs-primary);
    font-weight: 600;
    font-size: 0.85rem;
}

.fs-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.fs-user-dropdown-trigger {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background-color 0.2s ease;
}

.fs-user-dropdown-trigger:hover {
    background-color: rgba(25, 74, 151, 0.05);
}

/* Main Content Area (With bottom padding for fixed footer clearance) */
.fs-content {
    padding: 2rem 2rem 5.5rem 2rem !important;
    flex: 1;
    min-width: 0;
    width: 100%;
}


/* ==========================================================================
   03. SIDEBAR NAVIGATION & CUSTOM SCROLLBAR
   ========================================================================== */
/* Brand / Logo Header */
.fs-brand-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 1.75rem;
    padding: 0 0.5rem;
    gap: 0.75rem;
    flex-shrink: 0 !important;
}

.fs-brand-logo {
    max-height: 40px;
    max-width: 100%;
    object-fit: contain;
}

.fs-brand-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff !important;
    letter-spacing: -0.5px;
    margin: 0;
}

/* Mode Switcher Dropdown Menu */
.fs-mode-dropdown-wrapper {
    position: relative;
    width: 100%;
    flex-shrink: 0 !important;
}

.fs-mode-dropdown-btn {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

.fs-mode-dropdown-btn:hover,
.fs-mode-dropdown-btn:focus,
.fs-mode-dropdown-btn[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

/* Sidebar Mode & Position Select-Style Dropdown (Matches System Input Select Options) */
.dropdown-menu.fs-select-dropdown,
.fs-select-dropdown {
    background-color: #ffffff !important;
    border: 1px solid rgba(25, 74, 151, 0.15) !important;
    border-radius: 0.65rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
    padding: 0.35rem !important;
    z-index: 1060;
}

.dropdown-menu.fs-select-dropdown .fs-select-group-header,
.fs-select-dropdown .fs-select-group-header {
    padding: 0.5rem 0.85rem 0.25rem 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #a1a5b7;
    letter-spacing: 0.5px;
    user-select: none;
    list-style: none;
}

.dropdown-menu.fs-select-dropdown .dropdown-item,
.fs-select-dropdown .dropdown-item {
    padding: 0.55rem 0.85rem !important;
    margin: 0.1rem 0;
    border-radius: 0.45rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #3f4254 !important;
    background-color: transparent !important;
    text-decoration: none;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none !important;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}

/* Selected State when NOT hovered */
.dropdown-menu.fs-select-dropdown .dropdown-item.active,
.dropdown-menu.fs-select-dropdown .dropdown-item:active,
.fs-select-dropdown .dropdown-item.active,
.fs-select-dropdown .dropdown-item:active {
    background-color: rgba(25, 74, 151, 0.08) !important;
    color: var(--fs-primary) !important;
    font-weight: 600 !important;
}

/* Hover / Focus State: Highlighted option like Select2 with solid primary blue and crisp white text */
.dropdown-menu.fs-select-dropdown .dropdown-item:hover,
.dropdown-menu.fs-select-dropdown .dropdown-item:focus,
.dropdown-menu.fs-select-dropdown .dropdown-item.active:hover,
.dropdown-menu.fs-select-dropdown .dropdown-item.active:focus,
.fs-select-dropdown .dropdown-item:hover,
.fs-select-dropdown .dropdown-item:focus,
.fs-select-dropdown .dropdown-item.active:hover,
.fs-select-dropdown .dropdown-item.active:focus {
    background-color: var(--fs-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    outline: none !important;
}

.dropdown-menu.fs-select-dropdown .dropdown-item:hover *,
.dropdown-menu.fs-select-dropdown .dropdown-item:focus *,
.dropdown-menu.fs-select-dropdown .dropdown-item.active:hover *,
.dropdown-menu.fs-select-dropdown .dropdown-item.active:focus *,
.fs-select-dropdown .dropdown-item:hover *,
.fs-select-dropdown .dropdown-item:focus *,
.fs-select-dropdown .dropdown-item.active:hover *,
.fs-select-dropdown .dropdown-item.active:focus * {
    color: #ffffff !important;
}

.dropdown-menu.fs-select-dropdown .dropdown-divider,
.fs-select-dropdown .dropdown-divider {
    border-top: 1px solid #f1f5f9 !important;
    margin: 0.35rem 0.5rem !important;
    opacity: 1;
}

/* Sidebar Scrollable Menu Container */
.fs-sidebar-scroll-wrapper {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    padding-right: 4px;
    padding-bottom: 0.5rem;
}

/* Sidebar Menu Heading & Links */
.fs-menu-heading {
    color: var(--fs-sidebar-text-muted, rgba(255, 255, 255, 0.65));
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
    padding-left: 0.75rem;
}

/* Normalized: Parent handles spacing via gap instead of icon child margin-right */
.fs-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: padding-left 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    margin-bottom: 0.3rem;
}

.fs-menu-link i,
.fs-menu-link .fa-fw {
    font-size: 1.15rem;
    width: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    flex-shrink: 0;
}

.fs-menu-icon-img {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    flex-shrink: 0;
}

.fs-menu-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    padding-left: 1.15rem !important;
}

.fs-menu-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.fs-menu-link.active i {
    color: #ffffff;
}

.fs-sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 1.25rem 0 0.5rem 0;
}

/* Sidebar Menu Search Input - Perfectly matches .fs-mode-dropdown-btn above */
.fs-sidebar-search {
    position: relative;
    width: 100%;
}

.fs-aside .fs-sidebar-search-input,
.fs-sidebar-search-input,
#fs_sidebar_search_input,
#fs_sidebar_search_input:not(:focus) {
    background-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0.5rem !important;
    color: #ffffff !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0.625rem 2.25rem 0.625rem 2.4rem !important;
    width: 100% !important;
    height: auto !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fs-aside .fs-sidebar-search-input:hover,
.fs-sidebar-search-input:hover,
#fs_sidebar_search_input:hover,
.fs-aside .fs-sidebar-search-input:focus,
.fs-sidebar-search-input:focus,
#fs_sidebar_search_input:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    outline: none !important;
}

.fs-aside .fs-sidebar-search-input::placeholder,
.fs-sidebar-search-input::placeholder,
#fs_sidebar_search_input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 400 !important;
}

/* Chrome/Safari autofill override for sidebar search */
#fs_sidebar_search_input:-webkit-autofill,
#fs_sidebar_search_input:-webkit-autofill:hover,
#fs_sidebar_search_input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(25, 74, 151, 0.95) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.fs-sidebar-search .fa-magnifying-glass {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    pointer-events: none;
}

.fs-sidebar-search #fs_sidebar_search_clear {
    color: rgba(255, 255, 255, 0.6) !important;
}

.fs-sidebar-search #fs_sidebar_search_clear:hover {
    color: #ffffff !important;
}

/* Sidebar Search Empty State - Icon & text in 1 aligned row */
.fs-sidebar-empty-state,
#fs_sidebar_empty_state {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    padding: 1.5rem 0.5rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    width: 100% !important;
    text-align: center !important;
}

.fs-sidebar-empty-state.d-none,
#fs_sidebar_empty_state.d-none {
    display: none !important;
}

.fs-sidebar-empty-state i,
#fs_sidebar_empty_state i {
    font-size: 0.95rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.fs-sidebar-empty-state span,
#fs_sidebar_empty_state span {
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    white-space: nowrap !important;
}

/* Portal Menu Page Search Input - Exact size & row alignment matching .fs-filter-btn */
.fs-menu-search-wrapper {
    position: relative;
    width: 250px;
    height: 38px;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .fs-menu-search-wrapper {
        width: 100%;
        margin-top: 0.25rem;
    }
}

.fs-menu-search-input {
    background-color: #ffffff !important;
    border: 1.5px solid rgba(25, 74, 151, 0.25) !important;
    color: #181c32 !important;
    border-radius: 6px !important;
    padding: 0 32px 0 34px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    height: 38px !important;
    line-height: 38px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease-in-out !important;
    width: 100% !important;
}

.fs-menu-search-input:hover {
    border-color: rgba(25, 74, 151, 0.5) !important;
}

.fs-menu-search-input:focus {
    background-color: #ffffff !important;
    border-color: var(--fs-primary, #194a97) !important;
    color: #181c32 !important;
    box-shadow: 0 0 0 3px rgba(25, 74, 151, 0.15) !important;
    outline: none !important;
}

.fs-menu-search-input::placeholder {
    color: #7e8299 !important;
    font-weight: 400 !important;
    font-size: 0.88rem !important;
}

/* Portal Menu Page Empty State - Icon & text in 1 aligned row centered */
.fs-menu-empty-state {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 0.75rem !important;
    text-align: center !important;
    width: 100% !important;
}

.fs-menu-empty-state i {
    font-size: 1.5rem !important;
    color: #a1a5b7 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.fs-menu-empty-state span {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #7e8299 !important;
    line-height: 1.4 !important;
}


/* Sleek Auto-Hiding Custom Scrollbar for Sidebar (Invisible when idle, smooth fade on hover) */
.fs-aside,
.fs-aside *,
.fs-sidebar-scroll-wrapper,
.fs-sidebar-scroll-wrapper * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.fs-aside:hover,
.fs-aside:hover .fs-sidebar-scroll-wrapper,
.fs-sidebar-scroll-wrapper:hover {
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

/* WebKit Scrollbar Styling (Chrome, Edge, Safari, Opera) */
.fs-aside::-webkit-scrollbar,
.fs-aside *::-webkit-scrollbar,
.fs-sidebar-scroll-wrapper::-webkit-scrollbar,
.fs-sidebar-scroll-wrapper *::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    background: transparent !important;
}

/* 100% Comprehensive Suppression of Native Arrow Scrollbar Buttons */
.fs-aside::-webkit-scrollbar-button,
.fs-aside *::-webkit-scrollbar-button,
.fs-aside::-webkit-scrollbar-button:single-button,
.fs-aside *::-webkit-scrollbar-button:single-button,
.fs-aside::-webkit-scrollbar-button:start,
.fs-aside *::-webkit-scrollbar-button:start,
.fs-aside::-webkit-scrollbar-button:end,
.fs-aside *::-webkit-scrollbar-button:end,
.fs-aside::-webkit-scrollbar-button:vertical:decrement,
.fs-aside *::-webkit-scrollbar-button:vertical:decrement,
.fs-aside::-webkit-scrollbar-button:vertical:increment,
.fs-aside *::-webkit-scrollbar-button:vertical:increment,
.fs-sidebar-scroll-wrapper::-webkit-scrollbar-button,
.fs-sidebar-scroll-wrapper *::-webkit-scrollbar-button,
.fs-sidebar-scroll-wrapper::-webkit-scrollbar-button:single-button,
.fs-sidebar-scroll-wrapper *::-webkit-scrollbar-button:single-button,
.fs-sidebar-scroll-wrapper::-webkit-scrollbar-button:start,
.fs-sidebar-scroll-wrapper *::-webkit-scrollbar-button:start,
.fs-sidebar-scroll-wrapper::-webkit-scrollbar-button:end,
.fs-sidebar-scroll-wrapper *::-webkit-scrollbar-button:end,
.fs-sidebar-scroll-wrapper::-webkit-scrollbar-button:vertical:decrement,
.fs-sidebar-scroll-wrapper *::-webkit-scrollbar-button:vertical:decrement,
.fs-sidebar-scroll-wrapper::-webkit-scrollbar-button:vertical:increment,
.fs-sidebar-scroll-wrapper *::-webkit-scrollbar-button:vertical:increment {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    visibility: hidden !important;
}

.fs-aside::-webkit-scrollbar-track,
.fs-aside *::-webkit-scrollbar-track,
.fs-aside::-webkit-scrollbar-track-piece,
.fs-aside *::-webkit-scrollbar-track-piece,
.fs-sidebar-scroll-wrapper::-webkit-scrollbar-track,
.fs-sidebar-scroll-wrapper *::-webkit-scrollbar-track,
.fs-sidebar-scroll-wrapper::-webkit-scrollbar-track-piece,
.fs-sidebar-scroll-wrapper *::-webkit-scrollbar-track-piece {
    background: transparent !important;
    border: none !important;
}

.fs-aside::-webkit-scrollbar-thumb,
.fs-aside *::-webkit-scrollbar-thumb,
.fs-sidebar-scroll-wrapper::-webkit-scrollbar-thumb,
.fs-sidebar-scroll-wrapper *::-webkit-scrollbar-thumb {
    background-color: transparent !important;
    border-radius: 10px !important;
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Show sleek scrollbar thumb when sidebar is hovered */
.fs-aside:hover::-webkit-scrollbar-thumb,
.fs-aside:hover *::-webkit-scrollbar-thumb,
.fs-aside:hover .fs-sidebar-scroll-wrapper::-webkit-scrollbar-thumb,
.fs-sidebar-scroll-wrapper:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Brighten noticeably when cursor hovers directly over the scrollbar thumb */
.fs-aside::-webkit-scrollbar-thumb:hover,
.fs-aside *::-webkit-scrollbar-thumb:hover,
.fs-sidebar-scroll-wrapper::-webkit-scrollbar-thumb:hover,
.fs-sidebar-scroll-wrapper *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.4) !important;
}

/* Solid bright white when actively clicked / dragged */
.fs-aside::-webkit-scrollbar-thumb:active,
.fs-aside *::-webkit-scrollbar-thumb:active,
.fs-sidebar-scroll-wrapper::-webkit-scrollbar-thumb:active,
.fs-sidebar-scroll-wrapper *::-webkit-scrollbar-thumb:active {
    background-color: #ffffff !important;
}


/* ==========================================================================
   04. SEGMENTED SWITCHERS & VIEW CONTROLS (Pure CSS Switches)
   ========================================================================== */
/* Pill Toggle Buttons (Registration Form) */
.fs-pill-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--fs-primary);
    border-radius: 50rem;
    padding: 0;
    background-color: #ffffff;
    overflow: hidden;
}

.fs-pill-group .btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.fs-pill-group .fs-pill-btn {
    padding: 0.4rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fs-primary);
    background-color: transparent;
    border: none;
    border-right: 1px solid var(--fs-primary);
    margin: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-block;
    text-align: center;
}

.fs-pill-group label:last-child .fs-pill-btn,
.fs-pill-group .fs-pill-btn:last-child {
    border-right: none;
}

.fs-pill-group .btn-check:checked + .fs-pill-btn {
    background-color: var(--fs-primary) !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Custom View Mode Switcher Control */
.fs-view-switcher {
    display: inline-flex;
    align-items: center;
    background-color: #f1f5f9;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 2px;
    height: 38px;
    gap: 2px;
    user-select: none;
}

.fs-view-switcher .btn-switcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    border: 0 !important;
    border-radius: 0.35rem !important;
    padding: 0 14px;
    font-size: 0.825rem;
    font-weight: 600;
    color: #5e6278;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    text-decoration: none;
}

.fs-view-switcher .btn-switcher i {
    color: #7e8299;
    font-size: 0.9rem;
    transition: color 0.2s ease-in-out;
}

.fs-view-switcher .btn-switcher:hover {
    color: var(--fs-primary);
    background-color: rgba(25, 74, 151, 0.08);
}

.fs-view-switcher .btn-switcher:hover i {
    color: var(--fs-primary);
}

.fs-view-switcher .btn-switcher.active {
    background-color: var(--fs-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(25, 74, 151, 0.25) !important;
}

.fs-view-switcher .btn-switcher.active i {
    color: #ffffff !important;
}

/* ==========================================================================
   04.1 CUSTOM BUTTON SWITCH & SEGMENTED CONTROL GROUPS (PURE CSS GLIDER)
   ========================================================================== */
.fs-switch-group,
.fs-segmented-group,
.fs-button-switch {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    border: 1.5px solid #d1d5db;
    border-radius: 0.475rem;
    padding: 3px;
    background-color: #f1f5f9;
    gap: 0;
    overflow: hidden;
    user-select: none;
    z-index: 1;
    box-sizing: border-box;
}

.fs-switch-group.d-inline-flex,
.fs-segmented-group.d-inline-flex,
.fs-button-switch.d-inline-flex {
    display: inline-flex;
}

.fs-switch-group .btn-check,
.fs-segmented-group .btn-check,
.fs-button-switch .btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.fs-switch-group .fs-switch-btn,
.fs-switch-group .fs-segmented-btn,
.fs-segmented-group .fs-switch-btn,
.fs-segmented-group .fs-segmented-btn,
.fs-button-switch .fs-switch-btn,
.fs-button-switch .fs-segmented-btn {
    flex: 1 1 0%;
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    white-space: nowrap;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #64748b;
    background-color: transparent;
    border: none;
    border-radius: calc(0.475rem - 2px);
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease;
    cursor: pointer;
    margin: 0;
    line-height: 1;
    box-sizing: border-box;
}

.fs-switch-group label.fs-switch-btn:first-of-type,
.fs-switch-group label.fs-segmented-btn:first-of-type,
.fs-segmented-group label.fs-switch-btn:first-of-type,
.fs-segmented-group label.fs-segmented-btn:first-of-type,
.fs-button-switch label.fs-switch-btn:first-of-type,
.fs-button-switch label.fs-segmented-btn:first-of-type {
    border-top-left-radius: calc(0.475rem - 2px);
    border-bottom-left-radius: calc(0.475rem - 2px);
}

.fs-switch-group label.fs-switch-btn:last-of-type,
.fs-switch-group label.fs-segmented-btn:last-of-type,
.fs-segmented-group label.fs-switch-btn:last-of-type,
.fs-segmented-group label.fs-segmented-btn:last-of-type,
.fs-button-switch label.fs-switch-btn:last-of-type,
.fs-button-switch label.fs-segmented-btn:last-of-type {
    border-top-right-radius: calc(0.475rem - 2px);
    border-bottom-right-radius: calc(0.475rem - 2px);
}

.fs-switch-group .fs-switch-btn:active,
.fs-switch-group .fs-segmented-btn:active,
.fs-segmented-group .fs-switch-btn:active,
.fs-segmented-group .fs-segmented-btn:active,
.fs-button-switch .fs-switch-btn:active,
.fs-button-switch .fs-segmented-btn:active {
    transform: scale(0.97);
}

/* Sliding Pill Glider Animation */
.fs-switch-group::before,
.fs-segmented-group::before,
.fs-button-switch::before {
    content: '';
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    z-index: 1;
    pointer-events: none;
    border-radius: calc(0.475rem - 2px);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Primary Navy Glider */
.fs-switch-primary:has(input.btn-check:nth-of-type(1):checked)::before,
.fs-segmented-primary:has(input.btn-check:nth-of-type(1):checked)::before {
    transform: translateX(0);
    background-color: var(--fs-primary);
    box-shadow: 0 2px 6px rgba(25, 74, 151, 0.25);
}

.fs-switch-primary:has(input.btn-check:nth-of-type(2):checked)::before,
.fs-segmented-primary:has(input.btn-check:nth-of-type(2):checked)::before {
    transform: translateX(100%);
    background-color: var(--fs-primary);
    box-shadow: 0 2px 6px rgba(25, 74, 151, 0.25);
}

/* Status (Success/Danger) Glider */
.fs-switch-status:has(input.btn-check:nth-of-type(1):checked)::before,
.fs-segmented-status:has(input.btn-check:nth-of-type(1):checked)::before {
    transform: translateX(0);
    background-color: var(--fs-success);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

.fs-switch-status:has(input.btn-check:nth-of-type(2):checked)::before,
.fs-segmented-status:has(input.btn-check:nth-of-type(2):checked)::before {
    transform: translateX(100%);
    background-color: var(--fs-danger);
    box-shadow: 0 2px 6px rgba(225, 59, 82, 0.25);
}

/* Primary / Danger Glider */
.fs-switch-primary-danger:has(input.btn-check:nth-of-type(1):checked)::before,
.fs-segmented-primary-danger:has(input.btn-check:nth-of-type(1):checked)::before {
    transform: translateX(0);
    background-color: var(--fs-primary);
    box-shadow: 0 2px 6px rgba(25, 74, 151, 0.25);
}

.fs-switch-primary-danger:has(input.btn-check:nth-of-type(2):checked)::before,
.fs-segmented-primary-danger:has(input.btn-check:nth-of-type(2):checked)::before {
    transform: translateX(100%);
    background-color: var(--fs-danger);
    box-shadow: 0 2px 6px rgba(225, 59, 82, 0.25);
}

/* Danger / Primary Glider */
.fs-switch-danger-primary:has(input.btn-check:nth-of-type(1):checked)::before,
.fs-segmented-danger-primary:has(input.btn-check:nth-of-type(1):checked)::before {
    transform: translateX(0);
    background-color: var(--fs-danger);
    box-shadow: 0 2px 6px rgba(225, 59, 82, 0.25);
}

.fs-switch-danger-primary:has(input.btn-check:nth-of-type(2):checked)::before,
.fs-segmented-danger-primary:has(input.btn-check:nth-of-type(2):checked)::before {
    transform: translateX(100%);
    background-color: var(--fs-primary);
    box-shadow: 0 2px 6px rgba(25, 74, 151, 0.25);
}

/* Primary / Info Glider */
.fs-switch-primary-info:has(input.btn-check:nth-of-type(1):checked)::before,
.fs-segmented-primary-info:has(input.btn-check:nth-of-type(1):checked)::before {
    transform: translateX(0);
    background-color: var(--fs-primary);
    box-shadow: 0 2px 6px rgba(25, 74, 151, 0.25);
}

.fs-switch-primary-info:has(input.btn-check:nth-of-type(2):checked)::before,
.fs-segmented-primary-info:has(input.btn-check:nth-of-type(2):checked)::before {
    transform: translateX(100%);
    background-color: var(--fs-info);
    box-shadow: 0 2px 6px rgba(0, 158, 247, 0.25);
}

/* Primary / Purple Glider */
.fs-switch-primary-purple:has(input.btn-check:nth-of-type(1):checked)::before,
.fs-segmented-primary-purple:has(input.btn-check:nth-of-type(1):checked)::before {
    transform: translateX(0);
    background-color: var(--fs-primary);
    box-shadow: 0 2px 6px rgba(25, 74, 151, 0.25);
}

.fs-switch-primary-purple:has(input.btn-check:nth-of-type(2):checked)::before,
.fs-segmented-primary-purple:has(input.btn-check:nth-of-type(2):checked)::before {
    transform: translateX(100%);
    background-color: var(--fs-purple);
    box-shadow: 0 2px 6px rgba(114, 57, 234, 0.25);
}

/* Primary / Warning Glider */
.fs-switch-primary-warning:has(input.btn-check:nth-of-type(1):checked)::before,
.fs-segmented-primary-warning:has(input.btn-check:nth-of-type(1):checked)::before {
    transform: translateX(0);
    background-color: var(--fs-primary);
    box-shadow: 0 2px 6px rgba(25, 74, 151, 0.25);
}

.fs-switch-primary-warning:has(input.btn-check:nth-of-type(2):checked)::before,
.fs-segmented-primary-warning:has(input.btn-check:nth-of-type(2):checked)::before {
    transform: translateX(100%);
    background-color: var(--fs-warning);
    box-shadow: 0 2px 6px rgba(255, 184, 34, 0.25);
}

/* Checked Text Styling */
.fs-switch-group input.btn-check:checked + .fs-switch-btn,
.fs-switch-group input.btn-check:checked + .fs-segmented-btn,
.fs-segmented-group input.btn-check:checked + .fs-switch-btn,
.fs-segmented-group input.btn-check:checked + .fs-segmented-btn,
.fs-button-switch input.btn-check:checked + .fs-switch-btn,
.fs-button-switch input.btn-check:checked + .fs-segmented-btn {
    color: #ffffff !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Optional Size Variants */
.fs-switch-group.fs-switch-sm,
.fs-segmented-group.fs-segmented-sm {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
}
.fs-switch-group.fs-switch-sm .fs-switch-btn,
.fs-switch-group.fs-switch-sm .fs-segmented-btn,
.fs-segmented-group.fs-segmented-sm .fs-switch-btn,
.fs-segmented-group.fs-segmented-sm .fs-segmented-btn {
    font-size: 0.8rem;
    padding: 0 0.75rem;
}

.fs-switch-group.fs-switch-lg,
.fs-segmented-group.fs-segmented-lg {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
}
.fs-switch-group.fs-switch-lg .fs-switch-btn,
.fs-switch-group.fs-switch-lg .fs-segmented-btn,
.fs-segmented-group.fs-segmented-lg .fs-switch-btn,
.fs-segmented-group.fs-segmented-lg .fs-segmented-btn {
    font-size: 0.95rem;
    padding: 0 1.25rem;
}


/* ==========================================================================
   05. STANDALONE TYPOGRAPHY UTILITIES (.fs-1 - .fs-10, .fs-base, .fs-sm, .fs-2sm)
   Matched precisely to Metronic Demo 8 standard typography scale
   ========================================================================== */
.fs-1 { font-size: calc(1.3rem + 0.6vw) !important; }
.fs-2 { font-size: calc(1.275rem + 0.3vw) !important; }
.fs-3 { font-size: calc(1.26rem + 0.12vw) !important; }
.fs-4 { font-size: 1.25rem !important; }
.fs-5 { font-size: 1.15rem !important; }
.fs-6 { font-size: 1.075rem !important; }
.fs-base { font-size: 1rem !important; }
.fs-sm,
.fs-2sm { font-size: 0.95rem !important; }
.fs-7 { font-size: 0.95rem !important; }
.fs-8 { font-size: 0.85rem !important; }
.fs-9 { font-size: 0.75rem !important; }
.fs-10 { font-size: 0.5rem !important; }

/* Font Weights */
.fs-fw-normal { font-weight: 400 !important; }
.fs-fw-medium { font-weight: 500 !important; }
.fs-fw-semibold { font-weight: 600 !important; }
.fs-fw-bold { font-weight: 700 !important; }
.fs-fw-bolder { font-weight: 800 !important; }

/* Dedicated Brand & Theme Text Colors */
.fs-text-primary { color: var(--fs-primary) !important; }
.fs-text-purple { color: var(--fs-purple) !important; }
.fs-text-success { color: var(--fs-success) !important; }
.fs-text-danger { color: var(--fs-danger) !important; }
.fs-text-warning { color: var(--fs-warning) !important; }
.fs-text-info { color: var(--fs-info) !important; }
.fs-text-muted { color: #a1a5b7 !important; }
.fs-text-dark { color: #181c32 !important; }
.fs-text-gray-600 { color: #7e8299 !important; }
.fs-text-gray-700 { color: #5e6278 !important; }
.fs-text-gray-800 { color: #3f4254 !important; }


/* ==========================================================================
   Forstaff Standard Badges (.badge-forstaff & standardized sizing)
   Memastikan keseragaman ukuran, padding, font size, & alignment
   ========================================================================== */
.badge-forstaff,
.badge.badge-forstaff {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important; /* Standar fs-7 */
    font-weight: 600 !important;
    padding: 0.375rem 0.75rem !important; /* Standar px-3 py-1.5 */
    line-height: 1.25 !important;
    border-radius: 0.475rem !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.badge-status-fixed {
    min-width: 85px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}


/* ==========================================================================
   Global Standard Badge List (.fs-badge-list)
   Mematuhi CSS Spacing Guidelines: Parent Container Ownership via `gap`
   Digunakan secara universal untuk daftar badge di tabel (Posisi, Benefit, Mesin, dll.)
   ========================================================================== */
.fs-badge-list,
.fs-benefit-badge-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem; /* 8px horizontal & vertical spacing antar badge */
}

.fs-badge-list .badge,
.fs-benefit-badge-list .badge {
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    white-space: normal;
    text-align: left;
    margin: 0 !important; /* DILARANG margin pada child badge, spacing milik parent gap */
}


/* ==========================================================================
   06. STANDALONE BADGES & STATUS TAGS (.fs-badge & .badge-light-*)
   ========================================================================== */
/* Base Badge Component */
.fs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 0.425rem;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    transition: all 0.15s ease-in-out;
}

/* Badge Sizes */
.fs-badge-sm {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.35rem !important;
}

.fs-badge-md {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.85rem !important;
    border-radius: 0.425rem !important;
}

.fs-badge-lg {
    padding: 0.5rem 0.95rem !important;
    font-size: 0.95rem !important;
    border-radius: 0.5rem !important;
}

.fs-badge-pill {
    border-radius: 50rem !important;
}

.fs-badge-circle {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

/* Light / Subtle Badge Variants (Standalone & Metronic Backward-Compatible Aliases) */
.fs-badge-light-primary,
.badge.badge-light-primary,
.badge-light-primary {
    background-color: var(--fs-badge-primary-bg, #EEF4FC) !important;
    color: var(--fs-badge-primary-text, #194A97) !important;
    border: 1px solid transparent;
}

.fs-badge-light-purple,
.badge.badge-light-purple,
.badge-light-purple,
.fs-badge-light-override,
.badge.badge-light-override,
.badge-light-override {
    background-color: var(--fs-badge-purple-bg, #F8F5FF) !important;
    color: var(--fs-badge-purple-text, #7239EA) !important;
    border: 1px solid transparent;
}

.fs-badge-light-success,
.badge.badge-light-success,
.badge-light-success {
    background-color: var(--fs-badge-success-bg, #E8FFF3) !important;
    color: var(--fs-badge-success-text, #10B981) !important;
    border: 1px solid transparent;
}

.fs-badge-light-danger,
.badge.badge-light-danger,
.badge-light-danger {
    background-color: var(--fs-badge-danger-bg, #FFF5F8) !important;
    color: var(--fs-badge-danger-text, #E13B52) !important;
    border: 1px solid transparent;
}

.fs-badge-light-warning,
.badge.badge-light-warning,
.badge-light-warning {
    background-color: var(--fs-badge-warning-bg, #FFF8DD) !important;
    color: var(--fs-badge-warning-text, #B57D00) !important;
    border: 1px solid transparent;
}

.fs-badge-light-info,
.badge.badge-light-info,
.badge-light-info {
    background-color: var(--fs-badge-info-bg, #F1FAFF) !important;
    color: var(--fs-badge-info-text, #0086D1) !important;
    border: 1px solid transparent;
}

.fs-badge-light-secondary,
.badge.badge-light-secondary,
.badge-light-secondary {
    background-color: var(--fs-badge-secondary-bg, #F5F8FA) !important;
    color: var(--fs-badge-secondary-text, #7E8299) !important;
    border: 1px solid transparent;
}

/* Solid Badge Variants */
.fs-badge-primary { background-color: var(--fs-primary) !important; color: #ffffff !important; }
.fs-badge-purple { background-color: var(--fs-purple) !important; color: #ffffff !important; }
.fs-badge-success { background-color: var(--fs-success) !important; color: #ffffff !important; }
.fs-badge-danger { background-color: var(--fs-danger) !important; color: #ffffff !important; }
.fs-badge-warning { background-color: var(--fs-warning) !important; color: #ffffff !important; }
.fs-badge-info { background-color: var(--fs-info) !important; color: #ffffff !important; }
.fs-badge-dark { background-color: #181c32 !important; color: #ffffff !important; }


/* ==========================================================================
   07. STANDALONE CARD CONTAINERS (.fs-card, .fs-card-header, .fs-card-toolbar)
   ========================================================================== */
.fs-card,
.fs-card-main {
    background-color: #ffffff !important;
    border: 0 !important;
    border-radius: 0.75rem !important; /* 12px */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    box-sizing: border-box;
}

/* Standalone Card Padding: only applies padding if the card does not have inner .card-body/.fs-card-body */
.fs-card:not(:has(> .card-body)):not(:has(> .fs-card-body)):not(.fs-card-flush),
.fs-card-main:not(:has(> .card-body)):not(:has(> .fs-card-body)):not(.fs-card-flush) {
    padding: 1.5rem;
}

.fs-card-flush {
    padding: 0 !important;
}

.fs-card-flush .fs-card-body {
    padding: 1.5rem;
}

.fs-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 54px;
    margin-bottom: 1.25rem;
    padding: 0;
    background: transparent;
    border-bottom: 0;
}

.fs-card-header.border-bottom {
    padding-bottom: 1rem;
    border-bottom: 1px solid #eef2f5 !important;
}

.fs-card-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: #181c32;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    line-height: 1.3;
}

.fs-card-title i,
.fs-card-title svg {
    font-size: 1.15rem;
    color: var(--fs-primary);
    flex-shrink: 0;
}

.fs-card-subtitle {
    font-size: 0.85rem;
    font-weight: 500;
    color: #a1a5b7;
    margin-top: 0.25rem;
}

.fs-card-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fs-card-body {
    flex: 1 1 auto;
    padding: 0;
}

.fs-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid #eef2f5;
    background: transparent;
}


/* ==========================================================================
   08. STANDALONE DATA TABLES (.fs-table, .fs-table-dashed, .fs-table-hover)
   ========================================================================== */
.fs-table {
    width: 100%;
    margin-bottom: 0;
    vertical-align: middle;
    border-collapse: separate;
    border-spacing: 0;
    color: #3f4254;
}

.fs-table th,
.fs-table td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Standalone Dashed Row Separators (Native & Metronic Alias) */
.fs-table-dashed th,
.fs-table-dashed td,
.table-row-dashed th,
.table-row-dashed td,
.table.table-row-dashed tr:not(:last-child) > th,
.table.table-row-dashed tr:not(:last-child) > td {
    border-bottom: 1px dashed #e4e6ef !important;
}

.fs-table-bordered th,
.fs-table-bordered td {
    border-bottom: 1px solid #f1f3f7 !important;
}

/* Table Header Row */
.fs-table thead th,
.fs-table-head th,
.table thead tr.bg-light th {
    background-color: #f9fafb !important;
    color: #5e6278 !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #e4e6ef !important;
    white-space: nowrap;
}

.fs-table thead tr.text-uppercase th,
.fs-table-head tr.text-uppercase th,
.table thead tr.bg-light.text-uppercase th {
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Table Hover */
.fs-table-hover tbody tr:hover,
.table.table-hover tbody tr:hover {
    background-color: rgba(25, 74, 151, 0.02) !important;
}

/* Compact Table Density */
.fs-table-compact th,
.fs-table-compact td,
.fs-table-sm th,
.fs-table-sm td {
    padding: 0.55rem 0.75rem !important;
    font-size: 0.85rem !important;
}

/* Modern Rendering Performance: Off-Screen Table Row Virtual Painting */
@supports (content-visibility: auto) {
    .fs-table tbody tr,
    .table.table-row-dashed tbody tr,
    .js-slot-staff-item-row {
        content-visibility: auto;
        contain-intrinsic-size: 0 46px;
    }
}


/* ==========================================================================
   09. STANDALONE BUTTONS & ICON CONTROLS (.fs-btn, .fs-btn-icon)
   ========================================================================== */
.fs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 0.475rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.65rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.2;
    text-decoration: none;
    user-select: none;
}

.fs-btn:disabled,
.fs-btn.disabled {
    opacity: 0.65;
    pointer-events: none;
    cursor: not-allowed;
}

/* Button Sizes */
.fs-btn-sm {
    padding: 0.4rem 0.85rem !important;
    font-size: 0.8rem !important;
    border-radius: 0.375rem !important;
}

.fs-btn-lg {
    padding: 0.85rem 1.75rem !important;
    font-size: 1rem !important;
    border-radius: 0.6rem !important;
}

/* Icon Buttons (Clean Square / Circle Controls) */
.fs-btn-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.475rem;
}

.fs-btn-icon-sm {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 0.8rem !important;
    border-radius: 0.375rem !important;
}

.fs-btn-icon-lg {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1.15rem !important;
    border-radius: 0.6rem !important;
}

.fs-btn-circle {
    border-radius: 50% !important;
}

/* Button Colors */
.fs-btn-primary {
    background-color: var(--fs-primary) !important;
    border-color: var(--fs-primary) !important;
    color: #ffffff !important;
}
.fs-btn-primary:hover {
    background-color: var(--fs-primary-hover) !important;
    border-color: var(--fs-primary-hover) !important;
    box-shadow: 0 4px 12px rgba(25, 74, 151, 0.28) !important;
}

.fs-btn-light-primary {
    background-color: var(--fs-primary-light) !important;
    color: var(--fs-primary) !important;
    border-color: transparent !important;
}
.fs-btn-light-primary:hover {
    background-color: var(--fs-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(25, 74, 151, 0.2) !important;
}

.fs-btn-success {
    background-color: var(--fs-success) !important;
    border-color: var(--fs-success) !important;
    color: #ffffff !important;
}
.fs-btn-success:hover {
    background-color: var(--fs-success-hover) !important;
    border-color: var(--fs-success-hover) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.28) !important;
}

.fs-btn-light-success {
    background-color: var(--fs-success-light) !important;
    color: var(--fs-success) !important;
    border-color: transparent !important;
}
.fs-btn-light-success:hover {
    background-color: var(--fs-success) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}

.fs-btn-danger {
    background-color: var(--fs-danger) !important;
    border-color: var(--fs-danger) !important;
    color: #ffffff !important;
}
.fs-btn-danger:hover {
    background-color: var(--fs-danger-hover) !important;
    border-color: var(--fs-danger-hover) !important;
    box-shadow: 0 4px 12px rgba(225, 59, 82, 0.28) !important;
}

.fs-btn-light-danger {
    background-color: var(--fs-danger-light) !important;
    color: var(--fs-danger) !important;
    border-color: transparent !important;
}
.fs-btn-light-danger:hover {
    background-color: var(--fs-danger) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(225, 59, 82, 0.2) !important;
}

.fs-btn-warning {
    background-color: var(--fs-warning) !important;
    border-color: var(--fs-warning) !important;
    color: #ffffff !important;
}
.fs-btn-warning:hover {
    background-color: var(--fs-warning-hover) !important;
    border-color: var(--fs-warning-hover) !important;
}

.fs-btn-light-warning {
    background-color: var(--fs-warning-light) !important;
    color: var(--fs-warning) !important;
    border-color: transparent !important;
}
.fs-btn-light-warning:hover {
    background-color: var(--fs-warning) !important;
    color: #ffffff !important;
}

.fs-btn-purple {
    background-color: var(--fs-purple) !important;
    border-color: var(--fs-purple) !important;
    color: #ffffff !important;
}
.fs-btn-purple:hover {
    background-color: var(--fs-purple-hover) !important;
    border-color: var(--fs-purple-hover) !important;
    box-shadow: 0 4px 12px rgba(114, 57, 234, 0.28) !important;
}

.fs-btn-light-purple {
    background-color: var(--fs-purple-light) !important;
    color: var(--fs-purple) !important;
    border-color: transparent !important;
}
.fs-btn-light-purple:hover {
    background-color: var(--fs-purple) !important;
    color: #ffffff !important;
}

.fs-btn-secondary {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}
.fs-btn-secondary:hover {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
}


/* ==========================================================================
   10. STANDALONE FORM INPUTS & GROUPS (.fs-form-group, .fs-input, .fs-select)
   ========================================================================== */
.fs-form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}

.fs-label,
.fs-form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: #3f4254;
    margin-bottom: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.fs-label.required::after,
.fs-form-label.required::after {
    content: "*";
    color: var(--fs-danger);
    font-weight: 700;
}

.fs-input,
.fs-select {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0.55rem 1rem;
    font-size: 0.925rem;
    font-weight: 500;
    color: #181c32;
    background-color: #f5f8fa;
    border: 1.5px solid transparent;
    border-radius: 0.475rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box;
    outline: none;
}

.fs-input:focus,
.fs-select:focus {
    background-color: #ffffff;
    border-color: var(--fs-primary);
    box-shadow: 0 0 0 0.25rem rgba(25, 74, 151, 0.15);
}

textarea.fs-input {
    height: auto;
    min-height: 90px;
}


/* ==========================================================================
   11. STANDALONE FILE UPLOAD COMPONENT (Forstaff Solid Form Control Standard)
   ========================================================================== */
.fs-file-upload {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.fs-file-upload input[type="file"].fs-file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.fs-file-upload-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #f5f8fa !important;
    border: 1.5px solid transparent !important;
    border-radius: 0.475rem !important;
    padding: 0 10px 0 0;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
    user-select: none;
}

.fs-file-upload:hover .fs-file-upload-box,
.fs-file-upload.is-dragover .fs-file-upload-box {
    background-color: #eef3f7 !important;
    border-color: transparent !important;
}

.fs-file-upload:focus-within .fs-file-upload-box {
    background-color: #ffffff !important;
    border-color: var(--fs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(25, 74, 151, 0.15) !important;
}

.fs-file-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 6px;
    background-color: var(--fs-primary) !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0 14px;
    margin: 0;
    border: none;
    border-radius: 0 !important;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.fs-file-upload:hover .fs-file-upload-btn {
    background-color: var(--fs-primary-hover) !important;
}

.fs-file-upload-text {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.fs-file-name {
    font-size: 0.8125rem;
    color: #a1a5b7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    line-height: 1.2;
}

.fs-file-upload.has-file .fs-file-name {
    color: #181c32;
    font-weight: 600;
}

.fs-file-size {
    display: none;
    font-size: 0.725rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 0.35rem;
    background-color: #e8fff3;
    color: #50cd89;
    flex-shrink: 0;
    margin: 0;
    line-height: 1.2;
}

.fs-file-upload.has-file .fs-file-size {
    display: inline-flex;
    align-items: center;
}

.fs-file-remove-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #e4e6ef;
    color: #7e8299;
    border: none;
    padding: 0;
    margin: 0 0 0 auto;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.fs-file-remove-btn:hover {
    background-color: #ffe2e5;
    color: #f1416c;
}

.fs-file-upload.has-file .fs-file-remove-btn {
    display: inline-flex;
}


/* ==========================================================================
   12. STANDALONE AVATAR & USER SYMBOLS (.fs-avatar, .fs-avatar-circle)
   ========================================================================== */
.fs-avatar {
    display: inline-flex;
    position: relative;
    flex-shrink: 0;
    border-radius: 0.475rem;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    user-select: none;
}

.fs-avatar-circle {
    border-radius: 50% !important;
}

.fs-avatar-xs { width: 26px !important; height: 26px !important; min-width: 26px !important; font-size: 0.7rem !important; }
.fs-avatar-sm { width: 32px !important; height: 32px !important; min-width: 32px !important; font-size: 0.8rem !important; }
.fs-avatar-md { width: 40px !important; height: 40px !important; min-width: 40px !important; font-size: 0.95rem !important; }
.fs-avatar-lg { width: 50px !important; height: 50px !important; min-width: 50px !important; font-size: 1.15rem !important; }
.fs-avatar-xl { width: 64px !important; height: 64px !important; min-width: 64px !important; font-size: 1.5rem !important; }

.fs-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fs-avatar-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background-color: var(--fs-primary-light);
    color: var(--fs-primary);
}

.fs-avatar-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-sizing: border-box;
}

.fs-avatar-badge.online { background-color: var(--fs-success); }
.fs-avatar-badge.offline { background-color: #a1a5b7; }
.fs-avatar-badge.busy { background-color: var(--fs-danger); }


/* ==========================================================================
   13. STANDALONE MODALS (.fs-modal-header, .fs-modal-title, .fs-modal-body, .fs-modal-footer)
   ========================================================================== */
.fs-modal-header {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 1.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    border-bottom: 1px solid #f1f3f7 !important;
    flex-shrink: 0 !important;
    background-color: #ffffff !important;
}

.fs-modal-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #181c32 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.fs-modal-body {
    flex: 1 1 auto !important;
    padding: 1.75rem !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

.fs-modal-footer {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 1.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
    border-top: 1px solid #f1f3f7 !important;
    flex-shrink: 0 !important;
    background-color: #ffffff !important;
}


/* ==========================================================================
   14. STANDALONE BREADCRUMBS (.fs-breadcrumb, .fs-breadcrumb-item)
   ========================================================================== */
.fs-breadcrumb,
.breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1rem 0 !important;
    gap: 0.35rem !important;
}

.fs-breadcrumb-item,
.breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.fs-breadcrumb-separator {
    display: inline-flex !important;
    align-items: center !important;
    color: #b5b5c3 !important;
    user-select: none !important;
}
/* ==========================================================================
   15. STANDALONE UTILITIES & SPACING
   ========================================================================== */
/* 5-Column Grid Custom Utilities for Dashboard Stat Cards (5 Berderet) */
@media (min-width: 1200px) {
    .col-xl-2-4 {
        flex: 0 0 auto !important;
        width: 20% !important;
    }
}

@media (min-width: 1400px) {
    .col-xxl-2-4 {
        flex: 0 0 auto !important;
        width: 20% !important;
    }

    .row-cols-xxl-5 > * {
        flex: 0 0 auto !important;
        width: 20% !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .col-lg-2-4 {
        flex: 0 0 auto !important;
        width: 20% !important;
    }
}

/* Fixed Footer Layout Spacing */
.footer,
#fs_footer,
#kt_footer {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    left: var(--fs-sidebar-width) !important;
    z-index: 1010 !important;
    background-color: #ffffff !important;
    border-top: 1px solid #eef2f6 !important;
    height: 55px !important;
    display: flex !important;
    align-items: center !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.fs-sidebar-collapsed .footer,
body.fs-sidebar-collapsed #fs_footer,
body.fs-sidebar-collapsed #kt_footer {
    left: 0 !important;
}

@media (max-width: 991.98px) {
    .footer,
    #fs_footer,
    #kt_footer {
        left: 0 !important;
    }
}

/* Bottom padding on main content & wrapper so content never gets covered by fixed footer */
.fs-content,
.fs-main-wrapper {
    padding-bottom: 5.5rem !important;
}

@media (max-width: 767.98px) {
    .fs-content {
        padding: 1.25rem 1rem 6rem 1rem !important;
    }
}

/* Compact Floating Action Container */
.position-sticky.bottom-0,
.sticky-bottom,
.fs-sticky-actions {
    position: sticky !important;
    bottom: 58px !important;
    z-index: 1005 !important;
    width: fit-content !important;
    margin-left: auto !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(203, 213, 225, 0.8) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06) !important;
    border-radius: 10px !important;
    padding: 0.5rem 0.75rem !important;
    margin-top: 1rem !important;
}


/* ==========================================================================
   15.1 FOOTER COMPONENT & DEVELOPER LOGO
   ========================================================================== */
.fs-footer-logo {
    height: 16px;
    width: auto;
    object-fit: contain;
    transition: opacity 0.2s ease, transform 0.2s ease;
    vertical-align: middle;
}

.fs-footer-logo:hover {
    opacity: 0.82;
    transform: translateY(-1px);
}

/* ==========================================================================
   16. FLOATING NETWORK STATUS BANNER & OFFLINE INDICATOR
   ========================================================================== */
.fs-network-banner {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translate(-50%, -150%);
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    border-radius: 50rem;
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.2), 0 4px 12px -2px rgba(0, 0, 0, 0.1);
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    max-width: 90vw;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.fs-network-banner.show {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.fs-network-banner--offline {
    background-color: rgba(220, 38, 38, 0.95);
    border: 1px solid rgba(248, 113, 113, 0.4);
}

.fs-network-banner--online {
    background-color: rgba(22, 163, 74, 0.95);
    border: 1px solid rgba(74, 222, 128, 0.4);
}

.fs-network-banner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.fs-network-banner--offline .fs-network-banner-dot {
    animation: fsNetworkPulse 1.5s infinite ease-in-out;
}

.fs-network-banner-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.fs-network-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.fs-network-banner-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    padding: 0.25rem 0.625rem;
    border-radius: 50rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    line-height: 1.2;
}

.fs-network-banner-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

@keyframes fsNetworkPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.7);
        opacity: 0.4;
    }
}

@media (max-width: 576px) {
    .fs-network-banner {
        top: 0.5rem;
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
        border-radius: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .fs-network-banner-content {
        white-space: normal;
        text-align: center;
    }
}

/* ==========================================================================
   17. OFFLINE PAGE SYSTEM (.fs-offline-*)
   ========================================================================== */
.fs-offline-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    padding: 1.5rem;
}

.fs-offline-card {
    max-width: 520px;
    width: 100%;
    background: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    padding: 2.5rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fs-offline-icon-circle {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    border: 4px solid #fee2e2;
    animation: fsPulseRed 2s infinite ease-in-out;
}

.fs-offline-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.fs-offline-desc {
    color: #64748b;
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.fs-offline-tips {
    text-align: left;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 0.625rem;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 0.875rem;
    color: #475569;
    width: 100%;
}

.fs-offline-tips-header {
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fs-offline-tips ul {
    margin: 0;
    padding-left: 1.25rem;
}

.fs-offline-tips li:not(:last-child) {
    margin-bottom: 0.375rem;
}

.fs-offline-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    flex-wrap: wrap;
}

@keyframes fsPulseRed {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.2);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(220, 38, 38, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

/* ==========================================================================
   16. MULTI-LINE TEXT CLAMPING & COLUMN WRAP UTILITIES
   ========================================================================== */
.fs-line-clamp-1,
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.fs-line-clamp-2,
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.fs-line-clamp-3,
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.fs-max-w-200px, .max-w-200px { max-width: 200px; }
.fs-max-w-250px, .max-w-250px { max-width: 250px; }
.fs-max-w-300px, .max-w-300px { max-width: 300px; }
.fs-max-w-350px, .max-w-350px { max-width: 350px; }

/* Min-Height Utilities (Standard Remote Table & Modal Containers) */
.fs-min-h-220, .min-h-220px { min-height: 220px !important; }
.fs-min-h-300, .min-h-300px { min-height: 300px !important; }
.fs-min-h-350, .min-h-350px { min-height: 350px !important; }
.fs-min-h-380, .min-h-380px { min-height: 380px !important; }