/* --- IVANOFF GRAPHITE DESIGN --- */
        :root { 
            --gold: var(--brand);
            --dark: var(--navy-900);
            --dark-light: var(--navy-800);
            --white: #ffffff;
            --gray-bg: #f2f4f7;
            --gray-text: #6b7280;
            --danger: #ef4444;
            --success: #10b981;
            --glass: rgba(255, 255, 255, 0.92);
            --glass-border: rgba(255, 255, 255, 0.5);
            --shadow-soft: 0 8px 30px rgba(26, 26, 26, 0.08);
            --shadow-hover: 0 15px 40px rgba(26, 26, 26, 0.15);
        }
        
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        body { font-family: 'Manrope', sans-serif; background-color: var(--gray-bg); margin: 0; padding: 0; color: var(--dark); min-height: 100vh; -webkit-font-smoothing: antialiased;}
        
        body::before {
            content: ''; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
            background: radial-gradient(circle, rgba(200, 169, 110, 0.04) 0%, rgba(242, 244, 247, 0) 70%);
            z-index: -1; animation: rotateBg 25s linear infinite;
        }

        /* Основният layout е широк по подразбиране. Така при временно
           неприлагане на по-късен visual layer страницата не се връща
           към стария тесен 600px изглед. */
        .container {
            width: calc(100% - 32px);
            max-width: 1680px;
            margin: 0 auto;
            padding: 18px 24px 90px;
        }
        
        /* HEADER & TABS STICKY */
        .header-sticky-wrapper {
            position: sticky; top: 10px; z-index: 1000;
            display: flex; flex-direction: column; gap: 10px;
            margin-bottom: 20px;
            animation: slideDown 0.5s ease;
        }

        .header-bar {
            background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border); border-radius: 20px; padding: 12px 20px;
            display: flex; justify-content: space-between; align-items: center;
            box-shadow: var(--shadow-soft);
        }

        .logo-area h1 { margin: 0; font-weight: 800; font-size: 18px; color: var(--dark); letter-spacing: -0.5px; line-height: 1.1; }
        .logo-area span { color: var(--gray-text); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }

        .nav-links-wrap { display: flex; gap: 8px; }
        .nav-link {
            text-decoration: none; color: var(--dark); font-weight: 700; font-size: 11px;
            padding: 8px 12px; border-radius: 12px; transition: all 0.2s;
            background: rgba(26, 26, 26, 0.05); display: flex; align-items: center; gap: 4px; text-transform: uppercase;
        }
        .nav-link:hover { background: var(--dark); color: var(--gold); transform: translateY(-1px); }
        @media (min-width:641px) {
            .header-bar { gap:16px; }
            .logo-area { flex:0 1 auto; min-width:0; }
            .header-logo { max-width:230px; }
            .nav-links-wrap { flex:1; justify-content:flex-end; flex-wrap:wrap; min-width:0; }
            .nav-link { white-space:nowrap; }
        }

        .tabs { 
            display: flex; background: var(--white); padding: 6px; border-radius: 16px; 
            box-shadow: var(--shadow-soft); overflow-x: auto; gap: 4px;
        }
        .tabs::-webkit-scrollbar { display: none; }
        .tab { 
            flex: 1; min-width: 80px; text-align: center; padding: 10px 5px; border-radius: 12px; 
            font-weight: 800; font-size: 12px; cursor: pointer; color: var(--gray-text); 
            transition: all 0.3s ease; text-transform: uppercase;
            /* The tabs are real buttons (role="tab"), so the browser's own button
               chrome has to go or every tab gets a border and a grey background. */
            appearance: none; background: transparent; border: 0; font-family: inherit;
        }
        .tab.active { background: var(--dark); color: var(--gold); box-shadow: 0 4px 12px rgba(26, 26, 26, 0.2); }

        /* Navigation icons: one inline SVG sprite in warehouse.php, so the same destination
           always shows the same glyph. The stroke inherits the tab/nav colour, which is why
           the active tab's icon turns gold together with its label. */
        .tab-ico { width: 15px; height: 15px; margin-right: 5px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .mobile-nav-btn .ico svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        /* Same drawing rules for the home quick actions, slightly larger. */
        .pro-action .act-ico { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .more-menu-item .menu-ico { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .mobile-more-item .ico svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .mobile-more-logout svg { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        /* The same sprite in the KPI cards, the account chip and the login fields. */
        .pro-kpi-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .nav-ico-sm { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
        .login-icon svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

        /* A real <label> without changing a layout that was built around placeholders.
           Screen readers, autofill and form validation read it; the visual hint stays. */
        .sr-only {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
        }

        /* SECTIONS */
        .section { display: none; animation: fadeIn 0.4s ease; }
        .section.active { display: block; }
        
        .section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-text); font-weight: 800; margin-bottom: 12px; margin-top: 25px; padding-left: 5px; }
        .stock-cat-title { margin: 20px 0 10px; font-weight: 800; color: var(--dark); letter-spacing: -0.3px; padding-left: 5px; font-size: 15px;}

        /* CARDS & INPUTS */
        .input-group { background: var(--white); padding: 20px; border-radius: 20px; box-shadow: var(--shadow-soft); border: 1px solid rgba(26,26,26,0.04); margin-bottom: 20px; }
        
        select, input, textarea { 
            width: 100%; padding: 14px 16px; font-size: 15px; background: #f8fafc; 
            border: 2px solid transparent; border-radius: 14px; font-weight: 600; 
            color: var(--dark); margin-bottom: 12px; outline: none; transition: all 0.2s; 
            font-family: 'Manrope', sans-serif; 
        }
        select:focus, input:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(200, 169, 110, 0.15); background: var(--white); }
        textarea { min-height: 100px; resize: vertical; }

        /* BUTTONS */
        .camera-btn { 
            width: 100%; background: var(--dark); color: var(--gold); border: none; 
            padding: 16px; border-radius: 14px; font-size: 15px; font-weight: 800; 
            cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; 
            box-shadow: 0 8px 20px rgba(26, 26, 26, 0.2); margin-bottom: 15px; transition: 0.2s; 
        }
        .camera-btn:active { transform: scale(0.96); }

        .save-btn { 
            width: 100%; background: var(--gold); color: var(--dark); border: none; 
            padding: 16px; border-radius: 14px; font-size: 15px; font-weight: 800; 
            cursor: pointer; box-shadow: 0 8px 20px rgba(200, 169, 110, 0.3); transition: 0.2s; margin-bottom: 10px; text-transform: uppercase;
        }
        .save-btn:active { transform: scale(0.96); }
        
        .add-btn { background: var(--dark); color: var(--white); border:none; padding:15px; border-radius:14px; font-weight:800; cursor:pointer; width: 100%; font-size: 14px; text-transform: uppercase;}
        .small-btn { border: none; padding: 12px 18px; cursor: pointer; }
        
        .gps-btn { background: #f3f4f6; color: var(--dark); width: 100%; padding: 14px; border: none; border-radius: 14px; font-weight: 800; margin-bottom: 10px; cursor: pointer; border: 1px solid #e5e7eb;}
        .photo-btn { background: #f8fafc; color: var(--dark); width: 100%; padding: 14px; border: 2px dashed #cbd5e1; border-radius: 14px; font-weight: 800; margin-bottom: 15px; cursor: pointer; }

        /* LIST ITEMS */
        .product-card { 
            background: var(--white); border-radius: 16px; padding: 16px 20px; margin-bottom: 12px; 
            box-shadow: var(--shadow-soft); display: flex; justify-content: space-between; align-items: center; 
            border: 1px solid rgba(26,26,26,0.03); opacity: 0; transform: translateY(15px); animation: fadeUp 0.5s forwards; 
        }
        .product-info h3 { margin: 0; font-size: 15px; color: var(--dark); font-weight: 800; }
        .product-info p { margin: 4px 0 0; font-size: 11px; color: var(--gray-text); text-transform: uppercase; font-weight: 700;}
        .qty-badge { padding: 6px 12px; border-radius: 10px; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
        .badge-ok { background: #f0fdf4; color: #16a34a; border: 1px solid #dcfce7; } 
        .badge-low { background: #fef2f2; color: #dc2626; border: 1px solid #fee2e2; }
        .badge-defective { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
        .badge-vehicle { background:#eff6ff; color:#3f6212; border:1px solid #bfdbfe; }
        .defective-card { border-left: 4px solid #f97316; }

        .list-container { background: var(--white); border-radius: 20px; box-shadow: var(--shadow-soft); overflow: hidden; border: 1px solid rgba(26,26,26,0.04); }
        .history-item { display: flex; align-items: center; gap: 15px; padding: 16px; border-bottom: 1px solid #f3f4f6; }
        .history-item:last-child { border-bottom: none; }
        .hist-icon { font-size: 18px; background: #f8fafc; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid #e5e7eb;}
        .hist-model { font-weight: 800; color: var(--dark); font-size: 14px; }
        .hist-sn { font-size: 12px; color: var(--gray-text); font-weight: 600; margin-top: 3px; }
        .meta-tag { background: #eff6ff; padding: 2px 6px; border-radius: 6px; font-size: 10px; color: #3f6212; margin-left: 6px; font-weight: 700;}
        .meta-good { background:#ecfdf5; color:#047857; }
        .meta-bad { background:#fff7ed; color:#c2410c; }
        .top-grid { display:grid; grid-template-columns:1fr; gap:14px; }
        .summary-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
        .summary-box { background:var(--white); border-radius:16px; padding:14px; box-shadow: var(--shadow-soft); border:1px solid rgba(26,26,26,0.04); }
        .summary-box b { display:block; font-size:24px; margin-top:4px; }
        .quick-note { font-size:11px; color:var(--gray-text); font-weight:700; text-transform:uppercase; }
        .device-search-grid { display:grid; grid-template-columns:1fr 140px; gap:10px; }
        .device-table-wrap { background:var(--white); border-radius:20px; box-shadow: var(--shadow-soft); border:1px solid rgba(26,26,26,0.04); overflow:hidden; }
        .device-table { width:100%; border-collapse:collapse; font-size:13px; }
        .device-table th, .device-table td { padding:12px 10px; border-bottom:1px solid #f1f5f9; text-align:left; vertical-align:top; }
        .device-table th { background:#f8fafc; font-size:11px; text-transform:uppercase; color:var(--gray-text); letter-spacing:.5px; }
        .device-status-badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:800; }
        .status-in_stock { background:#ecfdf5; color:#047857; }
        .status-defective { background:#fff7ed; color:#c2410c; }
        .status-installed { background:#eff6ff; color:#3f6212; }
        @media (max-width:640px) { .device-search-grid { grid-template-columns:1fr; } .device-table { font-size:12px; } .device-table th, .device-table td { padding:10px 8px; } }
        
        .cat-header { font-weight: 800; color: var(--dark); margin-top: 20px; margin-bottom: 8px; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; padding-left: 5px; }
        .mat-row { display: flex; justify-content: space-between; padding: 14px 16px; background: var(--white); border-bottom: 1px solid #f3f4f6; font-size: 14px; font-weight: 600;}
        .mat-row:first-of-type { border-top-left-radius: 16px; border-top-right-radius: 16px; }
        .mat-row:last-of-type { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; border-bottom: none; }

        .added-mat-item { display: flex; justify-content: space-between; align-items: center; background: #f8fafc; padding: 12px; border-radius: 10px; margin-bottom: 6px; font-size: 13px; font-weight: 700; border: 1px solid #e2e8f0; }
        .remove-mat { color: var(--danger); cursor: pointer; padding: 4px; font-size: 14px; }

        /* MODALS & TOASTS */
        #camera-modal, #photo-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark); z-index: 9999; flex-direction: column; animation: fadeIn 0.3s; }
        #scan-info-panel { position: absolute; top: 20px; left: 20px; right: 20px; background: rgba(255, 255, 255, 0.95); padding: 20px; border-radius: 20px; z-index: 10001; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
        .scan-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; font-weight: 800; }
        .scan-val { color: var(--danger); } .scan-val.ok { color: var(--success); }
        .close-btn { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.15); color: white; border: 2px solid rgba(255,255,255,0.3); padding: 12px 30px; border-radius: 30px; font-weight: 800; backdrop-filter: blur(10px); z-index: 10002; cursor: pointer; text-transform: uppercase; font-size: 13px;}

        /* Status Toast */
        #status-box { 
            position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
            display: none; padding: 14px 24px; border-radius: 20px; font-weight: 800; font-size: 14px;
            text-align: center; animation: fadeUpToast 0.4s forwards; z-index: 99999;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            /* A long message used to run off the screen on one line and lie on top of
               the mobile bottom navigation. It now wraps inside the viewport, stays
               above the bottom bar and never blocks a tap. */
            max-width: min(92vw, 560px); width: max-content; white-space: normal;
            overflow-wrap: anywhere; line-height: 1.35; pointer-events: none;
        }
        @media (max-width: 900px) {
            #status-box { bottom: 92px; }
        }
        
        #photo-preview, #inst-photo-preview { width: 100%; height: 180px; object-fit: cover; border-radius: 14px; display: none; margin-bottom: 12px; border: 2px solid var(--gold); }
        .empty-state { text-align: center; padding: 30px; color: var(--gray-text); font-weight: 700; font-size: 14px; }

        @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeUpToast { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes rotateBg { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        /* Status sheet — a native <dialog>, so focus stays inside it and Escape works
           without extra code. It replaces the old prompt + confirm pair. */
        .status-sheet { border: 0; padding: 0; background: transparent; max-width: min(92vw, 460px); width: 100%; }
        .status-sheet::backdrop { background: rgba(7, 23, 42, .55); }
        .status-sheet-card { background: #fff; border-radius: 22px; padding: 20px; display: grid; gap: 12px; box-shadow: 0 24px 60px rgba(7, 23, 42, .28); }
        .status-sheet-card h3 { margin: 0; font-size: 17px; color: #1a1a1a; }
        .status-sheet-sub { margin: 0; font-size: 13px; color: #475569; font-weight: 700; line-height: 1.5; }
        .status-sheet-sub b { color: #1a1a1a; }
        .status-sheet-field { display: grid; gap: 6px; font-size: 12px; font-weight: 800; color: #334155; }
        .status-sheet-field input { width: 100%; box-sizing: border-box; margin: 0; padding: 11px 12px; border-radius: 12px; border: 1px solid #cbd5e1; font-size: 14px; }
        .status-sheet-photo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; font-weight: 700; }
        .status-sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
        .status-sheet-actions .save-btn { width: auto; margin: 0; }

        /* "Покажи още" in the device register */
        .registry-more { display: flex; justify-content: center; padding: 12px 0 4px; }
        .registry-more .small-btn { width: auto; }

        /* Read-only register shown from the last saved list while offline */
        .offline-banner { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #fff8e6; border: 1px solid #f5d488; color: #7a5b00; font-size: 12px; font-weight: 800; }
        .reg-item.offline { opacity: .92; }
        .reg-offline-client { display: block; margin-top: 4px; color: #64748b; font-size: 11px; font-weight: 700; }

        /* Delivery / invoice block of "Добавяне в склад" */
        .stock-supply { border: 1px dashed #cbd5e1; border-radius: 14px; padding: 10px 12px; background: #f8fafc; }
        .stock-supply summary { cursor: pointer; font-weight: 800; font-size: 13px; color: #334155; }
        .stock-supply-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
        .stock-supply-grid .stock-field { display: grid; gap: 4px; font-size: 11px; font-weight: 800; color: #475569; }
        .stock-supply-hint { display: block; margin-top: 8px; color: #64748b; font-size: 11px; font-weight: 700; }
        @media (max-width: 640px) { .stock-supply-grid { grid-template-columns: 1fr; } }

        /* LOGIN */
        .blur-mode { filter: blur(5px); pointer-events: none; user-select: none; overflow: hidden; height: 100vh; }
        .login-overlay {
            position: fixed; inset: 0; z-index: 10000; overflow:hidden;
            display: flex; justify-content: center; align-items: center;
            padding:20px;background:radial-gradient(circle at 18% 16%,rgba(200,169,110,.18),transparent 28%),radial-gradient(circle at 85% 82%,rgba(37,99,235,.24),transparent 30%),linear-gradient(145deg,#1a1a1a,#252525 58%,#1a1a1a);backdrop-filter: blur(8px);
        }
        .cash-only-home{max-width:1100px;margin:28px auto;padding:34px;border-radius:28px;background:linear-gradient(135deg,#252525,#2d2d2d);color:#fff;box-shadow:0 24px 70px rgba(15,23,42,.2);overflow:hidden;position:relative}
        .cash-only-home:after{content:"";position:absolute;width:300px;height:300px;border:45px solid rgba(200,169,110,.12);border-radius:50%;right:-120px;top:-150px}.cash-only-eyebrow{color:#a3e635;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.cash-only-home h1{font-size:38px;margin:8px 0}.cash-only-home>p{max-width:760px;color:#d7e2f0;font-weight:700;line-height:1.55}.cash-only-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px;position:relative;z-index:1}.cash-only-card{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.09);color:#fff;border-radius:19px;padding:19px;text-decoration:none;text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;cursor:pointer;font:inherit}.cash-only-card>span{font-size:27px;grid-row:1/3}.cash-only-card b{font-size:16px}.cash-only-card small{color:#c9d6e7;margin-top:4px}.cash-only-card.primary{background:#a3e635;color:#1a1a1a;border-color:#a3e635}.cash-only-card.primary small{color:#42510a}.cash-only-card.danger{background:rgba(239,68,68,.13)}
        .cash-only-workspace .tabs,.cash-only-workspace .mobile-bottom-nav,.cash-only-workspace .pro-hero,.cash-only-workspace #global-smart-search-panel,.cash-only-workspace #control-center-panel,.cash-only-workspace .pro-quick-actions,.cash-only-workspace .section:not(#section-access),.stock-only-workspace .tabs,.stock-only-workspace .mobile-bottom-nav,.stock-only-workspace .pro-hero,.stock-only-workspace #global-smart-search-panel,.stock-only-workspace #control-center-panel,.stock-only-workspace .pro-quick-actions,.stock-only-workspace .section:not(#section-access){display:none!important}.cash-only-workspace #section-access.active,.stock-only-workspace #section-access.active{display:block!important}
        @media(max-width:720px){.cash-only-home{margin:16px 4px;padding:24px 18px}.cash-only-home h1{font-size:29px}.cash-only-actions{grid-template-columns:1fr}}
        .login-overlay:before,.login-overlay:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.1);border-radius:50%;animation:loginOrbit 12s linear infinite}.login-overlay:before{width:420px;height:420px;right:-150px;top:-170px}.login-overlay:after{width:290px;height:290px;left:-110px;bottom:-120px;animation-direction:reverse;animation-duration:9s}
        .login-box {
            position:relative;z-index:1;display:grid;grid-template-columns:minmax(310px,.9fr) minmax(360px,1.1fr);background:rgba(255,255,255,.97);padding:0;border:1px solid rgba(255,255,255,.7);border-radius:32px;
            box-shadow:0 34px 100px rgba(0,0,0,.48);width:min(900px,calc(100vw - 48px));text-align:left;
            animation:loginEnter .65s cubic-bezier(.16,1,.3,1);overflow:hidden;
        }
        .login-box:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#a3e635,#35d7ff,#8b5cf6);background-size:200% 100%;animation:loginGlow 4s linear infinite}
        .login-showcase{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:520px;padding:48px 42px 38px;color:#fff;background:linear-gradient(145deg,#1a1a1a,#3a3a3a 72%,#3a3a3a)}.login-showcase:after{content:"";position:absolute;width:280px;height:280px;right:-125px;bottom:-125px;border:38px solid rgba(200,169,110,.13);border-radius:50%}.login-showcase-logo{position:relative;z-index:1;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.login-showcase-logo i{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#a3e635;color:#1a1a1a;font-size:20px;font-style:normal}.login-showcase-copy{position:relative;z-index:1}.login-showcase-copy small{color:#a3e635;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.login-showcase-copy h1{max-width:390px;margin:10px 0 14px;font-size:38px;line-height:1.05;letter-spacing:-1.3px}.login-showcase-copy p{max-width:390px;margin:0;color:#c8d8e8;font-size:14px;line-height:1.6}.login-showcase-points{position:relative;z-index:1;display:grid;gap:9px;margin-top:28px}.login-showcase-points span{display:flex;align-items:center;gap:9px;color:#eaf4ff;font-size:12px;font-weight:700}.login-showcase-points b{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:rgba(200,169,110,.14);color:#a3e635}.login-form-panel{display:flex;flex-direction:column;justify-content:center;padding:48px 46px 40px}.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:8px}.login-brand-mark{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:#1a1a1a;color:#a3e635;font-size:23px;box-shadow:0 10px 24px rgba(15,23,42,.2)}.login-title{margin:0;color:#1a1a1a;font-size:27px;font-weight:800}.login-subtitle{margin:0 0 28px 63px;color:#64748b;font-size:12px;font-weight:700}.login-form-label{display:block;margin:0 0 6px 3px;color:#40536d;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.login-field{position:relative;margin:0 0 16px}.login-field .login-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;z-index:1;color:#64748b}.login-input{width:100%;box-sizing:border-box;text-align:left;background:#f7f9fc!important;border:1px solid #dce5ef;border-radius:15px!important;padding:15px 46px;font-weight:800;color:#13233c;transition:border-color .2s,box-shadow .2s,transform .2s}.login-input:focus{outline:0;border-color:#84cc16;box-shadow:0 0 0 4px rgba(200,169,110,.22);transform:translateY(-1px)}.login-password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:10px;background:#e9eef5;cursor:pointer;font-size:16px}.login-secure-note{display:flex;align-items:center;gap:9px;margin:1px 2px 0;padding:11px 12px;border:1px solid #dcebe4;border-radius:12px;background:#f1fbf5;color:#3e6652;font-size:10px;font-weight:800}.login-error{padding:10px 12px;margin:0 0 14px;border-radius:12px;background:#fee2e2;color:#991b1b;font-weight:800;font-size:12px;animation:loginShake .35s ease}
        .login-btn-submit {
            width: 100%; padding: 16px; background:linear-gradient(135deg,#a3e635,#84cc16); color: var(--dark);
            border: none; border-radius: 14px; font-weight: 800; cursor: pointer;
            font-size: 15px; margin-top: 18px; text-transform: uppercase; transition: .22s;position:relative;overflow:hidden;
        }
        .login-btn-submit:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(177,204,0,.35)}.login-btn-submit:active{transform:scale(.98)}
        @keyframes loginEnter{from{transform:translateY(28px) scale(.96);opacity:0}to{transform:none;opacity:1}}@keyframes loginOrbit{to{transform:rotate(360deg)}}@keyframes loginGlow{to{background-position:200% 0}}@keyframes loginShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
        @media(max-width:760px){.login-overlay{align-items:flex-end;padding:10px}.login-box{display:block;width:100%;max-height:calc(100dvh - 20px);overflow:auto;border-radius:27px}.login-showcase{min-height:0;padding:25px 22px 22px}.login-showcase-copy h1{font-size:27px;margin-bottom:8px}.login-showcase-copy p{font-size:12px}.login-showcase-points{display:none}.login-showcase-logo{margin-bottom:22px}.login-form-panel{padding:27px 20px 23px}.login-subtitle{margin-left:0;margin-top:12px;margin-bottom:22px}.login-title{font-size:22px}.login-btn-submit{min-height:54px}}
        .device-search-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            padding: 12px;
            margin-bottom: 10px;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
        }
        .device-search-head {
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:8px;
            flex-wrap:wrap;
        }
        .device-search-model {
            font-weight:800;
            font-size:14px;
            color: var(--dark);
        }
        .device-search-grid {
            display:grid;
            grid-template-columns: 1fr;
            gap:6px;
            margin-bottom:10px;
        }
        .device-meta-line {
            font-size:12px;
            color: var(--gray-text);
            line-height:1.4;
            word-break: break-word;
        }
        .status-inline-form {
            display:flex;
            gap:8px;
            align-items:center;
        }
        .status-inline-form select {
            margin-bottom:0;
            font-size:13px;
            padding: 10px 12px;
        }
        .status-inline-form button {
            margin:0;
            width:auto;
            min-width:88px;
            padding: 10px 12px;
        }

    
        .action-wrap { display:flex; flex-wrap:wrap; gap:6px; }
        .mini-btn { border:none; border-radius:10px; padding:7px 10px; font-size:12px; font-weight:800; cursor:pointer; transition:0.2s ease; background:#e2e8f0; color:#1a1a1a; }
        .mini-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
        .mini-btn.stock { background:#dcfce7; color:#166534; }
        .mini-btn.defect { background:#ffedd5; color:#c2410c; }
        .mini-btn.install { background:#dbeafe; color:#3f6212; }
        .mini-btn.returned { background:#fef3c7; color:#b45309; }
        .mini-btn.edit { background:#ede9fe; color:#6d28d9; }
        .mini-btn.history { background:#e0f2fe; color:#075985; }
        .registry-meta { display:flex; gap:8px; align-items:center; }
        .muted-mini { color:#64748b; font-size:11px; }
        .device-status-badge { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800; }
        .status-in_stock { background:#dcfce7; color:#166534; }
        .status-in_vehicle { background:#e0f2fe; color:#075985; }
        .status-defective { background:#ffedd5; color:#c2410c; }
        .status-installed { background:#dbeafe; color:#3f6212; }
        .status-returned { background:#fef3c7; color:#b45309; }
        .edit-modal { position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:99999; display:none; align-items:center; justify-content:center; padding:20px; }
        .edit-modal-box { width:100%; max-width:850px; background:#fff; border-radius:22px; box-shadow:0 25px 60px rgba(0,0,0,.18); padding:22px; }
        .edit-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
        .device-dossier-box{max-width:900px;max-height:92vh;overflow:auto;padding:0;border:1px solid rgba(148,163,184,.4)}
        .device-dossier-head{position:sticky;top:0;z-index:2;padding:20px 22px;margin:0;background:linear-gradient(135deg,#252525,#3a3a3a);color:#fff;border-radius:21px 21px 0 0}.device-dossier-head small{display:block;color:#a3e635;font-size:9px;font-weight:800;letter-spacing:.12em}.device-dossier-head h2{margin:3px 0 2px;font-size:23px}.device-dossier-head>div>div{color:#bfdbfe;font-size:11px;font-weight:700}.device-dossier-head .close-x{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2)}
        .device-dossier-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:20px 22px 10px}.device-dossier-grid label{display:block}.device-dossier-grid label.wide{grid-column:1/-1}.device-dossier-grid label>span{display:block;margin:0 0 6px;color:#334155;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.device-dossier-grid input,.device-dossier-grid select,.device-dossier-grid textarea{width:100%;box-sizing:border-box;margin:0;padding:12px 13px;border:1px solid #cbd5e1;border-radius:12px;background:#f8fafc;color:#1a1a1a;font-weight:800;font-size:13px;line-height:1.3;transition:.2s}.device-dossier-grid input:focus,.device-dossier-grid select:focus,.device-dossier-grid textarea:focus{outline:none;border-color:#2563eb;background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.1)}
        .device-dossier-note{margin:5px 22px 14px;padding:11px 13px;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff;color:#166534;font-size:10px;font-weight:800;line-height:1.4}.device-dossier-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 22px 22px}.device-dossier-actions button{min-height:43px;padding:10px 14px;border:0;border-radius:12px;font-size:11px;font-weight:800;cursor:pointer}.device-dossier-actions .dossier-secondary{background:#e8eef6;color:#17233a}.device-dossier-actions .dossier-return{background:#fff1f2;color:#be123c}.device-dossier-actions .dossier-save{margin-left:auto;min-width:185px;background:linear-gradient(120deg,#a3e635,#84cc16);color:#0f1f00;box-shadow:0 8px 18px rgba(163,230,53,.2)}.device-dossier-actions button:disabled{opacity:.65;cursor:wait}
        .device-dossier-photo{grid-column:1/-1;display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;padding:12px;border:1px solid #dbe5f2;border-radius:16px;background:#f8fbff}.device-dossier-photo img{width:150px;height:105px;object-fit:cover;border-radius:12px;background:#e8eef7;border:1px solid #d5dfed}.device-dossier-photo label small{display:block;margin-top:7px;color:#64748b;font-size:10px}
        @media(max-width:650px){.edit-modal{padding:8px}.device-dossier-box{max-height:96vh;border-radius:18px}.device-dossier-head{padding:16px;border-radius:17px 17px 0 0}.device-dossier-head h2{font-size:19px}.device-dossier-grid{grid-template-columns:1fr;padding:16px 16px 8px}.device-dossier-grid label.wide{grid-column:auto}.device-dossier-note{margin:5px 16px 12px}.device-dossier-actions{padding:0 16px 16px;display:grid;grid-template-columns:1fr 1fr}.device-dossier-actions .dossier-save{grid-column:1/-1;margin:0;min-width:0}.device-dossier-actions button{width:100%}}
        @media(max-width:650px){.device-dossier-photo{grid-template-columns:90px 1fr}.device-dossier-photo img{width:90px;height:80px}}
        .close-x { border:none; background:#f1f5f9; width:40px; height:40px; border-radius:999px; cursor:pointer; font-size:18px; font-weight:800; }
        .form-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
        .form-grid-2 input, .form-grid-2 select, .form-grid-2 textarea { width:100%; border:1px solid #dbe3ee; border-radius:12px; padding:12px 14px; font-size:14px; box-sizing:border-box; }
        .modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }



        /* ===== WORX WAREHOUSE PRO VISUAL LAYER v1 ===== */
        :root {
            --pro-bg-1:var(--navy-900);
            --pro-bg-2:var(--navy-800);
            --pro-card:rgba(255,255,255,.86);
            --pro-line:rgba(148,163,184,.26);
            --pro-green:#bfdbfe;
            --pro-blue:#38bdf8;
            --pro-orange:#fb923c;
            --pro-red:#f43f5e;
        }
        body {
            background:
                radial-gradient(circle at 12% -10%, rgba(200,169,110,.22), transparent 28%),
                radial-gradient(circle at 88% 8%, rgba(56,189,248,.18), transparent 28%),
                linear-gradient(135deg,#eef3f8 0%,#f8fafc 52%,#eef6ff 100%);
        }
        body::after {
            content:'';
            position:fixed;
            inset:0;
            pointer-events:none;
            z-index:-1;
            background-image:linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px);
            background-size:36px 36px;
            mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 75%);
        }
        .container { max-width:1180px; padding:18px; }
        .header-sticky-wrapper { top:12px; }
        .header-bar {
            background:linear-gradient(135deg,rgba(7,17,31,.92),rgba(15,31,53,.86));
            color:#fff;
            border:1px solid rgba(255,255,255,.15);
            border-radius:26px;
            box-shadow:0 22px 60px rgba(7,17,31,.18);
        }
        .logo-area h1 { color:#fff; font-size:21px; }
        .logo-area span { color:rgba(255,255,255,.68); }
        .logo-area a { color:var(--gold); font-weight:800; font-size:12px; text-decoration:none; display:inline-flex; margin-top:6px; }
        .nav-link {
            background:rgba(255,255,255,.10);
            color:#fff;
            border:1px solid rgba(255,255,255,.12);
            backdrop-filter: blur(8px);
        }
        .nav-link:hover { background:var(--gold); color:#1a1a1a; }
        .tabs {
            background:rgba(255,255,255,.72);
            backdrop-filter:blur(18px);
            border:1px solid rgba(255,255,255,.72);
            border-radius:22px;
            padding:8px;
        }
        .tab { min-width:116px; border:1px solid transparent; position:relative; overflow:hidden; }
        .tab::before { content:''; position:absolute; inset:auto 18px 3px; height:3px; border-radius:999px; background:transparent; transition:.25s; }
        .tab.active { background:linear-gradient(135deg,#1a1a1a,#2d2d2d); color:var(--gold); transform:translateY(-1px); }
        .tab.active::before { background:#34d399; box-shadow:none; }
        .pro-hero {
            margin:0 0 18px;
            border-radius:30px;
            padding:22px;
            background:
                radial-gradient(circle at 12% 18%,rgba(200,169,110,.30),transparent 34%),
                radial-gradient(circle at 94% 16%,rgba(56,189,248,.24),transparent 30%),
                linear-gradient(135deg,#1a1a1a,#2d2d2d 58%,#333333);
            color:#fff;
            box-shadow:0 28px 70px rgba(7,17,31,.22);
            border:1px solid rgba(255,255,255,.13);
            overflow:hidden;
            position:relative;
        }
        .pro-hero::after {
            content:'';
            position:absolute;
            width:260px;
            height:260px;
            right:-90px;
            bottom:-130px;
            border-radius:999px;
            border:34px solid rgba(200,169,110,.08);
        }
        .pro-hero-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; position:relative; z-index:1; }
        .pro-eyebrow { color:var(--gold); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
        .pro-hero h2 { margin:6px 0 6px; font-size:28px; line-height:1.05; letter-spacing:-.04em; }
        .pro-hero p { margin:0; color:rgba(255,255,255,.72); font-size:13px; font-weight:700; }
        .pro-live-pill { flex:0 0 auto; display:flex; gap:8px; align-items:center; padding:10px 13px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12); font-size:12px; font-weight:800; }
        .pro-live-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 6px rgba(200,169,110,.13); animation:proPulse 1.7s infinite; }
        .pro-kpi-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-top:20px; position:relative; z-index:1; }
        .pro-kpi {
            border-radius:22px;
            padding:15px;
            background:rgba(255,255,255,.10);
            border:1px solid rgba(255,255,255,.13);
            backdrop-filter:blur(12px);
            min-height:105px;
            transition:.22s ease;
        }
        .pro-kpi:hover { transform:translateY(-4px); background:rgba(255,255,255,.14); }
        .pro-kpi-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.12); margin-bottom:10px; }
        .pro-kpi-value { font-size:26px; font-weight:800; letter-spacing:-.04em; }
        .pro-kpi-label { font-size:11px; color:rgba(255,255,255,.72); font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
        .pro-quick-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:0 0 18px; }
        .pro-action {
            border:none;
            cursor:pointer;
            border-radius:18px;
            padding:14px 12px;
            background:rgba(255,255,255,.82);
            color:#1a1a1a;
            box-shadow:0 12px 30px rgba(15,23,42,.08);
            font-weight:800;
            font-family:'Manrope',sans-serif;
            border:1px solid rgba(226,232,240,.85);
            transition:.2s ease;
        }
        .pro-action:hover { transform:translateY(-3px); box-shadow:0 18px 42px rgba(15,23,42,.12); }
        .input-group, .list-container, .device-table-wrap, .product-card {
            background:rgba(255,255,255,.82);
            backdrop-filter:blur(14px);
            border:1px solid rgba(226,232,240,.75);
            box-shadow:0 18px 45px rgba(15,23,42,.075);
        }
        .section-title {
            display:flex;
            align-items:center;
            gap:8px;
            color:#334155;
            margin-top:24px;
        }
        .section-title::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(200,169,110,.20); }
        .camera-btn, .add-btn { background:linear-gradient(135deg,#1a1a1a,#2d2d2d); color:var(--gold); }
        .save-btn { background:linear-gradient(135deg,var(--gold),#bfe900); }
        input, select, textarea { box-shadow:inset 0 0 0 1px rgba(226,232,240,.85); }
        .product-card { animation:fadeUp .45s forwards; }
        .qty-badge { box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
        @keyframes proPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.72);opacity:.55} }
        @media (min-width:900px) {
            #section-devices { display:none; }
            #section-devices.active { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
            #section-devices > .section-title, #section-devices > .input-group, #section-devices > #stock-list, #section-devices > .list-container, #section-devices > .export-buttons, #section-devices > .device-table-wrap { margin-top:0; }
            #section-devices > .section-title:nth-of-type(1), #section-devices > .input-group:nth-of-type(1), #section-devices > .section-title:nth-of-type(4), #section-devices > .input-group:nth-of-type(2), #section-devices > #device-registry-container { grid-column:1 / -1; }
            .device-search-grid { grid-template-columns:2fr 1fr; }
        }
        @media (max-width:980px) {
            .pro-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
            .pro-quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
        }
        @media (max-width:640px) {
            .container { padding:10px; padding-bottom:100px; }
            .header-bar { border-radius:22px; padding:12px; align-items:flex-start; gap:10px; }
            .nav-links-wrap { overflow-x:auto; max-width:100%; padding-bottom:2px; }
            .pro-hero { border-radius:24px; padding:18px; }
            .pro-hero-top { flex-direction:column; }
            .pro-hero h2 { font-size:23px; }
            .pro-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
            .pro-kpi { min-height:96px; padding:13px; }
            .pro-kpi-value { font-size:23px; }
            .tabs { position:fixed; left:10px; right:10px; bottom:10px; z-index:10001; border-radius:24px; box-shadow:0 18px 50px rgba(15,23,42,.22); }
            .tab { min-width:94px; font-size:10px; padding:11px 7px; }
        }



        /* ===== DEVICE HISTORY TAB + DESKTOP FIX ===== */
        .history-search-row { display:grid; grid-template-columns:1fr 150px; gap:10px; }
        .device-history-list { display:grid; gap:10px; }
        .device-history-row { background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:14px; box-shadow:0 8px 20px rgba(15,23,42,.045); }
        .device-history-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
        .device-history-action { font-weight:800; color:#1a1a1a; }
        .device-history-date { font-size:12px; color:#64748b; font-weight:800; }
        .device-history-meta { margin-top:8px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; font-size:12px; color:#475569; font-weight:700; line-height:1.45; }
        .device-history-links { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
        .device-history-links a { text-decoration:none; font-size:12px; font-weight:800; color:#075985; background:#e0f2fe; padding:7px 10px; border-radius:999px; }
        @media (min-width:1100px) {
            .container { max-width:1360px; }
            .pro-quick-actions { grid-template-columns:repeat(6,minmax(0,1fr)); }
            #section-history.active, #section-devicehistory.active { display:grid; grid-template-columns:360px minmax(0,1fr); gap:18px; align-items:start; }
            #section-history .section-title, #section-devicehistory .section-title { grid-column:1 / -1; margin-bottom:0; }
            #section-history .input-group, #section-devicehistory .input-group { position:sticky; top:150px; }
            #section-history .list-container, #section-devicehistory .list-container { min-height:360px; }
        }
        @media (max-width:640px) {
            .history-search-row { grid-template-columns:1fr; }
            .device-history-meta { grid-template-columns:1fr; }
        }



        /* ===== W-CETIN DESKTOP PRO v4.1 - stable desktop layout ===== */
        @media (min-width: 1180px) {
            html, body { overflow-x: hidden; }
            .container { max-width: 1680px; width: 100% !important; padding: 18px 24px 90px !important; }
            .header-sticky-wrapper { max-width: 100%; }
            .pro-hero { padding: 24px 28px !important; }
            /* .pro-kpi-grid used to be forced to 6 columns here with !important,
               but the panel holds 7 cards and pro-theme.css already sets 7 for
               desktop. The override won and pushed the last card onto a second
               row. Removed — the grid is defined once, in components.css. */
            .pro-quick-actions { grid-template-columns: repeat(6, minmax(0,1fr)) !important; }

            #section-devices.active { display: block; }
            .wh-desktop-layout { display: grid; grid-template-columns: 470px minmax(0, 1fr); gap: 24px; align-items: start; }
            .wh-sidebar, .wh-main-panel { min-width: 0; }
            .wh-sidebar { display: flex; flex-direction: column; gap: 14px; }
            .wh-sidebar .section-title { margin: 8px 0 0; }
            .wh-sidebar .input-group, .wh-sidebar .list-container, .wh-sidebar #stock-list { margin-bottom: 0; }
            #stock-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
            .product-card { width: 100%; max-width: none; margin-bottom: 0; }
            .stock-cat-title { margin: 10px 0 0; }
            .export-buttons { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 !important; }
            .export-buttons a { text-align: center; border-radius: 14px; padding: 12px 14px; font-weight:800; text-decoration: none; background: #eef6ff; color: #075985; border: 1px solid #dbeafe; }
            .export-buttons a:nth-child(2) { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

            .wh-main-panel { background: rgba(255,255,255,.78); border: 1px solid rgba(226,232,240,.85); border-radius: 22px; box-shadow: 0 18px 45px rgba(15,23,42,.075); padding: 16px; }
            .wh-main-panel > .section-title { margin: 0 0 14px; }
            .wh-main-panel .input-group { padding: 14px; border-radius: 18px; }
            .device-search-grid { grid-template-columns: minmax(320px, 1fr) 220px !important; align-items: center; }
            .device-table-wrap { border-radius: 18px !important; overflow: auto; max-height: 760px; }

            .wh-device-table { width: 100%; min-width: 980px; border-collapse: collapse; background: #fff; }
            .wh-device-table th { position: sticky; top: 0; z-index: 2; background: linear-gradient(135deg,#1a1a1a,#2d2d2d); color: #fff; padding: 13px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
            .wh-device-table td { padding: 12px; border-bottom: 1px solid #edf2f7; font-size: 13px; font-weight: 700; color: #1a1a1a; vertical-align: middle; }
            .wh-device-table tr:hover td { background: #f8fbff; }
            .wh-device-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
            .wh-icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; font-weight:800; }
            .wh-icon-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15,23,42,.08); }
            .wh-status-pill { display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; font-size: 11px; font-weight:800; white-space: nowrap; }
            .wh-status-pill.in_stock { background:#ecfdf5; color:#047857; border:1px solid #bbf7d0; }
            .wh-status-pill.in_vehicle { background:#e0f2fe; color:#075985; border:1px solid #bae6fd; }
            .wh-status-pill.installed { background:#eff6ff; color:#3f6212; border:1px solid #bfdbfe; }
            .wh-status-pill.defective { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }
            .wh-status-pill.returned { background:#fef3c7; color:#b45309; border:1px solid #fde68a; }
        }

        @media (max-width: 1179px) {
            .wh-desktop-layout { display: block; }
            .wh-main-panel { padding: 0; background: transparent; border: none; box-shadow: none; }
        }

    

        /* ===== HISTORY TAB VISIBILITY SAFETY ===== */
        .tabs .tab[onclick*="devicehistory"] { display:flex !important; align-items:center; justify-content:center; }
        #section-devicehistory.section.active { display:block; }
        @media (min-width:1100px) { #section-devicehistory.section.active { display:grid; } }

    
        .ai-scan-result { margin: 0 0 12px; padding: 14px; border-radius: 16px; background: #f8fafc; border: 1px solid #e2e8f0; color: #1a1a1a; font-size: 13px; line-height: 1.45; }
        .ai-scan-result.loading { background: #eff6ff; border-color: #bfdbfe; color: #3f6212; font-weight: 800; }
        .ai-scan-result.ok { background: #ecfdf5; border-color: #bbf7d0; }
        .ai-scan-result.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; font-weight: 800; }
        .ai-scan-grid { display:grid; grid-template-columns:1fr; gap:5px; }
        @media (min-width:700px) { .ai-scan-grid { grid-template-columns:1fr 1fr; } }
        .install-model-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:10px}
        .install-ident-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
        .install-ident-grid input{margin-bottom:0}
        .install-ai-btn{border:none;border-radius:14px;padding:12px 14px;font-weight:800;background:linear-gradient(135deg,#1a1a1a,#166534);color:#a3e635;cursor:pointer;white-space:nowrap}
        .install-lookup-note{font-size:12px;font-weight:800;color:#64748b;margin:-6px 0 10px 2px}
        @media(max-width:640px){.install-model-row{grid-template-columns:1fr}.install-ident-grid{grid-template-columns:1fr}.install-ai-btn{width:100%;}}
        .install-device-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:18px;padding:14px;margin:12px 0;box-shadow:0 6px 18px rgba(15,23,42,.05)}
        .install-device-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-weight:800;color:#1a1a1a}
        .install-device-remove{border:none;border-radius:12px;background:#fee2e2;color:#991b1b;font-weight:800;padding:9px 12px;cursor:pointer}
        .install-device-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 10px}
        .install-device-actions label{display:flex;align-items:center;gap:8px;padding:12px;border-radius:14px;background:#f8fafc;border:1px solid #e5e7eb;font-weight:800}
        .install-device-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
        .install-device-toolbar button{border:none;border-radius:14px;padding:12px;font-weight:800;cursor:pointer}
        .install-add-btn{background:#1a1a1a;color:#a3e635;width:100%;border:none;border-radius:14px;padding:14px;font-weight:800;margin:8px 0 12px;cursor:pointer}
        .install-kit-btn{background:#a3e635;color:#1a1a1a;width:100%;border:none;border-radius:14px;padding:14px;font-weight:800;margin:8px 0 12px;cursor:pointer}
        .signature-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:14px;margin-top:14px}
        .signature-title{font-size:12px;font-weight:800;color:#64748b;text-transform:uppercase;margin-bottom:10px}
        .signature-canvas{width:100%;height:170px;background:#fff;border:2px dashed #cbd5e1;border-radius:16px;touch-action:none;display:block}
        .signature-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
        .signature-actions button{border:none;border-radius:14px;padding:12px;font-weight:800;cursor:pointer}
        .signature-clear{background:#fee2e2;color:#991b1b}
        .signature-save{background:#dcfce7;color:#166534}
        @media(max-width:640px){.install-device-actions,.install-device-toolbar,.signature-actions{grid-template-columns:1fr}}


.header-logo{
    height:75px !important;
    width:auto !important;
    object-fit:contain;
}

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

        /* FIX: compact radio/checkbox buttons on mobile and desktop */
        #section-install input[type="radio"],
        #section-install input[type="checkbox"],
        .input-group input[type="radio"],
        .input-group input[type="checkbox"]{
            width:18px !important;
            min-width:18px;
            max-width:18px;
            height:18px;
            min-height:18px !important;
            margin:0;
            padding:0;
            flex:0 0 18px;
            appearance:auto;
            -webkit-appearance:auto;
            accent-color: var(--gold);
            box-shadow:none !important;
        }

        #section-install label:has(input[type="radio"]),
        #section-install label:has(input[type="checkbox"]){
            min-height:44px;
            line-height:1.25;
            word-break:normal;
            overflow-wrap:break-word;
        }

        @media (max-width: 640px){
            #section-install .input-group > div:first-child > div:last-child,
            #replacementBox > div:nth-of-type(2){
                grid-template-columns:1fr;
            }

            #section-install label:has(input[type="radio"]),
            #section-install label:has(input[type="checkbox"]){
                padding:10px 12px;
                font-size:13px;
                border-radius:12px;
                align-items:center;
            }

            #replacementBox{
                padding:12px;
            }
        }

    
        .object-dossier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
        .object-kpi{border-radius:18px;padding:14px;border:1px solid #e2e8f0;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.05)}
        .object-kpi b{display:block;font-size:24px;color:#1a1a1a}.object-kpi span{font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase}
        .object-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:14px;margin-bottom:12px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
        .object-card h3{margin:0 0 8px;font-size:16px}.object-line{font-size:13px;line-height:1.6;color:#334155;font-weight:700}.object-timeline{border-left:2px dashed #cbd5e1;margin-top:10px;padding-left:14px}.object-event{position:relative;margin:0 0 12px;padding:10px 12px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0}.object-event:before{content:'';position:absolute;left:-21px;top:14px;width:11px;height:11px;border-radius:50%;background:#a3e635;box-shadow:0 0 0 5px rgba(200,169,110,.25)}
        .object-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:10px}.object-gallery img{width:100%;height:100px;object-fit:cover;border-radius:14px;border:1px solid #e2e8f0;background:#f8fafc}