/* 
========================================================================
   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 {
    /* Colors */
    --bs-body-bg: #F4F6F5; /* Canvas background: light, warm grayish-green */
    --bs-body-font-family: 'Plus Jakarta Sans', sans-serif;
    
    --brand-forest-dark: #051C12;     /* Core sidebar/brand background */
    --brand-forest-medium: #072F1F;   /* Alert banner / dark card BG */
    --brand-forest-light: #1A3E30;    /* Interactive elements in dark mode */
    --brand-lime: #B4F105;            /* Lime-yellow accent highlight */
    --brand-lime-hover: #c1f824;      
    --brand-lime-translucent: rgba(180, 241, 5, 0.15);
    
    --text-main: #0B130F;             /* Dark headers, main labels */
    --text-muted-green: #6C7E75;      /* Secondary labels, muted details */
    --text-sidebar-muted: #879A91;    /* Sidebar inactive link labels */
    
    --card-background: #FFFFFF;
    --border-light: #E9EFEF;
    --border-dark-green: rgba(255, 255, 255, 0.1);

    /* System Colors */
    --sys-green: #22C55E;
    --sys-green-bg: #DCFCE7;
    --sys-red: #EF4444;
    --sys-red-bg: #FEE2E2;
    --sys-orange: #F97316;
    --sys-orange-bg: #FFEDD5;

    /* Navbar (split out so dark mode can override without touching hardcoded rgba below) */
    --navbar-bg: rgba(244, 246, 245, 0.85);
    --navbar-border: rgba(0, 0, 0, 0.05);

    /* 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 */
    --shadow-sm: 0 2px 8px rgba(11, 19, 15, 0.02);
    --shadow-md: 0 10px 30px rgba(11, 19, 15, 0.04);
    --shadow-lg: 0 20px 50px rgba(11, 19, 15, 0.08);
}

/* ---------------------------------------------------------------------
   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.85rem;
    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;
}

/*
 * Every component below this point that needs muted/secondary text sets
 * `color: var(--text-muted-green)` on its own specific selector — but
 * dozens of Blade views also apply `text-muted-green` directly as a plain
 * utility class (form hints, table sub-labels, empty states...) and no such
 * class rule ever existed. Those elements were silently falling back to
 * whatever they inherited instead of the theme-aware muted color, which is
 * why help text under a form field ended up too dim to read in dark mode
 * (light: #6C7E75, dark: #9CA3AF — see the --text-muted-green definitions
 * above/in the dark theme block below). This is the missing utility.
 */
.text-muted-green {
    color: var(--text-muted-green);
}

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

/* ---------------------------------------------------------------------
   3b. Lucide Icons
   Every `bi-*` icon in this app was replaced with `<i data-lucide="...">`,
   which lucide.createIcons() (see dashboard.js) turns into an inline
   `<svg class="lucide lucide-name">`. Bootstrap Icons was a font, so it
   auto-sized off `font-size` and colored off `color` wherever it was
   used; Lucide's SVGs default to a fixed 24x24px instead, so every icon
   in the app would render oversized without this. `stroke="currentColor"`
   is already Lucide's default, so color still just works.
--------------------------------------------------------------------- */
.lucide {
    width: 1em;
    height: 1em;
    stroke-width: 2px;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

::-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: 1.5rem 1.25rem;
    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.65rem;
    color: #FFFFFF;
    margin-bottom: 1.5rem;
    text-decoration: none;
    transition: color 0.25s ease;
}

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

.sidebar-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background-color: var(--brand-lime);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.sidebar-brand:hover .sidebar-brand-icon {
    transform: scale(1.06) rotate(90deg);
    background-color: var(--brand-lime-hover);
}

.sidebar-brand-icon i {
    color: var(--brand-forest-dark);
    font-size: 1rem;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.sidebar-brand-name {
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-brand-tagline {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-sidebar-muted);
}

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

.sidebar-menu-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.85rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-dark-green);
}

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

