:root{
  --bg:#050609;
  --bg-soft:#0b1018;
  --sidebar:#05060b;
  --card:#0f1722;
  --border:#1f2933;
  --accent:#ffb300;
  --accent-soft:rgba(255,179,0,0.15);
  --accent-strong:rgba(255,179,0,0.4);
  --text:#e5f2ff;
  --muted:#8a96aa;
  --danger:#ff4d6a;
  --success:#53d38d;
  --radius-lg:14px;
  --radius-md:10px;
  --shadow-soft:0 20px 45px rgba(0,0,0,0.6);
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 0 0, rgba(255,179,0,0.16), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(56,201,119,0.12), transparent 55%),
    #020308;
  color:var(--text);
  display:flex;
}

a{color:var(--accent);}

/* LAYOUT */

.app{
  display:flex;
  min-height:100vh;
  width:100%;
}

.sidebar{
  width:235px;
  background:linear-gradient(180deg,#020308,#050814);
  border-right:1px solid var(--border);
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.sidebar-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 4px 0;
}

.logo{
  width:34px;
  height:34px;
  border-radius:10px;
  background:radial-gradient(circle at 20% 0,var(--accent-soft),transparent 60%);
  border:1px solid var(--accent-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:16px;
  box-shadow:0 0 18px rgba(255,179,0,0.4);
}

.sidebar-title{
  display:flex;
  flex-direction:column;
}

.sidebar-title span:first-child{
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.sidebar-title span:last-child{
  font-size:11px;
  color:var(--muted);
}

.nav-group-title{
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  padding:4px 6px 0;
}

.nav-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:2px 0 4px;
}

.nav-btn{
  border-radius:9px;
  border:1px solid transparent;
  padding:7px 8px;
  font-size:12px;
  color:var(--muted);
  background:transparent;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}

.nav-btn span.emoji{font-size:14px;}

.nav-btn[data-active="true"]{
  border-color:var(--accent-strong);
  background:radial-gradient(circle at 0 0,var(--accent-soft),transparent 60%);
  color:var(--text);
  box-shadow:0 0 16px rgba(0,0,0,0.85);
}

.sidebar-footer{
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid rgba(15,23,42,0.7);
}

.main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* TOPBAR */

.topbar{
  padding:12px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--border);
  background:rgba(6,10,18,0.96);
  backdrop-filter:blur(14px);
}

.topbar-left{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.topbar-left h1{
  margin:0;
  font-size:17px;
  font-weight:600;
}

.topbar-left span{
  font-size:12px;
  color:var(--muted);
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* PILLS / INPUTS */

.pill{
  border-radius:999px;
  border:1px solid var(--border);
  padding:6px 10px;
  display:flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(135deg,#050814,#050a18);
  font-size:11px;
}

.pill-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--success);
  box-shadow:0 0 12px rgba(83,211,141,0.8);
}

.select,
.input{
  background:#050912;
  border-radius:999px;
  border:1px solid var(--border);
  padding:6px 10px;
  font-size:12px;
  color:var(--text);
  outline:none;
  min-width:0;
  font-family:inherit;
}

.select:focus,
.input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent-soft);
}

.badge{
  border-radius:999px;
  border:1px solid var(--border);
  padding:2px 6px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.pill--disabled{
  opacity:0.55;
  filter:grayscale(0.4);
}

/* CONTENT */

.content{
  padding:14px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
}

#page-root{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
}

.subheader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
}

.grid-2{
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr);
  gap:14px;
  min-height:0;
}

/* KARTY / TABULKY */

.card{
  background:
    radial-gradient(circle at 0 0,rgba(255,179,0,0.08),transparent 70%),
    linear-gradient(145deg,#050814,#050a18);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  padding:10px 11px 9px;
  min-height:0;
}

.card-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  margin-bottom:8px;
}

.card-header h2{
  margin:0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--muted);
}

.card-header small{
  font-size:11px;
  color:var(--muted);
}

.card-body{
  font-size:12px;
  color:var(--muted);
}

.table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

.table th,
.table td{
  padding:5px 6px;
  border-bottom:1px solid rgba(15,23,42,0.85);
}

.table th{
  font-weight:500;
  color:var(--muted);
  font-size:11px;
  text-align:left;
}

.table tr:hover td{
  background:#050913;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:7px;
  font-size:12px;
}

