/* ============================================================
   Sklad NFC – Apple-like light design
   Tokeny: bg #f5f5f7 · surface #fff · ink #1d1d1f · sekundární
   #6e6e73 · akcent #0071e3 · hairline rgba(0,0,0,.09)
   Podpis: frosted-glass hlavička, tónované stavové pilulky,
   velká skenová odezva. Mobile-first, dotykové cíle ≥ 44 px.
   ============================================================ */

:root{
  --bg:#f5f5f7;
  --surface:#ffffff;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --hair:rgba(0,0,0,.09);
  --accent:#0071e3;
  --accent-hover:#0077ed;
  --ok:#248a3d;      --ok-bg:#e6f4ea;
  --warn:#c05000;    --warn-bg:#fff3e6;
  --err:#d70015;     --err-bg:#fdeaec;
  --violet:#6e3aaa;  --violet-bg:#f2eafc;
  --gray:#5b5b60;    --gray-bg:#ebebee;
  --radius:18px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}


/* ---------- tmavý režim ---------- */
[data-theme=dark]{
  --bg:#161617;
  --surface:#1d1d1f;
  --ink:#f5f5f7;
  --ink-2:#a1a1a6;
  --hair:rgba(255,255,255,.14);
  --accent:#0a84ff;
  --accent-hover:#409cff;
  --ok:#30d158;      --ok-bg:rgba(48,209,88,.16);
  --warn:#ff9f0a;    --warn-bg:rgba(255,159,10,.16);
  --err:#ff453a;     --err-bg:rgba(255,69,58,.16);
  --violet:#bf5af2;  --violet-bg:rgba(191,90,242,.16);
  --gray:#a1a1a6;    --gray-bg:rgba(120,120,128,.24);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){
  :root[data-theme=auto]{
    --bg:#161617;
    --surface:#1d1d1f;
    --ink:#f5f5f7;
    --ink-2:#a1a1a6;
    --hair:rgba(255,255,255,.14);
    --accent:#0a84ff;
    --accent-hover:#409cff;
    --ok:#30d158;      --ok-bg:rgba(48,209,88,.16);
    --warn:#ff9f0a;    --warn-bg:rgba(255,159,10,.16);
    --err:#ff453a;     --err-bg:rgba(255,69,58,.16);
    --violet:#bf5af2;  --violet-bg:rgba(191,90,242,.16);
    --gray:#a1a1a6;    --gray-bg:rgba(120,120,128,.24);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- frosted hlavička ---------- */
header{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair);
  padding-top:env(safe-area-inset-top);
}
.header-inner{
  display:flex;align-items:center;gap:1rem;
  max-width:980px;margin:0 auto;
  padding:.55rem 1rem;
}
nav{
  display:flex;align-items:center;gap:1.35rem;
  flex:1;min-width:0;
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
nav::-webkit-scrollbar{display:none}
nav a{
  color:var(--ink);text-decoration:none;font-size:.92rem;
  padding:.5rem 0;white-space:nowrap;opacity:.85;
  transition:opacity .15s;
}
nav a:hover{opacity:1}
nav .brand{font-weight:700;font-size:1.05rem;opacity:1}
nav .spacer{flex:1;min-width:.5rem}
nav .user{color:var(--ink-2);font-size:.85rem;white-space:nowrap}

/* ---------- layout ---------- */
main{
  max-width:980px;margin:0 auto;
  padding:1.2rem 1rem calc(2.5rem + env(safe-area-inset-bottom));
}
h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;margin:.6rem 0 .9rem}
h2{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;margin:1.6rem 0 .6rem}
h3{font-size:1.02rem;font-weight:600;margin:.2rem 0 .7rem}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:.6rem 0}
code{
  background:var(--gray-bg);padding:.12rem .45rem;border-radius:6px;
  font:.85em ui-monospace,"SF Mono",Menlo,monospace;
}
.muted{color:var(--ink-2);font-size:.88rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---------- karty ---------- */
.card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:var(--shadow);
  margin:.9rem 0;
}
.card.highlight{box-shadow:var(--shadow), 0 0 0 2px var(--accent) inset}
.card.narrow{max-width:440px}