.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-sidebar-muted);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-collapse-btn:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

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

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

.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.825rem;
    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: 1rem;
    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: var(--brand-lime);
    background-color: rgba(255, 255, 255, 0.06);
    font-weight: 600;
}

.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.65rem;
    background-color: rgba(255, 255, 255, 0.03);
    padding: 0.65rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-dark-green);
    color: #FFFFFF;
}

.sidebar-profile-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--brand-forest-medium);
    font-size: 0.8rem;
}

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

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

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

.sidebar-profile-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: var(--text-sidebar-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-profile-logout:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

/* 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-text,
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,
body.sidebar-minimized .sidebar-profile-logout {
    display: none !important;
}

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

/* The collapse button lives in this row — keep it, just re-center it
   once the "Menu" title text next to it is hidden above. */
body.sidebar-minimized .sidebar-menu-section-header {
    justify-content: center;
    border-bottom: none;
    padding-bottom: 0;
}

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

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

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: 1.5rem 2rem;
    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: var(--navbar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-top: -1.5rem;
    margin-left: -2rem;
    margin-right: -2rem;
    padding: 0.85rem 2rem;
    border-bottom: 1px solid var(--navbar-border);
    display: grid !important;
    grid-template-columns: 1fr 480px 1fr !important;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1.25rem;
}

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

/* Quick Actions Dropdown Button — the one bright accent CTA in the
   navbar, same "primary" color as .btn-custom-primary. */
.btn-quick-action {
    background-color: var(--brand-lime);
    color: #072F1F;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0.45rem 1rem;
    font-size: 0.78rem;
    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-lime-hover);
    color: #072F1F;
    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.5rem;
}

.navbar-action-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background-color: #FFFFFF;
    border: 1px solid var(--border-light);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    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: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background-color: #FFFFFF;
    border: 1px solid var(--border-light);
    color: var(--text-main);
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   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;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted-green);
    margin-bottom: 0.5rem;
}

.breadcrumb-nav a {
    color: var(--text-muted-green);
}

.breadcrumb-nav a:hover {
    color: var(--brand-forest-medium);
}

.breadcrumb-nav i {
    width: 0.85em;
    height: 0.85em;
    opacity: 0.6;
}

.breadcrumb-nav span {
    color: var(--text-main);
}

.page-title {
    font-size: 1.4rem;
    margin-bottom: 0.2rem;
}

.page-subtitle {
    font-size: 0.8rem;
    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: none;
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
}

.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: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    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.8rem;
    color: var(--text-muted-green);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

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

.trend-badge i {
    font-size: 0.8rem;
}

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

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

/* Alert Dark Green Card */
.alert-green-card {
    background-color: var(--brand-forest-medium);
    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: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--brand-lime-translucent) 0%, rgba(180, 241, 5, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.login-bg-shape-1 {
    top: -50px;
    left: -50px;
}
.login-bg-shape-2 {
    bottom: -100px;
    right: -50px;
    width: 400px;
    height: 400px;
}

.login-card {
    background-color: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
    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(11, 19, 15, 0.12);
}

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

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

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

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

.login-subtitle {
    font-size: 0.8rem;
    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: 1rem;
    color: var(--text-muted-green);
    font-size: 0.95rem;
    pointer-events: none;
    /* Sits above the input so a browser's own autofill/saved-password
       glyph (some browsers draw one inside the field at a similar left
       offset) doesn't visually merge with ours. */
    z-index: 1;
    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.7rem 1rem 0.7rem 2.75rem;
    font-size: 0.85rem;
    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.75rem;
}

.login-input:focus {
    background-color: var(--card-background);
    border-color: var(--brand-forest-medium);
    box-shadow: 0 0 0 4px var(--brand-lime-translucent);
}

.login-input:focus + i.input-icon {
    color: var(--brand-forest-medium);
}

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

.password-toggle-btn:hover {
    color: var(--brand-forest-medium);
}

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

/* 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: var(--brand-forest-medium);
    border-color: var(--brand-forest-medium);
}

.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: var(--brand-forest-medium);
    font-weight: 600;
    text-decoration: none;
}

.forgot-password-link:hover {
    color: var(--brand-lime-hover);
    text-decoration: underline;
}

.btn-login {
    background-color: var(--brand-forest-medium);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0.7rem;
    font-weight: 700;
    font-size: 0.85rem;
    width: 100%;
    box-shadow: var(--shadow-sm);
    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-color: var(--brand-forest-dark);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--brand-lime-translucent);
}

.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 {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 0.75rem;
    transition: border-color 0.2s;
}

.navbar-profile-btn:hover .navbar-profile-img {
    border-color: var(--brand-lime-hover);
}

.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: 0.7rem 1rem;
    font-size: 0.8rem;
    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.68rem;
    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.3rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.68rem;
    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: 1rem;
    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.78rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    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 */
/* Ghost icon-only action buttons — no border/fill until hover, matching
   the reference's row-action style (eye / copy / trash). */
.table-btn-action {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--text-muted-green);
    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(--bs-body-bg);
    color: var(--text-main);
}

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

