/* 
========================================================================
   BOOTSTRAP 5 ADMIN TEMPLATE - SPARK ADMIN
   DESIGN SYSTEM & CUSTOM STYLESHEET
   Developed with premium UI/UX standards

   Template Name: Spark Admin
   Version: 1.0 
   Author: Spark Admin Team 
   Email: hello.sparkadmin@gmail.com
   URL: https://sparkadmin.web.id
========================================================================
*/

/* ---------------------------------------------------------------------
   TABLE OF CONTENTS
   ---------------------------------------------------------------------
   1. Google Fonts CDN Import (Plus Jakarta Sans)
   2. Design System Variables
   3. Base Overrides & Typography
   4. Sidebar Component (.sidebar-wrapper)
   5. Main Wrapper Layout
   6. Custom Header / Navbar Component
   7. Page Title & Controls Row
   8. Cards & Styling Components
   9. Custom List (Transaction List Table replacement)
   10. Custom Progress & Bar Chart Custom Layouts
   11. Right Panel Component & Layout
   12. Responsive Adjustments
   13. Login Page Styles (.login-wrapper)
   14. Flatpickr Theme Customization (Spark Admin Styles)
   15. Dropdown Component Styles (Reusable)
   16. Footer Component Styles
   17. Navbar Profile Dropdown Styles
   18. Reusable Premium Table Component
   19. Custom Premium Form Elements Design System
   20. Reusable Custom Buttons & Alerts Design System
   21. Error 404 Page Styling Layout
   22. Keyframe Animations & Overlays
   23. Reusable Helper & Utility Classes (Zero Inline Style Policy)
   24. Transaction List Component
--------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   1. Google Fonts CDN Import (Plus Jakarta Sans)
--------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------
   2. Design System Variables
--------------------------------------------------------------------- */
:root {
    /* Stallion Group Brand Theme Colors (Poster Blend) */
    --bs-body-bg: #F4F7FB;            /* Crisp modern light canvas with slight cool blue tone */
    --bs-body-font-family: 'Plus Jakarta Sans', sans-serif;
    
    --brand-navy-dark: #002855;       /* Stallion Deep Navy Blue */
    --brand-navy-medium: #0A3D78;     /* Stallion Slate Medium Blue */
    --brand-navy-light: #15539D;      /* Interactive blue */
    
    --brand-cyan: #009FE3;            /* Stallion Vibrant Cyan/Sky Blue */
    --brand-cyan-hover: #0084BE;      
    --brand-cyan-light: rgba(0, 159, 227, 0.12);
    
    --brand-orange: #F58220;          /* Stallion Warm Sunset Orange */
    --brand-orange-hover: #E06F12;    
    --brand-orange-light: rgba(245, 130, 32, 0.15);
    
    --brand-yellow: #FFB81C;          /* Stallion Bright Golden Yellow */
    --brand-yellow-hover: #EAA308;
    --brand-yellow-light: rgba(255, 184, 28, 0.2);
    
    /* Legacy brand alias mapping for complete backward compatibility */
    --brand-forest-dark: #002855;     /* Replaced forest dark with stallion navy */
    --brand-forest-medium: #0A3D78;   /* Replaced forest medium with stallion blue */
    --brand-forest-light: #15539D;    /* Replaced forest light with stallion interactive blue */
    --brand-lime: #F58220;            /* Primary warm accent replaced with Stallion Orange */
    --brand-lime-hover: #FFB81C;      /* Secondary warm accent Stallion Gold Yellow */
    --brand-lime-translucent: rgba(245, 130, 32, 0.15);
    
    --text-main: #0B192C;             /* Deep navy charcoal headers & main text */
    --text-muted-green: #64748B;      /* Refined slate muted text */
    --text-sidebar-muted: #64748B;    /* Sidebar/subdued text */
    
    --card-background: #FFFFFF;
    --border-light: #E2E8F0;
    --border-dark-green: rgba(226, 232, 240, 0.8);
    
    /* System Colors */
    --sys-green: #10B981;
    --sys-green-bg: #DCFCE7;
    --sys-red: #EF4444;
    --sys-red-bg: #FEE2E2;
    --sys-orange: #F58220;
    --sys-orange-bg: #FFF3E8;
    --sys-blue: #009FE3;
    --sys-blue-bg: #E0F2FE;
    
    /* Layout Configurations */
    --sidebar-width: 280px;
    --navbar-height: 80px;
    
    /* Border Radii */
    --radius-xxl: 24px;
    --radius-xl: 18px;
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 6px;
    
    /* Box Shadows (Clean & crisp light shadows) */
    --shadow-sm: 0 2px 8px rgba(11, 25, 44, 0.04);
    --shadow-md: 0 10px 30px rgba(11, 25, 44, 0.06);
    --shadow-lg: 0 20px 50px rgba(11, 25, 44, 0.1);
}

/* ---------------------------------------------------------------------
   3. Base Overrides & Typography
--------------------------------------------------------------------- */
body {
    background-color: var(--bs-body-bg);
    color: var(--text-main);
    font-family: var(--bs-body-font-family);
    font-size: 0.925rem;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-main);
    font-weight: 700;
    letter-spacing: -0.025em;
}

a {
    color: var(--brand-forest-medium);
    text-decoration: none;
    transition: all 0.25s ease-in-out;
}
a:hover {
    color: var(--brand-lime-hover);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* ---------------------------------------------------------------------
   4. Sidebar Component (.sidebar-wrapper)
   Extremely dark sidebar layout
--------------------------------------------------------------------- */
.sidebar-wrapper {
    width: var(--sidebar-width);
    background-color: var(--brand-forest-dark);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    border-right: 1px solid var(--border-dark-green);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 2.5rem;
    padding-left: 0.5rem;
    text-decoration: none;
    transition: color 0.25s ease;
}

.sidebar-brand:hover {
    color: #FFFFFF;
}

.sidebar-brand i {
    color: var(--brand-lime);
    font-size: 1.5rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.sidebar-brand:hover i {
    transform: scale(1.1) rotate(90deg);
    color: var(--brand-lime-hover);
}

.sidebar-menu-section {
    margin-bottom: 1.75rem;
}

.sidebar-menu-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-sidebar-muted);
    padding-left: 0.75rem;
    margin-bottom: 0.75rem;
    opacity: 0.6;
}

.sidebar-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu-item {
    margin-bottom: 0.35rem;
}

.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.85rem;
    font-size: 0.95rem;
    color: var(--text-sidebar-muted);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.sidebar-menu-link i {
    font-size: 1.15rem;
    transition: color 0.2s ease;
}

/* Active State & Hover States */
.sidebar-menu-link:hover {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.03);
}

.sidebar-menu-link.active {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

/* Vertical indicator border on left edge */
.sidebar-menu-link.active::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 15%;
    height: 70%;
    width: 4px;
    background-color: var(--brand-lime);
    border-radius: 0 4px 4px 0;
}

.sidebar-menu-link.active i {
    color: var(--brand-lime);
}

.sidebar-menu-badge {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: var(--brand-lime);
    color: var(--brand-forest-dark);
    padding: 0.15rem 0.5rem;
    border-radius: 50rem;
}

/* Dropdown Caret Styling */
.sidebar-menu-link .dropdown-caret {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.sidebar-menu-link[aria-expanded="true"] .dropdown-caret {
    transform: rotate(180deg);
}

/* Submenu layout */
.sidebar-submenu {
    list-style: none;
    padding-left: 2.5rem;
    margin: 0.25rem 0 0.5rem 0;
}

.sidebar-submenu-link {
    display: block;
    padding: 0.45rem 0;
    color: var(--text-sidebar-muted);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
}

.sidebar-submenu-link:hover {
    color: #FFFFFF;
}

/* Bottom Profile Card in Sidebar */
.sidebar-profile {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: rgba(255, 255, 255, 0.03);
    padding: 0.85rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-dark-green);
    color: #FFFFFF;
}

.sidebar-profile-img,
.sidebar-profile-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--brand-lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-profile-info {
    flex-grow: 1;
    min-width: 0; /* allows text truncation */
}

.sidebar-profile-name {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-profile-email {
    font-size: 0.75rem;
    color: var(--text-sidebar-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}

/* Minimized Sidebar Adjustments */
body.sidebar-minimized {
    --sidebar-width: 80px;
}

body.sidebar-minimized .sidebar-wrapper {
    padding: 2rem 0.75rem;
    align-items: center;
}

body.sidebar-minimized .sidebar-brand span,
body.sidebar-minimized .sidebar-menu-title,
body.sidebar-minimized .sidebar-menu-link span,
body.sidebar-minimized .sidebar-menu-badge,
body.sidebar-minimized .dropdown-caret,
body.sidebar-minimized .sidebar-submenu,
body.sidebar-minimized .sidebar-profile-info {
    display: none !important;
}

body.sidebar-minimized .sidebar-brand {
    padding-left: 0;
    justify-content: center;
    width: 100%;
}

body.sidebar-minimized .sidebar-menu-link {
    justify-content: center;
    padding: 0.75rem;
}

body.sidebar-minimized .sidebar-menu-link.active::before {
    left: -0.75rem;
}

body.sidebar-minimized .sidebar-menu-link i {
    font-size: 1.35rem;
}

body.sidebar-minimized .sidebar-profile {
    padding: 0.5rem;
    justify-content: center;
    border: none;
    background-color: transparent;
}

/* ---------------------------------------------------------------------
   5. Main Wrapper Layout
--------------------------------------------------------------------- */
.main-wrapper {
    margin-left: var(--sidebar-width);
    padding: 2rem 2.5rem;
    min-height: 100vh;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------
   6. Custom Header / Navbar Component
--------------------------------------------------------------------- */
.navbar-custom {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(244, 246, 245, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-top: -2rem;
    margin-left: -2.5rem;
    margin-right: -2.5rem;
    padding: 1.25rem 2.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: grid !important;
    grid-template-columns: 1fr 480px 1fr !important;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1.5rem;
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Quick Actions Dropdown Button */
.btn-quick-action {
    background-color: var(--brand-forest-medium);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0.5rem 1.15rem;
    font-size: 0.825rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}


.btn-quick-action:hover {
    background-color: var(--brand-forest-dark);
    color: #FFFFFF;
    box-shadow: 0 4px 12px var(--brand-lime-translucent);
}

.btn-quick-action:focus {
    outline: none;
}

.btn-quick-action.dropdown-toggle::after {
    display: none !important;
}

.btn-quick-action i {
    font-size: 0.85rem;
    transition: transform 0.25s ease;
}

.btn-quick-action:hover i {
    transform: rotate(90deg);
}

/* Custom Dropdown Menu styles */
.dropdown-menu-quick-action {
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 0.5rem 0 !important;
    margin-top: 0.5rem !important;
    border: none !important;
    animation: dropdownFadeIn 0.2s ease;
}


.dropdown-menu-quick-action .dropdown-header {
    font-size: 0.725rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted-green);
    padding: 0.5rem 1.25rem 0.25rem;
}

.dropdown-menu-quick-action .dropdown-item {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    padding: 0.55rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transition: all 0.2s ease-in-out;
}

.dropdown-menu-quick-action .dropdown-item i {
    font-size: 0.95rem;
    color: var(--text-muted-green);
    transition: color 0.2s;
}

.dropdown-menu-quick-action .dropdown-item:hover {
    background-color: var(--bs-body-bg);
    color: var(--brand-forest-medium);
}

.dropdown-menu-quick-action .dropdown-item:hover i {
    color: var(--brand-forest-medium);
}

.dropdown-menu-quick-action .dropdown-divider {
    border-color: var(--border-light);
    margin: 0.4rem 0;
}

.navbar-title-dropdown {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
}

.navbar-search-wrapper {
    width: 480px;
    max-width: 100%;
    position: relative;
    margin: 0 auto;
}

.navbar-search-input {
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid var(--border-light);
    border-radius: 50rem;
    padding: 0.65rem 1.25rem;
    padding-right: 2.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    outline: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease-in-out;
}

.navbar-search-input:focus {
    border-color: rgba(5, 28, 18, 0.25);
    box-shadow: 0 4px 12px rgba(11, 19, 15, 0.05);
}

.navbar-search-btn {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted-green);
    padding: 0;
    display: flex;
    align-items: center;
}

.navbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.navbar-action-btn {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    background-color: #FFFFFF;
    border: 1px solid var(--border-light);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}

.navbar-action-btn:hover {
    background-color: var(--border-light);
    color: var(--brand-forest-medium);
}

.navbar-action-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    background-color: var(--sys-green);
    border-radius: 50rem;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
    animation: statusPulse 2s infinite;
}

.navbar-actions .dropdown-toggle::after {
    display: none !important;
}

/* Custom Dropdown Notifications */
.dropdown-menu-notification {
    width: 320px;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-lg) !important;
    margin-top: 0.5rem !important;
    border: none !important;
    animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}



.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
}

