/* ===================================================================
   Vikaradmin – Component styles
   -------------------------------------------------------------------
   Requires vikaradmin-tokens.css (custom properties) to be loaded
   first. The app shell element carries: class="va-app va-theme-* …".
   Spacing scales with --va-density; corner radius with --va-radius.
   =================================================================== */

/* ── Root layout ─────────────────────────────────────────────── */
.va-app {
  display: flex; height: 100vh; overflow: hidden;
  font-family: var(--va-font); color: var(--va-text);
  background: var(--va-canvas); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.va-app *, .va-app *::before, .va-app *::after { box-sizing: border-box; }
.va-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.va-scroll { flex: 1; overflow-y: auto; padding: calc(28px * var(--va-density)); }
.va-page { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column;
  gap: calc(22px * var(--va-density)); }

/* ── Sidebar ─────────────────────────────────────────────────── */
.va-sidebar { width: 266px; flex-shrink: 0; background: var(--va-sb-bg); color: var(--va-sb-fg);
  display: flex; flex-direction: column; border-right: 1px solid var(--va-sb-border);
  transition: width .22s cubic-bezier(.4,0,.2,1); }
.va-sidebar.collapsed { width: 76px; }
.va-sb-head { display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 16px 0 18px; border-bottom: 1px solid var(--va-sb-border); flex-shrink: 0; }
.va-logo { display: flex; align-items: center; gap: 11px; border: 0; background: none; cursor: pointer;
  padding: 0; color: var(--va-sb-logo); min-width: 0; text-decoration: none; }
.va-logo-mark { width: 32px; height: 32px; border-radius: calc(var(--va-radius-sm) - 1px); flex-shrink: 0;
  background: var(--va-accent); color: #fff; font-weight: 700; font-size: 17px;
  display: grid; place-items: center; letter-spacing: -.02em; }
.va-logo-text { font-size: 19px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.va-collapse { border: 0; background: none; color: var(--va-sb-icon); cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.va-collapse:hover { background: var(--va-sb-active-bg); color: var(--va-sb-active-fg); }
.collapsed .va-logo-text, .collapsed .va-nav-lbl { display: none; }
.collapsed .va-sb-head { padding: 0; justify-content: center; }
.collapsed .va-collapse { display: none; }

.va-nav { flex: 1; overflow-y: auto; padding: 14px 12px; }
.va-nav::-webkit-scrollbar { width: 7px; }
.va-nav::-webkit-scrollbar-thumb { background: var(--va-sb-border); border-radius: 4px; }
.va-nav-grp { margin-bottom: 18px; }
.va-nav-sect { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--va-sb-muted); padding: 6px 12px 9px; }
.collapsed .va-nav-sect { height: 1px; padding: 0; margin: 14px 12px; overflow: hidden; color: transparent;
  background: var(--va-sb-border); }
.va-nav-item { position: relative; display: flex; align-items: center; gap: 13px; width: 100%;
  padding: calc(9px * var(--va-density)) 12px; border: 0; background: none; cursor: pointer;
  color: var(--va-sb-fg); font-size: 14px; font-weight: 500; border-radius: var(--va-radius-sm);
  text-align: left; margin-bottom: 2px; transition: background .12s, color .12s;
  font-family: inherit; text-decoration: none; }
.va-nav-item:hover { background: var(--va-sb-active-bg); color: var(--va-sb-active-fg); }
.va-nav-item .va-nav-ic { color: var(--va-sb-icon); flex-shrink: 0; transition: color .12s; }
.va-nav-item:hover .va-nav-ic, .va-nav-item.active .va-nav-ic { color: var(--va-sb-active-fg); }
.va-nav-item.active { background: var(--va-sb-active-bg); color: var(--va-sb-active-fg); font-weight: 600; }
.va-nav-rail { position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 3px 3px 0; background: var(--va-sb-rail);
  transition: height .16s; }
.va-nav-item.active .va-nav-rail { height: 64%; }
.va-nav-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collapsed .va-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }

/* ── Topbar ──────────────────────────────────────────────────── */
.va-topbar { height: 62px; flex-shrink: 0; background: var(--va-card);
  border-bottom: 1px solid var(--va-border); display: flex; align-items: center;
  justify-content: space-between; padding: 0 26px; }
.va-topbar-title { font-size: 15px; font-weight: 600; color: var(--va-heading); }
.va-topbar-right { display: flex; align-items: center; gap: 4px; }
.va-icon-btn { position: relative; border: 0; background: none; color: var(--va-text-muted);
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
.va-icon-btn:hover, .va-avatar:hover { background: var(--va-canvas); color: var(--va-heading); }
.va-badge-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--va-warn); border: 2px solid var(--va-card); }
.va-avatar { border: 0; background: none; color: var(--va-text-muted); width: 42px; height: 42px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; }

