/* style/pages/inventory.css — Inventory Control page */

html, body { background: var(--bg) !important; animation: none !important; }

:root {
  --nav-h:  56px;
  --bot-h:  64px;
}

/* ── Top bar ─────────────────────────────────────── */
.topbar { position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);background:rgba(13,12,10,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:16px; }
.topbar-logo  { display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none; }
.topbar-title { font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text3);border-left:1px solid var(--border2);padding-left:16px;margin-left:4px; }
.topbar-right { margin-left:auto;display:flex;align-items:center;gap:10px; }
.btn-sm { display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:7px;font-size:12px;font-family:var(--mono);letter-spacing:0.04em;cursor:pointer;transition:var(--trans); }
.btn-gold   { background:var(--gold);color:#0d0c0a;border:none; }
.btn-gold:hover { background:var(--gold2); }
.btn-ghost  { background:transparent;color:var(--text2);border:1px solid var(--border2); }
.btn-ghost:hover { border-color:var(--gold-dim);color:var(--gold); }
.btn-danger { background:transparent;color:var(--red);border:1px solid var(--red-dim); }
.btn-danger:hover { background:var(--red-bg); }

.page { padding-top:calc(var(--nav-h) + 20px);padding-bottom:calc(var(--bot-h) + 20px);max-width:1280px;margin:0 auto;padding-left:20px;padding-right:20px; }

/* Summary cards */
.summary-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:24px; }
@media(max-width:900px) { .summary-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px) { .summary-grid { grid-template-columns:repeat(2,1fr); } }
.summary-card { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;transition:var(--trans);position:relative;overflow:hidden; }
.summary-card::before { content:'';position:absolute;inset:0;opacity:0;transition:opacity .2s; }
.summary-card:hover { border-color:var(--border2);transform:translateY(-1px); }
.summary-card.active { border-color:var(--gold-dim); }
.summary-card.active::before { background:var(--gold-bg);opacity:1; }
.sc-label { font-family:var(--mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;position:relative; }
.sc-num   { font-family:var(--mono);font-size:28px;font-weight:500;line-height:1;position:relative; }
.sc-sub   { font-size:11px;color:var(--text3);margin-top:4px;position:relative; }
.sc-num.gold  { color:var(--gold); }
.sc-num.green { color:var(--green); }
.sc-num.red   { color:var(--red); }
.sc-num.blue  { color:var(--blue); }
.sc-num.amber { color:var(--amber); }

/* Toolbar */
.toolbar { display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap; }
.search-wrap { flex:1;min-width:200px;position:relative; }
.search-wrap svg { position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none; }
.search-input { width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:13px;padding:9px 12px 9px 36px;outline:none;transition:border-color .15s; }
.search-input:focus { border-color:var(--gold-dim); }
.search-input::placeholder { color:var(--text3); }
.filter-select { background:var(--surface);border:1px solid var(--border2);border-radius:8px;color:var(--text2);font-size:12px;padding:9px 28px 9px 12px;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235c5748' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer;transition:var(--trans); }
.filter-select:focus { border-color:var(--gold-dim);outline:none; }
.filter-select option { background:var(--bg3); }
.view-toggle { display:flex;border:1px solid var(--border2);border-radius:8px;overflow:hidden; }
.vbtn { background:transparent;border:none;color:var(--text3);padding:8px 10px;font-size:14px;transition:var(--trans); }
.vbtn.active,.vbtn:hover { background:var(--surface);color:var(--gold); }
.export-btn { display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:8px;border:1px solid var(--border2);background:transparent;color:var(--text2);font-size:12px;font-family:var(--mono);letter-spacing:0.04em;transition:var(--trans); }
.export-btn:hover { border-color:var(--green-dim);color:var(--green); }

/* Table */
.table-wrap { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden; }
.inv-table  { width:100%;border-collapse:collapse; }
.inv-table thead { background:var(--bg3); }
.inv-table th { font-family:var(--mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text3);padding:12px 14px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border);cursor:pointer;user-select:none;transition:color .15s; }
.inv-table th:hover { color:var(--text2); }
.inv-table th.sorted { color:var(--gold); }
.sort-arrow { margin-left:4px;opacity:.6; }
.inv-table td { padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle; }
.inv-table tr:last-child td { border-bottom:none; }
.inv-table tr { transition:background .12s;cursor:pointer; }
.inv-table tr:hover td { background:var(--surface); }

.stone-cell    { display:flex;align-items:center;gap:10px; }
.stone-icon    { width:38px;height:38px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0; }
.stone-name    { font-family:var(--serif);font-size:16px;color:var(--text); }
.stone-id-text { font-family:var(--mono);font-size:9px;color:var(--text3);margin-top:1px; }
.stone-species { font-size:11px;color:var(--text3); }

.badge           { display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9px;letter-spacing:0.07em;text-transform:uppercase;padding:3px 8px;border-radius:4px;white-space:nowrap;font-weight:500; }
.badge-listed    { background:var(--green-bg);color:var(--green);border:1px solid var(--green-dim); }
.badge-private   { background:var(--amber-bg);color:var(--amber);border:1px solid rgba(201,132,58,.3); }
.badge-sold      { background:var(--bg3);color:var(--text3);border:1px solid var(--border2); }
.badge-reserved  { background:var(--blue-bg);color:var(--blue);border:1px solid rgba(74,127,193,.3); }
.badge-rough-inv { background:rgba(80,50,10,.5);color:var(--gold);border:1px solid var(--gold-dim); }
.badge-cut-inv   { background:var(--blue-bg);color:var(--blue);border:1px solid rgba(74,127,193,.3); }
.badge-studded-inv { background:var(--purple-bg);color:var(--purple);border:1px solid rgba(138,74,201,.3); }
.badge-cert      { background:var(--green-bg);color:var(--green);border:1px solid var(--green-dim); }
.badge-nocert    { background:var(--red-bg);color:var(--red);border:1px solid var(--red-dim); }

.price-cell   { font-family:var(--mono);font-size:13px;color:var(--gold);white-space:nowrap; }
.price-hidden { color:var(--text3);font-size:11px; }
.weight-cell  { font-family:var(--mono);font-size:12px;color:var(--text2); }
.views-cell   { font-family:var(--mono);font-size:12px;color:var(--text3); }
.row-actions  { display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .15s; }
.inv-table tr:hover .row-actions { opacity:1; }
.act-btn { width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;transition:var(--trans);background:transparent;border:1px solid transparent;color:var(--text3); }
.act-btn:hover.edit   { background:var(--surface2);border-color:var(--gold-dim);color:var(--gold); }
.act-btn:hover.view   { background:var(--surface2);border-color:var(--blue);color:var(--blue); }
.act-btn:hover.delete { background:var(--red-bg);border-color:var(--red-dim);color:var(--red); }
.act-btn:hover.toggle { background:var(--green-bg);border-color:var(--green-dim);color:var(--green); }

/* Grid view */
.inv-grid  { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px; }
.grid-card { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:var(--trans);animation:gcIn .3s ease both; }
@keyframes gcIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.grid-card:hover { border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.4); }
.gc-img    { aspect-ratio:4/3;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;border-bottom:1px solid var(--border); }
.gc-badges { position:absolute;top:10px;left:10px;display:flex;gap:5px;flex-wrap:wrap; }
.gc-status { position:absolute;top:10px;right:10px; }
.gc-body   { padding:14px; }
.gc-name   { font-family:var(--serif);font-size:18px;margin-bottom:2px; }
.gc-meta   { font-family:var(--mono);font-size:10px;color:var(--text3);margin-bottom:10px; }
.gc-chips  { display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px; }
.gc-chip   { font-family:var(--mono);font-size:9px;color:var(--text2);background:var(--bg3);border:1px solid var(--border);padding:2px 7px;border-radius:3px; }
.gc-foot   { display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border); }
.gc-price  { font-family:var(--mono);font-size:14px;color:var(--gold); }
.gc-actions { display:flex;gap:4px; }

