/* ============================================================
   Tiskalnica Portal — PIM (Products) module styles
   Reuses dl-* (designs.css) for tabs/kpis/toolbar/kv/banner.
   ============================================================ */

/* ---------- sub-tab bar across the top ---------- */
.pim-subnav { display: flex; gap: 3px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 4px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.pim-subtab { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 7px 13px; border-radius: var(--r-sm);
  cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; }
.pim-subtab:hover { background: var(--surface-2); color: var(--ink); }
.pim-subtab.on { background: var(--accent-soft); color: var(--accent-700); }
.pim-subtab svg { opacity: .85; }
.pim-subtab .ct { font-size: 10.5px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 0 6px; color: var(--ink-3); }
.pim-subtab.on .ct { background: #fff; border-color: var(--accent-soft-2); color: var(--accent-700); }

/* ---------- product thumbnail ---------- */
.pim-thumb { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-3); position: relative; overflow: hidden; font-weight: 700; }
.pim-thumb.lg { width: 64px; height: 64px; border-radius: 12px; }
.pim-thumb.miss { border-style: dashed; color: var(--ink-4); }
.pim-thumb .pim-thumb-x { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pim-thumb-gloss { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 60%); }

/* ---------- list name cell ---------- */
.pim-name { display: flex; align-items: center; gap: 11px; min-width: 200px; }
/* products table: let columns take natural width and the wrapper scroll, instead of crushing the name column */
.pim-ptable { min-width: 1300px; }
.pim-ptable .pim-name { min-width: 210px; }
.pim-ptable td:first-child { white-space: normal; }
.pim-name .nm { font-weight: 600; color: var(--ink); cursor: pointer; line-height: 1.3; overflow-wrap: break-word; word-break: normal; }
.pim-name .nm:hover { color: var(--accent-700); }
.pim-name .cd { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-4); margin-top: 1px; }

/* type pill with icon */
.pim-typ { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }

/* ---------- store dots ---------- */
.pim-stores { display: inline-flex; align-items: center; gap: 4px; }
.pim-storedot { width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; font-size: 8px; font-weight: 800; color: #fff; }
.pim-storemore { font-size: 11px; color: var(--ink-4); font-weight: 700; margin-left: 2px; }

/* ---------- completeness score ---------- */
.pim-score { display: inline-flex; align-items: center; gap: 8px; }
.pim-score .bar { width: 54px; height: 6px; border-radius: 6px; background: #edf0f5; overflow: hidden; flex: 0 0 auto; }
.pim-score .bar > i { display: block; height: 100%; border-radius: 6px; }
.pim-score .pct { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700; color: var(--ink-2); min-width: 30px; }
.pim-score-fill-hi { background: var(--good); } .pim-score-fill-mid { background: var(--warn); } .pim-score-fill-lo { background: var(--critical); }

/* completeness ring (detail overview) */
.pim-ring { --p: 0; width: 92px; height: 92px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--ring-c) calc(var(--p) * 1%), #edf0f5 0); display: grid; place-items: center; }
.pim-ring .inner { width: 70px; height: 70px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; flex-direction: column; }
.pim-ring .v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.pim-ring .l { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); margin-top: 2px; }

/* ---------- warning chips inline ---------- */
.pim-warns { display: flex; flex-wrap: wrap; gap: 4px; }
.pim-wchip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px;
  background: var(--warn-soft); color: var(--warn); white-space: nowrap; }
.pim-wchip.crit { background: var(--critical-soft); color: var(--critical); }
.pim-okchip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px; background: var(--good-soft); color: var(--good); }

/* ---------- gallery (card) view ---------- */
.pim-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pim-gcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow .14s, transform .14s, border-color .14s; display: flex; flex-direction: column; }
.pim-gcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--accent-soft-2); }
.pim-gcard .pim-gimg { height: 130px; display: grid; place-items: center; position: relative; color: #fff; font-weight: 800; font-size: 30px;
  background: linear-gradient(135deg, var(--gc1), var(--gc2)); }