/* ── Cards & headings ────────────────────────────────────────── */
.va-card { background: var(--va-card); border: 1px solid var(--va-border); border-radius: var(--va-radius);
  box-shadow: 0 1px 2px rgba(20,30,48,.04), 0 1px 3px rgba(20,30,48,.03); }
.va-pad { padding: calc(26px * var(--va-density)); }
.va-h1 { font-size: 22px; font-weight: 700; color: var(--va-heading); margin: 0 0 calc(20px * var(--va-density)); letter-spacing: -.01em; }
.va-h2 { font-size: 18px; font-weight: 700; color: var(--va-heading); margin: 0; letter-spacing: -.01em; }
.va-h3 { font-size: 14.5px; font-weight: 600; color: var(--va-heading); margin: 0 0 14px; }
.va-sub { color: var(--va-text-muted); font-size: 13.5px; margin: 4px 0 0; }
.va-card-head { margin-bottom: calc(18px * var(--va-density)); }

/* ── KPI cards ───────────────────────────────────────────────── */
.va-kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(14px * var(--va-density));
  margin-bottom: calc(8px * var(--va-density)); }
.va-kpi { border: 1px solid var(--va-border); border-radius: var(--va-radius-sm); padding: 16px 18px;
  background: var(--va-card); }
.va-kpi-val { font-size: 26px; font-weight: 700; color: var(--va-heading); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.va-kpi-lbl { font-size: 13px; color: var(--va-text-muted); margin-top: 3px; }

/* ── Panels & 2-col grid ─────────────────────────────────────── */
.va-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24px * var(--va-density));
  margin-top: calc(22px * var(--va-density)); }
.va-panel { border-top: 1px solid var(--va-border-soft); padding-top: calc(20px * var(--va-density)); }