/* Empty, alerts, pagination */
.empty-state { text-align:center;padding:80px 20px; }
.empty-icon  { font-size:48px;margin-bottom:16px;opacity:.3; }
.empty-title { font-family:var(--serif);font-size:28px;font-weight:300;color:var(--text2);margin-bottom:8px; }
.empty-sub   { color:var(--text3);font-size:14px;margin-bottom:24px; }
.alerts-wrap { display:flex;flex-direction:column;gap:8px;margin-bottom:16px; }
.alert-bar   { display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;font-size:13px;animation:slideIn .3s ease; }
@keyframes slideIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }
.alert-bar.warning { background:var(--amber-bg);border:1px solid rgba(201,132,58,.3);color:var(--amber); }
.alert-bar.info    { background:var(--blue-bg);border:1px solid rgba(74,127,193,.3);color:var(--blue); }
.alert-bar .alert-icon    { font-size:14px;flex-shrink:0; }
.alert-bar .alert-text    { flex:1; }
.alert-bar .alert-dismiss { background:none;border:none;color:inherit;opacity:.5;cursor:pointer;font-size:14px;padding:0 4px; }
.alert-bar .alert-dismiss:hover { opacity:1; }
.pagination { display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-top:1px solid var(--border);font-family:var(--mono);font-size:11px;color:var(--text3); }
.page-btns  { display:flex;gap:4px; }
.page-btn   { width:28px;height:28px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--text3);font-size:11px;transition:var(--trans);display:flex;align-items:center;justify-content:center;font-family:var(--mono); }
.page-btn:hover,.page-btn.active { border-color:var(--gold-dim);color:var(--gold);background:var(--gold-bg); }
.page-btn:disabled { opacity:.3;cursor:not-allowed; }