.stat-card{
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:#050913;
  padding:7px 8px;
}

.stat-label{
  font-size:11px;
  color:var(--muted);
}

.stat-value{
  font-size:15px;
  font-weight:600;
}

.muted{
  color:var(--muted);
  font-size:11px;
}

.inline-code{
  font-family:monospace;
  font-size:11px;
  background:#020617;
  border-radius:4px;
  padding:1px 4px;
}

/* LOGIN */

.login-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  padding-top:40px;
  padding-bottom:40px;
}

.login-card{
  max-width:380px;
  width:100%;
}

.login-btn{
  width:100%;
  border-radius:12px;
  padding:10px 14px;
  font-size:14px;
  font-weight:600;
  border:1px solid var(--accent-strong);
  background:linear-gradient(135deg,#050814,#0a0f1a);
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:0.15s;
}

.login-btn:hover{
  box-shadow:0 0 18px rgba(255,179,0,0.35),
             inset 0 0 12px rgba(255,179,0,0.12);
  border-color:var(--accent);
}

.login-emoji{
  font-size:18px;
}

/* PROFIL MENU + PROFIL */

.profile-menu{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.profile-dropdown{
  position:absolute;
  bottom:56px;
  left:0;
  right:0;
  padding:6px;
  border-radius:12px;
  background:linear-gradient(160deg,#050814,#050a18);
  border:1px solid var(--border);
  box-shadow:0 18px 40px rgba(0,0,0,0.9);
  font-size:12px;
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .14s ease-out,transform .14s ease-out;
  z-index:20;
}

.profile-menu[data-open="true"] .profile-dropdown{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.profile-dropdown-separator{
  border-top:1px solid rgba(15,23,42,0.85);
  margin:6px 0;
}

.profile-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:6px 7px;
  border-radius:8px;
  cursor:pointer;
}

.profile-item:hover{
  background:rgba(15,23,42,0.9);
}

.profile-item-label{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text);
}

.profile-item-label span.emoji{
  font-size:15px;
}

.profile-item-suffix{
  font-size:11px;
  color:var(--muted);
}

/* moderní profil blok */

.profile-main{
  display:flex;
  align-items:center;
  padding:8px 12px;
  background:rgba(255, 255, 255, 0.03);
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:12px;
  gap:10px;
  width:100%;
  cursor:pointer;
  transition:0.15s ease;
}

.profile-main:hover{
  background:rgba(255, 255, 255, 0.05);
  border-color:rgba(255, 255, 255, 0.12);
}

.profile-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05);
  display:flex;
  align-items:center;
  justify-content:center;
}

.profile-avatar-image{
  width:100%;
  height:100%;
  object-fit:cover;
}

.profile-avatar-initials{
  font-weight:600;
  font-size:14px;
  color:var(--text);
}

.profile-info{
  display:flex;
  flex-direction:column;
  line-height:1.2;
  min-width:0;
}

