/* ========================================================
   StockTake — Clean Sortly-Grade Design System
   Every class has a purpose. Zero dead CSS.
   ======================================================== */

:root {
    --black: #1a1a1a;
    --white: #ffffff;
    --bg: #f8f9fb;
    --border: #e5e7eb;
    --muted: #9ca3af;
    --red: #ea5455;
    --red-light: #fef2f2;
    --green: #22c55e;
    --hairline: 1px solid var(--border);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); display:flex; justify-content:center; }

/* === App Shell === */
#app { width:100%; max-width:430px; background:var(--white); min-height:100vh; position:relative; overflow-x:hidden; }

/* === Typography === */
.t-title { font-size:1.5rem; font-weight:800; color:var(--black); letter-spacing:-0.02em; }
.t-body { font-size:0.95rem; font-weight:600; color:var(--black); }
.t-caption { font-size:0.75rem; font-weight:600; color:var(--muted); }
.t-micro { font-size:0.65rem; font-weight:700; color:var(--muted); letter-spacing:0.03em; }
.t-value { font-size:1.05rem; font-weight:700; color:var(--black); }

/* === Sticky Header === */
.header { position:sticky; top:0; z-index:100; background:var(--white); padding:20px 20px 16px; border-bottom:var(--hairline); }
.header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.header-icons { display:flex; align-items:center; gap:18px; color:var(--black); font-size:1.15rem; }
.header-icons i { cursor:pointer; }
.header-back { display:flex; align-items:center; gap:10px; cursor:pointer; }