.notification-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.btn-clear-all {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-forest-medium);
    transition: color 0.2s;
    outline: none;
}

.btn-clear-all:hover {
    color: var(--brand-lime-hover);
}

.notification-list {
    max-height: 260px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.2s ease;
    text-decoration: none;
}

.notification-item:hover {
    background-color: var(--bs-body-bg);
}

.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.notification-content {
    flex-grow: 1;
    min-width: 0;
}

.notification-text {
    font-size: 0.8rem;
    color: var(--text-main);
    margin-bottom: 0.15rem;
    line-height: 1.35;
}

.notification-time {
    font-size: 0.725rem;
    color: var(--text-muted-green);
}

.notification-unread-dot {
    width: 6px;
    height: 6px;
    border-radius: 50rem;
    background-color: var(--sys-green);
    flex-shrink: 0;
    margin-top: 0.35rem;
}

.notification-footer {
    display: block;
    text-align: center;
    padding: 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand-forest-medium);
    text-decoration: none;
    transition: all 0.25s ease-in-out;
}

.notification-footer:hover {
    color: var(--brand-lime-hover);
}

.btn-dark-custom {
    background-color: var(--text-main);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.65rem 1.25rem;
    border-radius: 50rem;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease-in-out;
}

.btn-dark-custom:hover {
    background-color: #000000;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.btn-dark-custom .icon-wrap {
    width: 20px;
    height: 20px;
    border-radius: 50rem;
    background-color: #FFFFFF;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

/* Mobile Sidebar Toggle Button */
.sidebar-toggle-btn {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    background-color: #FFFFFF;
    border: 1px solid var(--border-light);
    color: var(--text-main);
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

/* Desktop Sidebar Toggle Button */
.btn-desktop-toggle {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    background-color: #FFFFFF;
    border: 1px solid var(--border-light);
    color: var(--text-main);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}

.btn-desktop-toggle:hover {
    background-color: var(--border-light);
    color: var(--brand-forest-medium);
}

/* ---------------------------------------------------------------------
   7. Page Title & Controls Row
--------------------------------------------------------------------- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.page-title {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.page-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted-green);
    margin-bottom: 0;
}

.btn-date-picker {
    background-color: #FFFFFF;
    border: 1px solid var(--border-light);
    border-radius: 50rem;
    padding: 0.55rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.btn-date-picker:hover {
    background-color: var(--border-light);
}

/* ---------------------------------------------------------------------
   8. Cards & Styling Components
 --------------------------------------------------------------------- */
.card {
    background-color: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xxl);
    padding: 1.75rem;
    box-shadow: 0 4px 20px rgba(0, 40, 85, 0.04);
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
    box-shadow: 0 10px 30px rgba(0, 40, 85, 0.08);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--brand-navy-dark);
    margin-bottom: 0;
}

.card-more-btn {
    background: none;
    border: none;
    color: var(--text-muted-green);
    font-size: 1.15rem;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Stat-specific cards */
.card-stat {
    height: 100%;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-muted-green);
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand-navy-dark);
    margin-bottom: 0.75rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.785rem;
    font-weight: 600;
}

.trend-up {
    color: var(--sys-green);
}

.trend-down {
    color: var(--sys-red);
}

/* Alert Dark Card (Now Stallion Navy Card) */
.alert-green-card {
    background: linear-gradient(135deg, var(--brand-navy-dark) 0%, var(--brand-navy-medium) 100%);
    color: #FFFFFF;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 165px;
    position: relative;
    overflow: hidden;
}

/* Geometric green visual element in bottom right of Alert Card */
.alert-green-bg-shape {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    opacity: 0.95;
    pointer-events: none;
    z-index: 1;
    transform: rotate(15deg);
    transition: transform 0.4s ease-in-out;
}

/* Subtle micro-animation on hover */
.alert-green-card:hover .alert-green-bg-shape {
    transform: rotate(45deg) scale(1.05);
}

.alert-green-card .stat-value {
    color: #FFFFFF;
}

.alert-green-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 50rem;
    margin-bottom: 1.25rem;
}

.alert-green-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--sys-red);
    border-radius: 50rem;
    animation: redPulse 2s infinite;
}

@keyframes redPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.alert-green-date {
    font-size: 0.75rem;
    color: var(--text-sidebar-muted);
    opacity: 0.8;
    margin-bottom: 0.35rem;
}

.alert-green-text {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.alert-green-link {
    color: var(--brand-lime);
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.alert-green-link:hover {
    color: #FFFFFF;
}

.alert-green-link i {
    transition: transform 0.25s ease;
}

.alert-green-link:hover i {
    transform: translateX(3px);
}

/* ---------------------------------------------------------------------
   9. Custom List (Transaction List Table replacement)
--------------------------------------------------------------------- */
.custom-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.custom-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem;
    background-color: #FFFFFF;
    border-radius: var(--radius-xl);
    transition: background-color 0.2s ease-in-out;
}

.custom-list-item:hover {
    background-color: var(--bs-body-bg);
}

.item-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.item-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 50rem;
    background-color: var(--bs-body-bg);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.item-info {
    min-width: 0;
}

.item-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-sub {
    font-size: 0.75rem;
    color: var(--text-muted-green);
    margin-bottom: 0;
}

.item-status-wrapper {
    text-align: right;
    flex-shrink: 0;
}

.item-status {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.item-status.completed {
    color: var(--brand-forest-medium);
}

.item-status.pending {
    color: var(--text-muted-green);
    opacity: 0.8;
}

.item-hash {
    font-size: 0.75rem;
    font-family: monospace;
    color: var(--text-muted-green);
    opacity: 0.7;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   10. Custom Progress & Bar Chart Custom Layouts
--------------------------------------------------------------------- */
.progress-container {
    margin-bottom: 1.25rem;
}

.progress-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.progress-label {
    color: var(--text-main);
}

.progress-value {
    color: var(--text-muted-green);
}

.progress {
    height: 10px !important;
    background-color: var(--bs-body-bg) !important;
    border-radius: 50rem !important;
    overflow: hidden !important;
}

.progress-bar {
    height: 100% !important;
    border-radius: 50rem !important;
    transition: width 0.6s ease !important;
}

.bg-forest-medium {
    background-color: var(--brand-forest-medium);
}

.bg-lime-accent {
    background-color: var(--brand-lime);
}

.bg-brand-orange {
    background-color: var(--sys-orange);
}

/* ---------------------------------------------------------------------
   11. Right Panel Component & Layout
--------------------------------------------------------------------- */
.right-panel-wrapper {
    height: auto;
}

/* Donut Chart legend styling */
.chart-legends-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bs-body-bg);
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    margin-top: 1.5rem;
    gap: 0.5rem;
}

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50rem;
    display: inline-block;
}

/* Promo Banner Card */
.promo-banner-card {
    background-color: #E2E8DF; /* Soft light olive-sage */
    border-radius: var(--radius-xxl);
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.promo-banner-card {
    min-height: 250px;
}

/* Geometric green visual element in bottom right */
.promo-banner-bg-shape {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 140px;
    height: 140px;
    opacity: 0.95;
    pointer-events: none;
}

.promo-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--brand-forest-dark);
    margin-bottom: 0.75rem;
    max-width: 80%;
    z-index: 2;
}

.promo-desc {
    font-size: 0.85rem;
    color: var(--brand-forest-medium);
    opacity: 0.85;
    line-height: 1.4;
    margin-bottom: auto;
    max-width: 80%;
    z-index: 2;
}

.btn-promo {
    background-color: var(--brand-forest-dark);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.75rem 1.25rem;
    border-radius: 50rem;
    text-align: center;
    border: none;
    width: 100%;
    margin-top: 1.5rem;
    z-index: 2;
    transition: all 0.25s ease;
}

.btn-promo:hover {
    background-color: #000000;
    color: #FFFFFF;
}

/* ---------------------------------------------------------------------
   12. Responsive Adjustments
--------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .sidebar-wrapper {
        transform: translateX(-100%);
    }
    
    .sidebar-wrapper.show {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }
    
    .main-wrapper {
        margin-left: 0;
        padding: 1.5rem 1.5rem;
    }
    
    .sidebar-toggle-btn {
        display: flex;
    }
    
    .navbar-search-wrapper {
        order: 3;
        max-width: 100%;
        width: 100%;
        margin-top: 0.5rem;
    }
    
    .navbar-custom {
        display: flex !important;
        margin-top: -1.5rem;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding: 1rem 1.5rem;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .btn-date-picker {
        width: 100%;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------
   14. Flatpickr Theme Customization (Spark Admin Styles)
--------------------------------------------------------------------- */
.flatpickr-calendar {
    background: #FFFFFF !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-lg) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    width: 324px !important;
    padding: 16px 14px 10px 14px !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #FFFFFF !important;
}

/* Month and Year navigation banner */
.flatpickr-months {
    position: relative !important;
    height: 40px !important;
    align-items: center !important;
}

.flatpickr-month {
    height: 40px !important;
    color: var(--text-main) !important;
}

.flatpickr-current-month {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    height: 40px !important;
}

