/* ==========================================================================
   SWATECH Admin Portal — Premium Design System v3.0
   Light Mode (Default) + Dark Mode | Full Animation Pool
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. GOOGLE FONTS IMPORT
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS — LIGHT MODE
   -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --sw-primary:        #2563eb;
    --sw-primary-h:      #1d4ed8;
    --sw-primary-l:      #eff6ff;
    --sw-primary-glow:   rgba(37, 99, 235, 0.18);
    --sw-primary-glow2:  rgba(37, 99, 235, 0.08);

    /* Semantic */
    --sw-success:   #059669;
    --sw-warning:   #d97706;
    --sw-danger:    #dc2626;
    --sw-info:      #0284c7;

    /* Backgrounds */
    --sw-bg-body:    #f8fafc;
    --sw-bg-header:  rgba(255, 255, 255, 0.95);
    --sw-bg-sidebar: #ffffff;
    --sw-bg-card:    #ffffff;
    --sw-bg-input:   #f8fafc;
    --sw-bg-hover:   #f1f5f9;

    /* Typography */
    --sw-text:       #0f172a;
    --sw-text-dim:   #334155;
    --sw-text-muted: #64748b;
    --sw-text-light: #94a3b8;

    /* Sidebar - Light Mode Default */
    --sw-sb-text:     #475569;
    --sw-sb-hover-bg: #f1f5f9;
    --sw-sb-hover-tx: #0f172a;
    --sw-sb-active-bg: #2563eb;
    --sw-sb-active-tx: #ffffff;
    --sw-sb-accent:   rgba(37, 99, 235, 0.08);
    --sw-sb-border:   #e2e8f0;

    /* Borders */
    --sw-border:      #e2e8f0;
    --sw-border-focus: #2563eb;

    /* Shadows */
    --sw-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --sw-shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
    --sw-shadow-md: 0 4px 16px rgba(0,0,0,0.07);
    --sw-shadow-lg: 0 12px 36px rgba(0,0,0,0.10);
    --sw-shadow-xl: 0 24px 60px rgba(0,0,0,0.14);

    /* Radii */
    --sw-radius-xs: 6px;
    --sw-radius-sm: 10px;
    --sw-radius-md: 14px;
    --sw-radius-lg: 20px;
    --sw-radius-xl: 28px;

    /* Transitions */
    --sw-ease:  cubic-bezier(0.23, 1, 0.32, 1);
    --sw-tr:    0.3s cubic-bezier(0.23, 1, 0.32, 1);
    --sw-tr-f:  0.2s ease;

    /* Sidebar width */
    --sw-sb-w: 260px;
}

/* --------------------------------------------------------------------------
   2. DARK MODE OVERRIDES
   -------------------------------------------------------------------------- */
body.theme-dark {
    --sw-bg-body:    #090d16;
    --sw-bg-header:  rgba(10, 16, 30, 0.88);
    --sw-bg-sidebar: #060b14;
    --sw-bg-card:    #111827;
    --sw-bg-input:   #0d1423;
    --sw-bg-hover:   rgba(255,255,255,0.05);

    --sw-text:       #f1f5f9;
    --sw-text-dim:   #cbd5e1;
    --sw-text-muted: #64748b;
    --sw-text-light: #374151;

    --sw-border:      #1e2d45;
    --sw-border-focus: #3b82f6;

    --sw-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
    --sw-shadow-sm: 0 2px 6px rgba(0,0,0,0.4);
    --sw-shadow-md: 0 4px 16px rgba(0,0,0,0.5);
    --sw-shadow-lg: 0 12px 36px rgba(0,0,0,0.6);
    --sw-shadow-xl: 0 24px 60px rgba(0,0,0,0.7);
}

/* --------------------------------------------------------------------------
   3. GLOBAL RESET & TYPOGRAPHY
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    transition: background-color var(--sw-tr), border-color var(--sw-tr), color var(--sw-tr);
}

/* Exclude transform from global transition to prevent animation conflicts */
img, canvas, video, svg, i, .fa, .fas, .far, .fab, .fa-solid {
    transition: none;
}

body.admin {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    background-color: var(--sw-bg-body) !important;
    color: var(--sw-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Background subtle texture - light */
body.admin:not(.theme-dark) {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(148,163,184,0.15) 1px, transparent 0) !important;
    background-size: 28px 28px !important;
}

/* Background subtle texture - dark */
body.admin.theme-dark {
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px) !important;
    background-size: 44px 44px !important;
}

/* --------------------------------------------------------------------------
   4. SIDEBAR & SETUP MENU (ADMIN BLUE THEME + AUTO-MINIMIZE ANIMATION)
   -------------------------------------------------------------------------- */
:root {
    --sw-sb-w: 260px;
    --sw-sb-mini-w: 70px;
    --sw-sb-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --sw-sb-anim-time: 0.32s;
    --sw-sb-blue-gradient: linear-gradient(180deg, #1d4ed8 0%, #1e40af 50%, #172554 100%);
}

aside#menu,
#menu,
.sidebar {
    background: var(--sw-sb-blue-gradient) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    position: fixed !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    width: var(--sw-sb-mini-w) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1000 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    transition: width var(--sw-sb-anim-time) var(--sw-sb-ease),
                box-shadow var(--sw-sb-anim-time) var(--sw-sb-ease),
                margin-left var(--sw-sb-anim-time) var(--sw-sb-ease),
                background var(--sw-tr) !important;
    box-shadow: 4px 0 24px rgba(30, 58, 138, 0.15) !important;
}

/* Remove dark pseudo patterns */
aside#menu::after {
    display: none !important;
}

/* Scrollbar */
aside#menu::-webkit-scrollbar,
#menu::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
#setup-menu-wrapper::-webkit-scrollbar { width: 4px !important; }
aside#menu::-webkit-scrollbar-thumb,
#menu::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
#setup-menu-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 99px !important;
}
aside#menu::-webkit-scrollbar-thumb:hover,
#menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45) !important;
}

/* ─── HOVER / EXPANDED STATE ────────────────────────────────────────────── */
@media (min-width: 769px) {
    aside#menu:hover,
    #menu:hover,
    body.sidebar-pinned aside#menu,
    body.show-sidebar-pinned aside#menu {
        width: var(--sw-sb-w) !important;
        box-shadow: 12px 0 40px rgba(15, 23, 42, 0.25), 0 0 1px rgba(255, 255, 255, 0.15) !important;
        z-index: 1050 !important;
    }
}

/* Setup Menu Drawer (Settings) */
#setup-menu-wrapper {
    display: none;
    background: var(--sw-sb-blue-gradient) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    position: fixed !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    width: var(--sw-sb-w) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1100 !important;
    box-shadow: 8px 0 36px rgba(0, 0, 0, 0.25) !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
#setup-menu-wrapper.display-block {
    display: block !important;
    z-index: 1100 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Layout offsets (Default Mini Offset 70px) */
#wrapper   {
    margin-left: var(--sw-sb-mini-w) !important;
    background-color: var(--sw-bg-body) !important;
    transition: margin-left var(--sw-sb-anim-time) var(--sw-sb-ease) !important;
}
#header    {
    margin-left: var(--sw-sb-mini-w) !important;
    transition: margin-left var(--sw-sb-anim-time) var(--sw-sb-ease) !important;
}
.btn-bottom-toolbar {
    margin-left: var(--sw-sb-mini-w) !important;
    width: calc(100% - var(--sw-sb-mini-w)) !important;
    transition: margin-left var(--sw-sb-anim-time) var(--sw-sb-ease), width var(--sw-sb-anim-time) var(--sw-sb-ease) !important;
}

/* When pinned by toggle button */
body.sidebar-pinned #wrapper,
body.show-sidebar-pinned #wrapper {
    margin-left: var(--sw-sb-w) !important;
}
body.sidebar-pinned #header,
body.show-sidebar-pinned #header {
    margin-left: var(--sw-sb-w) !important;
}
body.sidebar-pinned .btn-bottom-toolbar,
body.show-sidebar-pinned .btn-bottom-toolbar {
    margin-left: var(--sw-sb-w) !important;
    width: calc(100% - var(--sw-sb-w)) !important;
}

/* Mobile hide / show states */
body.hide-sidebar:not(.show-sidebar) #menu,
body.hide-sidebar:not(.show-sidebar) #setup-menu-wrapper,
body.page-small #menu,
body.page-small #setup-menu-wrapper { margin-left: calc(-1 * var(--sw-sb-w)) !important; }

body.hide-sidebar:not(.show-sidebar) #wrapper,
body.hide-sidebar:not(.show-sidebar) #header { margin-left: 0 !important; }

body.page-small.show-sidebar #menu,
body.page-small.show-sidebar #setup-menu-wrapper { margin-left: 0 !important; width: var(--sw-sb-w) !important; }
body.page-small.show-sidebar #wrapper { margin-left: 0 !important; }

/* Sidebar nav ul */
#side-menu,
#setup-menu {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 140px !important;
    background-color: transparent !important;
    position: relative;
    z-index: 1;
}

/* Logo area */
#logo {
    padding: 12px 6px !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    height: 63px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    transition: all var(--sw-sb-anim-time) var(--sw-sb-ease) !important;
}
#logo img {
    max-height: 34px !important;
    max-width: 44px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.95 !important;
    transition: all var(--sw-sb-anim-time) var(--sw-sb-ease) !important;
}
aside#menu:hover #logo,
#menu:hover #logo,
body.sidebar-pinned #logo {
    padding: 14px 18px !important;
    justify-content: flex-start !important;
}
aside#menu:hover #logo img,
#menu:hover #logo img,
body.sidebar-pinned #logo img {
    max-height: 40px !important;
    max-width: 190px !important;
}

