/* ======================================== LINEAR-STYLE THEME LAYER Scoped under body.theme-linear Reversible by removing class from ======================================== */ /* ================= TOKENS ================= */ body.theme-linear { /* Backgrounds - cleaner, lighter darks */ --bg: #0d0d0d; --panel: #1a1a1a; --panel2: #1f1f1f; /* Borders - more visible, neutral */ --border: rgba(255,255,255,.09); /* Text - pure white, less blue tint */ --text: #ffffff; --muted: rgba(255,255,255,.55); /* Accents - subtle purple */ --accent: #8b7de8; --good: #3dd68c; --warn: #ffa500; --bad: #ff6b6b; /* Shadows - minimal, flat */ --shadow: 0 1px 3px rgba(0,0,0,.12); /* Radius - tighter */ --radius: 8px; --radius2: 12px; /* Remove decorative gradients */ background: var(--bg); } /* ================= SHELL (PHASE 1) ================= */ body.theme-linear .topbar { background: rgba(26, 26, 26, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } body.theme-linear .logo { background: linear-gradient(135deg, rgba(139,125,232,.85), rgba(61,214,140,.65)); box-shadow: 0 2px 8px rgba(0,0,0,.2); border-radius: 10px; } body.theme-linear .sidebar { background: rgba(26, 26, 26, .85); backdrop-filter: blur(8px); border-right: 1px solid var(--border); } body.theme-linear .nav-link { background: transparent; border: 1px solid transparent; border-radius: 8px; } body.theme-linear .nav-link:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); } body.theme-linear .nav-link.active { background: rgba(139,125,232,.15); border-color: rgba(139,125,232,.3); } /* ================= TABLES (PHASE 2) ================= */ body.theme-linear .table-wrap { border-radius: 8px; border: 1px solid var(--border); background: rgba(26, 26, 26, .8); } body.theme-linear table { border-collapse: collapse; } body.theme-linear th { font-weight: 600; color: var(--muted); border-bottom: 1px solid rgba(255,255,255,.08); } body.theme-linear td { border-bottom: 1px solid rgba(255,255,255,.05); } body.theme-linear tr:hover td { background: rgba(255,255,255,.03); } /* ================= FORMS + MODALS (PHASE 3) ================= */ body.theme-linear .btn { background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 8px; } body.theme-linear .btn:hover { background: rgba(255,255,255,.08); } body.theme-linear .btn-primary { background: rgba(139,125,232,.18); border-color: rgba(139,125,232,.35); } body.theme-linear .btn-primary:hover { background: rgba(139,125,232,.25); } body.theme-linear .btn-danger { background: rgba(255,107,107,.15); border-color: rgba(255,107,107,.35); } body.theme-linear .btn-danger:hover { background: rgba(255,107,107,.22); } body.theme-linear .input, body.theme-linear select { background: rgba(13, 13, 13, .6); border: 1px solid var(--border); border-radius: 8px; } body.theme-linear .input:focus, body.theme-linear select:focus { border-color: rgba(139,125,232,.5); box-shadow: 0 0 0 3px rgba(139,125,232,.12); } body.theme-linear .modal-backdrop { background: rgba(0,0,0,.65); } body.theme-linear .modal { background: rgba(26, 26, 26, .98); backdrop-filter: blur(12px); border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 4px 24px rgba(0,0,0,.3); } body.theme-linear .modal-header { background: rgba(26, 26, 26, .98); border-bottom: 1px solid rgba(255,255,255,.08); } body.theme-linear .modal-footer { background: rgba(26, 26, 26, .98); border-top: 1px solid rgba(255,255,255,.08); } /* ================= CARDS + MISC (PHASE 4) ================= */ body.theme-linear .card { background: rgba(26, 26, 26, .8); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12); } body.theme-linear .toast { background: rgba(26, 26, 26, .95); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.25); } body.theme-linear .pill { background: rgba(255,255,255,.06); border: 1px solid var(--border); } body.theme-linear .pill.good { border-color: rgba(61,214,140,.3); color: rgba(61,214,140,.95); } body.theme-linear .pill.bad { border-color: rgba(255,107,107,.3); color: rgba(255,107,107,.95); } body.theme-linear .pill.warn { border-color: rgba(255,165,0,.3); color: rgba(255,165,0,.95); } /* ================= BARCODE SCANNER ================= */ body.theme-linear .scan-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); } body.theme-linear .scan-btn:hover { background: rgba(255,255,255,.12); } /* ================= SIDEBAR FOOTER ================= */ body.theme-linear .sidebar-footer { color: var(--muted); } body.theme-linear .sidebar-footer b { color: var(--text); } /* Inventory font-size micro bump (+0.5px) */ body.theme-linear .page-inventory thead th { font-size: 12.5px; } body.theme-linear .page-inventory tbody td { font-size: 13.5px; } /* =========================== Header logo clipping fix (theme-linear) =========================== */ body.theme-linear header .brand{ padding-left: 10px; padding-top: 6px; overflow: visible; } body.theme-linear header .brand .logo-img{ margin-left: 2px; margin-top: 2px; } /* =========================== MOBILE SIDEBAR TOGGLE (theme-linear) =========================== */ body.theme-linear .nav-toggle{ display:none; } body.theme-linear .backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); z-index: 40; } @media (max-width: 900px){ body.theme-linear .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width: 40px; height: var(--control-h, 36px); } body.theme-linear #sidebar.sidebar{ position: fixed; top: 64px; left: 0; bottom: 0; width: min(86vw, 320px); z-index: 50; transform: translateX(-110%); transition: transform .18s ease; } body.theme-linear.sidebar-open #sidebar.sidebar{ transform: translateX(0); } body.theme-linear .layout{ grid-template-columns: 1fr; } } /* Mobile nav button + overlay (added for app.js mobile nav) */ .mobile-nav-btn{ position: fixed; left: 12px; top: 12px; z-index: 1002; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: inherit; display: none; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); } .mobile-nav-overlay{ position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.55); display: none; } @media (max-width: 900px){ .mobile-nav-btn{ display:flex; } body.nav-open .mobile-nav-overlay{ display:block; } }