.flatpickr-current-month select.flatpickr-monthDropdown-months {
    font-weight: 700 !important;
    color: var(--text-main) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 4px 8px !important;
    font-size: 1.05rem !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.flatpickr-current-month select.flatpickr-monthDropdown-months:hover {
    background: var(--bs-body-bg) !important;
}

.flatpickr-current-month input.cur-year {
    font-weight: 700 !important;
    color: var(--text-main) !important;
    font-size: 1.05rem !important;
    padding: 4px 6px !important;
    border-radius: var(--radius-md) !important;
    width: 55px !important;
    cursor: pointer !important;
}

.flatpickr-current-month input.cur-year:hover {
    background: var(--bs-body-bg) !important;
}

/* Hide default numeric scroll spinner arrows */
.numInputWrapper span {
    display: none !important;
}

/* Center navigation chevrons and style with hover circle */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    color: var(--text-main) !important;
    fill: var(--text-main) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background-color: var(--bs-body-bg) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 12px !important;
    height: 12px !important;
}

/* Weekday labels row */
.flatpickr-weekdays {
    height: 30px !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
}

span.flatpickr-weekday {
    font-weight: 700 !important;
    color: var(--text-sidebar-muted) !important;
    font-size: 0.8rem !important;
    opacity: 0.85;
}

/* Days container layout */
.flatpickr-innerContainer {
    margin-top: 6px !important;
}

.flatpickr-days {
    width: 294px !important;
}

.dayContainer {
    width: 294px !important;
    min-width: 294px !important;
    max-width: 294px !important;
    gap: 2px 0px !important;
}

/* Day grid cell elements */
.flatpickr-day {
    font-weight: 600 !important;
    color: var(--text-main) !important;
    border-radius: 50rem !important;
    height: 38px !important;
    line-height: 38px !important;
    max-width: 38px !important;
    font-size: 0.85rem !important;
    transition: all 0.15s ease !important;
    border: none !important;
    margin: 0 auto !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background-color: var(--bs-body-bg) !important;
    color: var(--brand-forest-medium) !important;
    border-radius: 50rem !important;
}

/* Selected endpoints styling */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background-color: var(--brand-forest-medium) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(5, 28, 18, 0.25) !important;
}

.flatpickr-day.startRange {
    border-radius: 50rem 0 0 50rem !important;
}

.flatpickr-day.endRange {
    border-radius: 0 50rem 50rem 0 !important;
}

.flatpickr-day.startRange.endRange {
    border-radius: 50rem !important;
}

/* Selected in-range days styling */
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
    background-color: #E1FCD2 !important;
    color: var(--brand-forest-medium) !important;
    border-radius: 0 !important;
}

/* Disabled and adjacent month days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #CBD5E1 !important;
    background: transparent !important;
}

/* ---------------------------------------------------------------------
   15. Dropdown Component Styles (Reusable)
--------------------------------------------------------------------- */
.dropdown-menu-custom {
    background: #FFFFFF !important;
    border: 1px solid rgba(11, 19, 15, 0.05) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 8px 6px !important;
    min-width: 170px !important;
    margin-top: 6px !important;
    transition: all 0.2s ease !important;
    border: 1px solid var(--border-light) !important;
    z-index: 1050 !important;
}

.dropdown-menu-custom .dropdown-item {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-muted-green) !important;
    padding: 8px 12px !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.15s ease !important;
}

.dropdown-menu-custom .dropdown-item i {
    font-size: 1rem !important;
}

.dropdown-menu-custom .dropdown-item:hover,
.dropdown-menu-custom .dropdown-item:focus {
    background-color: var(--bs-body-bg) !important;
    color: var(--text-main) !important;
}

.dropdown-menu-custom .dropdown-item.text-danger:hover {
    background-color: var(--sys-red-bg) !important;
    color: var(--sys-red) !important;
}

.dropdown-menu-custom .dropdown-divider {
    border-top: 1px solid var(--border-light) !important;
    margin: 6px 0 !important;
    opacity: 1 !important;
}

/* Custom ApexCharts Hover Overrides for Lime-Yellow Color (#B4F105) */
.apexcharts-bar-area[fill="#B4F105"]:hover,
.apexcharts-bar-area[fill="#b4f105"]:hover,
.apexcharts-pie-area[fill="#B4F105"]:hover,
.apexcharts-pie-area[fill="#b4f105"]:hover {
    fill: #c1f824 !important;
}

/* ---------------------------------------------------------------------
   16. Footer Component Styles
--------------------------------------------------------------------- */
.footer-custom {
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(11, 19, 15, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-muted-green);
    transition: all 0.3s ease;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.footer-logo {
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.footer-logo i {
    color: var(--brand-forest-medium);
    font-size: 0.95rem;
    display: inline-block;
    animation: rotateLogo 12s linear infinite;
}

@keyframes rotateLogo {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.footer-separator {
    color: var(--border-light);
    opacity: 0.6;
    user-select: none;
}

.footer-copy {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.footer-heart {
    font-size: 0.75rem;
    display: inline-block;
    animation: heartBeat 1.5s ease infinite;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.footer-right {
    display: flex;
    align-items: center;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-link {
    color: var(--text-muted-green);
    font-weight: 600;
    transition: color 0.25s ease-in-out;
    text-decoration: none;
}

.footer-link:hover {
    color: var(--brand-forest-dark);
    text-decoration: none;
}


.footer-link .status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--sys-green);
    border-radius: 50%;
    margin-left: 0.35rem;
    vertical-align: middle;
    box-shadow: 0 0 6px var(--sys-green);
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@media (max-width: 768px) {
    .footer-custom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 1.5rem;
        gap: 1rem;
    }
    
    .footer-left {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
    
    .footer-separator {
        display: none;
    }
    
    .footer-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
}

/* ---------------------------------------------------------------------
   13. Login Page Styles (.login-wrapper)
--------------------------------------------------------------------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-body-bg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Geometric background decoration */
.login-bg-shape {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.login-bg-shape-1 {
    top: -80px;
    left: -80px;
    background: radial-gradient(circle, rgba(0, 159, 227, 0.18) 0%, rgba(0, 159, 227, 0) 70%);
}
.login-bg-shape-2 {
    bottom: -120px;
    right: -80px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(245, 130, 32, 0.16) 0%, rgba(255, 184, 28, 0) 70%);
}

.login-card {
    background-color: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xxl);
    padding: 2.75rem 2.5rem;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 20px 50px rgba(0, 40, 85, 0.1);
    z-index: 1;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 30px 60px rgba(0, 40, 85, 0.15);
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--brand-navy-dark);
    margin-bottom: 1.5rem;
    text-decoration: none;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-brand i {
    color: #F58220;
    font-size: 1.85rem;
    animation: rotateLogo 15s linear infinite;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-brand:hover {
    color: var(--brand-cyan);
}

.login-brand:hover i {
    color: var(--brand-yellow);
}

.login-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    text-align: center;
    margin-bottom: 0.35rem;
    letter-spacing: -0.02em;
}

.login-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted-green);
    text-align: center;
    margin-bottom: 2rem;
}

.login-form-group {
    margin-bottom: 1.25rem;
    position: relative;
}

.login-form-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    display: block;
}

.login-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-group i.input-icon {
    position: absolute;
    left: 1.25rem;
    color: var(--text-muted-green);
    font-size: 1.1rem;
    pointer-events: none;
    transition: color 0.25s ease;
}

.login-input {
    width: 100%;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 0.8rem 1.25rem 0.8rem 2.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    outline: none;
    transition: all 0.25s ease-in-out;
}

/* Adjust padding for password field to fit eye toggle */
.login-input-password {
    padding-right: 2.85rem;
}

.login-input:focus {
    background-color: #FFFFFF;
    border-color: #009FE3;
    box-shadow: 0 0 0 4px rgba(0, 159, 227, 0.15);
}

.login-input:focus + i.input-icon {
    color: #009FE3;
}

.password-toggle-btn {
    position: absolute;
    right: 1.25rem;
    background: none;
    border: none;
    color: var(--text-muted-green);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.password-toggle-btn:hover {
    color: var(--brand-navy-dark);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    font-size: 0.825rem;
}

/* Custom Checkbox Styling */
.custom-control-label {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted-green);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

.custom-checkbox-input {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--text-muted-green);
    appearance: none;
    outline: none;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    background-color: transparent;
}

.custom-checkbox-input:checked {
    background-color: #002855;
    border-color: #002855;
}

.custom-checkbox-input:checked::before {
    content: "\f272"; /* check icon in bootstrap-icons font */
    font-family: "bootstrap-icons";
    font-weight: 900;
    font-size: 0.7rem;
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.forgot-password-link {
    color: #009FE3;
    font-weight: 600;
    text-decoration: none;
}

.forgot-password-link:hover {
    color: #002855;
    text-decoration: underline;
}

.btn-login {
    background: linear-gradient(135deg, #002855 0%, #009FE3 100%);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0.85rem;
    font-weight: 700;
    font-size: 0.95rem;
    width: 100%;
    box-shadow: 0 4px 14px rgba(0, 40, 85, 0.2);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-login:hover {
    background: linear-gradient(135deg, #001C3D 0%, #0077B6 100%);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 159, 227, 0.35);
}

.btn-login i {
    font-size: 1rem;
    transition: transform 0.25s ease;
}

.btn-login:hover i {
    transform: translateX(3px);
}

.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted-green);
    margin: 1.75rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-light);
}

.login-divider:not(:empty)::before {
    margin-right: .75rem;
}

.login-divider:not(:empty)::after {
    margin-left: .75rem;
}

.social-login-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.btn-social {
    background-color: #FFFFFF;
    border: 1px solid var(--border-light);
    color: var(--text-main);
    border-radius: var(--radius-lg);
    padding: 0.7rem;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.btn-social:hover {
    background-color: var(--bs-body-bg);
    border-color: rgba(0, 0, 0, 0.1);
}

.btn-social i {
    font-size: 1.1rem;
}

.login-footer-text {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted-green);
    font-weight: 600;
    margin-bottom: 0;
}

.login-footer-text a {
    color: var(--brand-forest-medium);
    font-weight: 700;
}

.login-footer-text a:hover {
    color: var(--brand-lime-hover);
    text-decoration: underline;
}

/* =====================================================================
   16. Navbar Profile Dropdown Styles
   ===================================================================== */
.navbar-profile-btn {
    background: transparent;
    border: none;
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border-radius: var(--radius-lg);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.navbar-profile-btn:hover {
    background-color: var(--bs-body-bg);
}

.navbar-profile-btn:focus {
    outline: none;
}

.navbar-profile-btn.dropdown-toggle::after {
    display: none !important;
}

.navbar-profile-img,
.navbar-profile-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background-color: #E2ECE7;
    color: var(--brand-forest-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    border: 1px solid rgba(7, 47, 31, 0.08);
    transition: all 0.2s ease-in-out;
}

.navbar-profile-btn:hover .navbar-profile-img,
.navbar-profile-btn:hover .navbar-profile-avatar {
    background-color: var(--brand-forest-medium);
    color: var(--brand-lime);
    border-color: var(--brand-forest-medium);
}

.navbar-profile-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-main);
    transition: color 0.2s;
}

.navbar-profile-btn:hover .navbar-profile-name {
    color: var(--brand-forest-medium);
}

.navbar-profile-caret {
    font-size: 0.75rem;
    color: var(--text-muted-green);
    transition: transform 0.2s, color 0.2s;
}

.navbar-profile-btn:hover .navbar-profile-caret {
    color: var(--brand-forest-medium);
}

.navbar-profile-btn[aria-expanded="true"] .navbar-profile-caret {
    transform: rotate(180deg);
}

/* Custom Dropdown Menu for Profile */
.dropdown-menu-profile {
    width: 200px;
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 0.5rem 0 !important;
    margin-top: 0.5rem !important;
    border: none !important;
    animation: dropdownFadeIn 0.2s ease;
}


.dropdown-menu-profile .dropdown-header {
    font-size: 0.725rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted-green);
    padding: 0.65rem 1.25rem 0.35rem;
}