/* Modal */
.overlay  { position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);z-index:300;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s; }
@media(min-width:700px) { .overlay { align-items:center; } }
.overlay.open { opacity:1;pointer-events:all; }
.modal        { background:var(--bg2);border:1px solid var(--border2);border-radius:20px 20px 0 0;width:100%;max-width:680px;max-height:92vh;overflow-y:auto;transform:translateY(40px);transition:transform .3s cubic-bezier(.32,.72,0,1);scrollbar-width:thin; }
@media(min-width:700px) { .modal { border-radius:16px;transform:scale(.96) translateY(0); } }
.overlay.open .modal { transform:translateY(0); }
@media(min-width:700px) { .overlay.open .modal { transform:scale(1) translateY(0); } }
.modal-handle  { width:36px;height:4px;background:var(--border2);border-radius:2px;margin:12px auto 0; }
@media(min-width:700px) { .modal-handle { display:none; } }
.modal-header  { display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg2);z-index:10; }
.modal-title   { font-family:var(--serif);font-size:22px;font-weight:400; }
.modal-close   { width:30px;height:30px;border-radius:50%;background:var(--surface);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:14px;transition:var(--trans); }
.modal-close:hover { background:var(--surface2);color:var(--text); }
.modal-body    { padding:20px; }
.modal-footer  { padding:16px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;bottom:0;background:var(--bg2); }