/* ── Charts ──────────────────────────────────────────────────── */
.va-chart-svg { width: 100%; height: auto; display: block; }
.va-donut-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.va-donut-svg { width: 168px; height: 168px; flex-shrink: 0; }
.va-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; min-width: 170px; flex: 1; }
.va-legend li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.va-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.va-legend-lbl { color: var(--va-text); }
.va-legend-val { margin-left: auto; color: var(--va-text-muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.va-bars { display: flex; flex-direction: column; gap: 9px; }
.va-bar-row { display: grid; grid-template-columns: 132px 1fr 56px; align-items: center; gap: 12px; }
.va-bar-name { font-size: 12.5px; color: var(--va-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-bar-track { height: 13px; background: var(--va-border-soft); border-radius: 7px; overflow: hidden; }
.va-bar-fill { height: 100%; background: var(--va-c1); border-radius: 7px; }
.va-bar-val { font-size: 12px; color: var(--va-text-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Tables ──────────────────────────────────────────────────── */
.va-table-wrap { overflow-x: auto; margin: 0 -2px; }
.va-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.va-table th { text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .03em;
  color: var(--va-text-muted); padding: 0 14px calc(11px * var(--va-density)); border-bottom: 1px solid var(--va-border);
  white-space: nowrap; }
.va-table td { padding: calc(13px * var(--va-density)) 14px; border-bottom: 1px solid var(--va-border-soft);
  vertical-align: top; color: var(--va-text); }
.va-table tbody tr { transition: background .1s; }
.va-table tbody tr:hover { background: color-mix(in srgb, var(--va-accent) 4%, var(--va-card)); }
.va-th-c, .va-td-c { text-align: center; }
.va-td-c { vertical-align: middle; }
.va-nowrap { white-space: nowrap; }
.va-muted { color: var(--va-text-muted); }
.va-link { color: var(--va-link); font-weight: 500; text-decoration: none; }
.va-link:hover { text-decoration: underline; }
.va-cell-sub { font-size: 12px; color: var(--va-text-muted); margin-top: 2px; }
.va-cell-sub b { color: var(--va-text); font-weight: 600; }
.va-role { font-size: 13px; color: var(--va-text); }
.va-group { font-size: 12.5px; color: var(--va-link); margin-top: 2px; }
.va-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

/* ── Status indicators ───────────────────────────────────────── */
.va-stat-group { display: flex; gap: 4px; justify-content: center; }
.va-stat { display: inline-flex; }
.va-pill { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px;
  border-radius: calc(var(--va-radius-sm) * 0.7); }
.va-spin { animation: va-spin 1.1s linear infinite; }
@keyframes va-spin { to { transform: rotate(360deg); } }
.va-pdf { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; gap: 1px;
  color: var(--va-pdf); cursor: pointer; }
.va-pdf b { font-size: 7.5px; font-weight: 700; letter-spacing: .04em; }
.va-pdf-pill { padding: 4px 6px 3px; border-radius: calc(var(--va-radius-sm) * 0.7); background: var(--va-pdf-bg); }
/* status color helpers (apply to the icon) */
.va-st-ok { color: var(--va-ok); }
.va-st-error { color: var(--va-warn); }
.va-st-pending { color: var(--va-pending); }
.va-st-proc { color: var(--va-proc); }
.va-pill.va-st-ok { background: var(--va-ok-bg); }
.va-pill.va-st-error { background: var(--va-warn-bg); }
.va-pill.va-st-pending { background: var(--va-pending-bg); }
.va-pill.va-st-proc { background: var(--va-proc-bg); }

/* ── Form ────────────────────────────────────────────────────── */
.va-form-card { max-width: 720px; }
.va-form { display: flex; flex-direction: column; gap: calc(18px * var(--va-density)); max-width: 560px; }
.va-field { display: flex; flex-direction: column; gap: 7px; }
.va-label { font-weight: 600; font-size: 14px; color: var(--va-heading); }
.va-req { color: var(--va-warn); margin-left: 3px; }
.va-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--va-border);
  border-radius: var(--va-radius-sm); font: inherit; font-size: 15px; color: var(--va-text);
  background: var(--va-card); outline: none; transition: border-color .12s, box-shadow .12s; }
.va-input:focus { border-color: var(--va-accent); box-shadow: 0 0 0 3px var(--va-accent-weak); }
.va-input::placeholder { color: var(--va-text-faint); }
.va-textarea { height: auto; min-height: 112px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.va-select-wrap { position: relative; }
.va-select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
.va-select-ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--va-text-muted); pointer-events: none; }
.va-placeholder { color: var(--va-text-faint); }
.va-radio-row { display: flex; gap: 10px; }
.va-radio { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px 10px 14px;
  border: 1px solid var(--va-border); border-radius: var(--va-radius-sm); background: var(--va-card);
  cursor: pointer; font-size: 15px; color: var(--va-text); transition: border-color .12s, background .12s;
  font-family: inherit; }
.va-radio.checked { border-color: var(--va-accent); background: var(--va-accent-weak); color: var(--va-heading); }
.va-radio-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--va-pending);
  flex-shrink: 0; transition: border-color .12s, background .12s; }
.va-radio.checked .va-radio-dot { border-color: var(--va-accent); background: var(--va-accent);
  box-shadow: inset 0 0 0 3px var(--va-card); }
.va-form-actions { margin-top: 4px; }
.va-btn { border: 0; border-radius: var(--va-radius-sm); font: inherit; font-weight: 600; font-size: 15px;
  cursor: pointer; height: 48px; padding: 0 26px; font-family: inherit; }
.va-btn-primary { background: var(--va-accent); color: var(--va-accent-fg); }
.va-btn-primary:hover { background: var(--va-accent-strong); }

/* ── Search & pager ──────────────────────────────────────────── */
.va-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border: 1px solid var(--va-border); border-radius: var(--va-radius-sm); background: var(--va-card);
  min-width: 240px; }