.dropdown-menu-profile .dropdown-item {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    padding: 0.65rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease-in-out;
}

.dropdown-menu-profile .dropdown-item i {
    font-size: 1.05rem;
    color: var(--text-muted-green);
    transition: color 0.2s;
}

.dropdown-menu-profile .dropdown-item:hover {
    background-color: var(--bs-body-bg);
    color: var(--brand-forest-medium);
}

.dropdown-menu-profile .dropdown-item:hover i {
    color: var(--brand-forest-medium);
}

.dropdown-menu-profile .dropdown-divider {
    border-color: var(--border-light);
    margin: 0.4rem 0;
}

/* ---------------------------------------------------------------------
   18. Reusable Premium Table Component
--------------------------------------------------------------------- */
.table-card-custom {
    background-color: #FFFFFF;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(11, 19, 15, 0.06) !important;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.25rem !important; /* Pushes the main footer down to create breathing space */
    width: 100%;
}

.table-custom {
    width: 100%;
    margin-bottom: 0;
    vertical-align: middle;
    border-collapse: collapse;
}

.table-custom th,
.table-custom td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(11, 19, 15, 0.05);
    white-space: nowrap;
}

.table-custom th {
    background-color: #F8FAF9;
    color: var(--text-muted-green);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(11, 19, 15, 0.08);
}

.table-custom tbody tr {
    transition: background-color 0.2s ease-in-out;
}

.table-custom tbody tr:hover {
    background-color: rgba(180, 241, 5, 0.03); /* Soft brand-lime-glow transparent hover */
}

.table-custom tbody tr:last-child td {
    border-bottom: none;
}

/* User/Product visual info cell */
.table-user-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background-color: var(--brand-forest-medium);
}

.table-user-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.875rem;
}

.table-user-sub {
    font-size: 0.75rem;
    color: var(--text-muted-green);
}

/* Badge styles */
.badge-table {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50rem;
}

.badge-table::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50rem;
}

.badge-table.success {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--sys-green);
}
.badge-table.success::before {
    background-color: var(--sys-green);
}

.badge-table.pending {
    background-color: rgba(249, 115, 22, 0.1);
    color: var(--sys-orange);
}
.badge-table.pending::before {
    background-color: var(--sys-orange);
}

.badge-table.failed {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--sys-red);
}
.badge-table.failed::before {
    background-color: var(--sys-red);
}

/* Table Controls Top bar */
.table-header-control {
    background-color: #FFFFFF;
    padding: 1.25rem;
    border-bottom: 1px solid rgba(11, 19, 15, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-search-box {
    position: relative;
    max-width: 320px;
    flex-grow: 1;
}

.table-search-input {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.25rem;
    font-size: 0.85rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(11, 19, 15, 0.1);
    background-color: #FDFDFD;
    transition: all 0.2s ease-in-out;
}

.table-search-input:focus {
    outline: none;
    border-color: var(--brand-forest-medium);
    box-shadow: 0 0 0 3px rgba(7, 47, 31, 0.08);
}

.table-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted-green);
    font-size: 0.85rem;
}

/* Table Actions dropdown/filters */
.table-filter-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-table-action {
    background-color: #FFFFFF;
    border: 1px solid rgba(11, 19, 15, 0.1);
    color: var(--brand-forest-dark);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease-in-out;
}

.btn-table-action:hover {
    background-color: #F8FAF9;
    border-color: var(--brand-forest-medium);
}

/* Action button items in table cell */
.table-btn-action {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(11, 19, 15, 0.08);
    background-color: #FFFFFF;
    color: var(--brand-forest-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.table-btn-action:hover {
    background-color: var(--brand-forest-medium);
    color: #FFFFFF;
    border-color: var(--brand-forest-medium);
}

.table-btn-action.delete:hover {
    background-color: var(--sys-red);
    color: #FFFFFF;
    border-color: var(--sys-red);
}

/* Table Footer Pagination */
.table-footer-control {
    background-color: #FFFFFF;
    padding: 1.25rem;
    border-top: 1px solid rgba(11, 19, 15, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.table-pagination-info {
    font-size: 0.85rem;
    color: var(--text-muted-green);
}

/* Custom column styles */
.table-order-id {
    font-weight: 700;
    color: var(--text-main);
}

.table-product-name {
    font-weight: 600;
    color: var(--text-main);
}

.table-amount {
    font-weight: 700;
    color: var(--text-main);
}

/* Custom Table pagination overrides */
.table-footer-control .pagination .page-link {
    border-radius: var(--radius-md);
    color: var(--brand-forest-dark);
    background-color: transparent;
    transition: all 0.25s ease-in-out;
}

.table-footer-control .pagination .page-link:hover {
    background-color: #F8FAF9;
    color: var(--brand-forest-medium);
}

.table-footer-control .pagination .page-item.active .page-link {
    background-color: var(--brand-forest-medium) !important;
    color: #FFFFFF !important;
}

.table-footer-control .pagination .page-item.disabled .page-link {
    opacity: 0.5;
    color: var(--text-muted-green);
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   19. Custom Premium Form Elements Design System
--------------------------------------------------------------------- */
.form-label-custom {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.form-control-custom {
    display: block;
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-main);
    background-color: #FFFFFF;
    background-clip: padding-box;
    border: 1px solid rgba(11, 19, 15, 0.12);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-control-custom:focus {
    color: var(--text-main);
    background-color: #FFFFFF;
    border-color: var(--brand-forest-medium);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(7, 47, 31, 0.08);
}

.form-control-custom::placeholder {
    color: var(--text-muted-green);
    opacity: 0.5;
}

.form-control-custom:disabled,
.form-control-custom[readonly] {
    background-color: #F8FAF9;
    border-color: rgba(11, 19, 15, 0.06);
    color: var(--text-muted-green);
    opacity: 0.8;
    cursor: not-allowed;
}

/* Sizing overrides */
.form-control-custom-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    border-radius: var(--radius-md);
}

.form-control-custom-lg {
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    border-radius: var(--radius-xl);
}

/* Select overrides */
.form-select-custom {
    display: block;
    width: 100%;
    padding: 0.6rem 2.25rem 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-main);
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23072F1F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 10px;
    border: 1px solid rgba(11, 19, 15, 0.12);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    appearance: none;
}

.form-select-custom:focus {
    border-color: var(--brand-forest-medium);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(7, 47, 31, 0.08);
}

.form-select-custom:disabled {
    background-color: #F8FAF9;
    border-color: rgba(11, 19, 15, 0.06);
    color: var(--text-muted-green);
    opacity: 0.8;
    cursor: not-allowed;
}

/* Custom Checkbox & Radios */
.form-check-custom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.5rem;
    margin-bottom: 0.5rem;
}

.form-check-input-custom {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: 0;
    vertical-align: top;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(11, 19, 15, 0.15);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.form-check-input-custom[type="checkbox"] {
    border-radius: var(--radius-md);
}

.form-check-input-custom[type="radio"] {
    border-radius: 50rem;
}

.form-check-input-custom:focus {
    outline: 0;
    border-color: var(--brand-lime-hover);
    box-shadow: 0 0 0 3px var(--brand-lime-translucent);
}

.form-check-input-custom:checked {
    background-color: var(--brand-lime);
    border-color: var(--brand-lime);
}

.form-check-input-custom[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23072F1F' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input-custom[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='3.5' fill='%23072F1F'/%3e%3c/svg%3e");
}

.form-check-input-custom:disabled {
    background-color: #F8FAF9;
    border-color: rgba(11, 19, 15, 0.06);
    opacity: 0.8;
    cursor: not-allowed;
}

/* Custom switch button style */
.form-switch-custom {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 1.5rem;
    margin-bottom: 0.5rem;
}

.form-switch-input-custom {
    width: 38px;
    height: 20px;
    border-radius: 50rem;
    background-color: rgba(11, 19, 15, 0.1);
    position: relative;
    border: 1px solid rgba(11, 19, 15, 0.08);
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    appearance: none;
    outline: none;
}

.form-switch-input-custom::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50rem;
    left: 1px;
    top: 1px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(11, 19, 15, 0.15);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-switch-input-custom:checked {
    background-color: var(--brand-forest-medium);
    border-color: var(--brand-forest-medium);
}

.form-switch-input-custom:checked::before {
    transform: translateX(18px);
}

.form-switch-input-custom:focus {
    box-shadow: 0 0 0 3px rgba(7, 47, 31, 0.08);
}

.form-switch-input-custom:disabled {
    background-color: #F8FAF9;
    border-color: rgba(11, 19, 15, 0.06);
    opacity: 0.8;
    cursor: not-allowed;
}

/* Input group styles */
.input-group-custom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(11, 19, 15, 0.12);
    background-color: #FFFFFF;
    overflow: hidden;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.input-group-custom:focus-within {
    border-color: var(--brand-forest-medium);
    box-shadow: 0 0 0 3px rgba(7, 47, 31, 0.08);
}

.input-group-text-custom {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-muted-green);
    text-align: center;
    white-space: nowrap;
    background-color: #F8FAF9;
}

.input-group-custom .form-control-custom {
    border: none !important;
    border-radius: 0 !important;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    padding-left: 0.75rem;
}

.input-group-custom .form-control-custom:focus {
    box-shadow: none !important;
}

/* Validation styles */
.form-control-custom.is-invalid-custom {
    border-color: var(--sys-red) !important;
}

.form-control-custom.is-invalid-custom:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08) !important;
}

.form-control-custom.is-valid-custom {
    border-color: var(--sys-green) !important;
}

.form-control-custom.is-valid-custom:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.08) !important;
}

.form-feedback-custom {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.form-feedback-custom.invalid-custom {
    color: var(--sys-red);
}

.form-feedback-custom.valid-custom {
    color: var(--sys-green);
}

/* ---------------------------------------------------------------------
   20. Reusable Custom Buttons & Alerts Design System
--------------------------------------------------------------------- */
/* Custom Buttons base style */
.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.5;
}