/* ---------- tabulky ---------- */
table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);
  border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);
  font-size:.92rem;margin:.5rem 0;
}
th,td{padding:.65rem .8rem;text-align:left;border-bottom:1px solid var(--hair);vertical-align:middle}
th{
  background:transparent;color:var(--ink-2);
  font-size:.74rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
}
tr:last-child td{border-bottom:none}
tbody tr, table tr{transition:background .12s}
table tr:hover td{background:color-mix(in srgb, var(--ink) 4%, var(--surface))}
tr.alert-row td{background:var(--err-bg)}
.props{box-shadow:none;border-radius:0}
.props th{width:38%;text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:500}
.props tr:hover td, .props tr:hover th{background:transparent}

/* na mobilu tabulky horizontálně scrollují, layout se nerozbije */
@media (max-width:700px){
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .props{display:table;white-space:normal}
}

/* ---------- formuláře ---------- */
label{display:block;margin:.75rem 0;font-weight:600;font-size:.88rem;color:var(--ink)}
input,select,textarea{
  width:100%;margin-top:.3rem;
  padding:.7rem .85rem;
  min-height:44px;
  border:1px solid var(--hair);
  border-radius:12px;
  font:inherit;background:var(--surface);color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
  appearance:none;-webkit-appearance:none;
}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;
  padding-right:2.2rem;
}
input[type=checkbox]{width:auto;min-height:auto;appearance:auto;-webkit-appearance:auto}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3.5px rgba(0,113,227,.18);
}
textarea{min-height:70px;resize:vertical}

/* ---------- tlačítka (pill) ---------- */
button,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:44px;
  background:var(--accent);color:#fff;border:0;
  padding:.6rem 1.35rem;
  border-radius:980px;
  font:inherit;font-size:.95rem;font-weight:500;
  cursor:pointer;text-decoration:none;
  margin-top:.65rem;
  transition:background .15s, transform .1s;
}
button:hover,.btn:hover{background:var(--accent-hover);text-decoration:none}
button:active,.btn:active{transform:scale(.98)}
button.big{width:100%;padding:.95rem;font-size:1.12rem;font-weight:600}
button.small,.btn.small{min-height:36px;padding:.35rem .95rem;font-size:.85rem;margin:0}
button.secondary,.btn.secondary{
  background:var(--gray-bg);color:var(--ink);
}
button.secondary:hover,.btn.secondary:hover{background:color-mix(in srgb, var(--ink) 12%, var(--gray-bg))}

/* ---------- stavové pilulky ---------- */
.badge{
  display:inline-block;border-radius:980px;
  padding:.22rem .7rem;
  font-size:.76rem;font-weight:600;white-space:nowrap;
}
.badge-in_stock{background:var(--ok-bg);color:var(--ok)}
.badge-issued{background:var(--warn-bg);color:var(--warn)}
.badge-service{background:var(--violet-bg);color:var(--violet)}
.badge-retired{background:var(--gray-bg);color:var(--gray)}
.badge-lost{background:var(--err-bg);color:var(--err)}

/* ---------- flash ---------- */
.flash{
  padding:.8rem 1.1rem;border-radius:14px;margin:.9rem 0;
  background:color-mix(in srgb, var(--accent) 12%, var(--surface));
  color:var(--ink);font-size:.92rem;
}
.flash-error{background:var(--err-bg);color:var(--err)}
.flash a{font-weight:600}

/* ---------- filtry ---------- */
.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;margin:.9rem 0}
.filters input,.filters select{width:auto;flex:1;min-width:130px;margin-top:0}
.filters button{margin-top:0}

/* ---------- statistiky ---------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));
  gap:.7rem;margin:1.1rem 0;
}
.stat{
  background:var(--surface);border-radius:16px;
  padding:1rem .6rem;text-align:center;
  text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow);
  transition:transform .12s;
}
a.stat:hover{text-decoration:none;transform:translateY(-2px)}
.stat b{display:block;font-size:1.9rem;font-weight:700;letter-spacing:-.03em}
.stat span{color:var(--ink-2);font-size:.8rem}

.grid2{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:720px){.grid2{grid-template-columns:1fr 1fr}}

/* ---------- fotky, drobnosti ---------- */
.item-photo{width:100%;border-radius:14px;margin-bottom:.8rem;display:block}
.inline-form{margin-top:1rem;border-top:1px solid var(--hair);padding-top:.8rem}

/* ---------- veřejná vizitka ---------- */
.public-card{
  max-width:440px;margin:8vh auto;text-align:center;
  background:var(--surface);border-radius:22px;
  padding:2.2rem 1.6rem;box-shadow:var(--shadow);
}