/* Table Footer Pagination */
.table-footer-control {
    background-color: #FFFFFF;
    padding: 0.85rem 1rem;
    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.78rem;
    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 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 50rem;
    color: var(--text-main);
    background-color: transparent;
    transition: all 0.2s 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-lime) !important;
    color: #072F1F !important;
}

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

/* Previous / Next — icon + label, not the round numbered-page shape */
.table-footer-control .pagination .page-link-nav {
    width: auto;
    min-width: 0;
    gap: 0.3rem;
    padding: 0 0.65rem;
    border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------------
   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.5rem 0.85rem;
    font-size: 0.82rem;
    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.5rem 2.1rem 0.5rem 0.85rem;
    font-size: 0.82rem;
    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.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    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
   `primary` is the one bright accent CTA style (create/save/the main
   action on a page); `secondary` is the muted neutral style for
   everything else (cancel, export, other utility actions) — see the
   dark-theme override further down for its dark-mode surface. */
.btn-custom-primary {
    background-color: var(--brand-lime);
    border-color: var(--brand-lime);
    color: #072F1F;
}

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

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

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

.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;
}

/* ---------------------------------------------------------------------
   25. Dark Theme (Light / Dark Toggle)

   The whole design system above is built on CSS variables, so redefining
   them under [data-theme="dark"] re-themes most of the app for free.
   Two variables are dual-purpose in the light palette though:
     - --brand-lime is both the "active nav / primary CTA" accent AND a
       checked-state fill; the screenshot's dark UI uses one consistent
       green for both, so it's safe to repoint.
     - --brand-forest-medium is both link/ink color and a few solid fills
       (quick-action button, avatar placeholder). Repointing it to the
       teal accent fixes the ink-on-black-canvas contrast problem and
       still reads fine everywhere it's used as a fill.
     - --brand-forest-dark is intentionally left alone: it's always paired
       locally with a bright (lime/teal) fill as high-contrast ink, never
       against the page canvas, so it stays near-black in both themes.

   What's left below are the handful of components that hardcode a light
   literal color (#FFFFFF, #F8FAF9, rgba(11,19,15,x)...) instead of a
   variable — only the ones actually rendered in the app are covered.
--------------------------------------------------------------------- */
:root[data-theme="dark"] {
    --bs-body-bg: #0A0A0B;
    --card-background: #131316;
    --border-light: rgba(255, 255, 255, 0.08);
    --border-dark-green: rgba(255, 255, 255, 0.08);

    --text-main: #F4F4F5;
    --text-muted-green: #9CA3AF;

    --brand-lime: #22C55E;
    --brand-lime-hover: #34D399;
    --brand-lime-translucent: rgba(34, 197, 94, 0.16);
    --brand-forest-medium: #2DD4BF;
    /* --brand-forest-dark intentionally unchanged, see note above */

    --sys-green-bg: rgba(34, 197, 94, 0.15);
    --sys-red-bg: rgba(239, 68, 68, 0.15);
    --sys-orange-bg: rgba(249, 115, 22, 0.15);

    --navbar-bg: rgba(10, 10, 11, 0.75);
    --navbar-border: rgba(255, 255, 255, 0.08);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2A2B30;
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #3A3B42;
}