.pim-gcard .pim-gimg.miss { background: var(--surface-2); color: var(--ink-4); border-bottom: 1px dashed var(--border); }
.pim-gcard .pim-gbody { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.pim-gcard .pim-gname { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.pim-gcard .pim-gsku { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-4); }
.pim-gcard .pim-gmeta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.pim-gcard .pim-gprice { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 14px; color: var(--ink); }
.pim-gcard .pim-gtop { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pim-gcard .pim-grow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- variant matrix ---------- */
.pim-matrix-wrap { overflow-x: auto; }
.pim-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.pim-matrix th { position: sticky; top: 0; background: var(--surface); text-align: left; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); padding: 9px 11px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pim-matrix td { padding: 9px 11px; border-bottom: 1px solid var(--border-2); white-space: nowrap; vertical-align: middle; }
.pim-matrix tbody tr:hover { background: var(--surface-2); }
.pim-matrix .sticky-l { position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: 1px 0 0 var(--border-2); }
.pim-matrix tbody tr:hover .sticky-l { background: var(--surface-2); }
.pim-matrix .mono { font-family: 'JetBrains Mono', monospace; }
.pim-matrix tr.off { opacity: .5; }
.pim-vswatch { display: inline-flex; align-items: center; gap: 8px; }
.pim-vswatch .sw { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0,0,0,.12); flex: 0 0 auto; }
.pim-vswatch .nm { font-weight: 600; color: var(--ink); }
.pim-sizechip { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border); font-weight: 700; font-size: 11.5px; color: var(--ink-2); }
.pim-stockcell { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.pim-stockcell.zero { color: var(--critical); }
.pim-stockcell.lowv { color: var(--warn); }
.pim-toggle { width: 34px; height: 20px; border-radius: 20px; background: var(--good); position: relative; border: none; cursor: pointer; flex: 0 0 auto; transition: background .15s; }
.pim-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.pim-toggle.off { background: #c8cedb; }
.pim-toggle.off::after { left: 16px; }

/* bulk action bar */
.pim-bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pim-bulkbar .lbl { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-right: 4px; }

/* ---------- store publishing matrix ---------- */
.pim-storegrid { display: grid; gap: 12px; }
.pim-storecard { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.pim-storecard .sc-head { display: flex; align-items: center; gap: 11px; padding: 12px 15px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.pim-storecard .sc-badge { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; flex: 0 0 auto; }
.pim-storecard .sc-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.pim-storecard .sc-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.pim-storecard .sc-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border-2); }
.pim-storecard .sc-cell { background: var(--surface); padding: 10px 13px; }
.pim-storecard .sc-cell .cl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-4); margin-bottom: 3px; }
.pim-storecard .sc-cell .cv { font-size: 13px; font-weight: 600; color: var(--ink); }
.pim-storecard .sc-cell .cv.mono { font-family: 'JetBrains Mono', monospace; }
.pim-localebar { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px; background: var(--info-soft); color: var(--info); }

/* ---------- add store panel ---------- */
.pim-addstore { margin-top: 14px; border: 1px dashed var(--border); border-radius: var(--r); background: var(--surface-2); padding: 14px 15px; }
.pim-addstore-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.pim-addstore-head .as-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.pim-addstore-head .as-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; max-width: 540px; line-height: 1.45; }
.pim-addstore .as-empty { font-size: 12.5px; color: var(--ink-3); padding: 6px 2px; }
.pim-addstore-list { display: flex; flex-direction: column; gap: 8px; }
.pim-addstore-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
.pim-addstore-row .as-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.pim-addstore-row .as-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.pim-addstore-row .as-pre { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.pim-addstore-row .as-pre-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-4); }