.va-search:focus-within { border-color: var(--va-accent); box-shadow: 0 0 0 3px var(--va-accent-weak); }
.va-search-ic { color: var(--va-text-faint); flex-shrink: 0; }
.va-search input { border: 0; outline: 0; background: none; font: inherit; font-size: 14px; width: 100%; color: var(--va-text); }
.va-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: calc(18px * var(--va-density)); flex-wrap: wrap; }
.va-pager-info { color: var(--va-text-muted); font-size: 13px; }
.va-pager-ctrl { display: flex; gap: 5px; }
.va-page-btn { height: 36px; padding: 0 13px; border: 1px solid var(--va-border); background: var(--va-card);
  border-radius: var(--va-radius-sm); color: var(--va-text); font-size: 13.5px; cursor: pointer; transition: background .12s;
  font-family: inherit; }
.va-page-btn:hover:not(:disabled):not(.active) { background: var(--va-canvas); }
.va-page-btn:disabled { opacity: .45; cursor: default; }
.va-page-num { min-width: 36px; text-align: center; }
.va-page-num.active { background: var(--va-accent); border-color: var(--va-accent); color: var(--va-accent-fg); font-weight: 600; }

/* ── Footer ──────────────────────────────────────────────────── */
.va-footer { text-align: center; color: var(--va-text-faint); font-size: 12.5px; padding: 28px 0 14px; }

/* ── Order page: layouts ─────────────────────────────────────── */
.va-of-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: calc(28px * var(--va-density)); align-items: start; }
.va-of-main { display: flex; flex-direction: column; gap: calc(20px * var(--va-density)); min-width: 0; }
.va-of-narrow { display: flex; flex-direction: column; gap: calc(20px * var(--va-density)); max-width: 540px; }
.va-of-two { display: grid; grid-template-columns: 1fr 220px; gap: 16px; }
.va-of-side { position: sticky; top: 0; }

/* role tiles */
.va-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.va-tile { position: relative; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 14px; border: 1.5px solid var(--va-border); border-radius: var(--va-radius-sm);
  background: var(--va-card); cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s;
  font-family: inherit; }
.va-tile:hover { border-color: color-mix(in srgb, var(--va-accent) 45%, var(--va-border)); }
.va-tile.sel { border-color: var(--va-accent); background: var(--va-accent-weak);
  box-shadow: 0 0 0 3px var(--va-accent-weak); }
.va-tile-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: calc(var(--va-radius-sm) * .8);
  display: grid; place-items: center; background: var(--va-accent-weak2); color: var(--va-accent); }
.va-tile.sel .va-tile-ic { background: var(--va-accent); color: #fff; }
.va-tile-txt { display: flex; flex-direction: column; min-width: 0; }
.va-tile-name { font-weight: 600; font-size: 14.5px; color: var(--va-heading); }
.va-tile-desc { font-size: 12px; color: var(--va-text-muted); margin-top: 1px; }
.va-tile-check { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--va-accent); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s; }
.va-tile.sel .va-tile-check { opacity: 1; transform: scale(1); }

/* period chips */
.va-chips-row { display: flex; flex-wrap: wrap; gap: 9px; }
.va-chip2 { padding: 9px 18px; border: 1.5px solid var(--va-border); border-radius: 999px;
  background: var(--va-card); cursor: pointer; font-size: 14px; font-weight: 500; color: var(--va-text);
  font-variant-numeric: tabular-nums; transition: border-color .12s, background .12s, color .12s; font-family: inherit; }
.va-chip2:hover { border-color: color-mix(in srgb, var(--va-accent) 45%, var(--va-border)); }
.va-chip2.sel { border-color: var(--va-accent); background: var(--va-accent); color: var(--va-accent-fg); }