/* Main menu items (Side Menu) */
#side-menu > li > a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    border-radius: var(--sw-radius-sm) !important;
    margin: 4px auto !important;
    padding: 0 !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    position: relative;
    overflow: hidden;
    transition: color 0.2s ease,
                background-color 0.2s ease,
                width var(--sw-sb-anim-time) var(--sw-sb-ease),
                padding var(--sw-sb-anim-time) var(--sw-sb-ease),
                margin var(--sw-sb-anim-time) var(--sw-sb-ease),
                justify-content var(--sw-sb-anim-time) var(--sw-sb-ease),
                transform 0.2s var(--sw-ease) !important;
}

#side-menu > li > a::before {
    display: none !important;
}

#side-menu > li > a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
    transform: translateY(-1px) !important;
}

#side-menu > li > a:hover i.menu-icon {
    color: #ffffff !important;
}

/* Active menu item (Centered white pill in mini mode) */
#side-menu > li.active > a,
#side-menu > li > a.active {
    color: #1d4ed8 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 1px rgba(255, 255, 255, 0.5) !important;
    font-weight: 700 !important;
    transform: none !important;
}

#side-menu > li.active > a i.menu-icon {
    color: #1d4ed8 !important;
}

/* Menu icon - Pure Geometric Centering */
#side-menu i.menu-icon {
    font-size: 1.2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: transform 0.2s var(--sw-ease),
                color 0.2s ease,
                font-size var(--sw-sb-anim-time) var(--sw-sb-ease),
                margin var(--sw-sb-anim-time) var(--sw-sb-ease) !important;
}

/* In mini mode (not hovered): Completely take non-icon elements out of layout for 100% symmetry */
aside#menu:not(:hover) #side-menu .menu-text,
aside#menu:not(:hover) #side-menu .fa.arrow,
aside#menu:not(:hover) #side-menu .arrow,
aside#menu:not(:hover) #side-menu .badge,
aside#menu:not(:hover) #side-menu .nav-second-level {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Second-level Submenu (Hidden in Mini Mode) */
#side-menu .nav-second-level {
    display: none !important;
    background: rgba(15, 23, 42, 0.30) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin: 3px 10px !important;
    border-radius: var(--sw-radius-sm) !important;
    padding: 4px 0 !important;
    overflow: hidden;
}

/* ─── ON HOVER / EXPANDED: Reveal Text, Align Items, Expand Submenu ────── */
aside#menu:hover #side-menu > li > a,
#menu:hover #side-menu > li > a,
body.sidebar-pinned #side-menu > li > a {
    width: calc(100% - 20px) !important;
    margin: 2px 10px !important;
    padding: 10px 14px !important;
    justify-content: flex-start !important;
}

aside#menu:hover #side-menu i.menu-icon,
#menu:hover #side-menu i.menu-icon,
body.sidebar-pinned #side-menu i.menu-icon {
    font-size: 1rem !important;
    margin: 0 12px 0 0 !important;
    width: 20px !important;
    height: auto !important;
    line-height: inherit !important;
    display: inline-block !important;
}

aside#menu:hover #side-menu .menu-text,
aside#menu:hover #side-menu .badge,
#menu:hover #side-menu .menu-text,
#menu:hover #side-menu .badge,
body.sidebar-pinned #side-menu .menu-text,
body.sidebar-pinned #side-menu .badge {
    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    max-width: 180px !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

aside#menu:hover #side-menu .fa.arrow,
aside#menu:hover #side-menu .arrow,
#menu:hover #side-menu .fa.arrow,
#menu:hover #side-menu .arrow,
body.sidebar-pinned #side-menu .fa.arrow,
body.sidebar-pinned #side-menu .arrow {
    display: inline-block !important;
    position: static !important;
    opacity: 0.7 !important;
    visibility: visible !important;
    margin-left: auto !important;
    pointer-events: auto !important;
}

aside#menu:hover #side-menu .nav-second-level.in,
aside#menu:hover #side-menu .nav-second-level.collapse.in,
#menu:hover #side-menu .nav-second-level.in,
body.sidebar-pinned #side-menu .nav-second-level.in {
    display: block !important;
}

/* Submenu items (Level 2) */
#side-menu .nav-second-level > li > a,
#setup-menu .nav-second-level > li > a {
    padding: 8px 14px 8px 24px !important;
    font-size: 0.835rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    margin: 2px 6px !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
}

#side-menu .nav-second-level > li > a i.menu-icon {
    font-size: 0.9rem !important;
    width: 18px !important;
    margin-right: 8px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    display: inline-block !important;
}

#side-menu .nav-second-level > li > a:hover,
#side-menu .nav-second-level > li.active > a,
#setup-menu .nav-second-level > li > a:hover,
#setup-menu .nav-second-level > li.active > a {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    font-weight: 600 !important;
}

#side-menu .nav-second-level > li.has-sub-children > a {
    justify-content: space-between !important;
}

#side-menu .nav-second-level > li > a .sub-arrow {
    margin-left: auto !important;
    font-size: 0.68rem !important;
    opacity: 0.65 !important;
    transition: transform 0.22s var(--sw-ease, ease), opacity 0.2s ease !important;
}

#side-menu .nav-second-level > li.has-sub-children.open > a .sub-arrow,
#side-menu .nav-second-level > li.has-sub-children > a[aria-expanded="true"] .sub-arrow {
    transform: rotate(180deg) !important;
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   LEVEL 3 SUB-SUB MENU (Clean, standard text menu style)
   -------------------------------------------------------------------------- */
#side-menu .nav-third-level {
    display: none;
    list-style: none !important;
    margin: 1px 6px 4px 24px !important;
    padding: 2px 0 2px 6px !important;
    background: transparent !important;
    border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 0 !important;
    overflow: hidden;
}

#side-menu .nav-third-level.in {
    display: block;
}

#side-menu .nav-third-level > li > a {
    padding: 6px 12px 6px 14px !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 400 !important;
    border-radius: 6px !important;
    margin: 1px 4px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.15s ease !important;
}

#side-menu .nav-third-level > li > a i.menu-icon {
    font-size: 0.78rem !important;
    width: 14px !important;
    margin-right: 6px !important;
    opacity: 0.7 !important;
}

#side-menu .nav-third-level > li > a:hover,
#side-menu .nav-third-level > li.active > a {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    font-weight: 500 !important;
    padding-left: 16px !important;
}



/* --------------------------------------------------------------------------
   SETUP MENU DRAWER (Settings Panel)
   -------------------------------------------------------------------------- */
#setup-menu-wrapper {
    width: 260px !important;
    max-width: 260px !important;
    background: var(--sw-sb-blue-gradient) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35) !important;
    z-index: 1200 !important;
}

#setup-menu {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 60px 0 !important;
    list-style: none !important;
}

/* Setup menu heading row (Settings drawer header) */
#setup-menu > li:first-child {
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin-bottom: 8px !important;
    background: rgba(0, 0, 0, 0.18) !important;
}
#setup-menu .customizer-heading {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 0.3px;
}
#setup-menu .close-customizer {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.1rem !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}
#setup-menu .close-customizer:hover {
    color: #ffffff !important;
    background-color: #dc2626 !important;
    transform: scale(1.05);
}

/* Setup menu list items & links */
#setup-menu > li:not(:first-child) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#setup-menu > li:not(:first-child) > a {
    width: calc(100% - 20px) !important;
    margin: 3px 10px !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.90) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

#setup-menu > li:not(:first-child) > a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
    transform: translateX(2px) !important;
}

#setup-menu > li.active > a,
#setup-menu > li > a.active {
    color: #1d4ed8 !important;
    background: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
}

#setup-menu i.menu-icon {
    font-size: 1rem !important;
    margin: 0 12px 0 0 !important;
    width: 20px !important;
    height: auto !important;
    line-height: inherit !important;
    display: inline-block !important;
    text-align: center !important;
    color: inherit !important;
    flex-shrink: 0 !important;
}

#setup-menu .menu-text {
    display: inline-block !important;
    opacity: 1 !important;
    max-width: none !important;
    visibility: visible !important;
    transform: none !important;
    font-size: 0.875rem !important;
    color: inherit !important;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.35 !important;
    pointer-events: auto !important;
    flex: 1 !important;
}

#setup-menu .fa.arrow,
#setup-menu .arrow {
    display: inline-block !important;
    position: static !important;
    opacity: 0.7 !important;
    visibility: visible !important;
    margin-left: auto !important;
    pointer-events: auto !important;
}

#setup-menu .nav-second-level {
    display: none;
    background: rgba(15, 23, 42, 0.30) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin: 3px 10px !important;
    border-radius: var(--sw-radius-sm) !important;
    padding: 4px 0 !important;
    overflow: hidden;
}

#setup-menu .nav-second-level.in,
#setup-menu .nav-second-level.collapse.in {
    display: block !important;
}

#setup-menu .nav-second-level li a {
    padding: 8px 14px 8px 38px !important;
    font-size: 0.835rem !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    margin: 2px 6px !important;
    display: block !important;
    text-align: left !important;
    transition: all 0.2s ease !important;
}

#setup-menu .nav-second-level li a:hover,
#setup-menu .nav-second-level li.active a {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
    font-weight: 600 !important;
    padding-left: 42px !important;
}