.profile-name{
  text-shadow:0 0 6px rgba(255,255,255,0.25);
  font-size:14px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

.profile-id{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

.profile-caret{
  margin-left:auto;
  color:var(--muted);
  font-size:11px;
}

/* ROZLOŽENÍ SKLADŮ */

.stock-layout{
  display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(260px,1fr);
  gap:14px;
}

@media (max-width:980px){
  body{display:block;}
  .app{flex-direction:column;}
  .sidebar{
    display:flex;
    width:100%;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .topbar{
    position:sticky;
    top:0;
    z-index:5;
  }
  .grid-2,
  .stock-layout{
    grid-template-columns:1fr;
  }
}

/* STARŠÍ STOCK KARTY (můžeš používat pro jiné výpisy) */

.stock-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:480px;
  overflow:auto;
  padding-right:2px;
}

.stock-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1.3fr);
  gap:10px;
  align-items:flex-start;
  padding:8px 10px 8px 12px;
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:linear-gradient(135deg,#050913,#050814);
}

@media (max-width:900px){
  .stock-card{
    grid-template-columns:1fr;
  }
}

.stock-strip{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  border-radius:3px 0 0 3px;
}

.strip-anv{background:#facc15;}
.strip-csu{background:#38bdf8;}
.strip-field{background:#22c55e;}

.stock-main{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.stock-title-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.stock-name{
  font-size:14px;
  font-weight:600;
}

.stock-code{
  font-size:11px;
  border-color:var(--accent-soft);
  background:#020617;
}

.stock-location{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  font-size:11px;
  color:var(--muted);
}

.stock-desc{
  font-size:11px;
  line-height:1.35;
}

.stock-meta{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:11px;
}

.stock-meta .meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* STATUSY – základ staršího layoutu */

.stock-status-ok{
  border-color:rgba(83,211,141,0.7);
  color:var(--success);
}

.stock-status-warning{
  border-color:#fbbf24;
  color:#fde68a;
}

/* === STOCKS LIST + DETAIL – NOVÝ LAYOUT === */

.stocks-shell{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(320px,1.3fr);
  gap:14px;
}

@media (max-width:980px){
  .stocks-shell{
    grid-template-columns:1fr;
  }
}

.stocks-list-card,
.stocks-detail-card{
  background:
    radial-gradient(circle at 0 0, rgba(255,179,0,0.10), transparent 60%),
    linear-gradient(145deg,#050814,#050a18);
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 18px 40px rgba(0,0,0,0.65);
}

.stocks-detail-card{
  background:
    radial-gradient(circle at 100% 0, rgba(17,196,255,0.08), transparent 60%),
    linear-gradient(145deg,#050814,#050a18);
}

.stocks-list-header,
.stocks-detail-header{
  align-items:center;
}

.stocks-list-header-actions,
.stocks-detail-header-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* SEARCH BAR */

.stocks-search-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.stocks-search-pill{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(15,23,42,0.95);
}

.stocks-search-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 10px rgba(255,179,0,0.7);
}

.stocks-search-input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  font-size:12px;
  color:var(--text);
  font-family:inherit;
}

.stocks-search-right{
  display:flex;
  align-items:center;
}

.stocks-live-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  border-radius:999px;
  padding:3px 8px;
  border:1px solid rgba(34,197,94,0.35);
  background:rgba(5,16,11,0.9);
  color:var(--muted);
}

.stocks-live-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 10px rgba(34,197,94,0.9);
}

/* FILTR BAR */

.stocks-filter-bar{
  margin-bottom:10px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.9);
  background:
    radial-gradient(circle at 0 0,rgba(255,179,0,0.04),transparent 60%),
    rgba(3,7,18,0.9);
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
}

.stocks-filter-group{
  min-width:180px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.stocks-filter-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.stocks-filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.pill--filter{
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.5);
  background:rgba(15,23,42,0.98);
  padding:4px 9px;
  font-size:11px;
  color:var(--muted);
  cursor:pointer;
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}

.pill--filter:hover{
  border-color:var(--accent-soft);
  box-shadow:0 0 10px rgba(0,0,0,0.8);
  color:var(--text);
}

.pill--filter.pill--active{
  border-color:var(--accent);
  background:linear-gradient(135deg,rgba(56,189,248,0.18),rgba(251,191,36,0.12));
  color:var(--text);
  box-shadow:0 0 0 1px rgba(56,189,248,0.3);
}

/* HLAVIČKA SEZNAMU */

.stocks-list-head{
  display:grid;
  grid-template-columns:40px minmax(0,1.5fr) minmax(0,1fr);
  gap:10px;
  padding:4px 10px 6px;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.stocks-list-head-col--index{text-align:left;}
.stocks-list-head-col--right{text-align:right;}

/* SEZNAM SKLADŮ – FINÁLNÍ FLEX LAYOUT */

.stocks-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:440px;
  overflow:auto;
  padding-right:2px;
}

/* barevný proužek vlevo */
.stock-row::before{
  content:"";
  position:absolute;
  left:4px;
  top:6px;
  bottom:6px;
  width:3px;
  border-radius:999px;
  background:rgba(148,163,184,0.45);
  transition:background .15s ease, box-shadow .15s ease;
}

/* základ řádku */

.stock-row{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,0.95);
  background:linear-gradient(135deg,#020617,#020817);
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .08s ease;
}

.stock-row:hover{
  border-color:var(--accent-soft);
  box-shadow:0 0 24px rgba(0,0,0,0.9);
}

.stock-row:hover::before{
  background:var(--accent-soft);
  box-shadow:0 0 10px rgba(255,179,0,0.8);
}

.stock-row--active,
.stock-row--selected{
  border-color:var(--accent);
  box-shadow:
    0 0 0 1px rgba(255,179,0,0.35),
    0 0 26px rgba(0,0,0,0.9);
  background:
    radial-gradient(circle at 0 0, rgba(255,179,0,0.20), transparent 65%),
    linear-gradient(135deg,#020617,#050814);
}

.stock-row--active::before,
.stock-row--selected::before{
  background:var(--accent);
  box-shadow:0 0 14px rgba(255,179,0,0.9);
}

/* část vlevo */

.stock-row-primary{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.stock-row-index-pill{
  min-width:26px;
  padding:3px 0;
  border-radius:999px;
  text-align:center;
  font-size:11px;
  color:var(--muted);
  border:1px solid rgba(148,163,184,0.4);
  background:rgba(15,23,42,0.9);
}

.stock-type-icon{
  width:28px;
  height:28px;
  border-radius:10px;
  padding:3px;
  background:radial-gradient(circle at 0 0, rgba(248,250,252,0.12), transparent 70%);
  border:1px solid rgba(148,163,184,0.35);
  box-shadow:0 8px 18px rgba(0,0,0,0.8);
}

.stock-row-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.stock-row-title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}

.stock-row-name{
  font-weight:600;
  font-size:14px;
  color:var(--text);
}

.stock-row-code-pill{
  display:inline-flex;
  align-items:center;
  padding:1px 8px;
  margin:0 6px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  background:rgba(17,194,255,0.16);
  border:1px solid rgba(17,194,255,0.7);
  color:#e7f7ff;
}

.stock-row-tag{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,0.6);
  color:rgba(125,211,252,0.95);
  background:rgba(8,47,73,0.6);
}

.stock-row-sub{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  font-size:11px;
  color:var(--muted);
}

/* pravá část řádku */

.stock-row-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  font-size:11px;
}

.stock-row-meta-top{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
}

.stock-row-meta-tag{
  color:var(--muted);
}

.stock-row-expiry{
  font-size:11px;
  color:var(--muted);
}

/* malé badge */

.stock-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  line-height:1.3;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  margin-right:6px;
}