.btn-custom:active {
    transform: scale(0.97);
}

.btn-custom:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(7, 47, 31, 0.15);
}

/* Custom Buttons sizing variants */
.btn-custom-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    border-radius: var(--radius-md);
}

.btn-custom-lg {
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    border-radius: var(--radius-xl);
}

/* Custom Buttons color variants */
.btn-custom-primary {
    background-color: var(--brand-forest-medium);
    border-color: var(--brand-forest-medium);
    color: #FFFFFF;
}

.btn-custom-primary:hover {
    background-color: var(--brand-forest-dark);
    border-color: var(--brand-forest-dark);
    color: #FFFFFF;
}

.btn-custom-secondary {
    background-color: var(--brand-lime);
    border-color: var(--brand-lime);
    color: #072F1F;
}

.btn-custom-secondary:hover {
    background-color: var(--brand-lime-hover);
    border-color: var(--brand-lime-hover);
    color: #072F1F;
}

.btn-custom-light {
    background-color: #F8FAF9;
    border-color: rgba(11, 19, 15, 0.08);
    color: var(--brand-forest-dark);
}

.btn-custom-light:hover {
    background-color: #EEF2F0;
    border-color: rgba(11, 19, 15, 0.12);
    color: var(--brand-forest-dark);
}

.btn-custom-danger {
    background-color: var(--sys-red);
    border-color: var(--sys-red);
    color: #FFFFFF;
}

.btn-custom-danger:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #FFFFFF;
}

.btn-custom-warning {
    background-color: #F59E0B;
    border-color: #F59E0B;
    color: #FFFFFF;
}

.btn-custom-warning:hover {
    background-color: #d97706;
    border-color: #d97706;
    color: #FFFFFF;
}

/* Custom Buttons outline variants */
.btn-custom-outline-primary {
    background-color: transparent;
    border-color: var(--brand-forest-medium);
    color: var(--brand-forest-medium);
}

.btn-custom-outline-primary:hover {
    background-color: var(--brand-forest-medium);
    color: #FFFFFF;
}

.btn-custom-outline-secondary {
    background-color: transparent;
    border-color: var(--brand-lime-hover);
    color: var(--brand-forest-dark);
}

.btn-custom-outline-secondary:hover {
    background-color: var(--brand-lime);
    border-color: var(--brand-lime);
    color: #072F1F;
}

.btn-custom-outline-danger {
    background-color: transparent;
    border-color: var(--sys-red);
    color: var(--sys-red);
}

.btn-custom-outline-danger:hover {
    background-color: var(--sys-red);
    color: #FFFFFF;
}

/* Custom alert components */
.alert-custom {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
}

.alert-custom-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
}

.alert-custom-content {
    flex-grow: 1;
}

.alert-custom-close {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    opacity: 0.5;
}

.alert-custom-close:hover {
    opacity: 1;
    background-color: rgba(11, 19, 15, 0.05);
}

/* Alert theme variations */
.alert-custom-primary {
    background-color: rgba(7, 47, 31, 0.04);
    border-color: rgba(7, 47, 31, 0.08);
    color: var(--brand-forest-dark);
}

.alert-custom-success {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.alert-custom-danger {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.alert-custom-warning {
    background-color: #fffbeb;
    border-color: #fef3c7;
    color: #92400e;
}

.alert-custom-info {
    background-color: #f0f9ff;
    border-color: #bae6fd;
    color: #075985;
}

/* ---------------------------------------------------------------------
   21. Error 404 Page Styling Layout
--------------------------------------------------------------------- */
.error-card-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 2rem;
    min-height: 480px;
    background-color: #FFFFFF;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(11, 19, 15, 0.06) !important;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

.error-title-huge {
    font-size: 7.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-forest-dark);
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.error-title-huge .bi-asterisk {
    font-size: 5.5rem;
    color: var(--brand-lime);
    display: inline-block;
    animation: asteriskSpin 20s infinite linear;
}

.error-subtitle {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 1rem;
}

.error-desc {
    max-width: 480px;
    font-size: 0.95rem;
    color: var(--text-muted-green);
    margin-bottom: 2.25rem;
    line-height: 1.6;
}

.error-actions-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

@keyframes asteriskSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------------------------------------
   23. Reusable Helper & Utility Classes (Zero Inline Style Policy)
--------------------------------------------------------------------- */
.z-index-2 {
    z-index: 2 !important;
}

.sparkline-card-footer {
    margin-left: -1.75rem;
    margin-right: -1.75rem;
    margin-bottom: -1.75rem;
    margin-top: 1.25rem;
    overflow: hidden;
    border-bottom-left-radius: var(--radius-xxl);
    border-bottom-right-radius: var(--radius-xxl);
}

.chart-legend-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted-green);
}

.stat-value-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
}

.fs-xs {
    font-size: 0.75rem !important;
}

.w-38 {
    width: 38% !important;
}

.w-45 {
    width: 45% !important;
}

.w-50 {
    width: 50% !important;
}

.w-65 {
    width: 65% !important;
}

.w-75 {
    width: 75% !important;
}

.w-85 {
    width: 85% !important;
}


.empty-state-icon {
    font-size: 3.5rem;
    opacity: 0.25;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(5, 28, 18, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1025;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

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

/* ---------------------------------------------------------------------
   24. Transaction List Component
--------------------------------------------------------------------- */
.transaction-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.transaction-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background-color: var(--bs-body-bg);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease-in-out;
}

.transaction-item:hover {
    background-color: rgba(5, 28, 18, 0.06);
}

.transaction-icon {
    width: 44px;
    height: 44px;
    border-radius: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-right: 0.85rem;
}

.transaction-info {
    flex-grow: 1;
    min-width: 0;
}

.transaction-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-date {
    font-size: 0.75rem;
    color: var(--text-muted-green);
    margin-bottom: 0;
}

.transaction-amount {
    font-size: 0.875rem;
    font-weight: 700;
    text-align: right;
    flex-shrink: 0;
    margin-left: 0.85rem;
}

.bg-forest-light {
    background-color: var(--brand-forest-dark) !important;
}

.text-lime {
    color: var(--brand-lime) !important;
}


/* =====================================================================
   Tom Select – Project Theme Overrides
   Matches Bootstrap 5 form-select appearance and project color scheme
   ===================================================================== */

/* Control wrapper – match Bootstrap form-select height & border */
.ts-wrapper.form-select {
    padding: 0 !important;
    height: auto !important;
    border: none !important;
    background-image: none !important;
}

.ts-wrapper .ts-control {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-main);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c7e75' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
}

/* Focus state */
.ts-wrapper.plugin-remove_button .ts-control,
.ts-wrapper .ts-control:focus-within,
.ts-wrapper.focus .ts-control {
    border-color: var(--brand-forest-light);
    box-shadow: 0 0 0 0.2rem rgba(26, 62, 48, 0.2);
    outline: none;
}

/* Active option highlight in dropdown */
.ts-wrapper .ts-dropdown .option.active,
.ts-wrapper .ts-dropdown .option:hover {
    background-color: var(--brand-forest-light);
    color: #fff;
}

/* Selected / highlighted */
.ts-wrapper .ts-dropdown .option.selected {
    background-color: var(--brand-lime-translucent);
    color: var(--text-main);
}

/* Dropdown container */
.ts-wrapper .ts-dropdown {
    border: 1px solid #ced4da;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: 0.875rem;
    z-index: 1055;
}

/* Search input inside dropdown */
.ts-wrapper .ts-dropdown .ts-dropdown-content input {
    border-bottom: 1px solid var(--border-light);
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    width: 100%;
}

/* Bootstrap is-invalid integration */
.ts-wrapper.is-invalid .ts-control,
.ts-wrapper .ts-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: none !important;
}

.ts-wrapper.is-invalid.focus .ts-control,
.ts-wrapper.is-invalid .ts-control:focus-within {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Ensure invalid-feedback displays properly */
.ts-wrapper ~ .invalid-feedback {
    display: block;
}

.ts-wrapper:not(.is-invalid) ~ .invalid-feedback {
    display: none;
}

/* No-results / loading message */
.ts-wrapper .ts-dropdown .no-results {
    padding: 0.5rem 0.75rem;
    color: var(--text-muted-green);
    font-size: 0.875rem;
}

/* =====================================================================
   Select2 – Project Theme Overrides
   Matches Bootstrap 5 and Spark Admin design system
   ===================================================================== */
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    min-height: calc(1.5em + 0.75rem + 2px);
    height: auto !important;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-main);
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-main);
    line-height: 1.5;
    padding-left: 0;
    padding-right: 0;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6c757d;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 0.75rem;
    top: 0;
    display: flex;
    align-items: center;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--brand-forest-light);
    box-shadow: 0 0 0 0.2rem rgba(26, 62, 48, 0.2);
    outline: 0;
}

.select2-dropdown {
    border: 1px solid #ced4da;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: 0.875rem;
    z-index: 1055;
}

.select2-container--default .select2-search--dropdown {
    padding: 0.5rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--brand-forest-light);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--brand-forest-light);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--brand-lime-translucent);
    color: var(--text-main);
}

.select2-container--default .select2-results__option {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

/* Invalid state for Select2 */
.is-invalid + .select2-container .select2-selection--single {
    border-color: #dc3545 !important;
}

.is-invalid + .select2-container.select2-container--focus .select2-selection--single,
.is-invalid + .select2-container.select2-container--open .select2-selection--single {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* ========================================================================
   MODERN TOP NAVIGATION & APP LAUNCHER MODAL STYLES
   ======================================================================== */

/* Full-width layout when sidebar is eliminated */
body.top-nav-layout {
    background-color: #0c1319;
    color: #e2e8f0;
}

body.top-nav-layout .main-wrapper {
    margin-left: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ========================================================================
   MODERN TOP NAVIGATION & APP LAUNCHER MODAL STYLES (STALLION THEME)
   ======================================================================== */

/* Full-width layout with clean light canvas background */
body.top-nav-layout {
    background-color: #F4F7FB;
    color: #0F172A;
    background-image: 
        radial-gradient(at 10% 10%, rgba(0, 159, 227, 0.05) 0px, transparent 50%),
        radial-gradient(at 90% 20%, rgba(245, 130, 32, 0.04) 0px, transparent 50%),
        radial-gradient(at 50% 90%, rgba(255, 184, 28, 0.04) 0px, transparent 50%);
    background-attachment: fixed;
}

body.top-nav-layout .main-wrapper {
    margin-left: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Glassmorphic Stallion Light Top Navbar */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    padding: 0.75rem 1.75rem;
    box-shadow: 0 4px 20px -2px rgba(0, 40, 85, 0.06);
    transition: all 0.25s ease;
}

.app-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 1720px;
    margin: 0 auto;
    width: 100%;
}

/* Brand Logo (Stallion Styling) */
.app-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--brand-navy-dark);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.app-brand-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #009FE3 0%, #002855 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 14px rgba(0, 159, 227, 0.35);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-brand:hover .app-brand-icon {
    transform: scale(1.1) translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 159, 227, 0.45);
}