/* Setup menu trigger item in main sidebar */
#setup-menu-item {
    display: block !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.18) !important;
}
#setup-menu-item a.open-customizer {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    margin: 4px auto !important;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}
#setup-menu-item a.open-customizer:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}
#setup-menu-item a.open-customizer i {
    color: #ffffff !important;
}
aside#menu:hover #setup-menu-item a.open-customizer,
#menu:hover #setup-menu-item a.open-customizer,
body.sidebar-pinned #setup-menu-item a.open-customizer {
    width: calc(100% - 20px) !important;
    margin: 2px 10px !important;
    padding: 10px 14px !important;
    justify-content: flex-start !important;
}

/* Menu arrow */
#side-menu .fa.arrow { margin-left: auto !important; opacity: 0.7; }
#side-menu > li.active > a .fa.arrow { opacity: 1; }

/* Dark Mode Overrides for Sidebar & Setup */
body.theme-dark aside#menu,
body.theme-dark #menu,
body.theme-dark .sidebar,
body.theme-dark #setup-menu-wrapper {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
    border-right-color: #1e293b !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4) !important;
}
body.theme-dark #logo {
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom-color: #1e293b !important;
}
body.theme-dark #logo img {
    filter: brightness(0) invert(1) !important;
}
body.theme-dark #side-menu > li > a,
body.theme-dark #setup-menu > li:not(:first-child) > a {
    color: #94a3b8 !important;
}
body.theme-dark #side-menu > li > a:hover,
body.theme-dark #setup-menu > li:not(:first-child) > a:hover {
    color: #f8fafc !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}
body.theme-dark #side-menu .nav-second-level,
body.theme-dark #setup-menu .nav-second-level {
    background: #090d16 !important;
    border-color: #1e293b !important;
}
body.theme-dark #side-menu .nav-second-level li a,
body.theme-dark #setup-menu .nav-second-level li a {
    color: #94a3b8 !important;
}
body.theme-dark #setup-menu > li:first-child {
    background: #0f172a !important;
    border-bottom-color: #1e293b !important;
}
body.theme-dark #setup-menu .customizer-heading {
    color: #f8fafc !important;
}
body.theme-dark #setup-menu .close-customizer {
    color: #94a3b8 !important;
    background: #1e293b !important;
}

/* --------------------------------------------------------------------------
   5. TOP HEADER / NAVBAR
   -------------------------------------------------------------------------- */
#header {
    background: var(--sw-bg-header) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid var(--sw-border) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    transition: background var(--sw-tr), border-color var(--sw-tr), box-shadow var(--sw-tr) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
}

body.theme-dark #header {
    box-shadow: 0 2px 16px rgba(0,0,0,0.5) !important;
}

/* Hamburger toggle */
.hide-menu {
    color: var(--sw-text) !important;
    padding: 8px !important;
    border-radius: var(--sw-radius-xs) !important;
    transition: all 0.2s ease !important;
}
.hide-menu:hover {
    color: var(--sw-primary) !important;
    background: var(--sw-primary-l) !important;
    transform: rotate(180deg) !important;
}

/* Search Input */
#search_input {
    background: var(--sw-bg-input) !important;
    color: var(--sw-text) !important;
    border: 1.5px solid var(--sw-border) !important;
    border-radius: var(--sw-radius-md) !important;
    transition: all 0.25s ease !important;
    font-size: 0.9rem !important;
}
#search_input:focus {
    border-color: var(--sw-primary) !important;
    box-shadow: 0 0 0 4px var(--sw-primary-glow) !important;
    background: var(--sw-bg-card) !important;
}

/* Header nav items */
#header nav,
#header .nav > li > a {
    color: var(--sw-text) !important;
    transition: color var(--sw-tr-f) !important;
}

/* Icon buttons in header (timers, todo, profile) */
#header .nav > li.icon > a {
    padding: 8px 10px !important;
    border-radius: var(--sw-radius-xs) !important;
    transition: all 0.2s ease !important;
}
#header .nav > li.icon > a:hover {
    background: var(--sw-bg-hover) !important;
    color: var(--sw-primary) !important;
}

/* Theme toggle button — animated */
#sw-theme-toggle {
    position: relative;
    overflow: hidden;
}
#sw-theme-toggle span {
    border-color: var(--sw-border) !important;
    background: var(--sw-bg-input) !important;
    transition: all 0.25s ease !important;
    border-radius: var(--sw-radius-xs) !important;
}
#sw-theme-toggle:hover span {
    background: var(--sw-primary-l) !important;
    border-color: var(--sw-primary) !important;
    box-shadow: 0 0 0 3px var(--sw-primary-glow) !important;
}
#sw-theme-toggle .fa-moon,
#sw-theme-toggle .fa-sun {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease !important;
}
#sw-theme-toggle:hover .fa-moon { transform: rotate(-20deg) scale(1.15); color: #818cf8 !important; }
#sw-theme-toggle:hover .fa-sun  { transform: rotate(30deg) scale(1.2); }

/* Notification badge — pulsing */
.nav-total-todos,
.icon-started-timers {
    animation: badgePulse 2s ease infinite !important;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}

/* Profile avatar ring */
.staff-profile-image-small {
    border-radius: 50% !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
.staff-profile-image-small:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 0 0 3px var(--sw-primary), 0 0 0 5px var(--sw-primary-glow) !important;
}

/* Dropdown menus */
.dropdown-menu {
    background: var(--sw-bg-card) !important;
    border: 1px solid var(--sw-border) !important;
    border-radius: var(--sw-radius-md) !important;
    box-shadow: var(--sw-shadow-xl) !important;
    padding: 8px !important;
    /* Tanpa animasi: dropdown langsung tampil saat diklik */
}
.dropdown-menu > li > a {
    color: var(--sw-text) !important;
    border-radius: var(--sw-radius-xs) !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    transition: all 0.15s ease !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--sw-bg-hover) !important;
    color: var(--sw-primary) !important;
}
.dropdown-header {
    color: var(--sw-text-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    padding: 6px 12px 4px !important;
}

/* --------------------------------------------------------------------------
   6. CONTENT AREA & PAGE WRAPPER
   -------------------------------------------------------------------------- */
#wrapper {
    background-color: var(--sw-bg-body) !important;
    animation: pageSlideIn 0.45s var(--sw-ease) backwards;
    min-height: 100vh;
}

@keyframes pageSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

#content {
    padding: 24px 28px !important;
}

/* Page titles */
.page-title,
h1.page-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    color: var(--sw-text) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 4px !important;
}
h1, h2, h3, h4, h5 {
    font-family: 'Outfit', sans-serif !important;
    color: var(--sw-text) !important;
    font-weight: 700 !important;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    font-size: 0.82rem !important;
}
.breadcrumb > li + li::before { color: var(--sw-text-muted) !important; }
.breadcrumb > .active { color: var(--sw-text-muted) !important; }

/* --------------------------------------------------------------------------
   7. CARDS & PANELS
   -------------------------------------------------------------------------- */
.panel_s,
.card,
.panel {
    background-color: var(--sw-bg-card) !important;
    border: 1px solid var(--sw-border) !important;
    border-radius: var(--sw-radius-lg) !important;
    box-shadow: var(--sw-shadow-sm) !important;
    margin-bottom: 24px !important;
    transition: transform 0.3s var(--sw-ease), box-shadow 0.3s ease, background-color var(--sw-tr), border-color var(--sw-tr) !important;
    overflow: hidden;
}

/* overflow: hidden di atas memotong dropdown (bootstrap-select, .btn-group, dll.)
   yang lebih panjang dari panel, termasuk panel di dalam modal. Lepas hanya
   selama ada dropdown yang terbuka, supaya sudut bulat panel tetap rapi. */
.panel_s:has(.open > .dropdown-menu),
.card:has(.open > .dropdown-menu),
.panel:has(.open > .dropdown-menu) {
    overflow: visible !important;
}

.panel_s:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--sw-shadow-md) !important;
}

/* Transform membuat panel jadi containing block untuk position: fixed di dalamnya.
   Toolbar tombol Submit (.btn-bottom-toolbar) lalu melompat masuk ke panel saat
   di-hover, kursor lepas, toolbar kembali, dan terus berulang. Panel yang memuat
   toolbar itu tidak diberi efek angkat. */
.panel_s:has(.btn-bottom-toolbar):hover {
    transform: none !important;
}

/* Efek angkat saat dropdown terbuka menggeser tombol select 2px sementara menunya
   (terutama yang dirender di <body> lewat data-container) tetap di tempat, jadi
   menu terlihat loncat/menutupi tombol. Matikan selama ada dropdown terbuka. */
.panel_s:has(.bootstrap-select.open):hover,
.panel_s:has(.open > .dropdown-menu):hover {
    transform: none !important;
}

.panel-body,
.card-body {
    background-color: transparent !important;
    color: var(--sw-text) !important;
    padding: 22px 24px !important;
}

.panel-heading,
.panel-title {
    background: transparent !important;
    border-bottom: 1px solid var(--sw-border) !important;
    padding: 16px 24px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: var(--sw-text) !important;
}

/* Dark mode card surface.
   Catatan: JANGAN pakai backdrop-filter di sini. Panel adalah ancestor dari
   markup .modal, dan backdrop-filter membuat panel jadi containing block +
   stacking context untuk position: fixed, sehingga modal terkurung di dalam
   panel dan tercetak di bawah .modal-backdrop. */