/* ---------- banner skenovacího režimu ---------- */
.mode-banner{
  position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:15;
  background:rgba(255,149,0,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#fff;font-weight:600;font-size:.92rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem 1rem;
}
.mode-banner form{margin:0}
.mode-banner button{margin:0;background:rgba(255,255,255,.22);min-height:36px}
.mode-banner button:hover{background:rgba(255,255,255,.32)}

/* ---------- skenová odezva ---------- */
.scan-result{
  max-width:440px;margin:1.2rem auto;text-align:center;
  border-radius:22px;padding:1.8rem 1.4rem;color:#fff;
  box-shadow:var(--shadow);
  animation:pop .28s cubic-bezier(.34,1.4,.64,1);
}
.scan-result.ok{background:linear-gradient(160deg,#34c759,#248a3d)}
.scan-result.err{background:linear-gradient(160deg,#ff453a,#d70015)}
.scan-result .big-msg{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin:.2rem 0}
.scan-result .item{font-size:1.06rem;opacity:.95}
.scan-result .detail{
  background:rgba(0,0,0,.22);border-radius:980px;
  padding:.4rem .95rem;margin-top:.7rem;display:inline-block;font-size:.9rem;
}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}

.progress-line{margin:1.1rem auto;max-width:440px;text-align:center;font-size:1.02rem}
.progress-bar{height:8px;background:var(--gray-bg);border-radius:4px;overflow:hidden;margin-top:.4rem}
.progress-bar i{display:block;height:100%;background:var(--accent);border-radius:4px;
  transition:width .3s ease}

/* ---------- checklisty ---------- */
.checklist-done{color:var(--ok)}
tr.checklist-extra td{background:var(--warn-bg)}
tr.checklist-extra:hover td{background:var(--warn-bg)}

/* ---------- přístupnost ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- mazání položky ---------- */
button.danger{background:var(--err)}
button.danger:hover{background:#b8000f}
.danger-zone{margin:1.4rem 0}
.danger-zone summary{
  cursor:pointer;color:var(--err);font-size:.9rem;font-weight:600;
  list-style:none;
}
.danger-zone summary::-webkit-details-marker{display:none}
.danger-zone summary::before{content:"›  ";transition:transform .15s;display:inline-block}
.danger-zone[open] summary::before{transform:rotate(90deg)}

/* ---------- uživatelské menu ---------- */
.user-menu{position:relative}
.user-menu summary{
  cursor:pointer;list-style:none;
  color:var(--ink);font-size:.92rem;white-space:nowrap;
  padding:.5rem 0;opacity:.85;
}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu summary:hover{opacity:1}
.user-menu .menu{
  position:absolute;right:0;top:calc(100% + .6rem);z-index:60;
  min-width:230px;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:.4rem;
}
.user-menu .menu-head{
  padding:.6rem .8rem;border-bottom:1px solid var(--hair);margin-bottom:.3rem;
}
.user-menu .menu-head b{display:block}
.user-menu .menu-head .muted{display:block;font-size:.8rem}
.user-menu .menu a{
  display:block;padding:.55rem .8rem;border-radius:10px;
  color:var(--ink);opacity:1;font-size:.92rem;
}
.user-menu .menu a:hover{background:var(--gray-bg);text-decoration:none}

/* ---------- profil: přepínač vzhledu ---------- */
.theme-picker{display:flex;gap:.5rem;margin-top:.4rem}
.theme-picker label{
  flex:1;margin:0;text-align:center;cursor:pointer;
  border:1px solid var(--hair);border-radius:12px;
  padding:.7rem .4rem;font-weight:500;font-size:.88rem;
  transition:border-color .15s, background .15s;
}
.theme-picker input{display:none}
.theme-picker label:has(input:checked){
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, var(--surface));
  color:var(--accent);font-weight:600;
}
.apikey-box{word-break:break-all;font-size:.8rem}

/* ---------- reporty: sloupcový graf ---------- */
.bar-chart{display:flex;align-items:flex-end;gap:.4rem;height:180px;padding-top:1.2rem}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.bar-col i{display:block;width:100%;max-width:38px;background:var(--accent);border-radius:6px 6px 0 0;min-height:2px;transition:height .3s}
.bar-col .bar-label{font-size:.72rem;color:var(--ink-2);margin-top:.3rem}
.bar-col .bar-val{font-size:.68rem;color:var(--ink-2);margin-bottom:.15rem;white-space:nowrap}
.price-inline{margin:0}
.price-inline input{min-height:34px;width:110px;padding:.3rem .5rem;margin:0;font-size:.85rem}