/* RED94 konfigurator – slog (portalna paleta, vse pod .r94cfg, da v portalu nič ne uhaja) */
.r94cfg {
    --c-red: #c41e3a; --c-red-d: #a01730; --c-red-s: #fbeaed; --c-ink: #222; --c-ink2: #555; --c-mut: #8a8f98; --c-line: #e3e5e8;
    --c-bg: #f0f2f5; --c-card: #fff; --c-ok: #1a7f4b; --c-ok-s: #e6f4ec; --c-warn: #a86400; --c-err: #b3261e; --c-err-s: #fdecea;
    color: var(--c-ink); font-size: 14px; line-height: 1.45;
}
.r94cfg * { box-sizing: border-box; }
.r94cfg h1 { font-size: 1.5rem; margin: .2rem 0 1rem; }
.r94cfg h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.r94cfg h3 { font-size: .95rem; margin: 0 0 .7rem; }
.r94cfg .small { font-size: .82rem; }
.r94cfg .r { text-align: right; }
.cfg-muted { color: var(--c-mut); }
.cfg-ok { color: var(--c-ok); } .cfg-warn { color: var(--c-warn); }
.cfg-err { color: var(--c-err); background: var(--c-err-s); border-radius: 6px; padding: .5rem .7rem; margin: .5rem 0; }
.cfg-ok-box { color: var(--c-ok); background: var(--c-ok-s); border-radius: 6px; padding: .5rem .7rem; margin: .5rem 0; }
.cfg-kicker { font-size: .7rem; letter-spacing: .14em; font-weight: 700; color: var(--c-red); text-transform: uppercase; }
.cfg-hint { color: var(--c-ink2); font-size: .82rem; margin: .4rem 0; }
.cfg-pad { margin: .5rem 1rem; }
.cfg-loading { padding: 3rem; text-align: center; color: var(--c-mut); }