body.theme-dark .panel_s,
body.theme-dark .card,
body.theme-dark .panel {
    background: rgba(17, 24, 39, 0.92) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* Stat / Dashboard boxes */
.top_stats_wrapper {
    border-radius: var(--sw-radius-md) !important;
    border: 1px solid var(--sw-border) !important;
    background-color: var(--sw-bg-card) !important;
    padding: 20px !important;
    transition: transform 0.3s var(--sw-ease), box-shadow 0.3s ease !important;
    position: relative;
    overflow: hidden;
}
.top_stats_wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--sw-primary), #8b5cf6, #06b6d4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--sw-ease);
}
.top_stats_wrapper:hover { transform: translateY(-4px) !important; box-shadow: var(--sw-shadow-lg) !important; }
.top_stats_wrapper:hover::before { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   8. TABLES & DATATABLES
   -------------------------------------------------------------------------- */
.table,
table.dataTable {
    color: var(--sw-text) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.table th,
table.dataTable thead th {
    background: var(--sw-bg-body) !important;
    color: var(--sw-text-muted) !important;
    font-weight: 700 !important;
    font-size: 0.76rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    border-top: none !important;
    border-bottom: 2px solid var(--sw-border) !important;
    padding: 13px 16px !important;
    white-space: nowrap;
    transition: background var(--sw-tr), color var(--sw-tr) !important;
}

.table td,
table.dataTable td {
    border-bottom: 1px solid var(--sw-border) !important;
    padding: 13px 16px !important;
    vertical-align: middle !important;
    background-color: var(--sw-bg-card) !important;
    color: var(--sw-text) !important;
    transition: background 0.15s ease !important;
}

.table tr:hover td,
table.dataTable tbody tr:hover td {
    background-color: var(--sw-bg-hover) !important;
}

/* Table row animation on load */
table.dataTable tbody tr {
    animation: rowIn 0.35s var(--sw-ease) backwards;
}
@keyframes rowIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* DataTable wrapper */
.dataTables_wrapper {
    background: var(--sw-bg-card) !important;
    border-radius: var(--sw-radius-lg) !important;
    padding: 20px !important;
    border: 1px solid var(--sw-border) !important;
    box-shadow: var(--sw-shadow-sm) !important;
}
.dataTables_filter input,
.dataTables_length select {
    background: var(--sw-bg-input) !important;
    border: 1px solid var(--sw-border) !important;
    color: var(--sw-text) !important;
    border-radius: var(--sw-radius-sm) !important;
    padding: 6px 12px !important;
    transition: all 0.2s ease !important;
}
.dataTables_filter input:focus,
.dataTables_length select:focus {
    border-color: var(--sw-primary) !important;
    box-shadow: 0 0 0 3px var(--sw-primary-glow) !important;
    outline: none !important;
}
.dataTables_info,
.dataTables_filter label,
.dataTables_length label {
    color: var(--sw-text-muted) !important;
    font-size: 0.85rem !important;
}

/* --------------------------------------------------------------------------
   DATATABLES PAGINATION & FOOTER LAYOUT
   -------------------------------------------------------------------------- */
div.dataTables_wrapper div.dataTables_info {
    padding-top: 10px !important;
    color: var(--sw-text-muted) !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
}

div.dataTables_wrapper .dataTables_paging {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    float: right !important;
    margin-top: 4px !important;
}

div.dataTables_wrapper div.dataTables_paginate {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    border-radius: 0 !important;
}

/* Reset <li> wrappers to avoid double boxes */
div.dataTables_wrapper .dataTables_paginate ul.pagination > li {
    display: inline-block !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    float: none !important;
}

/* Style the actual clickable buttons <a> / <span> */
div.dataTables_wrapper .dataTables_paginate ul.pagination > li > a,
div.dataTables_wrapper .dataTables_paginate ul.pagination > li > span,
div.dataTables_wrapper .dataTables_paginate a.paginate_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--sw-border) !important;
    background: var(--sw-bg-card) !important;
    color: var(--sw-text) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    float: none !important;
    margin: 0 !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    box-shadow: var(--sw-shadow-xs) !important;
}

div.dataTables_wrapper .dataTables_paginate ul.pagination > li > a:hover,
div.dataTables_wrapper .dataTables_paginate ul.pagination > li > span:hover,
div.dataTables_wrapper .dataTables_paginate a.paginate_button:hover {
    background: var(--sw-primary-l) !important;
    border-color: var(--sw-primary) !important;
    color: var(--sw-primary) !important;
    transform: translateY(-1px) !important;
}

div.dataTables_wrapper .dataTables_paginate ul.pagination > li.active > a,
div.dataTables_wrapper .dataTables_paginate ul.pagination > li.active > a:hover,
div.dataTables_wrapper .dataTables_paginate ul.pagination > li.active > span,
div.dataTables_wrapper .dataTables_paginate ul.pagination > li.active > span:hover {
    background: var(--sw-primary) !important;
    border-color: var(--sw-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px var(--sw-primary-glow) !important;
    cursor: default !important;
}

div.dataTables_wrapper .dataTables_paginate ul.pagination > li.disabled > a,
div.dataTables_wrapper .dataTables_paginate ul.pagination > li.disabled > span {
    color: var(--sw-text-muted) !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    background: var(--sw-bg-input) !important;
    border-color: var(--sw-border) !important;
    pointer-events: none !important;
    transform: none !important;
}

/* Page Jump Select Box */
div.dataTables_wrapper .dt-page-jump {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    float: none !important;
}

div.dataTables_wrapper .dt-page-jump-select {
    height: 34px !important;
    min-width: 60px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    border: 1px solid var(--sw-border) !important;
    background-color: var(--sw-bg-input) !important;
    color: var(--sw-text) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   9. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--sw-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 9px 18px !important;
    transition: transform 0.2s var(--sw-ease), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.01em !important;
}

/* Shimmer on primary buttons */
.btn-primary::after,
.btn-success::after,
.btn-info::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.5s ease;
}
.btn-primary:hover::after,
.btn-success:hover::after,
.btn-info:hover::after { left: 150%; }

.btn-primary {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
    border-color: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 2px 8px var(--sw-primary-glow) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    border-color: #1d4ed8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px var(--sw-primary-glow) !important;
    color: #fff !important;
}

.btn-success {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    border-color: #059669 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(5,150,105,0.25) !important;
}
.btn-success:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(5,150,105,0.35) !important;
    color: #fff !important;
}

.btn-danger {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}
.btn-danger:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(220,38,38,0.35) !important; color: #fff !important; }

.btn-warning {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    border-color: #d97706 !important;
    color: #fff !important;
}
.btn-warning:hover { transform: translateY(-2px) !important; color: #fff !important; }

.btn-info {
    background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
    border-color: #0284c7 !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(2,132,199,0.25) !important;
}
.btn-info:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(2,132,199,0.35) !important; color: #fff !important; }

.btn-default {
    background: var(--sw-bg-card) !important;
    color: var(--sw-text) !important;
    border: 1.5px solid var(--sw-border) !important;
}
.btn-default:hover {
    background: var(--sw-bg-hover) !important;
    border-color: var(--sw-primary) !important;
    color: var(--sw-primary) !important;
    transform: translateY(-1px) !important;
}

/* Button group */
.btn-group .btn { transform: none !important; }
.btn-group .btn:hover { transform: none !important; z-index: 1; }
.btn:active, .btn:focus { transform: translateY(0) !important; }

/* --------------------------------------------------------------------------
   10. FORM CONTROLS
   -------------------------------------------------------------------------- */
.form-control,
select.form-control,
textarea.form-control {
    background: var(--sw-bg-input) !important;
    color: var(--sw-text) !important;
    border: 1.5px solid var(--sw-border) !important;
    border-radius: var(--sw-radius-sm) !important;
    padding: 9px 14px !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}
.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--sw-primary) !important;
    box-shadow: 0 0 0 4px var(--sw-primary-glow) !important;
    background: var(--sw-bg-card) !important;
    outline: none !important;
}
.form-control::placeholder { color: var(--sw-text-muted) !important; }

.form-group label {
    color: var(--sw-text-dim) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--sw-primary) !important;
}

/* --------------------------------------------------------------------------
   BOOTSTRAP SELECT / SELECTPICKER (Comboboxes)
   -------------------------------------------------------------------------- */
/* Kecualikan .bs-container: itu pembungkus yang dibuat bootstrap-select ketika
   menu dipindahkan ke <body>, dan pembungkus itu ikut memakai class
   .bootstrap-select. Plugin sudah memberinya lebar inline sesuai tombolnya;
   kalau ikut dipaksa 100% ia jadi selebar body, dan menu yang ber-min-width:100%
   ikut melebar ke seluruh layar. */
.bootstrap-select:not(.bs-container) {
    width: 100% !important;
}

/* Menu yang sudah dipindah ke <body> harus ikut lebar tombolnya. Plugin sempat
   mengukur lebar menu sebelum .bs-container diberi lebar inline (saat itu masih
   selebar body), lalu menuliskan hasilnya sebagai min-width inline pada ul.inner
   — pada select dengan ribuan opsi hasilnya menu selebar layar. Batasi di sini. */
.bs-container .dropdown-menu {
    max-width: 100% !important;
}
.bs-container .dropdown-menu .inner,
.bs-container .dropdown-menu ul.inner {
    min-width: 0 !important;
    max-width: 100% !important;
}
.bs-container .dropdown-menu li a {
    white-space: normal !important;
    word-break: break-word !important;
}

