:root {
            --easypark-teal: #0da574;
            --easypark-teal-hover: #088b60;
            --easypark-mint-light: #e6f6f1;
            --easypark-mint-border: #b2e4d5;
            --easypark-dark: #0f172a;
            --app-bg: #f4f6fa;
            --card-bg: #ffffff;
            --border-color: #e2e8f0;
            --text-dark: #1e293b;
            --text-muted: #64748b;
        }

        /* Dark Mode Theme Overrides */
        [data-bs-theme="dark"] {
            --app-bg: #0b0f19;
            --card-bg: #1e293b;
            --border-color: #334155;
            --text-dark: #f8fafc;
            --text-muted: #94a3b8;
            --easypark-mint-light: #064e3b;
            --easypark-mint-border: #059669;
        }

        [data-bs-theme="dark"] body {
            background-color: var(--app-bg) !important;
            color: #f8fafc !important;
        }

        /* Override Bootstrap & Utility Text Classes in Dark Mode */
        [data-bs-theme="dark"] .text-dark,
        [data-bs-theme="dark"] .text-black,
        [data-bs-theme="dark"] .text-body {
            color: #f8fafc !important;
        }

        [data-bs-theme="dark"] .text-secondary,
        [data-bs-theme="dark"] .text-muted {
            color: #94a3b8 !important;
        }

        /* Override Bootstrap Background Classes in Dark Mode */
        [data-bs-theme="dark"] .bg-light,
        [data-bs-theme="dark"] .bg-white,
        [data-bs-theme="dark"] .bg-body {
            background-color: #1e293b !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        [data-bs-theme="dark"] .bg-light-subtle {
            background-color: #0f172a !important;
        }

        /* Navbar, Cards, Containers & Header Box */
        [data-bs-theme="dark"] .navbar-custom,
        [data-bs-theme="dark"] .page-header-box,
        [data-bs-theme="dark"] .card-custom,
        [data-bs-theme="dark"] .offcanvas-sidebar,
        [data-bs-theme="dark"] .modal-content,
        [data-bs-theme="dark"] .login-card {
            background-color: #1e293b !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        [data-bs-theme="dark"] .page-header-title {
            color: #f8fafc !important;
        }

        /* Forms, Inputs, Form Controls & Keypad */
        [data-bs-theme="dark"] .form-control,
        [data-bs-theme="dark"] .form-select,
        [data-bs-theme="dark"] .input-group-text {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        [data-bs-theme="dark"] .form-control::placeholder {
            color: #64748b !important;
        }

        [data-bs-theme="dark"] .keypad-btn {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        [data-bs-theme="dark"] .keypad-btn:hover {
            background-color: #334155 !important;
            color: #ffffff !important;
        }

        [data-bs-theme="dark"] .vehicle-btn {
            background-color: #0f172a !important;
            color: #f8fafc !important;
            border-color: #334155 !important;
        }

        [data-bs-theme="dark"] .vehicle-btn i {
            color: #94a3b8 !important;
        }

        [data-bs-theme="dark"] .vehicle-btn:hover,
        [data-bs-theme="dark"] .vehicle-btn.active {
            background-color: #064e3b !important;
            border-color: #0da574 !important;
        }

        [data-bs-theme="dark"] .vehicle-btn.active i,
        [data-bs-theme="dark"] .vehicle-btn:hover i {
            color: #34d399 !important;
        }

        /* Buttons Dark Mode Overrides */
        [data-bs-theme="dark"] .btn-light,
        [data-bs-theme="dark"] .btn-outline-secondary {
            background-color: #0f172a !important;
            color: #cbd5e1 !important;
            border-color: #334155 !important;
        }

        [data-bs-theme="dark"] .btn-light:hover,
        [data-bs-theme="dark"] .btn-outline-secondary:hover {
            background-color: #334155 !important;
            color: #ffffff !important;
        }

        [data-bs-theme="dark"] .btn-modal-cancel {
            background-color: #0f172a !important;
            color: #e2e8f0 !important;
            border-color: #334155 !important;
        }

        [data-bs-theme="dark"] .btn-modal-cancel:hover {
            background-color: #334155 !important;
            color: #ffffff !important;
        }

        /* Tables Dark Mode Overrides */
        [data-bs-theme="dark"] .easypark-table thead th {
            background-color: #0f172a !important;
            color: #cbd5e1 !important;
            border-bottom-color: #334155 !important;
        }

        [data-bs-theme="dark"] .easypark-table tbody td {
            color: #e2e8f0 !important;
            border-color: #334155 !important;
        }

        [data-bs-theme="dark"] .easypark-table tbody tr:hover td {
            background-color: #1a2333 !important;
        }

        /* Payable Box & Summary in Dark Mode */
        [data-bs-theme="dark"] .payable-card-box {
            background: linear-gradient(135deg, #064e3b 0%, #022c22 100%) !important;
            border-color: #059669 !important;
        }

        [data-bs-theme="dark"] .payable-label {
            color: #f8fafc !important;
        }

        [data-bs-theme="dark"] .amount-display {
            color: #34d399 !important;
        }

        [data-bs-theme="dark"] .change-box {
            background-color: #064e3b !important;
            border-color: #059669 !important;
            color: #4ade80 !important;
        }

        /* Accordion & Modals in Dark Mode */
        [data-bs-theme="dark"] .accordion-item {
            background-color: #1e293b !important;
            border-color: #334155 !important;
        }

        [data-bs-theme="dark"] .accordion-button {
            background-color: #1e293b !important;
            color: #f8fafc !important;
        }

        [data-bs-theme="dark"] .accordion-button:not(.collapsed) {
            background-color: #0f172a !important;
            color: #34d399 !important;
        }

        [data-bs-theme="dark"] .accordion-button::after {
            filter: invert(1);
        }

        [data-bs-theme="dark"] .modal-header,
        [data-bs-theme="dark"] .modal-footer {
            background-color: #0f172a !important;
            border-color: #334155 !important;
            color: #f8fafc !important;
        }

        /* Dropdown Menus in Dark Mode */
        [data-bs-theme="dark"] .dropdown-menu {
            background-color: #1e293b !important;
            border-color: #334155 !important;
        }

        [data-bs-theme="dark"] .dropdown-item {
            color: #e2e8f0 !important;
        }

        [data-bs-theme="dark"] .dropdown-item:hover {
            background-color: #0f172a !important;
            color: #ffffff !important;
        }

        /* Offcanvas Sidebar in Dark Mode */
        [data-bs-theme="dark"] .offcanvas-sidebar .nav-link {
            color: #94a3b8 !important;
        }

        [data-bs-theme="dark"] .offcanvas-sidebar .nav-link:hover,
        [data-bs-theme="dark"] .offcanvas-sidebar .nav-link.active {
            color: #34d399 !important;
            background-color: #064e3b !important;
        }

        [data-bs-theme="dark"] .offcanvas-sidebar .nav-link.active i,
        [data-bs-theme="dark"] .offcanvas-sidebar .nav-link:hover i {
            color: #34d399 !important;
        }

        [data-bs-theme="dark"] .offcanvas-sidebar .menu-category {
            color: #cbd5e1 !important;
        }

        /* CRITICAL: Thermal Receipt Paper ALWAYS remains crisp White with black text */
        .thermal-receipt,
        #printable-receipt,
        #printable-ticket {
            background-color: #ffffff !important;
            color: #000000 !important;
        }

        .thermal-receipt * {
            color: #000000 !important;
        }

        body {
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
            background-color: var(--app-bg);
            color: var(--text-dark);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Keyframe Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(12px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulseGlow {
            0% { box-shadow: 0 0 0 0 rgba(13, 165, 116, 0.4); }
            70% { box-shadow: 0 0 0 8px rgba(13, 165, 116, 0); }
            100% { box-shadow: 0 0 0 0 rgba(13, 165, 116, 0); }
        }

        .tab-pane.active {
            animation: fadeInUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* Navigation Styling */
        .navbar-custom {
            background-color: #ffffff;
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
        }

        .brand-logo-box {
            width: 38px;
            height: 38px;
            background: var(--easypark-mint-light);
            color: var(--easypark-teal);
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            transition: transform 0.2s ease;
        }

        .brand-logo-box:hover {
            transform: scale(1.05);
        }

        /* Card Container Styling */
        .card-custom {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.03), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
            transition: all 0.25s ease;
        }

        .card-custom:hover {
            box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.06);
        }

        .section-title {
            font-size: 0.8rem;
            font-weight: 800;
            color: var(--easypark-teal);
            text-transform: uppercase;
            letter-spacing: 0.6px;
            margin-bottom: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Form Controls */
        .form-control, .form-select {
            border-radius: 8px;
            border: 1px solid var(--border-color);
            padding: 0.55rem 0.85rem;
            font-size: 0.9rem;
            transition: all 0.2s ease;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--easypark-teal);
            box-shadow: 0 0 0 3px rgba(13, 165, 116, 0.15);
        }

        .input-group-text {
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background-color: #f8fafc;
        }

        .vehicle-btn {
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0.85rem 0.5rem;
            background: #ffffff;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            text-align: center;
            cursor: pointer;
            width: 100%;
            height: 100%;
        }

        .vehicle-btn:hover {
            border-color: var(--easypark-teal);
            background-color: var(--easypark-mint-light);
            transform: translateY(-2px);
        }

        .vehicle-btn.active {
            border-color: var(--easypark-teal);
            background-color: var(--easypark-mint-light);
            box-shadow: 0 0 0 2px var(--easypark-teal);
        }

        .vehicle-btn i {
            font-size: 1.5rem;
            color: var(--text-muted);
            margin-bottom: 0.35rem;
            display: block;
            transition: color 0.2s ease;
        }

        .vehicle-btn.active i, .vehicle-btn:hover i {
            color: var(--easypark-teal);
        }

        /* Keypad Styling */
        .keypad-btn {
            height: 48px;
            font-size: 1.1rem;
            font-weight: 700;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: #ffffff;
            color: #334155;
            transition: all 0.15s ease;
        }

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

        .keypad-btn:active {
            transform: scale(0.96);
        }

        .btn-confirm {
            background-color: var(--easypark-teal);
            color: #ffffff;
            font-weight: 700;
            border-radius: 8px;
            border: none;
            transition: all 0.2s ease;
        }

        .btn-confirm:hover {
            background-color: var(--easypark-teal-hover);
            color: #ffffff;
        }

        .btn-modal-cancel {
            height: 38px;
            padding: 0.45rem 1.2rem;
            font-size: 0.85rem;
            border-radius: 8px;
            border: 1px solid #cbd5e1;
            background-color: #f8fafc;
            color: #475569;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .btn-modal-cancel:hover {
            background: #e2e8f0;
            color: #0f172a;
            border-color: #94a3b8;
        }

        /* Check-In vs Check-Out Mode Switcher Styling */
        .pos-mode-btn {
            font-weight: 700;
            font-size: 0.8rem;
            padding: 0.45rem 0.85rem;
            border-radius: 8px;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .pos-mode-btn.active-entry {
            background-color: var(--easypark-teal) !important;
            color: #ffffff !important;
            border-color: var(--easypark-teal) !important;
            box-shadow: 0 2px 8px rgba(13, 165, 116, 0.3);
        }

        .pos-mode-btn.active-exit {
            background-color: #e11d48 !important;
            color: #ffffff !important;
            border-color: #e11d48 !important;
            box-shadow: 0 2px 8px rgba(225, 29, 72, 0.3);
        }

        .modal-footer .btn-confirm {
            height: 38px;
            padding: 0.45rem 1.2rem;
            font-size: 0.85rem;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* Amount Payable Box Enhancements */
        .payable-card-box {
            background: linear-gradient(135deg, #e6f6f1 0%, #f0fdf4 100%);
            border: 1.5px solid #b2e4d5;
            border-radius: 10px;
            padding: 0.95rem 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 6px rgba(13, 165, 116, 0.08);
        }

        .payable-label {
            font-size: 0.875rem;
            font-weight: 800;
            color: #0f172a;
            letter-spacing: 0.5px;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .amount-display {
            font-size: 2.1rem;
            font-weight: 800;
            color: var(--easypark-teal);
            line-height: 1;
            margin: 0;
        }

        .change-box {
            background-color: #f0fdf4;
            border: 1px solid #bbf7d0;
            color: #166534;
            font-weight: 700;
            font-size: 1.25rem;
            border-radius: 8px;
            padding: 0.55rem 0.85rem;
            text-align: right;
        }

        .offcanvas-sidebar {
            width: 270px;
            background-color: #ffffff;
            color: var(--text-dark);
            border-right: 1px solid var(--border-color);
        }

        .offcanvas-sidebar .nav-link {
            color: #64748b;
            padding: 0.65rem 0.9rem;
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.875rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            margin-bottom: 0.25rem;
        }

        .offcanvas-sidebar .nav-link i {
            width: 22px;
            text-align: center;
            font-size: 1.05rem;
            color: #64748b;
            transition: all 0.2s ease;
        }

        .offcanvas-sidebar .nav-link:hover {
            color: var(--easypark-teal);
            background-color: var(--easypark-mint-light);
            transform: translateX(3px);
        }

        .offcanvas-sidebar .nav-link:hover i {
            color: var(--easypark-teal);
        }

        .offcanvas-sidebar .nav-link.active {
            color: var(--easypark-teal) !important;
            background-color: var(--easypark-mint-light) !important;
            font-weight: 700;
        }

        .offcanvas-sidebar .nav-link.active i {
            color: var(--easypark-teal) !important;
        }

        .offcanvas-sidebar .menu-category {
            font-size: 0.78rem;
            color: #1e293b;
            font-weight: 700;
            margin-top: 1.25rem;
            margin-bottom: 0.45rem;
            padding-left: 0.75rem;
        }

        /* Thermal Print Receipt Styling */
        .thermal-receipt {
            font-family: 'Courier Prime', 'Courier New', monospace;
            width: 100%;
            max-width: 280px;
            margin: 0 auto;
            padding: 12px;
            background: #fff;
            color: #000;
            border: 1px dashed #ccc;
            font-size: 12px;
            line-height: 1.3;
            box-sizing: border-box;
        }

        .thermal-receipt .receipt-header {
             margin:0 !important;
             padding:0 !important;
             text-align:center;;
        }

        .thermal-receipt .receipt-title {
            font-size: 14px;
            font-weight: 700;
            text-align: center;
            margin: 6px 0;
            letter-spacing: 0.5px;
        }

        .thermal-receipt .divider {
            border-top: 1px dashed #000;
            margin: 6px 0;
        }

        .receipt-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2px;
            font-size: 11.5px;
        }

        .receipt-row .label {
            font-weight: 400;
        }

        .receipt-row .value {
            font-weight: 700;
            text-align: right;
        }

        /* Print Media CSS - Precision Optimized for 80x70 MM Thermal Paper */
        @media print {
            @page {
                size: 80mm auto;
                margin: 0mm;
            }

            html, body {
                width: 80mm !important;
                margin: 0 !important;
                padding: 0 !important;
                background: #ffffff !important;
            }

            body > :not(#printArea) {
                display: none !important;
            }

            #printArea, #printArea * {
                display: block !important;
                visibility: visible !important;
            }

            #printArea {
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                width: 80mm !important;
                padding: 2mm 3mm !important;
                box-sizing: border-box !important;
                background: #ffffff !important;
                color: #000000 !important;
            }

            #printArea .thermal-receipt {
                width: 100% !important;
                max-width: 74mm !important;
                border: none !important;
                box-shadow: none !important;
                padding: 0 !important;
                margin: 0 auto !important;
                background: #ffffff !important;
                color: #000000 !important;
                font-size: 11px !important;
                line-height: 1.25 !important;
            }

            #printArea .thermal-receipt * {
                color: #000000 !important;
            }

            .no-print {
                display: none !important;
            }
        }

        /* Login Screen Styling */
        .login-wrapper {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
            min-height: 100vh;
        }

        .login-card {
            background: #ffffff;
            border-radius: 1rem;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
            animation: fadeInUp 0.4s ease forwards;
        }

        .login-brand-icon {
            width: 64px;
            height: 64px;
            background-color: var(--easypark-mint-light);
            color: var(--easypark-teal);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        .status-badge {
            cursor: pointer;
            user-select: none;
            transition: all 0.2s ease;
            font-weight: 600;
            padding: 0.35em 0.75em;
        }

        .status-badge:hover {
            opacity: 0.85;
            transform: scale(1.05);
        }

        .live-pulse-dot {
            width: 8px;
            height: 8px;
            background-color: var(--easypark-teal);
            border-radius: 50%;
            display: inline-block;
            animation: pulseGlow 1.8s infinite;
        }

        /* EASYPARK List View & Datatable Component Styling */
        .page-header-box {
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 0.85rem 1.25rem;
            margin-bottom: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .page-header-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #0f172a;
            margin: 0;
        }

        .page-breadcrumb {
            font-size: 0.8rem;
            color: #64748b;
            margin: 0;
        }

        .page-breadcrumb a {
            color: #0da574;
            text-decoration: none;
            font-weight: 600;
        }

        .dt-export-btn {
            background-color: #0da574;
            color: #ffffff;
            border: none;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.4rem 0.85rem;
            border-radius: 6px;
            transition: background-color 0.2s ease;
        }

        .dt-export-btn:hover {
            background-color: #088b60;
            color: #ffffff;
        }

        .dt-action-icon {
            width: 30px;
            height: 30px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            border: 1px solid transparent;
            font-size: 0.9rem;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .dt-action-edit {
            color: #0da574;
            border-color: #b2e4d5;
            background-color: #e6f6f1;
        }

        .dt-action-edit:hover {
            background-color: #0da574;
            color: #ffffff;
        }

        .dt-action-delete {
            color: #ef4444;
            border-color: #fca5a5;
            background-color: #fef2f2;
        }

        .dt-action-delete:hover {
            background-color: #ef4444;
            color: #ffffff;
        }

        .easypark-table thead th {
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #475569;
            background-color: #f8fafc;
            border-bottom: 2px solid #e2e8f0;
            padding: 0.75rem 1rem;
        }

        .easypark-table tbody td {
            padding: 0.85rem 1rem;
            color: #1e293b;
            font-size: 0.875rem;
        }
        
        
#printable-ticket h1,
#printable-ticket h2,
#printable-ticket h3,
#printable-ticket h4,
#printable-ticket h5,
#printable-ticket h6,
#printable-ticket p {
    margin: 0 !important;
    padding: 0 !important;
}