.stock-badge-region{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.12);
  opacity:0.9;
}

.stock-badge-group{
  text-transform:uppercase;
  letter-spacing:.04em;
}

.stock-badge-owner{opacity:0.8;}

.stock-badge-name{
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* zvýraznění prioritních skladů v seznamu */

.stock-row--priority{
  border-left:3px solid var(--accent, #11C2FF);
  background:rgba(17, 194, 255, 0.04);
}

.stock-badge-priority{
  border-radius:999px;
  padding:0 8px;
  font-size:.75rem;
  background:rgba(255, 215, 0, 0.08);
  border:1px solid rgba(255, 215, 0, 0.4);
}

/* box pro historii */

.stock-history-box{
  padding:8px 10px;
  border-radius:8px;
  background:rgba(255,255,255,0.02);
  border:1px dashed rgba(255,255,255,0.06);
}

/* STATUS PILL – LIST */

.stock-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:2px 8px;
  border:1px solid var(--border);
  font-size:11px;
  background:rgba(15,23,42,0.8);
}

.stock-status-ok,
.stock-status-active{
  border-color:rgba(34,197,94,0.8);
  color:var(--success);
  background:radial-gradient(circle at 0 0,
    rgba(34,197,94,0.22),
    transparent 70%);
}

.stock-status-warning{
  border-color:rgba(250,204,21,0.9);
  color:#fde68a;
  background:radial-gradient(circle at 0 0,
    rgba(250,204,21,0.22),
    transparent 70%);
}

.stock-status-expired{
  border-color:rgba(248,113,113,0.9);
  color:#fecaca;
  background:radial-gradient(circle at 0 0,
    rgba(248,113,113,0.22),
    transparent 70%);
}

.stocks-status-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 10px currentColor;
}

/* IKONY TYPU – DETAIL */

.stock-type-icon--detail{
  width:36px;
  height:36px;
  border-radius:10px;
  padding:4px;
  background:radial-gradient(circle at 0 0, rgba(248,250,252,0.1), transparent 70%);
  border:1px solid rgba(148,163,184,0.45);
  box-shadow:0 12px 24px rgba(0,0,0,0.85);
}

/* DETAIL SKLADU – SD2 VERZE */

.sd2-card{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* HLAVIČKA */

.sd2-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding-bottom:8px;
}

.sd2-header-main{
  display:flex;
  gap:10px;
  align-items:center;
}