/* segmented Nej/Ja */
.va-seg2 { display: inline-flex; align-self: flex-start; padding: 4px; gap: 4px; background: var(--va-canvas);
  border: 1px solid var(--va-border); border-radius: calc(var(--va-radius-sm) + 2px); }
.va-seg2-btn { padding: 8px 26px; border: 0; border-radius: var(--va-radius-sm); background: none;
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--va-text-muted); transition: background .12s, color .12s; font-family: inherit; }
.va-seg2-btn.sel { background: var(--va-card); color: var(--va-accent); box-shadow: 0 1px 2px rgba(20,30,48,.1); }

/* live summary */
.va-summary { border: 1px solid var(--va-border); border-radius: var(--va-radius);
  background: var(--va-canvas); padding: 20px; }
.va-summary.compact { background: var(--va-card); }
.va-sum-head { display: flex; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid var(--va-border); }
.va-sum-mark { width: 36px; height: 36px; flex-shrink: 0; border-radius: calc(var(--va-radius-sm) * .8);
  display: grid; place-items: center; background: var(--va-accent-weak2); color: var(--va-accent); }
.va-sum-title { font-weight: 700; font-size: 15px; color: var(--va-heading); }
.va-sum-note { font-size: 12.5px; color: var(--va-text-muted); margin-top: 1px; }
.va-sum-list { list-style: none; margin: 6px 0 18px; padding: 0; }
.va-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--va-border-soft); }
.va-sum-row:last-child { border-bottom: 0; }
.va-sum-k { font-size: 13px; color: var(--va-text-muted); flex-shrink: 0; }
.va-sum-v { font-size: 14px; font-weight: 600; color: var(--va-heading); text-align: right; }
.va-sum-v.muted { font-weight: 400; color: var(--va-text-faint); }
.va-btn-block { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.va-sum-foot { font-size: 12px; color: var(--va-text-muted); text-align: center; margin-top: 12px; line-height: 1.45; }

/* wizard / steps */
.va-wizard { max-width: 820px; }
.va-steps { list-style: none; display: flex; margin: 0 0 calc(26px * var(--va-density)); padding: 0; }
.va-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.va-step::before, .va-step::after { content: ""; position: absolute; top: 16px; height: 2px; background: var(--va-border); }
.va-step::before { left: 0; right: 50%; margin-right: 18px; }
.va-step::after { left: 50%; right: 0; margin-left: 18px; }
.va-step:first-child::before, .va-step:last-child::after { display: none; }
.va-step.done::before, .va-step.done::after, .va-step.active::before { background: var(--va-accent); }
.va-step-n { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--va-card); border: 2px solid var(--va-border); color: var(--va-text-muted);
  font-weight: 700; font-size: 14px; transition: all .14s; }
.va-step.active .va-step-n { border-color: var(--va-accent); color: var(--va-accent); background: var(--va-accent-weak); }
.va-step.done .va-step-n { border-color: var(--va-accent); background: var(--va-accent); color: #fff; }
.va-step-lbl { font-size: 12.5px; color: var(--va-text-muted); font-weight: 500; text-align: center; }
.va-step.active .va-step-lbl, .va-step.done .va-step-lbl { color: var(--va-heading); }
.va-step-body { min-height: 220px; }
.va-wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: calc(24px * var(--va-density));
  padding-top: 20px; border-top: 1px solid var(--va-border-soft); }
.va-btn-ghost { background: var(--va-card); border: 1px solid var(--va-border); color: var(--va-text); display: inline-flex; align-items: center; gap: 8px; }
.va-btn-ghost:hover:not(:disabled) { background: var(--va-canvas); }
.va-btn:disabled { opacity: .45; cursor: default; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 980px) {
  .va-grid-2 { grid-template-columns: 1fr; }
  .va-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .va-of-grid { grid-template-columns: 1fr; }
  .va-of-side { position: static; }
  .va-of-two { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .va-kpi-row { grid-template-columns: repeat(2, 1fr); }
}