.app-brand-text {
    font-size: 1.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #002855 30%, #009FE3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.app-brand-badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(245, 130, 32, 0.15) 0%, rgba(255, 184, 28, 0.2) 100%);
    color: #D96B07;
    border: 1px solid rgba(245, 130, 32, 0.3);
    margin-left: 0.35rem;
}

/* Center Horizontal Nav Icons (Highlighted Large Icon Design) */
.app-nav-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #FFFFFF;
    padding: 0.4rem 0.65rem;
    border-radius: 50rem;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 15px rgba(0, 40, 85, 0.05);
    list-style: none;
    margin: 0;
}

.app-nav-item {
    position: relative;
}

.app-nav-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.65rem 0.25rem 0.65rem;
    border-radius: 14px;
    background: transparent;
    border: 1px solid transparent;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    min-width: 58px;
}

/* Prominent Enlarge Nav Icon */
.app-nav-btn .nav-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: #F1F5F9;
    color: #334155;
    box-shadow: 0 2px 6px rgba(0, 40, 85, 0.04);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Compact Subtitle/Name Label under the Icon */
.app-nav-btn .nav-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: 0.2rem;
    color: #64748B;
    transition: color 0.2s ease;
    line-height: 1;
}

/* Hover State */
.app-nav-btn:hover {
    background: rgba(0, 159, 227, 0.04);
}

.app-nav-btn:hover .nav-icon {
    transform: translateY(-2px) scale(1.08);
    color: #002855;
    background: #E2E8F0;
    box-shadow: 0 4px 12px rgba(0, 40, 85, 0.1);
}

.app-nav-btn:hover .nav-label {
    color: #002855;
}

/* Active State */
.app-nav-btn.active {
    background: rgba(0, 159, 227, 0.06);
    border-color: rgba(0, 159, 227, 0.2);
}

.app-nav-btn.active .nav-icon {
    background: linear-gradient(135deg, #009FE3 0%, #002855 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(0, 159, 227, 0.45);
    transform: translateY(-1px);
}

.app-nav-btn.active .nav-label {
    color: #0077B6;
    font-weight: 800;
}

/* All Modules / Master Trigger Launcher Specific Styling */
.app-nav-btn.nav-master-trigger .nav-icon {
    background: linear-gradient(135deg, #FFB81C 0%, #F58220 100%);
    color: #002855;
    box-shadow: 0 4px 12px rgba(245, 130, 32, 0.35);
}

.app-nav-btn.nav-master-trigger .nav-label {
    color: #D96B07;
    font-weight: 800;
}

.app-nav-btn.nav-master-trigger:hover .nav-icon {
    box-shadow: 0 6px 16px rgba(245, 130, 32, 0.5);
    color: #FFFFFF;
}

/* Right Actions */
.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.app-topbar-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.app-topbar-btn:hover {
    background: #F1F5F9;
    color: #002855;
    border-color: #CBD5E1;
    transform: translateY(-1px);
}

/* User Profile in Header */
.app-user-pill {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 0.3rem 0.85rem 0.3rem 0.35rem;
    border-radius: 50rem;
    color: #0F172A;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.app-user-pill:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #002855;
}

.app-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #009FE3 0%, #002855 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
}

.app-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-user-pill .bi-chevron-down {
    font-size: 0.7rem;
    color: #64748B;
}

/* Logout Button Matching Stallion User Avatar Theme */
.btn-logout-stallion {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 1rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #002855;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.25s ease;
    cursor: pointer;
}

.btn-logout-stallion .logout-icon-wrap {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #009FE3 0%, #002855 100%);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 3px 8px rgba(0, 159, 227, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-logout-stallion:hover {
    background: linear-gradient(135deg, rgba(0, 159, 227, 0.08) 0%, rgba(0, 40, 85, 0.05) 100%);
    color: #0077B6;
}

.btn-logout-stallion:hover .logout-icon-wrap {
    transform: translateX(3px) scale(1.05);
    background: linear-gradient(135deg, #F58220 0%, #FFB81C 100%);
    box-shadow: 0 4px 12px rgba(245, 130, 32, 0.45);
}

/* Main Content Container */
.app-content-body {
    flex: 1;
    padding: 2rem 2.5rem;
    max-width: 1720px;
    margin: 0 auto;
    width: 100%;
}

/* ========================================================================
   FULL NAVIGATION MODAL (APP LAUNCHER) - LIGHT PREMIUM THEME
   ======================================================================== */
.modal-nav-dialog {
    max-width: 1100px;
    margin: 2.5rem auto;
}

.modal-nav-content {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 24px;
    box-shadow: 0 25px 60px -15px rgba(0, 40, 85, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    color: #1E293B;
}

.modal-nav-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8FAFC;
}

.modal-nav-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.modal-nav-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #009FE3 0%, #002855 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 4px 14px rgba(0, 159, 227, 0.35);
}

.modal-nav-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #002855;
    margin: 0;
    letter-spacing: -0.02em;
}

.modal-nav-subtitle {
    font-size: 0.825rem;
    color: #64748B;
    margin: 0;
}

.modal-nav-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.modal-nav-close:hover {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #EF4444;
    transform: rotate(90deg);
}

.modal-nav-search {
    padding: 1rem 2rem;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    position: relative;
}

.modal-nav-search-input {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 12px;
    padding: 0.75rem 1.25rem 0.75rem 2.85rem;
    color: #0F172A;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s ease;
}

.modal-nav-search-input:focus {
    background: #FFFFFF;
    border-color: #009FE3;
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.2);
}

.modal-nav-search-icon {
    position: absolute;
    left: 3rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 1.1rem;
    pointer-events: none;
}

.modal-nav-body {
    padding: 2rem;
    max-height: 70vh;
    overflow-y: auto;
    background: #FFFFFF;
}

/* Category Sections in Modal */
.nav-section-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.25s ease;
}

.nav-section-card:hover {
    border-color: #CBD5E1;
    background: #F1F5F9;
}

.nav-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #E2E8F0;
}

.nav-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
}

.nav-section-icon.masters { background: rgba(0, 159, 227, 0.15); color: #0077B6; }
.nav-section-icon.transaction { background: rgba(245, 130, 32, 0.15); color: #D96B07; }
.nav-section-icon.reports { background: rgba(255, 184, 28, 0.2); color: #B45309; }
.nav-section-icon.utility { background: rgba(0, 40, 85, 0.1); color: #002855; }

.nav-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #002855;
    margin: 0;
}

.nav-subitems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.75rem;
}

.nav-subitem-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #334155;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-subitem-link .item-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #64748B;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.nav-subitem-link:hover {
    background: #FFFFFF;
    border-color: #009FE3;
    color: #002855;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 159, 227, 0.15);
}

.nav-subitem-link:hover .item-icon {
    background: linear-gradient(135deg, #009FE3 0%, #002855 100%);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 159, 227, 0.35);
}

.nav-subitem-link.active {
    background: rgba(0, 159, 227, 0.08);
    border-color: #009FE3;
    color: #0077B6;
}

.nav-subitem-link.active .item-icon {
    background: #009FE3;
    color: #ffffff;
}

/* Category Specific Modals */
.category-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.category-menu-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-radius: 16px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #1E293B;
    text-decoration: none;
    transition: all 0.25s ease;
}

.category-menu-card:hover {
    background: #FFFFFF;
    border-color: #009FE3;
    color: #002855;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(0, 40, 85, 0.08);
}

.category-menu-card .icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.category-menu-card:hover .icon-box {
    transform: scale(1.1);
}

.category-menu-card .card-info {
    flex: 1;
    min-width: 0;
}

.category-menu-card .card-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
    color: #002855;
}

.category-menu-card .card-desc {
    font-size: 0.75rem;
    color: #64748B;
    margin: 0;
}

.category-menu-card .bi-chevron-right {
    font-size: 0.9rem;
    color: #94A3B8;
    transition: transform 0.2s ease, color 0.2s ease;
}

.category-menu-card:hover .bi-chevron-right {
    transform: translateX(3px);
    color: #009FE3;
}