.sd2-icon{
  width:38px;
  height:38px;
  border-radius:10px;
}

.sd2-heading-text{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.sd2-line-top{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:11px;
}

.sd2-tag{
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.25);
  color:#cfd7f7;
}

.sd2-tag-priority{
  border-color:rgba(255,193,67,0.8);
  background:rgba(255,193,67,0.16);
  color:#ffd973;
}

.sd2-name{
  margin:0;
  font-size:19px;
  font-weight:600;
}

.sd2-sub{
  margin:0;
  font-size:12px;
  color:#8f9ab6;
}

.sd2-header-actions{
  display:flex;
  flex-direction:row;
  gap:8px;
  align-items:center;
}

/* responsivita hlavičky */

@media (max-width:1450px){
  .sd2-header{
    flex-direction:column;
    align-items:stretch;
  }
  .sd2-header-actions{
    flex-direction:column;
    align-self:flex-end;
    align-items:flex-end;
  }
}

/* KÓD SKLADU – LIŠTA */

.sd2-code-bar{
  border-radius:12px;
  border:1px solid rgba(17,194,255,0.35);
  background:radial-gradient(circle at top left,
    rgba(17,194,255,0.18),
    rgba(6,10,20,0.96));
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.sd2-code-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#c3ddff;
}

.sd2-code-main{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.sd2-code-value{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(3,6,18,0.9);
  border:1px solid rgba(255,255,255,0.45);
  font-weight:700;
  font-size:18px;
  letter-spacing:0.18em;
}

.sd2-code-copy{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(5,8,18,0.95);
  font-size:12px;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
}

.sd2-code-copy:hover{
  background:rgba(10,16,30,1);
  border-color:var(--accent-soft);
}

.sd2-code-hint{
  margin:0;
  font-size:11px;
  color:#b5c3e2;
}

/* GRID INFORMACÍ */

.sd2-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.sd2-tile{
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  background:radial-gradient(circle at top, rgba(255,255,255,0.02), rgba(4,7,15,0.98));
  padding:8px 10px;
}

.sd2-tile-title{
  margin:0 0 4px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#9da9c7;
}

.sd2-tile-main{
  margin:0;
  font-size:13px;
  font-weight:500;
}

.sd2-tile-note{
  margin:2px 0 0 0;
  font-size:12px;
  color:#b7c4e5;
}

.sd2-tile-wide{
  grid-column:1 / -1;
}

/* STAV – SPODNÍ BUBLINA */

.sd2-status-strip{
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.35);
  background:radial-gradient(circle at 0 0,
    rgba(15,23,42,0.95),
    rgba(2,6,23,0.98));
  padding:8px 10px;
  display:flex;
  gap:10px;
  align-items:center;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.sd2-status-strip--active{
  border-color:rgba(34,197,94,0.6);
  box-shadow:0 0 18px rgba(34,197,94,0.25);
  background:radial-gradient(circle at 0 0,
    rgba(34,197,94,0.14),
    rgba(2,6,23,0.98));
}

.sd2-status-strip--warning{
  border-color:rgba(250,204,21,0.7);
  box-shadow:0 0 18px rgba(250,204,21,0.24);
  background:radial-gradient(circle at 0 0,
    rgba(250,204,21,0.14),
    rgba(2,6,23,0.98));
}

.sd2-status-strip--expired{
  border-color:rgba(248,113,113,0.8);
  box-shadow:0 0 18px rgba(248,113,113,0.3);
  background:radial-gradient(circle at 0 0,
    rgba(248,113,113,0.14),
    rgba(2,6,23,0.98));
}

.sd2-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
}

.sd2-status-pill-active{
  color:#bbf7d0;
  background:linear-gradient(135deg,
    rgba(34,197,94,0.26),
    rgba(34,197,94,0.05));
}

.sd2-status-pill-warning{
  color:#fef3c7;
  background:linear-gradient(135deg,
    rgba(250,204,21,0.26),
    rgba(250,204,21,0.05));
}

.sd2-status-pill-expired{
  color:#fecaca;
  background:linear-gradient(135deg,
    rgba(248,113,113,0.26),
    rgba(248,113,113,0.05));
}

.sd2-status-dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:currentColor;
}

.sd2-status-text{
  margin:0;
  font-size:12px;
  color:#c5d0ec;
}

/* RESPONSIVE DETAIL */