/* Bootstrap's raw dropdown (used by the plain filter dropdowns) */
:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-background);
    border-color: var(--border-light);
    box-shadow: var(--shadow-lg);
}
:root[data-theme="dark"] .dropdown-menu .dropdown-item {
    color: var(--text-main);
}
:root[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-menu .dropdown-item:focus,
:root[data-theme="dark"] .dropdown-menu .dropdown-item.active {
    background-color: var(--bs-body-bg);
    color: var(--brand-forest-medium);
}
:root[data-theme="dark"] .dropdown-menu .dropdown-divider {
    border-color: var(--border-light);
}
:root[data-theme="dark"] .dropdown-menu .dropdown-header {
    color: var(--text-muted-green);
}

/* Navbar-specific dropdowns and controls that hardcode a white surface */
:root[data-theme="dark"] .dropdown-menu-quick-action,
:root[data-theme="dark"] .dropdown-menu-notification,
:root[data-theme="dark"] .dropdown-menu-profile,
:root[data-theme="dark"] .dropdown-menu-custom {
    background-color: var(--card-background) !important;
}
:root[data-theme="dark"] .dropdown-menu-custom {
    border-color: var(--border-light) !important;
}
:root[data-theme="dark"] .dropdown-menu-custom .dropdown-item {
    color: var(--text-muted-green) !important;
}
:root[data-theme="dark"] .dropdown-menu-custom .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-menu-custom .dropdown-item:focus {
    background-color: var(--bs-body-bg) !important;
    color: var(--text-main) !important;
}

:root[data-theme="dark"] .navbar-search-input,
:root[data-theme="dark"] .navbar-action-btn,
:root[data-theme="dark"] .sidebar-toggle-btn,
:root[data-theme="dark"] .btn-date-picker {
    background-color: var(--card-background);
}
:root[data-theme="dark"] .sidebar-wrapper {
    background-color: var(--bs-body-bg);
}
:root[data-theme="dark"] .navbar-search-input:focus {
    border-color: rgba(45, 212, 191, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .navbar-action-badge {
    border-color: var(--bs-body-bg);
}

/* Tables */
:root[data-theme="dark"] .table-card-custom,
:root[data-theme="dark"] .table-header-control,
:root[data-theme="dark"] .table-footer-control,
:root[data-theme="dark"] .btn-table-action {
    background-color: var(--card-background);
    border-color: var(--border-light);
}
:root[data-theme="dark"] .table-card-custom {
    border: 1px solid var(--border-light) !important;
}
:root[data-theme="dark"] .table-custom th {
    background-color: #1A1B1E;
    border-bottom-color: var(--border-light);
}
:root[data-theme="dark"] .table-custom th,
:root[data-theme="dark"] .table-custom td {
    border-bottom-color: var(--border-light);
}
:root[data-theme="dark"] .table-custom tbody tr:hover {
    background-color: rgba(45, 212, 191, 0.06);
}
/* .table-btn-action is a ghost button (transparent by default) whose
   colors already come from theme-aware variables — no dark override
   needed, unlike .btn-table-action which still has a visible fill. */
:root[data-theme="dark"] .btn-table-action {
    color: var(--text-main);
    border-color: var(--border-light);
}
:root[data-theme="dark"] .btn-table-action:hover {
    background-color: #1A1B1E;
}
:root[data-theme="dark"] .table-footer-control .pagination .page-link {
    color: var(--text-main);
}
:root[data-theme="dark"] .table-footer-control .pagination .page-link:hover {
    background-color: #1A1B1E;
}
:root[data-theme="dark"] .table-footer-control .pagination .page-item.disabled .page-link {
    color: var(--text-muted-green);
}

/* Form controls */
:root[data-theme="dark"] .form-control-custom,
:root[data-theme="dark"] .form-select-custom,
:root[data-theme="dark"] .input-group-custom {
    background-color: #1A1B1E;
    border-color: var(--border-light);
}
:root[data-theme="dark"] .form-control-custom:focus,
:root[data-theme="dark"] .form-select-custom:focus,
:root[data-theme="dark"] .input-group-custom:focus-within {
    background-color: #1A1B1E;
}
:root[data-theme="dark"] .form-control-custom:disabled,
:root[data-theme="dark"] .form-control-custom[readonly],
:root[data-theme="dark"] .form-select-custom:disabled {
    background-color: #17181B;
    border-color: var(--border-light);
}
:root[data-theme="dark"] .form-select-custom {
    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='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
:root[data-theme="dark"] .input-group-text-custom {
    background-color: #17181B;
}

/* Neutral "secondary" utility button (cancel, export, etc.) — a dark
   elevated surface instead of the light-mode's pale gray fill. */
:root[data-theme="dark"] .btn-custom-secondary,
:root[data-theme="dark"] .btn-custom-light {
    background-color: #1A1B1E;
    border-color: var(--border-light);
    color: var(--text-main);
}
:root[data-theme="dark"] .btn-custom-secondary:hover,
:root[data-theme="dark"] .btn-custom-light:hover {
    background-color: #24252B;
    border-color: var(--border-light);
    color: var(--text-main);
}

/* Alerts (translucent instead of pastel so they read on a black canvas) */
:root[data-theme="dark"] .alert-custom-primary {
    background-color: rgba(45, 212, 191, 0.1);
    border-color: rgba(45, 212, 191, 0.25);
    color: var(--brand-forest-medium);
}
:root[data-theme="dark"] .alert-custom-success {
    background-color: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ADE80;
}
:root[data-theme="dark"] .alert-custom-danger {
    background-color: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #F87171;
}
:root[data-theme="dark"] .alert-custom-warning {
    background-color: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    color: #FBBF24;
}
:root[data-theme="dark"] .alert-custom-info {
    background-color: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60A5FA;
}

/* Theme toggle button icon state — shows the icon for the mode a click
   switches TO, matching the reference screenshot (dark canvas -> sun icon).
   Both icons are always rendered (Lucide needs the <i data-lucide> present
   to convert), CSS just picks which one is visible. */
.icon-theme-sun {
    display: none;
}
:root[data-theme="dark"] .icon-theme-sun {
    display: inline-flex;
}
:root[data-theme="dark"] .icon-theme-moon {
    display: none;
}

/* Fullscreen toggle: same dual-icon pattern, keyed off a JS-toggled class
   on the button itself since there's no CSS-only way to know fullscreen
   state. */
.icon-fullscreen-exit {
    display: none;
}
.navbar-action-btn.is-fullscreen .icon-fullscreen-enter {
    display: none;
}
.navbar-action-btn.is-fullscreen .icon-fullscreen-exit {
    display: inline-flex;
}

/* Sidebar collapse toggle: same pattern, keyed off body.sidebar-minimized. */
.icon-sidebar-expand {
    display: none;
}
body.sidebar-minimized .icon-sidebar-collapse {
    display: none;
}
body.sidebar-minimized .icon-sidebar-expand {
    display: inline-flex;
}

/* Login password visibility toggle: same pattern, keyed off a JS-toggled
   class on the toggle button itself. */
.icon-password-hide {
    display: none;
}
.password-toggle-btn.is-showing .icon-password-show {
    display: none;
}
.password-toggle-btn.is-showing .icon-password-hide {
    display: inline-flex;
}