/* =========================================
       1. DESKTOP SAAS DESIGN TOKENS
       ========================================= */
    :root {
        --bg-main: #F4F5F7;
        --sidebar-bg: #0A0A0A;
        --sidebar-hover: #1A1A1A;
        --sidebar-text: #A1A1AA;
        --card-bg: #FFFFFF;
        --card-border: #E5E7EB;
        --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.03);
        --text-main: #111827;
        --text-muted: #6B7280;
        --separator: #F3F4F6;
        --accent-blue: #2563EB;
        --accent-green: #10B981;
        --accent-red: #EF4444;
        --accent-orange: #F59E0B; 
    }

    body.dark {
        --bg-main: #0F1115;
        --card-bg: #181A1F;
        --card-border: #272A30;
        --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.5);
        --text-main: #F9FAFB;
        --text-muted: #9CA3AF;
        --separator: #272A30;
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }
    body { height: 100vh; background-color: var(--bg-main); color: var(--text-main); overflow: hidden; transition: background-color 0.3s; font-family: 'Plus Jakarta Sans', sans-serif; }
    
    .glass-panel { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow-soft); border-radius: 16px; transition: 0.3s; }

    /* =========================================
       2. DESKTOP LAYOUT ARCHITECTURE
       ========================================= */
    #desktopAppLayout { display: none; width: 100vw; height: 100vh; overflow: hidden; }
    
    /* SIDEBAR */
    .sidebar { width: 260px; background: var(--sidebar-bg); display: flex; flex-direction: column; border-right: 1px solid #1F2937; z-index: 50; }
    .brand { height: 80px; display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid #1F2937; }
    .brand-text { font-weight: 700; font-size: 18px; color: white; line-height: 1.2; letter-spacing: -0.2px; }
    .nav-menu { padding: 24px 16px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
    .nav-label { font-size: 11px; font-weight: 700; color: #4B5563; text-transform: uppercase; letter-spacing: 1px; margin: 12px 0 8px 12px; }
    .nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; color: var(--sidebar-text); font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; text-decoration: none; }
    .nav-item svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
    .nav-item:hover { background: var(--sidebar-hover); color: white; }
    .nav-item.active { background: #1F2937; color: white; font-weight: 600; }
    .nav-item.active svg { stroke: var(--accent-blue); }
    .sidebar-footer { padding: 20px; border-top: 1px solid #1F2937; }
    
    /* MAIN WORKSPACE */
    .main-wrapper { flex: 1; display: flex; flex-direction: column; background: var(--bg-main); overflow: hidden; }
    
    /* TOP BAR */
    .top-bar { height: 80px; background: var(--card-bg); border-bottom: 1px solid var(--card-border); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; z-index: 40; transition: 0.3s; }
    .search-wrap { display: flex; align-items: center; background: var(--bg-main); border: 1px solid var(--separator); padding: 10px 16px; border-radius: 12px; width: 350px; transition: 0.3s; }
    .search-wrap:focus-within { border-color: var(--accent-blue); background: var(--card-bg); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
    .search-wrap input { border: none; background: transparent; outline: none; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--text-main); width: 100%; margin-left: 10px; }
    
    .top-bar-right { display: flex; align-items: center; gap: 24px; }
    .time-widget { text-align: right; display: flex; flex-direction: column; }
    .user-profile-btn { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px 12px; border-radius: 12px; transition: 0.2s; }
    .user-profile-btn:hover { background: var(--separator); }
    .avatar { width: 36px; height: 36px; background: var(--text-main); color: var(--bg-main); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
    
    /* VIEWS CONTAINER */
    .views-container { flex: 1; position: relative; overflow: hidden; }
    .view { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; overflow-y: auto; padding: 32px; z-index: 10; }
    .view.active { opacity: 1; pointer-events: auto; transform: translateY(0); z-index: 20; }
    
    #loginView { background: var(--bg-main); z-index: 3000; }
    #loginView.active { opacity: 1; pointer-events: auto; transform: none; }

    .page-header { margin-bottom: 24px; }
    .page-header h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: var(--text-main); margin-bottom: 4px; }
    .page-header p { font-size: 14px; color: var(--text-muted); font-weight: 500; }

    /* =========================================
       3. COMPONENT STYLES
       ========================================= */
    .inset-group { border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
    .input-row { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: relative; min-height: 60px; }
    .input-row:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 20px; right: 0; height: 1px; background: var(--separator); }
    .input-row input, .input-row select { flex: 1; border: none; background: transparent; padding: 20px 0; font-size: 15px; font-weight: 500; color: var(--text-main); outline: none; font-family: inherit;}
    .input-row label { font-size: 14px; color: var(--text-muted); font-weight: 600; margin-right: 16px; white-space: nowrap; }
    .input-row input.rtl { text-align: right; color: var(--text-main); font-weight: 700; font-size: 16px; }
    
    .btn { padding: 12px 20px; border: none; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: 0.2s; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px;}
    .btn:active { transform: scale(0.97); }
    .btn-primary { background: var(--text-main); color: var(--bg-main); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
    body.dark .btn-primary { background: var(--accent-blue); color: white; }
    .btn-red { background: rgba(239, 68, 68, 0.1); color: var(--accent-red); }
    .btn-green { background: var(--accent-green); color: white; }
    .btn-gray { background: var(--separator); color: var(--text-main); }
    
    .btn-logout { width: 100%; padding: 12px; border: none; border-radius: 8px; background: rgba(239, 68, 68, 0.1); color: var(--accent-red); font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit;}
    .btn-logout:hover { background: var(--accent-red); color: white; }
    
    .section-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.5px; }

    .theme-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
    .theme-switch input { opacity: 0; width: 0; height: 0; }
    .theme-switch .slider { position: absolute; inset: 0; background-color: var(--separator); border-radius: 30px; transition: 0.4s; cursor: pointer; border: 1px solid var(--card-border);}
    .theme-switch .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: var(--text-muted); border-radius: 50%; transition: 0.4s; }
    .theme-switch input:checked + .slider { background-color: var(--accent-blue); border-color: var(--accent-blue); }
    .theme-switch input:checked + .slider:before { transform: translateX(20px); background: white;}

    /* Dashboard Bento Grids */
    .dash-bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; }
    .bento-box { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 12px; }
    .bento-title { font-size: 13px; font-weight: 700; color: var(--text-main); margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; letter-spacing: -0.2px;}
    
    /* =========================================
       4. MODULES (TROLLEY, INVENTORY, ETC)
       ========================================= */
    /* Trolley */
    .trolley-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 12px; margin-top: 24px; }
    .trolley-box { background: var(--card-bg); padding: 14px 0; border: 1px solid var(--card-border); border-radius: 10px; text-align: center; cursor: pointer; user-select: none; font-weight: 600; font-size: 14px; transition: 0.2s; color: var(--text-muted); }
    .trolley-box:hover { border-color: var(--text-main); color: var(--text-main); }
    .checked-red { background: var(--accent-red) !important; color: #fff !important; border-color: var(--accent-red) !important; }
    .checked-blue { background: var(--accent-blue) !important; color: #fff !important; border-color: var(--accent-blue) !important; }
    .stat-bar { height: 6px; background: var(--separator); border-radius: 10px; overflow: hidden; margin-top: 8px; }
    .stat-fill { height: 100%; transition: width 0.4s; }
    .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

    /* Inventory */
    .table-container { border-radius: 12px; overflow-x: auto; margin-bottom: 24px; border: 1px solid var(--card-border); background: var(--card-bg); }
    table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
    th { background: var(--bg-main); padding: 14px 20px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 11px; border-bottom: 1px solid var(--separator); letter-spacing: 0.5px;}
    td { padding: 14px 20px; border-bottom: 1px solid var(--separator); color: var(--text-main); font-weight: 500;}
    td[contenteditable="true"]:focus { background: rgba(37,99,235,0.05); box-shadow: inset 0 0 0 2px var(--accent-blue); outline: none; border-radius: 6px;}
    .disabled-cell { color: var(--text-muted); opacity: 0.6; pointer-events: none; }
    .exp-cell { color: var(--accent-blue); font-weight: 600; cursor: pointer; }
    .locked td { opacity: 0.5; pointer-events: none; }
    .locked td:last-child { pointer-events: auto; opacity: 1; }
    
    .status-badge { padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; display: inline-block; white-space: nowrap; }
    .badge-deposit { background: rgba(239, 68, 68, 0.1); color: var(--accent-red); }
    .badge-return { background: rgba(16, 185, 129, 0.1); color: var(--accent-green); }
    .badge-temp { background: rgba(245, 158, 11, 0.1); color: var(--accent-orange); }
    .badge-none { background: var(--separator); color: var(--text-muted); }

    /* Schedule */
    .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; text-align: center; }
    .day-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px;}
    .cal-day { background: var(--separator); border-radius: 10px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; cursor: pointer; transition: 0.2s; color: var(--text-main);}
    .cal-day:hover { transform: scale(1.05); background: var(--card-border); }
    .cal-day.active { background: var(--text-main) !important; color: var(--bg-main) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
    body.dark .cal-day.active { background: white !important; color: black !important; }
    
    .full-sch-table th, .full-sch-table td { padding: 12px 8px; border-bottom: 1px solid var(--separator); white-space: nowrap; background: var(--card-bg); color: var(--text-main); font-size: 13px;}
    .full-sch-table th { position: sticky; top: 0; z-index: 3; color: var(--text-muted); font-size: 11px; text-transform: uppercase; font-weight: 600;}
    .full-sch-table th.sticky-col, .full-sch-table td.sticky-col { position: sticky; left: 0; z-index: 4; text-align: left; padding: 12px 16px; font-weight: 600; border-right: 1px solid var(--separator);}

    /* Master Gift */
    .promo-widget { border: 1px solid var(--accent-green); border-radius: 12px; padding: 20px; margin-bottom: 16px; background: rgba(16, 185, 129, 0.02); }
    .promo-w-title { font-size: 16px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; }
    .promo-w-mech { font-size: 13px; color: var(--text-main); font-weight: 500; margin-bottom: 16px; line-height: 1.5;}
    
    /* Modals */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: 0.25s; backdrop-filter: blur(4px); }
    .modal-overlay.active { opacity: 1; pointer-events: auto; }
    .modal-box { width: 400px; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 20px 40px rgba(0,0,0,0.2); transform: scale(0.95); transition: 0.3s; position: relative; overflow: hidden; display: flex; flex-direction: column;}
    .modal-box.large { width: 90vw; max-width: 1000px; max-height: 90vh; }
    .modal-overlay.active .modal-box { transform: scale(1); }
    .btn-close-modal { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border-radius: 8px; background: var(--separator); border: none; cursor: pointer; color: var(--text-main); display: flex; align-items: center; justify-content: center; transition: 0.2s; z-index: 100;}
    .btn-close-modal:hover { background: var(--card-border); }
    
    /* Dropdowns */
    .mg-dropdown { display: none; position: absolute; z-index: 100; border-radius: 10px; padding: 6px; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid var(--card-border); background: var(--card-bg); }
    .mg-drop-item { padding: 10px 14px; border-radius: 6px; cursor: pointer; transition: 0.2s; color: var(--text-main); font-size: 13px; font-weight: 500;}
    .mg-drop-item:hover { background: var(--separator); }

    /* =========================================
       5. TROLLEY RECAP ANALYTICS 
       ========================================= */
    .recap-dash-container { display: flex; height: 100%; width: 100%; text-align: left; }
    .recap-dash-left { flex: 0 0 300px; border-right: 1px solid var(--separator); padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 24px; position: relative; background: var(--bg-main); overflow-y: auto; }
    
    .recap-dash-right.adaptive-columns { flex: 1; padding: 32px; display: flex; flex-direction: row; gap: 24px; overflow-y: auto; overflow-x: hidden; align-items: flex-start; background: var(--card-bg);}
    .trolley-col { display: flex; flex-direction: column; flex: 1; gap: 24px; height: auto; }
    
    .data-box { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; height: auto; box-shadow: var(--shadow-soft);}
    .data-box-title { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 16px; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
    
    .data-box-content { 
        font-family: monospace; 
        font-size: 12px; 
        font-weight: 500; 
        color: var(--text-muted); 
        line-height: 1.8; 
        white-space: pre-wrap !important; 
        word-wrap: break-word !important; 
        word-break: break-word !important;
        width: 100%;
        height: auto;
        overflow: visible; 
    }
    
    .theme-checked-red { border-top: 3px solid var(--accent-red); }
    .theme-checked-blue { border-top: 3px solid var(--accent-blue); }
    .theme-missing-red { border: 1px solid rgba(239,68,68,0.3); background: rgba(239,68,68,0.02); }
    .theme-missing-blue { border: 1px solid rgba(37,99,235,0.3); background: rgba(37,99,235,0.02); }
    .theme-missing-red .data-box-content, .theme-missing-blue .data-box-content { color: var(--text-main); font-weight: 600; }

    .ring-chart { width: 180px; height: 180px; position: relative; }
    .ring-svg { transform: rotate(-90deg); width: 100%; height: 100%; }
    .ring-bg { fill: none; stroke: var(--separator); stroke-width: 3; }
    .ring-fill { fill: none; stroke: var(--accent-green); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 1.5s ease-out; }
    .ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .ring-val { font-size: 42px; font-weight: 700; color: var(--text-main); letter-spacing: -1.5px; }
    .ring-lbl { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 1px; }