/* Kasus yang sama untuk menu yang TIDAK dipindah ke <body> (tetap di dalam
   .bootstrap-select). Plugin tetap menulis min-width inline pada ul.inner dari
   hasil pengukuran yang keliru, sehingga menu bisa melebar selebar halaman
   walaupun tombolnya hanya selebar kolom. Kunci ke lebar tombol. */
.bootstrap-select:not(.bs-container) .dropdown-menu {
    max-width: 100% !important;
}
.bootstrap-select:not(.bs-container) .dropdown-menu .inner,
.bootstrap-select:not(.bs-container) .dropdown-menu ul.inner {
    min-width: 0 !important;
    max-width: 100% !important;
}
.bootstrap-select:not(.bs-container) .dropdown-menu li a {
    white-space: normal !important;
    word-break: break-word !important;
}

.bootstrap-select > .btn.dropdown-toggle,
.bootstrap-select > .btn.dropdown-toggle.btn-default {
    background: var(--sw-bg-input) !important;
    border: 1.5px solid var(--sw-border) !important;
    border-radius: var(--sw-radius-sm) !important;
    color: var(--sw-text) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 6px 32px 6px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
    box-shadow: none !important;
    line-height: normal !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.bootstrap-select > .btn.dropdown-toggle:hover {
    background: var(--sw-bg-hover) !important;
    border-color: var(--sw-primary) !important;
    color: var(--sw-text) !important;
    transform: none !important;
}

.bootstrap-select > .btn.dropdown-toggle:focus,
.bootstrap-select.open > .btn.dropdown-toggle {
    background: var(--sw-bg-card) !important;
    border-color: var(--sw-primary) !important;
    box-shadow: 0 0 0 3px var(--sw-primary-glow) !important;
    color: var(--sw-text) !important;
    outline: none !important;
}

/* Prevent text clipping in filter-option */
.bootstrap-select .dropdown-toggle .filter-option {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    text-align: left !important;
    color: var(--sw-text) !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bootstrap-select .dropdown-toggle .filter-option-inner,
.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    display: block !important;
    overflow: visible !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    color: var(--sw-text) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* Caret / Arrow centering */
.bootstrap-select .dropdown-toggle .caret,
.bootstrap-select > .dropdown-toggle .bs-caret .caret {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    border-top-color: var(--sw-text-muted) !important;
    border-width: 5px 4px 0 4px !important;
}

/* Dropdown Menu Options (When Clicked) */
.bootstrap-select .dropdown-menu {
    background: var(--sw-bg-card) !important;
    border: 1px solid var(--sw-border) !important;
    border-radius: var(--sw-radius-md) !important;
    box-shadow: var(--sw-shadow-xl) !important;
    padding: 6px !important;
    margin-top: 4px !important;
    z-index: 1060 !important;
}

.bootstrap-select .dropdown-menu li {
    margin: 2px 0 !important;
}

.bootstrap-select .dropdown-menu li a {
    border-radius: 6px !important;
    padding: 8px 14px !important;
    color: var(--sw-text) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: all 0.15s ease !important;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a {
    background: var(--sw-primary) !important;
    color: #ffffff !important;
}

.bootstrap-select .bs-searchbox input.form-control {
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
}

/* Dark Mode Overrides for Bootstrap Select */
body.theme-dark .bootstrap-select > .btn.dropdown-toggle {
    background: var(--sw-bg-input) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--sw-text) !important;
}
body.theme-dark .bootstrap-select .dropdown-menu {
    background: #111827 !important;
    border-color: #1e293b !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}
body.theme-dark .bootstrap-select .dropdown-menu li a {
    color: #e2e8f0 !important;
}
body.theme-dark .bootstrap-select .dropdown-menu li a:hover,
body.theme-dark .bootstrap-select .dropdown-menu li.selected a {
    background: var(--sw-primary) !important;
    color: #ffffff !important;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--sw-bg-input) !important;
    border: 1.5px solid var(--sw-border) !important;
    border-radius: var(--sw-radius-sm) !important;
    min-height: 40px !important;
    transition: all 0.25s ease !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--sw-primary) !important;
    box-shadow: 0 0 0 4px var(--sw-primary-glow) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--sw-text) !important;
    line-height: 38px !important;
    padding-left: 14px !important;
    font-size: 0.875rem !important;
}
.select2-dropdown {
    background: var(--sw-bg-card) !important;
    border: 1px solid var(--sw-border) !important;
    border-radius: var(--sw-radius-md) !important;
    box-shadow: var(--sw-shadow-xl) !important;
}
.select2-results__option {
    color: var(--sw-text) !important;
    padding: 9px 14px !important;
    border-radius: 6px !important;
    margin: 2px 6px !important;
    font-size: 0.875rem !important;
}
.select2-results__option--highlighted {
    background: var(--sw-primary) !important;
    color: #fff !important;
}
.select2-search--dropdown .select2-search__field {
    background: var(--sw-bg-input) !important;
    border: 1px solid var(--sw-border) !important;
    border-radius: 8px !important;
    color: var(--sw-text) !important;
    padding: 8px 12px !important;
}

/* --------------------------------------------------------------------------
   11. BADGES & LABELS
   -------------------------------------------------------------------------- */
.label,
.badge {
    border-radius: 9999px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.02em !important;
}

/* --------------------------------------------------------------------------
   12. ALERTS & TOASTS
   -------------------------------------------------------------------------- */
.alert {
    border-radius: var(--sw-radius-md) !important;
    border: none !important;
    padding: 14px 18px !important;
    font-size: 0.9rem !important;
    animation: alertIn 0.4s var(--sw-ease) both !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
@keyframes alertIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.alert-success { background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important; color: #065f46 !important; border-left: 4px solid #10b981 !important; border-radius: var(--sw-radius-md) !important; }
.alert-danger  { background: linear-gradient(135deg, #fef2f2, #fee2e2) !important; color: #991b1b !important; border-left: 4px solid #ef4444 !important; border-radius: var(--sw-radius-md) !important; }
.alert-warning { background: linear-gradient(135deg, #fffbeb, #fef3c7) !important; color: #92400e !important; border-left: 4px solid #f59e0b !important; border-radius: var(--sw-radius-md) !important; }
.alert-info    { background: linear-gradient(135deg, #eff6ff, #dbeafe) !important; color: #1e40af !important; border-left: 4px solid #3b82f6 !important; border-radius: var(--sw-radius-md) !important; }

body.theme-dark .alert-success { background: rgba(5,150,105,0.12) !important; color: #34d399 !important; }
body.theme-dark .alert-danger  { background: rgba(220,38,38,0.12) !important; color: #f87171 !important; }
body.theme-dark .alert-warning { background: rgba(217,119,6,0.12) !important; color: #fbbf24 !important; }
body.theme-dark .alert-info    { background: rgba(37,99,235,0.12) !important; color: #60a5fa !important; }

/* --------------------------------------------------------------------------
   13. MODALS
   -------------------------------------------------------------------------- */
.modal-content {
    background: var(--sw-bg-card) !important;
    border: 1px solid var(--sw-border) !important;
    border-radius: var(--sw-radius-xl) !important;
    box-shadow: var(--sw-shadow-xl) !important;
    animation: modalIn 0.35s var(--sw-ease) both !important;
    /* Tanpa overflow: hidden supaya dropdown (bootstrap-select, datepicker, dll.)
       boleh keluar dari kotak modal. Sudut bulat header dan footer diatur sendiri. */
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.93) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
    background: linear-gradient(135deg, var(--sw-primary), #8b5cf6) !important;
    border-bottom: none !important;
    padding: 20px 24px !important;
    border-radius: var(--sw-radius-xl) var(--sw-radius-xl) 0 0 !important;
}
.modal-header .modal-title { color: #ffffff !important; font-family: 'Outfit', sans-serif !important; font-weight: 700 !important; font-size: 1.15rem !important; }
.modal-header .close { color: rgba(255,255,255,0.8) !important; opacity: 1 !important; transition: all 0.2s ease !important; }
.modal-header .close:hover { color: #fff !important; transform: rotate(90deg) scale(1.1) !important; }
/* Teks & link di dalam header modal berdiri di atas gradient biru-ungu. Tanpa aturan
   ini mereka mewarisi warna teks/link default yang nyaris sama dengan latarnya,
   sehingga tidak terbaca - mis. "Make public" di detail task. */
.modal-header,
.modal-header p,
.modal-header small,
.modal-header .text-muted { color: rgba(255,255,255,0.92) !important; }
.modal-header a:not(.close):not(.btn) { color: #ffffff !important; }
.modal-header a:not(.close):not(.btn):hover,
.modal-header a:not(.close):not(.btn):focus { color: #ffffff !important; opacity: 0.8 !important; }
.modal-header .text-has-action { border-bottom-color: rgba(255,255,255,0.65) !important; }
.modal-body { padding: 24px !important; color: var(--sw-text) !important; }
.modal-footer { border-top: 1px solid var(--sw-border) !important; padding: 16px 24px !important; background: var(--sw-bg-body) !important; border-radius: 0 0 var(--sw-radius-xl) var(--sw-radius-xl) !important; }
.modal-backdrop.in { opacity: 0.55 !important; }

/* --------------------------------------------------------------------------
   14. TABS & NAVIGATION
   -------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 2px solid var(--sw-border) !important;
    margin-bottom: 20px !important;
}
.nav-tabs > li > a {
    color: var(--sw-text-muted) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: all 0.2s ease !important;
    position: relative;
}
.nav-tabs > li > a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 50%; right: 50%;
    height: 2px;
    background: var(--sw-primary);
    transition: left 0.25s ease, right 0.25s ease;
}
.nav-tabs > li.active > a::after,
.nav-tabs > li > a:hover::after { left: 0; right: 0; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: var(--sw-primary) !important;
    background: transparent !important;
    border: none !important;
    border-bottom-color: transparent !important;
}
.nav-tabs > li > a:hover { color: var(--sw-text) !important; background: transparent !important; }

/* Tab content */
.tab-content { animation: fadeInUp 0.3s var(--sw-ease) backwards; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   15. MISC UI ELEMENTS
   -------------------------------------------------------------------------- */

/* Tooltips */
.tooltip-inner {
    background: rgba(15,23,42,0.95) !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    padding: 6px 12px !important;
    box-shadow: var(--sw-shadow-md) !important;
    backdrop-filter: blur(10px) !important;
}

/* Progress bars */
.progress {
    background: var(--sw-border) !important;
    border-radius: 9999px !important;
    height: 8px !important;
    overflow: hidden;
}
.progress-bar {
    background: linear-gradient(90deg, var(--sw-primary), #8b5cf6) !important;
    border-radius: 9999px !important;
    transition: width 0.8s var(--sw-ease) !important;
    animation: progressIn 1s var(--sw-ease) both;
}
@keyframes progressIn {
    from { width: 0 !important; }
}

/* Dividers */
hr {
    border-color: var(--sw-border) !important;
    margin: 20px 0 !important;
}

/* Code blocks */
code, pre {
    background: var(--sw-bg-input) !important;
    border: 1px solid var(--sw-border) !important;
    color: #e11d48 !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
}

/* Inline labels & badges
   NOTE: the base Perfex/Tailwind theme gives .label-* a dark text color meant for a
   light tinted background. Since we repaint the background with a solid color, the
   text color MUST be repainted too or the label becomes dark-on-dark (unreadable). */
.label-primary,
.badge-primary,
a.label-primary,
a.badge-primary { background: var(--sw-primary) !important; border-color: var(--sw-primary) !important; color: #ffffff !important; }
.label-success,
.badge-success,
a.label-success,
a.badge-success { background: var(--sw-success) !important; border-color: var(--sw-success) !important; color: #ffffff !important; }
.label-warning,
.badge-warning,
a.label-warning,
a.badge-warning { background: var(--sw-warning) !important; border-color: var(--sw-warning) !important; color: #ffffff !important; }
.label-danger,
.badge-danger,
a.label-danger,
a.badge-danger  { background: var(--sw-danger) !important; border-color: var(--sw-danger) !important; color: #ffffff !important; }
.label-info,
.badge-info,
a.label-info,
a.badge-info    { background: var(--sw-info) !important; border-color: var(--sw-info) !important; color: #ffffff !important; }
.label-default,
.badge-default,
a.label-default,
a.badge-default { background: #64748b !important; border-color: #64748b !important; color: #ffffff !important; }

/* Hover states keep the text readable too */
.label-primary[href]:hover, .label-primary[href]:focus,
.label-success[href]:hover, .label-success[href]:focus,
.label-warning[href]:hover, .label-warning[href]:focus,
.label-danger[href]:hover,  .label-danger[href]:focus,
.label-info[href]:hover,    .label-info[href]:focus,
.label-default[href]:hover, .label-default[href]:focus { color: #ffffff !important; filter: brightness(0.92); }

/* Anything nested inside a colored label (icons, .tag spans) follows the label color */
.label-primary *, .label-success *, .label-warning *,
.label-danger *, .label-info *, .label-default *,
.badge-primary *, .badge-success *, .badge-warning *,
.badge-danger *, .badge-info *, .badge-default * { color: inherit !important; }

/* --------------------------------------------------------------------------
   16. ANIMATION POOL (Utility Classes)
   -------------------------------------------------------------------------- */

/* Fade In variants */
.sw-fade-in     { animation: fadeIn     0.4s var(--sw-ease) backwards; }
.sw-fade-up     { animation: fadeInUp   0.5s var(--sw-ease) backwards; }
.sw-fade-down   { animation: fadeInDown 0.5s var(--sw-ease) backwards; }
.sw-fade-left   { animation: fadeInLeft 0.5s var(--sw-ease) backwards; }
.sw-fade-right  { animation: fadeInRight 0.5s var(--sw-ease) backwards; }

@keyframes fadeIn     { from {opacity:0}                           to {opacity:1} }
@keyframes fadeInDown { from {opacity:0;transform:translateY(-20px)} to {opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft { from {opacity:0;transform:translateX(-20px)} to {opacity:1;transform:translateX(0)} }
@keyframes fadeInRight{ from {opacity:0;transform:translateX(20px)} to {opacity:1;transform:translateX(0)} }

/* Scale bounce */
.sw-bounce-in   { animation: bounceIn 0.6s var(--sw-ease) backwards; }
@keyframes bounceIn {
    0%   { opacity:0; transform:scale(0.7); }
    60%  { opacity:1; transform:scale(1.05); }
    80%  { transform:scale(0.97); }
    100% { transform:scale(1); }
}

/* Skeleton shimmer */
.sw-skeleton {
    background: linear-gradient(90deg, var(--sw-border) 25%, var(--sw-bg-hover) 50%, var(--sw-border) 75%) !important;
    background-size: 200% 100% !important;
    animation: skeleton 1.5s linear infinite !important;
    border-radius: var(--sw-radius-sm) !important;
}
@keyframes skeleton {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Spin loader */
.sw-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Pulse ring */
.sw-pulse { animation: pulseRing 1.8s ease infinite; }
@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 var(--sw-primary-glow); }
    70%  { box-shadow: 0 0 0 10px rgba(37,99,235,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}

/* Float */
.sw-float { animation: floatY 4s ease-in-out infinite; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* Stagger delay utilities */
.sw-delay-1  { animation-delay: 0.1s !important; }
.sw-delay-2  { animation-delay: 0.2s !important; }
.sw-delay-3  { animation-delay: 0.3s !important; }
.sw-delay-4  { animation-delay: 0.4s !important; }
.sw-delay-5  { animation-delay: 0.5s !important; }

/* --------------------------------------------------------------------------
   17. DARK MODE SPECIFIC REFINEMENTS
   -------------------------------------------------------------------------- */
body.theme-dark #search_input {
    background: var(--sw-bg-input) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
body.theme-dark .dropdown-menu { box-shadow: 0 24px 64px rgba(0,0,0,0.7) !important; }
body.theme-dark .table th,
body.theme-dark table.dataTable thead th { background: rgba(255,255,255,0.03) !important; }
body.theme-dark .table td,
body.theme-dark table.dataTable td { background: var(--sw-bg-card) !important; }
body.theme-dark .table tr:hover td,
body.theme-dark table.dataTable tbody tr:hover td { background: rgba(255,255,255,0.05) !important; }
body.theme-dark .dataTables_wrapper { background: var(--sw-bg-card) !important; border-color: rgba(255,255,255,0.06) !important; }
body.theme-dark .nav-tabs { border-bottom-color: rgba(255,255,255,0.08) !important; }
body.theme-dark .select2-results__option { color: var(--sw-text) !important; }
body.theme-dark .select2-results__option--highlighted { background: var(--sw-primary) !important; }
body.theme-dark code { color: #f472b6 !important; }
body.theme-dark .breadcrumb > .active { color: rgba(255,255,255,0.4) !important; }

/* --------------------------------------------------------------------------
   18. CUSTOM SCROLLBAR — Global
   -------------------------------------------------------------------------- */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--sw-border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--sw-text-muted); }

/* --------------------------------------------------------------------------
   19. LOADING INDICATOR OVERRIDE
   -------------------------------------------------------------------------- */
#page-loader,
.page-loader {
    background: var(--sw-bg-body) !important;
}

/* --------------------------------------------------------------------------
   20. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    #wrapper, #header, .btn-bottom-toolbar { margin-left: 0 !important; }
    #wrapper { padding-top: 60px; }
}

/* --------------------------------------------------------------------------
   21. RIPPLE KEYFRAME (injected by JS animation engine)
   -------------------------------------------------------------------------- */
@keyframes swRipple {
    to { transform: scale(4); opacity: 0; }
}

/* --------------------------------------------------------------------------
   22. SIDEBAR MENU ITEM STAGGER ON LOAD
   -------------------------------------------------------------------------- */
#side-menu > li {
    animation: slideInLeft 0.4s var(--sw-ease) both;
}
#side-menu > li:nth-child(1)  { animation-delay: 0.05s; }
#side-menu > li:nth-child(2)  { animation-delay: 0.10s; }
#side-menu > li:nth-child(3)  { animation-delay: 0.15s; }
#side-menu > li:nth-child(4)  { animation-delay: 0.20s; }
#side-menu > li:nth-child(5)  { animation-delay: 0.25s; }
#side-menu > li:nth-child(6)  { animation-delay: 0.30s; }
#side-menu > li:nth-child(7)  { animation-delay: 0.35s; }
#side-menu > li:nth-child(8)  { animation-delay: 0.40s; }
#side-menu > li:nth-child(9)  { animation-delay: 0.45s; }
#side-menu > li:nth-child(10) { animation-delay: 0.50s; }
#side-menu > li:nth-child(n+11) { animation-delay: 0.55s; }

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   23. HEADER TOP BAR — Animated gradient accent line
   -------------------------------------------------------------------------- */
#header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, #2563eb, #8b5cf6, #06b6d4, #10b981, #2563eb);
    background-size: 300% 100%;
    animation: headerLine 6s linear infinite;
    opacity: 0.7;
    pointer-events: none;
}
#header { position: relative !important; overflow: visible !important; }

body.theme-dark #header::after { opacity: 0.5; }

@keyframes headerLine {
    from { background-position: 0% 50%; }
    to   { background-position: 300% 50%; }
}

/* --------------------------------------------------------------------------
   24. SMOOTH THEME TRANSITION — everything fades smoothly
   -------------------------------------------------------------------------- */
body.admin,
body.admin #header,
body.admin aside#menu,
body.admin #wrapper,
body.admin .panel_s,
body.admin .panel,
body.admin .card,
body.admin .table td,
body.admin .table th,
body.admin .form-control,
body.admin .btn-default,
body.admin .dropdown-menu,
body.admin .modal-content {
    transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease !important;
}

/* But keep transform snappy */
body.admin .btn { transition: transform 0.2s var(--sw-ease), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important; }

/* --------------------------------------------------------------------------
   25. SEARCH RESULT DROPDOWN
   -------------------------------------------------------------------------- */
#search_results,
.search-results {
    background: var(--sw-bg-card) !important;
    border: 1px solid var(--sw-border) !important;
    border-radius: var(--sw-radius-md) !important;
    box-shadow: var(--sw-shadow-xl) !important;
}

/* ==========================================================================
   HOTFIX v3.1 — Header Icons, Alert Layout, Sidebar Scroll
   ========================================================================== */

/* ------------------------------------------------------------------
   FIX 1: Header right-side icons — restore clean navbar layout
   ------------------------------------------------------------------ */
/* Remove overly-aggressive icon-button styling that disrupts spacing */
#header .nav > li.icon > a {
    padding: 0 8px !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 50px !important;
}
#header .nav > li.icon > a:hover {
    background: rgba(0,0,0,0.04) !important;
    color: var(--sw-primary) !important;
    border-radius: var(--sw-radius-xs) !important;
}
body.theme-dark #header .nav > li.icon > a:hover {
    background: rgba(255,255,255,0.06) !important;
}

/* Ensure navbar-right items are properly aligned and not wrapped */
#header .navbar-right {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin-right: 0 !important;
}
#header .navbar-right > li {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

/* Fix the top nav overall flex layout */
#header nav {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 56px !important;
}
#header nav > .tw-flex {
    width: 100% !important;
    align-items: center !important;
}

/* ------------------------------------------------------------------
   FIX 2: Alert / notification — remove flex that breaks Bootstrap alerts
   ------------------------------------------------------------------ */
/* Override: remove flex from generic .alert — Bootstrap alerts use
   block-level elements internally and do NOT expect flex parent */
.alert {
    display: block !important;
    animation: alertIn 0.4s var(--sw-ease) both !important;
}

/* Only add flex for alerts that contain our custom icon structure */
.alert.sw-alert-flex {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

/* Fix the yellow environment/development notice alert specifically */
.alert-warning {
    display: block !important;
}
/* Make sure text inside alerts wraps normally */
.alert p,
.alert span,
.alert div {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* ------------------------------------------------------------------
   FIX 3: Sidebar scroll — remove sticky/overflow from header that
   creates a new stacking context blocking sidebar scroll events
   ------------------------------------------------------------------ */

/* Revert position:sticky + overflow:visible that was breaking sidebar */
#header {
    position: relative !important;
    overflow: hidden !important;
    z-index: 900 !important;
}

/* Keep the animated gradient line but constrain it inside header */
#header::after {
    position: absolute !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Restore touch-action and pointer-events on sidebar */
aside#menu,
#menu,
.sidebar {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
    overscroll-behavior: contain !important;
}

/* Make sure sidebar ::after pseudo doesn't block scroll events */
aside#menu::after {
    pointer-events: none !important;
    touch-action: none !important;
}

/* Ensure the side-menu itself doesn't block events */
#side-menu {
    pointer-events: auto !important;
}

/* Fix: on dashboard (and all pages), sidebar must sit above content overlays */
aside#menu {
    z-index: 1050 !important;
}

/* Prevent body overflow:hidden from locking sidebar scroll */
body.admin {
    overflow-y: auto !important;
}


/* ==========================================================================
   HOTFIX v3.2 — Sidebar Scroll Root Cause Fix
   ========================================================================== */

/* The aside.php logo <li> has Tailwind class tw-overflow-hidden which can
   cause the sidebar scroll container's height to be miscalculated.
   Override it so it never clips the sidebar scroll region. */
aside#menu ul#side-menu > li:first-child,
#menu ul#side-menu > li:first-child,
#side-menu > li.tw-overflow-hidden {
    overflow: visible !important;
}

/* Ensure the <ul#side-menu> and <ul#setup-menu> never clip content and have bottom padding for full scroll */
ul#side-menu,
ul#setup-menu {
    overflow: visible !important;
    height: auto !important;
    min-height: 100% !important;
    padding-bottom: 80px !important;
}

/* The main sidebar <aside> is the scroll container — constrained to 100vh */
aside#menu,
#menu {
    display: block !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    will-change: scroll-position !important;
    /* Remove animation that can interfere with scroll on main sidebar only */
    animation: none !important;
}

/* Setup menu (#setup-menu-wrapper has class .sidebar) MUST keep its
   fadeIn/fadeOut animation — do NOT suppress it */
#setup-menu-wrapper {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
    will-change: scroll-position !important;
    /* animation is intentionally NOT suppressed here */
}

/* When opened: force full visibility regardless of animation state */
#setup-menu-wrapper.display-block {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    z-index: 1100 !important;
}

/* Sidebar scroll constraints (already defined above near line 195) */

/* Stop page-level scroll from stealing sidebar scroll events */
body.admin {
    overscroll-behavior: none !important;
}

/* Ensure #wrapper does not create an overflow context that covers sidebar */
#wrapper {
    overflow: visible !important;
    position: relative !important;
}

/* Fix: logo li tw-mt-[63px] adds top-margin causing layout miscalc on mobile-
   On larger screens (sm:tw-mt-0), it's fine. Normalize for desktop. */
@media (min-width: 640px) {
    #side-menu > li:first-child {
        margin-top: 0 !important;
    }
}

/* ==========================================================================
   HOTFIX v3.3 — Header Layout, Icon Scaling & Dropdown Overlay Fix
   ========================================================================== */

/* 1. CRITICAL: #header MUST have overflow: visible so dropdown menus float freely! */
#header {
    position: relative !important;
    overflow: visible !important;
    z-index: 1000 !important;
}

/* Constrain animated line to the header bar without clipping dropdowns */
#header::after {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 2px !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* 2. Navbar Right Container — Clean right padding & gap alignment */
#header .navbar-right {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding-right: 20px !important;     /* Clean margin from right screen edge */
    margin-right: 0 !important;
    gap: 6px !important;
    height: 56px !important;
}

#header .navbar-right > li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    height: 100% !important;
    margin: 0 !important;
}

/* 3. Standardize Header Icon Sizing & Touch Targets */
#header .navbar-right > li > a,
#header .navbar-right > li.icon > a,
#header .navbar-right .top-timers,
#header .navbar-right .notifications-icon {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: #334155 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

/* Header Action Buttons (Rounded bordered containers) */
#header .navbar-right span.tw-rounded-md,
#header .navbar-right span.sm\:tw-rounded-md,
#header .navbar-right #sw-theme-toggle span {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    margin-top: 0 !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

#header .navbar-right span.tw-rounded-md:hover,
#header .navbar-right span.sm\:tw-rounded-md:hover,
#header .navbar-right #sw-theme-toggle span:hover {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

/* SVG icons stroke & visibility (Timesheet clock, Notifications bell, Todo checkmark, Newsfeed) */
#header .navbar-right svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #334155 !important;
    color: #334155 !important;
    stroke-width: 1.8px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: stroke 0.2s ease, transform 0.2s ease !important;
}

#header .navbar-right a:hover svg {
    stroke: #2563eb !important;
    color: #2563eb !important;
    transform: scale(1.08) !important;
}

#header .navbar-right i.fa,
#header .navbar-right i.fa-solid,
#header .navbar-right i.fa-regular {
    font-size: 1.15rem !important;
    color: #334155 !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

#header .navbar-right a:hover i.fa,
#header .navbar-right a:hover i.fa-solid {
    color: #2563eb !important;
    transform: scale(1.08) !important;
}

/* Dark Mode Overrides for Header Icons */
body.theme-dark #header .navbar-right > li > a,
body.theme-dark #header .navbar-right > li.icon > a {
    color: #cbd5e1 !important;
}
body.theme-dark #header .navbar-right svg {
    stroke: #cbd5e1 !important;
    color: #cbd5e1 !important;
}
body.theme-dark #header .navbar-right span.tw-rounded-md,
body.theme-dark #header .navbar-right span.sm\:tw-rounded-md,
body.theme-dark #header .navbar-right #sw-theme-toggle span {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
body.theme-dark #header .navbar-right span.tw-rounded-md:hover,
body.theme-dark #header .navbar-right span.sm\:tw-rounded-md:hover,
body.theme-dark #header .navbar-right #sw-theme-toggle span:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}
body.theme-dark #header .navbar-right i.fa,
body.theme-dark #header .navbar-right i.fa-solid {
    color: #cbd5e1 !important;
}
body.theme-dark #header .navbar-right a:hover svg {
    stroke: #60a5fa !important;
    color: #60a5fa !important;
}
body.theme-dark #header .navbar-right a:hover i.fa,
body.theme-dark #header .navbar-right a:hover i.fa-solid {
    color: #60a5fa !important;
}

/* 4. Profile Picture Styling */
.header-user-profile a.profile {
    width: auto !important;
    height: auto !important;
    padding: 2px !important;
}
.staff-profile-image-small {
    width: 36px !important;
    height: 36px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 2px solid var(--sw-primary) !important;
    margin: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.header-user-profile:hover .staff-profile-image-small,
.header-user-profile.open .staff-profile-image-small {
    transform: scale(1.08) !important;
    box-shadow: 0 0 0 3px var(--sw-primary-glow) !important;
}

/* 5. Dropdown Menu Overlay & Positioning Fix */
#header .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 6px !important;
    z-index: 99999 !important;          /* Highest z-index so never covered by cards/tables */
    min-width: 210px !important;
    background: var(--sw-bg-card) !important;
    border: 1px solid var(--sw-border) !important;
    border-radius: var(--sw-radius-md) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
    padding: 8px !important;
}

body.theme-dark #header .dropdown-menu {
    background: #111827 !important;
    border-color: #1e2d45 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

/* Display active dropdown when Bootstrap toggles .open */
#header .open > .dropdown-menu {
    display: block !important;
}

