:root {
            /* Modern Color Palette */
            --primary-green: #00b09b;
            /* Vibrant Green */
            --primary-gradient: linear-gradient(135deg, #00b09b, #96c93d);
            /* Fresh Gradient */
            --dark-green: #008a7a;
            --accent-red: #ff5f6d;
            --red-gradient: linear-gradient(135deg, #ff5f6d, #ffc371);
            --dark-red: #c0392b;
            --accent-blue: #4facfe;
            --blue-gradient: linear-gradient(135deg, #4facfe, #00f2fe);
            --dark-blue: #0072ff;

            /* Dark Theme Backgrounds */
            --bg-color: #121212;
            /* Deep Dark */
            --surface-color: rgba(30, 30, 30, 0.7);
            /* Glassy Surface */
            --surface-solid: #1e1e1e;
            --header-color: rgba(18, 18, 18, 0.8);

            /* Text & Borders */
            --text-color: #e0e0e0;
            --text-muted-color: #a0a0a0;
            --border-color: rgba(255, 255, 255, 0.1);

            /* Effects */
            --glass-blur: blur(12px);
            --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 8px 15px rgba(0, 0, 0, 0.2);
            --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.4);
            --glow: 0 0 15px rgba(0, 176, 155, 0.3);
        }

        body {
            font-family: 'Cairo', sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--bg-color);
            color: var(--text-color);
            background-image:
                radial-gradient(circle at 10% 20%, rgba(0, 176, 155, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(150, 201, 61, 0.1) 0%, transparent 20%);

            line-height: 1.7;
            min-height: 100vh;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-color);
        }

        ::-webkit-scrollbar-thumb {
            background: #444;
            border-radius: 5px;
            border: 2px solid var(--bg-color);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-green);
        }

        header {
            background-color: var(--header-color);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            color: #fff;
            padding: 0.8rem 2rem;
            text-align: center;
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-color);
        }

        .header-title {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .header-title svg {
            width: 60px;
            height: 60px;
        }

        header h1 {
            margin: 0;
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-color);
        }

        header h1 span {
            font-size: 0.8rem;
            color: var(--text-muted-color);
            font-weight: 400;
            display: block;
        }

        nav {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        nav .nav-btn {
            background-color: var(--surface-color);
            color: var(--text-muted-color);
            border: 1px solid var(--border-color);
            padding: 0.6rem 1.1rem;
            cursor: pointer;
            font-size: 0.9rem;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        nav .nav-btn:hover {
            background-color: var(--primary-green);
            color: white;
            border-color: var(--dark-green);
        }

        nav .nav-btn.active {
            background-color: var(--primary-green);
            color: white;
            box-shadow: 0 0 10px rgba(0, 128, 43, 0.5);
            border-color: var(--primary-green);
        }

        header nav {
            display: none;
        }

        #costai-floating-btn {
            position: fixed;
            bottom: 25px;
            right: 25px;
            width: 65px;
            height: 65px;
            background-color: var(--primary-green);
            color: white;
            border: none;
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            z-index: 1010;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            transition: transform 0.2s ease-in-out, background-color 0.2s;
        }

        #costai-floating-btn:hover {
            transform: scale(1.1);
            background-color: var(--dark-green);
        }

        .accordion-menu-container {
            position: fixed;
            top: 20px;
            right: -340px;
            /* Hidden by default */
            width: 300px;
            height: calc(100% - 40px);
            background-color: rgba(30, 30, 30, 0.95);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border-color);
            border-radius: 16px 0 0 16px;
            box-shadow: var(--shadow-lg);
            z-index: 1020;
            display: flex;
            flex-direction: column;
            transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        .accordion-menu-container.active {
            right: 0;
        }

        .accordion-header {
            padding: 15px 20px;
            background-color: var(--header-color);
            color: var(--primary-green);
            font-weight: 700;
            font-size: 1.2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }

        .close-accordion-btn {
            background: none;
            border: none;
            color: var(--text-muted-color);
            font-size: 2rem;
            cursor: pointer;
            line-height: 1;
        }

        .close-accordion-btn:hover {
            color: var(--accent-red);
        }

        .accordion-menu {
            list-style: none;
            padding: 0;
            margin: 0;
            overflow-y: auto;
            flex-grow: 1;
        }

        .menu-item .menu-button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 16px 20px;
            background: none;
            border: none;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-muted-color);
            font-family: 'Cairo', sans-serif;
            font-size: 1rem;
            cursor: pointer;
            text-align: right;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .menu-item .menu-button,
        .menu-item .menu-button-single {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 16px 20px;
            background: none;
            border: none;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-muted-color);
            font-family: 'Cairo', sans-serif;
            font-size: 1rem;
            cursor: pointer;
            text-align: right;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .menu-item .menu-button {
            justify-content: space-between;
        }

        .menu-item .menu-button:hover,
        .menu-item .menu-button-single:hover,
        .menu-item.active>.menu-button {
            background-color: rgba(0, 176, 155, 0.1);
            color: white;
            box-shadow: 0 0 15px rgba(0, 176, 155, 0.2);
            /* Glow effect */
            text-shadow: 0 0 8px rgba(0, 176, 155, 0.4);
            border-right: 3px solid var(--primary-green);
        }

        .menu-item .menu-button .menu-icon,
        .menu-item .menu-button-single .menu-icon {
            margin-left: 12px;
            font-size: 1.1rem;
            color: var(--primary-green);
            width: 20px;
            text-align: center;
        }

        .menu-item .menu-button-single:hover .menu-icon,
        .menu-item.active>.menu-button .menu-icon {
            color: white;
        }

        .submenu {
            list-style: none;
            padding: 0;
            margin: 0;
            background-color: var(--bg-color);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out;
        }

        .menu-item.active>.submenu {
            max-height: 1000px;
        }

        .submenu-item button {
            display: block;
            width: 100%;
            padding: 14px 40px;
            color: var(--text-muted-color);
            text-decoration: none;
            font-size: 0.95rem;
            transition: background-color 0.2s ease, padding-right 0.2s ease;
            background: none;
            border: none;
            text-align: right;
            cursor: pointer;
            font-family: 'Cairo', sans-serif;
        }

        .submenu-item button:hover {
            background-color: rgba(0, 128, 43, 0.2);
            padding-right: 45px;
            color: white;
        }

        main {
            padding: 20px;
            max-width: 1300px;
            margin: 30px auto;
            background-color: transparent;
        }

        section {
            display: none;
            padding: 25px;
            border-radius: 16px;
            margin-bottom: 20px;
            background-color: var(--surface-color);
            backdrop-filter: blur(5px);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-md);
        }

        section.active-section {
            display: block;
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        h2 {
            color: var(--primary-green);
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 10px;
            margin-top: 0;
            margin-bottom: 25px;
            font-size: 1.9rem;
            font-weight: 600;
        }

        h3 {
            color: var(--text-color);
            margin-top: 25px;
            margin-bottom: 15px;
            font-size: 1.5rem;
            border-right: 4px solid var(--primary-green);
            padding-right: 10px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        input,
        textarea,
        select {
            width: 100%;
            padding: 12px 15px;
            margin-bottom: 15px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-sizing: border-box;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            background-color: rgba(255, 255, 255, 0.05);
            color: var(--text-color);
            font-family: 'Cairo', sans-serif;
            backdrop-filter: blur(5px);
        }

        /* Fix for select options readability */
        select option {
            background-color: #222;
            color: var(--text-color);
        }

        input:focus,
        textarea:focus,
        select:focus {
            border-color: var(--primary-green);
            outline: 0;
            box-shadow: 0 0 15px rgba(0, 176, 155, 0.3);
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-1px);
        }

        input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(1);
            cursor: pointer;
        }

        textarea {
            min-height: 90px;
            resize: vertical;
        }

        form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
            gap: 1rem 1.5rem;
        }

        .action-btn,
        .report-btn,
        .modal button[type="submit"],
        .backup-btn {
            background: var(--primary-gradient);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 50px;
            /* Pill shape */
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-right: 8px;
            margin-bottom: 10px;
            line-height: 1.5;
            font-weight: 600;
            box-shadow: 0 4px 10px rgba(0, 176, 155, 0.3);
            position: relative;
            overflow: hidden;
        }

        .action-btn:hover,
        .report-btn:hover,
        .modal button[type="submit"]:hover,
        .backup-btn:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 15px rgba(0, 176, 155, 0.5);
            filter: brightness(1.1);
        }

        form>button[type="submit"] {
            grid-column: 1 / -1;
            width: fit-content;
        }

        .action-btn-danger {
            background: var(--red-gradient);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 12px 24px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(255, 95, 109, 0.3);
        }

        .action-btn-danger:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 15px rgba(255, 95, 109, 0.5);
            filter: brightness(1.1);
        }

        .action-btn-warning {
            background: linear-gradient(135deg, #f7971e, #ffd200);
            color: #212529;
            border: none;
            border-radius: 50px;
            padding: 12px 24px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(247, 151, 30, 0.3);
        }

        .action-btn-warning:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 15px rgba(247, 151, 30, 0.5);
            filter: brightness(1.1);
        }

        .action-btn-neutral {
            background: linear-gradient(135deg, #606c88, #3f4c6b);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 12px 24px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(96, 108, 136, 0.3);
        }

        .action-btn-neutral:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 15px rgba(96, 108, 136, 0.5);
            filter: brightness(1.1);
        }

        .action-btn-special {
            background: var(--blue-gradient);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 12px 24px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3);
        }

        .action-btn-special:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 15px rgba(79, 172, 254, 0.5);
            filter: brightness(1.1);
        }

        .small-btn {
            padding: 6px 12px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .table-container {
            overflow-x: auto;
            overflow-y: auto;
            max-height: 70vh;
            /* Enable vertical scrolling for sticky header */
            background-color: var(--surface-color);
            backdrop-filter: blur(5px);
            padding: 1rem;
            border-radius: 12px;
            margin-top: 1rem;
            border: 1px solid var(--border-color);
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
        }

        table {
            width: 100%;
            border-collapse: separate;
            /* Changed for border-radius */
            border-spacing: 0;
            font-size: 0.9rem;
        }

        th,
        td {
            border-bottom: 1px solid var(--border-color);
            border-right: none;
            border-left: none;
            border-top: none;
            padding: 15px 20px;
            text-align: right;
        }

        th {
            background-color: #252525;
            color: var(--primary-green);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            position: sticky;
            top: 0;
            z-index: 10;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        tr:nth-child(even) {
            background-color: rgba(255, 255, 255, 0.02);
        }

        tr:hover {
            background-color: rgba(0, 176, 155, 0.1) !important;
            transform: scale(1.005);
            transition: all 0.2s ease;
            position: relative;
            z-index: 5;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* Ensure modal content is visible and sized */
        .modal-content {
            opacity: 1 !important;
            visibility: visible !important;
            max-height: none !important;
            overflow: visible !important;
            width: auto !important;
            min-width: 300px;
            min-height: 200px;
        }

        /* Fix for nested modals in Asset Management */
        #assetMaintenanceModal,
        #assetTransferModal {
            z-index: 1050;
        }

        .modal-content {
            background-color: var(--surface-color);
            margin: 3% auto;
            padding: 30px;
            border: 1px solid var(--border-color);
            width: 95%;
            max-width: 650px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
            position: relative;
            animation: modalOpen 0.4s ease-out;
            display: flex;
            flex-direction: column;
            max-height: 90vh;
        }

        .modal-content>form,
        .modal-content>.location-manager,
        .modal-content>#tables-grid,
        .modal-content>#payment-main-content {
            overflow-y: auto;
            padding-right: 10px;
        }

        .modal-content.modal-sm {
            max-width: 480px;

            /* ==== Fix Modal Visibility and Size ==== */
            .modal,
            .modal-content {
                opacity: 1 !important;
                visibility: visible !important;
            }

            /* .modal { display: flex !important; } */
            .modal-content {
                max-height: none !important;
                overflow: visible !important;
                width: auto !important;
                min-width: 300px;
                min-height: 200px;
            }


        }

        .modal-content.modal-lg {
            max-width: 900px;
        }

        .modal-content.modal-xl {
            max-width: 1400px;
        }

        #itemModal #itemForm {
            width: 100%;
        }

        @keyframes modalOpen {
            from {
                opacity: 0;
                transform: scale(0.95);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 15px;
            margin-bottom: 25px;
        }

        .modal-header h3 {
            margin: 0;
            font-size: 1.6rem;
            color: var(--primary-green);
            border: none;
            padding: 0;
        }

        .close-btn {
            color: var(--text-muted-color);
            font-size: 2.5rem;
            font-weight: bold;
            background: none;
            border: none;
            padding: 0;
            line-height: 1;
            cursor: pointer;
            transition: color 0.2s;
        }

        .close-btn:hover,
        .close-btn:focus {
            color: var(--accent-red);
        }

        .stats-overview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .stat-card {
            background: linear-gradient(145deg, rgba(40, 40, 40, 0.6), rgba(20, 20, 20, 0.8));
            backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 20px;
            text-align: center;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--border-color);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(0, 176, 155, 0.1) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.4s;
        }

        .stat-card:hover::before {
            opacity: 1;
        }

        .stat-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-lg), 0 0 20px rgba(0, 176, 155, 0.2);
            border-color: var(--primary-green);
        }

        .stat-card h4 {
            margin-top: 0;
            color: var(--text-muted-color);
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            z-index: 1;
        }

        .stat-card p {
            font-size: 2.8rem;
            font-weight: 800;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            text-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        /* ===== تصميم المساعد الذكي المحسّن ===== */
        .chatbot-container {
            display: none;
            position: fixed;
            bottom: 30px;
            left: 30px;
            width: 400px;
            max-height: 600px;
            background: linear-gradient(145deg, rgba(30, 30, 30, 0.98), rgba(20, 20, 20, 0.98));
            backdrop-filter: blur(20px);
            border: 1px solid rgba(0, 176, 155, 0.3);
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7),
                0 0 40px rgba(0, 176, 155, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            z-index: 1010;
            flex-direction: column;
            overflow: hidden;
            animation: chatbotSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        @keyframes chatbotSlideIn {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.9);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .chatbot-container.active {
            display: flex;
        }

        /* رأس المساعد الذكي - تدرج جذاب */
        .chatbot-header {
            background: linear-gradient(135deg, #00b09b 0%, #00806f 50%, #005f52 100%);
            color: white;
            padding: 16px 20px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

        .chatbot-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            animation: headerShine 8s linear infinite;
        }

        @keyframes headerShine {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .chatbot-header h5 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            z-index: 1;
        }

        .chatbot-header h5::before {
            content: '\f544';
            /* Font Awesome robot icon */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            font-size: 1.3rem;
            color: rgba(255, 255, 255, 0.9);
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        .chatbot-close-btn {
            color: rgba(255, 255, 255, 0.9);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }

        .chatbot-close-btn:hover {
            background: rgba(255, 95, 109, 0.9);
            border-color: rgba(255, 95, 109, 1);
            color: white;
            transform: rotate(90deg) scale(1.1);
            box-shadow: 0 4px 12px rgba(255, 95, 109, 0.4);
        }

        /* منطقة الرسائل - scrollbar مخصص */
        .chatbot-messages {
            flex-grow: 1;
            padding: 20px;
            overflow-y: auto;
            min-height: 300px;
            background: linear-gradient(180deg, rgba(18, 18, 18, 1) 0%, rgba(25, 25, 25, 1) 100%);
            position: relative;
        }

        /* Scrollbar مخصص للمساعد الذكي */
        .chatbot-messages::-webkit-scrollbar {
            width: 8px;
        }

        .chatbot-messages::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
        }

        .chatbot-messages::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #00b09b, #00806f);
            border-radius: 10px;
            transition: background 0.3s;
        }

        .chatbot-messages::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #00d4ba, #00b09b);
        }

        /* الرسائل - تصميم محسّن */
        .chat-message {
            margin-bottom: 12px;
            padding: 12px 16px;
            border-radius: 16px;
            max-width: 85%;
            word-wrap: break-word;
            animation: messageSlideIn 0.3s ease-out;
            position: relative;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        @keyframes messageSlideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* رسائل المستخدم - تدرج أخضر */
        .chat-message.user {
            background: linear-gradient(135deg, #00d4ba 0%, #00b09b 50%, #00806f 100%);
            color: white;
            margin-left: auto;
            margin-right: 0;
            border-bottom-right-radius: 4px;
            border: 1px solid rgba(0, 212, 186, 0.3);
            box-shadow: 0 4px 12px rgba(0, 176, 155, 0.3);
            font-weight: 500;
        }

        .chat-message.user::before {
            content: '\f007';
            /* Font Awesome user icon */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            right: -10px;
            bottom: -8px;
            font-size: 1.2rem;
            color: rgba(0, 176, 155, 0.4);
        }

        /* رسائل البوت - تصميم أنيق */
        .chat-message.bot {
            background: linear-gradient(145deg, rgba(45, 45, 45, 0.95), rgba(35, 35, 35, 0.95));
            backdrop-filter: blur(10px);
            color: var(--text-color);
            margin-right: auto;
            margin-left: 0;
            border-bottom-left-radius: 4px;
            border: 1px solid rgba(0, 176, 155, 0.2);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .chat-message.bot::before {
            content: '\f544';
            /* Font Awesome robot icon */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            left: -10px;
            bottom: -8px;
            font-size: 1.2rem;
            color: rgba(0, 176, 155, 0.4);
        }

        .chat-message.bot pre {
            white-space: pre-wrap;
            font-size: 0.85em;
            background-color: rgba(0, 0, 0, 0.3);
            padding: 10px;
            border-radius: 8px;
            border: 1px solid rgba(0, 176, 155, 0.2);
            color: var(--text-muted-color);
            margin: 8px 0;
        }

        /* منطقة الإدخال - تصميم عصري */
        .chatbot-input-area {
            display: flex;
            padding: 15px;
            gap: 10px;
            background: linear-gradient(180deg, rgba(25, 25, 25, 1) 0%, rgba(20, 20, 20, 1) 100%);
            border-top: 1px solid rgba(0, 176, 155, 0.2);
            align-items: center;
        }

        .chatbot-input-area input {
            flex-grow: 1;
            margin: 0;
            padding: 12px 16px;
            background: rgba(40, 40, 40, 0.8);
            border: 1px solid rgba(0, 176, 155, 0.3);
            border-radius: 12px;
            color: var(--text-color);
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }

        .chatbot-input-area input:focus {
            outline: none;
            border-color: var(--primary-green);
            background: rgba(40, 40, 40, 1);
            box-shadow: 0 0 0 3px rgba(0, 176, 155, 0.1),
                0 4px 12px rgba(0, 176, 155, 0.2);
        }

        .chatbot-input-area input::placeholder {
            color: var(--text-muted-color);
        }

        .chatbot-input-area button {
            padding: 12px 20px;
            background: linear-gradient(135deg, #00d4ba 0%, #00b09b 100%);
            color: white;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 176, 155, 0.3);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .chatbot-input-area button::before {
            content: '\f1d8';
            /* Font Awesome paper plane icon */
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
        }

        .chatbot-input-area button:hover {
            background: linear-gradient(135deg, #00e6cf 0%, #00c4ac 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 176, 155, 0.4);
        }

        .chatbot-input-area button:active {
            transform: translateY(0);
        }

        /* أنيمشن الكتابة (Loading) - محسّن */
        .chat-message.loading {
            display: flex;
            gap: 6px;
            align-items: center;
            padding: 16px 20px;
            background: linear-gradient(145deg, rgba(45, 45, 45, 0.95), rgba(35, 35, 35, 0.95));
        }

        .chat-message.loading span {
            width: 10px;
            height: 10px;
            background: linear-gradient(135deg, #00d4ba, #00b09b);
            border-radius: 50%;
            animation: typingBounce 1.4s infinite ease-in-out both;
            box-shadow: 0 0 8px rgba(0, 176, 155, 0.5);
        }

        .chat-message.loading span:nth-child(1) {
            animation-delay: -0.32s;
        }

        .chat-message.loading span:nth-child(2) {
            animation-delay: -0.16s;
        }

        .chat-message.loading span:nth-child(3) {
            animation-delay: 0s;
        }

        @keyframes typingBounce {

            0%,
            80%,
            100% {
                transform: scale(0.8);
                opacity: 0.5;
            }

            40% {
                transform: scale(1.2);
                opacity: 1;
            }
        }

        /* أزرار الرسائل السريعة */
        .quick-replies {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 10px 20px 0;
            background: linear-gradient(180deg, rgba(18, 18, 18, 1) 0%, rgba(25, 25, 25, 1) 100%);
        }

        .quick-reply-btn {
            background: linear-gradient(135deg, rgba(0, 176, 155, 0.15), rgba(0, 128, 111, 0.15));
            border: 1px solid rgba(0, 176, 155, 0.4);
            color: var(--primary-green);
            padding: 8px 14px;
            border-radius: 20px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .quick-reply-btn:hover {
            background: linear-gradient(135deg, rgba(0, 212, 186, 0.25), rgba(0, 176, 155, 0.25));
            border-color: var(--primary-green);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 176, 155, 0.3);
        }

        .quick-reply-btn:active {
            transform: translateY(0);
        }

        /* تصميم متجاوب للشاشات الصغيرة */
        @media (max-width: 768px) {
            .chatbot-container {
                width: calc(100vw - 40px);
                max-width: 400px;
                left: 20px;
                bottom: 20px;
            }
        }

        #controlPanelSection .mapping-category {
            margin-bottom: 25px;
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background-color: #222;
        }

        #controlPanelSection .mapping-category h4 {
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
            color: var(--primary-green);
        }

        #controlPanelSection .mapping-item {
            display: grid;
            grid-template-columns: minmax(200px, 1.5fr) 2fr auto;
            gap: 10px;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid var(--border-color);
            transition: background-color 0.2s;
        }

        #controlPanelSection .mapping-item:hover {
            background-color: #333;
        }

        #controlPanelSection .mapping-item:last-child {
            border-bottom: none;
        }

        #controlPanelSection .mapping-item label {
            font-weight: 500;
            color: var(--text-color);
            margin-bottom: 0;
        }

        #controlPanelSection .mapping-item select {
            margin-bottom: 0;
        }

        #controlPanelSection .mapping-item .required-star {
            color: var(--accent-red);
            font-weight: bold;
            margin-right: 3px;
        }

        .report-output {
            margin-top: 25px;
            padding: 20px;
            background-color: #222;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            white-space: pre-wrap;
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.9rem;
            max-height: 600px;
            overflow: auto;
        }

        .report-output table {
            font-size: 0.85rem;
            background-color: transparent;
        }

        .report-output th {
            background-color: #3a3a3a;
        }

        .report-output tr:nth-child(even) {
            background-color: #2a2a2a;
        }

        .report-output tr:hover {
            background-color: #383838;
        }

        .transaction-row {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            padding: 5px;
            border-bottom: 1px solid var(--border-color);
            gap: 10px;
            transition: background-color 0.2s;
        }

        .transaction-row:hover {
            background-color: rgba(255, 255, 255, 0.06);
        }

        .transaction-row select,
        .transaction-row input {
            margin-bottom: 0;
        }

        .transaction-row .removeRowBtn {
            flex-shrink: 0;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 15px 25px;
        }

        #itemModal .form-grid>* {

            width: 100%;
        }

        #itemModal .required-star {
            color: var(--accent-red);
            font-weight: bold;
            margin-right: 3px;
        }

        #itemModal .sub-heading {
            color: var(--primary-green);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 8px;
            margin-top: 15px;
            margin-bottom: 5px;
            font-size: 1.2rem;
            grid-column: 1 / -1;
        }

        #itemModal .item-modal-tabs .item-tab-button {
            background-color: transparent;
            border: none;
            padding: 0.8rem 1.2rem;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-muted-color);
            border-bottom: 3px solid transparent;
            transition: all 0.2s ease-in-out;
        }

        #itemModal .item-modal-tabs .item-tab-button:hover {
            color: var(--text-color);
        }

        #itemModal .item-modal-tabs .item-tab-button.active {
            color: var(--primary-green);
            border-bottom-color: var(--primary-green);
        }

        #itemModal .item-tab-content {
            display: none;
        }

        #itemModal .item-tab-content.active {
            display: block;
            animation: fadeIn 0.4s;
        }

        .pos-container {
            display: flex;
            gap: 20px;
            height: calc(100vh - 200px);
        }

        .pos-billing-panel {
            width: 35%;
            display: flex;
            flex-direction: column;
            background-color: var(--bg-color);
            border-radius: 12px;
            padding: 15px;
            border: 1px solid var(--border-color);
        }

        .pos-items-panel {
            width: 65%;
            display: flex;
            flex-direction: column;
        }

        #pos-current-bill {
            flex-grow: 1;
            overflow-y: auto;
            padding-right: 10px;
        }

        #pos-current-bill .bill-item {
            display: grid;
            grid-template-columns: 1fr auto auto;
            gap: 10px;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
        }

        #pos-current-bill .item-name {
            font-weight: 600;
        }

        #pos-current-bill .item-qty {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        #pos-current-bill .qty-btn {
            background-color: var(--primary-green);
            border: none;
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            font-weight: bold;
        }

        #pos-current-bill .item-total {
            font-weight: bold;
            text-align: left;
        }

        .pos-summary {
            margin-top: auto;
            padding-top: 15px;
            border-top: 2px solid var(--border-color);
        }

        .pos-summary p {
            display: flex;
            justify-content: space-between;
            margin: 8px 0;
            font-size: 1.1rem;
        }

        .pos-summary #pos-grand-total {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--primary-green);
        }

        .pos-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 15px;
        }

        #pos-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
            justify-content: space-between;
            overflow: auto;
        }

        #pos-categories .cat-btn {
            padding: 8px 15px;
            border: 1px solid var(--border-color);
            background-color: var(--surface-color);
            color: var(--text-muted-color);
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.2s;
        }

        #pos-categories .cat-btn.active,
        #pos-categories .cat-btn:hover {
            background-color: var(--primary-green);
            color: white;
            border-color: var(--dark-green);
        }

        #pos-items-grid {
            flex-grow: 1;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 12px;
            overflow-y: auto;
            padding: 5px;
        }

        #pos-items-grid .item-btn {
            aspect-ratio: 1 / 1;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            padding: 10px;
            background-color: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }

        #pos-items-grid .item-btn:hover {
            transform: scale(1.05);
            border-color: var(--primary-green);
        }

        #pos-items-grid .item-name {
            font-size: 0.9rem;
            font-weight: 600;
        }

        #pos-items-grid .item-price {
            font-size: 0.8rem;
            color: var(--primary-green);
        }

        #tablesModal .modal-content {
            max-width: 95%;
        }

        #tables-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 15px;
            padding: 10px;
        }

        .table-btn {
            aspect-ratio: 1 / 1;
            border-radius: 12px;
            border: 2px solid var(--border-color);
            cursor: pointer;
            font-size: 1.2rem;
            font-weight: bold;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: all 0.3s;
            position: relative;
        }

        .table-btn.available {
            background-color: var(--surface-color);
            color: var(--text-color);
        }

        .table-btn.occupied {
            background-color: var(--accent-red);
            color: white;
            border-color: var(--dark-red);
        }

        .table-btn small {
            font-size: 0.7rem;
            font-weight: normal;
        }

        #paymentModal .form-grid {
            grid-template-columns: 1fr;
        }

        #paymentModal #payment-total-due {
            font-size: 2.5rem;
            color: var(--primary-green);
            text-align: center;
            margin-bottom: 20px;
        }

        #payment-methods {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        #payment-methods .action-btn {
            width: 100%;
            padding: 20px;
            font-size: 1.2rem;
        }

        .modal-tabs {
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
        }

        .modal-tab-button {
            padding: 12px 20px;
            cursor: pointer;
            border: none;
            background-color: transparent;
            font-size: 1.05rem;
            color: var(--text-muted-color);
            border-bottom: 3px solid transparent;
            font-weight: 600;
        }

        .modal-tab-button.active {
            color: var(--primary-green);
            border-bottom-color: var(--primary-green);
        }

        .modal-tab-pane {
            display: none;
        }

        .modal-tab-pane.active {
            display: block;
            animation: fadeIn 0.5s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        #assetModal .modal-content {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        #assetModal #assetForm {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            overflow-y: auto;
        }

        #assetModal .modal-tabs {
            flex-shrink: 0;
            display: flex;
            flex-wrap: wrap;
        }

        #assetModal .modal-tab-pane {
            display: none;
            padding: 20px 5px;
        }

        #assetModal .modal-tab-pane.active {
            display: block;
            animation: fadeIn 0.5s;
        }

        #assetModal .form-grid {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem 1.5rem;
        }

        #assetModal .form-grid label {
            font-size: 0.9rem;
            color: var(--text-muted-color);
        }

        #assetModal .form-grid input,
        #assetModal .form-grid select,
        #assetModal .form-grid textarea {
            padding: 10px 12px;
            margin-bottom: 0;
        }

        #assetModal h4 {
            margin-top: 20px;
            margin-bottom: 15px;
            font-size: 1.2rem;
            color: var(--primary-green);
            border-right: none;
            padding-right: 0;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 8px;
        }

        #assetModal .modal-tab-pane h4:first-of-type {
            margin-top: 0;
        }

        #cost-analysis-container {
            display: none;
            grid-template-columns: 1.5fr 1fr;
            gap: 20px;
            margin-top: 20px;
            align-items: start;
        }

        #cost-analysis-container.visible {
            display: grid;
        }

        @media (max-width: 850px) {
            #cost-analysis-container {
                grid-template-columns: 1fr;
            }
        }

        #costing-inputs-panel {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        #costing-summary-panel {
            position: sticky;
            top: 10px;
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .costing-card {
            background-color: #222;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
        }

        .costing-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background-color: #333;
            cursor: pointer;
            border-bottom: 1px solid var(--border-color);
        }

        .costing-card-header h4 {
            margin: 0;
            font-size: 1.1em;
            color: var(--text-color);
        }

        .costing-card-header .collapse-icon {
            transition: transform 0.3s ease;
        }

        .costing-card.collapsed .collapse-icon {
            transform: rotate(-90deg);
        }

        .costing-card-body {
            padding: 15px;
            max-height: 1000px;
            overflow: hidden;
            transition: all 0.4s ease-out;
        }

        /* --- New Profitability Dashboard Styles --- */
        .summary-dashboard-card {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 15px;
            margin-bottom: 5px;
        }

        .dashboard-header h3 {
            margin: 0;
            font-size: 1.1rem;
            color: var(--primary-green);
        }

        .input-group-inline {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
        }

        .mini-input {
            width: 60px;
            padding: 5px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
            background: var(--background-color);
            color: var(--text-color);
            text-align: center;
        }

        .cost-breakdown-section,
        .pricing-section {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
            padding: 15px;
        }

        .cost-breakdown-section h4,
        .pricing-section h4 {
            margin: 0 0 15px 0;
            font-size: 1rem;
            color: var(--text-muted-color);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 8px;
        }

        .cost-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 0.95rem;
        }

        .cost-row.total-sub {
            border-top: 1px dashed var(--border-color);
            padding-top: 8px;
            font-weight: bold;
            color: var(--text-color);
        }

        .cost-row.total-final {
            border-top: 1px solid var(--border-color);
            padding-top: 10px;
            margin-top: 10px;
            font-weight: bold;
            font-size: 1.1rem;
            color: var(--accent-red);
        }

        .pricing-input-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .pricing-input-row input,
        .vat-row input {
            width: 70px;
            padding: 5px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
            background: var(--background-color);
            color: var(--text-color);
            text-align: center;
        }

        .suggested-price-box {
            background: var(--primary-gradient);
            padding: 15px;
            border-radius: 10px;
            color: white;
            text-align: center;
            margin-bottom: 15px;
            box-shadow: 0 4px 15px rgba(0, 128, 43, 0.3);
        }

        .suggested-price-box label {
            display: block;
            font-size: 0.9rem;
            margin-bottom: 5px;
            opacity: 0.9;
        }

        .price-display {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .price-display input {
            background: transparent;
            border: none;
            color: white;
            font-size: 1.8rem;
            font-weight: bold;
            width: 120px;
            text-align: center;
            padding: 0;
        }

        .price-display input:focus {
            box-shadow: none;
            background: transparent;
            transform: none;
        }

        .price-display button {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }

        .price-display button:hover {
            background: rgba(255, 255, 255, 0.4);
        }

        .vat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            color: var(--text-muted-color);
            margin-bottom: 8px;
        }

        .final-price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            font-size: 1rem;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
        }

        .costing-card.collapsed .costing-card-body {
            padding-top: 0;
            padding-bottom: 0;
            max-height: 0;
        }

        .costing-card-footer {
            padding: 10px 15px;
            background-color: #333;
            border-top: 1px solid var(--border-color);
            text-align: left;
        }

        #costing-inputs-panel table,
        #costing-summary-panel table {
            width: 100%;
            font-size: 0.9em;
        }

        #costing-inputs-panel th,
        #costing-inputs-panel td,
        #costing-summary-panel th,
        #costing-summary-panel td {
            padding: 8px 10px;
            text-align: center;
        }

        #costing-inputs-panel thead th {
            background-color: #3a3a3a;
        }

        #costing-summary-panel td.label {
            font-weight: 500;
            text-align: right;
            color: var(--text-muted-color);
            width: 65%;
        }

        #costing-summary-panel td.summary-value {
            font-weight: 700;
            color: var(--primary-green);
            font-size: 1.1em;
        }

        #costing-inputs-panel input[type="text"],
        #costing-inputs-panel input[type="number"],
        #costing-summary-panel input[type="number"] {
            padding: 6px 8px;
            font-size: 0.9em;
            text-align: center;
            margin-bottom: 0;
        }

        #costing-inputs-panel input[type="text"] {
            text-align: right;
        }

        #costing-summary-panel #unitsProduced {
            font-weight: bold;
            font-size: 1.1em;
        }

        #costing-summary-panel .highlight td {
            background-color: rgba(0, 128, 43, 0.15);
            border-top: 1px solid var(--primary-green);
            border-bottom: 1px solid var(--primary-green);
        }

        #accountModal .modal-content {
            max-width: 900px;
        }

        #accountModal #accountForm .form-grid {
            grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
            gap: 1rem 1.5rem;
            align-items: start;
        }

        #accountModal #accountForm .form-grid>div {
            margin-bottom: 0;
        }

        #accountModal #accountForm input,
        #accountModal #accountForm select,
        #accountModal #accountForm textarea {
            margin-bottom: 0;
        }

        #budgetModal .table-container {
            overflow-x: auto;
        }

        #budget-grid-container {
            grid-column: 1 / -1;
        }

        #linkedAssetAccountDiv {
            display: none !important;
        }

        #variant-tooltip {
            position: absolute;
            display: none;
            padding: 10px 15px;
            background-color: #111;
            border: 1px solid var(--primary-green);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            z-index: 1020;
            max-width: 300px;
            font-size: 0.9em;
            pointer-events: none;
        }

        #variant-tooltip h5 {
            margin: 0 0 8px 0;
            color: var(--primary-green);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 5px;
        }

        #variant-tooltip ul {
            margin: 0;
            padding-right: 18px;
            list-style-type: disc;
        }

        /* Tree Grid Styles for Chart of Accounts */
        .tree-toggle {
            cursor: pointer;
            display: inline-block;
            width: 20px;
            text-align: center;
            color: var(--text-muted-color);
            transition: color 0.2s;
        }

        .tree-toggle:hover {
            color: var(--primary-green);
        }

        .parent-account {
            font-weight: 600;
            background-color: rgba(255, 255, 255, 0.02);
        }

        .account-row[data-level="0"] {
            border-top: 2px solid var(--border-color);
        }

        /* Input Group Styles */
        .input-group {
            display: flex;
            align-items: stretch;
        }

        .input-group select,
        .input-group input {
            flex-grow: 1;
            margin-bottom: 0;
            /* Override default margin */
        }

        .input-group .action-btn-neutral {
            margin-bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2em;
            line-height: 1;
        }

        .account-row:hover {
            background-color: rgba(0, 176, 155, 0.05) !important;
        }

        /* Action Button Icons */
        .action-btn-icon {
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 1.1rem;
            padding: 5px 8px;
            transition: transform 0.2s, color 0.2s;
            color: var(--text-muted-color);
        }

        .action-btn-icon:hover {
            transform: scale(1.2);
            color: var(--text-color);
        }

        .action-btn-icon .fa-eye {
            color: var(--accent-blue);
        }

        .action-btn-icon .fa-map-marker-alt {
            color: var(--primary-green);
        }

        .action-btn-icon .fa-edit {
            color: var(--text-color);
        }

        .action-btn-icon .fa-trash {
            color: var(--accent-red);
        }

        /* Large Modal for Workspaces */
        .modal-large .modal-content {
            width: 95%;
            max-width: 1300px;
            height: 90vh;
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
            background-color: var(--bg-primary);
            border-radius: 12px;
        }

        .modal-large .modal-header {
            padding: 15px 20px;
            background-color: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }

        .modal-large .modal-body {
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
        }

        /* Invoice Specific Layout */
        .invoice-form-header {
            padding: 15px 20px;
            background-color: var(--bg-primary);
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px;
        }

        .invoice-table-wrapper {
            flex-grow: 1;
            overflow-y: scroll;
            /* Always show scrollbar to prevent layout shift */
            position: relative;
            background-color: var(--bg-primary);
            min-height: 200px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
        }

        .invoice-table-wrapper table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            margin: 0;
        }

        .invoice-table-wrapper thead {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        .invoice-table-wrapper tbody {
            display: block;
            width: 100%;
            overflow-y: auto;
            max-height: 400px;
        }

        .invoice-table-wrapper tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        .invoice-table-wrapper thead,
        .modal-large .report-output-table thead {
            position: sticky;
            top: 0;
            z-index: 10;
            background-color: #252525;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .invoice-table-wrapper th,
        .modal-large .report-output-table th {
            padding: 8px 8px;
            text-align: right;
            font-weight: 600;
            color: var(--primary-green);
            border-bottom: 2px solid var(--border-color);
            background-color: #252525;
            box-sizing: border-box;
        }

        .invoice-table-wrapper td,
        .modal-large .report-output-table td {
            padding: 8px 8px;
            text-align: right;
            border-bottom: 1px solid var(--border-color);
            box-sizing: border-box;
            vertical-align: middle;
        }

        .invoice-table-wrapper td input,
        .invoice-table-wrapper td select,
        .invoice-table-wrapper td button,
        .modal-large .report-output-table td input,
        .modal-large .report-output-table td select,
        .modal-large .report-output-table td button {
            width: 100%;
            padding: 6px 8px;
            margin: 0;
            box-sizing: border-box;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background-color: rgba(255, 255, 255, 0.05);
            color: var(--text-color);
            font-size: 0.85rem;
        }

        /* Purchase Invoice Table Column Widths */
        #spiItemsDiv table thead th:nth-child(1),
        #purchasesInvoiceRows tr td:nth-child(1) {
            width: 25%;
        }

        #spiItemsDiv table thead th:nth-child(2),
        #purchasesInvoiceRows tr td:nth-child(2) {
            width: 10%;
        }

        #spiItemsDiv table thead th:nth-child(3),
        #purchasesInvoiceRows tr td:nth-child(3) {
            width: 10%;
        }

        #spiItemsDiv table thead th:nth-child(4),
        #purchasesInvoiceRows tr td:nth-child(4) {
            width: 10%;
        }

        #spiItemsDiv table thead th:nth-child(5),
        #purchasesInvoiceRows tr td:nth-child(5) {
            width: 15%;
        }

        #spiItemsDiv table thead th:nth-child(6),
        #purchasesInvoiceRows tr td:nth-child(6) {
            width: 10%;
        }

        #spiItemsDiv table thead th:nth-child(7),
        #purchasesInvoiceRows tr td:nth-child(7) {
            width: 15%;
        }

        #spiItemsDiv table thead th:nth-child(8),
        #purchasesInvoiceRows tr td:nth-child(8) {
            width: 5%;
        }

        /* Sales Invoice Table Column Widths */
        #newSalesInvoiceModal table thead th:nth-child(1),
        #salesInvoiceItemsTableBody tr td:nth-child(1) {
            width: 35%;
        }

        #newSalesInvoiceModal table thead th:nth-child(2),
        #salesInvoiceItemsTableBody tr td:nth-child(2) {
            width: 10%;
        }

        #newSalesInvoiceModal table thead th:nth-child(3),
        #salesInvoiceItemsTableBody tr td:nth-child(3) {
            width: 10%;
        }

        #newSalesInvoiceModal table thead th:nth-child(4),
        #salesInvoiceItemsTableBody tr td:nth-child(4) {
            width: 15%;
        }

        #newSalesInvoiceModal table thead th:nth-child(5),
        #salesInvoiceItemsTableBody tr td:nth-child(5) {
            width: 15%;
        }

        #newSalesInvoiceModal table thead th:nth-child(6),
        #salesInvoiceItemsTableBody tr td:nth-child(6) {
            width: 10%;
        }

        #newSalesInvoiceModal table thead th:nth-child(7),
        #salesInvoiceItemsTableBody tr td:nth-child(7) {
            width: 5%;
        }

        /* Payment Voucher Table Column Widths */
        #newPaymentVoucherModal table thead th:nth-child(1),
        #paymentVoucherRows tr td:nth-child(1) {
            width: 25%;
        }

        #newPaymentVoucherModal table thead th:nth-child(2),
        #paymentVoucherRows tr td:nth-child(2) {
            width: 15%;
        }

        #newPaymentVoucherModal table thead th:nth-child(3),
        #paymentVoucherRows tr td:nth-child(3) {
            width: 10%;
        }

        #newPaymentVoucherModal table thead th:nth-child(4),
        #paymentVoucherRows tr td:nth-child(4) {
            width: 20%;
        }

        #newPaymentVoucherModal table thead th:nth-child(5),
        #paymentVoucherRows tr td:nth-child(5) {
            width: 20%;
        }

        #newPaymentVoucherModal table thead th:nth-child(6),
        #paymentVoucherRows tr td:nth-child(6) {
            width: 10%;
        }

        .invoice-actions-bar {
            padding: 10px 20px;
            background-color: var(--bg-secondary);
            border-top: 1px solid var(--border-color);
            flex-shrink: 0;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .invoice-footer {
            padding: 15px 20px;
            background-color: var(--bg-primary);
            border-top: 1px solid var(--border-color);
            flex-shrink: 0;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 20px;
        }


        .modal-large .modal-header {
            padding: 15px 25px;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }

        .modal-large .modal-body {
            flex-grow: 1;
            overflow-y: auto;
            padding: 25px;
            display: flex;
            flex-direction: column;
        }

        .modal-large .modern-form {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .modal-large .table-container {
            flex-grow: 1;
            min-height: 200px;
            margin-bottom: 20px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .modal-large .report-output-table {
            flex-grow: 1;
            width: 100%;
        }

        .modal-large .modal-footer-custom {
            padding: 15px 25px;
            border-top: 1px solid var(--border-color);
            background-color: var(--surface-color);
            flex-shrink: 0;
        }

        /* Table Input Styles */
        .report-output-table td {
            padding: 0 !important;
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
        }

        .report-output-table td input,
        .report-output-table td select {
            width: 100%;
            height: 100%;
            border: none;
            background: transparent;
            padding: 12px 10px;
            color: var(--text-color);
            font-family: inherit;
            outline: none;
            display: block;
        }

        .report-output-table td input:focus,
        .report-output-table td select:focus {
            background: rgba(255, 255, 255, 0.05);
            box-shadow: inset 0 0 0 2px var(--primary-green);
        }

        .report-output-table td .action-btn-icon {
            padding: 8px;
            margin: 0 auto;
            display: block;
        }

        /* --- POS Redesign Styles --- */
        section.pos-redesign {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            padding: 10px !important;
            overflow: hidden;
            display: none;
            flex-direction: column;
            z-index: 999;
            margin: 0;
            border-radius: 0;
        }

        section.pos-redesign.active-section {
            display: flex;
        }

        /* Hide header and main container when POS is active */
        body:has(section.pos-redesign.active-section) header {
            display: none;
        }

        body:has(section.pos-redesign.active-section) main {
            padding: 0;
            margin: 0;
        }

        body:has(section.pos-redesign.active-section) #costai-floating-btn {
            display: none;
        }

        .pos-layout {
            display: grid;
            grid-template-columns: 400px 1fr;
            /* Bill First (400px), Items Panel Second */
            gap: 12px;
            height: 100%;
            width: 100%;
        }

        /* Bill Panel */
        .pos-bill-panel {
            background: linear-gradient(145deg, rgba(30, 30, 30, 0.95), rgba(20, 20, 20, 0.95));
            backdrop-filter: blur(15px);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(0, 176, 155, 0.3);
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(0, 176, 155, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .pos-bill-header {
            padding: 10px 15px;
            background: linear-gradient(135deg, rgba(0, 176, 155, 0.1), rgba(0, 140, 120, 0.05));
            border-bottom: 2px solid rgba(0, 176, 155, 0.3);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .bill-info {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: nowrap;
        }

        #pos-bill-number {
            font-weight: bold;
            font-size: 1rem;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            white-space: nowrap;
        }

        .status-badge {
            font-size: 0.7rem;
            background: var(--primary-gradient);
            color: white;
            padding: 3px 8px;
            border-radius: 12px;
            width: fit-content;
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(0, 176, 155, 0.3);
            text-transform: uppercase;
            letter-spacing: 0.3px;
            white-space: nowrap;
        }

        .bill-meta {
            display: flex;
            align-items: center;
            white-space: nowrap;
        }

        #pos-customer-name {
            font-size: 0.9rem;
            color: var(--text-muted-color);
        }

        .pos-bill-items {
            flex-grow: 1;
            overflow-y: auto;
            padding: 12px;
            background: rgba(0, 0, 0, 0.1);
        }

        .empty-bill-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--text-muted-color);
            opacity: 0.5;
        }

        .empty-bill-state i {
            font-size: 3rem;
            margin-bottom: 10px;
        }

        /* Bill Item Row */
        .bill-item-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            background: linear-gradient(145deg, rgba(35, 35, 35, 0.6), rgba(25, 25, 25, 0.6));
            margin-bottom: 6px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .bill-item-row::before {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--primary-gradient);
            opacity: 0;
            transition: opacity 0.2s;
        }

        .bill-item-row:hover::before {
            opacity: 1;
        }

        .bill-item-row:hover {
            background: linear-gradient(145deg, rgba(0, 176, 155, 0.1), rgba(0, 140, 120, 0.1));
            border-color: rgba(0, 176, 155, 0.3);
            transform: translateX(-2px);
            box-shadow: 0 4px 12px rgba(0, 176, 155, 0.15);
        }

        .bill-item-info {
            flex: 1;
        }

        .bill-item-name {
            display: block;
            font-weight: bold;
        }

        .bill-item-price {
            font-size: 0.9rem;
            color: var(--text-muted-color);
        }

        .bill-item-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .qty-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-color);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.2rem;
        }

        .qty-btn:active {
            background: var(--primary-green);
        }

        .bill-item-qty {
            font-weight: bold;
            min-width: 20px;
            text-align: center;
        }

        .bill-item-total {
            font-weight: bold;
            min-width: 60px;
            text-align: left;
            margin-left: 10px;
        }

        .remove-item-btn {
            color: var(--accent-red);
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
        }

        .pos-bill-footer {
            padding: 18px;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4));
            border-top: 2px solid rgba(0, 176, 155, 0.3);
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
        }

        .bill-totals {
            margin-bottom: 15px;
        }

        .total-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            font-size: 0.9rem;
        }

        .total-row.grand-total {
            font-size: 1.6rem;
            font-weight: 800;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-top: 12px;
            border-top: 2px solid rgba(0, 176, 155, 0.4);
            padding-top: 12px;
            text-shadow: 0 0 20px rgba(0, 176, 155, 0.3);
        }

        .bill-actions {
            display: none;
            /* Hidden - using side quick actions instead */
        }

        .pos-btn {
            border: none;
            border-radius: 8px;
            padding: 12px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            font-size: 1rem;
        }

        .btn-hold {
            background: #f39c12;
            color: white;
        }

        .btn-clear {
            background: var(--accent-red);
            color: white;
        }

        .btn-pay {
            background: var(--primary-green);
            color: white;
            font-size: 1.2rem;
        }

        /* Items Panel - Compact Design */
        .pos-items-panel {
            display: grid;
            grid-template-rows: auto auto 1fr;
            /* Top bar, Categories, Items Grid + Actions */
            gap: 10px;
            overflow: hidden;
            height: 100%;
            width: 100%;
            background: linear-gradient(145deg, rgba(30, 30, 30, 0.7), rgba(25, 25, 25, 0.85));
            backdrop-filter: blur(10px);
            padding: 12px;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        }

        /* Held Bills Modal Styles */
        .held-bills-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-height: 400px;
            overflow-y: auto;
        }

        .held-bill-item {
            background: var(--surface-color);
            padding: 15px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .held-bill-info {
            display: flex;
            flex-direction: column;
        }

        .held-bill-total {
            font-weight: bold;
            font-size: 1.1rem;
            color: var(--primary-green);
        }

        .pos-top-bar {
            display: flex;
            gap: 10px;
            height: 50px;
        }

        .pos-search-container {
            flex-grow: 1;
            background: var(--surface-color);
            border-radius: 8px;
            display: flex;
            align-items: center;
            padding: 0 15px;
            border: 1px solid var(--border-color);
        }

        .pos-search-container input {
            background: none;
            border: none;
            color: var(--text-color);
            flex-grow: 1;
            padding: 10px;
            font-size: 1.1rem;
            outline: none;
        }

        .pos-scan-btn {
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 1.2rem;
            cursor: pointer;
        }

        .pos-top-actions {
            display: flex;
            gap: 10px;
        }

        .pos-btn-icon {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: var(--surface-color);
            color: var(--text-color);
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pos-categories-bar {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 5px;
            white-space: nowrap;
        }

        .pos-cat-btn {
            padding: 10px 20px;
            border-radius: 20px;
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.2s;
        }

        .pos-cat-btn.active {
            background: var(--primary-green);
            color: white;
            border-color: var(--primary-green);
        }

        .pos-items-grid-wrapper {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 10px;
            overflow: hidden;
            height: 100%;
        }

        .pos-items-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 8px;
            overflow-y: auto;
            padding: 5px;
            align-content: start;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .pos-quick-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 80px;
            background: rgba(0, 0, 0, 0.2);
            padding: 10px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .pos-quick-btn {
            height: 70px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: linear-gradient(145deg, rgba(40, 40, 40, 0.8), rgba(30, 30, 30, 0.8));
            color: var(--text-color);
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: center;
            padding: 5px;
        }

        .pos-quick-btn i {
            font-size: 1.5rem;
            margin-bottom: 2px;
        }

        .pos-quick-btn:hover {
            transform: translateY(-2px);
            background: linear-gradient(145deg, rgba(0, 176, 155, 0.3), rgba(0, 140, 120, 0.3));
            border-color: var(--primary-green);
            box-shadow: 0 4px 15px rgba(0, 176, 155, 0.3);
        }

        .pos-quick-btn:active {
            transform: translateY(0);
        }

        .pos-item-card {
            background: linear-gradient(145deg, rgba(35, 35, 35, 0.9), rgba(25, 25, 25, 0.9));
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 95px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .pos-item-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--primary-gradient);
            opacity: 0;
            transition: opacity 0.2s;
        }

        .pos-item-card:hover::before {
            opacity: 1;
        }

        .pos-item-card:hover {
            transform: translateY(-3px);
            background: linear-gradient(145deg, rgba(0, 176, 155, 0.15), rgba(0, 140, 120, 0.15));
            border-color: var(--primary-green);
            box-shadow: 0 6px 20px rgba(0, 176, 155, 0.25),
                0 0 15px rgba(0, 176, 155, 0.2);
        }

        .pos-item-card:active {
            transform: scale(0.96);
        }

        .pos-item-name {
            font-weight: bold;
            font-size: 0.95rem;
            line-height: 1.2;
            max-height: 2.4em;
            overflow: hidden;
        }

        .pos-item-price {
            font-weight: bold;
            color: var(--primary-green);
            align-self: flex-end;
        }

        .pos-item-sku {
            font-size: 0.7rem;
            color: var(--text-muted-color);
            position: absolute;
            bottom: 10px;
            left: 10px;
        }

        /* Payment Modal Styles */
        .pos-payment-summary {
            background: rgba(0, 0, 0, 0.2);
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .payment-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            font-size: 1.1rem;
        }

        .payment-row.total span:last-child {
            font-weight: bold;
        }

        .payment-row.change {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border-color);
            font-size: 1.3rem;
            font-weight: bold;
            color: var(--primary-green);
        }

        .pos-payment-methods {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .method-btn {
            flex: 1;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: transparent;
            color: var(--text-color);
            font-size: 1.1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .method-btn.active {
            background: var(--primary-green);
            color: white;
            border-color: var(--primary-green);
        }

        .pos-numpad-container {
            display: flex;
            gap: 15px;
            height: 300px;
        }

        .pos-quick-cash {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 80px;
        }

        .pos-quick-cash button {
            flex: 1;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-color);
            font-weight: bold;
            cursor: pointer;
        }

        .pos-numpad {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .pos-numpad button {
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: var(--surface-color);
            color: var(--text-color);
            font-size: 1.5rem;
            font-weight: bold;
            cursor: pointer;
        }

        .pos-numpad button:active {
            background: rgba(255, 255, 255, 0.1);
        }

        .clear-btn {
            background: var(--accent-red) !important;
            color: white !important;
        }

        .pos-confirm-pay-btn {
            width: 100%;
            padding: 15px;
            background: var(--primary-green);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.3rem;
            font-weight: bold;
            margin-top: 20px;
            cursor: pointer;
        }

        /* Responsive adjustments for smaller tablets (7-inch) */
        @media (max-width: 1024px) {
            .pos-layout {
                grid-template-columns: 320px 1fr;
                /* Fixed width for tablet */
                gap: 8px;
            }

            .pos-item-card {
                padding: 8px;
                min-height: 80px;
            }

            .pos-item-name {
                font-size: 0.9rem;
                white-space: normal;
                /* Allow wrapping */
            }

            .pos-btn {
                padding: 10px;
                font-size: 0.9rem;
            }

            .bill-item-row {
                padding: 8px;
            }

            .qty-btn {
                width: 36px;
                /* Larger touch target */
                height: 36px;

            }
        }

        /* --- Budget Matrix Styling --- */
        .budget-matrix-container {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }

        .budget-matrix-container:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        #budgetMatrixTable th {
            background: linear-gradient(180deg, #2d2d2d, #252525);
            color: var(--primary-color);
            font-weight: 600;
            padding: 12px;
            border-bottom: 2px solid var(--primary-color);
            white-space: nowrap;
        }

        #budgetMatrixTable td {
            padding: 8px;
            vertical-align: middle;
            border-bottom: 1px solid var(--border-color);
        }

        .budget-cell {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .budget-input {
            width: 100%;
            padding: 6px 8px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-color);
            text-align: center;
            font-weight: bold;
            transition: all 0.2s;
        }

        .budget-input:focus {
            border-color: var(--primary-color);
            background: rgba(0, 176, 155, 0.1);
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 176, 155, 0.2);
        }

        .budget-input.changed {
            border-color: var(--accent-yellow);
            background: rgba(255, 193, 7, 0.1);
        }

        .budget-actual-info {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .kpi-card {
            background: linear-gradient(145deg, rgba(45, 45, 45, 0.6), rgba(30, 30, 30, 0.8));
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s;
        }

        .kpi-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary-color);
        }

        .kpi-card h4 {
            margin: 0 0 10px 0;
            color: var(--text-muted-color);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .kpi-card p {
            margin: 0;
            font-weight: 800;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        /* Reports Dashboard Redesign */
        .reports-dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .report-card {
            background-color: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: var(--shadow-sm);
        }

        .report-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
            border-color: var(--primary-green);
        }

        .report-card-header {
            background-color: rgba(0, 0, 0, 0.2);
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .report-card-header i {
            font-size: 1.5rem;
            color: var(--primary-green);
            background: rgba(0, 176, 155, 0.1);
            padding: 10px;
            border-radius: 10px;
        }

        .report-card-header h3 {
            margin: 0;
            font-size: 1.2rem;
            color: var(--text-color);
            border: none;
            padding: 0;
        }

        .report-card-body {
            padding: 20px;
            flex-grow: 1;
        }

        .report-card-footer {
            padding: 15px 20px;
            background-color: rgba(0, 0, 0, 0.1);
            border-top: 1px solid var(--border-color);
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .report-card-footer .report-btn {
            margin: 0;
            font-size: 0.9rem;
            padding: 8px 16px;
            flex-grow: 1;
            text-align: center;
        }

        .form-group-row {
            display: flex;
            gap: 15px;
        }

        .form-group-row .form-group {
            flex: 1;
        }

        /* Adjustments for smaller inputs in cards */
        .report-card .form-group label {
            font-size: 0.9rem;
            margin-bottom: 5px;
        }

        .report-card input,
        .report-card select {
            padding: 8px 12px;
            font-size: 0.9rem;
            margin-bottom: 10px;
        }

        /* Loading Spinner */
        .loading-spinner {
            border: 4px solid rgba(0, 176, 155, 0.1);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border-left-color: var(--primary-green);
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Fade In Animation */
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        /* --- Report Navigation Buttons --- */
        .report-actions {
            margin-top: 30px;
            text-align: center;
            border-top: 1px solid var(--border-color);
            padding-top: 20px;
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .action-btn-neutral {
            background-color: var(--surface-color);
            color: var(--text-color);
            border: 1px solid var(--border-color);
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.95rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .action-btn-neutral:hover {
            background-color: var(--border-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .action-btn-neutral i {
            font-size: 1rem;
        }

        /* ==========================================================================
   Manufacturing Command Center Redesign
   ========================================================================== */

        .manufacturing-header {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            padding: 30px;
            border-radius: 16px;
            margin-bottom: 30px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

        .manufacturing-header::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 212, 186, 0.05));
            transform: skewX(-20deg);
        }

        .manufacturing-title {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary-green);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .manufacturing-subtitle {
            color: var(--text-muted-color);
            font-size: 1.1rem;
            max-width: 600px;
        }

        /* Process Flow Visualization */
        .process-flow {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 30px 0;
            padding: 20px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            position: relative;
        }

        .process-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            position: relative;
            z-index: 1;
            flex: 1;
        }

        .process-icon {
            width: 60px;
            height: 60px;
            background: var(--surface-color);
            border: 2px solid var(--border-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--text-muted-color);
            transition: all 0.3s ease;
        }

        .process-step.active .process-icon {
            border-color: var(--primary-green);
            color: var(--primary-green);
            background: rgba(0, 212, 186, 0.1);
            box-shadow: 0 0 15px rgba(0, 212, 186, 0.2);
        }

        .process-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-muted-color);
        }

        .process-step.active .process-label {
            color: var(--primary-green);
        }

        .process-line {
            position: absolute;
            top: 50px;
            /* Adjust based on icon size/padding */
            left: 10%;
            right: 10%;
            height: 2px;
            background: var(--border-color);
            z-index: 0;
        }

        /* Console Card */
        .console-card {
            background: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .console-section-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .console-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-bottom: 30px;
        }

        .console-input-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .console-input-group label {
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-muted-color);
        }

        .console-input-group input,
        .console-input-group select {
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 12px 15px;
            color: var(--text-color);
            font-size: 1rem;
            transition: all 0.2s;
        }

        .console-input-group input:focus,
        .console-input-group select:focus {
            border-color: var(--primary-green);
            box-shadow: 0 0 0 3px rgba(0, 212, 186, 0.1);
            outline: none;
        }

        .production-history-card {
            margin-top: 40px;
            background: var(--surface-color);
            border-radius: 16px;
            border: 1px solid var(--border-color);
            overflow: hidden;
        }

        .production-history-header {
            padding: 20px;
            background: rgba(0, 0, 0, 0.2);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* ═══════════════════════════════════════════════════════════════ */
        /* Period Comparison Modal Styles - محدد جداً لتجنب التأثير على باقي النظام */
        /* ═══════════════════════════════════════════════════════════════ */

        #periodComparisonModal .comparison-radio-label {
            display: flex;
            align-items: flex-start;
            padding: 14px 16px;
            background: var(--surface-color);
            border-radius: 10px;
            cursor: pointer;
            border: 2px solid var(--border-color);
            transition: all 0.3s ease;
            gap: 12px;
        }

        #periodComparisonModal .comparison-radio-label:hover {
            background: rgba(0, 176, 155, 0.05);
            border-color: var(--primary-green);
            box-shadow: 0 4px 12px rgba(0, 176, 155, 0.15);
        }

        #periodComparisonModal .comparison-radio {
            margin: 0;
            width: 20px;
            height: 20px;
            min-width: 20px;
            cursor: pointer;
            accent-color: var(--primary-green);
            flex-shrink: 0;
            margin-top: 2px;
        }

        #periodComparisonModal .comparison-radio-content {
            flex: 1;
            min-width: 0;
        }

        #periodComparisonModal .comparison-radio-content strong {
            display: block;
            color: var(--text-color);
            font-size: 1rem;
            margin-bottom: 5px;
            line-height: 1.4;
        }

        #periodComparisonModal .comparison-radio-desc {
            font-size: 0.85em;
            color: var(--text-muted-color);
            margin-top: 5px;
            line-height: 1.4;
        }

        #periodComparisonModal .comparison-radio:checked+.comparison-radio-content strong {
            color: var(--primary-green);
        }

        #periodComparisonModal .comparison-radio-label:has(.comparison-radio:checked) {
            background: rgba(0, 176, 155, 0.1);
            border-color: var(--primary-green);
            box-shadow: 0 0 15px rgba(0, 176, 155, 0.2);
        }

        /* محاذاة أيقونات Font Awesome في المودال */
        #periodComparisonModal h3 i {
            margin-left: 8px;
            color: var(--primary-green);
        }


        /* Period Selection Checkboxes في مودال المقارنة */
        #periodComparisonModal .period-checkbox-item {
            border: 1px solid var(--border-color) !important;
            padding: 12px !important;
            margin-bottom: 10px !important;
            border-radius: 8px !important;
            cursor: pointer !important;
            transition: all 0.2s !important;
            background: var(--surface-color);
        }

        #periodComparisonModal .period-checkbox-item:hover {
            background: rgba(0, 176, 155, 0.05) !important;
            border-color: var(--primary-green) !important;
            box-shadow: 0 2px 8px rgba(0, 176, 155, 0.1);
        }

        #periodComparisonModal .period-checkbox-item.selected {
            background: rgba(0, 176, 155, 0.1) !important;
            border-color: var(--primary-green) !important;
        }

        #periodComparisonModal .period-checkbox-item label {
            cursor: pointer !important;
            display: flex !important;
            align-items: flex-start !important;
            width: 100% !important;
            gap: 12px !important;
            margin: 0 !important;
        }

        #periodComparisonModal .period-checkbox-item input[type="checkbox"] {
            margin: 0 !important;
            width: 18px !important;
            height: 18px !important;
            min-width: 18px !important;
            cursor: pointer !important;
            accent-color: var(--primary-green) !important;
            flex-shrink: 0 !important;
            margin-top: 2px !important;
        }

        #periodComparisonModal .period-checkbox-item .period-content {
            flex: 1;
            min-width: 0;
        }

        /* Toggle Switch Styles */
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 26px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .switch span {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #444;
            transition: .3s;
            border-radius: 26px;
        }

        .switch span:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .3s;
            border-radius: 50%;
        }

        .switch input:checked + span {
            background-color: var(--primary-green);
        }

        .switch input:checked + span:before {
            transform: translateX(24px);
        }

        /* System Monitoring Styles */
        #systemMonitoringSection .monitoring-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        #systemMonitoringSection .monitoring-card:hover {
            transform: translateY(-5px);
        }

        #sysLoadingIndicator {
            display: flex;
            align-items: center;
            gap: 8px;
        }

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

        .fa-spinner.fa-spin {
            animation: spin 1s linear infinite;
        }