/* Card theming for category modal items */
.card-theme-blue .icon-box { background: rgba(0, 159, 227, 0.12); color: #009FE3; }
.card-theme-emerald .icon-box { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.card-theme-amber .icon-box { background: rgba(245, 130, 32, 0.14); color: #F58220; }
.card-theme-yellow .icon-box { background: rgba(255, 184, 28, 0.2); color: #D97706; }
.card-theme-purple .icon-box { background: rgba(0, 40, 85, 0.12); color: #002855; }
.card-theme-cyan .icon-box { background: rgba(0, 159, 227, 0.15); color: #0077B6; }
.card-theme-rose .icon-box { background: rgba(239, 68, 68, 0.12); color: #EF4444; }

/* Responsive navigation and industrial scanner display adaptations */
@media (max-width: 1200px) {
    .app-topbar-inner {
        gap: 0.75rem;
    }
    .app-nav-btn {
        padding: 0.45rem 0.75rem;
        font-size: 0.8rem;
    }
    .app-brand-text {
        font-size: 1.05rem;
    }
}

/* Tablet & Mobile Screens (<= 992px) */
@media (max-width: 992px) {
    .app-topbar {
        padding: 0.5rem 0.85rem;
    }
    .app-topbar-inner {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .app-brand {
        padding: 0.2rem 0;
        font-size: 1.1rem;
    }
    .app-brand-badge {
        display: none;
    }
    .app-content-body {
        padding: 1rem 0.85rem;
    }
    /* Move nav pills below on smaller tablet/phone with smooth horizontal touch-scroll */
    .app-nav-pills {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        gap: 0.35rem;
        padding: 0.35rem 0.5rem;
        background: #FFFFFF;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0, 40, 85, 0.04);
    }
    .app-nav-pills::-webkit-scrollbar {
        display: none;
    }
    .app-nav-btn {
        padding: 0.25rem 0.4rem;
        min-width: 50px;
    }
    .app-nav-btn .nav-icon {
        width: 38px;
        height: 38px;
        font-size: 1.15rem;
    }
    .app-nav-btn .nav-label {
        font-size: 0.65rem;
    }
    .app-topbar-actions {
        order: 2;
        margin-left: auto;
    }
    .app-user-name {
        display: none !important;
    }
    .app-user-pill {
        padding: 0.25rem 0.4rem;
    }

    /* Modal responsiveness */
    .modal-nav-dialog {
        max-width: 95%;
        margin: 1rem auto;
    }
    .modal-nav-header {
        padding: 1rem 1.25rem;
    }
    .modal-nav-title {
        font-size: 1.1rem;
    }
    .modal-nav-subtitle {
        font-size: 0.75rem;
    }
    .modal-nav-body {
        padding: 1rem;
        max-height: 75vh;
    }
    .category-modal-grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }
    .nav-subitems-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* Rugged Handheld Scanners & Small Mobile (<= 576px / 480px / 360px scanner screens like Zebra TC21, Honeywell ScanPal) */
@media (max-width: 576px) {
    .app-topbar {
        padding: 0.4rem 0.65rem;
    }
    .app-brand-icon {
        width: 32px;
        height: 32px;
        font-size: 1.05rem;
    }
    .app-brand-text {
        font-size: 0.95rem;
    }
    .app-topbar-btn {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }
    .app-user-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }
    .app-content-body {
        padding: 0.75rem 0.5rem;
    }
    .app-nav-pills {
        padding: 0.25rem 0.3rem;
        border-radius: 12px;
        justify-content: space-between;
    }
    .app-nav-btn {
        padding: 0.25rem;
    }
    .app-nav-btn .nav-icon {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
    
    /* Touch target padding for glove-friendly scanning */
    .category-menu-card {
        padding: 0.85rem 1rem;
    }
    .category-menu-card .icon-box {
        width: 38px;
        height: 38px;
        font-size: 1.15rem;
    }
    .category-menu-card .card-title {
        font-size: 0.875rem;
    }
    .category-menu-card .card-desc {
        font-size: 0.7rem;
    }
    .nav-subitem-link {
        padding: 0.6rem 0.75rem;
        font-size: 0.8rem;
    }
    .nav-subitem-link .item-icon {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    /* Modals on small scanner displays */
    .modal-nav-dialog {
        max-width: 98% !important;
        margin: 0.5rem auto !important;
    }
    .modal-nav-content {
        border-radius: 16px;
    }
    .modal-nav-search {
        padding: 0.65rem 1rem;
    }
    .modal-nav-search-input {
        padding: 0.6rem 1rem 0.6rem 2.4rem;
        font-size: 0.85rem;
    }
    .modal-nav-search-icon {
        left: 1.8rem;
        font-size: 0.95rem;
    }
    .page-title {
        font-size: 1.35rem !important;
    }
    .page-subtitle {
        font-size: 0.75rem !important;
    }
}

/* ========================================================================
   DATATABLES CONTROLS (SHOW & SEARCH BAR ALIGNMENT)
   Strict Single Row on Laptop/Desktop: Show on Left, Search on Right
   ======================================================================== */
.dataTables_wrapper {
    width: 100% !important;
}

/* Ensure the top row is strictly 1 single horizontal row on laptops */
.dataTables_wrapper > .row:first-child,
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter {
    box-sizing: border-box;
}

.dataTables_wrapper > .row:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 1.25rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

/* Left Column (col-sm-12 col-md-6) holding Show */
.dataTables_wrapper > .row:first-child > div:first-child {
    width: auto !important;
    flex: 0 0 auto !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

/* Right Column (col-sm-12 col-md-6) holding Search */
.dataTables_wrapper > .row:first-child > div:last-child {
    width: auto !important;
    flex: 0 0 auto !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-bottom: 0 !important;
}

/* Left side: Show Entries */
div.dataTables_wrapper div.dataTables_length {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    float: none !important;
}

div.dataTables_wrapper div.dataTables_length label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
}

div.dataTables_wrapper div.dataTables_length select {
    display: inline-block !important;
    width: auto !important;
    min-width: 75px !important;
    padding: 0.42rem 1.85rem 0.42rem 0.85rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border: 1px solid #CBD5E1 !important;
    color: #002855 !important;
    background-color: #FFFFFF !important;
    margin: 0 !important;
}

div.dataTables_wrapper div.dataTables_length select:focus {
    border-color: #009FE3 !important;
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15) !important;
    outline: none !important;
}

/* Right side: Search Box */
div.dataTables_wrapper div.dataTables_filter {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: right !important;
    float: none !important;
}

div.dataTables_wrapper div.dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
}

div.dataTables_wrapper div.dataTables_filter input {
    display: inline-block !important;
    width: 240px !important;
    max-width: 100% !important;
    padding: 0.42rem 0.95rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    border: 1px solid #CBD5E1 !important;
    color: #002855 !important;
    background-color: #FFFFFF !important;
    margin-left: 0.35rem !important;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: #009FE3 !important;
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15) !important;
    outline: none !important;
}

/* Mobile Screens only: Stack cleanly without horizontal scroll */
@media (max-width: 768px) {
    .dataTables_wrapper > .row:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
        flex-wrap: wrap !important;
    }
    .dataTables_wrapper > .row:first-child > div:first-child,
    .dataTables_wrapper > .row:first-child > div:last-child {
        width: 100% !important;
        margin-left: 0 !important;
    }
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter {
        width: 100% !important;
        justify-content: space-between !important;
    }
    div.dataTables_wrapper div.dataTables_length label,
    div.dataTables_wrapper div.dataTables_filter label {
        width: 100% !important;
        justify-content: space-between !important;
    }
    div.dataTables_wrapper div.dataTables_filter input {
        width: 60% !important;
        flex: 1 !important;
    }
}

/* ========================================================================
   MODERN STALLION ENTERPRISE TABLE DESIGN SYSTEM (MASTERS & REPORTS)
   Next-gen rounded cards, clean header gradient, smooth hover, crisp badges
   ======================================================================== */

/* Card Container Polish for Tables */
.card:has(.table),
.card:has(.dataTables_wrapper) {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px -2px rgba(0, 40, 85, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden;
    margin-bottom: 2rem;
    transition: box-shadow 0.25s ease;
}

.card:has(.table):hover,
.card:has(.dataTables_wrapper):hover {
    box-shadow: 0 10px 30px -4px rgba(0, 40, 85, 0.08) !important;
}

/* Card Header inside Table Containers */
.card:has(.table) > .card-header,
.card:has(.dataTables_wrapper) > .card-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #EDF2F7 !important;
    padding: 1.25rem 1.75rem !important;
}

.card:has(.table) .card-title,
.card:has(.dataTables_wrapper) .card-title {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #002855 !important;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Card Body padding around Table */
.card:has(.table) > .card-body,
.card:has(.dataTables_wrapper) > .card-body {
    padding: 1.5rem 1.75rem !important;
}

/* The Table Element */
.table-responsive {
    border-radius: 14px;
    border: 1px solid #EDF2F7;
    overflow-x: auto;
    background: #FFFFFF;
}

table.table {
    margin-bottom: 0 !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: #1E293B;
}

/* Modern Table Header */
table.table thead th,
table.dataTable thead th,
table.table thead tr th {
    background: #F8FAFC !important;
    color: #002855 !important;
    font-size: 0.775rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 1rem 1.15rem !important;
    border-top: none !important;
    border-bottom: 2px solid #E2E8F0 !important;
    white-space: nowrap;
    vertical-align: middle;
}

/* Table Header Sorting Icons Polish */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    opacity: 0.35 !important;
    color: #009FE3 !important;
}

table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
    opacity: 1 !important;
    color: #002855 !important;
}

/* Table Body Rows & Cells */
table.table tbody td,
table.dataTable tbody td {
    padding: 0.95rem 1.15rem !important;
    vertical-align: middle !important;
    font-size: 0.865rem !important;
    color: #334155;
    border-bottom: 1px solid #F1F5F9 !important;
    background-color: transparent !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* First Column & ID styling */
table.table tbody td:first-child {
    font-weight: 700;
    color: #64748B;
}

/* Subtle Zebra Striping */
table.table tbody tr:nth-of-type(even) {
    background-color: rgba(248, 250, 252, 0.6) !important;
}

/* Interactive Hover Row */
table.table tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: rgba(0, 159, 227, 0.04) !important;
}

table.table tbody tr:hover td {
    color: #002855 !important;
}

/* Modern Code Tags inside Tables (e.g. Item Code, SKU Code) */
table.table code {
    background: rgba(0, 40, 85, 0.06) !important;
    color: #002855 !important;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    padding: 0.25rem 0.55rem !important;
    border-radius: 6px !important;
    border: 1px solid rgba(0, 40, 85, 0.12) !important;
}

/* Badges inside Tables */
table.table .badge {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    padding: 0.35rem 0.65rem !important;
    border-radius: 50rem !important;
}

table.table .badge.bg-light {
    background: #F1F5F9 !important;
    color: #002855 !important;
    border: 1px solid #CBD5E1 !important;
}

table.table .badge.bg-secondary {
    background: rgba(100, 116, 139, 0.12) !important;
    color: #475569 !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
}

table.table .badge.bg-success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #065F46 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

table.table .badge.bg-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #991B1B !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

/* Action Button Group inside Tables */
table.table .btn-group {
    display: inline-flex;
    gap: 0.35rem;
    box-shadow: none !important;
}

table.table .btn-group .btn {
    border-radius: 8px !important;
    padding: 0.35rem 0.6rem !important;
    font-size: 0.825rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Edit Button in Table (Warm Orange / Amber) */
/* Edit Button in Table (Stallion Blue Gradient - Like Logout Avatar) */
table.table .btn-warning,
table.table a.btn-warning {
    background: linear-gradient(135deg, rgba(0, 159, 227, 0.12) 0%, rgba(0, 40, 85, 0.08) 100%) !important;
    color: #0077B6 !important;
    border: 1px solid rgba(0, 159, 227, 0.3) !important;
    border-radius: 9px !important;
    width: 33px;
    height: 33px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

table.table .btn-warning:hover,
table.table a.btn-warning:hover,
table.table .btn-warning:active,
table.table a.btn-warning:active {
    background: linear-gradient(135deg, #009FE3 0%, #002855 100%) !important;
    color: #FFFFFF !important;
    border-color: #002855 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 40, 85, 0.35) !important;
}

/* Delete Button in Table (Stallion Sunset Orange & Gold) */
table.table .btn-danger,
table.table button.btn-danger {
    background: linear-gradient(135deg, rgba(255, 184, 28, 0.15) 0%, rgba(245, 130, 32, 0.12) 100%) !important;
    color: #D96B07 !important;
    border: 1px solid rgba(245, 130, 32, 0.32) !important;
    border-radius: 9px !important;
    width: 33px;
    height: 33px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

table.table .btn-danger:hover,
table.table button.btn-danger:hover,
table.table .btn-danger:active,
table.table button.btn-danger:active {
    background: linear-gradient(135deg, #FFB81C 0%, #F58220 100%) !important;
    color: #002855 !important;
    border-color: #F58220 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(245, 130, 32, 0.45) !important;
}

/* Info / View Button in Table (Stallion Ocean Cyan) */
table.table .btn-info,
table.table a.btn-info {
    background: linear-gradient(135deg, rgba(0, 159, 227, 0.14) 0%, rgba(0, 40, 85, 0.08) 100%) !important;
    color: #0077B6 !important;
    border: 1px solid rgba(0, 159, 227, 0.32) !important;
    border-radius: 9px !important;
    width: 33px;
    height: 33px;
    padding: 0 !important;
}

table.table .btn-info:hover,
table.table a.btn-info:hover {
    background: linear-gradient(135deg, #009FE3 0%, #002855 100%) !important;
    color: #FFFFFF !important;
    border-color: #009FE3 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 159, 227, 0.4) !important;
}

/* ========================================================================
   MODERN DATATABLES PAGINATION & FOOTER CONTROLS
   ======================================================================== */
.dataTables_wrapper > .row:last-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid #EDF2F7;
    flex-wrap: wrap;
    gap: 1rem;
}

/* "Showing 1 to 10 of 25 entries" */
div.dataTables_wrapper div.dataTables_info {
    font-size: 0.825rem !important;
    font-weight: 600 !important;
    color: #64748B !important;
    padding-top: 0 !important;
}

/* Pagination Links */
div.dataTables_wrapper div.dataTables_paginate {
    margin-left: auto;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    margin: 0 !important;
    gap: 0.35rem;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link {
    border-radius: 8px !important;
    border: 1px solid #E2E8F0 !important;
    color: #002855 !important;
    font-size: 0.825rem !important;
    font-weight: 700 !important;
    padding: 0.45rem 0.85rem !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link:hover {
    background: rgba(0, 159, 227, 0.08) !important;
    border-color: #009FE3 !important;
    color: #0077B6 !important;
    transform: translateY(-1px);
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #009FE3 0%, #002855 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 159, 227, 0.35) !important;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.disabled .page-link {
    background: #F8FAFC !important;
    border-color: #EDF2F7 !important;
    color: #94A3B8 !important;
    box-shadow: none !important;
    opacity: 0.6;
}

/* ========================================================================
   GLOBAL PRIMARY BUTTON THEME (STALLION BLUE GRADIENT)
   Matches the Edit button and User profile / Logout Avatar theme
   ======================================================================== */
.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background: linear-gradient(135deg, #009FE3 0%, #002855 100%) !important;
    background-color: #002855 !important;
    border-color: #002855 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(0, 159, 227, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
input[type="submit"].btn-primary:hover {
    background: linear-gradient(135deg, #0084BE 0%, #001A38 100%) !important;
    background-color: #001A38 !important;
    border-color: #001A38 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(0, 40, 85, 0.45) !important;
}

.btn-primary:focus,
.btn-primary:focus-visible {
    background: linear-gradient(135deg, #0084BE 0%, #001A38 100%) !important;
    border-color: #009FE3 !important;
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.35) !important;
    color: #FFFFFF !important;
}

/* Primary Outline Buttons */
.btn-outline-primary,
button.btn-outline-primary,
a.btn-outline-primary {
    color: #0077B6 !important;
    border-color: #009FE3 !important;
    font-weight: 700 !important;
    transition: all 0.22s ease !important;
}

.btn-outline-primary:hover,
button.btn-outline-primary:hover,
a.btn-outline-primary:hover {
    background: linear-gradient(135deg, #009FE3 0%, #002855 100%) !important;
    border-color: #002855 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 159, 227, 0.35) !important;
}

/* Page Header & Title Icon Theme (Stallion Blue) */
.page-header h1.page-title,
h1.page-title,
.page-title {
    color: #002855 !important;
    font-weight: 800 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.page-title i,
.page-title .bi,
.page-header i,
.card-header h2 i,
.card-title i {
    color: #009FE3 !important;
}

/* Page Subtitle */
.page-subtitle {
    color: #64748B !important;
    font-weight: 500;
}

/* ========================================================================
   MODERN STALLION ROLES & PERMISSIONS CHECKBOX DESIGN SYSTEM
   Interactive toggle cards, sleek checkboxes, check icons & micro-animations
   ======================================================================== */

.role-perm-menu-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 18px -2px rgba(0, 40, 85, 0.04), 0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

.role-perm-menu-card:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 8px 24px -4px rgba(0, 40, 85, 0.08) !important;
}

.role-perm-menu-card.is-all-selected {
    border-color: rgba(0, 159, 227, 0.45) !important;
    box-shadow: 0 6px 20px -2px rgba(0, 159, 227, 0.12) !important;
}

.role-perm-menu-card.is-partially-selected {
    border-color: rgba(245, 130, 32, 0.4) !important;
}

/* Card Header: Menu Category */
.role-perm-menu-header {
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%) !important;
    border-bottom: 1px solid #E2E8F0 !important;
    user-select: none;
}

.role-menu-checkbox-wrap {
    cursor: pointer;
    font-size: 1.05rem;
    color: #002855;
}

.role-menu-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(0, 159, 227, 0.12);
    color: #009FE3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    transition: all 0.2s ease;
}

.role-menu-checkbox-wrap:hover .role-menu-icon-box {
    background: #009FE3;
    color: #FFFFFF;
    transform: scale(1.08);
}

.role-menu-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: #E2E8F0;
    color: #475569;
}

/* Submenu Individual Items (Interactive Cards) */
.role-submenu-item {
    position: relative;
    padding: 0.75rem 1rem !important;
    border: 1.5px solid #EDF2F7 !important;
    border-radius: 14px !important;
    background: #FAFCFE !important;
    color: #334155 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-bottom: 0 !important;
}

.role-submenu-item:hover {
    background: #F1F8FF !important;
    border-color: #B9E2FE !important;
    color: #002855 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 159, 227, 0.1) !important;
}

/* Checked state for submenu item */
.role-submenu-item.is-checked {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%) !important;
    border-color: #009FE3 !important;
    color: #002855 !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 159, 227, 0.15) !important;
}

/* Custom Checkbox Input Styling inside roles */
.role-perm-menu-card .form-check-input {
    width: 1.28rem !important;
    height: 1.28rem !important;
    margin-top: 0 !important;
    cursor: pointer !important;
    border: 2px solid #CBD5E1 !important;
    border-radius: 6px !important;
    transition: all 0.18s ease-in-out !important;
    background-color: #FFFFFF;
}

.role-perm-menu-card .form-check-input:hover {
    border-color: #009FE3 !important;
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15) !important;
}

.role-perm-menu-card .form-check-input:checked {
    background: linear-gradient(135deg, #009FE3 0%, #002855 100%) !important;
    border-color: #002855 !important;
    box-shadow: 0 2px 6px rgba(0, 40, 85, 0.25) !important;
}

/* Checkbox Submenu Icons */
.role-submenu-icon {
    font-size: 1.05rem;
    color: #64748B;
    transition: color 0.2s ease, transform 0.2s ease;
}

.role-submenu-item:hover .role-submenu-icon {
    color: #009FE3;
    transform: scale(1.1);
}

.role-submenu-item.is-checked .role-submenu-icon {
    color: #0077B6 !important;
}

/* Check indicator icon on right */
.role-submenu-item .check-indicator {
    font-size: 1.1rem;
    color: #CBD5E1;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.role-submenu-item.is-checked .check-indicator {
    opacity: 1;
    color: #009FE3;
    transform: scale(1);
}

/* Counter Badges */
.submenu-count {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
}

.submenu-count.bg-primary {
    background: linear-gradient(135deg, #009FE3 0%, #002855 100%) !important;
}

.submenu-count.bg-success {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}

/* Responsive adjustment for Mobile */
@media (max-width: 576px) {
    .role-perm-menu-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    .role-menu-checkbox-wrap {
        width: 100%;
    }
    .submenu-count {
        align-self: flex-end;
    }
}

/* ========================================================================
   SCANNER DEVICE MOBILE & LAPTOP RESPONSIVE STYLES
   Optimized for handheld PDA scanners, barcode terminals, and laptops
   ======================================================================== */

.scan-table-responsive {
    border-radius: 12px !important;
    background: #FFFFFF !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Scanned Barcode badge readability */
.table-scan .badge-barcode {
    font-family: 'Consolas', 'Courier New', monospace !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    padding: 0.35rem 0.65rem !important;
    border-radius: 8px !important;
    display: inline-block;
    word-break: break-all;
}

/* Scanned status badge */
.table-scan .badge-status-success,
.table-scan .badge-status-error {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

/* Scanner inputs enhancement */
.scanner-input {
    font-size: 1.15rem !important;
    height: 52px !important;
}

/* Mobile & Handheld Scanner Device View (< 768px) */
@media (max-width: 767.98px) {
    /* Hide non-essential columns on mobile scanners to prevent congesting:
       Hides row index (#), batch/doc, and timestamp */
    .col-hide-mobile {
        display: none !important;
    }

    /* Keep table fit without horizontal clutter */
    .table-scan thead th {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
    }

    .table-scan tbody td {
        padding: 9px 10px !important;
        font-size: 0.85rem !important;
    }

    .table-scan .badge-barcode {
        font-size: 0.85rem !important;
        padding: 0.25rem 0.45rem !important;
    }

    .table-scan .badge-status-success,
    .table-scan .badge-status-error {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }

    /* Scanner Header & cards padding */
    .scanner-header {
        padding: 14px 16px !important;
    }

    .scanner-header h5 {
        font-size: 1.1rem !important;
    }

    .scanner-card .card-body {
        padding: 14px 16px !important;
    }

    .scanner-input {
        height: 48px !important;
        font-size: 1rem !important;
        padding-left: 44px !important;
    }

    .scanner-icon {
        left: 14px !important;
        font-size: 1.2rem !important;
    }

    .batch-summary-card,
    .document-info-card,
    .stat-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .batch-summary-card .meta-val,
    .document-info-card .info-value {
        font-size: 0.95rem !important;
    }

    .stat-card .stat-val {
        font-size: 1.5rem !important;
    }
}

/* ========================================================================
   QUICK BARCODE SCANNER MODAL (HEADER BRAND ICON TRIGGER)
   ======================================================================== */
.app-brand-container {
    gap: 0.25rem;
}

.app-brand-icon-btn {
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
    display: inline-flex;
    align-items: center;
}

.app-brand-icon-btn:focus-visible {
    outline: 2px solid #009FE3;
    border-radius: 10px;
}

.app-brand-icon-btn:hover .app-brand-icon {
    transform: scale(1.1) translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 159, 227, 0.45);
}

.app-brand-icon {
    position: relative;
}

.app-brand-icon .icon-default,
.app-brand-icon .icon-hover {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-brand-icon .icon-hover {
    position: absolute;
    opacity: 0;
    transform: scale(0.5) rotate(-20deg);
    pointer-events: none;
}

.app-brand-icon-btn:hover .app-brand-icon .icon-default {
    opacity: 0;
    transform: scale(0.5) rotate(20deg);
}

.app-brand-icon-btn:hover .app-brand-icon .icon-hover {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.app-brand-link {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.app-brand-link:hover {
    opacity: 0.88;
}

.quick-scanner-modal-dialog {
    max-width: 540px !important;
}

.quick-scanner-input-box .form-control:focus {
    border-color: #009FE3 !important;
    box-shadow: 0 0 0 4px rgba(0, 159, 227, 0.2) !important;
    background-color: #FFFFFF !important;
}

@media (max-width: 576px) {
    .quick-scanner-modal-dialog {
        margin: 1rem !important;
    }
    
    .quick-scanner-input-box input {
        font-size: 1.1rem !important;
        height: 52px !important;
    }
}