/* === Search === */
.search-bar { display:flex; align-items:center; gap:12px; background:#f1f5f9; border-radius:10px; padding:10px 14px; margin-top:12px; }
.search-bar input { border:none; background:none; width:100%; font-size:0.9rem; font-weight:500; outline:none; color:var(--black); }

/* === Summary Stats === */
.stats-row { display:flex; gap:8px; margin-top:14px; }
.stat-box { flex:1; }
.stat-box .t-micro { margin-bottom:4px; }

/* === Item List === */
.list-section { padding-bottom:140px; }
.sort-bar { padding:12px 20px; display:flex; justify-content:space-between; align-items:center; border-bottom:var(--hairline); }

/* === Card === */
.card { padding:14px 20px; border-bottom:var(--hairline); display:flex; align-items:center; gap:14px; cursor:pointer; background:var(--white); }
.card:active { background:#f8fafc; }
.thumb { width:56px; height:56px; border-radius:8px; background:#f1f5f9; background-size:cover; background-position:center; flex-shrink:0; }
.thumb-icon { display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:var(--muted); }
.card-body { flex:1; min-width:0; }
.card-name { font-weight:700; font-size:0.95rem; color:var(--black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-meta { display:flex; align-items:center; gap:6px; margin-top:3px; }
.card-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--muted); }
.card-chips { display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; }
.chip { background:#f1f5f9; color:#475569; font-size:0.6rem; font-weight:600; padding:3px 8px; border-radius:10px; }
.low-stock { color:var(--red); font-weight:800; }
.card-dots { padding:8px; margin:-8px; cursor:pointer; }

/* === Bottom Nav === */
.bottom-nav { position:fixed; bottom:0; width:100%; max-width:430px; height:68px; background:var(--white); border-top:var(--hairline); display:flex; justify-content:space-around; align-items:center; z-index:100; }
.nav-tab { display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); cursor:pointer; font-size:0.6rem; font-weight:600; padding:4px 12px; position:relative; }
.nav-tab.active { color:var(--red); }
.nav-tab i { font-size:1.25rem; }
.nav-badge { position:absolute; top:-2px; right:2px; background:var(--red); color:white; font-size:0.5rem; font-weight:800; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 4px; }

/* === FAB === */
.fab { position:fixed; bottom:84px; right:24px; width:52px; height:52px; background:transparent; color:var(--red); display:grid; place-items:center; font-size:2.2rem; z-index:100; cursor:pointer; text-shadow:0 3px 10px rgba(0,0,0,0.1); }
.fab i { margin:0; padding:0; display:block; transform:translateY(1px); }

/* === Bottom Sheet === */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:200; display:flex; justify-content:center; align-items:flex-end; animation:fadeIn 0.2s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.sheet { background:var(--white); width:100%; max-width:430px; border-radius:16px 16px 0 0; padding:20px; max-height:85vh; overflow-y:auto; animation:slideUp 0.3s cubic-bezier(0.19,1,0.22,1); }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.sheet-handle { width:36px; height:4px; background:#d1d5db; border-radius:2px; margin:0 auto 20px; }
.sheet-title { font-weight:800; font-size:1.1rem; color:var(--black); margin-bottom:16px; }
.sheet-row { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:var(--hairline); font-weight:600; font-size:0.9rem; color:var(--black); cursor:pointer; }
.sheet-row:last-child { border-bottom:none; }
.sheet-row i { width:22px; text-align:center; color:var(--muted); }
.sheet-row.danger { color:var(--red); }
.sheet-row.danger i { color:var(--red); }
.action-pair { display:flex; gap:12px; margin-bottom:12px; }
.action-pair > div { flex:1; background:#f1f5f9; padding:14px 8px; border-radius:10px; text-align:center; cursor:pointer; }
.action-pair i { display:block; font-size:1.1rem; margin-bottom:6px; }
.action-pair span { font-weight:700; font-size:0.75rem; }
.badge-new { background:var(--red); color:white; font-size:0.55rem; font-weight:700; padding:2px 5px; border-radius:3px; margin-left:auto; }

/* === Full-Screen Page === */
.page { position:fixed; inset:0; width:100%; max-width:430px; margin:0 auto; background:var(--white); z-index:150; display:flex; flex-direction:column; overflow-y:auto; animation:slideIn 0.25s ease-out; }
@keyframes slideIn { from{transform:translateX(100%)} to{transform:translateX(0)} }
.page-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:var(--hairline); flex-shrink:0; }
.page-header .close { font-size:1.4rem; color:var(--black); cursor:pointer; }
.page-header .title { font-weight:800; font-size:1.05rem; }
.page-body { flex:1; padding:20px; overflow-y:auto; }

/* === Item Detail Page === */
.detail-photo { width:100%; height:220px; background:#f1f5f9; background-size:cover; background-position:center; }
.detail-section { padding:20px; background:var(--white); }
.detail-field { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:var(--hairline); }
.detail-field:last-child { border-bottom:none; }
.field-label { font-size:0.7rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; }
.field-value { font-size:1rem; font-weight:700; color:var(--black); }
.save-btn { background:var(--red); border-radius:6px; display:flex; overflow:hidden; }
.save-btn div { padding:8px 14px; color:white; font-weight:700; font-size:0.85rem; }
.save-btn div + div { border-left:1px solid rgba(255,255,255,0.3); }

/* === Update Qty === */
.qty-card { display:flex; gap:14px; align-items:center; background:#f8fafc; padding:12px; border-radius:10px; border:var(--hairline); margin-bottom:28px; }
.qty-display { font-size:2.8rem; font-weight:800; text-align:center; padding:16px 0; }
.qty-stepper { display:flex; justify-content:center; align-items:center; gap:40px; margin-bottom:24px; }
.qty-stepper i { font-size:1.8rem; color:var(--muted); cursor:pointer; padding:8px; }
.qty-input-row { margin-bottom:20px; }
.qty-input { width:100%; padding:14px; background:#f1f5f9; border:none; border-radius:8px; font-size:1.1rem; font-weight:700; color:var(--black); outline:none; }
.reason-btn { padding:14px 0; border-bottom:var(--hairline); display:flex; justify-content:space-between; align-items:center; cursor:pointer; margin-bottom:16px; }
.btn-red { background:var(--red); color:white; font-weight:700; padding:12px 22px; border-radius:8px; border:none; cursor:pointer; font-size:0.9rem; }
.btn-red-full { width:100%; text-align:center; padding:16px; font-size:1rem; }


/* === Folder Picker === */
.folder-option { padding:14px 20px; border-bottom:var(--hairline); display:flex; align-items:center; gap:14px; cursor:pointer; }
.folder-option:active { background:#f8fafc; }
.folder-option i { font-size:1.2rem; color:var(--muted); width:24px; text-align:center; }
.folder-option.current { color:var(--red); font-weight:700; }

/* === History Timeline === */
.timeline-item { padding:14px 20px; border-bottom:var(--hairline); }
.timeline-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.timeline-delta { font-weight:800; font-size:0.9rem; }
.timeline-delta.plus { color:var(--green); }
.timeline-delta.minus { color:var(--red); }
.timeline-reason { display:inline-block; background:#f1f5f9; color:#475569; font-size:0.65rem; font-weight:700; padding:2px 8px; border-radius:4px; margin-top:4px; }

/* === Alert Form Tags === */
.tag-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.tag { padding:7px 14px; border-radius:20px; font-size:0.8rem; font-weight:700; cursor:pointer; }
.tag.active { background:#475569; color:white; }
.tag.inactive { background:#e2e8f0; color:var(--muted); }

/* === Add Item Form === */
.form-group { margin-bottom:20px; }
.form-label { font-size:0.75rem; font-weight:700; color:var(--muted); text-transform:uppercase; margin-bottom:8px; display:block; }
.form-input { width:100%; padding:14px; background:#f1f5f9; border:none; border-radius:8px; font-size:0.95rem; font-weight:600; color:var(--black); outline:none; }
.form-input:focus { box-shadow:0 0 0 2px var(--red); }

/* === Toast === */
.toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:var(--black); color:var(--white); padding:10px 20px; font-weight:700; font-size:0.75rem; letter-spacing:0.05em; z-index:999; border-radius:6px; animation:toastIn 0.3s ease; white-space:nowrap; }
@keyframes toastIn { from{opacity:0;bottom:70px} to{opacity:1;bottom:90px} }

/* === Menu Screen === */
.menu-item { padding:16px 20px; border-bottom:var(--hairline); display:flex; align-items:center; gap:14px; cursor:pointer; }
.menu-item i { width:24px; text-align:center; color:var(--muted); font-size:1.1rem; }
.menu-item span { font-weight:600; font-size:0.95rem; color:var(--black); }

/* === Empty State === */
.empty { text-align:center; padding:80px 24px; color:var(--muted); }
.empty i { font-size:2.5rem; opacity:0.4; margin-bottom:16px; }
.empty h3 { font-size:1rem; font-weight:700; color:var(--black); margin-bottom:6px; }
.empty p { font-size:0.8rem; }

/* === Utility === */
* { -webkit-user-select:none; user-select:none; }
input, textarea { -webkit-user-select:text; user-select:text; }
[data-action] { cursor:pointer; }
::-webkit-scrollbar { width:0; }