@media (max-width:900px){
  .sd2-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .sd2-header-actions{
    align-self:stretch;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .sd2-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .sd2-status-strip{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* GLOBÁLNÍ TLAČÍTKA */

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.9);
  font-size:13px;
  font-weight:500;
  color:var(--text);
  background:
    radial-gradient(circle at 0 0, rgba(148,163,184,0.16), transparent 60%),
    rgba(15,23,42,0.96);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 10px 26px rgba(0,0,0,0.9);
  cursor:pointer;
  white-space:nowrap;
  outline:none;
  user-select:none;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    border-color .12s ease,
    background .12s ease,
    color .12s ease;
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 120%, rgba(250,204,21,0.35), transparent 60%);
  transition:opacity .18s ease;
  z-index:-1;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(148,163,184,0.7),
    0 14px 32px rgba(0,0,0,0.95);
}

.btn:hover::before{
  opacity:1;
}

.btn:active{
  transform:translateY(0);
  box-shadow:
    0 0 0 1px rgba(15,23,42,1),
    0 6px 16px rgba(0,0,0,0.9);
}

.btn-sm{
  padding:5px 11px;
  font-size:12px;
}

.btn > svg,
.btn > span.icon{
  font-size:14px;
}

/* primární */

.btn-soft-primary,
.btn-primary{
  border-color:rgba(250,204,21,0.9);
  color:#050712;
  background:
    radial-gradient(circle at 0 0, rgba(250,204,21,0.30), transparent 65%),
    linear-gradient(135deg, #f97316, #facc15);
  box-shadow:
    0 0 0 1px rgba(250,204,21,0.45),
    0 14px 30px rgba(0,0,0,1);
}

.btn-soft-primary:hover,
.btn-primary:hover{
  background:
    radial-gradient(circle at 0 0, rgba(250,250,210,0.35), transparent 70%),
    linear-gradient(135deg, #fb923c, #fde047);
  box-shadow:
    0 0 0 1px rgba(250,250,210,0.75),
    0 18px 36px rgba(0,0,0,1);
}

/* sekundární */

.btn-soft-ghost,
.btn-ghost{
  border-color:rgba(148,163,184,0.7);
  color:var(--text);
  background:
    radial-gradient(circle at 0 0, rgba(148,163,184,0.18), transparent 65%),
    rgba(15,23,42,0.96);
}

.btn-soft-ghost:hover,
.btn-ghost:hover{
  border-color:var(--accent-soft);
  color:var(--text);
}

/* deaktivované */

.btn[disabled],
.btn.disabled{
  opacity:.45;
  cursor:default;
  pointer-events:none;
  transform:none;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 6px 18px rgba(0,0,0,0.75);
}

/* ghost ikon button (X v modalu) */

.btn-ghost-icon{
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:16px;
  cursor:pointer;
  padding:4px 6px;
  border-radius:999px;
  transition:background .15s ease, color .15s ease;
}

.btn-ghost-icon:hover{
  background:rgba(15,23,42,0.9);
  color:var(--text);
}

.btn-ghost-icon--tiny{
  padding:0 4px;
  font-size:11px;
  line-height:1;
}

/* MODAL / FORM */

.hidden{display:none !important;}

.modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:1.5rem !important;
  z-index:9999 !important;
  background:radial-gradient(circle at top, rgba(15,23,42,0.8), rgba(3,7,18,0.95)) !important;
  backdrop-filter:blur(3px) !important;
}

.modal-backdrop.hidden{
  display:none !important;
}

.modal,
.modal.modal-lg{
  max-width:920px;
  width:100%;
  max-height:90vh !important;
  border-radius:16px;
  border:1px solid rgba(148,163,184,0.45);
  background:
    radial-gradient(circle at 0 0, rgba(255,179,0,0.18), transparent 65%),
    rgba(15,23,42,0.98);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.95),
    0 0 0 1px rgba(15,23,42,0.9);
  padding:14px 16px 14px;
  display:flex;
  flex-direction:column;
  overflow-y:auto !important;
}

/* moderní form layout */

#new-stock-form{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}

.stock-form-modern{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  max-width:880px;
}

.stock-form-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  padding-bottom:0.75rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.stock-form-header h2{
  margin:0;
  font-size:1.3rem;
}

.stock-form-header p{
  margin:0.25rem 0 0;
  font-size:0.85rem;
  opacity:0.8;
}