/* gumbi in polja */
.cfg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); border-radius: 6px; padding: .5rem .9rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.cfg-btn:hover { border-color: var(--c-red); color: var(--c-red); }
.cfg-btn-p { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.cfg-btn-p:hover { background: var(--c-red-d); color: #fff; }
.cfg-btn:disabled { opacity: .55; cursor: default; }
.cfg-btn-s { padding: .3rem .6rem; font-size: .82rem; }
.cfg-link { background: none; border: 0; color: var(--c-red); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: .25rem 0; display: inline-flex; align-items: center; gap: .25rem; }
.cfg-ib { background: none; border: 0; color: var(--c-ink2); padding: .25rem; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; }
.cfg-ib:hover:not(:disabled) { color: var(--c-red); background: var(--c-red-s); }
.cfg-ib:disabled { opacity: .3; cursor: default; }
.cfg-ib-del:hover:not(:disabled) { color: var(--c-err); }
.cfg-in { width: 100%; border: 1px solid #cfd3d8; border-radius: 6px; padding: .42rem .55rem; font: inherit; background: #fff; color: var(--c-ink); min-width: 0; }
.cfg-in:focus { outline: none; border-color: var(--c-red); box-shadow: 0 0 0 3px var(--c-red-s); }
.cfg-in:disabled { background: #f7f8f9; color: var(--c-ink); }
.cfg-in-title { font-weight: 600; border-color: transparent; background: transparent; padding: .25rem .4rem; }
.cfg-in-title:hover:not(:disabled) { border-color: #cfd3d8; }
.cfg-in-name { font-size: 1.05rem; font-weight: 600; }
.cfg-in-lib { width: auto; max-width: 260px; font-size: .82rem; padding: .3rem .4rem; }
.cfg-f { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .55rem; }
.cfg-f > span { font-size: .8rem; font-weight: 600; color: var(--c-ink2); }
.cfg-f small { font-weight: 400; color: var(--c-mut); }
.cfg-check { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; margin: .4rem 0; }
.cfg-check input { margin-top: .2rem; accent-color: var(--c-red); }
.cfg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cfg-row { display: flex; gap: .4rem; align-items: center; }
.cfg-row-end { justify-content: flex-end; margin-top: .8rem; }
.cfg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .7rem; }
.cfg-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .7rem; }
.cfg-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .7rem; }
.cfg-seg { display: inline-flex; border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
.cfg-seg button { background: #fff; border: 0; padding: .5rem 1rem; font: inherit; font-weight: 600; color: var(--c-ink2); cursor: pointer; }
.cfg-seg button.on { background: var(--c-red); color: #fff; }
.cfg-seg-s { margin: 0; } .cfg-seg-s button { padding: .25rem .6rem; font-size: .82rem; }

/* prijava */
.cfg-auth { min-height: 72vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.cfg-auth-card { background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.08); border-top: 4px solid var(--c-red); padding: 1.8rem; width: 100%; max-width: 460px; }
/* logotip sega 10 % svoje višine čez rdečo črto kartice, s senco (kot v portalu) */
.cfg-auth-logo { display: block; position: relative; width: 104px; height: 104px; margin: calc(-1.8rem - 4px - 10.4px) 0 1.1rem; border-radius: 6px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.22)); }
.cfg-form .cfg-btn-p { width: 100%; margin-top: .4rem; padding: .65rem; }
.cfg-form .cfg-link { display: block; margin: .6rem auto 0; }
.cfg-langbar { display: flex; justify-content: flex-end; padding: 1rem 1.2rem 0; }
/* izbira jezika: tihi segmentni gumbi, izbran jezik v rdeči */
.cfg-lang { display: inline-flex; gap: 2px; padding: 3px; background: rgba(255,255,255,.7); border: 1px solid var(--c-line); border-radius: 999px; }
.cfg-lang button { border: 0; background: transparent; color: var(--c-ink2); font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .06em; min-width: 2.4rem; padding: .32rem .55rem; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.cfg-lang button:hover { color: var(--c-ink); background: #fff; }
.cfg-lang button.on { background: var(--c-red); color: #fff; cursor: default; box-shadow: 0 1px 3px rgba(196,30,58,.35); }
.cfg-lang button:focus-visible { outline: 2px solid var(--c-red); outline-offset: 2px; }
/* noga s sloganom */
.cfg-foot { text-align: center; padding: 2rem 1rem 2.4rem; color: var(--c-mut); }
.cfg-foot p { margin: 0; }
.cfg-slogan { display: inline-flex; align-items: center; gap: .7rem; font-size: .92rem; font-weight: 600; letter-spacing: .02em; color: var(--c-ink2); font-style: italic; }
.cfg-redline { display: inline-block; width: 34px; height: 2px; background: var(--c-red); border-radius: 2px; }
.cfg-foot-s { font-size: .76rem; margin-top: .45rem !important; }
.cfg-foot-s a { color: var(--c-mut); }
.cfg-foot-s a:hover { color: var(--c-red); }

/* glava, zavihki */
.cfg-top { position: relative; z-index: 20; display: flex; align-items: center; gap: 1rem; background: #e8eaed; border-bottom: 4px solid var(--c-red); height: 76px; padding: 0 1.2rem; }
/* logotip 80 px: glava 72 px + črta 4 px → sega 8 px (10 % višine) čez rdečo črto, s senco */
.cfg-logo-wrap { position: relative; align-self: stretch; width: 80px; flex-shrink: 0; }
.cfg-logo { position: absolute; top: 0; left: 0; width: 80px; height: 80px; border-radius: 0 0 4px 4px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.2)); }
.cfg-top-r { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.cfg-user { font-weight: 600; font-size: .9rem; }
.cfg-tabs { display: flex; gap: 2rem; justify-content: center; align-items: center; background: #fff; border-bottom: 1px solid var(--c-line); padding: 0 1rem; position: relative; }
.cfg-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: .8rem .2rem .65rem; font: inherit; font-weight: 600; color: #9a9ea6; cursor: pointer; }
.cfg-tabs button.on { color: var(--c-red); border-bottom-color: var(--c-red); }
.cfg-state { position: absolute; right: 1rem; font-size: .78rem; color: var(--c-mut); }
.cfg-body { padding: 1.2rem; max-width: 1280px; margin: 0 auto; }

/* katalog */
.cfg-hero { background: #1d2025; color: #fff; border-radius: 10px; padding: 1.6rem 1.8rem; margin-bottom: 1rem; }
.cfg-hero .cfg-kicker { color: #ff8a9b; }
.cfg-hero h2 { font-size: 1.4rem; margin: .3rem 0; }
.cfg-hero p { color: #c9ccd1; max-width: 640px; margin: 0; }
.cfg-search { max-width: 360px; margin-bottom: .8rem; }
.cfg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.cfg-card { background: #fff; border: 1px solid var(--c-line); border-radius: 8px; padding: .8rem; display: flex; flex-direction: column; gap: .35rem; }
.cfg-card .cfg-btn { margin-top: auto; align-self: flex-start; }
.cfg-card-h { display: flex; justify-content: space-between; align-items: center; }
.cfg-card p { margin: 0; }
.cfg-pid { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .78rem; color: var(--c-ink2); }
.cfg-mini { width: 100%; height: 44px; background: #fafbfc; border-radius: 4px; }
.cfg-tag { display: inline-block; background: var(--c-red-s); color: var(--c-red-d); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; padding: .12rem .4rem; white-space: nowrap; }

/* sistem */
.cfg-split { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1rem; align-items: start; }
.cfg-side { background: #fff; border: 1px solid var(--c-line); border-radius: 8px; padding: .7rem; position: sticky; top: .5rem; }
.cfg-side-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: .5rem; gap: .4rem; }
.cfg-side-h .cfg-btn { white-space: nowrap; }
.cfg-sys { display: flex; align-items: center; gap: .45rem; padding: .4rem .45rem; border-radius: 6px; cursor: pointer; }
.cfg-sys:hover { background: #f5f6f7; }
.cfg-sys.on { background: var(--c-red-s); }
.cfg-sys > i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cfg-sys-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .88rem; }
.cfg-sys-a { display: flex; align-items: center; }
.cfg-sys-a input { accent-color: var(--c-red); margin: 0; }
.cfg-box { background: #fff; border: 1px solid var(--c-line); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.cfg-els { display: flex; flex-direction: column; gap: .6rem; }
.cfg-el { border: 1px solid var(--c-line); border-radius: 8px; padding: .6rem .7rem; background: #fcfcfd; }
.cfg-el-parallel { background: #fafafe; border-style: dashed; }
.cfg-el-h { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.cfg-el-h .cfg-in-title { flex: 1; }
.cfg-el-act { display: flex; }
.cfg-lib { font-size: .78rem; margin: -.1rem 0 .4rem; color: var(--c-ink2); }
.cfg-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .7rem; }
.cfg-branch { border-left: 3px solid #c9c3f0; padding-left: .6rem; }
.cfg-branch-h { display: flex; align-items: center; margin-bottom: .3rem; }
.cfg-add { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; padding-top: .3rem; font-size: .82rem; color: var(--c-ink2); }
.cfg-pts { max-width: 360px; }
.cfg-pts-h, .cfg-pts-r { display: grid; grid-template-columns: 1fr 1fr 30px; gap: .35rem; align-items: center; margin-bottom: .3rem; }
.cfg-pts-h { font-size: .72rem; text-transform: uppercase; color: var(--c-mut); font-weight: 600; }

/* rezultati */
.cfg-units { display: flex; gap: .6rem; align-items: center; margin-bottom: .8rem; font-size: .85rem; font-weight: 600; color: var(--c-ink2); flex-wrap: wrap; }
.cfg-chart-wrap { position: relative; }
.cfg-chart { width: 100%; height: auto; display: block; touch-action: pan-y; }
.cfg-grid { stroke: #eceef1; }
.cfg-axis { stroke: #b9bec5; }
.cfg-cross { stroke: #8a8f98; stroke-dasharray: 3 3; }
.cfg-tick { font-size: 11px; fill: #6b7079; font-variant-numeric: tabular-nums; }
.cfg-axlabel { font-size: 12px; fill: #444; font-weight: 600; }
.cfg-tip { position: absolute; top: 8px; transform: translateX(12px); background: #fff; border: 1px solid var(--c-line); box-shadow: 0 4px 14px rgba(0,0,0,.1); border-radius: 6px; padding: .45rem .6rem; font-size: .78rem; pointer-events: none; min-width: 200px; }
.cfg-tip-h { font-weight: 700; margin-bottom: .2rem; }
.cfg-tip-r { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.cfg-tip-r i, .cfg-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.cfg-tip-r span { color: var(--c-ink2); width: 100%; padding-left: 1rem; font-variant-numeric: tabular-nums; }
.cfg-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; margin-top: .5rem; color: var(--c-ink2); }
.cfg-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cfg-legend-k { color: #666; }
.cfg-h3 { margin: 1.2rem 0 .6rem !important; }
.cfg-res { border-left: 4px solid; }
.cfg-res-h { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .5rem; flex-wrap: wrap; }
.cfg-kpis { display: flex; gap: 2rem; margin: .3rem 0 .8rem; flex-wrap: wrap; }
.cfg-kpis span { display: block; font-size: .78rem; color: var(--c-mut); }
.cfg-kpis b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.cfg-tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.cfg-tbl th { text-align: left; font-size: .72rem; text-transform: uppercase; color: var(--c-mut); border-bottom: 1px solid var(--c-line); padding: .35rem .4rem; }
.cfg-tbl td { border-bottom: 1px solid #f0f1f3; padding: .35rem .4rem; vertical-align: top; font-variant-numeric: tabular-nums; }
.cfg-tbl th.r, .cfg-tbl td.r { text-align: right; }

/* okno */
.cfg-modal { position: fixed; inset: 0; background: rgba(20,22,26,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.cfg-modal-box { background: #fff; border-radius: 10px; padding: 1.3rem; width: 100%; max-width: 520px; border-top: 4px solid var(--c-red); }

@media (max-width: 860px) {
    .cfg-split { grid-template-columns: 1fr; }
    .cfg-side { position: static; }
    .cfg-grid3, .cfg-grid4 { grid-template-columns: 1fr 1fr; }
    .cfg-top { height: 64px; }
    .cfg-logo-wrap, .cfg-logo { width: 67px; } .cfg-logo { height: 67px; }
    .cfg-top { gap: .6rem; padding: 0 .7rem; } .cfg-top-t .cfg-kicker { display: none; }
    .cfg-top-t b { font-size: .85rem; }
    .cfg-state { position: static; }
    .cfg-tabs { gap: 1rem; flex-wrap: wrap; }
    .cfg-body { padding: .8rem; }
}
@media (max-width: 520px) { .cfg-grid2, .cfg-grid3, .cfg-grid4 { grid-template-columns: 1fr; } .cfg-user, .cfg-top-t { display: none; } .cfg-lang button { min-width: 2rem; padding: .3rem .4rem; } }