:root {
            --hero-red: #ED1C24;
            --hero-red-dark: #C5141B;
            --hero-black: #1B1B1B;
            --hero-bg-light: #F7F7F7;
            --border-color: #E5E5E5;
            --text-gray: #666666;
            --sheet-yellow: #FFF176;
            --sheet-yellow-dark: #FBC02D;
            --sheet-yellow-bg: #FFFDE7;
            --success-green: #2E7D32;
            --success-green-bg: #C8E6C9;
            --danger-red: #C62828;
            --sale-badge: #FF8F00;
            --booked-orange: #E65100;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: #ffffff; color: var(--hero-black); font-family: 'Poppins', sans-serif; overflow-x: hidden; line-height: 1.6; }

        /* Top Announcement & Header */
        .top-bar { background: var(--hero-black); color: #fff; font-size: 0.72rem; padding: 9px 4%; display: flex; justify-content: space-between; align-items: center; font-family: 'Barlow', sans-serif; letter-spacing: 0.5px; flex-wrap: wrap; gap: 8px; }
        .top-bar span { color: var(--hero-red); font-weight: 700; }
        .top-bar a { color: #fff; text-decoration: none; margin-left: 10px; }
        .top-bar a:hover { color: var(--hero-red); }

        /* Festive / Sale Announcement Banner */
        .sale-ticker { background: linear-gradient(90deg, #FF6F00, #FF8F00, #E65100); color: white; text-align: center; padding: 8px 15px; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; display: flex; justify-content: center; align-items: center; gap: 10px; }
        .sale-ticker i { animation: pulse 1.5s infinite; }
        @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }

        nav { position: sticky; top: 0; width: 100%; z-index: 1000; padding: 12px 5%; display: flex; justify-content: space-between; align-items: center; background: #ffffff; border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 20px rgba(0,0,0,0.04); flex-wrap: wrap; }
        .brand-logo { font-family: 'Barlow', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--hero-black); text-transform: uppercase; letter-spacing: -0.5px; text-decoration: none; display: flex; align-items: center; gap: 8px; }
        .brand-logo span { color: var(--hero-red); }

        .nav-links { display: flex; gap: 18px; list-style: none; align-items: center; flex-wrap: wrap; }
        .nav-links a { text-decoration: none; color: var(--hero-black); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; font-family: 'Barlow', sans-serif; transition: 0.25s; }
        .nav-links a:hover { color: var(--hero-red); }

        .mobile-menu-btn { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--hero-black); }
        .mobile-drawer { display: none; background: #fff; border-bottom: 1px solid var(--border-color); padding: 15px 5%; width: 100%; flex-direction: column; gap: 12px; }
        .mobile-drawer a, .mobile-drawer button { text-align: left; width: 100%; }

        /* Hero Banner */
        .hero-banner { min-height: 75vh; background: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.45) 55%, transparent 100%), url('https://images.unsplash.com/photo-1558981403-c5f91cbcf523?w=1600&auto=format&fit=crop&q=80') center/cover no-repeat; display: flex; align-items: center; padding: 40px 6%; color: white; position: relative; }
        .banner-inner { max-width: 680px; }
        .badge-official { background: var(--hero-red); color: white; padding: 5px 12px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-family: 'Barlow'; display: inline-block; margin-bottom: 18px; border-radius: 2px; }
        .banner-inner h1 { font-family: 'Barlow', sans-serif; font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 800; line-height: 1.05; margin-bottom: 16px; text-transform: uppercase; }
        .banner-inner p { font-size: 1rem; margin-bottom: 25px; opacity: 0.9; font-weight: 300; }

        /* Reusable Buttons */
        .btn-official { background: var(--hero-red); color: white; border: none; padding: 11px 22px; font-family: 'Barlow', sans-serif; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: 0.25s; font-size: 0.82rem; letter-spacing: 1px; border-radius: 2px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
        .btn-official:hover { background: var(--hero-red-dark); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(237,28,36,0.35); }
        .btn-dark { background: var(--hero-black); color: white; }
        .btn-dark:hover { background: var(--hero-red); }
        .btn-sm { padding: 6px 12px; font-size: 0.75rem; }
        .btn-xs { padding: 4px 8px; font-size: 0.72rem; }
        .btn-sale { background: var(--sale-badge); color: white; }
        .btn-sale:hover { background: #E65100; }
        .btn-success { background: var(--success-green); color: white; }
        .btn-success:hover { background: #1b5e20; }
        .btn-danger { background: var(--danger-red); color: white; }
        .btn-danger:hover { background: #8e0000; }
        .btn-invoice { background: #0277bd; color: white; }
        .btn-invoice:hover { background: #01579b; }

        /* Public Sections */
        .section-container { padding: 60px 5%; }
        .section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; }
        .section-title { font-family: 'Barlow', sans-serif; font-size: clamp(1.8rem, 4vw, 2.2rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.5px; position: relative; }
        .section-title::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 55px; height: 4px; background: var(--hero-red); }

        /* Public Showcase Grid */
        .grid-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
        .hero-card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 6px; transition: 0.3s; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
        .hero-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0,0,0,0.08); border-color: var(--hero-red); }
        
        .card-sale-badge { position: absolute; top: 12px; right: -32px; background: var(--sale-badge); color: white; font-family: 'Barlow'; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; padding: 4px 35px; transform: rotate(45deg); box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 10; letter-spacing: 1px; }
        
        .card-image-box { width: 100%; height: 200px; background: #f1f3f5; display: flex; align-items: center; justify-content: center; padding: 15px; position: relative; cursor: pointer; }
        .card-image-box img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s; }
        .card-image-box:hover img { transform: scale(1.05); }
        .card-content { padding: 18px; background: #fff; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .card-series-tag { font-size: 0.7rem; font-weight: 800; color: #b78103; background: #fff9c4; padding: 2px 8px; border-radius: 3px; display: inline-block; margin-bottom: 6px; font-family: 'Barlow'; }
        .card-title { font-family: 'Barlow', sans-serif; font-size: 1.15rem; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; color: var(--hero-black); cursor: pointer; }
        .card-title:hover { color: var(--hero-red); }
        
        .price-display { font-family: 'Barlow', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--hero-black); margin: 4px 0; }
        .original-price { font-size: 0.9rem; color: #999; text-decoration: line-through; font-family: 'Barlow'; margin-right: 8px; }
        .price-tag-label { font-size: 0.7rem; color: var(--text-gray); text-transform: uppercase; letter-spacing: 0.5px; display: block; font-family: 'Barlow'; }
        .sale-promo-text { font-size: 0.75rem; color: #E65100; font-weight: 700; font-family: 'Barlow'; margin-top: 4px; }
        .card-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }

        /* Vehicle Inspector Box */
        .viewer-3d-box { width: 100%; height: 320px; background: radial-gradient(circle, #f9f9f9 0%, #eceff1 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; margin-bottom: 15px; border: 1px dashed var(--border-color); perspective: 800px; cursor: grab; user-select: none; }
        .viewer-3d-box:active { cursor: grabbing; }
        .viewer-3d-img { max-width: 85%; max-height: 85%; object-fit: contain; transition: transform 0.1s ease-out; filter: drop-shadow(0 15px 20px rgba(0,0,0,0.18)); pointer-events: none; }
        .viewer-controls { display: flex; justify-content: center; gap: 8px; margin-bottom: 15px; flex-wrap: wrap; }

        /* EMI Calculator Section */
        .emi-section { background: var(--hero-bg-light); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
        .emi-container { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; align-items: center; }
        .emi-box { background: #fff; padding: 25px; border-radius: 6px; border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
        .slider-group { margin-bottom: 18px; }
        .slider-label { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; font-family: 'Barlow'; }
        .slider-label span { color: var(--hero-red); font-weight: 800; }
        input[type="range"] { width: 100%; accent-color: var(--hero-red); cursor: pointer; }
        .emi-result-card { background: var(--hero-black); color: white; padding: 28px; border-radius: 6px; text-align: center; border-left: 6px solid var(--hero-red); }
        .emi-result-card h3 { font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; color: #ccc; margin-bottom: 6px; }
        .emi-value { font-family: 'Barlow'; font-size: clamp(2.5rem, 5vw, 3.2rem); font-weight: 800; color: var(--hero-red); line-height: 1; margin-bottom: 12px; }

        /* Modals */
        .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.82); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 3000; padding: 15px; }
        .modal-card { background: #ffffff; border-top: 6px solid var(--hero-red); padding: 25px; width: 100%; max-width: 540px; border-radius: 6px; box-shadow: 0 25px 50px rgba(0,0,0,0.3); position: relative; max-height: 90vh; overflow-y: auto; }
        .modal-close { position: absolute; right: 18px; top: 12px; font-size: 1.4rem; cursor: pointer; color: #888; }
        .modal-close:hover { color: #000; }
        .calc-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.88rem; color: var(--text-gray); }

        input, select, textarea { background: #ffffff; border: 1px solid var(--border-color); padding: 10px 12px; color: var(--hero-black); border-radius: 4px; width: 100%; margin-bottom: 12px; font-family: 'Poppins', sans-serif; font-size: 0.88rem; }
        input:focus, select:focus, textarea:focus { border-color: var(--hero-red); outline: none; box-shadow: 0 0 0 3px rgba(237,28,36,0.1); }

        /* Enterprise DMS Portal */
        #dmsPortal { position: fixed; inset: 0; background: #f4f5f7; z-index: 2000; display: none; grid-template-columns: 260px 1fr; height: 100vh; overflow: hidden; }
        .dms-sidebar { background: var(--hero-black); color: white; padding: 25px 15px; height: 100vh; overflow-y: auto; flex-shrink: 0; }
        .dms-sidebar h2 { font-family: 'Barlow'; font-size: 1.2rem; letter-spacing: 0.5px; }
        .dms-link { padding: 10px 14px; color: #aaa; display: flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 4px; margin-bottom: 5px; cursor: pointer; font-weight: 600; font-family: 'Barlow'; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.82rem; transition: 0.2s; }
        .dms-link.active, .dms-link:hover { background: #333; color: white; }
        .dms-link.active { border-left: 3px solid var(--hero-red); }

        .dms-content { padding: 25px; height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; flex-grow: 1; }
        .dms-section { display: none; padding-bottom: 60px; }
        .dms-section.active { display: block; }

        /* Official Yellow Sheet Table */
        .sheet-container { overflow-x: auto; margin-top: 15px; border: 1px solid #d4b106; border-radius: 4px; background: white; -webkit-overflow-scrolling: touch; }
        .sheet-table { width: 100%; border-collapse: collapse; font-family: 'Barlow', sans-serif; font-size: 0.85rem; min-width: 750px; }
        .sheet-table th { background: var(--sheet-yellow); color: #000; padding: 8px; border: 1px solid #ccc; text-align: center; font-weight: 800; font-size: 0.75rem; text-transform: uppercase; }
        .sheet-table td { border: 1px solid #ddd; padding: 6px 8px; text-align: right; }
        .sheet-table td.col-series { background: var(--sheet-yellow-bg); font-weight: 800; text-align: center; }
        .sheet-table td.col-model { text-align: left; font-weight: 700; }
        .sheet-table td.col-yellow { background: var(--sheet-yellow-bg); font-weight: 800; }
        .sheet-table tr:hover { background: #fff8e1; }

        /* Filters & Analytics */
        .filter-bar { background: #fff; padding: 14px 16px; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
        .filter-group { flex: 1; min-width: 150px; }
        .filter-group label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--text-gray); margin-bottom: 3px; font-family: 'Barlow'; }
        .filter-group select, .filter-group input { margin-bottom: 0; }

        .analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; }
        .analytic-card { background: white; padding: 18px; border-radius: 6px; border-left: 4px solid var(--hero-red); box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
        .analytic-card span { font-size: 0.7rem; color: var(--text-gray); text-transform: uppercase; font-weight: 700; }
        .analytic-card h3 { font-family: 'Barlow'; font-size: 1.6rem; font-weight: 800; margin-top: 4px; }

        .drop-zone { border: 2px dashed var(--hero-red); padding: 18px; text-align: center; border-radius: 8px; margin-bottom: 15px; background: #fff; cursor: pointer; }
        .dms-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .dms-table { width: 100%; border-collapse: collapse; margin-top: 10px; background: white; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border-radius: 6px; overflow: hidden; min-width: 2450px; }
        .dms-table th { text-align: left; padding: 10px 8px; background: #37474F; color: white; font-family: 'Barlow'; font-size: 0.75rem; text-transform: uppercase; border: 1px solid #455A64; vertical-align: top; }
        .dms-table td { padding: 6px 8px; border: 1px solid var(--border-color); font-size: 0.8rem; vertical-align: middle; }
        .dms-input { background: #fdfdfd; border: 1px solid #ccc; padding: 4px 6px; border-radius: 4px; width: 100%; font-size: 0.78rem; }
        .col-filter-input { background: #ECEFF1; border: 1px solid #B0BEC5; padding: 4px 6px; font-size: 0.72rem; border-radius: 3px; width: 100%; margin-top: 4px; color: #333; }
        .col-filter-input:focus { background: #fff; border-color: var(--hero-red); outline: none; }

        
        /* Document Switcher & Print Layouts */
        .doc-switcher-btn {
            background: #fff;
            border: 1px solid #ccc;
            padding: 8px 14px;
            font-family: 'Barlow', sans-serif;
            font-weight: 700;
            font-size: 0.8rem;
            text-transform: uppercase;
            border-radius: 4px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
            color: #333;
        }
        .doc-switcher-btn:hover { background: #fdfdfd; border-color: var(--hero-red); color: var(--hero-red); }
        .doc-switcher-btn.active { background: var(--hero-black); color: #fff; border-color: var(--hero-black); }

        /* Document 1: Authorized Delivery Challan (Yellow Sheet Layout) */
        
        .challan-yellow-pad {
            background-color: #ffffff !important;
            border: 2px solid #222;
            padding: 16px 20px;
            color: #111;
            font-family: 'Barlow', sans-serif;
            position: relative;
            box-shadow: 0 4px 15px rgba(0,0,0,0.06);
            line-height: 1.35;
        }
        .dc-dotted-input {
            border: none;
            border-bottom: 1px dotted #222;
            background: transparent;
            font-family: 'Barlow', sans-serif;
            font-size: 0.82rem;
            font-weight: 700;
            padding: 1px 4px;
            color: #000;
            margin: 0 4px;
            outline: none;
        }
        .dc-dotted-input:focus {
            background: #fff;
            border-bottom: 1.5px solid #000;
        }
        .dc-stamp-red {
            color: #C62828;
            font-family: 'Barlow', sans-serif;
            font-weight: 900;
            font-size: 1.25rem;
            letter-spacing: 0.5px;
            display: inline-block;
            margin-left: 6px;
        }
        .dc-table-grid {
            width: 100%;
            border-collapse: collapse;
            margin: 8px 0;
            border: 1.5px solid #222;
        }
        .dc-table-grid th, .dc-table-grid td {
            border: 1px solid #222;
            padding: 4px 6px;
            font-size: 0.78rem;
        }
        .dc-table-grid th {
            background: rgba(0,0,0,0.04);
            font-weight: 800;
            text-align: center;
            text-transform: uppercase;
        }
        .dc-hindi-note {
            border: 1.5px solid #222;
            padding: 5px 8px;
            font-size: 0.76rem;
            font-weight: 700;
            color: #000;
            margin: 8px 0;
            background: rgba(255, 255, 255, 0.4);
            line-height: 1.3;
        }

        /* Document 2: Dealership Money Receipt (Red Ink Slip Layout) */
        
        .receipt-red-pad {
            background: #ffffff !important;
            border: 2px solid #C5141B;
            padding: 22px 28px;
            color: #8e0000;
            font-family: 'Merriweather', 'Georgia', serif;
            position: relative;
            box-shadow: 0 4px 15px rgba(0,0,0,0.06);
            line-height: 1.65;
        }
        
        .rcpt-line-input {
            border: none;
            border-bottom: 1px solid #C5141B;
            background: transparent;
            font-family: 'Merriweather', serif;
            font-size: 0.88rem;
            font-weight: 700;
            color: #111;
            padding: 2px 5px;
            margin: 0 4px;
            outline: none;
        }
        .rcpt-line-input:focus {
            background: #ffebee;
            border-bottom: 1.5px solid #8e0000;
        }
        .rcpt-rupee-box {
            border: 2px solid #C5141B;
            border-radius: 6px;
            padding: 8px 16px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #fff;
        }

        /* Document 3: GST Retail Tax Invoice */
        .invoice-tax-pad {
            background: #ffffff;
            border: 2px solid #333;
            padding: 20px 24px;
            color: #000;
            font-family: 'Barlow', sans-serif;
            box-shadow: 0 4px 15px rgba(0,0,0,0.06);
        }

        /* Toast Notifications */
        .app-toast {
            background: #1B1B1B;
            color: #fff;
            padding: 12px 18px;
            border-radius: 6px;
            font-family: 'Barlow', sans-serif;
            font-size: 0.84rem;
            font-weight: 600;
            box-shadow: 0 8px 25px rgba(0,0,0,0.25);
            display: flex;
            align-items: center;
            gap: 10px;
            border-left: 5px solid var(--hero-red);
            animation: slideInRight 0.3s ease-out;
            pointer-events: auto;
            max-width: 380px;
        }
        .app-toast.success { border-left-color: var(--success-green); }
        .app-toast.warning { border-left-color: var(--sale-badge); }
        .app-toast.danger { border-left-color: var(--danger-red); }
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @media print {
            body * { visibility: hidden; }
            #printableDocument, #printableDocument * { visibility: visible; }
            #printableDocument { position: absolute; left: 0; top: 0; width: 100%; padding: 0; margin: 0; border: none; }
            
        .challan-yellow-pad {
            background-color: #ffffff !important;
            border: 2px solid #222;
            padding: 16px 20px;
            color: #111;
            font-family: 'Barlow', sans-serif;
            position: relative;
            box-shadow: 0 4px 15px rgba(0,0,0,0.06);
            line-height: 1.35;
        }
            
        .receipt-red-pad {
            background: #ffffff !important;
            border: 2px solid #C5141B;
            padding: 22px 28px;
            color: #8e0000;
            font-family: 'Merriweather', 'Georgia', serif;
            position: relative;
            box-shadow: 0 4px 15px rgba(0,0,0,0.06);
            line-height: 1.65;
        }
            .invoice-tax-pad { -webkit-print-color-adjust: exact; print-color-adjust: exact; border: 1.5px solid #000 !important; }
            .dc-dotted-input, .rcpt-line-input, .doc-input-inline { border: none !important; border-bottom: none !important; background: transparent !important; }
            .no-print { display: none !important; }
        }

        
        /* Digital Signature Pad Modal */
        #sigPadModal .modal-card { max-width: 480px; text-align: center; }
        .sig-canvas { border: 2px dashed #999; border-radius: 6px; background: #fafafa; cursor: crosshair; touch-action: none; width: 100%; height: 180px; }
        
        /* Thermal Slip Mode (80mm / 3 inch POS Printer) */
        .thermal-slip-pad {
            width: 80mm;
            max-width: 100%;
            margin: 0 auto;
            background: #fff;
            color: #000;
            padding: 10px 8px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 11px;
            line-height: 1.35;
            border: 1px dashed #aaa;
            box-shadow: 0 4px 15px rgba(0,0,0,0.06);
        }
        .thermal-divider { border-top: 1px dashed #000; margin: 6px 0; }
        .thermal-row { display: flex; justify-content: space-between; }
        .thermal-center { text-align: center; }
        .thermal-bold { font-weight: bold; }

        @media print {
            .thermal-slip-pad { border: none !important; box-shadow: none !important; width: 78mm !important; padding: 0 !important; margin: 0 auto !important; }
        }

        /* Print Modal & Clean Printable Output */
        #printModal .modal-card { max-width: 820px; width: 100%; }
        .doc-sheet { border: 2px solid #222; padding: 25px; background: #fff; color: #000; font-family: 'Barlow', sans-serif; }
        .doc-header { display: flex; justify-content: space-between; border-bottom: 2px solid #000; padding-bottom: 12px; margin-bottom: 15px; }
        .doc-title-badge { font-size: 1.4rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--hero-red); }
        .doc-table { width: 100%; border-collapse: collapse; margin: 15px 0; }
        .doc-table th, .doc-table td { border: 1px solid #333; padding: 6px 10px; font-size: 0.82rem; }
        .doc-table th { background: #f2f2f2; text-transform: uppercase; }
        .doc-input-inline { border: 1px dashed #aaa; padding: 2px 6px; border-radius: 3px; width: auto; font-family: inherit; font-size: 0.82rem; margin: 0; background: #fffde7; }

        @media print {
            body * { visibility: hidden; }
            #printableDocument, #printableDocument * { visibility: visible; }
            #printableDocument { position: absolute; left: 0; top: 0; width: 100%; padding: 0; margin: 0; border: none; }
            .no-print { display: none !important; }
            .doc-input-inline { border: none !important; background: transparent !important; }
        }

        /* Responsive Media Query for Smartphones */
        @media (max-width: 900px) {
            .nav-links { display: none; }
            .mobile-menu-btn { display: block; }
            .hero-banner { min-height: 55vh; padding: 30px 5%; }
            .emi-container { grid-template-columns: 1fr; gap: 20px; }
            #dmsPortal { grid-template-columns: 1fr; height: 100vh; }
            .dms-sidebar { display: none; width: 100%; height: auto; max-height: 250px; position: absolute; z-index: 100; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
            .dms-sidebar.mobile-open { display: block; }
            .dms-content { padding: 15px; height: 100vh; }
            .mobile-portal-header { display: flex !important; justify-content: space-between; align-items: center; margin-bottom: 15px; background: #fff; padding: 10px 15px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
        }

        .mobile-portal-header { display: none; }
    
        /* --- EXCEL-STYLE INDIVIDUAL COLUMN FILTER SYSTEM --- */
        .excel-th-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 4px;
            white-space: nowrap;
        }
        .excel-filter-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 19px;
            height: 19px;
            border-radius: 3px;
            border: 1px solid rgba(255,255,255,0.4);
            background: rgba(255,255,255,0.14);
            color: #fff;
            cursor: pointer;
            font-size: 10px;
            transition: all 0.15s ease-in-out;
            padding: 0;
            flex-shrink: 0;
            margin-left: 4px;
        }
        .excel-filter-btn:hover {
            background: rgba(255,255,255,0.35);
            border-color: #fff;
            color: #fff;
        }
        .excel-filter-btn.is-filtered {
            background: #FFD54F !important;
            color: #000 !important;
            border-color: #FBC02D !important;
            box-shadow: 0 0 6px rgba(255,213,79,0.9);
            font-weight: 900;
        }
        .excel-filter-popup {
            position: fixed;
            z-index: 9999;
            background: #ffffff;
            color: #0f172a;
            border: 1px solid #94a3b8;
            border-radius: 6px;
            box-shadow: 0 12px 30px rgba(0,0,0,0.22);
            width: 250px;
            font-family: 'Barlow', sans-serif;
            font-size: 12px;
            padding: 0;
            user-select: none;
        }
        .excel-popup-header {
            background: #1e293b;
            color: #fff;
            padding: 7px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .excel-popup-close-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            line-height: 1;
        }
        .excel-sort-group {
            padding: 6px;
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .excel-sort-opt {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            text-align: left;
            background: transparent;
            border: none;
            padding: 5px 8px;
            border-radius: 3px;
            cursor: pointer;
            font-family: 'Barlow', sans-serif;
            font-size: 0.78rem;
            font-weight: 600;
            color: #334155;
            transition: 0.15s;
        }
        .excel-sort-opt:hover {
            background: #f1f5f9;
            color: #0f172a;
        }
        .excel-checkbox-list {
            max-height: 160px;
            overflow-y: auto;
            padding: 2px 8px 6px;
            border-top: 1px solid #f1f5f9;
            border-bottom: 1px solid #f1f5f9;
        }
        .excel-checkbox-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 3px 2px;
            cursor: pointer;
            font-size: 0.78rem;
            color: #1e293b;
        }
        .excel-checkbox-item:hover {
            background: #f8fafc;
        }
        .excel-checkbox-item input {
            margin: 0;
            width: 13px;
            height: 13px;
            cursor: pointer;
        }
        /* Keep checkbox controls compact inside the floating Excel-style filter popup. */
        #excelFilterPopup input[type="checkbox"] {
            width: 13px;
            height: 13px;
            min-width: 13px;
            margin: 0;
            padding: 0;
            flex: 0 0 13px;
            accent-color: var(--hero-red);
            cursor: pointer;
        }
        #excelFilterPopup input[type="text"] {
            box-shadow: none;
        }
        #excelFilterPopup {
            max-height: min(420px, calc(100vh - 20px));
            overflow: hidden;
        }
        #excelPopupCheckboxList {
            max-height: min(160px, calc(100vh - 240px));
        }

        .excel-popup-footer {
            display: flex;
            gap: 6px;
            padding: 8px;
            background: #f8fafc;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

    


/* DMS Sales / Service workspace selector */
.dms-module-switcher { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 18px; }
.dms-module-btn { border:1px solid #59636a; border-radius:7px; background:#292f33; color:#d5dce0; min-height:62px; padding:10px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font:800 0.86rem 'Barlow',sans-serif; text-transform:uppercase; letter-spacing:.5px; cursor:pointer; transition:background .18s,border-color .18s,transform .18s; }
.dms-module-btn i { font-size:1.1rem; }
.dms-module-btn:hover { background:#39434a; border-color:#9aa8b2; transform:translateY(-1px); }
.dms-module-btn.active { background:var(--hero-red); color:#fff; border-color:var(--hero-red); box-shadow:0 4px 12px rgba(237,28,36,.22); }
.dms-nav-heading { margin:12px 8px 8px; padding-top:13px; border-top:1px solid #3e454a; color:#9eabb3; font:800 .67rem 'Barlow',sans-serif; letter-spacing:1.3px; }
.dms-nav-group { display:block; }
.dms-logout-link { margin-top:24px; color:#ff8a8a !important; }
.dms-logout-link:hover { color:#fff !important; background:#492c2c !important; }

/* Service management workspace */
.service-page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-bottom:20px; }
.service-page-header h1 { font:800 clamp(1.55rem,3vw,2.1rem) 'Barlow',sans-serif; margin:4px 0 5px; }
.service-page-header p { color:var(--text-gray); font-size:.86rem; max-width:700px; }
.service-eyebrow { display:inline-flex; align-items:center; gap:7px; color:var(--hero-red); font:800 .72rem 'Barlow',sans-serif; letter-spacing:1.2px; text-transform:uppercase; }
.service-metrics-grid { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.service-metric { border-left-color:#176b87; }
.service-panel { background:#fff; border:1px solid var(--border-color); border-radius:8px; box-shadow:0 4px 15px rgba(0,0,0,.035); padding:20px; margin-bottom:20px; }
.service-panel h2 { font:800 1.12rem 'Barlow',sans-serif; margin-bottom:4px; }
.service-panel h2 i { color:var(--hero-red); margin-right:7px; }
.service-panel-subtitle { font-size:.78rem; color:var(--text-gray); margin-bottom:16px; }
.service-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px 14px; }
.service-form-grid label { display:block; margin:0 0 4px; font:700 .72rem 'Barlow',sans-serif; text-transform:uppercase; color:#4b5563; }
.service-form-grid input,.service-form-grid select,.service-form-grid textarea { margin:0; min-width:0; }
.service-form-grid textarea { resize:vertical; }
.service-form-wide { grid-column:1/-1; }
.service-form-actions { display:flex; gap:8px; margin-top:15px; flex-wrap:wrap; }
.service-register-heading { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.service-filter-bar { box-shadow:none; border:1px solid #edf0f2; padding:12px; }
.service-table { min-width:1900px !important; }
.service-table td { vertical-align:top; }
.service-table .service-description { max-width:280px; white-space:normal; min-width:210px; }
.service-table .service-status-select { min-width:145px; margin:0; font-size:.75rem; }
.service-table .service-pay-select { min-width:140px; margin:0; font-size:.75rem; }
.service-table .service-action-cell { display:flex; gap:5px; }
.service-table-actions { display:flex; gap:5px; align-items:flex-start; }
.service-status-pill { display:inline-block; padding:3px 7px; border-radius:20px; background:#e8eef2; color:#334155; font-size:.68rem; font-weight:800; white-space:nowrap; }
@media (max-width:900px) { .dms-module-switcher { margin-bottom:10px; } .service-panel { padding:14px; } .service-form-wide { grid-column:1; } .service-page-header { margin-bottom:15px; } }


/* Service inventory, automatic parts consumption, purchasing and ledger */
.service-subnav { display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 14px; padding:8px; border:1px solid #e3e8ec; background:#fff; border-radius:8px; }
.service-subnav-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #d7dde3; border-radius:5px; background:#f8fafc; color:#334155; padding:10px 13px; font:700 .78rem 'Barlow',sans-serif; cursor:pointer; transition:all .18s; }
.service-subnav-btn:hover { border-color:var(--hero-red); color:var(--hero-red); }
.service-subnav-btn.active { background:var(--hero-black); color:#fff; border-color:var(--hero-black); box-shadow:inset 0 -3px 0 var(--hero-red); }
.service-subpanel { display:none; }
.service-subpanel.active { display:block; }
.service-notice { border:1px solid #b8d9e8; border-left:4px solid #176b87; border-radius:5px; background:#f0f9ff; padding:10px 13px; color:#24536b; font-size:.78rem; margin:0 0 18px; }
.service-notice i { margin-right:6px; }
.service-metric-warning { border-left-color:#f59e0b; }
.service-metric-danger { border-left-color:#c62828; }
.service-number { text-align:right !important; white-space:nowrap; font-variant-numeric:tabular-nums; }
.service-muted { color:#64748b; font-size:.72rem; }
.service-empty-cell { text-align:center !important; padding:24px !important; color:#64748b; white-space:normal !important; }
.service-stock-badge { display:inline-block; border-radius:20px; padding:3px 8px; background:#e2e8f0; color:#334155; font-size:.64rem; font-weight:800; white-space:nowrap; }
.service-stock-badge.healthy { background:#dcfce7; color:#166534; }
.service-stock-badge.low { background:#ffedd5; color:#9a3412; }
.service-stock-badge.out { background:#fee2e2; color:#991b1b; }
.service-inline-help { background:#f8fafc; color:#475569; border:1px solid #e2e8f0; border-radius:5px; padding:9px 12px; margin-top:12px; font-size:.78rem; }
.service-inventory-table { min-width:1900px !important; }
@media(max-width:900px) { .service-subnav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .service-subnav-btn { font-size:.72rem; padding:10px 7px; } }
@media(max-width:520px) { .service-subnav { grid-template-columns:1fr; } }

/* Extended Service DMS modules */
.service-dashboard-extra { margin-top: 14px; }
.service-quick-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.service-quick-actions .btn-official { white-space:normal; }
#servicePanel-dashboard .service-table { min-width:1100px !important; }
#servicePanel-team .service-table, #servicePanel-transfers .service-table, #servicePanel-reports .service-table { min-width:1050px !important; }
#servicePanel-suppliers .service-table, #servicePanel-billing .service-table { min-width:1300px !important; }
#servicePanel-reports .service-register-heading { margin:20px 0 10px; }
#servicePanel-dashboard .service-metric h3 { overflow-wrap:anywhere; }
.service-stock-badge { vertical-align:middle; }
@media(max-width:900px) {
  .service-quick-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-quick-actions .btn-official { width:100%; }
}
@media(max-width:520px) {
  .service-quick-actions { grid-template-columns:1fr; }
}


/* Service workflow map: links every service workspace module to the stock-ledger lifecycle. */
.service-map-hero { border-top:4px solid var(--hero-red); }
.service-map-hero .service-register-heading { align-items:flex-start; }
.service-map-hero .service-register-heading h2 { margin-top:5px; }
.service-map-section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin:22px 0 12px; }
.service-flow-steps { display:grid; grid-template-columns:repeat(6,minmax(150px,1fr)); gap:8px; overflow-x:auto; padding:8px 0 4px; }
.service-flow-step { min-width:150px; display:flex; flex-direction:column; gap:7px; padding:12px; border:1px solid var(--border-color); border-radius:8px; background:#fafafa; }
.service-flow-step > span { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--hero-red); color:#fff; font-size:.75rem; font-weight:900; }
.service-flow-step strong { font-family:'Barlow',sans-serif; font-size:.88rem; line-height:1.2; }
.service-flow-step small { color:var(--text-gray); font-size:.72rem; min-height:34px; }
.service-flow-step button { border:1px solid #d4dbe1; background:#fff; border-radius:4px; padding:7px 8px; color:var(--hero-black); font-size:.72rem; font-weight:800; cursor:pointer; margin-top:auto; }
.service-flow-step button:hover { border-color:var(--hero-red); color:var(--hero-red); }
.service-flow-arrow { display:none; align-items:center; justify-content:center; color:var(--hero-red); }
.service-map-note { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid #f4d7aa; border-left:4px solid #f59e0b; background:#fffbeb; color:#713f12; padding:12px; border-radius:6px; margin-top:15px; font-size:.8rem; }
.service-map-note > i { font-size:1.2rem; }
.service-map-note > div { flex:1; min-width:220px; }
.service-map-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.service-map-card { display:flex; flex-direction:column; gap:10px; min-width:0; border:1px solid var(--border-color); border-radius:8px; background:#fff; padding:15px; box-shadow:0 2px 8px rgba(0,0,0,.025); }
.service-map-card-top { display:flex; align-items:center; justify-content:space-between; color:var(--hero-red); font-size:1.2rem; }
.service-map-number { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:6px; color:#334155; background:#eef2f6; font-family:'Barlow',sans-serif; font-size:.74rem; font-weight:900; }
.service-map-card h3 { font-family:'Barlow',sans-serif; font-size:1rem; font-weight:800; margin:0; }
.service-map-card p { color:var(--text-gray); font-size:.77rem; line-height:1.55; margin:0; }
.service-map-connection { border-top:1px solid #edf0f2; padding-top:9px; font-size:.72rem; color:#475569; line-height:1.5; margin-top:auto; }
.service-map-connection strong { color:#263238; }
.service-map-card .btn-official { margin-top:4px; align-self:flex-start; white-space:normal; }
.service-map-rules { margin-top:18px; }
.service-map-rules-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.service-map-rules-grid > div { padding:11px; border:1px solid #e6ebef; border-radius:6px; background:#fafbfc; }
.service-map-rules-grid strong { font-family:'Barlow',sans-serif; font-size:.82rem; }
.service-map-rules-grid p { font-size:.75rem; color:var(--text-gray); margin:5px 0 0; line-height:1.45; }
@media(max-width:1100px) { .service-map-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .service-flow-steps { grid-template-columns:repeat(6,minmax(145px,1fr)); } }
@media(max-width:700px) { .service-map-grid,.service-map-rules-grid { grid-template-columns:1fr; } .service-map-note .btn-official { width:100%; } .service-map-section-heading { align-items:flex-start; flex-direction:column; } .service-map-card .btn-official { align-self:stretch; } }


/* V9 — Service Parts Inventory rebuilt to mirror Sales Inventory & Stock UX. */
.service-inventory-toolbar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.service-parts-globalbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px solid #d8e0e6;border-radius:6px;padding:10px 12px;margin:12px 0}
.service-parts-global-search{display:flex;align-items:center;gap:9px;flex:1;min-width:280px;background:#f8fafc;border:1px solid #cbd5e1;border-radius:6px;padding:5px 9px}
.service-parts-global-search>i{color:var(--hero-red)}
.service-parts-global-search input{margin:0!important;border:0!important;box-shadow:none!important;background:transparent!important;width:100%;min-width:0;padding:6px 2px!important;font-size:.86rem}
.service-parts-global-search button{border:0;background:transparent;color:#64748b;cursor:pointer;padding:5px}
.service-parts-filter-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.service-parts-filter-chips{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.service-parts-filter-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #cbd5e1;border-radius:20px;padding:4px 8px;background:#f1f5f9;color:#334155;font:700 .68rem 'Barlow',sans-serif;cursor:pointer;max-width:260px}
.service-parts-filter-chip span{font-size:1rem;line-height:1}
.service-parts-secondary-filters{margin:0 0 12px!important}
.service-parts-row-count{align-self:flex-end;font:800 .78rem 'Barlow',sans-serif;color:#475569;white-space:nowrap;padding:10px 4px}
.service-parts-dropzone{background:#fff!important;padding:13px 16px!important;margin:0 0 12px!important}
.service-parts-dropzone>i{font-size:1.5rem;color:var(--hero-red);margin-bottom:2px}
.service-parts-dropzone p{font-weight:800;font-size:.84rem;color:#1b1b1b;margin-bottom:2px}
.service-parts-dropzone small{display:block;color:#64748b;font-size:.72rem;line-height:1.5}
.service-parts-dropzone input[type=file]{display:none}
.service-parts-dropzone.is-dragover{background:#fff1f2!important;border-color:#c5141b!important}
.service-parts-import-status{font-size:.75rem;font-weight:700;margin-top:5px;color:#334155}
.service-parts-safety-note{font-size:.75rem;line-height:1.5;color:#475569;background:#f8fafc;border:1px solid #dbe3e8;border-left:4px solid var(--hero-red);border-radius:5px;padding:9px 12px;margin-bottom:12px}
.service-parts-safety-note i{color:var(--hero-red);margin-right:5px}
.service-parts-table-wrap{border:1px solid #d6dde2;border-radius:4px}
.service-inventory-parity-table{min-width:2850px!important;border-collapse:collapse}
.service-inventory-parity-table th{position:relative;vertical-align:middle;white-space:nowrap;background:#37474f!important;color:#fff!important;border:1px solid #455a64!important;padding:9px 8px!important;font-size:.73rem!important}
.service-inventory-parity-table th:nth-child(5),.service-inventory-parity-table th:nth-child(6),.service-inventory-parity-table th:nth-child(7){background:#263238!important;border-bottom:2px solid #ffd54f!important}
.service-inventory-parity-table th:nth-child(5) span{color:#ffd54f}
.service-inventory-parity-table .excel-th-wrap{gap:5px}
.service-inventory-parity-table td{padding:5px 6px!important;vertical-align:middle!important;min-width:90px}
.service-inventory-parity-table td:nth-child(1),.service-inventory-parity-table th:nth-child(1){min-width:38px;width:38px;text-align:center}
.service-inventory-parity-table td:nth-child(2),.service-inventory-parity-table th:nth-child(2){min-width:45px;width:45px;text-align:center}
.service-inventory-parity-table .service-parts-select-col input{width:15px;height:15px;margin:0;accent-color:var(--hero-red)}
.service-inventory-edit-input{min-width:100px!important;width:100%!important;margin:0!important;padding:5px 6px!important;font-size:.75rem!important;font-family:'Barlow',sans-serif!important;border:1px solid #cbd5e1!important;border-radius:3px!important;background:#fff!important;color:#1f2937!important}
.service-inventory-edit-input:focus{outline:2px solid rgba(237,28,36,.22)!important;border-color:var(--hero-red)!important}
.service-inventory-num-input{min-width:82px!important;text-align:right;font-variant-numeric:tabular-nums}
.service-parts-date-cell{white-space:nowrap;font-size:.75rem;color:#475569}
.service-code-locked{display:block;font-size:.6rem;line-height:1.3}
.service-parts-location-preview{display:block;min-width:160px;max-width:250px;white-space:normal;overflow-wrap:anywhere;font-size:.72rem;color:#475569;line-height:1.4}
.service-inventory-parity-table .service-number{white-space:nowrap;min-width:100px}
.service-inventory-parity-table .excel-filter-btn{width:20px;height:20px}
.service-parts-filter-popup{width:265px;max-height:calc(100vh - 16px);overflow:visible}
.service-parts-filter-popup .excel-checkbox-list{max-height:180px;overflow:auto}
.service-inventory-parity-table tr:hover{background:#fff8e1}
@media(max-width:900px){.service-inventory-toolbar{justify-content:flex-start}.service-parts-global-search{min-width:100%;flex-basis:100%}.service-parts-filter-tools{width:100%;justify-content:space-between}.service-inventory-parity-table{min-width:2850px!important}}


/* Service workspace: simplified navigation and quick workflow */
.service-quick-guide{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:12px 15px;background:#fff8e8;border:1px solid #f3d79b;border-radius:10px;color:#344054;font-size:.82rem}
.service-quick-guide strong{color:#9a3412;margin-right:5px}
.service-quick-guide span{font-weight:600;background:#fff;border:1px solid #eadfca;border-radius:6px;padding:6px 9px}
.service-quick-guide>i{font-size:.68rem;color:#b7791f}
.service-subnav{gap:7px!important;margin-bottom:14px!important}
.service-subnav-btn{padding:9px 12px!important;font-size:.82rem!important;border-radius:8px!important;white-space:nowrap}
.service-panel-subtitle{line-height:1.45!important;margin-top:4px!important}
@media(max-width:700px){.service-quick-guide{gap:7px;padding:10px}.service-quick-guide strong{width:100%}.service-quick-guide>i{display:none}.service-quick-guide span{flex:1;text-align:center;font-size:.75rem}.service-subnav{display:flex;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:7px}.service-subnav-btn{flex:0 0 auto}}


/* Easy / automated service inventory quick actions */
.service-inventory-quick{border:1px solid #dbe3e8;border-radius:10px;background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);padding:14px;margin:0 0 13px;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.service-inventory-quick-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.service-inventory-quick-head h3{font-size:1rem;font-weight:800;margin:0 0 3px;color:#1f2937}
.service-inventory-quick-head h3 i{color:var(--hero-red);margin-right:6px}
.service-inventory-quick-head p{margin:0;color:#64748b;font-size:.76rem}
.service-automation-pill{font-size:.7rem;font-weight:800;color:#166534;background:#dcfce7;border:1px solid #bbf7d0;border-radius:30px;padding:6px 9px;white-space:nowrap}
.service-inventory-quick-stats{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:9px}
.service-quick-stat{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;min-height:86px;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;cursor:pointer;color:#334155}
button.service-quick-stat:hover{border-color:#94a3b8;transform:translateY(-1px)}
.service-quick-stat>span{font-size:.72rem;font-weight:700;color:#64748b}.service-quick-stat strong{font-size:1.45rem;line-height:1.2;font-weight:900;color:#0f172a}.service-quick-stat small{font-size:.67rem;color:#64748b}.service-quick-stat.is-warning strong{color:#b45309}.service-quick-stat.is-danger strong{color:#b91c1c}.service-quick-value{cursor:default}.service-inventory-quick-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.service-inventory-smart-alert{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:7px;background:#f1f5f9;color:#475569;font-size:.76rem;font-weight:700}.service-inventory-smart-alert.is-warning{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}.service-inventory-smart-alert.is-danger{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}.service-inventory-smart-alert.is-good{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
@media(max-width:760px){.service-inventory-quick-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.service-inventory-quick{padding:10px}.service-inventory-quick-actions .btn-official{flex:1 1 145px;justify-content:center}}

/* Document invoice OCR review table */
.service-doc-import-preview{margin:14px 0;padding:16px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;overflow:hidden}
.service-doc-import-preview[hidden]{display:none!important}
.service-doc-import-preview h3{margin:0 0 4px;font-size:1.05rem}
.service-doc-import-preview .service-doc-import-meta{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px;margin:12px 0}
.service-doc-import-preview .service-doc-import-meta label{display:grid;gap:5px;font-size:.78rem;font-weight:800}
.service-doc-import-preview input,.service-doc-import-preview select{min-width:95px;max-width:190px;padding:7px 8px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;color:#111;font-size:.78rem}
.service-doc-import-preview td{padding:6px!important;vertical-align:middle}
.service-doc-import-preview .dms-table-wrap{max-width:100%;overflow:auto}
.service-doc-import-preview .service-form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media(max-width:700px){.service-doc-import-preview .service-doc-import-meta{grid-template-columns:1fr}.service-doc-import-preview input,.service-doc-import-preview select{max-width:150px}}


/* Version 19 — bring Service workspace closer to the Sales workspace visual system. */
#tab-service.service-sales-parity { color:var(--text-dark, #1f2937); }
#tab-service .service-page-header { background:#fff; border:1px solid #e3e8ec; border-left:4px solid var(--hero-red); border-radius:8px; padding:18px 20px; box-shadow:0 3px 12px rgba(15,23,42,.045); align-items:center; }
#tab-service .service-eyebrow { display:inline-flex; gap:6px; align-items:center; color:var(--hero-red); font-size:.72rem; font-weight:800; letter-spacing:.07em; }
#tab-service .service-panel { border:1px solid #e1e6eb; border-radius:8px; box-shadow:0 3px 12px rgba(15,23,42,.035); }
#tab-service .service-subnav { border:1px solid #dbe1e7; box-shadow:0 2px 8px rgba(15,23,42,.025); }
#tab-service .service-table-quick-search { display:flex; align-items:center; gap:8px; max-width:100%; width:min(100%, 560px); box-sizing:border-box; padding:7px 10px; margin:0 0 8px; border:1px solid #d4dce5; border-radius:6px; background:#f8fafc; color:#64748b; }
#tab-service .service-table-quick-search label { display:flex; align-items:center; gap:6px; margin:0; white-space:nowrap; color:var(--hero-red); font-size:.73rem; font-weight:800; }
#tab-service .service-table-quick-search input { min-width:0; flex:1; width:100%; margin:0; padding:3px 4px; border:0; outline:0; background:transparent; color:#1f2937; font-size:.78rem; box-shadow:none; }
#tab-service .service-table-quick-search button, #tab-service .service-global-part-search button { flex:0 0 auto; border:0; background:transparent; color:#64748b; cursor:pointer; padding:3px 5px; }
#tab-service .service-table-quick-search button:hover, #tab-service .service-global-part-search button:hover { color:var(--hero-red); }
#tab-service .service-global-part-search { display:flex; align-items:center; gap:8px; width:min(100%, 440px); min-width:min(100%, 260px); padding:7px 10px; background:#f8fafc; border:1px solid #cbd5e1; border-radius:6px; box-sizing:border-box; }
#tab-service .service-global-part-search > i { color:var(--hero-red); }
#tab-service .service-global-part-search input { flex:1; min-width:0; margin:0; padding:3px 2px; border:0; outline:0; box-shadow:none; background:transparent; font-size:.82rem; }
#tab-service .service-global-part-search input:focus { border:0; box-shadow:none; }
#tab-service .dms-table-wrap { border-radius:6px; }
#tab-service .dms-table tbody tr[hidden] { display:none !important; }
@media(max-width:760px) { #tab-service .service-page-header { padding:14px; } #tab-service .service-global-part-search { order:3; width:100%; } #tab-service .service-table-quick-search { width:100%; } }


/* Version 20 — Service navigation mirrors the Sales sidebar list. */
#tab-service .service-subnav { display:none !important; }
#tab-service .service-quick-guide, #tab-service > .analytics-grid.service-metrics-grid { display:none !important; }
#serviceNavGroup .dms-link { line-height:1.45; }
#serviceNavGroup .dms-link.active { background:#333; color:#fff; border-left:3px solid var(--hero-red); }
#serviceNavGroup .dms-link i { width:16px; text-align:center; flex:0 0 16px; }

/* V21: connected smart-service automation summary */
.service-smart-automation-centre{border:1px solid #dbe3ec;border-radius:12px;background:linear-gradient(135deg,#fff 0%,#f8fafc 100%);margin:14px 0;padding:16px;box-shadow:0 3px 12px rgba(15,23,42,.05)}
.service-smart-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px;margin:12px 0 16px}
.service-smart-flow>div{min-width:0;display:grid;grid-template-columns:30px 1fr;column-gap:9px;align-items:center;padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#fff}
.service-smart-step{grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#c8102e;color:#fff;font-weight:800}
.service-smart-flow strong{font-size:12px;color:#1e293b}.service-smart-flow small{font-size:11px;color:#64748b;margin-top:3px}.service-smart-flow>i{color:#94a3b8}
.service-smart-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0}
.service-smart-stats>div{background:#fff;border:1px solid #e2e8f0;border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:5px}
.service-smart-stats small{color:#64748b;font-size:11px}.service-smart-stats strong{color:#0f172a;font-size:22px;line-height:1.1}
.service-ocr-match{min-width:145px;font-size:12px}.service-ocr-match strong,.service-ocr-match small{display:block}.service-ocr-match small{color:#64748b;margin-top:4px;white-space:normal}
@media(max-width:800px){.service-smart-flow{grid-template-columns:1fr}.service-smart-flow>i{transform:rotate(90deg);justify-self:center}.service-smart-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* V22 compact, right-aligned Service-wide search */
.service-compact-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:0 0 14px;min-height:38px}
.service-global-search{display:flex;align-items:center;gap:5px;width:min(230px,100%);min-height:30px;padding:2px 7px;background:#fff;border:1px solid #cbd5e1;border-radius:6px;box-shadow:none;color:#64748b;margin:0}
.service-global-search:focus-within{border-color:var(--hero-red);box-shadow:0 0 0 3px rgba(237,28,36,.10)}
.service-global-search>i{display:none}
.service-global-search input{border:0!important;outline:none!important;box-shadow:none!important;background:transparent!important;min-width:0;width:100%;padding:3px 2px!important;margin:0!important;font-size:.75rem!important;color:#1f2937}
.service-global-search input::-webkit-search-cancel-button{display:none}
.service-global-search kbd{display:none}
.service-global-search button{border:0;background:transparent;color:#64748b;cursor:pointer;padding:2px;line-height:1;font-size:.72rem}
.service-global-search-status{font-size:.7rem;color:#64748b;white-space:nowrap}
#tab-service.service-global-search-mode .service-subpanel{display:block!important}
#tab-service.service-global-search-mode .service-subpanel:not([data-global-match="true"]){display:none!important}
#tab-service .service-subpanel tr[data-global-hidden="true"]{display:none!important}
@media(max-width:600px){.service-compact-toolbar{justify-content:flex-end;flex-wrap:wrap}.service-global-search{width:min(230px,100%);max-width:100%}.service-global-search-status{width:100%;text-align:right}}

/* V26: visual invoice-to-OCR verification */
.service-ocr-visual-review{display:grid;grid-template-columns:minmax(260px,1.05fr) minmax(220px,.95fr);gap:14px;margin:12px 0 16px;align-items:start}
.service-ocr-source,.service-ocr-guidance{border:1px solid #d7e0e8;border-radius:10px;background:#fff;padding:12px;min-width:0}
.service-ocr-review-title{display:flex;flex-direction:column;gap:3px;margin-bottom:9px;color:#243746}.service-ocr-review-title small{font-size:12px;color:#64748b}
.service-ocr-image-frame{position:relative;overflow:visible;background:#f1f5f9;border:1px solid #dbe3eb;border-radius:6px;line-height:0;text-align:center}
.service-ocr-image-frame img{display:block;width:100%;height:auto;max-height:none}
#serviceOcrRowMarker{display:none;position:absolute;left:0;right:0;height:3px;background:#f59e0b;box-shadow:0 0 0 2px rgba(245,158,11,.2);pointer-events:none;z-index:2}
.service-ocr-table-crop{margin-top:8px}.service-ocr-table-crop summary{cursor:pointer;color:#0f5f87;font-weight:600;font-size:13px;padding:5px 0}.service-ocr-table-crop img{display:block;width:100%;height:auto;border:1px solid #dbe3eb;border-radius:6px;margin-top:6px}
.service-ocr-guidance{font-size:13px;color:#334155;line-height:1.5}.service-ocr-guidance ul{padding-left:18px;margin:8px 0 12px}.service-ocr-guidance li{margin:5px 0}.service-ocr-guidance #serviceOcrLiveReviewStatus{background:#eff6ff;border-left:3px solid #0284c7;padding:9px;border-radius:4px;font-weight:600}
#serviceDocImportPreview tr.service-ocr-row-selected{outline:2px solid #f59e0b;outline-offset:-2px;background:#fffbeb}
#serviceDocImportPreview tr[data-doc-row] input:focus,#serviceDocImportPreview tr[data-doc-row] select:focus{outline:2px solid #f59e0b;outline-offset:1px}
@media(max-width:850px){.service-ocr-visual-review{grid-template-columns:1fr}}
.service-ocr-row-needs-review{background:#fffafa}
.service-ocr-field-needs-review{border:1px solid #dc2626!important;box-shadow:0 0 0 1px rgba(220,38,38,.12)!important;background:#fff7f7!important}

/* V28: compact-density layout across Service features to reclaim workspace. */
#tab-service { --service-compact-gap: 8px; }
#tab-service .service-subpanel,
#tab-service .service-panel,
#tab-service .service-card,
#tab-service .service-inventory-quick,
#tab-service .service-smart-automation-centre,
#tab-service .service-ocr-source,
#tab-service .service-ocr-guidance { border-radius:6px; }
#tab-service .service-page-header { padding:12px 16px!important; margin-bottom:8px!important; }
#tab-service .service-page-header h1,
#tab-service .service-page-header h2 { margin:0 0 4px!important; font-size:1.15rem!important; line-height:1.25!important; }
#tab-service .service-page-header p { margin:2px 0!important; font-size:.78rem!important; line-height:1.35!important; }
#tab-service .service-subpanel { padding:10px!important; margin-bottom:8px!important; }
#tab-service .service-subpanel > h2,
#tab-service .service-subpanel > h3 { font-size:1rem!important; line-height:1.25!important; margin:0 0 6px!important; }
#tab-service .service-subpanel p { line-height:1.35; }
#tab-service .btn-official,
#tab-service button.btn-official,
#tab-service .service-inventory-quick-actions button { min-height:30px!important; padding:6px 10px!important; font-size:.7rem!important; line-height:1.15!important; border-radius:4px!important; }
#tab-service .service-inventory-toolbar { gap:5px!important; margin-bottom:6px!important; }
#tab-service .service-inventory-toolbar .btn-official { padding:5px 8px!important; }
#tab-service .service-parts-global-search,
#tab-service .service-table-quick-search { padding:4px 8px!important; margin-bottom:6px!important; min-height:30px!important; }
#tab-service .service-parts-global-search input,
#tab-service .service-table-quick-search input { font-size:.75rem!important; }
#tab-service .service-inventory-quick { padding:9px!important; margin:6px 0 8px!important; box-shadow:none!important; }
#tab-service .service-inventory-quick-head { margin-bottom:6px!important; gap:6px!important; }
#tab-service .service-inventory-quick-head h3 { font-size:.92rem!important; margin:0 0 2px!important; }
#tab-service .service-inventory-quick-head p { font-size:.7rem!important; }
#tab-service .service-inventory-quick-stats { grid-template-columns:repeat(4,minmax(100px,1fr))!important; gap:6px!important; }
#tab-service .service-quick-stat { padding:7px 9px!important; min-height:68px!important; }
#tab-service .service-quick-stat>span { font-size:.66rem!important; }
#tab-service .service-quick-stat strong { font-size:1.15rem!important; }
#tab-service .service-quick-stat small { font-size:.62rem!important; }
#tab-service .service-inventory-quick-actions { gap:5px!important; margin-top:7px!important; }
#tab-service .service-inventory-smart-alert { padding:6px 8px!important; margin-top:7px!important; font-size:.69rem!important; }
#tab-service .service-smart-automation-centre { margin:7px 0!important; padding:10px!important; box-shadow:none!important; }
#tab-service .service-smart-automation-centre h2,
#tab-service .service-smart-automation-centre h3 { font-size:.98rem!important; margin:0 0 3px!important; }
#tab-service .service-smart-automation-centre p { font-size:.73rem!important; line-height:1.35!important; margin:2px 0!important; }
#tab-service .service-smart-flow { gap:5px!important; margin:7px 0 9px!important; }
#tab-service .service-smart-flow>div { grid-template-columns:24px 1fr!important; column-gap:6px!important; padding:7px!important; border-radius:6px!important; }
#tab-service .service-smart-step { width:24px!important; height:24px!important; font-size:.75rem!important; }
#tab-service .service-smart-flow strong { font-size:.7rem!important; }
#tab-service .service-smart-flow small { font-size:.64rem!important; margin-top:1px!important; }
#tab-service .service-smart-stats { gap:6px!important; margin:6px 0!important; }
#tab-service .service-smart-stats>div { padding:7px 9px!important; gap:3px!important; border-radius:6px!important; }
#tab-service .service-smart-stats small { font-size:.65rem!important; }
#tab-service .service-smart-stats strong { font-size:1.15rem!important; }
#tab-service .service-parts-dropzone { padding:7px 10px!important; margin:0 0 7px!important; border-width:1px!important; }
#tab-service .service-parts-dropzone>i { font-size:1.15rem!important; margin-bottom:0!important; }
#tab-service .service-parts-dropzone p { font-size:.74rem!important; margin:1px 0!important; }
#tab-service .service-parts-dropzone small { font-size:.66rem!important; line-height:1.3!important; }
#tab-service .service-parts-table-wrap { border-radius:4px!important; }
#tab-service .service-inventory-parity-table { min-width:2050px!important; }
#tab-service .service-inventory-parity-table th { padding:5px 5px!important; font-size:.65rem!important; }
#tab-service .service-inventory-parity-table td { padding:3px 4px!important; min-width:66px!important; font-size:.69rem!important; }
#tab-service .service-inventory-parity-table td:nth-child(1),
#tab-service .service-inventory-parity-table th:nth-child(1) { min-width:30px!important; width:30px!important; }
#tab-service .service-inventory-parity-table td:nth-child(2),
#tab-service .service-inventory-parity-table th:nth-child(2) { min-width:34px!important; width:34px!important; }
#tab-service .service-inventory-edit-input { min-width:72px!important; padding:3px 4px!important; font-size:.68rem!important; }
#tab-service .service-inventory-num-input { min-width:58px!important; }
#tab-service .service-inventory-parity-table .service-number { min-width:74px!important; }
#tab-service .service-inventory-parity-table .excel-filter-btn { width:16px!important; height:16px!important; }
#tab-service .service-parts-filter-tools { gap:5px!important; }
#tab-service .service-parts-filter-tools select,
#tab-service .service-parts-filter-tools input { padding:5px 7px!important; min-height:30px!important; font-size:.72rem!important; }
#tab-service .dms-table { margin-top:6px!important; }
#tab-service .dms-table th { padding:6px 5px!important; font-size:.67rem!important; }
#tab-service .dms-table td { padding:4px 5px!important; font-size:.72rem!important; }
#tab-service .service-table { min-width:1500px!important; }
#tab-service .service-table .service-description { max-width:220px!important; min-width:140px!important; }
#tab-service .service-table .service-status-select,
#tab-service .service-table .service-pay-select { min-width:110px!important; font-size:.68rem!important; }
#tab-service input:not([type=checkbox]):not([type=radio]):not([type=file]),
#tab-service select,
#tab-service textarea { padding-top:5px; padding-bottom:5px; }
#tab-service .service-ocr-visual-review { gap:8px!important; margin:7px 0 9px!important; }
#tab-service .service-ocr-source,
#tab-service .service-ocr-guidance { padding:8px!important; }
#tab-service .service-ocr-review-title { margin-bottom:5px!important; }
#tab-service .service-ocr-review-title small,
#tab-service .service-ocr-guidance { font-size:.72rem!important; }
#tab-service .service-ocr-guidance ul { margin:4px 0 6px!important; }
#tab-service .service-ocr-guidance li { margin:2px 0!important; }
#tab-service .service-ocr-guidance #serviceOcrLiveReviewStatus { padding:6px!important; }
@media(max-width:900px){
  #tab-service .service-inventory-quick-stats { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  #tab-service .service-smart-flow { grid-template-columns:1fr!important; }
  #tab-service .service-smart-flow>i { transform:rotate(90deg); justify-self:center; }
  #tab-service .service-inventory-parity-table { min-width:2050px!important; }
}

/* v30.17: compact Inventory & Stock Status table to fit the workspace width. */
#tab-inventory .compact-inventory-table{width:100%!important;min-width:0!important;table-layout:fixed!important;font-size:.69rem!important}
#tab-inventory .compact-inventory-table th{padding:5px 4px!important;font-size:.62rem!important;line-height:1.15;white-space:normal;overflow-wrap:anywhere}
#tab-inventory .compact-inventory-table td{padding:4px 4px!important;font-size:.67rem!important;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tab-inventory .compact-inventory-table td input,#tab-inventory .compact-inventory-table td select{max-width:100%;min-width:0!important;width:100%!important;padding:3px 2px!important;font-size:.66rem!important;box-sizing:border-box}
#tab-inventory .dms-table-wrap{width:100%;max-width:100%;overflow-x:auto}
#tab-inventory .compact-inventory-table th:first-child,#tab-inventory .compact-inventory-table td:first-child{width:28px!important}
#tab-inventory .compact-inventory-table th:nth-child(2),#tab-inventory .compact-inventory-table td:nth-child(2){width:34px!important}
#tab-inventory .compact-inventory-table td button{padding:3px 5px!important;font-size:.62rem!important;white-space:normal}
#tab-new_stock #newStockTable{min-width:1050px}


/* v30.18 Responsive layout: phones, tablets, laptops and touch screens */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body, #dmsPortal { max-width:100%; }
#dmsPortal { min-width:0; }
.dms-content { min-width:0; }
.dms-section, .dms-section > *, .dms-content > * { min-width:0; }
.dms-table-wrap, .sheet-container, .table-responsive, .inventory-table-wrap {
  max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
}
.dms-table, .sheet-table { max-width:100%; }
button, input, select, textarea { max-width:100%; font:inherit; }
button, .btn-official, .btn-sm, .btn-xs { touch-action:manipulation; }
img, canvas, video, iframe { max-width:100%; }
.modal, .modal-content, .popup, .dialog { max-width:min(96vw, 1100px); }

/* Laptop / compact desktop */
@media (min-width:901px) and (max-width:1366px) {
  #dmsPortal { grid-template-columns:220px minmax(0,1fr); }
  .dms-sidebar { padding:18px 11px; }
  .dms-content { padding:18px; }
  .dms-link { padding:9px 10px; font-size:.78rem; }
}

/* Tablet portrait and landscape */
@media (min-width:601px) and (max-width:900px) {
  #dmsPortal { grid-template-columns:minmax(0,1fr); }
  .dms-content { padding:14px; height:100dvh; }
  .dms-sidebar { max-width: min(360px, 88vw); max-height:calc(100dvh - 70px); overflow-y:auto; }
  .dms-table-wrap, .sheet-container { width:100%; }
  .dms-table, .sheet-table { min-width:680px; }
  .dms-section .form-grid, .dms-section .service-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dms-section input, .dms-section select, .dms-section textarea { min-width:0; }
  .dms-section .toolbar, .dms-section .action-row { display:flex; flex-wrap:wrap; gap:8px; }
}

/* Phones */
@media (max-width:600px) {
  #dmsPortal { grid-template-columns:minmax(0,1fr); height:100dvh; min-height:100dvh; }
  .dms-content { padding:10px; height:100dvh; overflow-x:hidden; }
  .mobile-portal-header { position:sticky; top:0; z-index:90; gap:8px; }
  .dms-sidebar { width:min(88vw,330px); max-width:88vw; max-height:calc(100dvh - 64px); position:fixed; top:58px; left:0; overflow-y:auto; padding:14px 12px; }
  .dms-sidebar h2 { font-size:1rem; }
  .dms-link { padding:11px 10px; font-size:.78rem; }
  .dms-section h1, .dms-section h2 { overflow-wrap:anywhere; }
  .dms-section .page-header, .dms-section .section-header { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; }
  .dms-section .form-grid, .dms-section .service-form-grid,
  .dms-section .stats-grid, .dms-section .summary-grid { grid-template-columns:minmax(0,1fr)!important; }
  .dms-section input:not([type=checkbox]):not([type=radio]):not([type=file]),
  .dms-section select, .dms-section textarea { width:100%; min-width:0; font-size:16px; }
  .dms-section button, .dms-section .btn-official { min-height:40px; white-space:normal; }
  .dms-section .toolbar, .dms-section .action-row, .dms-section .form-actions { display:flex; flex-wrap:wrap; gap:7px; }
  .dms-section .toolbar > *, .dms-section .action-row > * { flex:0 1 auto; }
  .dms-table-wrap, .sheet-container { margin-left:0; margin-right:0; width:100%; }
  .dms-table, .sheet-table { min-width:680px; }
  #tab-inventory .compact-inventory-table { min-width:760px!important; table-layout:auto!important; }
  #tab-new_stock #newStockTable { min-width:850px!important; }
  .modal, .modal-content, .popup, .dialog { width:calc(100vw - 20px)!important; max-width:calc(100vw - 20px)!important; max-height:calc(100dvh - 24px); overflow:auto; margin:12px auto; }
  .dms-section .search-box, .dms-section .global-search { width:100%; max-width:100%; }
  .dms-section .card, .dms-section .panel { max-width:100%; }
}

/* Respect landscape phone safe areas and prevent fixed-width overflow */
@media (max-height:500px) and (orientation:landscape) and (max-width:900px) {
  .dms-sidebar { max-height:calc(100dvh - 48px); }
  .dms-content { height:100dvh; }
}
@supports(padding:max(0px)) {
  .dms-content { padding-bottom:max(10px, env(safe-area-inset-bottom)); }
}