/* Dropdown Submenus (e.g. Language Selector) */
#header .dropdown-submenu {
    position: relative !important;
}
#header .dropdown-submenu > .dropdown-menu {
    top: 0 !important;
    right: 100% !important;
    left: auto !important;
    margin-top: -6px !important;
    margin-right: 4px !important;
}
#header .dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
}

/* 6. Badges (Notification count, Todo count, Started Timers count) */
#header .navbar-right .badge,
#header .navbar-right .nav-total-todos,
#header .navbar-right .icon-started-timers {
    position: absolute !important;
    top: 2px !important;
    right: 1px !important;
    z-index: 10 !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 2px 5px !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 14px !important;
    border-radius: 9999px !important;
    border: 2px solid var(--sw-bg-header) !important;
}

/* ==========================================================================
   SIDEBAR MENU SEARCH BAR
   ========================================================================== */
.sidebar-search-item {
    margin: 8px auto 4px auto !important;
    padding: 0 !important;
    width: 46px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    transition: all var(--sw-sb-anim-time, 0.25s) var(--sw-sb-ease, ease) !important;
}

.sidebar-search-wrapper {
    width: 46px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--sw-radius-sm, 10px) !important;
    position: relative !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: all var(--sw-sb-anim-time, 0.25s) var(--sw-sb-ease, ease) !important;
}

