/* ============================================================
   style.css — Giftshire Panel
   All visual styles in one file.
   Variables at the top — change colors/fonts here only.
   ============================================================ */

:root {
  --bg:       #F5F2EC;
  --bg2:      #EDEAE2;
  --bg3:      #E4E0D6;
  --ink:      #1A1814;
  --ink2:     #5C5849;
  --ink3:     #9E9A91;
  --accent:   #C4410C;
  --accent2:  #F0E6DC;
  --green:    #2D6A4F;
  --green-bg: #D8F3DC;
  --amber:    #92400E;
  --amber-bg: #FEF3C7;
  --blue:     #1E3A5F;
  --blue-bg:  #DBEAFE;
  --red:      #9B1C1C;
  --red-bg:   #FEE2E2;
  --border:   rgba(26,24,20,0.1);
  --border2:  rgba(26,24,20,0.06);
  --mono:     'DM Mono', monospace;
  --serif:    'Fraunces', serif;
  --sans:     'DM Sans', sans-serif;
  --r:  8px;
  --rl: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: var(--sans); background: var(--bg); color: var(--ink); font-size: 14px; }
input, select, textarea, button { font-family: var(--sans); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: rgba(26,24,20,0.15); border-radius: 10px; }

/* ── AUTH ──────────────────────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 40px; width: 100%; max-width: 420px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.auth-card h1 { font-family: var(--serif); font-size: 26px; font-weight: 600; font-style: italic; margin-bottom: 4px; }
.auth-sub { font-size: 12px; color: var(--ink3); margin-bottom: 28px; font-family: var(--mono); }
.auth-tabs { display: flex; margin-bottom: 24px; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.auth-tab { flex: 1; padding: 9px; font-size: 13px; border: none; background: transparent; cursor: pointer; color: var(--ink2); }
.auth-tab.active { background: var(--ink); color: #fff; }
.demo-hint { margin-top: 14px; font-size: 11px; color: var(--ink3); font-family: var(--mono); text-align: center; padding: 8px; background: var(--bg2); border-radius: var(--r); }

/* ── FORM ELEMENTS ─────────────────────────────────────────── */
.fl { font-size: 11px; color: var(--ink3); font-family: var(--mono); margin-bottom: 5px; display: block; text-transform: uppercase; letter-spacing: .04em; }
.fi { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r); font-size: 13px; color: var(--ink); background: var(--bg); outline: none; margin-bottom: 12px; }
.fi:focus { border-color: var(--accent); background: #fff; }
.fs { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r); font-size: 13px; color: var(--ink); background: var(--bg); outline: none; margin-bottom: 12px; appearance: none; cursor: pointer; }
.btn-full { width: 100%; padding: 11px; background: var(--accent); color: #fff; border: none; border-radius: var(--r); font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 4px; }
.btn-full:hover { background: #a33509; }
.err { background: var(--red-bg); color: var(--red); font-size: 12px; padding: 8px 12px; border-radius: var(--r); margin-bottom: 12px; font-family: var(--mono); }
.btn-p { padding: 8px 16px; background: var(--accent); color: #fff; border: none; border-radius: var(--r); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-p:hover { background: #a33509; }
.btn-g { padding: 8px 14px; background: transparent; color: var(--ink2); border: 1px solid var(--border); border-radius: var(--r); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-g:hover { background: var(--bg2); }
.btn-sm { padding: 4px 10px; font-size: 11px; border-radius: 6px; border: 1px solid var(--border); background: #fff; cursor: pointer; color: var(--ink2); font-family: var(--mono); }
.btn-sm:hover { background: var(--bg2); }

/* ── LAYOUT ────────────────────────────────────────────────── */
.shell { display: flex; height: 100vh; overflow: hidden; }
.sidebar { width: 220px; flex-shrink: 0; background: var(--ink); display: flex; flex-direction: column; overflow-y: auto; }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sb-brand { padding: 22px 18px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sb-brand h1 { font-family: var(--serif); font-size: 20px; font-weight: 600; color: #F5F2EC; letter-spacing: -.3px; }
.sb-brand p { font-size: 10px; color: rgba(245,242,236,0.35); margin-top: 3px; font-family: var(--mono); }
.sb-nav { padding: 12px 8px; flex: 1; }
.sb-sec { font-size: 10px; color: rgba(245,242,236,0.28); letter-spacing: .08em; text-transform: uppercase; padding: 10px 10px 5px; margin-top: 8px; font-family: var(--mono); }
.sb-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: rgba(245,242,236,0.6); border: none; background: none; width: 100%; text-align: left; margin-bottom: 2px; transition: all .15s; }
.sb-item:hover { background: rgba(255,255,255,0.07); color: #F5F2EC; }
.sb-item.active { background: var(--accent); color: #fff; }
.sb-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.sb-badge { margin-left: auto; background: #EF4444; color: #fff; font-size: 9px; padding: 1px 6px; border-radius: 8px; font-family: var(--mono); }
.sb-user { padding: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.sb-user-info { display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 8px; background: rgba(255,255,255,0.06); margin-bottom: 7px; }
.sb-av { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0; }
.sb-un { font-size: 12px; color: #F5F2EC; font-weight: 500; line-height: 1.2; }
.sb-ur { font-size: 10px; color: rgba(245,242,236,0.4); font-family: var(--mono); }
.sb-logout { width: 100%; padding: 7px; background: transparent; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: rgba(245,242,236,0.5); font-size: 11px; cursor: pointer; font-family: var(--mono); }
.sb-logout:hover { background: rgba(255,255,255,0.06); color: #F5F2EC; }

/* ── TOPBAR ─────────────────────────────────────────────────── */
.topbar { background: #fff; border-bottom: 1px solid var(--border); padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar h2 { font-family: var(--serif); font-size: 18px; font-weight: 400; font-style: italic; flex: 1; }
.sw { position: relative; width: 260px; }
.sw input { width: 100%; padding: 8px 12px 8px 32px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); font-size: 13px; color: var(--ink); outline: none; }
.sw input:focus { border-color: var(--accent); background: #fff; }
.sw svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ink3); }

/* ── STATS BAR ─────────────────────────────────────────────── */
.stats-bar { display: flex; gap: 1px; background: var(--border2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sc { flex: 1; background: #fff; padding: 13px 20px; }
.sc .v { font-size: 22px; font-weight: 500; font-family: var(--serif); line-height: 1; }
.sc .l { font-size: 10px; color: var(--ink3); font-family: var(--mono); margin-top: 3px; }
.v.warn { color: var(--amber); } .v.danger { color: var(--red); } .v.good { color: var(--green); }

/* ── CONTENT ────────────────────────────────────────────────── */
.content { flex: 1; overflow-y: auto; padding: 20px 24px; }

/* ── TAGS ────────────────────────────────────────────────────── */
.tag { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-family: var(--mono); font-weight: 500; }
.tb { background: var(--blue-bg); color: var(--blue); }
.ts { background: var(--green-bg); color: var(--green); }
.tp { background: var(--amber-bg); color: var(--amber); }
.to { background: #EDE9FE; color: #4C1D95; }

/* ── FILTER CHIPS ─────────────────────────────────────────── */
.frow { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.fchip { padding: 5px 12px; border-radius: 20px; font-size: 11px; border: 1px solid var(--border); background: #fff; color: var(--ink2); cursor: pointer; font-family: var(--mono); }
.fchip:hover { border-color: var(--accent); color: var(--accent); }
.fchip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.fsep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }

/* ── PRODUCT GRID ─────────────────────────────────────────── */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.fcard { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.fcard:hover { box-shadow: 0 4px 20px rgba(26,24,20,0.08); }
.fcard.exp { border-color: var(--accent); }
.fc-head { padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.fc-img { width: 50px; height: 50px; border-radius: 9px; background: var(--bg2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; border: 1px solid var(--border2); overflow: hidden; }
.fc-img img { width: 100%; height: 100%; object-fit: cover; }
.fc-name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.fc-code { font-family: var(--mono); font-size: 10px; color: var(--ink3); background: var(--bg2); padding: 2px 7px; border-radius: 3px; display: inline-block; }
.fc-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.fc-meta { padding: 0 16px 12px; display: flex; gap: 16px; }
.fc-meta span { font-size: 11px; color: var(--ink3); font-family: var(--mono); }
.fc-meta b { color: var(--ink2); font-weight: 500; }
.fc-toggle { width: 100%; padding: 9px 16px; background: var(--bg2); border: none; border-top: 1px solid var(--border2); font-size: 11px; color: var(--ink2); cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.fc-toggle:hover { background: var(--bg3); }

/* ── VARIANTS ─────────────────────────────────────────────── */
.vp { border-top: 1px solid var(--border); }
.vrow { padding: 11px 16px; border-bottom: 1px solid var(--border2); display: flex; align-items: flex-start; gap: 10px; background: #fff; }
.vrow:hover { background: var(--bg2); }
.vcode { font-family: var(--mono); font-size: 10px; background: var(--accent2); color: var(--accent); padding: 2px 8px; border-radius: 4px; flex-shrink: 0; font-weight: 500; margin-top: 1px; white-space: nowrap; }
.vinfo { flex: 1; min-width: 0; }
.vname { font-size: 12px; font-weight: 500; line-height: 1.3; }
.vmeta { font-size: 10px; color: var(--ink3); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vlocs { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 5px; }
.vloc { font-size: 9px; font-family: var(--mono); padding: 2px 7px; border-radius: 3px; border: 1px solid var(--border); }
.vbtns { display: flex; gap: 5px; flex-shrink: 0; }
.vbtn { width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--border); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink3); }
.vbtn:hover { background: var(--bg2); color: var(--ink); }
.vbtn.del:hover { background: var(--red-bg); color: var(--red); }
.vadd-row { padding: 9px 16px; border-top: 1px solid var(--border2); display: flex; justify-content: space-between; align-items: center; }
.badge-lock { font-size: 10px; font-family: var(--mono); color: var(--ink3); padding: 2px 8px; border: 1px solid var(--border); border-radius: 10px; }

/* ── INVENTORY ──────────────────────────────────────────────── */
.loc-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.loc-tab { padding: 6px 14px; border-radius: 20px; font-size: 12px; border: 1px solid var(--border); background: #fff; color: var(--ink2); cursor: pointer; font-family: var(--mono); display: flex; align-items: center; gap: 7px; }
.loc-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.ldot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.alert-banner { background: var(--red-bg); border: 1px solid rgba(155,28,28,0.2); border-radius: var(--r); padding: 11px 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.alert-banner p { font-size: 12px; color: var(--red); font-family: var(--mono); }
.line-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); margin-bottom: 10px; overflow: hidden; }
.line-head { padding: 11px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.line-head:hover { background: var(--bg2); }
.line-badge { font-size: 11px; font-weight: 500; font-family: var(--mono); padding: 3px 9px; border-radius: 6px; flex-shrink: 0; }
.line-meta { font-size: 11px; color: var(--ink3); font-family: var(--mono); display: flex; gap: 12px; margin-left: auto; }
.stk-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.stk-table th { text-align: left; padding: 7px 14px; font-size: 10px; font-weight: 500; color: var(--ink3); border-bottom: 1px solid var(--border2); text-transform: uppercase; letter-spacing: .04em; font-family: var(--mono); background: var(--bg); }
.stk-table td { padding: 9px 14px; border-bottom: 1px solid var(--border2); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.stk-table tr:last-child td { border-bottom: none; }
.stk-table tr:hover td { background: var(--bg2); }
.stk-num { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.stk-ok { color: var(--green); } .stk-w { color: var(--amber); } .stk-lo { color: var(--red); }
.sbar-w { width: 56px; height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 6px; }
.sbar { height: 100%; border-radius: 3px; }
.stk-in { width: 58px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; font-family: var(--mono); color: var(--ink); background: var(--bg); text-align: right; outline: none; }
.stk-in:focus { border-color: var(--accent); background: #fff; }
.min-in { width: 46px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; font-size: 11px; font-family: var(--mono); color: var(--ink3); background: var(--bg); text-align: right; outline: none; }
.save-btn { padding: 4px 10px; font-size: 10px; border-radius: 5px; border: 1px solid var(--border); background: #fff; cursor: pointer; color: var(--ink2); font-family: var(--mono); }
.save-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── COST ────────────────────────────────────────────────────── */
.cv-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.cvt { padding: 6px 14px; border-radius: 20px; font-size: 12px; border: 1px solid var(--border); background: #fff; color: var(--ink2); cursor: pointer; font-family: var(--mono); }
.cvt.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.bcard { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 16px; }
.bcard-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.bcard-img { width: 42px; height: 42px; border-radius: 8px; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; overflow: hidden; }
.bcard-img img { width: 100%; height: 100%; object-fit: cover; }
.cs-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cs-lbl { font-size: 11px; color: var(--ink2); width: 76px; flex-shrink: 0; }
.cs-bw { flex: 1; height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; }
.cs-b { height: 100%; border-radius: 4px; }
.cs-val { font-size: 11px; font-family: var(--mono); color: var(--ink2); width: 38px; text-align: right; }
.cogs-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border2); }
.cogs-v { font-size: 16px; font-weight: 500; font-family: var(--serif); }
.pr-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border2); flex-wrap: wrap; }
.pr-lbl { font-size: 11px; color: var(--ink3); font-family: var(--mono); width: 66px; }
.pr-in { width: 70px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; font-family: var(--mono); color: var(--ink); background: var(--bg); text-align: right; outline: none; }
.pr-in:focus { border-color: var(--accent); background: #fff; }
.mpill { font-size: 11px; font-family: var(--mono); padding: 2px 8px; border-radius: 10px; font-weight: 500; }
.mg { background: var(--green-bg); color: var(--green); }
.mw { background: var(--amber-bg); color: var(--amber); }
.mb { background: var(--red-bg); color: var(--red); }
.ctbl-wrap { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; }
.ctbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.ctbl th { text-align: left; padding: 8px 14px; font-size: 10px; font-weight: 500; color: var(--ink3); border-bottom: 1px solid var(--border2); text-transform: uppercase; letter-spacing: .04em; font-family: var(--mono); background: var(--bg); white-space: nowrap; }
.ctbl th.r, .ctbl td.r { text-align: right; }
.ctbl td { padding: 9px 14px; border-bottom: 1px solid var(--border2); vertical-align: middle; }
.ctbl tr:last-child td { border-bottom: none; }
.ctbl tr:hover td { background: var(--bg2); }

/* ── COST ITEM EDITOR ─────────────────────────────────────── */
.cost-items-list { margin-top: 10px; }
.cost-item-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border2); }
.cost-item-row:last-child { border-bottom: none; }
.ci-label { flex: 1; font-size: 12px; color: var(--ink2); }
.ci-val { font-family: var(--mono); font-size: 12px; font-weight: 500; width: 60px; text-align: right; }
.ci-type { font-size: 10px; color: var(--ink3); font-family: var(--mono); }

/* ── USERS ──────────────────────────────────────────────────── */
.ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ucard { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 16px; display: flex; align-items: flex-start; gap: 12px; }
.uav { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #fff; flex-shrink: 0; }
.uinfo { flex: 1; min-width: 0; }
.un { font-size: 13px; font-weight: 500; }
.ue { font-size: 11px; color: var(--ink3); font-family: var(--mono); margin-top: 2px; }
.urole { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-family: var(--mono); font-weight: 500; display: inline-block; margin-top: 6px; }
.r-admin    { background: #FEE2E2; color: #9B1C1C; }
.r-product  { background: var(--blue-bg); color: var(--blue); }
.r-partner  { background: #EDE9FE; color: #6D28D9; }
.r-location { background: var(--green-bg); color: var(--green); }
.r-viewer   { background: var(--bg3); color: var(--ink2); }
.ulocs-row { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 6px; }
.udel { width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--border); background: #fff; cursor: pointer; color: var(--ink3); display: flex; align-items: center; justify-content: center; }
.udel:hover { background: var(--red-bg); color: var(--red); }

/* ── MODAL ────────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(26,24,20,0.6); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: #fff; border-radius: var(--rl); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.3); }
.mhead { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; z-index: 1; }
.mhead h3 { font-family: var(--serif); font-size: 18px; font-weight: 400; font-style: italic; }
.mclose { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 18px; color: var(--ink2); display: flex; align-items: center; justify-content: center; }
.mclose:hover { background: var(--bg2); }
.mbody { padding: 20px 24px; }
.mdiv { font-size: 10px; font-weight: 500; color: var(--ink3); font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; padding: 12px 0 9px; border-top: 1px solid var(--border2); margin-top: 8px; }
.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.frow4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.mfoot { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; position: sticky; bottom: 0; background: #fff; }
.ms { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ms-opt { padding: 5px 11px; border: 1px solid var(--border); border-radius: 20px; font-size: 11px; font-family: var(--mono); color: var(--ink2); cursor: pointer; background: var(--bg); user-select: none; }
.ms-opt:hover { border-color: var(--accent); color: var(--accent); }
.ms-opt.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.loc-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lchk { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 20px; cursor: pointer; font-size: 11px; font-family: var(--mono); color: var(--ink2); background: var(--bg); user-select: none; }
.lchk:hover { border-color: var(--accent); }
.lchk.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.lchk-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.img-up { width: 100%; height: 80px; border: 2px dashed var(--border); border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; gap: 4px; color: var(--ink3); font-size: 12px; background: var(--bg); margin-bottom: 12px; }
.img-up:hover { border-color: var(--accent); color: var(--accent); }

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty { text-align: center; padding: 60px 20px; color: var(--ink3); }
.empty p { font-size: 14px; font-family: var(--serif); font-style: italic; margin-top: 10px; }
.empty .sub { font-size: 12px; color: var(--ink3); margin-top: 6px; }

/* ── LOADING ─────────────────────────────────────────────── */
.loading { text-align: center; padding: 40px; color: var(--ink3); font-family: var(--mono); font-size: 13px; }

/* ── ACTIVITY LOG ────────────────────────────────────────── */
.act-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; }
.act-chip { padding: 5px 12px; border-radius: 20px; font-size: 11px; border: 1px solid var(--border); background: #fff; color: var(--ink2); cursor: pointer; font-family: var(--mono); display: inline-flex; align-items: center; gap: 6px; }
.act-chip:hover { border-color: var(--accent); color: var(--accent); }
.act-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.act-chip-n { font-size: 10px; opacity: 0.7; }

/* Action badges — color-coded by what happened */
.act-badge { display: inline-block; font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 4px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.act-badge.ac-login  { background: var(--green-bg); color: var(--green); }
.act-badge.ac-logout { background: var(--bg2);      color: var(--ink2); }
.act-badge.ac-fail   { background: var(--red-bg);   color: var(--red); }
.act-badge.ac-create { background: var(--green-bg); color: var(--green); }
.act-badge.ac-update { background: var(--amber-bg); color: var(--amber); }
.act-badge.ac-delete { background: var(--red-bg);   color: var(--red); }
.act-badge.ac-other  { background: var(--bg2);      color: var(--ink2); }

/* ── DASHBOARD ───────────────────────────────────────────── */
.dash-wrap { max-width: 1080px; }
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.dash-sub { font-size: 13px; color: var(--ink2); margin-top: 4px; max-width: 620px; line-height: 1.5; }
.dash-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dash-ctl-l { font-size: 11px; color: var(--ink3); font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.dash-sel { width: auto; margin: 0; padding: 7px 10px; }

/* Summary cards */
.dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.dash-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 16px 18px; }
.dash-card.is-warn   { border-color: #FCD9A8; background: #FFFBF4; }
.dash-card.is-danger { border-color: #F5C2C2; background: #FFF7F7; }
.dash-card-v { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.dash-card.is-warn .dash-card-v   { color: var(--amber); }
.dash-card.is-danger .dash-card-v { color: var(--red); }
.dash-card-l { font-size: 11px; color: var(--ink3); font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; margin-top: 6px; }

/* Panels grid */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 16px 18px; }
.dash-panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dash-panel-h h3 { font-size: 15px; font-weight: 600; margin: 0; }
.dash-panel-tag { font-size: 11px; color: var(--ink2); font-family: var(--mono); }
.dash-panel-note { font-size: 12px; color: var(--ink3); margin: 4px 0 12px; line-height: 1.4; }

.dash-list { display: flex; flex-direction: column; }
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border2); }
.dash-row:first-child { border-top: none; }
.dash-row-main { min-width: 0; }
.dash-row-name { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-sub { font-size: 11px; color: var(--ink3); font-family: var(--mono); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-side { text-align: right; flex-shrink: 0; }
.dash-row-val { font-size: 13px; font-weight: 600; color: var(--ink); font-family: var(--mono); }
.dash-row-val.dash-danger { color: var(--red); }
.dash-row-age { font-size: 10px; color: var(--ink3); font-family: var(--mono); margin-top: 2px; }
.dash-danger { color: var(--red); }

.dash-empty { font-size: 12px; color: var(--ink3); padding: 14px 0; font-family: var(--mono); }
.dash-more { font-size: 11px; color: var(--ink2); font-family: var(--mono); padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border2); }
.dash-more a { color: var(--accent); cursor: pointer; text-decoration: none; }
.dash-more a:hover { text-decoration: underline; }

/* Location bars */
.dash-loc { padding: 9px 0; border-top: 1px solid var(--border2); }
.dash-loc:first-child { border-top: none; }
.dash-loc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.dash-loc-name { font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.dash-loc-val { font-size: 13px; font-weight: 600; font-family: var(--mono); }
.dash-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dash-bar { height: 7px; background: var(--bg2); border-radius: 5px; overflow: hidden; }
.dash-bar-fill { height: 100%; border-radius: 5px; }
.dash-loc-units { font-size: 10px; color: var(--ink3); font-family: var(--mono); margin-top: 4px; }

@media (max-width: 820px) {
  .dash-cards { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
}

/* ── BULK FILL BAR (Stock page) ──────────────────────────── */
.bulk-fill { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; margin-bottom: 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); }
.bulk-label { font-size: 11px; color: var(--ink2); font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.bulk-mode { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; background: #fff; color: var(--ink); cursor: pointer; }
.bulk-in { width: 70px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: var(--mono); background: #fff; color: var(--ink); }
.bulk-in:focus { outline: none; border-color: var(--accent); }
.bulk-apply { padding: 5px 12px; background: var(--ink); color: #fff; border: none; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; }
.bulk-apply:hover { background: #000; }
.bulk-hint { font-size: 10px; color: var(--ink3); font-family: var(--mono); flex: 1; min-width: 140px; }
.stk-in.bulk-touched, input.bulk-touched { border-color: var(--green) !important; background: var(--green-bg) !important; transition: background .3s, border-color .3s; }

/* ── STOCK SIDEBAR SUBMENU ───────────────────────────────── */
.sb-sub { margin: 2px 0 6px 14px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 1px; }
.sb-subitem { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; color: rgba(245,242,236,0.5); border: none; background: none; width: 100%; text-align: left; font-family: var(--mono); transition: all .15s; }
.sb-subitem:hover { background: rgba(255,255,255,0.06); color: #F5F2EC; }
.sb-subitem.active { background: rgba(255,255,255,0.1); color: #fff; }
.sb-subdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── STOCK PAGE: LOCATION HEADER ─────────────────────────── */
.inv-loc-head { margin-bottom: 12px; }
.inv-loc-title { font-size: 18px; font-weight: 500; display: flex; align-items: center; gap: 9px; }
.inv-loc-dot { width: 11px; height: 11px; border-radius: 50%; }
.inv-loc-sub { font-size: 12px; color: var(--ink3); font-family: var(--mono); margin-top: 3px; }

/* ── STOCK PAGE: CATEGORY CHIPS ──────────────────────────── */
.inv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.inv-chip { padding: 5px 12px; border-radius: 20px; font-size: 11px; border: 1px solid var(--border); background: #fff; color: var(--ink2); cursor: pointer; font-family: var(--mono); }
.inv-chip:hover { border-color: var(--accent); color: var(--accent); }
.inv-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── STOCK PAGE: PARENT LIST ─────────────────────────────── */
.parent-list { display: flex; flex-direction: column; gap: 6px; }
.parent-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 12px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.parent-row:hover { border-color: var(--accent); background: #FFFDFB; }
.parent-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.parent-emoji { font-size: 18px; }
.parent-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.parent-code { font-size: 11px; color: var(--ink3); font-family: var(--mono); margin-top: 1px; }
.parent-meta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.pm-stat { font-size: 12px; color: var(--ink2); font-family: var(--mono); white-space: nowrap; }
.pm-val { color: var(--green); }
.pm-low { font-size: 11px; color: var(--red); font-family: var(--mono); background: var(--red-bg); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.pm-ok { font-size: 11px; color: var(--green); font-family: var(--mono); background: var(--green-bg); padding: 2px 8px; border-radius: 10px; }
.parent-arrow { font-size: 20px; color: var(--ink3); flex-shrink: 0; }

/* ── STOCK PAGE: VARIANT DETAIL ──────────────────────────── */
.inv-back { display: inline-flex; align-items: center; font-size: 13px; color: var(--accent); cursor: pointer; font-family: var(--mono); margin-bottom: 12px; }
.inv-back:hover { text-decoration: underline; }
.variant-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

/* ── PRODUCT MASTER: clickable cards + detail page ───────── */
.fcard-click { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.fcard-click:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.fcard-click .fc-head { display: flex; align-items: center; gap: 11px; }
.fc-cat { font-size: 10px; font-family: var(--mono); background: var(--bg2); color: var(--ink2); padding: 2px 8px; border-radius: 10px; margin-left: auto; }
.fc-cat-none { color: var(--ink3); font-style: italic; }

.pd-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.pd-name { font-size: 20px; font-weight: 500; }
.pd-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.pd-cat { font-size: 11px; font-family: var(--mono); background: var(--accent); color: #fff; padding: 2px 9px; border-radius: 10px; }
.pd-cat.fc-cat-none { background: var(--bg2); color: var(--ink3); }
.pd-stat { font-size: 12px; color: var(--ink2); font-family: var(--mono); }
.pd-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.vp-detail { background: #fff; border: 1px solid var(--border); border-radius: var(--rl); padding: 6px 16px; }