.stock-form-badge{
  align-self:center;
  font-size:0.75rem;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle at top left, rgba(255,215,0,0.12), transparent),
    rgba(255,255,255,0.02);
}

.stock-form-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding-right:0.4rem;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.form-section{
  padding:0.8rem 1rem 1.1rem;
  border-radius:1rem;
  background:
    radial-gradient(circle at top left, rgba(255,215,0,0.12), transparent 55%),
    rgba(10,13,22,0.95);
  border:1px solid rgba(255,255,255,0.06);
}

.form-section-top h3{
  margin:0;
  font-size:1rem;
}

.form-section-desc{
  margin:0.25rem 0 0;
  font-size:0.8rem;
  opacity:0.85;
}

.form-section-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1rem 1.25rem;
  margin-top:0.9rem;
}

.form-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
}

.form-field-full{
  grid-column:1 / -1;
}

.form-field label{
  display:flex;
  align-items:center;
  gap:0.25rem;
  font-size:0.85rem;
  margin-bottom:0.3rem;
}

.required{
  color:#ff4b4b;
  font-weight:600;
}

.field-hint{
  display:block;
  margin-top:0.25rem;
  font-size:0.75rem;
  opacity:0.7;
}

.input-with-icon{
  position:relative;
}

.input-with-icon .input-icon{
  position:absolute;
  left:0.7rem;
  top:50%;
  transform:translateY(-50%);
  font-size:0.85rem;
  opacity:0.7;
  pointer-events:none;
}

.input-with-icon .input{
  padding-left:2rem;
}

.input-readonly{
  opacity:0.9;
}

/* footer */

.stock-form-footer{
  margin-top:0.5rem;
  padding-top:0.75rem;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0.75rem;
}

.stock-form-meta{
  font-size:0.75rem;
  opacity:0.75;
}

.stock-form-actions{
  display:flex;
  gap:0.5rem;
}

/* responsivita modalu */

@media (max-width:720px){
  .stock-form-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .form-section-grid{
    grid-template-columns:1fr;
  }
  .stock-form-footer{
    flex-direction:column-reverse;
    align-items:stretch;
  }
  .stock-form-actions{
    width:100%;
  }
  .stock-form-actions .btn{
    flex:1;
    justify-content:center;
  }
}

/* SCROLLBARY – modal + form */

.modal.modal-lg::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.stock-form-body::-webkit-scrollbar{
  width:8px;
}

.modal.modal-lg::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track,
.stock-form-body::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.05);
  border-radius:10px;
}

.modal.modal-lg::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
.stock-form-body::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #3b3f45, #1f242a);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
}

.modal.modal-lg::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover,
.stock-form-body::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #50545a, #2a2f35);
}

/* LOCATION SUGGESTIONS */

.location-suggestions{
  margin-top:4px;
  border-radius:6px;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(8px);
  max-height:220px;
  overflow-y:auto;
  z-index:30;
}

.location-suggestions.hidden{
  display:none;
}

.location-suggestion-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  cursor:pointer;
  font-size:0.85rem;
}

.location-suggestion-item:hover{
  background:rgba(255,255,255,0.06);
}

.location-suggestion-icon{
  width:18px;
  height:18px;
  object-fit:contain;
  opacity:0.9;
}

.location-suggestion-text{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

/* scrollbar v seznamu lokací */

#stock-location-suggestions::-webkit-scrollbar{
  width:8px;
}

#stock-location-suggestions::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.05);
  border-radius:10px;
}

#stock-location-suggestions::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #3b3f45, #1f242a);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
}

#stock-location-suggestions::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #50545a, #2a2f35);
}

/* SELECT STYL */

select.input option{
  background-color:#050810;
  color:#e8f3ff;
  padding:0.35rem 0.5rem;
  font-size:0.9rem;
}

select.input optgroup{
  background-color:#050810;
  color:#aab4c8;
}

select.input option:checked{
  background-color:#111827;
  color:#ffffff;
}

select.input::-webkit-scrollbar{
  width:8px;
}

select.input::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.05);
}

select.input::-webkit-scrollbar-thumb{
  background:#3b3f45;
  border-radius:10px;
}

select.input::-webkit-scrollbar-thumb:hover{
  background:#50545a;
}

/* OPS-STOCK DETAIL (pokročilá karta – můžeš použít/skrýt podle potřeby) */