.sidebar-search-wrapper:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.sidebar-search-icon {
    font-size: 1.05rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    transition: all var(--sw-sb-anim-time, 0.25s) var(--sw-sb-ease, ease) !important;
}

/* In mini mode (collapsed sidebar and not pinned): hide input text, clear button, and shortcut badge */
aside#menu:not(:hover):not(.sidebar-pinned) .sidebar-search-input,
body:not(.sidebar-pinned) aside#menu:not(:hover) .sidebar-search-input,
aside#menu:not(:hover):not(.sidebar-pinned) .sidebar-search-clear,
body:not(.sidebar-pinned) aside#menu:not(:hover) .sidebar-search-clear,
aside#menu:not(:hover):not(.sidebar-pinned) .sidebar-search-shortcut,
body:not(.sidebar-pinned) aside#menu:not(:hover) .sidebar-search-shortcut {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Expanded mode (hovered, pinned, or mobile menu open) */
aside#menu:hover .sidebar-search-item,
#menu:hover .sidebar-search-item,
body.sidebar-pinned #side-menu .sidebar-search-item,
body.show-sidebar #side-menu .sidebar-search-item {
    width: calc(100% - 20px) !important;
    margin: 10px 10px 6px 10px !important;
    height: 38px !important;
}

aside#menu:hover .sidebar-search-wrapper,
#menu:hover .sidebar-search-wrapper,
body.sidebar-pinned #side-menu .sidebar-search-wrapper,
body.show-sidebar #side-menu .sidebar-search-wrapper {
    width: 100% !important;
    height: 38px !important;
    padding: 0 10px !important;
    justify-content: flex-start !important;
    background: rgba(15, 23, 42, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px !important;
    cursor: text !important;
}