/* Inventory-specific form */
.fg { display:flex;flex-direction:column;gap:5px; }
.fg.full { grid-column:1/-1; }
.fl { font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3); }
.fl .req { color:var(--gold);margin-left:2px; }
.fi,.fs,.ft { background:var(--surface);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:13px;padding:10px 12px;outline:none;transition:border-color .15s;width:100%;appearance:none;-webkit-appearance:none; }
.fs { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235c5748' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-color:var(--surface);padding-right:28px;cursor:pointer; }
.ft { resize:vertical;min-height:80px;line-height:1.5; }
.fi:focus,.fs:focus,.ft:focus { border-color:var(--gold-dim); }
.fi::placeholder,.ft::placeholder { color:var(--text3); }
.fs option { background:var(--bg3); }
.fi.error,.fs.error { border-color:var(--red); }
.field-hint  { font-size:11px;color:var(--text3);margin-top:2px; }
.field-error { font-size:11px;color:var(--red);margin-top:2px;display:none; }
.fi.error + .field-error,.fs.error + .field-error { display:block; }

.stone-id-display { background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between; }
.stone-id-val  { font-family:var(--mono);font-size:12px;color:var(--gold); }
.stone-id-lock { font-size:11px;color:var(--text3);display:flex;align-items:center;gap:4px; }

.visibility-row  { display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border2);border-radius:8px;padding:12px 14px; }
.vis-info  { flex:1; }
.vis-label { font-size:13px;color:var(--text);font-weight:500; }
.vis-sub   { font-size:11px;color:var(--text3);margin-top:2px; }
.toggle-switch  { position:relative;width:44px;height:24px;flex-shrink:0; }
.toggle-switch input { opacity:0;width:0;height:0;position:absolute; }
.toggle-track   { position:absolute;inset:0;border-radius:12px;background:var(--border2);transition:background .2s;cursor:pointer; }
.toggle-switch input:checked ~ .toggle-track { background:var(--gold); }
.toggle-thumb   { position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#0d0c0a;transition:transform .2s;pointer-events:none; }
.toggle-switch input:checked ~ .toggle-track ~ .toggle-thumb { transform:translateX(20px); }

.cert-section  { background:var(--surface);border:1px solid var(--border2);border-radius:8px;padding:14px; }
.cert-locked   { background:var(--green-bg);border-color:var(--green-dim); }
.cert-locked .cert-icon { color:var(--green); }
.cert-header   { display:flex;align-items:center;gap:10px;margin-bottom:10px; }
.cert-icon     { font-size:16px; }
.cert-title    { font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3); }
.cert-note     { font-size:11px;color:var(--text3);margin-top:8px;padding-top:8px;border-top:1px solid var(--border); }

.submit-btn  { display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:8px;font-size:14px;font-family:var(--mono);letter-spacing:0.06em;cursor:pointer;transition:var(--trans);border:none; }
.submit-btn.gold  { background:var(--gold);color:#0d0c0a; }
.submit-btn.gold:hover { background:var(--gold2); }
.submit-btn.green { background:var(--green);color:#fff; }
.submit-btn.green:hover { opacity:.85; }

.detail-hero     { background:var(--bg3);border-bottom:1px solid var(--border);padding:30px 20px;text-align:center; }
.detail-gem-icon { font-size:60px;margin-bottom:12px; }
.detail-name     { font-family:var(--serif);font-size:30px;font-weight:300;margin-bottom:6px; }
.detail-id-text  { font-family:var(--mono);font-size:11px;color:var(--text3); }
.detail-badges   { display:flex;justify-content:center;gap:6px;margin-top:10px;flex-wrap:wrap; }
.detail-grid     { display:grid;grid-template-columns:1fr 1fr;gap:0; }
.detail-field    { padding:14px 20px;border-bottom:1px solid var(--border); }
.detail-field:nth-child(odd) { border-right:1px solid var(--border); }
.detail-label    { font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text3);margin-bottom:4px; }
.detail-value    { font-size:13px;color:var(--text); }
.detail-value.mono { font-family:var(--mono);color:var(--gold); }

.progress-bar  { height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:6px; }
.progress-fill { height:100%;border-radius:2px;background:var(--gold);transition:width .5s ease; }
.progress-fill.green { background:var(--green); }
.progress-fill.red   { background:var(--red); }

/* Bottom nav */
.bottom-nav { position:fixed;bottom:0;left:0;right:0;z-index:200;height:var(--bot-h);background:rgba(13,12,10,.97);backdrop-filter:blur(14px);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 8px;padding-bottom:env(safe-area-inset-bottom); }
.bnav-item  { display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;flex:1;color:var(--text3);font-family:var(--mono);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;transition:var(--trans);cursor:pointer;text-decoration:none; }
.bnav-item:hover,.bnav-item.active { color:var(--gold); }
.bnav-item.active svg { stroke:var(--gold);filter:drop-shadow(0 0 5px rgba(201,168,76,.5)); }
.bnav-item svg { transition:var(--trans); }

.toast-wrap { position:fixed;bottom:calc(var(--bot-h) + 12px);right:16px;z-index:500;display:flex;flex-direction:column;gap:6px;pointer-events:none; }
@media(min-width:769px) { .toast-wrap { bottom:20px; } }

@media(max-width:768px) { .hide-mobile { display:none !important; } .toolbar { gap:8px; } .topbar-title { display:none; } }
@media(min-width:769px) { .hide-desktop { display:none !important; } .bottom-nav { display:none; } }