.ops-stock-card{
  background:#05070d;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.06);
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.ops-stock-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding-bottom:10px;
}

.ops-stock-header-left{
  display:flex;
  gap:12px;
}

.ops-stock-icon img{
  width:40px;
  height:40px;
}

.ops-stock-heading{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.ops-stock-name{
  margin:0;
  font-size:20px;
  font-weight:600;
}

.ops-stock-subtitle{
  margin:0;
  font-size:12px;
  color:#9ca8bc;
}

.ops-stock-tags-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:11px;
}

.ops-tag{
  padding:2px 8px;
  border-radius:999px;
  background:rgba(17,194,255,0.14);
  border:1px solid rgba(17,194,255,0.4);
}

.ops-tag--outline{
  background:transparent;
  border:1px solid rgba(255,255,255,0.4);
}

.ops-tag--accent{
  background:rgba(255,184,0,0.14);
  border-color:rgba(255,184,0,0.6);
}

.ops-stock-header-right{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}

.ops-stock-status-block{
  text-align:right;
  font-size:12px;
}

.ops-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
}

.ops-status-pill--expired{
  background:rgba(255,96,96,0.18);
  color:#ffaaaa;
}

.ops-status-text{
  margin-top:4px;
}

.ops-stock-actions{
  display:flex;
  gap:6px;
}

.ops-btn{
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  border:none;
  cursor:pointer;
}

.ops-btn--primary{
  background:#ffb800;
  color:#111;
}

.ops-btn--ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,0.25);
  color:#dde6ff;
}

.ops-stock-stats-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.ops-stat-box{
  background:rgba(7,10,17,0.95);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  padding:9px 10px;
}

.ops-stat-box h3{
  margin:0 0 4px 0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#8c97ac;
}

.ops-stat-main{
  margin:0;
  font-size:13px;
  font-weight:500;
}

.ops-stat-note{
  margin:2px 0 0 0;
  font-size:12px;
  color:#9ca8bc;
}

.ops-stock-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}

.ops-col{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ops-card{
  background:rgba(7,10,17,0.95);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  padding:10px 12px;
}

.ops-card h3{
  margin:0 0 6px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#8c97ac;
}

.ops-card-intro{
  margin:0 0 6px;
  font-size:13px;
}

.ops-def-list{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
}

.ops-def-list dt{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#7b879a;
}

.ops-def-list dd{
  margin:0 0 4px 0;
}

.ops-pill{
  padding:1px 8px;
  border-radius:999px;
  font-size:11px;
}

.ops-pill--high{
  background:rgba(255,184,0,0.16);
  color:#ffd873;
}

.ops-list{
  margin:0;
  padding-left:18px;
  font-size:13px;
}

.ops-list--small{
  font-size:12px;
}

.ops-timeline{
  list-style:none;
  margin:0;
  padding:0;
  font-size:12px;
}

.ops-timeline li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px 10px;
  padding:4px 0;
}

.ops-tl-time{
  color:#8c97ac;
  font-size:11px;
}

.ops-tl-text{
  font-size:13px;
}

.ops-note{
  margin:0 0 4px;
  font-size:13px;
}

@media (max-width:960px){
  .ops-stock-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .ops-stock-header-right{
    align-items:flex-start;
  }
  .ops-stock-stats-row{
    grid-template-columns:minmax(0,1fr);
  }
  .ops-stock-main-grid{
    grid-template-columns:minmax(0,1fr);
  }
}
/* === Formuláře v modalu – sticky footer dole === */

/* Form uvnitř modalu jako flex sloupec */
.modal .stock-form {
  display: flex;
  flex-direction: column;
  max-height: 90vh;      /* nikdy výš než okno */
}

/* Tělo formuláře (grid) scrolluje, footer zůstává dole */
.modal .stock-form-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.4rem; /* místo na scrollbar */
}

/* Spodní lišta s tlačítky – přilepená dole */
.modal .stock-form-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background:
    linear-gradient(to top,
      rgba(3, 7, 18, 0.98),
      rgba(3, 7, 18, 0.85),
      transparent);
  backdrop-filter: blur(4px);
}
/* Dvě kolonky vedle sebe */
.manage-row-2cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 12px;
  align-items: start;
}

/* Responsivní – na mobilu pod sebe */
@media (max-width: 900px) {
  .manage-row-2cols {
    grid-template-columns: 1fr;
  }
}