aside#menu:hover .sidebar-search-wrapper:focus-within,
#menu:hover .sidebar-search-wrapper:focus-within,
body.sidebar-pinned #side-menu .sidebar-search-wrapper:focus-within,
body.show-sidebar #side-menu .sidebar-search-wrapper:focus-within {
    background: rgba(15, 23, 42, 0.75) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

aside#menu:hover .sidebar-search-icon,
#menu:hover .sidebar-search-icon,
body.sidebar-pinned #side-menu .sidebar-search-icon,
body.show-sidebar #side-menu .sidebar-search-icon {
    font-size: 0.875rem !important;
    margin-right: 8px !important;
    width: auto !important;
    height: auto !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

aside#menu:hover .sidebar-search-input,
#menu:hover .sidebar-search-input,
body.sidebar-pinned #side-menu .sidebar-search-input,
body.show-sidebar #side-menu .sidebar-search-input {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 0.825rem !important;
    font-weight: 500 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.sidebar-search-input::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.8rem !important;
}

.sidebar-search-shortcut {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    margin-left: 6px !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
    transition: opacity 0.15s ease !important;
}

.sidebar-search-wrapper.has-value .sidebar-search-shortcut {
    display: none !important;
}

.sidebar-search-clear {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.55) !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    font-size: 0.75rem !important;
    margin-left: 4px !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}

.sidebar-search-wrapper.has-value .sidebar-search-clear {
    display: flex !important;
}

.sidebar-search-clear:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Empty search result notification */
.sidebar-no-results {
    list-style: none !important;
    padding: 0 !important;
    margin: 4px 0 !important;
}

.sidebar-no-results-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px dashed rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 14px 8px !important;
    margin: 6px 10px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.8rem !important;
    text-align: center !important;
}

.sidebar-no-results-content i {
    font-size: 1.25rem !important;
    opacity: 0.5 !important;
}

aside#menu:not(:hover):not(.sidebar-pinned) .sidebar-no-results,
body:not(.sidebar-pinned) aside#menu:not(:hover) .sidebar-no-results {
    display: none !important;
}

#side-menu > li.sidebar-menu-hidden,
#side-menu .nav-second-level li.sidebar-menu-hidden,
.sidebar-menu-hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}




/* ==========================================================================
   FIX — Modal tertutup backdrop
   Elemen dengan transform / backdrop-filter / filter selain `none` menjadi
   containing block sekaligus stacking context untuk `position: fixed` di
   dalamnya. Karena markup .modal berada di dalam .panel_s (di dalam #wrapper),
   modal ikut terkurung dan tercetak di bawah .modal-backdrop meski
   z-index-nya 10000.

   Sumber permanennya sudah dibereskan (animation-fill-mode `both` jadi
   `backwards` pada #wrapper, .sw-fade-x dan .tab-content, serta backdrop-filter
   dilepas dari panel tema gelap). Sisa satu kasus: .panel_s:hover masih
   memberi transform, dan
   kursor yang berada di atas modal otomatis membuat panel :hover karena modal
   adalah anak DOM-nya. Matikan efek angkat itu selama ada modal terbuka.
   ========================================================================== */
body.modal-open .panel_s,
body.modal-open .panel_s:hover,
body.modal-open .panel,
body.modal-open .panel:hover,
body.modal-open .card,
body.modal-open .card:hover,
body.modal-open .top_stats_wrapper,
body.modal-open .top_stats_wrapper:hover {
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

/* --------------------------------------------------------------------------
   10b. READONLY FIELDS
   Field yang diisi otomatis sistem: sedikit lebih gelap dari field biasa
   -------------------------------------------------------------------------- */
.form-control[readonly],
select.form-control[readonly],
textarea.form-control[readonly] {
    background: var(--sw-bg-hover) !important;
    color: var(--sw-text-muted) !important;
    border-color: var(--sw-border) !important;
    cursor: not-allowed !important;
}
.form-control[readonly]:focus,
select.form-control[readonly]:focus,
textarea.form-control[readonly]:focus {
    background: var(--sw-bg-hover) !important;
    border-color: var(--sw-border) !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   10c. PEMILIH PROJECT DI HEADER PROJECT
   Nama project + client panjang: dipotong "..." di dalam tombol, tidak
   menembus caret (aturan filter-option global memakai overflow: visible)
   -------------------------------------------------------------------------- */
#project_view_name {
    max-width: 560px;
}
#project_view_name .bootstrap-select > .btn.dropdown-toggle {
    padding: 6px 34px 6px 12px !important;
}
.project-members-more {
    min-width: 1.75rem;
    padding: 0 6px;
}

/* Modal Members: tombol pilihan dipotong di dalam kotak, daftar anggota di-scroll */
#add-edit-members .bootstrap-select .dropdown-toggle .filter-option,
#add-edit-members .bootstrap-select .dropdown-toggle .filter-option-inner,
#add-edit-members .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
#project-members-filter {
    max-width: 220px;
}
#project-members-list {
    max-height: 320px;
}
#project-members-list .project-members-remove:hover {
    color: var(--sw-danger, #dc2626);
}
#project_view_name .bootstrap-select .dropdown-toggle .filter-option,
#project_view_name .bootstrap-select .dropdown-toggle .filter-option-inner,
#project_view_name .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}