/* ══════════════════════════════════════════════════════ Bad Frog Quote System — Stylesheet Theme controlled by [data-theme] on ══════════════════════════════════════════════════════ */ /* ── Dark theme (default) ── */ [data-theme="dark"] { --bg: #0d0d0d; --bg-card: #141414; --bg-input: #1c1c1c; --bg-hover: #1e1e1e; --bg-stripe: #161616; --border: #2a2a2a; --border-lt: #1e1e1e; --text: #e0e0e0; --text-muted: #888; --text-dim: #555; --green: #4caf50; --green-dk: #388e3c; --green-dim: rgba(76,175,80,.12); --green-ring: rgba(76,175,80,.3); --red: #e53935; --red-dim: rgba(229,57,53,.12); --yellow: #f59e0b; --mark-bg: rgba(76,175,80,.22); --mark-text: #a5d6a7; --shadow: 0 4px 24px rgba(0,0,0,.55); --dd-shadow: 0 8px 32px rgba(0,0,0,.75); --nav-bg: #111111; --nav-border: #4caf50; --nav-text: #ccc; } /* ── Light theme ── */ [data-theme="light"] { --bg: #f0f2f5; --bg-card: #ffffff; --bg-input: #f5f6f8; --bg-hover: #ebedf0; --bg-stripe: #fafbfc; --border: #dde1e7; --border-lt: #edf0f4; --text: #111827; --text-muted: #6b7280; --text-dim: #9ca3af; --green: #1a7f24; --green-dk: #145c1b; --green-dim: rgba(26,127,36,.09); --green-ring: rgba(26,127,36,.25); --red: #c62828; --red-dim: rgba(198,40,40,.09); --yellow: #92400e; --mark-bg: rgba(26,127,36,.12); --mark-text: #145c1b; --shadow: 0 2px 12px rgba(0,0,0,.08); --dd-shadow: 0 8px 32px rgba(0,0,0,.14); --nav-bg: #1a1f2e; --nav-border: #1a7f24; --nav-text: #e5e7eb; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; transition: background .2s, color .2s; } mark { background: var(--mark-bg); color: var(--mark-text); border-radius: 2px; padding: 0 1px; } /* ── Navbar ── */ .navbar { position: sticky; top: 0; z-index: 200; background: var(--nav-bg); border-bottom: 2px solid var(--nav-border); height: 52px; display: flex; align-items: center; } .nav-inner { width: 100%; max-width: 1800px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-logo img { height: 32px; display: block; } .nav-tag { background: var(--green-dim); color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--green-ring); } .nav-links { display: flex; align-items: center; gap: 2px; } .nav-link { color: var(--nav-text); text-decoration: none; padding: 5px 12px; border-radius: 4px; font-size: 13px; font-weight: 500; transition: color .15s, background .15s; } .nav-link:hover { color: #fff; background: rgba(255,255,255,.1); } .nav-link.active { color: var(--green); background: var(--green-dim); } .nav-logout { color: rgba(255,255,255,.4) !important; } .nav-logout:hover { color: #fff !important; background: var(--red-dim) !important; } .theme-toggle { background: none; border: 1px solid rgba(255,255,255,.15); border-radius: 4px; padding: 4px 9px; cursor: pointer; font-size: 15px; line-height: 1; color: var(--nav-text); margin: 0 4px; transition: border-color .15s, background .15s; } .theme-toggle:hover { border-color: var(--green); background: var(--green-dim); } /* ── Flash ── */ .flash { padding: 11px 16px; border-radius: 4px; margin-bottom: 14px; font-size: 13px; } .flash-success { background: var(--green-dim); color: var(--green); border: 1px solid var(--green-ring); } .flash-error { background: var(--red-dim); color: var(--red); border: 1px solid rgba(229,57,53,.3); } /* ══════════════════════════════════════════════════════ Splash / New Quote Screen ══════════════════════════════════════════════════════ */ .splash-overlay { position: fixed; inset: 0; z-index: 500; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 24px; } .splash-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 48px 40px; width: 100%; max-width: 440px; box-shadow: var(--shadow); text-align: center; } .splash-logo { font-size: 52px; margin-bottom: 16px; } .splash-title { font-size: 24px; font-weight: 800; margin-bottom: 8px; } .splash-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 28px; } .splash-card .form-group { text-align: left; margin-bottom: 16px; } .splash-input { width: 100%; background: var(--bg-input); border: 2px solid var(--border); border-radius: 7px; padding: 12px 14px; color: var(--text); font-size: 16px; outline: none; font-family: inherit; transition: border-color .15s; } .splash-input:focus { border-color: var(--green); } .splash-input.input-error { border-color: var(--red); animation: shake .25s; } .splash-btn { padding: 13px; font-size: 15px; margin-top: 4px; } @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } /* ══════════════════════════════════════════════════════ POS Layout ══════════════════════════════════════════════════════ */ .pos-layout { display: grid; grid-template-columns: 1fr 340px; height: calc(100vh - 52px); overflow: hidden; } /* ── Left panel ── */ .pos-left { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--border); } .pos-search-wrap { padding: 12px 16px 0; background: var(--bg-card); border-bottom: 1px solid var(--border); position: relative; flex-shrink: 0; } /* Quote name bar */ .pos-quote-name-bar { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; } .pos-quote-name-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.2px; flex-shrink: 0; } .pos-quote-name-val { font-size: 14px; font-weight: 700; color: var(--text); flex: 1; } .pos-quote-name-edit { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--text-dim); padding: 2px 4px; border-radius: 3px; transition: color .15s; } .pos-quote-name-edit:hover { color: var(--green); } /* Search box */ .pos-search-box { display: flex; align-items: center; background: var(--bg-input); border: 2px solid var(--border); border-radius: 8px; padding: 0 12px; margin-bottom: 10px; transition: border-color .15s; } .pos-search-box:focus-within { border-color: var(--green); } .pos-search-icon { font-size: 15px; color: var(--text-dim); margin-right: 10px; flex-shrink: 0; } .pos-search-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 16px; font-weight: 500; padding: 11px 0; font-family: inherit; } .pos-search-input::placeholder { color: var(--text-dim); font-weight: 400; } .pos-search-clear { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 4px; display: flex; align-items: center; border-radius: 3px; flex-shrink: 0; transition: color .15s; } .pos-search-clear:hover { color: var(--text); } /* Supplier pills */ .pos-pills { display: flex; gap: 5px; flex-wrap: wrap; padding-bottom: 10px; } .pos-pill { background: none; border: 1px solid var(--border); border-radius: 20px; padding: 3px 11px; font-size: 11px; font-weight: 600; cursor: pointer; color: var(--text-muted); transition: all .15s; white-space: nowrap; } .pos-pill:hover { border-color: var(--green); color: var(--green); } .pos-pill.active { background: var(--green-dim); border-color: var(--green-ring); color: var(--green); } /* Dropdown */ .pos-dropdown { position: absolute; left: 16px; right: 16px; top: calc(100% - 1px); background: var(--bg-card); border: 1px solid var(--border); border-radius: 0 0 8px 8px; box-shadow: var(--dd-shadow); z-index: 300; overflow: hidden; } .pos-dd-item { display: grid; grid-template-columns: 90px 1fr 130px 60px; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border-lt); transition: background .1s; outline: none; } .pos-dd-item:last-child { border-bottom: none; } .pos-dd-item:hover, .pos-dd-item:focus { background: var(--bg-hover); } .pos-dd-style { font-size: 12px; font-weight: 700; color: var(--green); font-family: monospace; } .pos-dd-desc { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pos-dd-supplier { font-size: 11px; color: var(--text-dim); text-align: right; } .pos-dd-price { font-size: 12px; font-weight: 700; color: var(--text); text-align: right; } /* Results panel */ .pos-results { flex: 1; overflow-y: auto; background: var(--bg); } .pos-results-header { display: flex; align-items: center; justify-content: space-between; padding: 7px 16px; font-size: 12px; color: var(--text-muted); background: var(--bg-card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .pos-results-hint { color: var(--text-dim); font-size: 11px; } /* Results table */ .pos-table { width: 100%; border-collapse: collapse; font-size: 13px; } .pos-table thead th { padding: 8px 12px; text-align: left; font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; background: var(--bg-card); border-bottom: 1px solid var(--border); position: sticky; top: 36px; white-space: nowrap; } .pos-row { border-bottom: 1px solid var(--border-lt); cursor: pointer; transition: background .1s; } .pos-row:hover { background: var(--bg-hover); } .pos-row:nth-child(even) { background: var(--bg-stripe); } .pos-row:nth-child(even):hover { background: var(--bg-hover); } .pos-row td { padding: 8px 12px; vertical-align: middle; } .pos-col-style { font-family: monospace; font-size: 12px; font-weight: 700; color: var(--green); white-space: nowrap; } .pos-col-desc { color: var(--text); max-width: 240px; } .pos-col-supplier { white-space: nowrap; } .pos-col-sizes { color: var(--text-muted); font-size: 11px; white-space: nowrap; } .pos-col-price { text-align: right; color: var(--text); font-size: 12px; white-space: nowrap; } .pos-col-price.price-tbd { color: var(--text-dim); } .pos-add-btn { white-space: nowrap; } .btn-added { background: var(--green-dk) !important; color: #fff !important; } .pos-empty { padding: 48px; text-align: center; color: var(--text-dim); font-size: 14px; } .pos-start { padding: 60px 24px; text-align: center; } .pos-start-icon { font-size: 48px; margin-bottom: 14px; } .pos-start p { color: var(--text-muted); font-size: 14px; } .pos-start strong { color: var(--text); } /* ══════════════════════════════════════════════════════ Quote Panel (right) ══════════════════════════════════════════════════════ */ .pos-quote { display: flex; flex-direction: column; background: var(--bg-card); overflow: hidden; } .pos-quote-header { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .pos-quote-header h2 { font-size: 15px; font-weight: 700; } .pos-quote-count { font-size: 11px; color: var(--text-muted); } .pos-quote-items { flex: 1; overflow-y: auto; padding: 10px 12px; } .pos-quote-empty { color: var(--text-dim); font-size: 12px; text-align: center; margin-top: 20px; } /* Quote line */ .pos-qline { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin-bottom: 8px; } .pos-qline-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; position: relative; } .pos-qline-img { width: 38px; height: 38px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .pos-qline-img-placeholder { width: 38px; height: 38px; background: var(--bg-hover); border-radius: 4px; flex-shrink: 0; } .pos-qline-info { flex: 1; min-width: 0; } .pos-qline-style { display: block; font-size: 11px; font-weight: 700; color: var(--green); font-family: monospace; } .pos-qline-desc { display: block; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pos-qline-supplier { display: block; font-size: 10px; color: var(--text-dim); margin-top: 1px; } .pos-qline-remove { position: absolute; top: -2px; right: -2px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; line-height: 1; padding: 3px; border-radius: 3px; transition: color .15s; } .pos-qline-remove:hover { color: var(--red); } /* Inline controls — no size field, 4 columns */ .pos-qline-controls { display: grid; grid-template-columns: 80px 60px 1fr 80px; gap: 6px; align-items: end; } .pos-qline-field label { display: block; font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; } .pos-qline-field input { width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 5px 7px; font-size: 12px; color: var(--text); outline: none; font-family: inherit; transition: border-color .15s; } .pos-qline-field input:focus { border-color: var(--green); } .pos-qline-tier, .pos-qline-unit, .pos-qline-total { display: block; font-size: 12px; font-weight: 600; padding: 5px 0; } .pos-qline-tier { color: var(--text-muted); text-align: center; } .pos-qline-unit { color: var(--text-muted); text-align: right; } .pos-qline-total { color: var(--green); text-align: right; font-size: 13px; } /* Footer */ .pos-quote-footer { border-top: 1px solid var(--border); flex-shrink: 0; overflow-y: auto; max-height: 52vh; } .pos-quote-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 700; } .pos-total-val { font-size: 20px; color: var(--green); } .pos-quote-form { padding: 12px 16px 16px; } .pos-quote-form .form-group { margin-bottom: 9px; } .pos-quote-form label { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-bottom: 3px; display: block; } .pos-quote-form input, .pos-quote-form textarea { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: 7px 10px; color: var(--text); font-size: 12px; outline: none; font-family: inherit; resize: vertical; transition: border-color .15s; } .pos-quote-form input:focus, .pos-quote-form textarea:focus { border-color: var(--green); } .pos-quote-form input::placeholder, .pos-quote-form textarea::placeholder { color: var(--text-dim); } .pos-quote-actions { display: flex; gap: 8px; margin-top: 12px; } .pos-quote-actions .btn { flex: 1; } /* ══════════════════════════════════════════════════════ Buttons ══════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, opacity .15s; } .btn-primary { background: var(--green); color: #fff; } .btn-primary:hover { background: var(--green-dk); } .btn-secondary { background: var(--bg-hover); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg-input); } .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--bg-hover); color: var(--text); } .btn-danger { background: var(--red-dim); color: var(--red); border: 1px solid rgba(229,57,53,.25); } .btn-danger:hover { background: rgba(229,57,53,.18); } .btn-full { width: 100%; } .btn-sm { padding: 5px 10px; font-size: 12px; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ══════════════════════════════════════════════════════ Login ══════════════════════════════════════════════════════ */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-wrap { width: 100%; max-width: 400px; padding: 24px; } .login-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 40px 32px; box-shadow: var(--shadow); } .login-logo { width: 180px; margin: 0 auto 20px; display: block; } .login-title { text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 4px; } .login-sub { text-align: center; color: var(--text-muted); font-size: 12px; margin-bottom: 28px; } .login-form .form-group { margin-bottom: 14px; } /* ══════════════════════════════════════════════════════ Forms (shared) ══════════════════════════════════════════════════════ */ .form-group { display: flex; flex-direction: column; gap: 5px; } .form-group label { font-size: 12px; color: var(--text-muted); font-weight: 500; } .form-group input, .form-group textarea, .form-group select { background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; padding: 9px 11px; color: var(--text); font-size: 13px; outline: none; font-family: inherit; transition: border-color .15s; width: 100%; } .form-group input:focus, .form-group textarea:focus { border-color: var(--green); } .form-group textarea { resize: vertical; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .label-optional { font-size: 11px; color: var(--text-dim); font-weight: 400; } .field-hint { font-size: 11px; color: var(--text-dim); margin-top: 3px; } .req { color: var(--red); } /* ══════════════════════════════════════════════════════ Page layout ══════════════════════════════════════════════════════ */ .page-wrap { max-width: 1400px; margin: 0 auto; padding: 24px; } .page-wrap-narrow { max-width: 820px; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 16px; } .page-title { font-size: 22px; font-weight: 700; margin-top: 4px; } .page-actions { display: flex; gap: 8px; flex-shrink: 0; } .back-link { font-size: 12px; color: var(--text-muted); text-decoration: none; display: block; margin-bottom: 2px; } .back-link:hover { color: var(--text); } .mt-16 { margin-top: 16px; } .mt-12 { margin-top: 12px; } .text-right { text-align: right; } .text-center { text-align: center; } .text-muted { color: var(--text-muted); } .mono { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12px; } .green { color: var(--green); } .bold { font-weight: 700; } .req { color: var(--red); } /* ── Cards ── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .card-highlight { border-color: var(--green-ring); } .card-internal { border-color: rgba(245,158,11,.3); } .card-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; } .card-body { padding: 16px; } /* ── Tables ── */ .table-wrap { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; } .data-table th { padding: 9px 12px; text-align: left; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-lt); font-size: 13px; vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table tfoot td { padding: 12px; border-top: 2px solid var(--border); font-size: 14px; } .data-table tr:hover td { background: var(--bg-hover); } .table-link { color: var(--green); text-decoration: none; font-weight: 600; } .table-link:hover { text-decoration: underline; } .table-count { font-size: 12px; color: var(--text-muted); padding: 10px 12px; } /* ── Search bar ── */ .search-bar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .search-input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; padding: 8px 12px; color: var(--text); font-size: 13px; outline: none; transition: border-color .15s; } .search-input:focus { border-color: var(--green); } .search-input::placeholder { color: var(--text-dim); } /* ── Status badges ── */ .status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } .status-draft { background: rgba(136,136,136,.12); color: var(--text-muted); } .status-sent { background: var(--green-dim); color: var(--green); } /* ── Supplier tag ── */ .supplier-tag { display: inline-block; font-size: 10px; background: var(--bg-input); color: var(--text-muted); padding: 2px 7px; border-radius: 20px; border: 1px solid var(--border); } /* ══════════════════════════════════════════════════════ Quote view page ══════════════════════════════════════════════════════ */ .quote-view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .quote-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; } .meta-text { font-size: 12px; color: var(--text-muted); } .detail-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-lt); } .detail-row:last-child { border-bottom: none; } .detail-label { font-size: 12px; color: var(--text-muted); } .detail-val { font-size: 13px; font-weight: 500; } .big-total { font-size: 32px; font-weight: 800; color: var(--green); } .big-total-currency { font-size: 16px; color: var(--text-muted); font-weight: 500; } .total-note { font-size: 12px; color: var(--text-dim); margin-top: 6px; } .internal-badge { background: rgba(245,158,11,.12); color: var(--yellow); font-size: 10px; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .5px; } .notes-text { font-size: 13px; color: var(--text-muted); line-height: 1.6; } .quote-name-badge { font-size: 14px; font-weight: 500; color: var(--text-muted); margin-left: 10px; vertical-align: middle; } /* ══════════════════════════════════════════════════════ Admin ══════════════════════════════════════════════════════ */ .thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 3px; } .thumb-placeholder { width: 36px; height: 36px; background: var(--bg-input); border-radius: 3px; } .desc-cell { max-width: 220px; } .row-inactive td { opacity: .4; } .toggle-active-btn { width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer; font-size: 12px; font-weight: 700; } .toggle-active-btn.active { background: var(--green-dim); color: var(--green); } .toggle-active-btn.inactive { background: var(--red-dim); color: var(--red); } .supplier-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .pill { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-decoration: none; color: var(--text-muted); border: 1px solid var(--border); transition: all .15s; cursor: pointer; background: none; } .pill:hover { color: var(--text); border-color: var(--text-dim); } .pill.active { background: var(--green-dim); color: var(--green); border-color: var(--green-ring); } .admin-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-group-full { grid-column: 1 / -1; } .form-actions { display: flex; gap: 8px; justify-content: flex-end; } .pricing-split { display: flex; flex-direction: column; gap: 20px; } .pricing-section-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: 10px; } .form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .form-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .input-prefix-wrap { position: relative; } .input-prefix { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 13px; pointer-events: none; } .input-prefix-wrap input { padding-left: 22px; } .current-image { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; } .current-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 5px; } .checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-muted); } .checkbox-label input { width: auto; } .file-input { background: transparent !important; border: none !important; padding: 0 !important; } /* ── Empty state ── */ .empty-state { padding: 40px; text-align: center; color: var(--text-dim); font-size: 14px; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }