/* ============================================================================
   LumenSpark - landing/product-visuals.css

   Read-only rekonstrukcija stvarnog sucelja aplikacije za marketinsku uporabu.
   Geometrija sidebara, KPI traka, zdravlje projekta, utilizacija i Spark uvidi
   preslikani su iz aplikacije; svi podaci su sanitizirani primjeri.
   Bez Chart.js, bez Sortable - samo CSS i inline SVG.
   ============================================================================ */

/* --- Sazeti rail (varijanta okvira za hero) ------------------------------
   Aplikacija ima collapsed sidebar na 52 px (--sidebar-w-col). U herojskom
   okviru koristimo tu varijantu: geometrija i lattice sidebara ostaju, a nema
   teksta preko kojeg bi lebdece kartice presle.
   -------------------------------------------------------------------------- */
.lsw-app.is-rail .lsw-app-body{grid-template-columns:52px minmax(0,1fr)}
.lsw-app-rail{
  position:relative;overflow:hidden;
  background:var(--lsw-brand);
  border-right:1px solid rgba(0,0,0,.45);
  padding:12px 0 16px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.lsw-app-rail::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient( 60deg,var(--lsw-lattice) 0,var(--lsw-lattice) 1px,transparent 1px,transparent var(--lsw-lattice-step)),
    repeating-linear-gradient(-60deg,var(--lsw-lattice) 0,var(--lsw-lattice) 1px,transparent 1px,transparent var(--lsw-lattice-step));
}
.lsw-app-rail>*{position:relative}
.lsw-app-rail-mark{
  display:flex;align-items:flex-end;gap:1.6px;height:15px;margin-bottom:8px;
}
.lsw-app-rail-mark i{
  width:2.6px;border-radius:2px;background:var(--lsw-on-dark);display:block;
}
.lsw-app-rail-mark i:nth-child(1){height:6px;opacity:.7}
.lsw-app-rail-mark i:nth-child(2){height:10px;opacity:.85}
.lsw-app-rail-mark i:nth-child(3){height:14px}
.lsw-app-rail-mark i:nth-child(4){height:11px;opacity:.8}
.lsw-app-rail-sep{
  width:22px;height:1px;background:var(--lsw-on-dark-border);flex:none;margin:2px 0;
}
/* Stavka: mala plocica u boji kategorije sidebara */
.lsw-app-rail-i{
  width:22px;height:22px;border-radius:6px;flex:none;
  display:grid;place-items:center;
  color:var(--lsw-node,var(--lsw-on-dark-3));
}
.lsw-app-rail-i::after{
  content:'';width:9px;height:9px;border-radius:2px;
  background:currentColor;opacity:.42;
}
.lsw-app-rail-i.is-active{
  background:rgba(204,120,92,.20);
  box-shadow:inset 2px 0 0 var(--lsw-accent);
  color:var(--lsw-accent);
}
.lsw-app-rail-i.is-active::after{opacity:1}

/* --- Okvir aplikacije ---------------------------------------------------- */
.lsw-app{
  position:relative;z-index:2;
  background:var(--lsw-bg);
  border:1px solid var(--lsw-border);
  border-radius:var(--lsw-r-lg);
  box-shadow:var(--lsw-sh-4);
  overflow:hidden;
  font-size:13px;
}
.lsw-app-body{display:grid;grid-template-columns:minmax(0,1fr)}

/* Topbar */
.lsw-app-main{background:var(--lsw-bg);min-width:0}
.lsw-app-top{
  display:flex;align-items:center;gap:12px;
  padding:8px 16px;
  background:var(--lsw-surface);
  border-bottom:1px solid var(--lsw-border);
}
.lsw-app-top-title{font-size:13px;font-weight:660;letter-spacing:-.018em}
.lsw-app-top-sub{
  font-family:var(--lsw-mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--lsw-text-4);
}
.lsw-app-timer{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  background:var(--lsw-accent-soft);border:1px solid var(--lsw-accent-border);
  color:var(--lsw-accent-deep);
  border-radius:6px;padding:4px 8px;
  font-family:var(--lsw-mono);font-size:11px;font-weight:500;
}
.lsw-app-timer i{
  width:6px;height:6px;border-radius:50%;background:var(--lsw-red);flex:none;
  animation:lsw-blink 2.2s steps(1,end) infinite;
}
@keyframes lsw-blink{0%,55%{opacity:1}56%,100%{opacity:.25}}
.lsw-app-avatar{
  width:24px;height:24px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--lsw-surface-muted);color:var(--lsw-text-3);
  font-family:var(--lsw-mono);font-size:9px;font-weight:500;
  border:1px solid var(--lsw-border);
}

/* --- KPI traka (kpi-strip aplikacije) ------------------------------------ */
.lsw-kpis{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--lsw-surface);
  border-bottom:1px solid var(--lsw-border);
}
.lsw-kpi{padding:8px 12px;border-right:1px solid var(--lsw-border);min-width:0}
.lsw-kpi:last-child{border-right:none}
.lsw-kpi-l{
  font-family:var(--lsw-mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lsw-text-4);
  line-height:1.25;                 /* labela se smije prelomiti, ne odsjeci */
  min-height:2.5em;
}
.lsw-kpi-v{
  font-size:15px;font-weight:690;letter-spacing:-.03em;margin-top:4px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;               /* "412.800 EUR" nikad u dva reda */
}
.lsw-kpi-s{font-family:var(--lsw-mono);font-size:9px;color:var(--lsw-text-4);margin-top:2px}
.lsw-kpi-v.is-accent{color:var(--lsw-accent)}
.lsw-kpi-v.is-green{color:var(--lsw-green)}
.lsw-kpi-v.is-orange{color:var(--lsw-orange)}
.lsw-kpi-v.is-yellow{color:var(--lsw-yellow)}
.lsw-kpi-v.is-red{color:var(--lsw-red)}

/* --- Ploce -------------------------------------------------------------- */
.lsw-app-panels{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:12px;padding:12px 16px 16px;
}
.lsw-panel{
  background:var(--lsw-surface);
  border:1px solid var(--lsw-border);
  border-radius:var(--lsw-r-md);
  padding:12px 12px;
  min-width:0;
}
.lsw-panel-h{
  display:flex;align-items:baseline;gap:8px;margin-bottom:8px;
}
.lsw-panel-h h4{font-size:12px;font-weight:650;letter-spacing:-.01em;margin:0}
.lsw-panel-h span{
  font-family:var(--lsw-mono);font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--lsw-text-4);margin-left:auto;
}

/* --- Stupci (CSS bar chart) --------------------------------------------- */
.lsw-bars{display:flex;align-items:flex-end;gap:8px;height:78px}
.lsw-bar{
  flex:1;min-width:0;border-radius:2px 2px 2px 2px;
  background:var(--lsw-surface-muted);
  position:relative;
  height:var(--h,40%);
  transform-origin:bottom;
  transition:height var(--motion-slow) var(--motion-ease);
}
.lsw-bar.is-fill{background:linear-gradient(180deg,var(--lsw-heat-2),var(--lsw-accent))}
.lsw-bar.is-over{background:linear-gradient(180deg,var(--lsw-bar-red-top),var(--lsw-red))}
.lsw-bar.is-good{background:linear-gradient(180deg,var(--lsw-bar-green-top),var(--lsw-green))}
.lsw-bars-x{
  display:flex;gap:8px;margin-top:8px;
  font-family:var(--lsw-mono);font-size:9px;color:var(--lsw-text-4);
}
.lsw-bars-x span{flex:1;text-align:center;min-width:0}

/* Reveal: stupci rastu kad sekcija ude u vidno polje */
.lsw-bars[data-lsw-grow] .lsw-bar{height:4%}
.lsw-bars[data-lsw-grow].is-in .lsw-bar{height:var(--h,40%)}

/* --- Redovi (projekti / clanovi) ---------------------------------------- */
.lsw-rows{display:flex;flex-direction:column}
.lsw-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;gap:8px;
  padding:8px 0;border-bottom:1px solid var(--lsw-surface-soft);
}
.lsw-row>div{min-width:0}
.lsw-row:last-child{border-bottom:none}
.lsw-row-name{
  font-size:11px;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lsw-row-sub{
  font-family:var(--lsw-mono);font-size:9px;color:var(--lsw-text-4);
  margin-top:2px;white-space:nowrap;
}
.lsw-row-num{
  font-family:var(--lsw-mono);font-size:11px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--lsw-text-2);
}
.lsw-row-num.is-green{color:var(--lsw-green-ink)}
.lsw-row-num.is-red{color:var(--lsw-red)}
.lsw-row-num.is-orange{color:var(--lsw-orange-ink)}

/* --- Mjerac (prog-track / prog-fill) ------------------------------------ */
.lsw-meter{
  height:5px;border-radius:2px;background:var(--lsw-surface-muted);
  overflow:hidden;position:relative;
}
.lsw-meter i{
  display:block;height:100%;border-radius:2px;
  width:var(--w,50%);background:var(--lsw-accent);
  transition:width var(--motion-slow) var(--motion-ease);
}
.lsw-meter i.is-green{background:var(--lsw-green)}
.lsw-meter i.is-red{background:var(--lsw-red)}
.lsw-meter i.is-orange{background:var(--lsw-orange)}
.lsw-meter i.is-teal{background:var(--lsw-teal)}
[data-lsw-grow] .lsw-meter i{width:2%}
[data-lsw-grow].is-in .lsw-meter i{width:var(--w,50%)}

/* --- Prsten marze ------------------------------------------------------- */
.lsw-ring{
  --lsw-ring-v:32;
  width:92px;height:92px;flex:none;border-radius:50%;
  background:conic-gradient(var(--lsw-accent) calc(var(--lsw-ring-v)*1%),var(--lsw-surface-muted) 0);
  display:grid;place-items:center;position:relative;
}
.lsw-ring::after{
  content:'';position:absolute;inset:10px;border-radius:50%;
  background:var(--lsw-surface);
}
.lsw-ring-in{position:relative;z-index:1;text-align:center;line-height:1.05}
.lsw-ring-v{font-size:19px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lsw-ring-l{
  font-family:var(--lsw-mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lsw-text-4);margin-top:2px;
}

/* --- Spark uvidi (spk- iz aplikacije) ---------------------------------- */
.lsw-spk{
  background:var(--lsw-surface);
  border:1px solid var(--lsw-border);
  border-radius:var(--lsw-r-md);
  overflow:hidden;
}
.lsw-spk.is-dark{
  /* NEPROZIRNO: romb-mreza sekcije ne smije prosijavati kroz panel */
  background:var(--lsw-brand-mid);
  border-color:var(--lsw-on-dark-border);
  color:var(--lsw-on-dark);
}
.lsw-spk-h{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--lsw-border);
}
.lsw-spk.is-dark .lsw-spk-h{border-bottom-color:var(--lsw-on-dark-border)}
.lsw-spk-mark{
  width:32px;height:32px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--lsw-accent-soft);color:var(--lsw-accent);
  border:1px solid var(--lsw-accent-border);
}
.lsw-spk.is-dark .lsw-spk-mark{background:rgba(204,120,92,.16);border-color:rgba(204,120,92,.34)}
.lsw-spk-mark svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lsw-spk-t{font-family:var(--lsw-font);font-weight:660;font-size:15px;line-height:1.2;letter-spacing:-.024em;margin:0}
.lsw-spk-s{
  font-family:var(--lsw-mono);font-size:10px;color:var(--lsw-text-4);margin-top:2px;
}
.lsw-spk.is-dark .lsw-spk-s{color:var(--lsw-on-dark-4)}
.lsw-spk-stamp{
  margin-left:auto;font-family:var(--lsw-mono);font-size:10px;
  color:var(--lsw-text-4);white-space:nowrap;
}
.lsw-spk.is-dark .lsw-spk-stamp{color:var(--lsw-on-dark-4)}

/* AI narativ */
.lsw-spk-ai{
  display:flex;gap:8px;padding:12px 16px;
  background:linear-gradient(180deg,var(--lsw-accent-soft),var(--lsw-surface));
  border-bottom:1px solid var(--lsw-border);
  font-size:13px;line-height:1.5;color:var(--lsw-text-2);
}
.lsw-spk.is-dark .lsw-spk-ai{
  background:linear-gradient(180deg,rgba(204,120,92,.13),transparent);
  border-bottom-color:var(--lsw-on-dark-border);
  color:var(--lsw-on-dark-2);
}
.lsw-spk-ai-dot{
  flex:none;width:7px;height:7px;border-radius:50%;margin-top:8px;
  background:var(--lsw-accent);position:relative;
}
.lsw-spk-ai-dot::after{
  content:'';position:absolute;inset:0;border-radius:50%;background:var(--lsw-accent);
  animation:lsw-ping 3s ease-out infinite;
}

/* Nalazi */
.lsw-spk-item{
  display:flex;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--lsw-surface-soft);
}
.lsw-spk.is-dark .lsw-spk-item{border-bottom-color:var(--lsw-on-dark-border)}
.lsw-spk-item:last-child{border-bottom:none}
.lsw-spk-ico{
  width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--lsw-red-soft);color:var(--lsw-red);border:1px solid var(--lsw-red-b);
}
.lsw-spk-ico.is-orange{background:var(--lsw-orange-soft);color:var(--lsw-orange-ink);border-color:var(--lsw-orange-b)}
.lsw-spk-ico.is-green{background:var(--lsw-green-soft);color:var(--lsw-green-ink);border-color:var(--lsw-green-b)}
.lsw-spk.is-dark .lsw-spk-ico{background:rgba(181,70,47,.18);border-color:rgba(181,70,47,.4);color:var(--lsw-dark-red-ink)}
.lsw-spk.is-dark .lsw-spk-ico.is-orange{background:rgba(207,138,63,.18);border-color:rgba(207,138,63,.4);color:var(--lsw-dark-orange-ink)}
.lsw-spk.is-dark .lsw-spk-ico.is-green{background:rgba(63,157,127,.18);border-color:rgba(63,157,127,.4);color:var(--lsw-dark-green-ink)}
.lsw-spk-ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lsw-spk-body{min-width:0;flex:1}
.lsw-spk-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lsw-spk-name{font-size:13px;font-weight:650;letter-spacing:-.01em;margin:0}
.lsw-spk-desc{font-size:12px;color:var(--lsw-text-3);margin-top:3px;line-height:1.5}
.lsw-spk.is-dark .lsw-spk-desc{color:var(--lsw-on-dark-3)}
.lsw-spk-metrics{
  font-family:var(--lsw-mono);font-size:11px;color:var(--lsw-text-3);
  margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 8px;
}
.lsw-spk.is-dark .lsw-spk-metrics{color:var(--lsw-on-dark-3)}
.lsw-spk-metrics b{font-weight:500;color:var(--lsw-red)}
.lsw-spk-metrics b.good{color:var(--lsw-green-ink)}
.lsw-spk.is-dark .lsw-spk-metrics b{color:var(--lsw-dark-red-ink)}
.lsw-spk.is-dark .lsw-spk-metrics b.good{color:var(--lsw-dark-green-ink)}
.lsw-spk-foot{
  padding:8px 16px;background:var(--lsw-surface-soft);
  font-family:var(--lsw-mono);font-size:10px;color:var(--lsw-text-4);
  line-height:1.5;border-top:1px solid var(--lsw-border);
}
.lsw-spk.is-dark .lsw-spk-foot{
  background:var(--lsw-panel-dark-2);border-top-color:var(--lsw-on-dark-border);
  color:var(--lsw-on-dark-4);
}

/* --- Revizijski lanac (hash chain) ------------------------------------- */
.lsw-chain{display:flex;flex-direction:column;gap:0}
.lsw-chain-node{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;
  padding-bottom:12px;position:relative;
}
.lsw-chain-node:last-child{padding-bottom:0}
.lsw-chain-node::before{
  content:'';position:absolute;left:10px;top:20px;bottom:0;width:1px;
  background:var(--lsw-border-strong);
}
.lsw-chain-node:last-child::before{display:none}
.lsw-chain-dot{
  width:21px;height:21px;border-radius:50%;
  border:1.5px solid var(--lsw-green-b);background:var(--lsw-green-soft);
  color:var(--lsw-green-ink);display:grid;place-items:center;position:relative;z-index:1;
}
.lsw-chain-dot svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lsw-chain-t{font-size:12px;font-weight:600;letter-spacing:-.005em}
.lsw-chain-m{
  font-family:var(--lsw-mono);font-size:10px;color:var(--lsw-text-4);margin-top:2px;
  word-break:break-all;
}

/* --- Mini tijek (flow) ------------------------------------------------- */
.lsw-flow{
  display:flex;align-items:center;gap:0;flex-wrap:nowrap;overflow:hidden;
}
.lsw-flow-node{
  display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-width:0;
}
.lsw-flow-dot{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:var(--lsw-surface);border:2px solid var(--lsw-border-strong);
}
.lsw-flow-node span{
  font-family:var(--lsw-mono);font-size:9px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--lsw-text-4);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.lsw-flow-link{height:1px;background:var(--lsw-border-strong);flex:1;margin-bottom:16px}