/* compact store matrix (publishing section, products × stores) */
.pim-pubmatrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.pim-pubmatrix th { background: var(--surface); padding: 9px 12px; text-align: center; font-size: 10.5px; font-weight: 700;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.pim-pubmatrix th.lft { text-align: left; position: sticky; left: 0; z-index: 2; }
.pim-pubmatrix td { padding: 9px 12px; border-bottom: 1px solid var(--border-2); text-align: center; }
.pim-pubmatrix td.lft { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; box-shadow: 1px 0 0 var(--border-2); }
.pim-pubmatrix tbody tr:hover td { background: var(--surface-2); }
.pim-pubcell { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; }
.pim-pubcell.ok { background: var(--good-soft); color: var(--good); }
.pim-pubcell.pending { background: var(--warn-soft); color: var(--warn); }
.pim-pubcell.error { background: var(--critical-soft); color: var(--critical); }
.pim-pubcell.no { color: #cbd2dd; }

/* ---------- media grid ---------- */
.pim-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 13px; }
.pim-mtile { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.pim-mtile .mt-img { height: 110px; display: grid; place-items: center; position: relative; color: #fff; font-weight: 800;
  background: linear-gradient(135deg, var(--mc1, #b8c0cf), var(--mc2, #97a1b3)); }
.pim-mtile .mt-img.miss { background: var(--surface-2); color: var(--ink-4); border-bottom: 1px dashed var(--border); }
.pim-mtile .mt-img .mt-kind { position: absolute; top: 7px; left: 7px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(0,0,0,.34); color: #fff; padding: 2px 7px; border-radius: 5px; backdrop-filter: blur(2px); }
.pim-mtile .mt-body { padding: 9px 11px; }
.pim-mtile .mt-label { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.pim-mtile .mt-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }

/* ---------- categories tree ---------- */
.pim-tree { display: flex; flex-direction: column; }
.pim-tnode { display: flex; align-items: center; gap: 10px; padding: 11px 6px; border-bottom: 1px solid var(--border-2); }
.pim-tnode:last-child { border-bottom: none; }
.pim-tnode.child { padding-left: 34px; }
.pim-tnode.child::before { content: ''; position: absolute; }
.pim-tnode .t-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-700); flex: 0 0 auto; }
.pim-tnode.child .t-ic { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--border); }
.pim-tnode .t-name { font-weight: 600; font-size: 13.5px; color: var(--ink); flex: 1 1 auto; }
.pim-tnode .t-ct { font-size: 11.5px; color: var(--ink-3); font-weight: 700; font-family: 'JetBrains Mono', monospace; }

/* ---------- attribute / swatch chips ---------- */
.pim-attr-vals { display: flex; flex-wrap: wrap; gap: 5px; }
.pim-attr-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); }
.pim-attr-chip .sw { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }

/* ---------- pricing waterfall ---------- */
.pim-cost-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-2); font-size: 13px; }
.pim-cost-row:last-child { border-bottom: none; }
.pim-cost-row .l { color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.pim-cost-row .l .swatch { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.pim-cost-row .v { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--ink); }
.pim-cost-row.sum { border-top: 2px solid var(--border); border-bottom: none; padding-top: 11px; margin-top: 3px; }
.pim-cost-row.sum .l { color: var(--ink); font-weight: 700; }
.pim-cost-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 6px 0 14px; background: var(--surface-2); }
.pim-cost-bar > i { display: block; height: 100%; }

/* design link rows */
.pim-dl-row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--border-2); }
.pim-dl-row:last-child { border-bottom: none; }
.pim-dl-main { flex: 1 1 auto; min-width: 0; }
.pim-dl-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.pim-dl-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pim-scope { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 5px; background: var(--info-soft); color: var(--info); }

/* quick actions panel */
.pim-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pim-qa-btn { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; text-align: left; }
.pim-qa-btn:hover { border-color: var(--accent-soft-2); background: var(--accent-soft); color: var(--accent-700); }
.pim-qa-btn svg { color: var(--ink-4); flex: 0 0 auto; }
.pim-qa-btn:hover svg { color: var(--accent-700); }

/* small section grid */
.pim-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .pim-2col, .pim-qa { grid-template-columns: 1fr; } }
.pim-3col { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .pim-3col { grid-template-columns: 1fr; } }

/* relation/base card */
.pim-relcard { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); cursor: pointer; transition: all .12s; }
.pim-relcard:hover { border-color: var(--accent-soft-2); background: var(--accent-soft); }
.pim-relcard .rc-id { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; color: var(--ink-2); }
.pim-relcard .rc-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.pim-relcard .rc-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* print-area diagram */
.pim-areas { display: flex; flex-wrap: wrap; gap: 7px; }
.pim-area { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); }
.pim-area .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }