/* ═══════════════════════════════════════════════════════════════════════════
   Arhipedija app.css — the one stylesheet for every client surface (search,
   admin, location_information, project_conditions, project_documentation,
   architect, account). Lander keeps its own styling.

   Structure:
     §1  TOKENS       — colors, effects, radius, font, spacing scale
     ── BASE THEME — applies to every surface ──
     §2  BASE         — reset, body, links, code
     §3  TYPOGRAPHY   — headings, body copy, muted text, labels
     §4  CONTROLS     — buttons, inputs/selects/textareas, choice controls
     §5  COMPONENTS   — panels, tables, badges, stat cards, modals, spinners,
                        and the .app-shell sidebar layout every client uses
     §6  AUTH         — Clerk widgets, signup-quota, access gate, credits modal
     §7  PARCEL REPORT — .arh-report subtree (shared by architect + location)
     ── CLIENT SECTIONS — only what's truly specific to that surface ──
     §8  SEARCH        (.search-app)
     §9  ARCHITECT     (.arh-app)
     §10 LOCATION      (.li-app)
     §11 PROJECT CONDITIONS (.pp-app)
     §12 ADMIN         (.admin-app)
     §13 ACCOUNT       (.account-app)
     §14 PRINT         — PDF-export @media print overrides
     §15 PORTAL        (.portal-app) — the investor's client portal

   New pages: load this file first (after fonts), add the surface's body
   class, and reach for base classes (.btn, .table, .badge, .panel, ...)
   before writing anything new. Client-specific rules belong only in that
   client's section below — never unprefixed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   §1  TOKENS
   *-rgb triplets exist so hover/tint backgrounds can be expressed as
   rgba(var(--x-rgb), alpha) instead of one-off pale hex values — use them
   for any "light fill of a status color" instead of inventing a new hex.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Ink / dark ─────────────────────────────────────────────────────── */
  --navy: #1f2d25;          /* darkest structural ink (bars, strong text) */
  --navy-2: #2f4034;        /* secondary ink (hover states) */
  --text: #23312a;          /* body text */
  --muted: #6f7c70;         /* secondary / muted text */
  --ink: #111922;           /* near-black, used for numerals/emphasis */

  /* ── Surfaces ───────────────────────────────────────────────────────── */
  --paper: #fff;         /* pure white cards/panels */
  --surface: #fff;       /* alias of --paper */
  --white: #f9f7f4;         /* off-white page background */
  --app-bg: #f5f5f5;        /* neutral app-chrome background */

  /* ── Lines / borders ────────────────────────────────────────────────── */
  --line: rgba(31, 45, 37, 0.12);
  --line-soft: rgba(31, 45, 37, 0.08);
  --line-warm: #ede8e0;
  --app-line: #e8e8e8;

  /* ── Brand / status ─────────────────────────────────────────────────── */
  --teal: #1a6e7a;          /* accent (links, focus, info) */
  --sand: #c4a882;          /* warm secondary accent */
  --vivid: #6f8058;         /* olive accent — also the "success/positive" color */
  --red: #b73a2e;
  --orange: #b47b26;

  /* RGB triplets for tinted fills, e.g. background: rgba(var(--red-rgb), 0.12) */
  --navy-rgb: 31, 45, 37;
  --teal-rgb: 26, 110, 122;
  --sand-rgb: 196, 168, 130;
  --vivid-rgb: 111, 128, 88;
  --red-rgb: 183, 58, 46;
  --orange-rgb: 180, 123, 38;

  /* ── Effects ────────────────────────────────────────────────────────── */
  --shadow: 0 8px 32px rgba(31, 45, 37, 0.08);
  --glass: rgba(255, 255, 255, 0.74);

  /* ── Radius & type ──────────────────────────────────────────────────── */
  --radius: 12px;
  /* Vnosna polja imajo za vso platformo eno samo obliko: minimalno
     zaobljeno. Polmera nikoli ne nastavljaj po zaslonih — uporabi ta
     žeton. (Razreda .input-squared/.input-rounded in žeton za "pill"
     obliko so odstranjeni, ker jih ni uporabljalo nobeno mesto; če bo
     druga oblika spet potrebna, jo dodaj namenoma.) */
  --radius-input: 5px;
  /* Tertiary controls (.btn-text, .icon-button, tabs): one radius, so the
     hover tint of every borderless action has the same shape. */
  --radius-control: 6px;
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

}

/* ═══════════════════════════════════════════════════════════════════
   BASE THEME — applies to every surface
   ═══════════════════════════════════════════════════════════════════ */

/* ── §2  BASE — reset, body, links, code ─────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

code {
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: rgba(31, 45, 37, 0.055);
  color: var(--ink);
  padding: 1px 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.86em;
}

/* ── Inner scrollbars — any scrollable box on the page (panels, modals,
   dropdowns, code blocks, wide tables). Scoped to `body *` on purpose: the
   window's own page scrollbar is owned by html/body and stays native.

   Firefox gets the standard properties. WebKit/Blink gets the pseudo-element
   rules instead — Chrome ignores ::-webkit-scrollbar entirely as soon as
   scrollbar-color is set (and then just recolors the native overlay bar), so
   the @supports block hands the styling back to the pseudo-elements, which
   also force an always-visible bar instead of the macOS overlay one. ── */
body * {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--navy-rgb), 0.55) rgba(var(--navy-rgb), 0.06);
}

@supports selector(::-webkit-scrollbar) {
  body * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  body *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  body *::-webkit-scrollbar-track {
    border-radius: 8px;
    background: rgba(var(--navy-rgb), 0.06);
  }

  body *::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(var(--navy-rgb), 0.55);
    background-clip: padding-box;
  }

  body *::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--navy-rgb), 0.8);
    background-clip: padding-box;
  }

  body *::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* ── §3  TYPOGRAPHY — headings, body copy, muted text, labels ────── */

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  color: var(--navy);
  font-size: clamp(36px, 5vw, 54px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
}

h2 {
  color: var(--navy);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.16;
}

h3 {
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

p {
  font-size: 14px;
  line-height: 1.58;
}

.eyebrow {
  display: inline-block;
  color: var(--vivid);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.form-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── §4  CONTROLS — buttons, inputs, choice controls ──────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  padding: 0 22px;
  color: var(--navy);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

.btn-primary {
  background: var(--navy);
  color: var(--white);
}

.btn-primary:hover {
  border-color: var(--navy-2);
  background: var(--navy-2);
}

.btn-secondary:hover,
.btn-quiet:hover {
  background: rgba(var(--navy-rgb), 0.06);
}

.btn-quiet {
  border-color: var(--line);
  background: var(--surface);
}

.btn-sm {
  min-height: 34px;
  padding: 0 16px;
  font-size: 12px;
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-sm svg {
  width: 14px;
  height: 14px;
}

.btn:disabled {
  opacity: 0.48;
  cursor: default;
}

/* Button system — three tiers, nothing else:
     1. .btn-primary            filled, the page's main action (Naprej, Shrani)
     2. .btn / .btn-secondary   outline, same shape; .btn-sm is the compact size
                                for adding things and actions inside a section
     3. .btn-text, .icon-button borderless: colour + optional icon, for actions
                                inside boxes and rows (Uredi, Odpri, Odstrani)
   Colour modifiers on tier 3: --danger (red), --muted (grey). New button
   variants are not added per screen — pick one of these. */

.btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 6px;
  border: 0;
  border-radius: var(--radius-control);
  padding: 4px 8px;
  background: transparent;
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.btn-text svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.btn-text:hover:not(:disabled) {
  background: rgba(var(--teal-rgb), 0.08);
}

.btn-text--danger {
  color: var(--red);
}

.btn-text--danger:hover:not(:disabled) {
  background: rgba(var(--red-rgb), 0.08);
}

.btn-text--muted {
  color: var(--muted);
}

.btn-text--muted:hover:not(:disabled) {
  background: rgba(var(--navy-rgb), 0.06);
  color: var(--text);
}

.btn-text:disabled {
  opacity: 0.48;
  cursor: default;
}

/* display: inline-flex above would otherwise beat the hidden attribute. */
.btn[hidden],
.btn-text[hidden],
.icon-button[hidden] {
  display: none;
}

/* Icon-only version of .btn-text: 28px, or --sm (24px) for dense rows. A
   button with aria-expanded="true" flips its chevron. */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.icon-button svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
}

.icon-button--sm {
  width: 24px;
  height: 24px;
}

.icon-button--sm svg {
  width: 14px;
  height: 14px;
}

.icon-button:hover:not(:disabled) {
  background: rgba(var(--navy-rgb), 0.06);
  color: var(--text);
}

.icon-button--danger:hover:not(:disabled) {
  background: rgba(var(--red-rgb), 0.08);
  color: var(--red);
}

.icon-button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.icon-button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Inputs / selects / textareas */

/* Element-level defaults — every textual input, select, and textarea gets the
   platform look with no wrapper class required. :where() keeps specificity at
   0,0,1 so any existing client/component rule still wins. Checkbox/radio/
   range/file/color and button-like types keep native rendering. For selects
   this is the no-JS fallback; pages that load shared/ui-select.js get the
   styled .ui-select dropdown on top. */
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"],
    [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"])),
select,
textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--text);
  padding: 11px 12px;
  font-size: 14px;
  outline: none;
}

/* Oblika vnosnega polja — samo ta dva razreda, nikoli polmer po zaslonih.
   .input-squared je enak privzetku in služi kot eksplicitni povratek iz
   podedovane zaobljene oblike. */

input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"],
    [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"])):focus,
select:focus,
textarea:focus {
  border-color: rgba(var(--vivid-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--vivid-rgb), 0.13);
}

input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"],
    [type="color"], [type="button"], [type="submit"], [type="reset"], [type="hidden"])):disabled,
select:disabled,
textarea:disabled {
  border-color: rgba(var(--navy-rgb), 0.08);
  background: rgba(var(--navy-rgb), 0.045);
  color: rgba(35, 49, 42, 0.56);
  cursor: not-allowed;
}

textarea {
  resize: vertical;
}

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

.field-control {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.field-control-wide {
  grid-column: 1 / -1;
}

.field-control input,
.field-control select,
.field-control textarea,
.compound-input input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  padding: 11px 12px;
  font-size: 14px;
  outline: none;
}

.field-control input:disabled,
.field-control select:disabled,
.field-control textarea:disabled {
  border-color: rgba(var(--navy-rgb), 0.08);
  background: rgba(var(--navy-rgb), 0.045);
  color: rgba(35, 49, 42, 0.56);
  cursor: not-allowed;
}

.field-control textarea {
  min-height: 92px;
  resize: vertical;
}

.field-control input:focus,
.field-control select:focus,
.field-control textarea:focus,
.compound-input input:focus {
  border-color: rgba(var(--vivid-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--vivid-rgb), 0.13);
}

.field-control-error input,
.field-control-error textarea,
.field-control-error select {
  border-color: rgba(var(--red-rgb), 0.52);
  background: rgba(var(--red-rgb), 0.035);
}

.field-control-error input:focus,
.field-control-error textarea:focus,
.field-control-error select:focus {
  border-color: rgba(var(--red-rgb), 0.62);
  box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.12);
}

.field-message {
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.select-shell {
  position: relative;
  display: block;
}

.select-shell::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 13px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.select-shell select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer;
}

/* Ko ui-select.js nadgradi <select>, puščico riše .ui-select-chevron —
   fallback puščica ovoja mora izginiti, sicer se prikažeta dve. */
.ui-select-host::after { content: none !important; }

/* Custom <details>/<summary> dropdown — a richer alternative to .ui-select
   for options that need a label + description (see design-guidelines.html). */

.dropdown-menu {
  position: relative;
}

.dropdown-menu summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dropdown-menu summary::-webkit-details-marker {
  display: none;
}

.dropdown-menu summary:focus-visible {
  border-color: rgba(var(--vivid-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--vivid-rgb), 0.13);
}

.dropdown-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
}

.dropdown-menu[open] summary {
  border-color: rgba(var(--navy-rgb), 0.18);
  border-radius: 8px 8px 0 0;
}

.dropdown-menu[open] .dropdown-chevron {
  transform: translateY(2px) rotate(225deg);
}

.dropdown-options {
  display: grid;
  border: 1px solid rgba(var(--navy-rgb), 0.18);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--surface);
  box-shadow: 0 18px 38px rgba(17, 25, 34, 0.12);
  overflow: hidden;
}

.dropdown-option {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--text);
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
}

.dropdown-option:last-child {
  border-bottom: 0;
}

.dropdown-option:hover,
.dropdown-option:focus-visible {
  background: rgba(var(--navy-rgb), 0.045);
  outline: none;
}

.dropdown-option.is-selected {
  box-shadow: inset 3px 0 0 var(--teal);
}

.dropdown-option span {
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

.dropdown-option small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

/* Choice controls: radio / checkbox / toggle cards */

.control-group {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.control-group legend {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.radio-card,
.check-card,
.toggle-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.radio-card input,
.check-card input,
.toggle-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.control-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(var(--navy-rgb), 0.24);
  background: #fff;
  color: #fff;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.radio-card .control-mark {
  border-radius: 50%;
}

.radio-card .control-mark::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform 0.15s;
}

.check-card .control-mark {
  border-radius: 6px;
}

.check-card .control-mark::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform 0.15s;
}

.radio-card strong,
.toggle-row strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.radio-card small,
.toggle-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.check-card span:last-child {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.radio-card:has(input:checked),
.check-card:has(input:checked),
.toggle-row:has(input:checked) {
  border-color: rgba(var(--teal-rgb), 0.34);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(var(--teal-rgb), 0.16);
}

.radio-card:has(input:focus-visible),
.check-card:has(input:focus-visible),
.toggle-row:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(var(--vivid-rgb), 0.13);
}

.radio-card input:checked + .control-mark,
.check-card input:checked + .control-mark {
  border-color: var(--teal);
  background: var(--teal);
}

.radio-card input:checked + .control-mark::after,
.check-card input:checked + .control-mark::after {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

.radio-card input:checked + .control-mark::after {
  transform: scale(1);
}

.toggle-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.toggle-track {
  position: relative;
  width: 46px;
  height: 26px;
  border: 1.5px solid rgba(var(--navy-rgb), 0.18);
  border-radius: 999px;
  background: rgba(var(--navy-rgb), 0.08);
  transition: background 0.15s, border-color 0.15s;
}

.toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(17, 25, 34, 0.18);
  transition: transform 0.15s;
}

.toggle-row input:checked + .toggle-track {
  border-color: var(--teal);
  background: var(--teal);
}

.toggle-row input:checked + .toggle-track::after {
  transform: translateX(20px);
}

/* Custom dropdown (.ui-select) — the platform's one styled dropdown.
   Native <select> can't style its open option popup, so UISelect
   (shared/ui-select.js) auto-enhances every <select> into this control while
   keeping the native element as the hidden value source. */
.ui-select-native { display: none !important; }
.ui-select { position: relative; }
.ui-select-trigger {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.ui-select-trigger::-webkit-details-marker { display: none; }
.ui-select-trigger::marker { content: ''; }
.ui-select-trigger:hover { border-color: rgba(var(--navy-rgb), 0.28); }
.ui-select.is-disabled .ui-select-trigger {
  border-color: rgba(var(--navy-rgb), 0.08);
  background: rgba(var(--navy-rgb), 0.045);
  color: rgba(35, 49, 42, 0.56);
  cursor: not-allowed;
}
.ui-select[open] .ui-select-trigger { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb),0.14); }
.ui-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-chevron { display: inline-flex; flex-shrink: 0; color: var(--muted); transition: transform .15s, color .15s; }
.ui-select[open] .ui-select-chevron { transform: rotate(180deg); color: var(--teal); }
/* Lego (left/top/bottom/width) in največjo višino postavi UIAnchor
   (shared/ui-anchor.js) ob odprtju — `fixed` je zato, da meni pobegne
   `overflow` odrezu škatle, v kateri je spustni seznam. Tukajšnja
   `max-height` je zgornja meja, ki jo vidno okno lahko le zniža. */
.ui-select-menu {
  position: fixed;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(var(--navy-rgb),0.16);
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ui-select-option {
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding: 9px 11px;
  border-radius: 8px;
  transition: background .12s, color .12s;
}
.ui-select-option:hover { background: rgba(var(--navy-rgb),0.05); }
.ui-select-option.selected { background: rgba(var(--teal-rgb),0.10); color: var(--teal); font-weight: 700; }
.ui-select-option:disabled { color: rgba(35, 49, 42, 0.56); background: transparent; cursor: not-allowed; }
/* Iskalnik znotraj menija (data-ui-search) — lepljiv, da ostane viden ob drsenju. */
.ui-select-search {
  position: sticky;
  top: -6px;
  z-index: 1;
  margin: -6px -6px 4px;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}
.ui-select-search:focus { outline: none; box-shadow: inset 0 -2px 0 var(--teal); }
.ui-select-empty { padding: 9px 11px; font-size: 13px; color: var(--muted); }
/* Ročni vnos (data-ui-custom) — ponudba, ne možnost s seznama. */
.ui-select-custom { color: var(--teal); font-weight: 700; }
/* Meni je flex; brez tega bi `hidden` na filtriranih vrsticah ne prijel. */
.ui-select-menu [hidden] { display: none; }

/* ── §5  COMPONENTS — panels, tables, badges, stat cards, modals,
   notices, spinners, app header, tooltip ─────────────────────────── */

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 22px;
}

/* Class-based table (admin, project_conditions dashboards). The parcel
   report keeps styling bare <table>/<th>/<td> directly — see §7. */
.table-panel {
  margin-top: 16px;
  overflow-x: auto;
}

.table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 14px;
}

.table th,
.table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}

.table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.table td {
  color: var(--text);
}

.table tr:last-child td {
  border-bottom: 0;
}

/* Badges / tags / status */

.badge,
.tag,
.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 26px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.badge {
  border: 1px solid rgba(var(--vivid-rgb), 0.22);
  background: rgba(var(--vivid-rgb), 0.08);
  color: var(--navy);
  padding: 0 11px;
}

.badge-dot,
.status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vivid);
}

.badge-teal {
  border-color: rgba(var(--teal-rgb), 0.22);
  background: rgba(var(--teal-rgb), 0.08);
}

.badge-teal .badge-dot {
  background: var(--teal);
}

.badge-sand {
  border-color: rgba(var(--sand-rgb), 0.4);
  background: rgba(var(--sand-rgb), 0.14);
}

.badge-sand .badge-dot {
  background: var(--sand);
}

.badge-red {
  border-color: rgba(var(--red-rgb), 0.24);
  background: rgba(var(--red-rgb), 0.08);
  color: var(--red);
}

.badge-red .badge-dot {
  background: var(--red);
}

.badge-orange {
  border-color: rgba(var(--orange-rgb), 0.28);
  background: rgba(var(--orange-rgb), 0.1);
  color: var(--orange);
}

.badge-orange .badge-dot {
  background: var(--orange);
}

.badge-muted {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}

.badge-muted .badge-dot {
  background: var(--muted);
}

.tag {
  border: 1px solid rgba(var(--vivid-rgb), 0.22);
  background: rgba(var(--vivid-rgb), 0.07);
  color: var(--navy);
  padding: 0 13px;
}

.tag-muted {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}

.tag-danger {
  border-color: rgba(var(--red-rgb), 0.24);
  background: rgba(var(--red-rgb), 0.08);
  color: var(--red);
}

.status {
  color: var(--muted);
}

.status-warn span {
  background: var(--orange);
}

.status-error span {
  background: var(--red);
}

/* Stat cards — dashboard metric tiles (admin, project_conditions) */

.stat-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 18px;
}

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--teal-rgb), 0.14);
  border-radius: 8px;
  background: rgba(var(--teal-rgb), 0.08);
  color: var(--teal);
}

.stat-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat-value {
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}

.stat-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stat-card--sand .stat-icon {
  border-color: rgba(var(--sand-rgb), 0.3);
  background: rgba(var(--sand-rgb), 0.16);
  color: var(--orange);
}

/* Modal */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--navy-rgb), 0.45);
}

.modal {
  width: 440px;
  max-width: 92vw;
  border-radius: 12px;
  background: var(--surface);
  padding: 30px;
  box-shadow: 0 24px 60px rgba(var(--navy-rgb), 0.28);
}

.modal h2,
.modal h3 {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 800;
}

.modal p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 13px;
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.modal-err {
  margin: 12px 0 0;
}

/* Notices — one minimal look everywhere: no fill, no box, a thin rule on the
   left and small text. The variant only recolours the rule (and the title for
   error/warn), so every notice in every app reads as the same element. */

.notice {
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* Without a box the text would touch whatever precedes it. */
* + .notice {
  margin-top: 10px;
}

.notice strong {
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
}

.notice p {
  margin-top: 2px;
}

.notice-info { border-left-color: var(--teal); }

.notice-warn { border-left-color: var(--orange); }

.notice-warn strong { color: var(--orange); }

.notice-error { border-left-color: var(--red); }

.notice-error strong { color: var(--red); }

/* Tooltip */

.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 10;
  display: none;
  min-width: max-content;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(17, 25, 34, 0.16);
}

.tooltip:hover::after,
.tooltip:focus-visible::after {
  display: block;
}

/* Brand lockup (shared across clients). Vrhnje glave ni — navigacijo nosi
   .app-shell iz §5, glej opombo pri .pp-app .dashboard. */

.top-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  text-decoration: none;
}

.top-brand img,
.top-brand svg {
  width: 30px;
  height: 30px;
}

.top-brand span {
  display: grid;
  gap: 2px;
}

.top-brand strong {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.05;
}

.top-brand small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

/* Loading / spinners — the one loader set every surface reuses */

#loading {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 250, 250, 0.95);
}

.loading-center {
  text-align: center;
}

.spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 2px;
}

.spinner-block {
  background: var(--navy);
  animation: block-pulse 1.2s ease-in-out infinite;
}

.spinner-block:nth-child(1) { animation-delay: 0s; }
.spinner-block:nth-child(2) { animation-delay: 0.1s; }
.spinner-block:nth-child(3) { animation-delay: 0.2s; }
.spinner-block:nth-child(4) { animation-delay: 0.1s; }
.spinner-block:nth-child(5) { animation-delay: 0.2s; }
.spinner-block:nth-child(6) { animation-delay: 0.3s; }
.spinner-block:nth-child(7) { animation-delay: 0.2s; }
.spinner-block:nth-child(8) { animation-delay: 0.3s; }
.spinner-block:nth-child(9) { animation-delay: 0.4s; }

@keyframes block-pulse {
  0%, 100% { opacity: 0.15; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}

.loading-steps {
  display: inline-block;
  text-align: left;
}

.loading-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--muted);
  font-size: 13px;
  transition: color 0.2s;
}

.loading-step.active { color: var(--text); }
.loading-step.done { color: var(--vivid); }

.step-icon {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 11px;
}

.step-spinner {
  width: 10px;
  height: 10px;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
}

.step-spinner-block {
  background: var(--navy);
  animation: block-pulse 0.8s ease-in-out infinite;
}

.step-spinner-block:nth-child(1) { animation-delay: 0s; }
.step-spinner-block:nth-child(2) { animation-delay: 0.1s; }
.step-spinner-block:nth-child(3) { animation-delay: 0.2s; }
.step-spinner-block:nth-child(4) { animation-delay: 0.3s; }

.loading-inline {
  padding: 8px 0;
  color: var(--muted);
  font-size: 14px;
}

/* Design-system dot/block loaders (legacy compat names — drop with T14) */

.ds-spinner {
  width: 36px;
  height: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 2px;
}

.ds-spinner-block {
  background: var(--navy);
  animation: block-pulse 1.2s ease-in-out infinite;
}

.ds-spinner-block:nth-child(1) { animation-delay: 0s; }
.ds-spinner-block:nth-child(2) { animation-delay: 0.1s; }
.ds-spinner-block:nth-child(3) { animation-delay: 0.2s; }
.ds-spinner-block:nth-child(4) { animation-delay: 0.1s; }
.ds-spinner-block:nth-child(5) { animation-delay: 0.2s; }
.ds-spinner-block:nth-child(6) { animation-delay: 0.3s; }
.ds-spinner-block:nth-child(7) { animation-delay: 0.2s; }
.ds-spinner-block:nth-child(8) { animation-delay: 0.3s; }
.ds-spinner-block:nth-child(9) { animation-delay: 0.4s; }

/* Drop zone */

.ds-drop-zone {
  border: 2px dashed var(--line);
  padding: 48px 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.ds-drop-zone:hover,
.ds-drop-zone.drag-over {
  border-color: var(--navy);
  background: var(--white);
}

.ds-drop-zone-icon { margin-bottom: 12px; }
.ds-drop-zone-icon svg { width: 40px; height: 40px; stroke: var(--muted); }

.ds-drop-zone-text {
  color: var(--muted);
  font-size: 14px;
}

.ds-drop-zone-text b { color: var(--text); }

.ds-drop-zone-sub {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

/* ── APP SHELL — dark sidebar + content column ─────────────────────

   The standard layout for every logged-in client surface (arhitekt,
   projektni pogoji, and any client added later). It is deliberately
   unscoped: a client opts in by using the markup below, not by having
   its own copy of these rules. Put only genuinely client-specific
   overrides (a different --side-bg, a wider --content-max) in that
   client's own section.

   Required markup — the sidebar is a flex column, so the order of the
   three children (brand / side-nav / side-foot) is what puts the nav
   under the brand and pins the profile to the bottom:

     <body class="<client>-app">
       <div class="app-shell">
         <aside class="side">
           <a class="brand">                     brand-logo + brand-txt
           <button class="project-back">         optional: inside a record
           <div class="side-nav" id="side-nav">  JS-built, flex:1
             <div class="side-label">            section heading
             <button class="nav-stage">          top-level item
             <div class="nav-sub">               children of the open item
               <button class="nav-sub-item">
           <div class="side-foot">               profile + auth-slot
         <main class="app-main">
           <div class="main-inner">              content, capped + centred

   Two conventions the JS must honour:

   1. `.nav-stage` is a 3-column grid (leading / label / trailing). Always
      pass three children, even when the third is an empty <span> — the
      leading slot takes `.num` (a numbered step), `.nav-icon` (an icon),
      or `.num-blank` (neither), so items line up across sections.
   2. A step the user may not open yet gets the `disabled` attribute, not
      `display:none`. The rail is a map of the whole flow; hiding future
      steps makes it a much worse one.

   `.app-shell` / `.app-main` carry the `app-` prefix because plain
   `.shell` and `.main` already mean something different in §13 ACCOUNT
   (a centred, sidebar-less page). Every other class here was
   architect-only and kept its name.
   ────────────────────────────────────────────────────────────────── */

.app-shell {
  /* Overridable per client, e.g. `.pp-app .app-shell { --side-bg: … }`.
     --side-fg is the sidebar's own foreground so the component does not
     depend on a client repurposing the global --white token. */
  --side-bg: #17181a;
  --side-fg: var(--surface);
  --content-max: 1300px;

  display: grid;
  /* First track = 330px sidebar box + 16px margin each side. */
  grid-template-columns: 362px minmax(0, 1fr);
  min-height: 100vh;
}

.app-shell .side { position: sticky; top: 16px; align-self: start; height: calc(100vh - 32px); box-sizing: border-box;
    display: flex; flex-direction: column; gap: 6px; background: var(--side-bg); padding: 22px 16px;
    margin: 16px; border-radius: 18px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.18); }

/* Defensive: clients scope their own `main` rules (.li-app main, .account-app
   main), and the content column must fill its grid track regardless. */

.app-main { min-width: 0; max-width: none; margin: 0; background: var(--surface); }

.app-main .main-inner { max-width: var(--content-max); margin: 0 auto; padding: 44px 40px 88px; }

/* Brand */

.app-shell .brand { display: flex; align-items: center; gap: 11px; color: var(--side-fg); text-decoration: none; margin-bottom: 18px; padding: 4px 6px; }

.app-shell .brand-logo { width: 34px; height: 34px; flex-shrink: 0; }

.app-shell .brand-logo rect { fill: var(--surface); }

.app-shell .brand-logo path { fill: var(--navy); }

.app-shell .brand-txt { display: grid; gap: 2px; }

.app-shell .brand-txt strong { font-size: 17px; font-weight: 800; line-height: 1.05; }

.app-shell .brand-txt small { color: rgba(249,247,244,0.6); font-size: 12px; font-weight: 600; }

.app-shell .side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.app-shell .side-foot { margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(249,247,244,0.12); }

/* Active record header — name + back arrow, above the nav */

.app-shell .project-back { display: flex; align-items: flex-start; gap: 6px; width: 100%; background: none; border: 0;
    border-bottom: 1px solid rgba(249,247,244,0.12); cursor: pointer; color: inherit; font-family: inherit;
    text-align: left; padding: 4px 3px 13px; margin-bottom: 8px; }

.app-shell .project-back-arrow { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: rgba(249,247,244,0.5); transition: color .15s, transform .15s; }

.app-shell .project-back-arrow svg { width: 20px; height: 20px; display: block; }

.app-shell .project-back:hover .project-back-arrow { color: var(--side-fg); transform: translateX(-2px); }

.app-shell .project-back-name { font-size: 15px; font-weight: 800; letter-spacing: -0.2px; line-height: 1.25;
    color: rgba(249,247,244,0.92); min-width: 0; transition: color .15s; }

.app-shell .project-back:hover .project-back-name { color: var(--side-fg); }

.app-shell .side-label { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    color: rgba(249,247,244,0.4); padding: 8px 10px 6px; }

/* Top-level nav item */

.app-shell .nav-stage { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 11px; align-items: center;
    min-height: 42px; border: 0; border-radius: 8px; background: transparent; color: rgba(249,247,244,0.72);
    padding: 0 12px; text-align: left; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background .15s, color .15s; }

.app-shell .nav-stage:not([disabled]):hover { background: rgba(249,247,244,0.08); color: var(--side-fg); }

.app-shell .nav-stage .num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 50%; background: rgba(249,247,244,0.1); color: inherit; font-size: 12px; font-weight: 800; flex-shrink: 0; }

.app-shell .nav-stage.active { background: var(--surface); color: var(--navy); }

.app-shell .nav-stage.active .num { background: var(--teal); color: var(--surface); }

.app-shell .nav-stage[disabled] { opacity: 0.42; cursor: not-allowed; }

.app-shell .nav-stage .lock { font-size: 11px; opacity: 0.8; }

/* Nav submenu */

.app-shell .nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 3px 0 8px 24px;
    padding-left: 14px; border-left: 3px solid rgba(249,247,244,0.16); }

.app-shell .nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; }

.app-shell .nav-icon svg { width: 20px; height: 20px; display: block; }

.app-shell .nav-sub-item { position: relative; text-align: left; border: 0; background: transparent; cursor: pointer;
    color: rgba(249,247,244,0.62); font-family: inherit; font-size: 12.5px; font-weight: 600;
    padding: 8px 10px; border-radius: 6px; transition: background .15s, color .15s; }

.app-shell .nav-sub-item:not([disabled]):hover { background: rgba(249,247,244,0.07); color: var(--side-fg); }

.app-shell .nav-sub-item.active { color: var(--side-fg); font-weight: 700; }

.app-shell .nav-sub-item.active::before { content: ""; position: absolute; left: -14px; top: 6px; bottom: 6px;
    width: 3px; border-radius: 3px; background: var(--teal); }

.app-shell .nav-sub-item .done { color: var(--vivid); margin-left: 6px; font-size: 11px; }

.app-shell .nav-sub-item[disabled] { opacity: 0.4; cursor: not-allowed; }

.app-shell .auth-slot { padding: 4px 6px; }

/* Sidebar profile (name + company/role + sign-out). Uporablja se kot blok
   (arhitekt) ali kot gumb, ki odpre profil (projektni pogoji), zato so tu tudi
   ničelne vrednosti gumba. */

.app-shell .side-profile { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 8px 10px; padding: 6px 6px 2px;
    width: 100%; border: 0; background: transparent; font: inherit; text-align: left; }

.app-shell button.side-profile { cursor: pointer; border-radius: 9px; transition: background .15s; }

.app-shell button.side-profile:hover { background: rgba(249,247,244,0.06); }

.app-shell .side-profile-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--teal); color: var(--surface);
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }

.app-shell .side-profile-info { display: flex; flex-direction: column; min-width: 0; }

.app-shell .side-profile-name { color: var(--side-fg); font-size: 13px; font-weight: 700; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-shell .side-profile-company,
.app-shell .side-profile-role { color: rgba(249,247,244,0.5); font-size: 11.5px; font-weight: 600; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Profil + ikona odjave v isti vrstici (projektni pogoji); arhitekt namesto
   tega uporablja poln gumb .side-signout pod profilom. */
.app-shell .side-profile-row { display: flex; align-items: center; gap: 4px; }

.app-shell .side-profile-row .side-profile { flex: 1; min-width: 0; }

.app-shell .side-signout-icon { flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0;
    background: transparent; border-radius: 9px; color: rgba(249,247,244,0.6); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }

.app-shell .side-signout-icon:hover { background: rgba(249,247,244,0.08); color: var(--side-fg); }

.app-shell .side-signout-icon svg { width: 17px; height: 17px; }

.app-shell .side-signout { grid-column: 1 / -1; margin-top: 8px; height: 34px; border: 1px solid rgba(249,247,244,0.16);
    background: transparent; color: rgba(249,247,244,0.8); font-family: inherit; font-size: 12px; font-weight: 700;
    border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; }

.app-shell .side-signout:hover { background: rgba(249,247,244,0.08); color: var(--side-fg); }

/* Narrow: the sidebar stops being a column and becomes a horizontal rail
   above the content. The submenu is dropped rather than wrapped — at this
   width it costs more room than it gives. */

@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-shell .side { position: static; height: auto; }
  .app-shell .side-nav { flex-direction: row; overflow-x: auto; }
  .app-shell .nav-sub { display: none; }
  .app-main .main-inner { padding: 28px 20px 56px; }
}

/* History dropdown (history-panel.js) — past searches / parcel lookups hung
   off a trigger. Shared by iskalnik and lokacijska, so it lives here rather
   than in either client's section. UIAnchor positions it (position: fixed,
   coordinates written per open); `max-height` below is the upper bound it
   may lower, never raise. */

.history-panel {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 24px));
    max-height: 420px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(31, 45, 37, 0.14);
    overflow: hidden;
}

.history-panel.hidden { display: none; }

.history-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--line);
}

.history-panel-title { font-size: 13px; font-weight: 700; color: var(--navy); }

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

.history-panel-body { flex: 1; overflow-y: auto; padding: 6px; }

.history-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 9px 10px;
    background: none;
    border: 0;
    border-radius: 9px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.history-row:hover, .history-row:focus-visible { background: var(--line); }

.history-row.is-loading { opacity: 0.55; cursor: progress; }

/* Two lines, then ellipsis: a question can be a paragraph, and a row that
   grows with it turns the list into a wall of text. */
.history-row-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--navy);
}

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

.history-panel-empty {
    padding: 18px 12px;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
}

.history-panel-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
}

.history-panel-foot:hover { background: var(--line); }

/* Start-screen account row — profile + Zgodovina as two equal pills, fixed
   at the bottom centre. Shared by iskalnik (empty page) and lokacijska
   (hero); profile-pill.js fills the profile pill once auth is ready. */

.account-footer {
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    transform: translateX(-50%);
}

.account-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--navy);
    cursor: pointer;
    transition: border-color 0.15s;
}

.account-pill:hover,
.account-pill:focus-visible,
.account-pill[aria-expanded="true"] { border-color: var(--navy); }

.account-pill svg { flex-shrink: 0; width: 15px; height: 15px; }

.account-pill.hidden { display: none; }

.account-pill-profile { display: none; gap: 8px; padding: 2px 14px 2px 2px; }

.account-pill-profile.is-visible { display: inline-flex; }

.account-pill-label {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   §6  AUTH & OVERLAYS — Clerk widgets, signup-quota modal, access gate,
   credits modal. Used by both the logged-in app and the public account
   pages (which used to load a hardcoded-hex duplicate, auth.css).
   ═══════════════════════════════════════════════════════════════════ */

.auth-slot {
  display: inline-flex;
  align-items: center;
  min-width: 28px;
  min-height: 28px;
}

.auth-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1.5px solid rgba(var(--navy-rgb), 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--navy);
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.auth-signin-btn:hover {
  border-color: var(--navy);
  background: var(--surface);
  filter: none;
}

.auth-signin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.auth-signin-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* AI credit balance indicator (search top bar, location_information hero) */
.credit-widget {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--navy);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.credit-widget.is-visible {
  display: inline-flex;
}

.signup-quota-overlay {
  position: fixed;
  inset: 0;
  /* Nad .auth-gate (9999): prijavno okno odpre prav gumb na tem zaslonu, zato
     mora biti nad njim — sicer se odpre pod prekrivnim zaslonom in prijava
     izgleda, kot da ne dela. */
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(var(--navy-rgb), 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.signup-quota-overlay.is-open { display: flex; }

.signup-quota-modal {
  width: min(100%, 420px);
  border: 1px solid rgba(var(--navy-rgb), 0.12);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(var(--navy-rgb), 0.24);
  padding: 24px;
  color: var(--navy);
}

.signup-quota-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.signup-quota-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
}

.signup-quota-close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.signup-quota-copy {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.signup-quota-form,
.signup-quota-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signup-quota-step[hidden] { display: none; }

.signup-quota-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.signup-quota-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--navy);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.signup-quota-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(var(--teal-rgb), 0.12);
}

.signup-quota-btn {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: var(--navy);
  color: var(--surface);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.signup-quota-btn.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--navy);
  color: var(--surface);
  border-color: var(--navy);
}

.signup-quota-btn:disabled {
  opacity: 0.62;
  cursor: wait;
}

.signup-quota-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.signup-quota-divider::before,
.signup-quota-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.signup-quota-error {
  min-height: 18px;
  color: var(--red);
  font-size: 13px;
  line-height: 1.4;
}

.signup-quota-terms {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}

.signup-quota-terms input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--teal);
}

.signup-quota-terms a { color: var(--teal); font-weight: 700; }

.signup-quota-note {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.signup-quota-link {
  border: none;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.auth-credits-modal {
  width: min(100%, 480px);
}

.auth-credits-copy {
  margin-bottom: 16px;
}

.auth-credits-preview-title {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.auth-credits-packages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.auth-credits-package {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 12px;
}

.auth-credits-package:hover,
.auth-credits-package:focus-visible {
  border-color: var(--teal);
  background: var(--surface);
  outline: none;
}

.auth-credits-package strong {
  font-size: 14px;
  line-height: 1.2;
}

.auth-credits-package span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.auth-credits-action {
  margin-top: 2px;
}

.auth-credits-note {
  text-align: center;
}

@media (max-width: 560px) {
  .auth-credits-packages {
    grid-template-columns: 1fr;
  }

  .auth-credits-package {
    min-height: 0;
  }
}

/* Inline access-gate overlay for internal / invite-only clients. */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 32, 0.55);
  backdrop-filter: blur(2px);
}

.auth-gate-card {
  width: 100%;
  max-width: 440px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 32px;
  text-align: center;
}

.auth-gate-card h2 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 20px;
}

.auth-gate-card p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.auth-gate-card button {
  border: none;
  border-radius: 10px;
  background: var(--navy);
  color: var(--surface);
  padding: 10px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.auth-gate-card button.secondary {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--navy);
}

/* ═══════════════════════════════════════════════════════════════════
   §7  PARCEL REPORT (.arh-report) — the location lookup result: map,
   3D envelope diagram, summary cards, rule/detail sections, tables.
   Shared verbatim by architect (embedded in the wizard) and
   location_information (its own standalone results page, wrapped in
   .arh-report inside .li-app — see §10). This used to be forked into
   two near-identical copies (.li-app .* and .arh-report .*); this is
   the single merged version. Client-only chrome around the report
   (hero/search form, title bar, autocomplete, wizard shell) lives in
   §9/§10, not here.
   ═══════════════════════════════════════════════════════════════════ */

.arh-report {
  font-family: var(--font);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.arh-report .hidden {
  display: none !important;
}

.arh-report main {
  max-width: 100%;
  padding: 0;
}

/* Compact title bar for embedded contexts (architect's wizard). The
   standalone location_information page uses the fuller .title-bar in §10. */

/* Panels */

/* Map and envelope fill their panel under the header, edge to edge; the
   two headers differ in height, so the content takes the remaining space. */
.arh-report .top-row > .panel {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.arh-report .top-row > .panel > #map,
.arh-report .top-row > .panel > #envelope-diagram { flex: 1 0 auto; }

.arh-report .top-row.map-expanded .map-panel,
.arh-report .top-row.map-expanded .envelope-panel {
  grid-column: 1 / -1;
  width: 100%;
}

.arh-report .panel,
.arh-report .card,
.arh-report .detail-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 22px rgba(var(--navy-rgb), 0.04);
}

.arh-report .panel {
  overflow: hidden;
  padding: 0;
  border-top: 2px solid rgba(var(--teal-rgb), 0.18);
}

.arh-report .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 8px 16px;
  background: rgba(249, 247, 244, 0.56);
  border-bottom: 1px solid var(--line);
}

.arh-report .panel h2 {
  padding: 13px 16px;
  color: var(--muted);
  background: rgba(249, 247, 244, 0.56);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.arh-report .panel-header h2 {
  padding: 0;
  background: transparent;
  border-bottom: 0;
}

.arh-report #map,
.arh-report #envelope-diagram {
  height: 460px;
  background: var(--white);
}

.arh-report .top-row.map-expanded #map {
  height: clamp(560px, 62vh, 660px);
}

.arh-report .pdf-map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 18px;
  text-align: center;
}

.arh-report .pdf-image-panel {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}

.arh-report .pdf-panel-image {
  display: block;
  width: 100%;
  height: auto;
}

.arh-report .envelope-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
}

.arh-report .envelope-placeholder-icon {
  width: 48px;
  height: 48px;
  color: var(--muted);
  opacity: 0.6;
}

.arh-report .envelope-placeholder-icon svg {
  width: 100%;
  height: 100%;
}

.arh-report .envelope-placeholder--blocked {
  color: var(--red);
  text-align: center;
}

.arh-report .envelope-placeholder--blocked .envelope-placeholder-icon {
  color: var(--red);
  opacity: 1;
}

.arh-report .envelope-placeholder--blocked h3 {
  margin: 0;
  color: var(--red);
  font-size: 18px;
  font-weight: 700;
}

.arh-report .muted,
.arh-report .loading-inline,
.arh-report .diagram-loading-step {
  color: var(--muted);
}

/* Leaflet */

.arh-report .leaflet-container {
  font-family: inherit;
}

.arh-report .leaflet-control-zoom a {
  color: var(--navy);
  border-color: var(--line);
}

/* Overlay boxes — the map legend and the 3D envelope panel share one
   style: top-right corner, identical fixed width, padding, slightly
   transparent background and border. */

.arh-report .infra-legend-row:hover {
  background: rgba(var(--teal-rgb), 0.08);
}

/* Summary cards — a distinct component from the base .stat-card/.panel;
   flex-column tile with an icon, no border, used only in the report. */

.arh-report .cards-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.arh-report .card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  min-height: 154px;
  padding: 18px;
  border-top: 2px solid rgba(var(--teal-rgb), 0.16);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.arh-report .card:hover {
  border-color: rgba(var(--teal-rgb), 0.38);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.arh-report .card-icon {
  margin-bottom: 6px;
}

.arh-report .card-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--teal);
  stroke-width: 1.7;
  fill: none;
}

.arh-report .val--red { color: var(--red); }
.arh-report .val--green { color: var(--teal); }
.arh-report .val--orange { color: var(--orange); }

/* Details */

.arh-report .details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arh-report .detail-section {
  overflow: hidden;
}

/* Sections are always expanded — header is a plain heading, not a toggle */
.arh-report .detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px 16px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  cursor: default;
  user-select: auto;
}

.arh-report .detail-header:hover {
  background: transparent;
}

.arh-report .detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: var(--navy);
}

.arh-report .detail-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--surface);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arh-report .detail-body {
  padding: 0 18px 18px;
  overflow-x: auto;
}

.arh-report .rules-kv li {
  border-bottom: 1px solid rgba(var(--navy-rgb), 0.06);
}

.arh-report .zone-list li {
  border-bottom: 1px solid rgba(var(--navy-rgb), 0.06);
}

.arh-report .warning-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.arh-report .warning-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: var(--text);
  border-bottom: 1px solid rgba(var(--navy-rgb), 0.06);
  line-height: 1.45;
}

.arh-report .location-disclaimer {
  margin: 18px 2px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.arh-report .zone-dot--orange { background: var(--orange); }
.arh-report .zone-dot--red { background: var(--red); }

/* Buildability status — first line of "Namenska raba in možnost gradnje"
   (ParcelZoning.renderStatus). The icon chip mirrors .detail-icon; its
   colour is the verdict: olive possible, orange conditional, red not
   possible, muted unknown. */
.arh-report .buildability-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(var(--status-rgb), 0.12);
}

.arh-report .buildability-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--status);
}

.arh-report .buildability-status-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arh-report .buildability-status--ok { --status: var(--vivid); --status-rgb: var(--vivid-rgb); }
.arh-report .buildability-status--conditional { --status: var(--orange); --status-rgb: var(--orange-rgb); }
.arh-report .buildability-status--blocked { --status: var(--red); --status-rgb: var(--red-rgb); }
.arh-report .buildability-status--unknown { --status: var(--muted); --status-rgb: var(--navy-rgb); }

.arh-report .buildability-status-text { min-width: 0; padding-top: 1px; }

.arh-report .buildability-status-text strong {
  display: block;
  color: var(--status);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.arh-report .buildability-status-text p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.arh-report .buildability-status-text ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

/* Zoning / EUP / land-use tables: descriptions wrap instead of being cut
   off, figures are right-aligned and never break. The code and figure
   columns have fixed widths, so stacked tables line up with each other. */
.arh-report .zoning-table td {
  max-width: none;
  white-space: normal;
  overflow: visible;
}

.arh-report .zoning-table th.num,
.arh-report .zoning-table td.num {
  width: 104px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.arh-report .zoning-table th:first-child,
.arh-report .zoning-table td:first-child { width: 96px; }

.arh-report .zoning-table td:first-child {
  font-weight: 600;
  color: var(--navy);
}

.arh-report .zoning-table + .rules-kv { margin-top: 8px; }

@media (max-width: 600px) {
  .arh-report .zoning-table th,
  .arh-report .zoning-table td { padding: 8px 6px; }
  .arh-report .zoning-table th:first-child,
  .arh-report .zoning-table td:first-child { width: 48px; }
  .arh-report .zoning-table th.num,
  .arh-report .zoning-table td.num { width: 60px; }
  .arh-report .zoning-table th,
  .arh-report .zoning-table th.num { letter-spacing: 0.3px; white-space: normal; }
}

.arh-report .diagram-loading {
  margin: auto;
}

.arh-report .spinner-block,
.arh-report .step-spinner-block {
  background: var(--teal);
  border-radius: 2px;
}

/* Map-expand button (top-right of the map/envelope panel header) */
.arh-report .panel-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1.5px solid rgba(var(--teal-rgb), 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.arh-report .panel-icon-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.arh-report .panel-icon-btn:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.arh-report .panel-icon-btn .icon-collapse { display: none; }
.arh-report .panel-icon-btn.is-expanded .icon-expand { display: none; }
.arh-report .panel-icon-btn.is-expanded .icon-collapse { display: block; }

/* Base-layer properties restored from shared/style.css's old legacy block.
   The .li-app/.arh-report rules above were only ever PARTIAL overrides on
   top of that file's bare `.top-row`/`.panel`/`.card`/`table`/etc — they
   redeclared colors/radii but relied on it for layout structure (display,
   grid-template-columns, flex, padding, text truncation...). That base
   layer had no other consumer and was about to be deleted (T15), so its
   still-needed structural declarations are merged in here rather than lost. */

.arh-report .top-row {
  gap: 16px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.arh-report .panel h2 {
  letter-spacing: 1.5px;
}

.arh-report #envelope-diagram {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.arh-report #envelope-diagram svg {
  max-width: 100%;
  max-height: 100%;
}

.arh-report .envelope-3d-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Status chip over the 3D envelope ("Nalagam OPN pogoje…"); the dot
   pulses while the rules load. */
.arh-report .envelope-chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 5px 12px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 5px 14px rgba(var(--navy-rgb), 0.1);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}

.arh-report .envelope-chip.hidden { display: none; }

/* Setback (odmik) labels share the red family of their lines in the model. */
.arh-report .objekt-dim-bld.envelope-dim-setback { color: var(--red); }

/* +/- zoom for the 3D envelope — the map legend's card (translucent paper,
   thin line, soft shadow), top-right like the legend's corner on the map. */
.arh-report .envelope-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(var(--navy-rgb), 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.arh-report .envelope-zoom button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--navy);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.15s;
}

.arh-report .envelope-zoom button + button { border-top: 1px solid var(--line); }

.arh-report .envelope-zoom button:hover { background: rgba(var(--teal-rgb), 0.08); }

.arh-report .envelope-zoom svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.arh-report .envelope-chip-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.arh-report .envelope-chip.is-busy .envelope-chip-dot {
  background: var(--teal);
  animation: envelope-chip-pulse 1.1s ease-in-out infinite;
}

@keyframes envelope-chip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.arh-report .envelope-3d-wrap .objekt-preview {
  background:
    linear-gradient(90deg, rgba(var(--navy-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(rgba(var(--navy-rgb), 0.035) 1px, transparent 1px),
    var(--white);
  background-size: 28px 28px;
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  overflow: hidden;
  touch-action: none;
}

.arh-report .envelope-3d-wrap .objekt-preview canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  outline: none;
}

.arh-report .envelope-3d-wrap .objekt-preview canvas:active {
  cursor: grabbing;
}

.arh-report .envelope-3d-wrap .objekt-preview-labels {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.arh-report .envelope-3d-wrap .objekt-preview-empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
}

.arh-report .objekt-dim-label {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  user-select: none;
  transform: translate(-50%, -50%);
  line-height: 1.15;
  text-align: center;
  transition: opacity 0.12s linear;
}

.arh-report .objekt-dim-bld {
  color: var(--navy);
  border-color: var(--navy);
  border-radius: 999px;
  box-shadow: 0 5px 14px rgba(var(--navy-rgb), 0.1);
  padding: 1px 6px;
  font-size: 11px;
}

.arh-report .infra-legend {
  box-sizing: border-box;
  width: 158px;
  min-width: 0;
  padding: 8px 10px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(var(--navy-rgb), 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: inherit;
  display: flex;
  flex-direction: column;
}

.arh-report .muted {
  font-size: 13px;
}

.arh-report .infra-legend-row {
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 3.5px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, opacity 0.12s;
}

.arh-report .infra-legend-swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
  transition: opacity 0.12s, filter 0.12s;
}

.arh-report .infra-legend-label {
  white-space: nowrap;
}

.arh-report .infra-legend-row.off {
  opacity: 0.45;
}

.arh-report .infra-legend-row.off .infra-legend-swatch {
  filter: grayscale(1);
}

.arh-report .infra-legend-row.off .infra-legend-label {
  color: var(--muted);
  text-decoration: line-through;
}

.arh-report .card-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.arh-report .card-value {
  color: var(--navy);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.arh-report .card-sub {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arh-report .zone-list {
  list-style: none;
  padding: 0;
}

.arh-report .zone-list li {
  font-size: 14px;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.arh-report .zone-list li:last-child {
  border-bottom: none;
}

.arh-report .zone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.arh-report table {
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
}

.arh-report th {
  padding: 10px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 1px;
}

.arh-report td {
  padding: 10px;
  color: var(--text);
  border-bottom: 1px solid rgba(var(--navy-rgb), 0.06);
  vertical-align: top;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arh-report tr:last-child td {
  border-bottom: none;
}

.arh-report .rules-group {
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  padding-bottom: 20px;
}

.arh-report .rules-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.arh-report .rules-group h4 {
  color: var(--teal);
  border-left: 3px solid var(--teal);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
  padding-left: 10px;
}

/* Every list in a section body starts at the body's left edge, level with
   the group subtitles — no browser list indent. */
.arh-report .rules-kv,
.arh-report .rules-list,
.arh-report .zone-list,
.arh-report .warning-list {
  margin: 0;
  padding: 0;
}

/* Activities / interventions read as a sentence of words split by "·",
   not as tags. */
.arh-report .rules-list {
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.arh-report .rules-list li { display: inline; }

.arh-report .rules-list li + li::before {
  content: "·";
  margin: 0 8px;
  color: var(--muted);
}

.arh-report .rules-text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: var(--text);
}

.arh-report .rules-kv {
  list-style: none;
}

.arh-report .rules-kv li {
  font-size: 14px;
  padding: 7px 0;
  display: flex;
  gap: 12px;
}

.arh-report .rules-kv li:last-child {
  border-bottom: none;
}

.arh-report .rules-kv .kv-label {
  color: var(--muted);
  font-weight: 700;
  min-width: 170px;
  font-size: 13px;
  flex-shrink: 0;
}

.arh-report .loading-inline {
  font-size: 14px;
  padding: 8px 0;
}

@media (max-width: 980px) {
  .arh-report .cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .arh-report .top-row {
    grid-template-columns: 1fr;
  }

  .arh-report #map,
  .arh-report #envelope-diagram {
    height: 380px;
  }

  .arh-report .top-row.map-expanded #map {
    height: 460px;
  }
}

@media (max-width: 720px) {
  .arh-report .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .arh-report .cards-grid {
    grid-template-columns: 1fr;
  }

  .arh-report #map,
  .arh-report #envelope-diagram {
    height: 320px;
  }

  .arh-report .top-row.map-expanded #map {
    height: 380px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   §14  PRINT — PDF-export overrides (location_information renders this
   report server-side and prints it to PDF). .li-app rules here are page
   chrome (hero/loading/title-bar, hidden for print); .arh-report rules
   strip the on-screen box chrome from the report body.
   ═══════════════════════════════════════════════════════════════════ */

@media print {
  html,
  body,
  body.li-app {
    height: auto !important;
    min-height: 0 !important;
    background: var(--paper) !important;
  }

  #hero,
  #loading,
  .li-app .title-bar-actions,
  .arh-report .detail-header .arrow,
  .arh-report .card-icon,
  .arh-report .detail-icon,
  .arh-report .panel-icon-btn { display: none !important; }

  /* Title bar: strip navy, show as clean text header */
  .li-app .title-bar {
    background: none !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    padding: 6px 0 10px !important;
  }
  .li-app .title-brand-logo { display: none !important; }
  .li-app .title-brand-name,
  .li-app .title-brand-product,
  .li-app .title-brand-sep,
  .li-app .title-parcel { color: #1a1a1a !important; }

  .li-app main {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .li-app #results {
    padding-top: 0 !important;
  }

  /* PDF export: one full-width map row; the envelope panel is omitted. */
  .arh-report .top-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  /* Strip all box chrome — panels, cards, sections */
  .arh-report .panel,
  .arh-report .card,
  .arh-report .detail-section {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .arh-report .top-row > .panel {
    break-inside: avoid;
  }

  /* Panel h2 labels: thin rule instead of filled bar */
  .arh-report .panel h2 {
    background: none !important;
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    padding: 0 0 4px !important;
    color: #555 !important;
  }

  /* Detail section headers: simple rule */
  .arh-report .detail-header {
    background: none !important;
    border: none !important;
    border-bottom: 1.5px solid #333 !important;
    padding: 8px 0 5px !important;
  }
  .arh-report .detail-body {
    display: block !important;
    padding: 8px 0 12px !important;
  }
  .arh-report .details { gap: 0 !important; }

  /* Cards: strip borders, keep grid */
  .arh-report .cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin-bottom: 12px !important;
  }
  .arh-report .card {
    border-right: 1px solid #eee !important;
    border-bottom: 1px solid #eee !important;
    border-radius: 0 !important;
    padding: 8px !important;
    min-height: 0 !important;
    gap: 3px !important;
  }
  .arh-report .card-value { font-size: 20px !important; }
  .arh-report .card-sub {
    display: none !important;
  }

  .arh-report .pdf-image-panel {
    border: 1px solid #e3ddd2 !important;
    border-radius: 6px !important;
    min-height: 0 !important;
  }
  /* Karto izriše strežnik v tiskani ločljivosti in v okroglem merilu; izrez
     bi odrezal grafično merilo in legendo v vogalih, zato gre v celoti. */
  .arh-report .pdf-panel-image {
    width: 100% !important;
    height: auto !important;
  }

  .arh-report #map { height: 360px !important; }

  /* Tables: lighter styling */
  .arh-report table { font-size: 11px !important; }
  .arh-report th { background: none !important; border-bottom: 1px solid #bbb !important; }
  .arh-report td { border-bottom: 1px solid #eee !important; }

  @page {
    margin: 1.2cm 1.5cm;
    size: A4 portrait;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   §8  SEARCH (.search-app) — the AI legal-search chat page (iskanje.html)
   and its sources browser. Extracted from two inline <style> blocks;
   kept in original order (a base chat-UI layer, then a "landing skin"
   layer that restyles the same selectors for the marketing-style
   iskanje.html look — do not try to merge the two layers, the cascade
   depends on this order). auth-signin-btn here intentionally differs
   from the global §6 version (thinner border, transparent fill) — this
   IS the search top-bar's own treatment, not drift to fix.
   ═══════════════════════════════════════════════════════════════════ */

.search-app .top-actions { display: inline-flex; align-items: center; gap: 12px; }

/* Spodnja vrstica (.account-footer, §5) je vidna le na prazni strani —
   med pogovorom sta profil in zgodovina v vrstici na vrhu. */
.search-app .empty-footer { display: none; }

body.search-app.page-empty .empty-footer { display: inline-flex; }

.search-app .auth-signin-btn {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
      color: var(--navy); background: transparent;
      border: 1px solid var(--navy); border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap;
    }

.search-app .auth-signin-btn:hover { background: var(--line); }

body.search-app {
      font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
      /* page background comes from the base body rule (var(--white)) */
      color: var(--navy);
      font-size: 14px;
      -webkit-font-smoothing: antialiased;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

.search-app .top-brand:focus-visible { outline: 2px solid var(--teal); }

.search-app .top-logo {
      width: 22px;
      height: 22px;
    }

.search-app .top-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: -0.3px;
    }

.search-app #new-chat-btn {
      display: none;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: none;
      border: 1px solid var(--navy);
      border-radius: 999px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      color: var(--navy);
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
      margin: 16px 0 0;
      align-self: flex-start;
    }

.search-app #new-chat-btn:hover { background: var(--line); }

.search-app #new-chat-btn svg { flex-shrink: 0; }

body.search-app:not(.page-empty) #new-chat-btn { display: flex; }

/* Zgodovina — isti obris kot "nov pogovor", le tišji (zgodovina je pomožno
   dejanje). Na prazni strani, kjer je vrstica na vrhu skrita, visi isti
   spustni seznam na gumbu v spodnji vrstici ob profilu. */
.search-app .history-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: none;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }

.search-app .history-trigger:hover,
.search-app .history-trigger[aria-expanded="true"] {
      border-color: var(--navy);
      color: var(--navy);
    }

.search-app .history-trigger svg { flex-shrink: 0; width: 15px; height: 15px; }

.search-app #chat {
      flex: 1;
      overflow-y: auto;
      padding: 0 24px;
    }

.search-app #chat-inner {
      max-width: 880px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }

.search-app .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      padding: 80px 24px;
      gap: 12px;
    }

.search-app .empty-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: inherit;
      text-decoration: none;
      border-radius: 10px;
      outline-offset: 6px;
    }

.search-app .empty-brand:focus-visible { outline: 2px solid var(--teal); }

.search-app .empty-logo {
      width: 28px;
      height: 28px;
      opacity: 0.3;
    }

.search-app .empty-title {
      font-size: 20px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: -0.5px;
    }

.search-app .conversation .turn { padding-bottom: 0; }

.search-app .conversation .turn:first-child .turn-question { margin-top: 0; }

.search-app .turn-body > :first-child { border-top: none; }

.search-app .turn-tools {
      margin: 12px 16px;
      padding: 10px 14px;
      background: rgba(var(--teal-rgb), 0.04);
      border: 1px solid var(--line);
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

.search-app .tool-call {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 2px 0;
      font-size: 13px;
      color: var(--muted);
    }

.search-app .tool-call .tool-check {
      flex-shrink: 0;
      width: 16px;
      text-align: center;
      color: var(--muted);
      font-size: 12px;
    }

.search-app .tool-call.active .tool-check { display: none; }

.search-app .tool-spinner {
      flex-shrink: 0;
      width: 14px;
      height: 14px;
      border: 2px solid var(--line);
      border-top-color: var(--muted);
      border-radius: 50%;
      animation: tool-spin 0.8s linear infinite;
      display: none;
    }

.search-app .tool-call.active .tool-spinner { display: block; }

@keyframes tool-spin { 100% { transform: rotate(360deg); } }

.search-app .tool-call.thinking { color: var(--muted); font-style: italic; }

.search-app .tool-call .tool-summary { color: var(--muted); flex: 1; }

.search-app .turn-answer > :last-child { margin-bottom: 0; }

.search-app .turn-answer h1,
.search-app .turn-answer h2,
.search-app .turn-answer h3 { margin-top: 1em; margin-bottom: 0.4em; font-weight: 600; }

.search-app .turn-answer h1 { font-size: 20px; }

.search-app .turn-answer h2 { font-size: 17px; }

.search-app .turn-answer h3 { font-size: 15px; }

.search-app .turn-answer p { margin: 0.5em 0; }

.search-app .turn-answer ul,
.search-app .turn-answer ol { margin: 0.5em 0; padding-left: 22px; }

.search-app .turn-answer li { margin: 0.15em 0; }

.search-app .turn-answer strong { font-weight: 600; }

.search-app .turn-answer code {
      font-family: "JetBrains Mono", monospace;
      font-size: 12px;
      background: var(--line);
      padding: 1px 5px;
      border-radius: 2px;
    }

.search-app .turn-answer table { border-collapse: collapse; margin: 0.8em 0; font-size: 13px; width: 100%; }

.search-app .turn-answer th,
.search-app .turn-answer td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }

.search-app .turn-answer th { background: var(--line); font-weight: 600; }

.search-app .turn-answer blockquote {
      border-left: 3px solid var(--line);
      padding-left: 14px;
      color: var(--muted);
      margin: 0.5em 0;
    }

.search-app .cite-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 1px 8px;
      background: transparent;
      border: 1px solid var(--navy);
      border-radius: 2px;
      color: var(--navy);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.1s;
      vertical-align: baseline;
    }

.search-app .cite-chip:hover { background: var(--line); }

.search-app .cite-chip .cite-icon { font-size: 15px; font-weight: 400; opacity: 0.7; }

.search-app .cite-expanded {
      display: block;
      margin: 8px 0;
      padding: 12px 16px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 2px;
      position: relative;
      font-size: 13px;
      line-height: 1.55;
      color: var(--navy);
      white-space: pre-wrap;
      font-family: inherit;
    }

.search-app .cite-expanded .cite-expanded-header {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
    }

.search-app .cite-expanded .cite-expanded-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      color: var(--muted);
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

.search-app .cite-action-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: inherit;
      font-size: 11px;
      font-weight: 500;
      line-height: 1;
      color: var(--paper);
      background: var(--navy);
      height: 24px;
      border: none;
      border-radius: 2px;
      padding: 3px 10px;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      transition: opacity 0.15s;
    }

.search-app .cite-action-btn:hover { opacity: 0.8; }

.search-app .cite-expanded .cite-expanded-text { color: var(--navy); }

.search-app .cite-expanded .cite-loading { color: var(--muted); font-style: italic; }

.search-app .cursor::after {
      content: "◍";
      color: var(--navy);
      animation: blink 1s infinite;
      margin-left: 2px;
    }

@keyframes blink { 50% { opacity: 0; } }

.search-app .sources-header {
      padding: 16px 24px 8px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }

.search-app .source-item { border-top: 1px solid var(--line); }

.search-app .source-toggle {
      width: 100%;
      background: none;
      border: none;
      padding: 8px 24px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      color: var(--navy);
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background 0.1s;
    }

.search-app .source-toggle:hover { background: var(--line); }

.search-app .source-chevron {
      flex-shrink: 0;
      font-size: 18px;
      color: var(--navy);
      font-weight: 500;
      line-height: 1;
      width: 20px;
      text-align: center;
    }

.search-app .source-label { flex: 1; }

.search-app .source-content {
      display: none;
      padding: 0 24px 12px;
      font-size: 13px;
      line-height: 1.55;
      color: var(--navy);
      position: relative;
    }

.search-app .source-item.open .source-content { display: block; }

.search-app .source-article-text {
      padding: 12px 16px;
      background: var(--line);
      border: 1px solid var(--line);
      border-radius: 2px;
      white-space: pre-wrap;
      font-size: 13px;
      line-height: 1.55;
      max-height: 300px;
      overflow-y: auto;
    }

.search-app .source-loading { color: var(--muted); font-style: italic; padding: 8px 0; }

.search-app .turn-feedback {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 24px 12px;
      border-top: 1px solid var(--line);
    }

.search-app .fb-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      background: transparent;
      border: none;
      cursor: pointer;
      line-height: 1;
      transition: opacity 0.15s, transform 0.1s;
    }

.search-app .fb-btn svg { display: block; width: 18px; height: 18px; }

.search-app .fb-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--muted);
    }

.search-app .fb-btn.fb-up { color: var(--navy); }

.search-app .fb-btn.fb-down { color: var(--navy); }

.search-app .fb-btn:hover { opacity: 0.7; }

.search-app .fb-btn:active { transform: scale(0.9); }

.search-app .fb-btn.fb-sent { opacity: 0.3; cursor: default; }

.search-app .fb-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 120;
    }

.search-app .fb-modal {
      background: var(--paper);
      padding: 32px;
      width: 100%;
      max-width: 460px;
      position: relative;
      border-radius: 2px;
      box-shadow: 0 10px 32px rgba(var(--navy-rgb), 0.2);
    }

.search-app .fb-modal-close {
      position: absolute;
      top: 12px;
      right: 16px;
      background: none;
      border: none;
      font-size: 22px;
      cursor: pointer;
      color: var(--muted);
      line-height: 1;
    }

.search-app .fb-modal-close:hover { color: var(--navy); }

.search-app .fb-modal h2 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }

.search-app .fb-modal p { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 18px; }

.search-app .fb-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

.search-app .fb-reason {
      padding: 7px 14px;
      background: var(--paper);
      border: 1.5px solid var(--navy);
      border-radius: 2px;
      font-size: 13px;
      font-weight: 500;
      font-family: inherit;
      color: var(--navy);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

.search-app .fb-reason:hover,
.search-app .fb-reason.selected { background: var(--navy); color: var(--paper); }

.search-app .fb-comment {
      width: 100%;
      padding: 10px 12px;
      border: 1.5px solid var(--line);
      border-radius: 2px;
      font-size: 14px;
      font-family: inherit;
      color: var(--navy);
      background: var(--paper);
      outline: none;
      resize: vertical;
      min-height: 72px;
      margin-bottom: 16px;
    }

.search-app .fb-comment:focus { border-color: var(--navy); }

.search-app .fb-submit-btn {
      width: 100%;
      height: 40px;
      background: var(--navy);
      color: var(--paper);
      border: none;
      border-radius: 2px;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
    }

.search-app .fb-submit-btn:hover { background: var(--navy); }

.search-app #input-bar {
      flex-shrink: 0;
      padding: 0 24px 20px;
      background: transparent;
    }

.search-app #input-wrap {
      max-width: 880px;
      margin: 0 auto;
      position: relative;
    }

.search-app .corner {
      position: absolute;
      width: 10px;
      height: 10px;
      border-color: var(--navy);
      border-style: solid;
    }

.search-app .corner-tl { top: -6px; left: -6px; border-width: 1.5px 0 0 1.5px; }

.search-app .corner-tr { top: -6px; right: -6px; border-width: 1.5px 1.5px 0 0; }

.search-app .corner-bl { bottom: -6px; left: -6px; border-width: 0 0 1.5px 1.5px; }

.search-app .corner-br { bottom: -6px; right: -6px; border-width: 0 1.5px 1.5px 0; }

.search-app #input-inner {
      position: relative;
      background: var(--paper);
      border: 1px solid var(--navy);
      border-radius: 2px;
      padding: 8px;
      display: flex;
      align-items: flex-end;
      gap: 8px;
    }

.search-app #question {
      flex: 1;
      padding: 8px 10px;
      border: none;
      font-family: inherit;
      font-size: 14px;
      color: var(--navy);
      outline: none;
      /* Fokus se izriše na ovoju (#input-inner:focus-within), zato tu
         izklopimo globalni obroč iz osnovnih obrazcev. */
      box-shadow: none;
      resize: none;
      min-height: 40px;
      max-height: 45vh;
      line-height: 1.5;
      background: transparent;
    }

.search-app #submit-btn {
      background: var(--navy);
      color: var(--paper);
      width: 38px;
      height: 38px;
      border: none;
      border-radius: 2px;
      cursor: pointer;
      transition: opacity 0.15s;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

.search-app #submit-btn:hover:not(:disabled) { opacity: 0.85; }

.search-app #submit-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.search-app .context-hint {
      font-size: 12px;
      color: var(--muted);
      text-align: center;
      padding: 6px 0 0;
    }

.search-app .context-hint a {
      color: var(--navy);
      text-decoration: underline;
      cursor: pointer;
    }

.search-app .doc-link {
      display: inline-block;
      margin-top: 8px;
      font-size: 12px;
      color: var(--muted);
      text-decoration: none;
      cursor: pointer;
      transition: color 0.15s;
    }

.search-app .doc-link:hover { color: var(--navy); }

body.search-app.page-empty { justify-content: center; }

body.search-app.page-empty #top-bar { display: none; }

body.search-app.page-empty #chat { flex: none; overflow: visible; }

body.search-app.page-empty .empty-state { padding: 24px 24px 16px; }

.search-app .hidden { display: none !important; }

@media (max-width: 768px) {
  .search-app .fb-modal { margin: 16px; padding: 24px; }
}

@media (max-width: 600px) {
  .search-app #top-bar { padding: 10px 12px; }
  .search-app #new-chat-btn { padding: 5px 10px; font-size: 12px; }
  .search-app #chat { padding: 0 12px; }
  .search-app .empty-state { padding: 40px 16px; }
  .search-app .empty-title { font-size: 18px; }
  .search-app .turn-question { padding: 12px 16px; font-size: 14px; }
  .search-app .turn-answer { padding: 12px 16px 24px; }
  .search-app .turn-answer table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .search-app .turn-tools { margin: 8px 12px; padding: 8px 12px; }
  .search-app .turn-sources .sources-header { padding: 12px 16px 6px; }
  .search-app .source-toggle { padding: 8px 16px; }
  .search-app .source-content { padding: 0 16px 12px; }
  .search-app .turn-feedback { padding: 12px 16px 10px; }
  .search-app .turn-error { margin: 8px 12px; padding: 10px 16px; }
  .search-app .cite-expanded { padding: 10px 12px; }
  
  .search-app #input-bar { padding: 0 12px 12px; }
  .search-app #input-inner { padding: 6px; gap: 6px; }
  .search-app #question { font-size: 16px; -webkit-appearance: none; appearance: none; }
  .search-app .corner-tl,
.search-app .corner-tr,
.search-app .corner-bl,
.search-app .corner-br { display: none; }
  
  body.search-app.page-empty .empty-state { padding: 24px 16px 12px; }
}

/* Landing skin */

body.search-app {
      /* Palette (navy/navy-2/text/muted/line/teal/sand) comes from the
         :root block in §1 of this file. Only layout vars stay local. */
      --content-width: 880px;
      --content-gutter: 40px;
    }

.search-app .top-inner,
.search-app #chat-inner,
.search-app #input-wrap {
      width: min(var(--content-width), calc(100vw - (var(--content-gutter) * 2)));
      max-width: none;
      margin-left: auto;
      margin-right: auto;
    }

body.search-app {
      font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
      /* page background comes from the base body rule (var(--white)) */
      color: var(--text);
    }

.search-app #top-bar {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 24px;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      z-index: 10;
      justify-content: center;
      padding: 14px 0;
      background: rgba(255,255,255,0.82);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(24px) saturate(1.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.6);
    
}

.search-app .top-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

.search-app .top-brand {
      display: flex;
      align-items: center;
      gap: 8px;
      color: inherit;
      text-decoration: none;
      border-radius: 10px;
      outline-offset: 6px;
 gap: 10px; 
}

.search-app .top-logo,
.search-app .empty-logo {
      width: 28px;
      height: 28px;
      opacity: 1;
    }

.search-app .top-logo rect,
.search-app .empty-logo rect { fill: var(--navy); }

.search-app .top-title,
.search-app .empty-title {
      color: var(--navy);
      font-weight: 700;
    }

.search-app .empty-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 22px;
      letter-spacing: -0.5px;
    }

.search-app .empty-divider {
      color: var(--muted);
      font-weight: 500;
      letter-spacing: 0;
    }

.search-app #new-chat-btn,
.search-app .cite-action-btn,
.search-app .fb-submit-btn {
      background: var(--navy);
      color: var(--white);
      border-color: var(--navy);
      border-radius: 999px;
    }

.search-app #new-chat-btn,
.search-app .auth-signin-btn {
      margin: 0;
      align-self: center;
      padding: 7px 16px;
      background: transparent;
      color: var(--navy);
      border: 1.5px solid var(--navy);
    }

.search-app #new-chat-btn:hover,
.search-app .auth-signin-btn:hover {
      background: var(--navy);
      color: var(--white);
    }

.search-app #chat {
      padding-left: 0;
      padding-right: 0;
      scroll-padding-bottom: 140px;
      scrollbar-gutter: stable both-edges;
    }

body.search-app:not(.page-empty) #chat {
      padding-bottom: 140px;
    }

body.search-app:not(.page-empty) #input-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 30;
      padding: 0 0 24px;
      pointer-events: none;
    }

body.search-app.page-empty #input-bar { width: 100%; }

.search-app #input-wrap {
      pointer-events: auto;
    }

.search-app .corner { display: none; }

.search-app #input-inner {
      background: rgba(255,255,255,0.72);
      backdrop-filter: blur(28px) saturate(1.8);
      -webkit-backdrop-filter: blur(28px) saturate(1.8);
      border: 1px solid rgba(255,255,255,0.95);
      /* Fixed radius (≈ half the single-line height) keeps the pill look on
         one line but stops the corner arcs from ballooning and clipping text
         once the textarea grows to multiple lines. */
      border-radius: 33px;
      padding: 12px 12px 12px 24px;
      gap: 12px;
      box-shadow:
        0 8px 32px rgba(var(--navy-rgb),0.10),
        inset 0 1.5px 0 rgba(255,255,255,0.95),
        inset 0 -1px 0 rgba(196,168,130,0.15);
    }

.search-app #input-inner:focus-within {
      border-color: rgba(26,110,122,0.35);
      box-shadow:
        0 8px 40px rgba(26,110,122,0.12),
        inset 0 1.5px 0 rgba(255,255,255,0.95);
    }

.search-app #question {
      padding: 8px 0;
      color: var(--navy);
      font-size: 15px;
    }

.search-app #question::placeholder { color: var(--muted); }

.search-app #submit-btn {
      width: 42px;
      height: 42px;
      color: var(--navy);
      background: transparent;
      border: 1.5px solid var(--navy);
      border-radius: 50%;
    }

.search-app #submit-btn svg path { fill: currentColor; }

.search-app #submit-btn:hover:not(:disabled) {
      opacity: 1;
      background: var(--navy);
      color: var(--white);
    }

.search-app #submit-btn:disabled {
      background: transparent;
      color: var(--muted);
      border-color: rgba(107,122,141,0.35);
    }

.search-app .conversation {
      padding-top: 16px;
      padding-bottom: 8px;
      padding-top: 22px;
      padding-bottom: 18px;
      gap: 24px;
    
}

.search-app .conversation .turn + .turn {
 padding-top: 2px;
      margin-top: 22px;
      padding-top: 0;
    
}

.search-app .turn {
      padding-bottom: 24px;
      position: relative;
      overflow: hidden;
      padding-bottom: 0;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.92), rgba(249,247,244,0.74)),
        rgba(255,255,255,0.9);
      border: 1px solid rgba(255,255,255,0.92);
      border-radius: 24px;
      box-shadow:
        0 18px 46px rgba(var(--navy-rgb),0.09),
        inset 0 1px 0 rgba(255,255,255,0.95);
    
}

.search-app .turn-question {
      background: var(--navy);
      padding: 14px 24px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--paper);
      font-weight: 500;
      white-space: pre-wrap;
      border-radius: 2px;
      margin: 16px 0 0;
      position: relative;
      max-width: none;
      margin: 0;
      padding: 20px 30px 18px;
      background: rgba(255,255,255,0.26);
      color: var(--navy);
      border: 0;
      border-bottom: 1px solid rgba(var(--navy-rgb),0.08);
      border-radius: 0;
      box-shadow: none;
      font-size: 15.5px;
      font-weight: 700;
      line-height: 1.55;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    
}

.search-app .turn-question::before {
      content: "Vprašanje";
      position: static;
      display: block;
      margin-bottom: 7px;
      color: var(--teal);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      line-height: 1;
      text-transform: uppercase;
    }

.search-app .turn-body {
      background: var(--paper);
      border: 1px solid var(--muted);
      border-radius: 2px;
      overflow: hidden;
      position: relative;
      overflow: visible;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      padding-bottom: 16px;
    
}

.search-app .turn-answer,
.search-app .turn-sources,
.search-app .turn-feedback,
.search-app .source-item { border-color: var(--line); }

.search-app .turn-answer strong,
.search-app .source-toggle,
.search-app .fb-modal h2 { color: var(--navy); }

.search-app .turn-answer,
.search-app .cite-expanded .cite-expanded-text,
.search-app .source-content,
.search-app .source-article-text { color: var(--text); }

.search-app .turn-answer {
      padding: 14px 24px 32px;
      line-height: 1.65;
      border-top: 1px solid var(--line);
      padding: 24px 30px 30px;
      border-top: 0;
      font-size: 15px;
      line-height: 1.7;
    
}

.search-app .turn-answer h1,
.search-app .turn-answer h2,
.search-app .turn-answer h3 {
      color: var(--navy);
      letter-spacing: 0;
    }

.search-app .turn-answer table {
      border-radius: 12px;
      overflow: hidden;
      border-style: hidden;
      box-shadow: 0 0 0 1px var(--line);
    }

.search-app .turn-answer th {
      background: rgba(249,247,244,0.9);
      color: var(--navy);
    }

.search-app .turn-answer blockquote {
      border-left-color: rgba(26,110,122,0.36);
      color: var(--muted);
      background: rgba(249,247,244,0.55);
      border-radius: 0 12px 12px 0;
      padding: 10px 14px;
    }

.search-app .turn-tools,
.search-app .source-article-text,
.search-app .cite-expanded {
      background: rgba(249,247,244,0.78);
      border-color: var(--line);
      border-radius: 12px;
    }

.search-app .turn-tools {
      margin: 18px 22px 0;
      padding: 12px 14px;
      background: rgba(249,247,244,0.68);
      border-color: rgba(var(--navy-rgb),0.08);
    }

.search-app .turn-tools.thinking-tools {
      margin: 22px 30px 8px;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
    }

.search-app .thinking-tools .tool-call {
      padding: 0;
      color: var(--muted);
      font-size: 14px;
    }

.search-app .tool-call.active {
 color: var(--navy);
 color: var(--navy); 
}

.search-app .thinking-tools .tool-call.active { color: var(--muted); }

.search-app .tool-spinner { border-top-color: var(--teal); }

.search-app .turn-sources {
      border-top: 1px solid var(--line);
      overflow: hidden;
      border-top: 1px solid rgba(var(--navy-rgb),0.08);
      background: rgba(255,255,255,0.28);
    
}

.search-app .sources-header {
      padding: 18px 30px 8px;
      color: var(--muted);
      font-size: 13px;
      letter-spacing: 0;
      text-transform: none;
    }

.search-app .sources-header .count {
      background: var(--line);
      color: var(--muted);
      padding: 1px 6px;
      border-radius: 2px;
      font-size: 10px;
      background: rgba(26,110,122,0.10);
      color: var(--teal);
      border-radius: 999px;
      padding: 2px 7px;
    
}

.search-app .source-toggle { padding: 10px 30px; color: var(--navy); }

.search-app .source-chevron { color: var(--teal); }

.search-app .source-content { padding: 0 30px 18px 58px; }

.search-app .turn-feedback {
      padding: 18px 30px 20px;
      border-top: 1px solid rgba(var(--navy-rgb),0.08);
    }

.search-app .turn-error {
      padding: 12px 24px;
      background: rgba(var(--red-rgb), 0.08);
      color: var(--red);
      font-size: 13px;
      border-radius: 2px;
      margin: 8px 24px;
      margin: 18px 22px 22px;
      padding: 13px 16px;
      background: rgba(185,28,28,0.08);
      color: var(--red);
      border: 1px solid rgba(185,28,28,0.16);
      border-radius: 14px;
      line-height: 1.5;
    
}

.search-app .cite-chip,
.search-app .fb-reason {
      border-color: var(--teal);
      color: var(--teal);
      border-radius: 999px;
    }

.search-app .cite-chip:hover,
.search-app .source-toggle:hover,
.search-app .fb-reason:hover,
.search-app .fb-reason.selected { background: rgba(26,110,122,0.08); color: var(--teal); }

.search-app .fb-modal {
      border-radius: 18px;
      box-shadow: 0 18px 48px rgba(var(--navy-rgb),0.18);
    }

.search-app .fb-comment {
      border-color: var(--line);
      border-radius: 14px;
    }

.search-app .fb-comment:focus { border-color: var(--teal); }

.search-app .context-hint { color: var(--muted); }

.search-app .context-hint a { color: var(--teal); }

@media (max-width: 600px) {
  body.search-app { --content-gutter: 16px; }
  body.search-app:not(.page-empty) #chat { padding-bottom: 120px; }
  .search-app #top-bar { padding-left: 0; padding-right: 0; }
  .search-app #chat { padding-left: 0; padding-right: 0; }
  body.search-app:not(.page-empty) #input-bar { padding: 0 0 12px; }
  .search-app #input-inner {
        border-radius: 22px;
        padding: 8px 8px 8px 14px;
      }
  .search-app #question::placeholder {
 color: transparent;
 color: transparent; 
}
  .search-app #submit-btn { width: 40px; height: 40px; }
  .search-app .turn-question {
        max-width: none;
        padding: 16px 20px 14px;
        border-radius: 0;
      }
  .search-app .turn-question::before { margin-bottom: 6px; }
  .search-app .turn { border-radius: 18px; }
  .search-app .turn-body {
        border-radius: 0;
        padding-bottom: 14px;
      }
  .search-app .turn-tools.thinking-tools { margin: 18px 20px 6px; }
  .search-app .turn-answer,
.search-app .sources-header,
.search-app .source-toggle,
.search-app .turn-feedback { padding-left: 20px; padding-right: 20px; }
  .search-app .source-content { padding-left: 42px; padding-right: 20px; }
}

/* Query context preview chips (merged from iskanje-context.css) */

.search-app .query-context-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 9px auto 0;
      padding: 0 18px;
      max-width: 840px;
      color: var(--navy);
    }

.search-app .query-context-chip,
.search-app .query-context-warning {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      gap: 7px;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(var(--teal-rgb), 0.22);
      background: rgba(255, 255, 255, 0.72);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.35;
      box-shadow: 0 4px 18px rgba(var(--navy-rgb), 0.08);
    }

.search-app .query-context-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: var(--teal);
      color: var(--paper);
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
    }

.search-app .query-context-chip--parcel {
      border-color: rgba(var(--orange-rgb), 0.24);
    }

.search-app .query-context-chip--parcel .query-context-icon {
      background: var(--orange);
    }

.search-app .query-context-warning {
      border-color: rgba(var(--orange-rgb), 0.28);
      background: rgba(255, 248, 235, 0.88);
      color: var(--orange);
    }

.search-app .query-context-warning .query-context-icon {
      background: var(--orange);
    }

@media (max-width: 600px) {
  .search-app .query-context-preview {
        padding: 0 8px;
      }
}

/* ═══════════════════════════════════════════════════════════════════
   §11  PROJECT CONDITIONS (.pp-app) — the Projektni Pogoji dashboard,
   review view (map/params/DGD data), and settings view. Two layers in
   original cascade order (inline dashboard/review/settings rules, then
   the .pp-app overrides that were already in projektni-pogoji/style.css
   and win on conflicts via specificity) — kept as two layers rather than
   hand-merged to avoid silently changing the computed result.
   `.btn-primary`/`.btn-secondary` here intentionally differ from the
   global §4 button (outline-by-default, fills on hover) — this is the
   dashboard's own established look, not drift to fix. Spustni seznami so
   platformni `.ui-select` (shared/ui-select.js) — lokalni `.cdd-*` je
   odstranjen 2026-07-29.
   ═══════════════════════════════════════════════════════════════════ */

/* Širina in odmiki pogledov so enotni — glej blok ob --content-max spodaj. */
.pp-app .dashboard { margin: 0 auto; }

.pp-app .dash-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }

.pp-app .dash-header h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin: 0; }

.pp-app .dash-actions { display: flex; align-items: center; gap: 8px; }

/* Stats */

.pp-app .dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }

.pp-app .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px; }

.pp-app .stat-icon { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.pp-app .stat-icon svg { width: 20px; height: 20px; }

.pp-app .stat-icon-blue { background: rgba(var(--teal-rgb), 0.12); color: var(--teal); }

.pp-app .stat-icon-green { background: rgba(var(--vivid-rgb), 0.14); color: var(--vivid); }

.pp-app .stat-icon-purple { background: #f3e8ff; color: #7c3aed; }

.pp-app .stat-icon-amber { background: rgba(var(--orange-rgb), 0.14); color: var(--orange); }

.pp-app .stat-body { display: flex; flex-direction: column; }

.pp-app .stat-value { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.1; }

.pp-app .stat-label { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; letter-spacing: 0.2px; }

/* Karta nadzorne plošče — izdani pogoji kot pike na težiščih parcel. */

.pp-app .dash-map-wrap { background: var(--surface); border: 1px solid var(--line); margin-bottom: 24px; overflow: hidden; }

.pp-app #dash-map { height: 300px; }

/* Razbarvana podlaga: OSM ploščice v sivini, da barvo nosijo samo pike. */
.pp-app #dash-map .dash-tiles { filter: grayscale(1) contrast(0.85) brightness(1.12); }

.pp-app #dash-map .leaflet-interactive { cursor: pointer; }

/* Pika projekta med ekstrakcijo: opis ob prehodu ostane, klika ni. */
.pp-app #dash-map .leaflet-interactive.dash-dot-busy { cursor: default; }

/* Search + toolbar — follows lander/design-guidelines form patterns */

.pp-app .dash-toolbar {
            display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
        }

.pp-app .dash-search { flex: 1; position: relative; }

.pp-app .dash-search input {
            width: 100%; height: 44px; padding: 0 12px 0 40px; border: 1px solid var(--line);
            font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text);
            transition: border-color 0.15s, box-shadow 0.15s;
        }

.pp-app .dash-search input:focus { outline: none; border-color: rgba(var(--vivid-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--vivid-rgb), 0.13); }

.pp-app .dash-search input::placeholder { color: var(--muted); opacity: 0.75; }

.pp-app .dash-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }

.pp-app .dash-search-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }

.pp-app .dash-sort { display: flex; align-items: center; }

.pp-app .select-shell { position: relative; display: block; }

.pp-app .select-shell::after {
            content: ""; position: absolute; top: 50%; right: 14px; width: 8px; height: 8px;
            border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
            transform: translateY(-65%) rotate(45deg); pointer-events: none;
        }

.pp-app .dash-sort select {
            -webkit-appearance: none; -moz-appearance: none; appearance: none;
            width: 100%; height: 44px; padding: 0 38px 0 12px; border: 1px solid var(--line);
            font-size: 13px; font-weight: 600; font-family: inherit; background: var(--surface); color: var(--text);
            cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
        }

.pp-app .dash-sort select:focus { outline: none; border-color: rgba(var(--vivid-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--vivid-rgb), 0.13); }

/* Toggle je kontrola polja: enaka višina (44px) in polmer kot iskalnik ob njem;
   gumba se raztegneta čez notranjo višino okvirja. */
.pp-app .dash-filter { display: inline-flex; align-items: stretch; flex-shrink: 0; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-input); background: var(--surface); padding: 3px; }

.pp-app .dash-filter button { display: inline-flex; align-items: center; border: 0; border-radius: calc(var(--radius-input) - 2px); background: transparent; color: var(--muted); padding: 0 15px; font-size: 12px; font-weight: 800; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; }

.pp-app .dash-filter button.is-active { background: var(--ink); color: var(--surface); }

.pp-app .btn-primary { padding: 10px 20px; background: var(--teal); color: var(--surface); border: none; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; letter-spacing: 0.3px; }

.pp-app .btn-primary:hover { background: var(--navy-2); }

.pp-app .btn-secondary { padding: 6px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--line); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }

.pp-app .btn-secondary:hover { background: rgba(var(--teal-rgb), 0.06); }

.pp-app .btn-sm { padding: 5px 10px; font-size: 11px; }

.pp-app .btn-delete:hover { color: var(--red); border-color: var(--red); background: #fef2f2; }

/* Table */

.pp-app .pp-table { width: 100%; border-collapse: collapse; background: var(--surface); }

.pp-app .pp-table th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }

.pp-app .pp-table td { padding: 14px 14px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }

.pp-app .pp-table tr:hover td { background: rgba(var(--navy-rgb), 0.03); }

.pp-app .pp-table tr.row-clickable { cursor: pointer; }

/* Vrstica med ekstrakcijo: brez kazalca in brez osvetlitve ob prehodu, da ne
   obljublja klika, ki ga ni. Vsebina ostane berljiva (status + vrtavka). */
.pp-app .pp-table tr.row-busy { cursor: default; }

.pp-app .pp-table tr.row-busy:hover td { background: none; }

.pp-app .pp-table td.td-date { color: var(--muted); white-space: nowrap; }

.pp-app .pp-table .empty-row td { text-align: center; color: var(--muted); padding: 48px 14px; }

.pp-app .pp-table .td-actions { white-space: nowrap; text-align: right; }

.pp-app .td-actions > * { vertical-align: middle; }

.pp-app .td-actions > * + * { margin-left: 4px; }

/* ── Številčenje dokumentov ────────────────────────────────────────
   Serijska številka v glavi pregleda in njena shema v nastavitvah:
   vsak del številke je svoj žeton s pomenom pod njim. */

.pp-app .pp-stevilka { display: inline-flex; align-items: center; margin-left: 12px; padding: 4px 10px;
    border-radius: 999px; background: rgba(var(--teal-rgb), 0.12); color: var(--teal);
    font-size: 12px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; }

.pp-app .pp-stevilka--nn { background: rgba(var(--navy-rgb), 0.06); color: var(--muted); font-weight: 600; }

.pp-app .pp-shema { padding: 4px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }

.pp-app .pp-shema-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; }

.pp-app .pp-shema-part { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.pp-app .pp-shema-val { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); font-size: 15px; font-weight: 700; color: var(--navy); }

.pp-app .pp-shema-part--hot .pp-shema-val { border-color: rgba(var(--teal-rgb), 0.35);
    background: rgba(var(--teal-rgb), 0.10); color: var(--teal); }

.pp-app .pp-shema-cap { font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--muted); }

.pp-app .pp-shema-sep { align-self: center; margin-top: -14px; font-size: 15px; color: var(--muted); }

.pp-app .pp-shema-note { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--muted); max-width: 70ch; }

.pp-app .pp-shema-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* Vrstica števca: vnos + enota + gumb ostanejo v eni vrsti, opomba pade pod njih —
   brez tega se v ožjem stolpcu gumb stisne in napis teče navpično. */
.pp-app .pp-stevec-row { flex-wrap: wrap; }

.pp-app .pp-stevec-row .settings-cn-meta { flex: 1 1 100%; }

.pp-app .pp-stevec-val { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    flex: 1 1 auto; min-width: 0; }

.pp-app .pp-stevec-val .btn-sm { flex-shrink: 0; white-space: nowrap; }

.pp-app .pp-stevec-input { width: 90px; flex-shrink: 0; padding: 5px 8px; border: 1px solid var(--line);
    border-radius: 6px; background: var(--surface); font-size: 13px; font-weight: 700; color: var(--navy); }

.pp-app .pp-stevec-next { font-size: 12px; color: var(--teal); font-weight: 700; white-space: nowrap; }

/* ── Projektna mapa (drive.js) ─────────────────────────────────────
   Tabela mape je .pp-table s štirimi dodatki: ime datoteke, izvorno ime,
   zamaknjena vrstica starejše različice in ikona mape v seznamu map. */

.pp-app .drive-table tbody tr:hover td { background: none; }

.pp-app .drive-name { font-weight: 700; }

.pp-app .drive-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.pp-app .drive-history-row td { background: rgba(var(--navy-rgb), 0.02); }

.pp-app .drive-history-row .drive-name { font-weight: 500; color: var(--muted); padding-left: 18px; }

.pp-app .drive-folder { display: flex; align-items: center; gap: 10px; font-weight: 700; }

.pp-app .drive-folder-icon { display: inline-flex; color: var(--teal); }

.pp-app .drive-folder-icon svg { width: 18px; height: 18px; display: block; }

.pp-app .drive-note { color: var(--muted); font-size: 13px; padding: 24px 0; }

.pp-app .panel-desc { font-size: 13.5px; color: var(--muted); margin: -8px 0 22px; line-height: 1.55; }

.pp-app .badge--blue { background: rgba(var(--teal-rgb), 0.14); border-color: rgba(var(--teal-rgb), 0.22); color: var(--teal); }

.pp-app .badge--green { background: rgba(var(--vivid-rgb), 0.16); border-color: rgba(var(--vivid-rgb), 0.24); color: var(--vivid); }

.pp-app .badge--muted { background: rgba(var(--navy-rgb), 0.06); border-color: rgba(var(--navy-rgb), 0.1); color: var(--muted); }

.pp-app .status-cell { display: flex; align-items: center; gap: 6px; }

.pp-app .status-text { font-size: 12px; color: var(--text); font-weight: 500; }

.pp-app .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.pp-app .status-extracting { background: #3b82f6; }

/* Potrditev parcele je še vedno faza ekstrakcije — samo čaka na uporabnika,
   zato deli modro z .status-extracting (glej DASH_DOT_COLORS v index.html:
   pika na karti in pika v tabeli sta ista informacija). */

.pp-app .status-confirm { background: #3b82f6; }

.pp-app .status-generating { background: #f59e0b; }

.pp-app .status-review { background: #10b981; }

.pp-app .status-sending { background: #8b5cf6; }

.pp-app .status-error { background: #ef4444; }

/* Odprta pripomba prevzame statusno mesto vrstice: dokler ni odpravljena,
   projekt ne gre naprej (podpis je zadržan), zato je to njegovo stanje.
   Jantarna, da se loči od zelenega pregleda in rdeče napake. */

.pp-app .status-pripombe { background: #f97316; }

/* Zaklenjen projekt: ključavnica ob statusu, brez svoje barve — zaklep ni
   stanje poteka, ampak dejstvo, da je pot končana. */

.pp-app .status-lock { display: inline-flex; color: var(--muted); }

.pp-app .status-lock svg { width: 12px; height: 12px; }

/* Modal */

.pp-app .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; }

.pp-app .modal-overlay.hidden { display: none; }

.pp-app .modal { background: var(--surface); width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; padding: 32px; position: relative; }

.pp-app .modal h2 { font-size: 16px; font-weight: 800; margin-bottom: 20px; }

.pp-app .modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--muted); line-height: 1; }

.pp-app .modal-close:hover { color: var(--text); }

.pp-app .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }

.pp-app .form-group { display: flex; flex-direction: column; gap: 4px; }

.pp-app .form-group.full { grid-column: 1 / -1; }

/* Obvezna e-pošta stoji nad obema načinoma vnosa. */
.pp-app .modal-email { margin-bottom: 16px; }

.pp-app .form-group label .req { color: var(--red); }

.pp-app .form-group label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); }

.pp-app .form-group input,
.pp-app .form-group select { padding: 8px 10px; border: 1px solid var(--line); font-size: 13px; font-family: inherit; background: var(--surface); }

.pp-app .form-group input:focus { outline: none; border-color: var(--teal); background: rgba(var(--teal-rgb), 0.06); }

/* Nadgrajeni spustni seznam v obrazcu (CC-SI, vrsta gradnje) je enako
   nizek kot vnosna polja ob njem. */
.pp-app .form-group .ui-select-trigger { height: auto; padding: 8px 10px; border-width: 1px; }

.pp-app .form-section { margin-top: 20px; margin-bottom: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--line); }

.pp-app .file-area { border: 2px dashed var(--line); padding: 24px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; margin-bottom: 16px; }

.pp-app .file-area:hover,
.pp-app .file-area.drag-over { border-color: var(--teal); background: rgba(var(--teal-rgb), 0.06); }

.pp-app .file-area-text { font-size: 13px; color: var(--muted); }

.pp-app .file-area-text b { color: var(--text); }

.pp-app .file-area-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }

.pp-app #manual-toggle { cursor: pointer; }

.pp-app .file-list { margin-top: 8px; }

.pp-app .file-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: rgba(var(--teal-rgb), 0.06); margin-bottom: 4px; font-size: 12px; }

.pp-app .file-item button { background: none; border: none; color: var(--red); cursor: pointer; font-weight: 700; font-size: 14px; }

/* ── Review view ── */

.pp-app .review-view { margin: 0 auto; }

.pp-app .review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

/* Naslov pogleda je povsod ista komponenta (.dash-title): ikona v temni
   ploskvici + naslov — enako kot naslovi sekcij pod njim, le večje. */

.pp-app .review-header h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin: 0; }

.pp-app .review-actions { display: flex; gap: 8px; }

/* Karta koraka Odločitve: levo karta, desno ozek stolpec z izbranimi
   priključki in podatki objekta, kliknjenega na karti. Legenda v kotu karte
   pove barve, opis ob prehodu z miško pa podrobnosti objekta. */

.pp-app .review-map-wrap { background: var(--surface); border: 1px solid var(--line); margin-bottom: 16px; }

.pp-app .review-map-wrap.has-side { display: grid; grid-template-columns: 2fr minmax(260px, 1fr); }

.pp-app #review-map { height: 418px; }

/* Karta in gumb "v ločeno okno" sta ena celica mreže — gumb je zasidran na
   karto, ne na ploskev, da ob stolpcu ne pristane nad njim. */
.pp-app .map-pane { position: relative; min-width: 0; }

.pp-app .map-coordinates { position: absolute; left: 10px; bottom: 10px; z-index: 500;
    padding: 5px 8px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 3px;
    background: rgba(255, 255, 255, 0.92); color: var(--text); font: 600 11px/1.2 monospace;
    pointer-events: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16); }

/* Legenda karte (review_map.js): zložljiva ploskev v spodnjem desnem kotu,
   ki našteje samo sloje, ki so ta hip na karti; visoka največ do traku
   orodij nad njo, daljši seznam se drsi. Znak je narisan v CSS iz ene
   barve (--swatch), da legenda in karta ne moreta zaiti vsaka svojo pot. */
.pp-app .map-legend { position: absolute; right: 10px; bottom: 10px; z-index: 500;
    display: flex; flex-direction: column; max-width: 220px; max-height: calc(100% - 100px);
    background: var(--paper); color: var(--text); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: 0 2px 8px rgba(var(--navy-rgb), 0.14);
    font-size: 11.5px; line-height: 1.3; }

.pp-app .map-legend.hidden { display: none; }

.pp-app .map-legend-head { display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 0; padding: 6px 10px; border: 0; border-radius: 11px;
    background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }

.pp-app .map-legend-head:hover { background: var(--app-bg); }

.pp-app .map-legend-head svg { flex: 0 0 14px; width: 14px; height: 14px; transition: transform 120ms; }

.pp-app .map-legend.is-collapsed .map-legend-head svg { transform: rotate(180deg); }

.pp-app .map-legend-list { margin: 0; padding: 0 10px 7px; list-style: none; overflow-y: auto; }

.pp-app .map-legend.is-collapsed .map-legend-list { display: none; }

.pp-app .map-legend-row { display: flex; align-items: center; gap: 7px; padding: 1px 0; }

.pp-app .map-legend-swatch { position: relative; flex: 0 0 18px; height: 12px; }

.pp-app .map-legend-swatch::before { content: ''; position: absolute; box-sizing: border-box; }

.pp-app .map-legend-line::before,
.pp-app .map-legend-dashed::before { left: 0; right: 0; top: 4.5px; height: 3px;
    border-radius: 2px; background: var(--swatch); }

.pp-app .map-legend-dashed::before {
    background: repeating-linear-gradient(90deg, var(--swatch) 0 5px, transparent 5px 8px); }

.pp-app .map-legend-dot::before,
.pp-app .map-legend-ring::before { left: 3px; top: 0; width: 12px; height: 12px; border-radius: 50%; }

.pp-app .map-legend-dot::before { background: var(--swatch); border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }

.pp-app .map-legend-ring::before { background: #fff; border: 3px solid var(--swatch); }

/* Žebljiček stavbe: kapljica, obrnjena s konico navzdol. */
.pp-app .map-legend-pin::before { left: 5px; top: 0; width: 9px; height: 9px;
    border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--swatch); }

.pp-app .map-legend-area::before { inset: 0; border-radius: 3px; border: 2px solid var(--swatch);
    background: color-mix(in srgb, var(--swatch) 25%, transparent); }

/* Sloji in ločeno okno so en navpičen ovalni trak. Razširjeni seznam slojev
   se odpre levo od njega, zato ne spremeni oblike ali širine traku. */
.pp-app .map-tools-bar { position: absolute; top: 10px; right: 10px; z-index: 500;
    display: flex; flex-direction: column; width: 36px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 2px 8px rgba(var(--navy-rgb), 0.14); }

.pp-app .map-tool-btn,
.pp-app .map-zone-control,
.pp-app .map-zone-control.leaflet-control-layers-expanded { position: relative; width: 34px;
    height: 34px; margin: 0; padding: 0; background: transparent; border: 0;
    border-radius: 0; box-shadow: none; font-family: inherit; }

.pp-app .map-zone-control,
.pp-app .map-zone-control.leaflet-control-layers-expanded {
    border-bottom: 1px solid var(--line); border-radius: 17px 17px 0 0; }

.pp-app .map-zone-control .leaflet-control-layers-toggle { display: none; }

.pp-app .map-layers-btn { display: flex; align-items: center; justify-content: center;
    color: var(--text); cursor: pointer; border-radius: 17px 17px 0 0; }

.pp-app .map-layers-btn[aria-expanded="true"] {
    background: rgba(var(--navy-rgb), 0.12); color: var(--navy); }

.pp-app .map-tool-btn svg { display: block; width: 16px; height: 16px; }

.pp-app .map-zone-control .map-layers-panel { box-sizing: border-box; max-height: 360px;
    overflow-y: auto; padding: 12px; background: var(--paper); color: var(--text);
    border: 1px solid var(--line); border-radius: 12px; font-size: 13px; line-height: 1.4;
    box-shadow: 0 4px 18px rgba(var(--navy-rgb), 0.16); }

.pp-app .map-zone-control .map-layers-panel.hidden { display: none; }

.pp-app .map-layers-heading { display: block; padding: 2px 6px 10px; font-size: 13px; }

.pp-app .map-zone-control .leaflet-control-layers-overlays > label { display: block;
    margin: 0; padding: 9px 6px; border-radius: 6px; cursor: pointer; }

.pp-app .map-zone-control .leaflet-control-layers-overlays > label:hover { background: var(--app-bg); }

.pp-app .map-zone-control .leaflet-control-layers-overlays > label > span {
    display: flex; align-items: center; gap: 10px; }

.pp-app .map-zone-control input.leaflet-control-layers-selector { position: static;
    flex: 0 0 16px; width: 16px; height: 16px; margin: 0; cursor: pointer; }

.pp-app .map-zone-control .leaflet-control-layers-overlays > label > span > span {
    min-width: 0; flex: 1; }

.pp-app .map-layer-label { display: flex; align-items: center; gap: 8px;
    white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4; }

.pp-app .map-layer-label::before { content: ''; flex: 0 0 10px; height: 10px;
    border-radius: 3px; border: 2px solid var(--layer-color);
    background: color-mix(in srgb, var(--layer-color) 22%, transparent); }

.pp-app .map-infra-layers { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px; }

.pp-app .map-infra-row { display: flex; align-items: center; gap: 10px;
    padding: 9px 6px; margin: 0; border-radius: 6px; cursor: pointer;
    font-size: 13px; line-height: 1.4; white-space: normal; }

.pp-app .map-infra-row:hover { background: var(--app-bg); }

.pp-app .map-infra-row input { flex: 0 0 16px; width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* Ista potrditvena polja za območja in infrastrukturo; ostanejo izvorni
   inputi, zato delujeta tipkovnica in klik na celotno oznako. */
.pp-app .map-layers-panel input[type="checkbox"] { appearance: none;
    -webkit-appearance: none; display: grid; place-content: center; box-sizing: border-box;
    padding: 0; border: 1.5px solid var(--muted); border-radius: 5px;
    background: var(--paper); transition: background 120ms, border-color 120ms; }

.pp-app .map-layers-panel input[type="checkbox"]::after { content: ''; width: 7px; height: 4px;
    border-left: 2px solid white; border-bottom: 2px solid white;
    transform: translateY(-1px) rotate(-45deg); opacity: 0; }

.pp-app .map-layers-panel input[type="checkbox"]:checked {
    background: var(--navy); border-color: var(--navy); }

.pp-app .map-layers-panel input[type="checkbox"]:checked::after { opacity: 1; }

.pp-app .map-layers-panel input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--navy); outline-offset: 3px; }

.pp-app .map-coordinate-menu { box-sizing: border-box; max-height: 180px; overflow: auto;
    padding: 6px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--paper); color: var(--text);
    box-shadow: 0 4px 18px rgba(var(--navy-rgb), 0.16); }

.pp-app .map-coordinate-menu button { display: block; width: 100%; padding: 10px;
    text-align: left; border: 0; border-radius: 6px; background: transparent;
    color: inherit; font: inherit; font-size: 13px; cursor: pointer; }

.pp-app .map-coordinate-menu button:hover { background: var(--app-bg); }

.pp-app .map-coordinate-value { padding: 2px 10px 8px; color: var(--muted);
    font: 12px/1.5 monospace; user-select: text; overflow-wrap: anywhere; }

.pp-app .map-layer-loading::after { content: ' …'; color: var(--muted); }

.pp-app .map-layer-error { color: var(--danger); text-decoration: underline dotted; }

/* Stanje karte (nalaganje, prazno): sredina škatle namesto golega napisa v
   zgornjem kotu. Ista vrtavka kot povsod drugod (§5). */
.pp-app .map-state { display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 14px; height: 100%; padding: 24px;
    text-align: center; font-size: 12.5px; color: var(--muted); }

.pp-app .map-state .spinner { margin: 0; width: 30px; height: 30px; }

/* Med čakanjem na ortofoto leži isto stanje čez že narisano karto — polprosojno,
   da se pod njim vidi obris parcele. Pod gumbom in napisom karte (z-index 500). */
.pp-app .map-loading-over { position: absolute; inset: 0; z-index: 450;
    background: rgba(255, 255, 255, 0.82); pointer-events: none; }

.pp-app .map-win-btn { display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text); border-radius: 0 0 17px 17px; }

.pp-app .map-win-btn:hover,
.pp-app .map-zone-control:hover { background: var(--app-bg); }

/* Križec je osnovni kazalec karte. Roko dobijo samo objekti, ki imajo lastno
   dejanje ob kliku; obrisi, podlage in informativni sloji ostanejo križec. */
.pp-app #review-map,
.pp-app #review-map .leaflet-grab,
.pp-app #review-map .leaflet-interactive { cursor: crosshair; }

.pp-app #review-map .map-clickable { cursor: pointer; }

/* Izbira koordinate na karti (§6.2): dokler kontrola čaka klik, ima karta
   križec — tudi nad markerji in platnom, ki imata svoj kazalec — in napis, kaj
   bo klik postavil. Napis ne lovi klikov, sicer bi pojedel izbiro pod sabo. */
.pp-app #review-map.map-picking,
.pp-app #review-map.map-picking .leaflet-grab,
.pp-app #review-map.map-picking .leaflet-interactive,
.pp-app #review-map.map-picking .map-clickable { cursor: crosshair; }

.pp-app .map-pick-hint { position: absolute; top: 10px; left: 50%; z-index: 500;
    transform: translateX(-50%); max-width: calc(100% - 80px);
    padding: 6px 12px; border-radius: 7px; pointer-events: none;
    background: var(--navy); color: #fff; font-size: 12px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 2px 8px rgba(var(--navy-rgb), 0.24); }

/* Pin ročno izbrane koordinate je gol SVG — divIcon privzeto nosi belo
   ploskev z obrobo. */
.pp-app .map-pick-pin { background: none; border: 0; }

/* Številka parcele iz katastrske podlage: gol napis brez oblačka, s senco za
   berljivost čez ortofoto. Meje so tanke bele črte (slog v index.html). */
.pp-app .leaflet-tooltip.parcel-label { padding: 0; background: none; border: 0;
    box-shadow: none; white-space: nowrap; color: #fff; font-size: 11.5px;
    font-weight: 600; letter-spacing: 0.2px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }

.pp-app .leaflet-tooltip.parcel-label::before { display: none; }

.pp-app .map-side { display: flex; flex-direction: column; min-width: 0;
    border-left: 1px solid var(--line); background: var(--paper); overflow: auto; }

/* Spodnji del (kliknjeno) ne sme potisniti zgornjega z vidnega polja, zato
   ima svoj drs in ne raste čez polovico stolpca. */
.pp-app .map-side-sec { padding: 12px 14px; }

.pp-app .map-side-sec + .map-side-sec { border-top: 1px solid var(--line); }

/* Flex stolpec, da prazno stanje dobi celo višino sekcije in se v njej
   centrira; z vsebino je `flex: 1` na gostitelju brez učinka. */
.pp-app .map-side-sec-detail { flex: 1; min-height: 0; overflow: auto;
    background: var(--surface); display: flex; flex-direction: column; }

.pp-app .map-side-sec-detail > div { flex: 1; min-height: 0; }

.pp-app .map-side-head { font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--muted); margin-bottom: 8px; }

/* Vsak tip priključka je svoja ploskvica v nevtralni sivini (--app-bg): dovolj,
   da so tipi ločeni, premalo, da bi tekmovali s karto. Oznaka tipa, pod njo
   vrednost s podatki v isti vrsti — vsak podatek v svoji vrstici bi stolpec
   podaljšal čez karto. */
.pp-app .map-side-picks { display: flex; flex-direction: column; gap: 7px; }

.pp-app .mside-pick { padding: 8px 11px; background: var(--app-bg);
    border: 1px solid var(--app-line); border-radius: 7px; }

.pp-app .mside-pick-head { font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--muted); }

.pp-app .mside-val { font-size: 12.5px; font-weight: 600; line-height: 1.4;
    color: var(--text); }

.pp-app .mside-off { font-weight: 500; color: var(--muted); }

/* Podatki so pripis vrednosti, ne svoja vrstica. */
.pp-app .mside-meta { font-size: 11px; font-weight: 500; color: var(--muted); }

.pp-app .mside-val .mside-meta::before { content: " · "; }

.pp-app .mside-klik { cursor: pointer; }

.pp-app .mside-klik:hover { border-color: rgba(var(--teal-rgb), 0.35); }

/* Podvrstica (iztok MKČN) v isti ploskvici — ključ ob vrednosti. */
.pp-app .mside-sub { display: flex; align-items: baseline; gap: 7px; margin-top: 3px; }

.pp-app .mside-sub-key { flex: 0 0 auto; font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--muted); }

/* Kliknjeni objekt: naslov, podatki v dveh stolpcih, gumbi izbire. */
.pp-app .mside-det-title { font-size: 13px; font-weight: 700; color: var(--text);
    margin-bottom: 8px; }

.pp-app .mside-det-grid { display: grid; grid-template-columns: auto 1fr;
    gap: 3px 10px; font-size: 11.5px; margin-bottom: 10px; }

.pp-app .mside-det-key { color: var(--muted); }

.pp-app .mside-det-val { color: var(--text); font-weight: 600; text-align: right; }

/* Gumb izbire je edino dejanje v stolpcu, zato je črn in čez celo širino —
   pod podatki, s kljukico pred imenom. */
.pp-app .mside-akcije { display: flex; flex-direction: column; gap: 6px; }

.pp-app .mside-btn { display: flex; align-items: center; justify-content: center;
    gap: 6px; width: 100%; padding: 8px 12px; font-size: 11.5px; font-weight: 700;
    color: #fff; background: var(--navy); border: 1px solid var(--navy);
    border-radius: 6px; cursor: pointer; }

.pp-app .mside-btn svg { width: 13px; height: 13px; flex: 0 0 13px; }

.pp-app .mside-btn:hover { background: var(--navy-2); border-color: var(--navy-2); }

/* Že izbrano ni gumb, ampak stanje — kljukica ostane, poudarek gre stran. */
.pp-app .mside-btn-on { color: var(--muted); background: none; border-color: var(--line);
    cursor: default; }

/* Prazno stanje: navodilo sredi škatle, ikona nad besedilom in v isti sivini —
   je del napotka, ne samostojen element. */
.pp-app .mside-empty { display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px; height: 100%; padding: 24px 12px;
    text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

/* Pod 900px se stolpec postavi pod karto — ozek stolpec ob ozki karti ne
   pokaže ne enega ne drugega. */
@media (max-width: 900px) {
    .pp-app .review-map-wrap.has-side { grid-template-columns: 1fr; }
    .pp-app .map-side { border-left: 0; border-top: 1px solid var(--line); }
}

/* ── Korak Odločitve (pp-v4-plan.md §6.2) ──
   Bloki drug pod drugim; vsako polje je izbira iz vira, zato so vse kontrole
   enako široke in enako označene (predlog + razlog + oznaka spremembe). */

/* Ena ploskev za cel korak; sekcije v njej loči naslov, ne kartica. */
.pp-app .review-params { margin-bottom: 16px; padding: 18px 22px 32px; }

/* Scenarij kot vrhnja navigacija: zavihka, katerih panel je celotna stran. */

/* Zavihka sedita v sivi pasici na vrhu ploskve — kot zavihki v brskalniku. */
/* Brez odmika: ploskev izbranega zavihka zapolni celotno višino sive pasice
   in se levo drži njenega roba, ne lebdi v njej. */
.pp-app .dtabs { display: flex; gap: 4px; margin: -18px -22px 0; padding: 0;
    background: var(--app-bg); border-bottom: 1px solid var(--line);
    border-radius: 8px 8px 0 0; }

.pp-app .dtab { padding: 15px 26px; font-size: 13px; font-weight: 700; letter-spacing: 0.2px;
    color: var(--muted); background: none; border: 0; border-radius: 8px 8px 0 0;
    cursor: pointer; transition: background 0.15s, color 0.15s; }

.pp-app .dtab:hover { color: var(--text); background: rgba(var(--navy-rgb), 0.05); }

/* Izbrani zavihek je črn — na prvi pogled mora biti očitno, katera pot velja. */
.pp-app .dtab-active,
.pp-app .dtab-active:hover { background: var(--navy); color: #fff; }

/* Prvi zavihek deli zaobljen kot s pasico, da se ploskev sklada z njenim robom. */
.pp-app .dtab:first-child { border-radius: 8px 8px 0 0; }

/* Značka odprtih pripomb na zavihku dokumenta (glej §11.x PRIPOMBE): krogec s
   številom, ista jantarna kot statusna pika v tabeli. Je vrivek v napis
   zavihka, zato poravnava po sredini vrstice in ne spreminja .dtab samega. */
.pp-app .dtab-badge { display: inline-block; box-sizing: border-box; min-width: 19px;
    height: 19px; margin-left: 8px; padding: 0 5px; font-size: 11px; font-weight: 800;
    line-height: 19px; text-align: center; vertical-align: middle; color: #fff;
    background: #f97316; border-radius: 999px; }

/* Scenarij je spustni seznam, ne več zavihek — nad prvim naslovom zato ni
   pasice, ki bi jo bilo treba odmakniti; odmik da ploskev sama. */
.pp-app .dtab-panel { padding-top: 0; }

/* Sekcije niso kartice: naslov s hairline črto in prostor okoli njega —
   isti princip kot .arh-app .objekt-section-label v arhitektovem klientu. */
.pp-app .dblock { background: none; border: 0; }

.pp-app .dblock-title { display: flex; align-items: center; gap: 9px;
    margin: 56px 0 16px; font-size: 15px; font-weight: 800;
    letter-spacing: 0; color: var(--text); }

/* Ikona sekcije sedi v temni ploskvici — naslovi so tako na prvi pogled
   berljivi kot vrstica ikona + besedilo. */
.pp-app .dblock-title > svg { box-sizing: content-box; width: 17px; height: 17px;
    flex-shrink: 0; padding: 6px; border-radius: 7px;
    background: var(--navy); color: #fff; }

.pp-app .dblock:first-child .dblock-title { margin-top: 8px; }

/* Križec odstrani sekcijo iz projekta: dokument se ne izda. Stoji na desnem
   robu naslova, viden šele ob prehodu čez sekcijo — odstranitev je redka
   odločitev in ne sme tekmovati z vsebino za pozornost. */
.pp-app .dblock-remove { margin-left: auto; display: inline-flex; border: 0; background: none;
    cursor: pointer; padding: 4px; line-height: 0; color: var(--muted);
    opacity: 0; transition: opacity .12s, color .12s; }
/* Ikona iz registra (icons.js) — velikost tu, ker .dblock-title > svg velja le
   za ikono naslova in ima temno ploskvico. */
.pp-app .dblock-remove svg { width: 15px; height: 15px; }
.pp-app .dblock:hover .dblock-remove,
.pp-app .dblock-remove:focus-visible { opacity: 1; }
.pp-app .dblock-remove:hover { color: var(--red); }

/* Odstranjena sekcija ostane vidna (da jo je mogoče vrniti), a pripeta:
   naslov zbledi, telo se skrije. */
.pp-app .dblock-off .dblock-title { color: var(--muted); }
.pp-app .dblock-off .dblock-remove { opacity: 1; }

.pp-app .dblock-body { display: flex; flex-direction: column; gap: 24px; }

/* Vsebina scenarija znotraj bloka (tabela + mreža polj) diha enako kot
   neposredni otroci sekcije — sicer se oznake polj zalepijo na tabelo. */
.pp-app .dstack { display: flex; flex-direction: column; gap: 24px; }

/* Pojasnilo izbir pod naslovom sekcije — izpeljano iz istih vrednosti, ki jih
   primerja pravilo (§5.3), zato ne more zdrsniti stran od odločitve. */
.pp-app .dblock-note { margin: -6px 0 18px; font-size: 12px; line-height: 1.6;
    color: var(--muted); }

.pp-app .dblock-toggle { cursor: pointer; }

/* Ista puščica kot v spustnem seznamu (.ui-select-chevron), le drugače
   obrnjena: dol, ko je sekcija odprta, in v stran, ko je zložena. */
.pp-app .dblock-caret { margin-left: auto; display: inline-flex; flex-shrink: 0;
    color: var(--muted); transition: transform .15s, color .15s; }

.pp-app .dblock-caret svg { width: 16px; height: 16px; }

.pp-app .dblock-toggle:hover .dblock-caret { color: var(--teal); }

.pp-app .dblock-collapsed .dblock-body { display: none; }

.pp-app .dblock-collapsed .dblock-caret { transform: rotate(-90deg); }

.pp-app .dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px; align-items: start; }

@media (max-width: 900px) { .pp-app .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 620px) { .pp-app .dgrid { grid-template-columns: 1fr; } }

.pp-app .dfield { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.pp-app .dfield-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.2px; }

.pp-app .dfield-note { font-size: 10.5px; color: var(--muted); font-weight: 500; }

.pp-app .dfield-note.conf-low { color: var(--orange); }

/* Uredljiv številčni vnos s hitrim seznamom pogostih vrednosti. */
.pp-app .number-suggestions { position: relative; }
.pp-app .number-suggestions input { width: 100%; padding-right: 42px; appearance: textfield; }
.pp-app .number-suggestions input::-webkit-inner-spin-button,
.pp-app .number-suggestions input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.pp-app .number-suggestions input::-webkit-calendar-picker-indicator { display: none !important; }
.pp-app .number-suggestions-open {
    position: absolute; inset: 1px 1px 1px auto; width: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-left: 1px solid var(--line); background: transparent;
    color: var(--muted); cursor: pointer;
}
.pp-app .number-suggestions-open:hover { color: var(--teal); }
.pp-app .number-suggestions-open svg { width: 15px; height: 15px; }

/* Krogec zaupanja ob oznaki polja: zelen → oranžen → rdeč pove, kako trdna je
   avtomatska vrednost. Razlog je v naslovu (tooltip), zato krogec ostane samo
   znak, ki ga oko prebere brez branja. */
.pp-app .conf-dot { display: inline-block; width: 7px; height: 7px; margin-left: 6px;
                    border-radius: 999px; vertical-align: middle; cursor: help; }

.pp-app .conf-dot-high { background: var(--vivid); }

.pp-app .conf-dot-medium { background: var(--orange); }

.pp-app .conf-dot-low { background: var(--red); }

.pp-app .dfield-changed input,
.pp-app .dfield-changed .ui-select-trigger {
    border-color: var(--vivid);
    background-color: rgba(var(--vivid-rgb), 0.12);
}

.pp-app .pf-changed .ui-select-trigger {
    border-color: var(--vivid);
    background-color: rgba(var(--vivid-rgb), 0.12);
}

/* Platformni dropdown v PP je enako visok kot ostale kontrole polja. */

/* Izbira na karti — gumb je kontrola polja, zato izgleda kot dropdown poleg
   njega: cela širina kolone, mirna obroba, poudarek šele ko čaka na klik. */

.pp-app .pickrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pp-app .pick-btn { flex: 1; height: 42px; padding: 0 14px; font-size: 13px; font-weight: 500;
    color: var(--text); background: var(--surface); border: 1.5px solid var(--line);
    border-radius: 5px; cursor: pointer; transition: border-color .15s, background .15s; }

.pp-app .pick-btn:hover { border-color: rgba(var(--navy-rgb), 0.28); }

.pp-app .pick-btn-armed { background: var(--navy); color: #fff; border-color: var(--navy); }

.pp-app .pick-btn-armed:hover { border-color: var(--navy); }

.pp-app .pick-value { font-size: 13px; font-weight: 700; color: var(--text); }

/* Zakaj klik ni obveljal — pri polju in ne v konzoli. */
.pp-app .pick-error { flex-basis: 100%; font-size: 11.5px; font-weight: 500;
    line-height: 1.4; color: var(--red); }

/* Sestavljena kontrola "Iztok" */

/* Polja kontrole iztoka so del mreže svoje sekcije, zato se vrstice zlagajo
   skupaj s preostalimi polji; alternative zasedejo dve tretjini, ker nosijo
   cel stavek iz dokumenta. */
.pp-app .outlet-host { display: contents; }

.pp-app .dfield-span2 { grid-column: span 2; }

/* Dve kratki kontroli v eni celici mreže. */
.pp-app .dfield-pair { flex-direction: row; gap: 16px; }

.pp-app .minifield { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 0; }

@media (max-width: 900px) { .pp-app .dfield-span2 { grid-column: span 2; }

/* Dve kratki kontroli v eni celici mreže. */
.pp-app .dfield-pair { flex-direction: row; gap: 16px; }

.pp-app .minifield { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 0; } }

@media (max-width: 620px) { .pp-app .dfield-span2 { grid-column: span 1; } }

/* Alternative: zložena sekcija z enakimi vrsticami izbire — brez čipov in
   posebnih gumbov, da je v kontroli en sam vzorec izbiranja. */
.pp-app .subblock { border: 1.5px solid var(--line); border-radius: 5px; background: var(--surface); }

.pp-app .subblock .dblock-title { margin: 0; padding: 0 14px; min-height: 41px; font-size: 13px;
    font-weight: 500; align-items: center; gap: 12px; cursor: pointer; }

.pp-app .subblock:hover { border-color: rgba(var(--navy-rgb), 0.28); }

.pp-app .subblock .dblock-body { padding: 4px 14px 14px; gap: 20px; }

.pp-app .subblock .dgrid { grid-template-columns: 1fr; }

/* Povzetek je stavek iz dokumenta — sme se preliti v več vrstic. */
.pp-app .subblock-summary { flex: 1; min-width: 0; padding: 11px 0; color: var(--text);
    font-weight: 500; }

/* Seznam dodatnih možnosti — ena sama oblika izbiranja v vsej kontroli. */
.pp-app .optlist { display: flex; flex-direction: column; align-self: flex-start;
    min-width: 260px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }

.pp-app .optrow { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px;
    background: var(--surface); border: 0; border-top: 1px solid var(--line-soft);
    font-size: 13px; font-family: inherit; color: var(--text); cursor: pointer; text-align: left; }

.pp-app .optrow:first-child { border-top: 0; }

.pp-app .optrow:hover { background: rgba(var(--teal-rgb), 0.05); }

.pp-app .optrow-on { font-weight: 600; }

.pp-app .optrow-check { width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px;
    border: 1.5px solid var(--line); }

.pp-app .optrow-on .optrow-check { background: var(--teal); border-color: var(--teal);
    box-shadow: inset 0 0 0 2px var(--surface); }

/* Odjemna mesta: isti seznam kljukic v polju bloka — oznaka nosi izbiro, opis
   (naziv, naslov, razdalja) je le pomoč pri razločevanju sosedov, zato se v
   ozkem stolpcu skrajša. Seznam sme zrasti, a ne čez višino ostalih polj. */
.pp-app .dfield .optlist { align-self: stretch; min-width: 0; max-height: 232px;
    overflow-y: auto; }

.pp-app .optrow-om { flex-shrink: 0; }

.pp-app .optrow-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--muted); }

.pp-app .optrow-empty { padding: 12px 14px; font-size: 12.5px; color: var(--muted); }

/* Priključna mesta (connections.js): pod glavnim izbirnikom podatki glavnega
   mesta, vrstice dodatnih mest v istem seznamu kot odjemna mesta, a brez
   kljukice — mesto je izbrano, križec ga odstrani. */
.pp-app .conn-host { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.pp-app .conn-host:empty { display: none; }

.pp-app .conn-list { align-self: stretch; min-width: 0; }

.pp-app .conn-row { cursor: default; }

.pp-app .conn-row:hover { background: var(--surface); }

.pp-app .conn-remove { margin-left: auto; display: inline-flex; flex-shrink: 0; border: 0;
    background: none; cursor: pointer; padding: 4px; line-height: 0; color: var(--muted); }

.pp-app .conn-remove svg { width: 15px; height: 15px; }

.pp-app .conn-remove:hover { color: var(--red); }

/* Vodovod: dodatno mesto navrtanja se izbere na karti — gumb pred križcem,
   obarvan kot naoborožen izbirnik (pick-btn-armed), dokler čaka na klik. */
.pp-app .conn-pick { margin-left: auto; display: inline-flex; flex-shrink: 0; border: 0;
    border-radius: 6px; background: none; cursor: pointer; padding: 4px; line-height: 0;
    color: var(--muted); }

.pp-app .conn-pick svg { width: 15px; height: 15px; }

.pp-app .conn-pick:hover { color: var(--navy); }

.pp-app .conn-pick-armed { background: var(--navy); color: #fff; }

.pp-app .conn-pick-armed:hover { color: #fff; }

.pp-app .conn-pick + .conn-remove { margin-left: 0; }

/* Vodovod: izvedba novega sekundarnega cevovoda (krožni vod, hidrant, pogodba)
   — kljukice iz sistema oblikovanja (.check-card) v gostoti polj odločitev. */
.pp-app .dfield .control-group { gap: 6px; }

.pp-app .dfield .check-card { min-height: 42px; padding: 8px 14px; gap: 10px; font-size: 13px;
    border-radius: 6px; }

/* Kontekstni trak */

/* Ista mreža kot polja pod njo, da se izpisi in vnosi poravnajo v kolone. */
.pp-app .ctx-aglo-edit { display: inline-flex; align-items: center; gap: 7px;
    padding: 0; border: 0; background: transparent; color: var(--text);
    font: inherit; font-weight: 700; text-align: left; cursor: pointer; }

.pp-app .ctx-aglo-edit svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }

.pp-app .ctx-aglo-edit:hover { color: var(--navy); text-decoration: underline dotted; }

.pp-app .ctx-aglo-choices { margin-top: 10px; padding: 10px; border: 1px solid var(--line);
    border-radius: 8px; background: var(--paper); }

.pp-app .ctx-aglo-choices p { margin: 0 0 8px; font-size: 12px; color: var(--muted); }

.pp-app .ctx-aglo-choice { display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 0; cursor: pointer; font-size: 12px; }

.pp-app .ctx-aglo-choice input { flex: 0 0 15px; width: 15px; height: 15px;
    margin: 2px 0 0; accent-color: var(--navy); }

.pp-app .ctx-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px; font-size: 11px; color: var(--muted); }

@media (max-width: 900px) { .pp-app .ctx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 620px) { .pp-app .ctx-row { grid-template-columns: 1fr; } }

.pp-app .ctx-item b { display: block; font-size: 13px; font-weight: 700; color: var(--text); }

/* Parcel identity confirmation gate (status: confirm) */

/* Isti naslov sekcije kot na koraku Odločitve (.dblock-title): ikona v temni
   ploskvici + besedilo. */
/* min-height drži prazen naslov drugega DGD stolpca enako visok kot prvega,
   da sta seznama polj poravnana. */

.pp-app .params-col-title svg { box-sizing: content-box; width: 17px; height: 17px;
    flex-shrink: 0; padding: 6px; border-radius: 7px;
    background: var(--navy); color: #fff; }

.pp-app .params-col-fields { display: flex; flex-direction: column; gap: 10px; }

.pp-app .pf-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.2px; }

.pp-app .pf-hint { font-size: 10px; color: var(--teal); font-weight: 500; }

/* Polmer vnosnih kontrol pride iz --radius-input (§ baza) — tu ga ne
   ponavljamo. Nadgrajeni spustni seznam ni <input>, zato ga poravnamo posebej. */
.pp-app .ui-select-trigger {
 height: 44px; font-size: 13px;
 border-radius: var(--radius-input); 
}

.pp-app .pf {
 display: flex; flex-direction: column; gap: 4px;
 position: relative; 
}
/* Manjša para gumbov (Shrani/Prekliči ob kandidatih): primarni gumb je sicer
   večji od sekundarnega (§11 spodaj), zato tu obema predpišemo iste mere —
   razlikuje naj ju le obroba in teža, ne velikost. */
.pp-app .cand-btn { padding: 6px 14px; font-size: 12px; }

/* Potrdi gumb na dnu vsakega koraka — vedno pelje naprej. */
.pp-app .step-footer { display: flex; justify-content: flex-end; gap: 10px;
    margin: 18px 0 30px; }

/* Koraki pregleda (§6.2) so postavke stranske vrstice (.nav-stage v §5) —
   vodoravni stepper je odstranjen skupaj z njegovimi pravili. */

/* Podpis je zaključno dejanje koraka: poln temen gumb ob desnem robu verige
   (drugod v PP je .btn-primary obrisen — glej §11 na dnu). */
.pp-app .signing-actions { margin: 16px 0 40px; display: flex; justify-content: flex-end; }
.pp-app .signing-actions .btn-primary { padding: 12px 28px; background: var(--navy); color: var(--white); }
.pp-app .signing-actions .btn-primary:hover { background: var(--navy-2); color: var(--white); }

.pp-app .pf-hint.conf-low { color: var(--orange); font-weight: 600; }

/* Signali negotovosti auto-odločitev (case.uncertainty) — oranžno opozorilo
   nad tier-1 polji; pregledovalec mora sporne odločitve izrecno potrditi. */
.pp-app .pp-uncertainty { display: none; margin: 0 0 10px; padding: 10px 12px;
    border-radius: 9px; font-size: 13px; line-height: 1.5; color: var(--orange);
    background: rgba(var(--orange-rgb), 0.12);
    border: 1px solid rgba(var(--orange-rgb), 0.3); }
.pp-app .pp-uncertainty.visible { display: block; }
.pp-app .pp-uncertainty ul { margin: 4px 0 0; padding-left: 18px; }

/* Styled input */

/* Enaka polja kot na koraku Odločitve (.dfield input) — velikost, polmer in
   tipografija pridejo iz baznega pravila za <input>; tu samo širina. */
.pp-app .pf input {
            width: 100%; font-family: inherit;
            transition: border-color 0.15s, box-shadow 0.15s;
        }

.pp-app .pf input:hover { border-color: var(--muted); }

.pp-app .pf input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

.pp-app .pf-changed input {
    border-color: var(--vivid);
    background-color: rgba(var(--vivid-rgb), 0.12);
}

.pp-app .pf-changed input:focus {
    border-color: var(--vivid);
    box-shadow: 0 0 0 3px rgba(var(--vivid-rgb), 0.18);
}

/* Hidden native select (backing store for custom dropdown) */

.pp-app .pf select { display: none; }

/* DGD data: 2-column below */

.pp-app .review-dgd { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 16px; border: 1px solid var(--line); background: var(--surface); }

/* DGD stolpca sta en sam sklop podatkov — brez ločnice med njima. */
.pp-app .dgd-col + .dgd-col { border-left: 0; }

/* Preview */

/* Naslov je prvi v ploskvi, zato odmika nad njim ne dela njegov privzeti
   razmik med sekcijami, ampak ploskev sama — enako kot pri alinejah. */
.pp-app .review-preview { background: var(--surface); padding: 18px 20px 20px; border: 1px solid var(--line); }

.pp-app .review-preview .dblock-title { margin: 0 0 18px; }

/* Zavihki dokumentov stojijo v vsebini, ne kot pasica na vrhu ploskve. */
.pp-app .dtabs-inline { margin: 0 0 16px; padding: 0; background: none;
    border-bottom: 1px solid var(--line); border-radius: 0; }

.pp-app .dtabs-inline .dtab { border-radius: 6px 6px 0 0; }

.pp-app .doc-empty { padding: 40px 0; font-size: 13px; color: var(--muted); text-align: center; }

/* Ročno urejanje dokumenta (doc_editor.js): vrstica orodij nad predogledom.
   Sam dokument se ureja v iframu; njegovi slogi (okvirji blokov) so vstavljeni
   v izrisani HTML, ker app.css tja ne seže. */
.pp-app .doc-editbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
/* Mirujoči gumb Uredi: desno nad listom, ista poravnava kot gumbi korakov. */
.pp-app .doc-editbar-idle { justify-content: flex-end; margin-bottom: 10px; }
.pp-app .doc-edit-btn { display: inline-flex; align-items: center; gap: 7px; }
.pp-app .doc-edit-btn svg { width: 14px; height: 14px; flex: none; }
.pp-app .doc-editbar-fmt { min-width: 36px; padding-left: 10px; padding-right: 10px; }
.pp-app .doc-editbar-spacer { flex: 1; }
.pp-app .doc-editbar-hint { font-size: 12px; color: var(--muted); }
.pp-app .doc-editbar-error { color: var(--red); font-size: 12px; margin: 0 0 8px; }
.pp-app .doc-editbar-error:empty { display: none; }
/* Zaklenjena glava (task 07): klik nanjo pove, da se ureja v Podatkih
   projekta, in ponudi gumb do polja. */
.pp-app .doc-editbar-lock { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 12px; font-size: 13px; }
/* Ročni popravek glave iz časa pred zaklepom: opozorilo nad dokumentom. */
.pp-app .doc-header-edits { margin: 0 0 12px; font-size: 13px; }
.pp-app .doc-header-edits ul { margin: 6px 0 10px 18px; }
.pp-app .doc-header-edits li { margin: 2px 0; }
.pp-app .doc-editbar-bold { font-weight: 800; }
.pp-app .doc-editbar-italic { font-style: italic; }
/* Pokaži spremembe (doc_changes.js): stikalo levo v vrstici nad dokumentom —
   ista sled kot .toggle-row, brez kartice okoli. */
.pp-app .doc-changes-switch { position: relative; display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text); cursor: pointer; user-select: none; }
.pp-app .doc-changes-switch input { position: absolute; opacity: 0; pointer-events: none; }
.pp-app .doc-changes-switch input:checked + .toggle-track { border-color: var(--teal); background: var(--teal); }
.pp-app .doc-changes-switch input:checked + .toggle-track::after { transform: translateX(20px); }
.pp-app .doc-changes-switch input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px rgba(var(--vivid-rgb), 0.13); }
/* Poseg, pod katerim je regeneracija spremenila besedilo (edit_status). */
.pp-app .doc-stale { margin: 0 0 12px; font-size: 13px; }
.pp-app .doc-stale > ul { margin: 8px 0 0; padding: 0; list-style: none; }
.pp-app .doc-stale-item { margin: 0 0 10px; }
.pp-app .doc-stale-item .doc-editbar { margin: 6px 0 0; }
.pp-app .doc-stale-diff { display: grid; gap: 2px; margin-top: 4px; color: var(--muted); }
.pp-app .doc-stale-now { color: var(--text); }

/* Okvir je visok natanko en list: dokument se na zaslonu postavi kot A4
   (`min-height: 297mm` v _base.html), zato je meja strani vidna brez ugibanja.
   Dodanih 16 px je prostor za vodoravni drsnik, ki se pojavi, ko je ploskev
   ožja od 210 mm — sicer bi ta odrezal zadnjo vrstico strani. */
.pp-app .review-preview iframe { width: 100%; height: calc(297mm + 16px); border: none; }

/* Settings view */

.pp-app .settings-view { margin: 0 auto; }

.pp-app .settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }

.pp-app .settings-header h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin: 0; }

.pp-app #settings-content { display: flex; flex-direction: column; gap: 16px; }

.pp-app .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.pp-app .settings-section { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }

.pp-app .settings-section.full { grid-column: 1 / -1; }

.pp-app .settings-section-head { padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }

.pp-app .settings-section-head svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }

.pp-app .settings-section-title { font-size: 13px; font-weight: 800; color: var(--text); }

.pp-app .settings-section-body { padding: 16px 20px; }

.pp-app .settings-item { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; display: flex; gap: 12px; }

.pp-app .settings-item:last-child { border-bottom: none; }

.pp-app .settings-key { font-weight: 700; color: var(--muted); min-width: 140px; flex-shrink: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; padding-top: 1px; }

.pp-app .settings-val { color: var(--text); line-height: 1.5; word-break: break-word; }

.pp-app .settings-tag { display: inline-block; padding: 2px 8px; background: rgba(var(--teal-rgb), 0.06); border: 1px solid var(--line); border-radius: 3px; font-size: 11px; font-weight: 600; margin: 2px 3px 2px 0; text-align: center; }

.pp-app .settings-cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }

.pp-app .settings-cn-card { padding: 10px 14px; background: rgba(var(--teal-rgb), 0.06); border: 1px solid var(--line); border-radius: 4px; font-size: 12px; }

.pp-app .settings-cn-name { font-weight: 700; margin-bottom: 3px; }

.pp-app .settings-cn-meta { color: var(--muted); font-size: 11px; }

.pp-app .settings-num { display: inline-block; padding: 2px 8px; background: #dbeafe; color: #1d4ed8; border-radius: 3px; font-size: 12px; font-weight: 700; }

/* Ena kartica na vlogo (namesto ene vrstice): naslovi vlog so različno dolgi
   ("Direktor" proti "Vodja odvajanja"), zato bi jih poravnava v skupen stolpec
   ključ/vrednost lomila na različnih mestih. V kartici je vsako polje svoje,
   z lastnim label-om (.dfield/.dfield-label, isti vzorec kot v pregledu
   odločitev), zato je postavitev stabilna ne glede na dolžino besedila. */
.pp-app .signer-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }

.pp-app .signer-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; }

.pp-app .signer-card-head { display: flex; flex-direction: column; gap: 2px; }

.pp-app .signer-select { padding: 6px 8px; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text); width: 100%; }

/* Ime za izpis na dokumentu — ločeno od Clerk profila, ker ta pogosto nima
   izpolnjenega imena in bi se sicer na podpisu izpisal e-poštni naslov. */
.pp-app .signer-name-input { padding: 6px 8px; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text); width: 100%; }

.pp-app .signer-sig { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.pp-app .signer-sig-preview { max-height: 56px; max-width: 240px; border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; background: var(--surface); object-fit: contain; }

.pp-app .signer-sig-actions { display: flex; gap: 8px; align-items: center; }

.pp-app .signer-actions { margin-top: 14px; }

/* Zakonodaja — pogled v lupini (stranska vrstica ostane), vsebina je
   statičen fragment zakonodaja.html. Razdelki so isti .settings-section kot
   v Nastavitvah; tu so samo dodatki, ki jih nastavitve nimajo — naslov
   skupine, besedilo člena in obe poudarjeni vrstici. */

.pp-app #predpisi-content { display: flex; flex-direction: column; gap: 16px; }

.pp-app .zak-intro { max-width: 78ch; color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }

.pp-app .zak-vsebina { display: flex; flex-direction: column; gap: 16px; }

.pp-app .zak-skupina { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 14px 0 -4px; }

.pp-app .zak-vsebina > .zak-skupina:first-child { margin-top: 0; }

.pp-app .zak-clen-naslov { color: var(--muted); margin-bottom: 4px; }

.pp-app .zak-besedilo { margin: 0 0 8px; line-height: 1.65; }

.pp-app .zak-besedilo:last-child { margin-bottom: 0; }

.pp-app .zak-poudarek { margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--teal); background: rgba(var(--teal-rgb), 0.05); border-radius: 0 3px 3px 0; color: var(--text); }

.pp-app .settings-item.zak-opozorilo .settings-val { padding: 8px 10px; border-left: 2px solid var(--orange); background: rgba(var(--orange-rgb), 0.07); border-radius: 0 3px 3px 0; }

/* Signing */

/* Korak Podpis: samo stanje podpisov — vsak izdani dokument ima svojo verigo,
   ta pa leži čez celotno širino (1 → 3 od leve proti desni), manjkajoči
   podpisi so jasno vidni ("Čaka na podpis"). */
.pp-app .signing-panel { margin: 40px 0 12px; }

/* En blok na dokument: naslov s številko in stanjem, pod njim njegova veriga. */
.pp-app .sign-doc + .sign-doc { margin-top: 22px; }

.pp-app .sign-doc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

.pp-app .sign-doc-title { font-size: 13px; font-weight: 700; color: var(--text); }

.pp-app .sign-doc-num { font-size: 12px; color: var(--muted); }

/* Stanje verige tega dokumenta — dokler ni podpisan vsak, projekt ne odide. */
.pp-app .sign-doc-state { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--orange); }

.pp-app .sign-doc-state.is-done { color: #10b981; }

/* Podpis prav tega dokumenta; skupni "Podpiši vse" stoji pod verigami. */
.pp-app .sign-doc-btn { white-space: nowrap; }

/* Verige so različno dolge (odpadki dve vlogi, ostali tri) — stolpci se
   prilagodijo številu kartic in se na ozkem zaslonu zložijo sami. */
.pp-app .sign-chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }

.pp-app .sign-step { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }

.pp-app .sign-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 800; flex-shrink: 0; margin-top: 1px; background: rgba(var(--teal-rgb), 0.06); color: var(--muted); }

.pp-app .sign-step.signed { border-color: #10b981; background: #ecfdf5; }

.pp-app .sign-step.signed .sign-step-icon { background: #10b981; color: var(--surface); }

.pp-app .sign-step.current { border-color: #2563eb; background: #eff6ff; }

.pp-app .sign-step.current .sign-step-icon { background: #2563eb; color: var(--surface); }

.pp-app .sign-step-role { font-size: 12px; font-weight: 700; color: var(--text); }

/* Ime osebe, ki podpisuje to vlogo — glavni podatek kartice. */
.pp-app .sign-step-name { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 2px; }

.pp-app .sign-step-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Pojasnilo poti dokumenta po zadnjem podpisu. */
.pp-app .sign-note { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); }

.pp-app .sign-note-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; }

.pp-app .sign-note-list { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.7; color: var(--muted); }

.pp-app .sign-note-email { font-weight: 600; color: var(--text); }

.pp-app .sign-note-email.is-missing { font-weight: 400; color: var(--orange); }

/* Sklenjena veriga: pojasnilo govori o opravljenih dejstvih. */
.pp-app .sign-note.is-done { border-color: rgba(111, 128, 88, 0.4); }

/* Datoteke projektne mape pod podpisi — vsaka svoja vrstica-povezava. */
.pp-app .sign-files { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

.pp-app .sign-files-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }

.pp-app .sign-files-title { font-size: 12px; font-weight: 700; color: var(--text); }

/* Prenos vseh izdanih dokumentov v enem arhivu (brez naložene vloge). */
.pp-app .sign-files-all { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }

.pp-app .sign-files-all svg { width: 14px; height: 14px; }

.pp-app .sign-files-list { display: flex; flex-direction: column; gap: 6px; }

.pp-app .sign-file { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface);
    font-size: 12.5px; font-weight: 600; color: var(--teal); text-decoration: none; }

.pp-app .sign-file:hover { border-color: var(--teal); }

.pp-app .sign-file-cat { font-size: 11px; font-weight: 500; color: var(--muted); }

.pp-app .sign-files-note { font-size: 12px; color: var(--muted); }

.pp-app .error-box { background: #fef2f2; border-left: 3px solid #dc2626; padding: 10px 14px; font-size: 12px; color: #7f1d1d; margin-bottom: 12px; }

.pp-app .loading-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }

.pp-app .spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: spin 0.6s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.pp-app .hidden { display: none !important; }

body.pp-app {
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Čisto belo, ne globalni off-white --white: žleb, v katerem plava stranska
       vrstica, mora biti iste barve kot .app-main poleg njega — sicer se vidi
       kot drug odtenek. Enako počne arhitekt. Kartice (.dblock, .stat-card,
       .settings-section, .pp-table) imajo svoje obrobe, zato na belem še vedno
       berejo kot ploskve. */
    background: var(--surface);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

/* Layout je deljena .app-shell komponenta (§5). PP jo uporabi kot je, samo
   z lastno vsebinsko širino — korak Odločitve je najširši pogled. */

.pp-app .app-shell { --content-max: 1360px; }

/* Značka ob koraku v stranski vrstici: število odločitev, ki rabijo
   pozornost, oz. "vi", ko podpis čaka na prijavljenega uporabnika. */

.pp-app .nav-badge { padding: 1px 7px; border-radius: 999px; background: var(--teal); color: var(--surface);
    font-size: 10px; font-weight: 800; letter-spacing: 0.3px; }

.pp-app .nav-stage.active .nav-badge { background: var(--navy); color: var(--surface); }

.pp-app *,
.pp-app *::before,
.pp-app *::after {
    letter-spacing: 0;
}

/* Fiksna vrhnja glava (.app-header*) je odstranjena — navigacijo nosi
   stranska vrstica .app-shell iz §5. */

/* Širino in odmike postavi .main-inner (--content-max) — vsi pogledi so
   enako široki, da se vsebina ob prehodu med njimi ne premakne. */

.pp-app .dashboard,
.pp-app .settings-view,
.pp-app .review-view {
    max-width: 100%;
    padding: 0;
}

/* Naslovi pogledov so goli, kot pri arhitektu (§9 .dash-header/.panel-title):
   temna vrstica čez celotno širino je odstranjena — naslov nosi tipografija,
   ne ploskev. Ikona ob naslovu seznama je teal, tako kot .panel-title-icon. */

.pp-app .dash-header,
.pp-app .review-header,
.pp-app .settings-header {
    margin-bottom: 24px;
    padding: 0;
    background: none;
    color: inherit;
    box-shadow: none;
}

.pp-app .dash-title { display: flex; align-items: center; gap: 12px; min-width: 0; }

.pp-app .dash-title .panel-title-icon { display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; padding: 8px; border-radius: 9px;
    background: var(--navy); color: #fff; }

.pp-app .dash-title .panel-title-icon svg { width: 20px; height: 20px; display: block; }

.pp-app .dash-stats {
    gap: 16px;
    margin-bottom: 32px;
}

.pp-app .stat-card,
.pp-app .dash-map-wrap,
.pp-app .review-map-wrap,
.pp-app .review-params,
.pp-app .review-dgd,
.pp-app .review-preview,
.pp-app .settings-section,
.pp-app .modal,
.pp-app .pp-table {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 22px rgba(var(--navy-rgb), 0.04);
}

/* Brez min-height — višino določi vsebina + padding, sicer ostane prazen
   prostor pod besedilom (vsebina je poravnana na vrh). Kartice so temne
   ploskve, enake barve kot stranska vrstica (--side-bg z .app-shell). */
.pp-app .stat-card {
    padding: 16px 18px;
    align-items: center;
    background: var(--side-bg);
    border-color: var(--side-bg);
}

.pp-app .stat-icon {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
}

.pp-app .stat-value {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.pp-app .stat-label {
    color: rgba(255, 255, 255, 0.66);
}

.pp-app th,
.pp-app .form-group label,
.pp-app .params-col-title,
.pp-app .pf-label,
.pp-app .settings-key {
    color: var(--muted);
}

/* Orodna vrstica: razvrščanje ima svojo fiksno širino na desni, filter je širok
   toliko kot njegovi gumbi, iskalnik pa pobere ves preostali prostor. */
.pp-app .dash-toolbar {
    gap: 16px;
    margin-bottom: 16px;
}

.pp-app .dash-search {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-app .dash-sort {
    flex: 0 0 200px;
    min-width: 0;
    margin-left: auto;
}

.pp-app .dash-sort .select-shell {
    flex: 1;
    min-width: 0;
}

/* Pill radius je samo za gumbe — vnosne kontrole ostanejo pri 5px (§ zgoraj). */
.pp-app .btn-primary,
.pp-app .btn-secondary,
.pp-app .btn-sm {
    border-radius: 999px;
    font-family: inherit;
}

.pp-app .btn-primary {
    border: 1.5px solid var(--navy);
    background: transparent;
    color: var(--navy);
    font-weight: 700;
}

/* Gumbi v glavah so navadni gumbi — posebne različice za temno podlago
   so odpadle skupaj s temno vrstico. */

.pp-app .btn-primary:hover {
    background: var(--navy);
    color: var(--white);
}

.pp-app .btn-secondary {
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--navy);
}

.pp-app .btn-secondary:hover {
    background: rgba(var(--sand-rgb), 0.32);
}

.pp-app .pp-table {
    overflow: hidden;
}

.pp-app .pp-table th,
.pp-app .pp-table td {
    border-bottom-color: rgba(var(--navy-rgb), 0.07);
}

/* Isti nevtralni poudarek vrstice kot v arhitektovih tabelah — brez peščene
   barve, ki je izstopala iz preostanka platforme. */
.pp-app .pp-table tr:hover td {
    background: rgba(var(--navy-rgb), 0.03);
}

/* Osebna čakalna vrsta ostane prepoznavna tudi med vsemi projekti. */
.pp-app .pp-table tr.row-action td { background: rgba(var(--sand-rgb), 0.3); }
.pp-app .pp-table tr.row-action:hover td { background: rgba(var(--sand-rgb), 0.46); }
.pp-app .pp-table tr.row-action td:first-child { box-shadow: inset 3px 0 var(--vivid); }

/* Pravkar oddan projekt se za nekaj sekund poudari (PpDashboard.markNew),
   da ga uporabnik po zaprtju obrazca najde v seznamu. */
.pp-app .pp-table tr.row-new td { background: rgba(var(--teal-rgb), 0.1); }
.pp-app .pp-table tr.row-new td:first-child { box-shadow: inset 3px 0 var(--teal); }

.pp-app .dash-notice { margin-bottom: 16px; }

.pp-app .status-dot {
    box-shadow: 0 0 0 4px rgba(26, 110, 122, 0.07);
}

.pp-app .modal-overlay {
    background: rgba(var(--navy-rgb), 0.38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.pp-app .modal {
    padding: 32px;
}

.pp-app .modal h2 {
    color: var(--navy);
    font-size: 20px;
    font-weight: 700;
}

.pp-app .file-area {
    border-color: var(--line);
    border-radius: 8px;
    background: rgba(249, 247, 244, 0.56);
}

.pp-app .file-area:hover,
.pp-app .file-area.drag-over {
    border-color: rgba(26, 110, 122, 0.38);
    background: rgba(26, 110, 122, 0.06);
}

.pp-app .review-map-wrap,
.pp-app .review-preview,
.pp-app .review-dgd {
    overflow: hidden;
}

/* Ploskev koraka Odločitve se ne sme rezati — meniji spustnih seznamov se
   morajo preliti čezenj. Zavihkovna pasica ima zato svoj polmer. */
.pp-app .review-params {
    overflow: visible;
}

.pp-app #review-map {
    height: 462px;
}

/* Karta v ločenem oknu: v novo okno se preseli ista ploskev (karta + stolpec
   ob njej), zato tam samo odpade ovoj strani — zavzame celo okno. Ko je karta
   v koraku brez karte skrita, ostane v oknu samo pojasnilo. */
.pp-app.pp-map-window {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--app-bg);
}

.pp-app.pp-map-window .review-map-wrap {
    height: 100vh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.pp-app.pp-map-window .map-pane,
.pp-app.pp-map-window #review-map {
    height: 100%;
}

.pp-app.pp-map-window .map-window-note {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    padding: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

.pp-app.pp-map-window .review-map-wrap:not(.hidden) ~ .map-window-note {
    display: none;
}

/* Zadnje polje se ne sme dotikati roba ploskve — enak spodnji zrak kot na
   ploskvi koraka Odločitve (.review-params). */
.pp-app .dgd-col {
 padding: 20px 24px;
    padding: 20px 20px 32px;
}

/* Tipografija in ikona naslova sekcije sta enotni (§ zgoraj) — tu samo barva. */
.pp-app .params-col-title {
 display: flex; align-items: center; gap: 9px;
    min-height: 29px; margin-bottom: 16px; font-size: 15px; font-weight: 800;
    letter-spacing: 0; color: var(--text);
    color: var(--navy);
}

.pp-app .settings-cn-card,
.pp-app .settings-tag {
    border-color: var(--line);
    border-radius: 8px;
    background: rgba(249, 247, 244, 0.5);
}

.pp-app .settings-section-head,
.pp-app .settings-item,
.pp-app .spin {
    border-color: rgba(26, 110, 122, 0.16);
    border-top-color: var(--teal);
}

@media (max-width: 980px) {
    .pp-app .dash-stats,
    .pp-app .review-params,
    .pp-app .review-dgd,
    .pp-app .settings-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 640px) {
    .pp-app .dash-header,
    .pp-app .review-header,
    .pp-app .settings-header,
    .pp-app .dash-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .pp-app .dash-search,
    .pp-app .dash-sort {
        flex: 0 0 auto;
        width: 100%;
        margin-left: 0;
    }

    .pp-app .pp-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pp-app .pp-table thead,
    .pp-app .pp-table tbody {
        display: table;
        min-width: 760px;
        width: 100%;
    }
}

/* Nastavitve v načinu za branje (podpisniki brez admin vloge): spustni
   seznam ostane viden kot vrednost, a ni klikljiv; gumbe dejanj skrije JS. */
.pp-app .pp-settings-ro .ui-select { pointer-events: none; opacity: 0.75; }

.pp-app .pp-settings-ro input:disabled,
.pp-app .pp-settings-ro textarea:disabled { background: transparent; color: var(--muted); }

/* ── §11.x PRIJAVA — lastna prijavna stran orodja (login.html) ───────
   Sredinska kartica z znakom in naslovom nad obrazcem; polja in gumb so
   deljeni `.signup-quota-*` iz §6, tu je samo postavitev. */
.pp-app .pp-login { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--white); }

.pp-app .pp-login-card { width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px;
  box-shadow: var(--shadow); }

.pp-app .pp-login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-bottom: 24px; }

.pp-app .pp-login-logo { width: 44px; height: 44px; }
.pp-app .pp-login-logo rect { fill: var(--navy); }
.pp-app .pp-login-logo path { fill: var(--surface); }

.pp-app .pp-login-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.4px;
  color: var(--navy); }

.pp-app .pp-login-denied { display: flex; flex-direction: column; gap: 12px; }
.pp-app .pp-login-denied .signup-quota-copy { margin: 0; text-align: center; }

/* Obrazec sam poskrbi za razmike (flex gap), zato spodnji rob odpade. */
.pp-app .pp-login-form .signup-quota-copy { margin: 0; }

/* ── §11.x PRIPOMBE — pregledovalčeve pripombe na dokument ───────────
   Blok stoji pod predogledom na koraku Dokument (comments.js). Pripomba je
   pogovor ob dokumentu, ne obrazec: kartice so ploščate, brez okvirja, ločene
   s črto — enako kot podpisna veriga nad njimi. */

.pp-app .pripombe { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }

.pp-app .pripombe.hidden { display: none; }

.pp-app .pripombe-head { display: flex; align-items: center; gap: 12px; }

.pp-app .pripombe-head .dblock-title { margin: 0; }

/* Število odprtih je opozorilo, ne okras — ista jantarna kot statusna pika. */
.pp-app .pripombe-count { font-size: 12px; font-weight: 700; color: #b45309;
  background: rgba(249, 115, 22, 0.12); padding: 3px 9px; border-radius: 999px; }

.pp-app .pripombe-list { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }

.pp-app .pripombe-empty { padding: 18px 0; font-size: 13px; color: var(--muted); }

.pp-app .pripomba { padding: 12px 0; border-bottom: 1px solid var(--line); }

.pp-app .pripomba:last-child { border-bottom: none; }

/* Odpravljena pripomba ostane berljiva, a se umakne v ozadje. */
.pp-app .pripomba-resolved { opacity: 0.6; }

.pp-app .pripomba-head { display: flex; align-items: baseline; gap: 10px; }

.pp-app .pripomba-author { font-size: 13px; font-weight: 700; color: var(--text); }

.pp-app .pripomba-time { font-size: 11px; color: var(--muted); }

.pp-app .pripomba-body { margin-top: 5px; font-size: 13px; line-height: 1.55;
  color: var(--text); white-space: pre-wrap; }

.pp-app .pripomba-foot { display: flex; align-items: center; gap: 12px; margin-top: 9px; }

.pp-app .pripomba-meta { font-size: 11px; color: var(--muted); }

.pp-app .pripomba-btn { padding: 5px 12px; font-size: 12px; }

/* Besedilni gumb za drugotna dejanja (izbriši, pokaži odpravljene). */
.pp-app .pripomba-link { border: none; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
  text-decoration: underline; }

.pp-app .pripomba-link:hover { color: var(--text); }

.pp-app .pripombe-form { display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; margin-top: 18px; }

.pp-app .pripombe-input { width: 100%; padding: 10px 12px; font-family: inherit;
  font-size: 13px; line-height: 1.5; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px; resize: vertical; }

.pp-app .pripombe-input:focus { outline: none; border-color: var(--navy); }

.pp-app .pripombe-error:not(:empty) { margin-top: 10px; font-size: 12px; color: var(--red); }

/* Zadržano podpisovanje — pojasnilo na mestu, kjer bi bil gumb (korak Podpis). */
.pp-app .sign-hold { display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  padding: 12px 14px; font-size: 13px; color: #b45309;
  background: rgba(249, 115, 22, 0.1); border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: 8px; }

.pp-app .sign-hold svg { width: 16px; height: 16px; flex-shrink: 0; }

.pp-app .sign-hold .pripomba-link { margin-left: auto; color: #b45309; }

/* Zaklenjen projekt — pas nad pregledom; zaklep je dejstvo, ne napaka,
   zato je nevtralno siv in ne rdeč. */
.pp-app .locked-box { display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
  padding: 12px 16px; font-size: 13px; color: var(--text);
  background: rgba(var(--navy-rgb), 0.05); border: 1px solid var(--line); border-radius: 8px; }

.pp-app .locked-box.hidden { display: none; }

.pp-app .locked-box svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }

/* Zaklenjen projekt nima česa potrjevati — vrstica z gumbi odpade. */
.pp-app .step-footer.is-locked { display: none; }

/* ── §11.x ASISTENT — odstranljiv blok ───────────────────────────────
   Sloge asistenta (app/project_conditions/assistant.js) drži skupaj en
   sam blok, ker je modul zasnovan kot odstranljiva celota: izbris tega
   odseka in datoteke .js odstrani vmesnik v celoti. Zavihki so lastni in
   ne .dtab — tisti so odmerjeni za polno širino panela in bi v boxu
   380 px prelivali. */
/* Ob desnem robu, tik nad gumbom dev-annotatorja (right/bottom 16px, 44px) —
   ta kot je že zaseden, zato asistent stoji nad njim in ne ob njem. */
.pp-app .pp-asis { position: fixed; right: 16px; bottom: 72px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

.pp-app .pp-asis-fab { order: 2; width: 52px; height: 52px; border-radius: 50%;
  border: none; background: var(--navy); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(var(--navy-rgb), 0.32); transition: transform 0.12s ease; }
.pp-app .pp-asis-fab:hover { transform: translateY(-2px); }
.pp-app .pp-asis-fab svg { width: 22px; height: 22px; }

/* Višino omeji viewport in ne odstotek: panel stoji 72 px od dna, zato je
   rezerva odšteta, sicer bi na nizkem zaslonu ušel čez vrh. */
.pp-app .pp-asis-panel { order: 1; width: 380px; max-width: calc(100vw - 48px);
  height: min(calc(100vh - 120px), 760px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18); overflow: hidden; }
.pp-app .pp-asis:not(.pp-asis-open) .pp-asis-panel { display: none; }

.pp-app .pp-asis-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pp-app .pp-asis-title { font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--text); }
.pp-app .pp-asis-close { border: none; background: none; cursor: pointer;
  color: var(--muted); display: flex; padding: 2px; }
.pp-app .pp-asis-close svg { width: 16px; height: 16px; }

.pp-app .pp-asis-tabs { display: flex; gap: 4px; padding: 8px 12px 0; }
.pp-app .pp-asis-tab { flex: 1; padding: 7px 10px; font-size: 12px; font-weight: 700;
  font-family: inherit; border: 1px solid var(--line); border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer; }
.pp-app .pp-asis-tab-on { background: var(--navy); border-color: var(--navy); color: #fff; }

.pp-app .pp-asis-body { flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px; }
.pp-app .pp-asis-hint { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0; }

.pp-app .pp-asis-msg { font-size: 13px; line-height: 1.55; padding: 8px 11px;
  border-radius: 8px; }
.pp-app .pp-asis-msg-user { align-self: flex-end; max-width: 88%; white-space: pre-wrap;
  background: rgba(var(--navy-rgb), 0.08); color: var(--text); }
/* Odgovor je sestavljen iz blokov (markdownInto), zato brez pre-wrap. */
.pp-app .pp-asis-msg-ai { background: var(--white); color: var(--text); }

.pp-app .pp-asis-loading { padding: 4px 2px; font-size: 12px; }

.pp-app .pp-asis-md-p { margin: 0 0 8px; }
.pp-app .pp-asis-md-p:last-child { margin-bottom: 0; }
.pp-app .pp-asis-md-list { margin: 0 0 8px; padding-left: 18px; }
.pp-app .pp-asis-md-list:last-child { margin-bottom: 0; }
.pp-app .pp-asis-md-list li { margin-bottom: 3px; }
.pp-app .pp-asis-msg-ai strong,
.pp-app .pp-asis-advice strong,
.pp-app .pp-asis-sum strong { font-weight: 700; }
.pp-app .pp-asis-msg-ai code,
.pp-app .pp-asis-advice code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em; padding: 1px 4px; border-radius: 4px;
  background: rgba(var(--navy-rgb), 0.07); }

.pp-app .pp-asis-doc { display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 8px; background: var(--white); font-size: 12.5px; }
.pp-app .pp-asis-doc-label { font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--muted); }

.pp-app .pp-asis-warn { font-size: 12px; line-height: 1.5; padding: 8px 10px;
  border-radius: 8px; border: 1px solid rgba(var(--orange-rgb), 0.45);
  background: rgba(var(--orange-rgb), 0.10); color: var(--text); }

/* Razmike znotraj odgovora določa .pp-asis-md-p, tu samo okvir in tipografija. */
.pp-app .pp-asis-advice { padding: 9px 11px; border-radius: 8px; font-size: 12.5px;
  line-height: 1.55; border: 1px solid var(--line); background: var(--white); }
.pp-app .pp-asis-advice-label { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--muted); margin-bottom: 4px; }
.pp-app .pp-asis-sum { font-size: 12.5px; line-height: 1.55; color: var(--text); }

.pp-app .pp-asis-op { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px;
  display: flex; flex-direction: column; gap: 6px; }
.pp-app .pp-asis-op-head { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.pp-app .pp-asis-op-akcija { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px; color: var(--navy); }
.pp-app .pp-asis-op-sek { font-size: 11px; color: var(--muted); }
.pp-app .pp-asis-op-sum { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.pp-app .pp-asis-prej,
.pp-app .pp-asis-potem { font-size: 12px; line-height: 1.5; padding: 6px 8px; border-radius: 6px; }
.pp-app .pp-asis-prej { background: rgba(var(--red-rgb), 0.08); text-decoration: line-through;
  color: var(--muted); }
.pp-app .pp-asis-potem { background: rgba(var(--vivid-rgb), 0.14); color: var(--text); }

.pp-app .pp-asis-actions { display: flex; gap: 8px; }
.pp-app .pp-asis-actions button { flex: 1; padding: 7px 10px; font-size: 12.5px; }

.pp-app .pp-asis-applied { border-top: 1px solid var(--line); padding-top: 10px;
  display: flex; flex-direction: column; gap: 6px; }
.pp-app .pp-asis-applied-title { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--muted); }
.pp-app .pp-asis-edit { display: flex; align-items: flex-start; gap: 8px; }
.pp-app .pp-asis-edit-txt { flex: 1; font-size: 12px; line-height: 1.5; }
.pp-app .pp-asis-orphan { margin-left: 6px; font-size: 11px; color: var(--muted);
  font-style: italic; }
.pp-app .pp-asis-undo { border: none; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 11.5px; color: var(--muted); text-decoration: underline; }

.pp-app .pp-asis-composer { display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px; border-top: 1px solid var(--line); }
.pp-app .pp-asis-input { flex: 1; resize: none; font-family: inherit; font-size: 13px;
  line-height: 1.5; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text); }
.pp-app .pp-asis-send { padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }

@media (max-width: 520px) {
  .pp-app .pp-asis { right: 14px; bottom: 68px; }
  .pp-app .pp-asis-panel { width: calc(100vw - 28px); }
}

/* ═══════════════════════════════════════════════════════════════════
   §13  ACCOUNT (.account-app) — profile, subscription, invite-request,
   and the auth-callback loading screen. Profile is the logged-in
   account settings page; subscription/invite are public lander-style
   pages reached before sign-in, all now sharing the app-wide theme
   instead of their own hardcoded-hex copy of it.
   ═══════════════════════════════════════════════════════════════════ */

.account-app {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── profile.html ──────────────────────────────────────────────── */

/* ── Shell ─────────────────────────────────────────────── */

.account-app .shell {
      min-height: 100vh;
      background:
        linear-gradient(180deg, rgba(249,247,244,0.92), rgba(255,255,255,0.72)),
        var(--white);
      padding: 32px 24px 72px;
    }

/* ── Main ──────────────────────────────────────────────── */

.account-app .main { width: min(1080px, 100%); min-width: 0; margin: 0 auto; }

.account-app .account-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 34px;
    }

.account-app .head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

.account-app .top-brand-copy { display: grid; gap: 2px; }

.account-app .top-brand-title { font-size: 17px; font-weight: 800; line-height: 1.05; }

.account-app .top-brand-sub { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.2; }

.account-app .back-button,
.account-app .signout-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      border: 1.5px solid var(--line);
      border-radius: 999px;
      background: #fff;
      padding: 0 15px;
      color: var(--navy);
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }

.account-app .back-button {
      width: 36px;
      min-height: 36px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      padding: 0;
      color: var(--navy);
      font-size: 22px;
      line-height: 1;
    }

.account-app .back-button:hover { background: rgba(31,45,37,0.06); }

.account-app .gift-button,
.account-app .signout-button {
      position: relative;
    }

.account-app .signout-button {
      width: 38px;
      min-height: 38px;
      border-color: var(--ink);
      border-radius: 50%;
      background: var(--ink);
      color: #fff;
      padding: 0;
    }

.account-app .gift-button svg,
.account-app .signout-button svg {
      width: 18px;
      height: 18px;
      stroke-width: 1.7;
    }

.account-app .signout-button:hover,
.account-app .signout-button:focus-visible {
      border-color: var(--ink);
      background: var(--ink);
      color: #fff;
    }

.account-app .gift-button::after,
.account-app .signout-button::after {
      content: attr(data-tooltip);
      position: absolute;
      right: 0;
      bottom: calc(100% + 8px);
      z-index: 6;
      display: none;
      min-width: max-content;
      border-radius: 6px;
      background: var(--ink);
      color: #fff;
      padding: 6px 8px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      box-shadow: 0 8px 18px rgba(17,25,34,0.16);
    }

.account-app .gift-button:hover::after,
.account-app .gift-button:focus-visible::after,
.account-app .signout-button:hover::after,
.account-app .signout-button:focus-visible::after {
      display: block;
    }

.account-app .section { margin-bottom: 40px; scroll-margin-top: 28px; }

.account-app .section-head { margin-bottom: 16px; }

.account-app .section-title {
      margin: 0;
      color: var(--navy);
      font-size: 20px; font-weight: 600; line-height: 1.2;
    }

.account-app .section-sub { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.account-app .panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 24px;
    }

.account-app .panel + .panel { margin-top: 16px; }

/* ── Identity ──────────────────────────────────────────── */

.account-app .identity {
      position: relative;
      display: flex; align-items: center; gap: 18px;
      padding-bottom: 22px; margin-bottom: 4px;
      border-bottom: 1px solid rgba(28,43,58,0.07);
      flex-wrap: wrap;
    }

.account-app .avatar {
      display: inline-flex; align-items: center; justify-content: center;
      width: 72px; height: 72px;
      border-radius: 50%; overflow: hidden;
      background: var(--navy); color: #fff;
      font-size: 24px; font-weight: 700;
      flex: 0 0 auto;
    }

.account-app .avatar img { width: 100%; height: 100%; object-fit: cover; }

.account-app .identity-copy { min-width: 0; }

.account-app .identity-name { margin: 0 0 4px; color: var(--navy); font-size: 23px; font-weight: 600; line-height: 1.1; }

.account-app .identity-email { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }

.account-app .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.account-app .identity-actions {
      position: relative;
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }

.account-app .gift-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border: 1.5px solid var(--line);
      border-radius: 50%;
      background: #fff;
      color: var(--navy);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }

.account-app .gift-button:hover,
.account-app .gift-button[aria-expanded="true"] {
      border-color: rgba(26,110,122,0.36);
      background: rgba(26,110,122,0.07);
      color: var(--teal);
    }

.account-app .redeem-popover {
      position: absolute;
      top: calc(100% + 12px);
      right: calc(100% - 43px);
      z-index: 4;
      width: min(360px, calc(100vw - 36px));
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 18px 42px rgba(17,25,34,0.12);
      padding: 16px 16px 20px;
    }

.account-app .redeem-popover::before,
.account-app .redeem-popover::after {
      content: "";
      position: absolute;
      left: calc(100% - 24px);
      width: 0;
      height: 0;
      transform: translateX(-50%);
    }

.account-app .redeem-popover::before {
      top: -9px;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-bottom: 9px solid var(--line);
    }

.account-app .redeem-popover::after {
      top: -8px;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid #fff;
    }

.account-app .redeem-popover-head {
      margin-bottom: 14px;
    }

.account-app .redeem-popover-title {
      margin: 0;
      color: var(--navy);
      font-size: 15px;
      font-weight: 800;
      line-height: 1.2;
    }

.account-app .redeem-popover-desc {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

.account-app .fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 24px;
    }

.account-app .field {
      min-width: 0;
      padding: 16px 0;
      border-bottom: 1px solid rgba(28,43,58,0.07);
    }

.account-app .field:last-child,
.account-app .field:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

.account-app .field span {
      display: block; margin-bottom: 6px;
      color: var(--muted); font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
    }

.account-app .field strong {
      display: block; min-height: 20px;
      overflow-wrap: anywhere;
      color: var(--text); font-size: 15px; font-weight: 600;
    }

.account-app .field code {
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
      font-size: 12.5px; font-weight: 500; color: var(--muted);
    }

/* ── Subscription ──────────────────────────────────────── */

.account-app .subscription-box {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 20px;
    }

.account-app .metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
    }

.account-app .metric { min-width: 0; padding: 0 18px; border-left: 1px solid rgba(28,43,58,0.08); }

.account-app .metric:first-child { padding-left: 0; border-left: 0; }

.account-app .metric:last-child { padding-right: 0; }

.account-app .metric span {
      display: block; margin-bottom: 8px;
      color: var(--muted); font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em;
    }

.account-app .metric strong { display: block; color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1.1; }

.account-app .metric-reset { font-size: 18px; }

.account-app .metric .metric-sub { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 500; }

.account-app .usage-inline {
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid rgba(28,43,58,0.08);
    }

.account-app .usage-head {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 16px; margin-bottom: 8px;
    }

.account-app .usage-head h3 { margin: 0; color: var(--navy); font-size: 14px; font-weight: 600; }

.account-app .usage-head p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }

.account-app .track { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(31,45,37,0.08); }

.account-app .bar {
      width: 0; height: 100%; border-radius: inherit;
      background: linear-gradient(90deg, var(--vivid), var(--sand));
      transition: width 0.35s ease;
    }

/* ── Token prices ──────────────────────────────────────── */

/* Zgodovina — ista okvirjena lista kot cenik, le da so vrstice povezave na
   shranjen rezultat. Vsak vpis ima svoj gumb za odstranitev; brisanje je
   edino, kar tu kaj spremeni, saj je ogled brezplačen. */

.account-app .history-tabs { display: flex; gap: 8px; margin-bottom: 12px; }

.account-app .history-tab {
      padding: 6px 14px;
      background: none;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

.account-app .history-tab:hover { border-color: var(--navy); color: var(--navy); }

.account-app .history-tab.is-active {
      background: var(--navy);
      border-color: var(--navy);
      color: var(--white);
    }

.account-app .history-list {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }

.account-app .history-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 4px 12px 4px 0;
      border-top: 1px solid rgba(28, 43, 58, 0.08);
    }

.account-app .history-item:first-child { border-top: 0; }

.account-app .history-item:hover { background: rgba(31, 45, 37, 0.03); }

.account-app .history-item-main {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
      padding: 14px 18px;
      text-decoration: none;
    }

.account-app .history-item-title {
      overflow: hidden;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--navy);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

.account-app .history-item-meta { font-size: 11px; color: var(--muted); }

.account-app .history-item-remove {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      padding: 0;
      background: none;
      border: 0;
      border-radius: 8px;
      color: var(--muted);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

.account-app .history-item-remove:hover { background: rgba(var(--red-rgb), 0.1); color: var(--red); }

.account-app .history-item-remove:disabled { opacity: 0.4; cursor: default; }

.account-app .history-item-remove svg { width: 15px; height: 15px; }

.account-app .history-empty {
      padding: 28px 18px;
      font-size: 12px;
      color: var(--muted);
      text-align: center;
    }

.account-app .history-more {
      display: block;
      width: 100%;
      margin-top: 10px;
      padding: 9px;
      background: none;
      border: 1px solid var(--line);
      border-radius: 8px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      color: var(--navy);
      cursor: pointer;
    }

.account-app .history-more:hover { background: var(--line); }

.account-app .price-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }

.account-app .price-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 18px;
      min-width: 0;
      padding: 18px;
      border-left: 1px solid rgba(28,43,58,0.08);
    }

.account-app .price-item:first-child { border-left: 0; }

.account-app .price-main {
      display: grid;
      grid-template-columns: 38px minmax(112px, 156px);
      align-items: start;
      gap: 12px;
      min-width: 0;
    }

.account-app .price-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(31,45,37,0.12);
      border-radius: 8px;
      color: var(--navy);
    }

.account-app .price-item:nth-child(1) .price-icon {
      border-color: rgba(26,110,122,0.16);
      background: rgba(26,110,122,0.08);
      color: var(--teal);
    }

.account-app .price-item:nth-child(2) .price-icon {
      border-color: rgba(111,128,88,0.18);
      background: rgba(111,128,88,0.10);
      color: var(--vivid);
    }

.account-app .price-item:nth-child(3) .price-icon {
      border-color: rgba(196,168,130,0.24);
      background: rgba(196,168,130,0.14);
      color: var(--orange);
    }

.account-app .price-icon svg {
      width: 20px;
      height: 20px;
      stroke-width: 1.8;
    }

.account-app .price-copy { min-width: 0; }

.account-app .price-copy h3 {
      margin: 0;
      color: var(--navy);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.2;
    }

.account-app .price-copy p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.35;
      max-width: 156px;
    }

.account-app .price-value {
      color: var(--ink);
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

.account-app .price-value span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

/* ── Redeem ────────────────────────────────────────────── */

.account-app .redeem { margin: 0; }

.account-app .redeem-field {
      position: relative;
      display: flex;
      align-items: center;
    }

.account-app .redeem input {
      width: 100%;
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 12px 52px 12px 15px;
      color: var(--text);
      font: inherit; font-size: 14px;
      letter-spacing: 0;
    }

.account-app .redeem input:focus { outline: none; border-color: rgba(111,128,88,0.55); box-shadow: 0 0 0 3px rgba(111,128,88,0.13); }

.account-app .redeem button {
      position: absolute;
      right: 5px;
      top: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      min-height: 34px;
      border: 1.5px solid var(--navy);
      border-radius: 50%;
      background: var(--navy);
      color: #fff;
      padding: 0;
      cursor: pointer;
      transform: translateY(-50%);
      transition: background 0.15s, border-color 0.15s;
    }

.account-app .redeem button svg {
      width: 17px;
      height: 17px;
      stroke-width: 2.4;
    }

.account-app .redeem button:hover { background: var(--navy-2); border-color: var(--navy-2); }

.account-app .redeem button:disabled { opacity: 0.5; cursor: default; }

.account-app .redeem-msg { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; min-height: 0; }

.account-app .redeem-msg:not(:empty) { margin-top: 8px; }

.account-app .redeem-msg.ok { color: var(--vivid); }

.account-app .redeem-msg.err { color: var(--red); }

/* ── Pricing ───────────────────────────────────────────── */

.account-app .billing-table-shell {
      min-height: 280px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 18px;
      overflow-x: auto;
      overflow-y: hidden;
    }

.account-app .billing-table-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 240px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
      text-align: center;
    }

.account-app .billing-table-shell .cl-pricingTable-root {
      width: 100%;
      min-width: 980px;
    }

.account-app .billing-table-shell .cl-pricingTable {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
      gap: 14px !important;
      align-items: stretch !important;
      width: 100% !important;
    }

.account-app .billing-table-shell .cl-pricingTableCard {
      min-width: 0 !important;
      border: 1px solid var(--line) !important;
      border-radius: 8px !important;
      background: #fff !important;
      box-shadow: none !important;
      overflow: hidden !important;
    }

.account-app .billing-table-shell .cl-pricingTableCard:has(.cl-badge) {
      border-color: rgba(26,110,122,0.42) !important;
      box-shadow: inset 0 0 0 1px rgba(26,110,122,0.18) !important;
    }

.account-app .billing-table-shell .cl-pricingTableCardHeader,
.account-app .billing-table-shell .cl-pricingTableCardBody {
      padding: 18px !important;
    }

.account-app .billing-table-shell .cl-pricingTableCardTitle {
      color: var(--navy) !important;
      font-family: inherit !important;
      font-size: 18px !important;
      font-weight: 700 !important;
      line-height: 1.2 !important;
    }

.account-app .billing-table-shell .cl-pricingTableCardDescription,
.account-app .billing-table-shell .cl-pricingTableCardFeePeriodNotice {
      color: var(--muted) !important;
      font-family: inherit !important;
      font-size: 12px !important;
      line-height: 1.4 !important;
    }

.account-app .billing-table-shell .billing-plan-copy {
      display: block;
    }

.account-app .billing-table-shell .billing-plan-allowance {
      display: block;
      margin-top: 10px;
      color: var(--navy);
      font-size: 15px;
      font-weight: 800;
      line-height: 1.25;
    }

.account-app .billing-table-shell .cl-pricingTableCardFee {
      color: var(--ink) !important;
      font-family: inherit !important;
      font-size: 28px !important;
      font-weight: 800 !important;
      line-height: 1.1 !important;
    }

.account-app .billing-table-shell .cl-button {
      min-height: 38px !important;
      border: 1.5px solid var(--navy) !important;
      border-radius: 999px !important;
      background: var(--navy) !important;
      color: #fff !important;
      font-family: inherit !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      box-shadow: none !important;
    }

.account-app .billing-table-shell .cl-button:hover {
      background: var(--navy-2) !important;
    }

.account-app .billing-table-shell .cl-badge {
      border-radius: 999px !important;
      background: rgba(26,110,122,0.09) !important;
      color: var(--teal) !important;
      font-family: inherit !important;
      font-size: 11px !important;
      font-weight: 700 !important;
    }

.account-app .hidden { display: none !important; }

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 960px) {
  .account-app .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-app .metric:nth-child(3) { padding-left: 0; border-left: 0; }
  .account-app .metric:nth-child(n + 3) { padding-top: 16px; margin-top: 16px; border-top: 1px solid rgba(28,43,58,0.08); }
  .account-app .price-list { grid-template-columns: 1fr; }
  .account-app .price-item { border-left: 0; border-top: 1px solid rgba(28,43,58,0.08); }
  .account-app .price-item:first-child { border-top: 0; }
  .account-app .price-main { grid-template-columns: 38px minmax(0, 1fr); }
  .account-app .price-copy p { max-width: none; }
}

@media (max-width: 560px) {
  .account-app .shell { gap: 14px; padding: 14px; }
  .account-app .account-head { margin-bottom: 24px; }
  .account-app .top-brand-title { font-size: 16px; }
  .account-app .fields { grid-template-columns: 1fr; }
  .account-app .field,
.account-app .field:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid rgba(28,43,58,0.07); }
  .account-app .field:last-child { border-bottom: 0; }
  .account-app .metrics { grid-template-columns: 1fr; }
  .account-app .metric,
.account-app .metric:first-child,
.account-app .metric:last-child {
        padding: 14px 0;
        border-left: 0;
        border-top: 1px solid rgba(28,43,58,0.08);
      }
  .account-app .metric:first-child {
        padding-top: 0;
        border-top: 0;
      }
  .account-app .metric:nth-child(n + 3) { margin-top: 0; }
  .account-app .panel { padding: 18px; }
  .account-app .subscription-box { padding: 18px; }
  .account-app .identity { align-items: flex-start; }
  .account-app .identity-actions { width: auto; margin-left: 90px; justify-content: flex-start; }
  .account-app .redeem-popover {
        right: auto;
        left: -90px;
        width: min(330px, calc(100vw - 36px));
        transform: none;
      }
  .account-app .redeem-popover::before,
.account-app .redeem-popover::after { left: 109px; }
  .account-app .billing-table-shell { padding: 14px; }
}

/* ── subscription.html ─────────────────────────────────────────── */

/* Inline brand mark ("A"): navy tile + light letter, inverted from the
   dark-sidebar .app-shell .brand-logo because the account nav/footer is white. */
.account-app .nav-logo-icon rect,
.account-app .footer-logo-icon rect,
.account-app .top-brand svg rect { fill: var(--navy); }

.account-app .nav-logo-icon path,
.account-app .footer-logo-icon path,
.account-app .top-brand svg path { fill: var(--surface); }

.account-app .nav-links a:hover,
.account-app .nav-links a.active { color: var(--navy); }

.account-app .billing-hero {
      position: relative;
      overflow: hidden;
      background: #fff;
      padding: 132px 24px 72px;
      text-align: center;
    }

.account-app .billing-hero::before {
      content: "";
      position: absolute;
      inset: -25%;
      background:
        radial-gradient(circle at 48% 42%, rgba(234,228,216,0.28) 0%, transparent 35%),
        radial-gradient(circle at 52% 58%, rgba(196,168,130,0.12) 0%, transparent 56%);
      pointer-events: none;
    }

.account-app .billing-hero > * { position: relative; z-index: 1; }

.account-app .billing-label {
      display: inline-block;
      margin-bottom: 18px;
      color: var(--vivid);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

.account-app .billing-sub {
      max-width: 720px;
      margin: 22px auto 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.62;
    }

.account-app main {
      width: min(1080px, calc(100vw - 48px));
      margin: 0 auto;
      padding: 70px 0 112px;
    }

.account-app .billing-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 24px;
      align-items: start;
    }

.account-app .billing-card,
.account-app .billing-aside {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

.account-app .billing-card {
      min-height: 360px;
      padding: 24px;
      box-shadow: 0 24px 70px rgba(31,45,37,0.08);
    }

.account-app .selected-plan {
      display: none;
      margin-bottom: 18px;
      border: 1px solid rgba(111,128,88,0.24);
      border-radius: 8px;
      background: rgba(111,128,88,0.08);
      padding: 14px 16px;
      color: var(--navy);
    }

.account-app .selected-plan.is-visible {
      display: block;
    }

.account-app .selected-plan strong {
      display: block;
      margin-bottom: 4px;
      font-size: 15px;
      font-weight: 700;
    }

.account-app .selected-plan span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

.account-app .billing-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 260px;
      color: var(--muted);
      font-size: 15px;
      text-align: center;
    }

.account-app .billing-aside {
      padding: 22px;
    }

.account-app .billing-aside h2 {
      margin-bottom: 12px;
      color: var(--navy);
      font-size: 18px;
      font-weight: 600;
      line-height: 1.25;
    }

.account-app .billing-aside p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.62;
    }

.account-app .billing-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 20px;
    }

.account-app .billing-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      border: 1px solid var(--navy);
      border-radius: 999px;
      padding: 0 16px;
      color: var(--navy);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      transition: background 0.15s, color 0.15s;
    }

.account-app .billing-link:hover {
      background: var(--navy);
      color: var(--white);
    }

.account-app .footer-links a:hover { color: var(--navy); }

@media (max-width: 860px) {
  .account-app .billing-layout { grid-template-columns: 1fr; }
  .account-app .billing-aside { order: -1; }
}

@media (max-width: 720px) {

  .account-app .billing-hero { padding: 112px 20px 58px; }
  
  .account-app .billing-card { padding: 18px; }
  
}

/* ── invite.html ───────────────────────────────────────────────── */

body.account-app {
      min-height: 100vh;
      font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--white);
      color: var(--text);
      -webkit-font-smoothing: antialiased;

      min-height: 100vh;
      font-family: "Outfit", -apple-system, sans-serif;
      background: var(--white);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      font-family: "Outfit", -apple-system, sans-serif;
      background: var(--white);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    
}

.account-app nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      height: 64px;
      padding: 0 48px;
      background: #fff;
      box-shadow: 0 1px 0 rgba(28,43,58,0.08);
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      height: 64px;
      padding: 0 48px;
      background: #fff;
      box-shadow: 0 1px 0 rgba(28,43,58,0.08);
    
}

.account-app .nav-logo {
 display: flex; align-items: center; gap: 10px; text-decoration: none;
 display: flex; align-items: center; gap: 10px; text-decoration: none; 
}

.account-app .nav-logo-icon {
 width: 28px; height: 28px;
 width: 28px; height: 28px; 
}

.account-app .nav-logo-text {
 color: var(--navy); font-size: 16px; font-weight: 700;
 font-size: 16px; font-weight: 700; color: var(--navy); 
}

.account-app .nav-links {
 display: flex; align-items: center; gap: 30px; list-style: none;
 display: flex; align-items: center; gap: 30px; list-style: none; 
}

.account-app .nav-links a {
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.02em;
      text-decoration: none;
      transition: color 0.15s;
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.02em;
      text-decoration: none;
      transition: color 0.15s;
    
}

.account-app .nav-links a:hover,
.account-app .nav-links a.active { color: var(--navy); }

.account-app .invite-hero {
      position: relative;
      overflow: hidden;
      background: #fff;
      padding: 132px 24px 78px;
    }

.account-app .invite-hero::before {
      content: "";
      position: absolute;
      inset: -25%;
      background:
        radial-gradient(circle at 48% 42%, rgba(234,228,216,0.28) 0%, transparent 35%),
        radial-gradient(circle at 52% 58%, rgba(196,168,130,0.12) 0%, transparent 56%);
      pointer-events: none;
    }

.account-app .invite-hero-inner {
      position: relative;
      z-index: 1;
      width: min(1080px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
      gap: 56px;
      align-items: start;
    }

.account-app .invite-label {
      display: inline-block;
      margin-bottom: 18px;
      color: var(--vivid);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

.account-app h1 {
      color: var(--navy);
      font-size: clamp(38px, 5vw, 64px);
      font-weight: 300;
      line-height: 1.08;
      letter-spacing: 0;
      max-width: 720px;
      color: var(--navy);
      font-size: clamp(38px, 5vw, 64px);
      font-weight: 300;
      line-height: 1.08;
      letter-spacing: 0;
    
}

.account-app .invite-sub {
      max-width: 660px;
      margin: 22px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.62;
    }

.account-app .invite-products {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      max-width: 680px;
      margin-top: 34px;
    }

.account-app .invite-product {
      min-height: 154px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,0.72);
    }

.account-app .invite-product strong {
      display: block;
      margin-bottom: 8px;
      color: var(--navy);
      font-size: 16px;
      line-height: 1.25;
    }

.account-app .invite-product span {
      display: block;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

.account-app .invite-product a {
      display: inline-flex;
      margin-top: 14px;
      color: var(--navy);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
    }

.account-app .invite-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 24px 70px rgba(31,45,37,0.10);
      padding: 28px;
    }

.account-app .invite-panel h2 {
      margin: 0 0 8px;
      color: var(--navy);
      font-size: 24px;
      font-weight: 500;
      line-height: 1.22;
    }

.account-app .invite-panel p {
      margin: 0 0 24px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

.account-app .invite-field {
      display: flex;
      flex-direction: column;
      gap: 7px;
      margin-bottom: 15px;
    }

.account-app .invite-field label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.10em;
      text-transform: uppercase;
    }

.account-app .invite-field input,
.account-app .invite-field select,
.account-app .invite-field textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--text);
      font: inherit;
      font-size: 14px;
      padding: 11px 12px;
    }

.account-app .invite-field textarea {
      min-height: 104px;
      resize: vertical;
    }

.account-app .invite-field input:focus,
.account-app .invite-field select:focus,
.account-app .invite-field textarea:focus {
      outline: none;
      border-color: rgba(111,128,88,0.55);
      box-shadow: 0 0 0 3px rgba(111,128,88,0.13);
    }

.account-app .invite-submit {
      width: 100%;
      min-height: 46px;
      border: 1px solid var(--navy);
      border-radius: 8px;
      background: var(--navy);
      color: var(--white);
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }

.account-app .invite-submit:hover { background: var(--navy-2); }

.account-app .invite-status {
      min-height: 21px;
      margin-top: 14px;
      color: var(--vivid);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

.account-app .invite-status.error { color: #b73a2e; }

.account-app .invite-user { margin-top: 16px; }

.account-app main {
      padding: 70px 24px 104px;
    }

.account-app .invite-note {
      width: min(800px, 100%);
      margin: 0 auto;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.7;
      text-align: center;
    }

.account-app footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 40px 48px;
      border-top: 1px solid rgba(28,43,58,0.08);
      background: #fff;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 40px 48px;
      border-top: 1px solid rgba(28,43,58,0.08);
      background: #fff;
    
}

.account-app .footer-brand {
 display: flex; align-items: center; gap: 10px;
 display: flex; align-items: center; gap: 10px; 
}

.account-app .footer-logo-icon {
 width: 24px; height: 24px;
 width: 24px; height: 24px; 
}

.account-app .footer-logo-text {
 color: var(--navy); font-size: 15px; font-weight: 700;
 color: var(--navy); font-size: 15px; font-weight: 700; 
}

.account-app .footer-links {
 display: flex; flex-wrap: wrap; gap: 22px; list-style: none;
 display: flex; flex-wrap: wrap; gap: 22px; list-style: none; 
}

.account-app .footer-links a {
      color: var(--muted);
      font-size: 13px;
      text-decoration: none;
      transition: color 0.15s;
      color: var(--muted);
      font-size: 13px;
      text-decoration: none;
      transition: color 0.15s;
    
}

.account-app .footer-links a:hover { color: var(--navy); }

.account-app .footer-copy {
 color: var(--muted); font-size: 13px;
 color: var(--muted); font-size: 13px; 
}

@media (max-width: 900px) {
  .account-app .invite-hero-inner { grid-template-columns: 1fr; gap: 38px; }
  .account-app .invite-panel { max-width: 520px; }
}

@media (max-width: 720px) {
  .account-app nav {
 padding: 0 20px;
 padding: 0 20px; 
}
  .account-app .nav-links {
 display: none;
 display: none; 
}
  .account-app .invite-hero { padding: 112px 20px 58px; }
  .account-app .invite-products { grid-template-columns: 1fr; }
  .account-app .invite-panel { padding: 22px; }
  .account-app main {
        width: min(100% - 40px, 1080px);
        padding: 48px 0 84px;
 padding: 48px 20px 84px; 
}
  .account-app footer {
 align-items: flex-start; padding: 32px 20px;
 align-items: flex-start; padding: 32px 20px; 
}
}

/* ═══════════════════════════════════════════════════════════════════
   §12  ADMIN (.admin-app) — the internal dashboard: people and their
   profiles, the query log with answers, offices, waitlist, billing and
   system state (/admin, /admin/opn).

   The frame is the shared §5 .app-shell (dark sidebar with grouped nav),
   cards are §5 .panel, numbers §5 .stat-card, tables §5 .table, labels §5
   .badge/.tag, buttons §4 .btn. What lives here is admin-only: the view
   header, toolbars, expandable query rows with rendered answers, the
   profile page, and the narrow-screen drawer and stacked tables.
   ═══════════════════════════════════════════════════════════════════ */

body.admin-app {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
}

.admin-app .hidden {
  display: none !important;
}

/* Shell: brand row carries the drawer button, shown only when narrow. */

.admin-app .side-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-app .side-top .brand {
  margin-bottom: 0;
}

.admin-app .side-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(249, 247, 244, 0.16);
  border-radius: 9px;
  background: transparent;
  color: var(--side-fg);
  cursor: pointer;
}

.admin-app .side-menu-btn svg {
  width: 20px;
  height: 20px;
}

.admin-app .nav-stage {
  text-decoration: none;
}

.admin-app .admin-nav-count {
  color: rgba(249, 247, 244, 0.45);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-app .nav-stage.active .admin-nav-count {
  color: var(--muted);
}

/* View header — navy icon tile + title, like the PP and architect
   dashboards (.pp-app .dash-title). */

.admin-app .admin-view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.admin-app .admin-view-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.admin-app .admin-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--navy);
  color: var(--surface);
}

.admin-app .admin-title-icon svg {
  width: 20px;
  height: 20px;
}

.admin-app .admin-title-icon-lg {
  width: 64px;
  height: 64px;
  border-radius: 14px;
}

.admin-app .admin-title-icon-lg svg {
  width: 28px;
  height: 28px;
}

.admin-app .admin-view-head h1 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

.admin-app .admin-view-sub {
  max-width: 680px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.admin-app .admin-view-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
}

/* States and small text */

.admin-app .admin-state {
  padding: 56px 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.admin-app .admin-empty {
  padding: 22px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.admin-app .admin-error {
  color: var(--red);
}

.admin-app .admin-muted {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.admin-app .admin-mono,
.admin-app td.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.admin-app .admin-nowrap {
  white-space: nowrap;
}

.admin-app .admin-neg {
  color: var(--red);
}

.admin-app .admin-offscreen {
  position: fixed;
  top: 0;
  left: -9999px;
  opacity: 0;
}

/* Grids */

.admin-app .admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.admin-app .admin-stats .stat-value {
  overflow: hidden;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-app .admin-stat-sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.admin-app .admin-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.admin-app .admin-grid-2 > .admin-card {
  margin-bottom: 0;
}

/* Cards: §5 .panel with a title row */

.admin-app .admin-card {
  min-width: 0;
  margin-bottom: 20px;
}

.admin-app .admin-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.admin-app .admin-card-head h2 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.admin-app .admin-card h3,
.admin-app .admin-subhead {
  margin: 18px 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-app .admin-card-head + h3 {
  margin-top: 0;
}

.admin-app .admin-card-link {
  margin-left: auto;
  color: var(--teal);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.admin-app .admin-card-link:hover {
  text-decoration: underline;
}

.admin-app .admin-count {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  background: rgba(var(--navy-rgb), 0.06);
  color: var(--muted);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.admin-app .admin-count:empty {
  display: none;
}

/* Toolbar: search + segmented filter + count */

.admin-app .admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 14px;
}

.admin-app .admin-toolbar .admin-count {
  margin-left: auto;
}

.admin-app .admin-search,
.admin-app .admin-number {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.admin-app .admin-search {
  flex: 1 1 260px;
  min-width: 0;
  padding: 0 12px;
}

.admin-app .admin-card > .admin-search {
  width: 100%;
  margin-bottom: 10px;
}

.admin-app .admin-number {
  width: 120px;
  padding: 0 10px;
  font-weight: 700;
  text-align: right;
}

.admin-app .admin-search:focus,
.admin-app .admin-number:focus {
  border-color: rgba(var(--vivid-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--vivid-rgb), 0.13);
}

.admin-app .admin-segmented {
  display: inline-flex;
  gap: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(var(--navy-rgb), 0.035);
  padding: 3px;
}

.admin-app .admin-segmented button {
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.admin-app .admin-segmented button:hover {
  color: var(--navy);
}

.admin-app .admin-segmented button.active {
  background: var(--surface);
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(var(--navy-rgb), 0.12);
}

.admin-app .admin-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.admin-app .admin-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

.admin-app .admin-filter {
  display: grid;
  gap: 5px;
  min-width: 190px;
}

/* Tables: §5 .table in a scroll wrapper (stacked into cards when narrow) */

.admin-app .admin-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.admin-app .admin-table {
  min-width: 0;
  font-size: 13px;
}

.admin-app .admin-table th,
.admin-app .admin-table td {
  padding: 11px 10px;
  vertical-align: top;
}

.admin-app .admin-table th:first-child,
.admin-app .admin-table td:first-child {
  padding-left: 0;
}

.admin-app .admin-table th:last-child,
.admin-app .admin-table td:last-child {
  padding-right: 0;
}

.admin-app .admin-table th.num,
.admin-app .admin-table td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.admin-app .admin-table td {
  overflow-wrap: anywhere;
}

.admin-app .admin-table a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
}

.admin-app .admin-table a:hover {
  text-decoration: underline;
}

.admin-app .admin-table .admin-user-chip {
  color: var(--navy);
}

.admin-app .admin-row-link {
  cursor: pointer;
  transition: background 0.12s;
}

.admin-app .admin-row-link:hover {
  background: rgba(var(--navy-rgb), 0.03);
}

.admin-app .admin-cell-user {
  min-width: 220px;
}

.admin-app .admin-cell-user .admin-badges {
  margin: 4px 0 0 37px;
}

.admin-app .admin-cell-text {
  max-width: 420px;
  white-space: pre-wrap;
}

.admin-app .admin-cell-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: normal;
}

/* People */

.admin-app .admin-avatar {
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--line-soft);
  object-fit: cover;
}

.admin-app .admin-avatar-sm {
  width: 28px;
  height: 28px;
}

.admin-app .admin-avatar-lg {
  width: 64px;
  height: 64px;
}

.admin-app .admin-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
  color: var(--navy);
  text-decoration: none;
  vertical-align: middle;
}

.admin-app .admin-user-chip:hover .admin-user-chip-name {
  color: var(--teal);
  text-decoration: underline;
}

.admin-app .admin-user-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-app .admin-user-chip-name,
.admin-app .admin-user-chip-sub {
  overflow: hidden;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-app .admin-user-chip-name {
  font-size: 13px;
  font-weight: 700;
}

.admin-app .admin-user-chip-sub {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.admin-app .admin-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.admin-app .admin-badges .badge,
.admin-app .admin-q-meta .badge,
.admin-app .admin-q-line > .badge,
.admin-app .admin-table .badge {
  min-height: 22px;
  padding: 0 9px;
  font-size: 11px;
}

/* Overview lists */

.admin-app .admin-mini-list {
  display: flex;
  flex-direction: column;
}

.admin-app .admin-mini-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 0;
}

.admin-app .admin-mini-row:first-child {
  padding-top: 0;
}

.admin-app .admin-mini-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.admin-app .admin-mini-text {
  flex: 1;
  min-width: 0;
}

.admin-app .admin-mini-text + .admin-user-chip {
  flex-shrink: 1;
  max-width: 40%;
}

.admin-app .admin-mini-title {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-app .admin-mini-meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.admin-app .admin-mini-count {
  flex-shrink: 0;
  margin-left: auto;
  text-align: right;
}

.admin-app .admin-mini-count strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.admin-app .admin-mini-count span {
  color: var(--muted);
  font-size: 11px;
}

/* Charts — colors are tokens, the SVG only carries classes */

.admin-app .admin-chart {
  display: block;
  width: 100%;
  height: 170px;
}

.admin-app .admin-chart-grid {
  stroke: var(--line-warm);
  stroke-width: 1;
}

.admin-app .admin-chart-label {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 10px;
}

.admin-app .admin-chart-bar {
  fill: var(--navy);
}

.admin-app .admin-chart-bar:hover {
  fill: var(--teal);
}

.admin-app .admin-chart-line {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Dashboard tiles that link to the list behind the number */

.admin-app a.admin-stat-link {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-app a.admin-stat-link:hover {
  border-color: rgba(var(--teal-rgb), 0.4);
  box-shadow: 0 4px 14px rgba(var(--navy-rgb), 0.06);
}

/* Share bars — a count per status / stage as a proportion of the whole */

.admin-app .admin-shares {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-app .admin-share-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.admin-app .admin-share-head strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.admin-app .admin-share-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--navy-rgb), 0.06);
}

.admin-app .admin-share-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--navy);
}

.admin-app .admin-share-teal { background: var(--teal); }
.admin-app .admin-share-sand { background: var(--sand); }
.admin-app .admin-share-orange { background: var(--orange); }
.admin-app .admin-share-muted { background: var(--muted); }

.admin-app .admin-card-note {
  margin: -6px 0 10px;
}

/* Query rows (Poizvedbe, profile activity) and ratings (Ocene) */

.admin-app .admin-q-list {
  display: flex;
  flex-direction: column;
}

.admin-app .admin-q,
.admin-app .admin-fb {
  border-bottom: 1px solid var(--line-soft);
  padding: 14px 0;
}

.admin-app .admin-q:first-child,
.admin-app .admin-fb:first-child {
  padding-top: 2px;
}

.admin-app .admin-q:last-child,
.admin-app .admin-fb:last-child {
  border-bottom: 0;
}

.admin-app .admin-q-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.admin-app .admin-q-line > .badge {
  flex-shrink: 0;
  margin-top: 1px;
}

.admin-app .admin-q-toggle {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--navy);
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-app .admin-q-text {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-app .admin-q.open .admin-q-text {
  display: block;
}

.admin-app .admin-q-toggle:hover .admin-q-text {
  color: var(--teal);
}

.admin-app .admin-q-chevron {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--muted);
  transition: transform 0.15s;
}

.admin-app .admin-q-chevron svg {
  display: block;
}

.admin-app .admin-q.open .admin-q-chevron {
  transform: rotate(180deg);
}

.admin-app .admin-q-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.admin-app .admin-q-meta-item {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-app .admin-q-meta .admin-user-chip {
  max-width: 280px;
}

.admin-app .admin-q-meta .admin-avatar-sm {
  width: 22px;
  height: 22px;
}

.admin-app .admin-q-body {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 14px 16px;
}

.admin-app .admin-fb-question {
  margin-top: 8px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-app .admin-fb-comment {
  margin: 8px 0 0;
  border-left: 3px solid var(--sand);
  border-radius: 0 6px 6px 0;
  background: rgba(var(--sand-rgb), 0.12);
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.admin-app .admin-fb-answer {
  margin-top: 10px;
}

.admin-app .admin-fb-answer summary {
  color: var(--teal);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.admin-app .admin-fb-answer .admin-answer {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 14px 16px;
}

/* A rendered iskalnik answer (markdown) */

.admin-app .admin-answer {
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.admin-app .admin-answer > :first-child {
  margin-top: 0;
}

.admin-app .admin-answer > :last-child {
  margin-bottom: 0;
}

.admin-app .admin-answer p,
.admin-app .admin-answer ul,
.admin-app .admin-answer ol,
.admin-app .admin-answer blockquote,
.admin-app .admin-answer table {
  margin: 0 0 10px;
}

.admin-app .admin-answer ul,
.admin-app .admin-answer ol {
  padding-left: 20px;
}

.admin-app .admin-answer h1,
.admin-app .admin-answer h2,
.admin-app .admin-answer h3,
.admin-app .admin-answer h4 {
  margin: 16px 0 6px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
}

.admin-app .admin-answer a {
  color: var(--teal);
}

.admin-app .admin-answer code {
  border-radius: 4px;
  background: rgba(var(--navy-rgb), 0.06);
  padding: 1px 4px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

.admin-app .admin-answer blockquote {
  border-left: 3px solid var(--line);
  color: var(--muted);
  padding-left: 12px;
}

.admin-app .admin-answer table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-app .admin-answer th,
.admin-app .admin-answer td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
}

.admin-app .admin-answer-note {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12.5px;
  font-style: italic;
}

.admin-app .admin-answer-note:last-child {
  margin-bottom: 0;
}

.admin-app .admin-answer-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.admin-app .admin-answer-sources-label {
  margin-right: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-app .admin-answer-sources .tag {
  min-height: 24px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

/* Key–value lists and compact lists (profile cards) */

.admin-app .admin-kv {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
  font-size: 13px;
}

.admin-app .admin-kv-grid {
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) minmax(110px, auto) minmax(0, 1fr);
}

.admin-app .admin-kv dt {
  color: var(--muted);
  font-weight: 600;
}

.admin-app .admin-kv dd {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-app .admin-kv dd a {
  color: var(--teal);
  text-decoration: none;
}

.admin-app .admin-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-app .admin-kv + .admin-list {
  margin-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.admin-app .admin-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 0;
  font-size: 13px;
}

.admin-app .admin-list li:last-child {
  border-bottom: 0;
}

.admin-app .admin-list a {
  color: var(--teal);
  text-decoration: none;
}

.admin-app .admin-list-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-app .admin-list-sub {
  color: var(--muted);
  font-size: 12px;
}

.admin-app .admin-list-value {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  color: var(--navy);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-app .admin-list-value.neg {
  color: var(--red);
}

.admin-app .admin-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.admin-app .admin-copy:hover {
  border-color: rgba(var(--teal-rgb), 0.36);
  color: var(--teal);
}

.admin-app .admin-copy.done {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--surface);
}

/* Profile page (and the office detail header, same shape) */

.admin-app .admin-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.admin-app .admin-back svg {
  width: 16px;
  height: 16px;
}

.admin-app .admin-back:hover {
  color: var(--navy);
}

.admin-app .admin-profile-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.admin-app .admin-profile-id {
  flex: 1;
  min-width: 0;
}

.admin-app .admin-profile-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.admin-app .admin-profile-name h1 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--navy);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.admin-app .admin-profile-email {
  display: inline-block;
  margin-top: 4px;
  color: var(--teal);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.admin-app .admin-profile-uid {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--muted);
}

.admin-app .admin-profile-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.admin-app .admin-profile-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 16px;
}

.admin-app .admin-profile-grid {
  display: grid;
  grid-template-areas: "main aside";
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 20px;
}

.admin-app .admin-profile-main {
  grid-area: main;
  min-width: 0;
}

.admin-app .admin-profile-aside {
  grid-area: aside;
  min-width: 0;
}

.admin-app .admin-btn-danger {
  border-color: var(--red);
  background: var(--red);
  color: var(--surface);
}

.admin-app .admin-btn-danger:hover {
  opacity: 0.88;
}

/* Forms, statuses, codes */

.admin-app .admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin-top: 16px;
}

.admin-app .admin-card-head + .admin-form-actions {
  margin-top: 0;
}

.admin-app .admin-form-row {
  display: inline-grid;
  gap: 6px;
}

.admin-app .admin-invite-credits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-app .admin-invite-credits .admin-number {
  width: 96px;
}

.admin-app .admin-status {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.admin-app .admin-status.dirty {
  color: var(--orange);
}

.admin-app .admin-status.error {
  color: var(--red);
}

.admin-app #invite-status {
  margin-top: 12px;
}

.admin-app .admin-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-app .admin-code {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--navy);
  padding: 0 12px;
  font: 700 13px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.06em;
}

.admin-app button.admin-code {
  cursor: pointer;
}

.admin-app button.admin-code:hover,
.admin-app .admin-code.done {
  border-color: rgba(var(--teal-rgb), 0.4);
  background: rgba(var(--teal-rgb), 0.08);
  color: var(--teal);
}

.admin-app .admin-output {
  max-height: 200px;
  margin: 14px 0 0;
  overflow: auto;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  padding: 12px;
  font: 12px/1.5 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-app .admin-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.admin-app .admin-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-app .admin-toggle-track {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(var(--navy-rgb), 0.14);
  transition: background 0.15s;
}

.admin-app .admin-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(var(--navy-rgb), 0.2);
  transition: transform 0.15s;
}

.admin-app .admin-toggle input:checked + .admin-toggle-track {
  background: var(--teal);
}

.admin-app .admin-toggle input:checked + .admin-toggle-track::after {
  transform: translateX(16px);
}

.admin-app .admin-toggle input:focus-visible + .admin-toggle-track {
  box-shadow: 0 0 0 3px rgba(var(--teal-rgb), 0.2);
}

.admin-app .admin-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.admin-app .admin-pager:empty {
  display: none;
}

.admin-app .admin-pager-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Narrower screens ─────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .admin-app .admin-profile-grid {
    grid-template-areas: "aside" "main";
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-app .admin-profile-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }
}

/* The sidebar takes 362 px until the drawer kicks in at 860 px, so the
   content column is narrow well before the window is. */
@media (max-width: 1200px) {
  .admin-app .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-app .admin-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The sidebar becomes a sticky top bar; the grouped nav opens as a drawer
   under it instead of the shared §5 horizontal rail — fourteen items do
   not fit in one scrolling row. */
@media (max-width: 860px) {
  .admin-app .app-shell .side {
    position: sticky;
    top: 0;
    z-index: 60;
    height: auto;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    padding: 10px 16px;
    gap: 0;
  }
  .admin-app .side-top {
    margin-bottom: 0;
  }
  .admin-app .side-menu-btn {
    display: inline-flex;
  }
  .admin-app .app-shell .side-nav,
  .admin-app .app-shell .side-foot {
    display: none;
  }
  .admin-app .app-shell .side.open {
    overflow-y: auto;
  }
  .admin-app .app-shell .side.open .side-nav {
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding-top: 8px;
  }
  .admin-app .app-shell .side.open .side-foot {
    display: block;
  }
  .admin-app .app-main .main-inner {
    padding: 22px 16px 56px;
  }
  .admin-app .admin-view-head h1 {
    font-size: 22px;
  }
}

/* Phones: toolbars stack, the form grid is one column, headers lose their
   subtitles. */
@media (max-width: 640px) {
  .admin-app .panel {
    padding: 16px;
  }
  .admin-app .admin-view-head {
    flex-direction: column;
  }
  .admin-app .admin-view-sub {
    display: none;
  }
  .admin-app .admin-stats {
    gap: 10px;
  }
  .admin-app .admin-stats .stat-card {
    padding: 14px;
  }
  .admin-app .admin-stats .stat-value {
    font-size: 18px;
  }
  .admin-app .admin-profile-aside {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-app .admin-profile-head {
    flex-wrap: wrap;
  }
  .admin-app .admin-profile-actions {
    width: 100%;
  }
  .admin-app .admin-profile-actions .btn {
    flex: 1;
  }
  .admin-app .admin-kv-grid {
    grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  }
  .admin-app .field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-app .admin-toolbar .admin-search,
  .admin-app .admin-segmented,
  .admin-app .admin-filter {
    flex-basis: 100%;
    width: 100%;
  }
  .admin-app .admin-segmented button {
    flex: 1;
  }
  .admin-app .admin-toolbar .admin-count {
    margin-left: 0;
  }
  .admin-app .admin-q-meta .admin-user-chip {
    max-width: 100%;
  }
  .admin-app .admin-mini-text + .admin-user-chip {
    display: none;
  }

  .admin-app .admin-check {
    min-height: 36px;
  }
}

/* A table becomes labelled cards whenever its own box is narrow — a phone,
   a tablet, or a half-width card next to the wide sidebar — so the rule is a
   container query on the wrapper, not a viewport breakpoint. core.js writes
   each cell's column name into data-label. */
.admin-app .admin-table-wrap {
  container: admin-table / inline-size;
}

@container admin-table (max-width: 700px) {
  /* A row becomes a card: the first column is its title, the rest a
     two-column grid of label-over-value facts; long text and action cells
     take the full width. */
  .admin-app .admin-stack thead {
    display: none;
  }
  .admin-app .admin-stack,
  .admin-app .admin-stack tbody {
    display: block;
    width: 100%;
  }
  .admin-app .admin-stack tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    border-bottom: 1px solid var(--line-soft);
    padding: 14px 0;
  }
  .admin-app .admin-stack tr:first-child {
    padding-top: 2px;
  }
  .admin-app .admin-stack tr:last-child {
    border-bottom: 0;
  }
  .admin-app .admin-table.admin-stack td,
  .admin-app .admin-table.admin-stack td.num,
  .admin-app .admin-table.admin-stack td:first-child,
  .admin-app .admin-table.admin-stack td:last-child {
    display: block;
    min-width: 0;
    max-width: none;
    border: 0;
    padding: 0;
    text-align: left;
    white-space: normal;
  }
  .admin-app .admin-stack td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    overflow: hidden;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .admin-app .admin-stack td:first-child,
  .admin-app .admin-stack td.admin-cell-text,
  .admin-app .admin-stack td[data-label=""],
  .admin-app .admin-stack td.admin-empty {
    grid-column: 1 / -1;
  }
  .admin-app .admin-stack td:first-child {
    font-weight: 700;
  }
  .admin-app .admin-stack td:first-child::before,
  .admin-app .admin-stack td[data-label=""]::before,
  .admin-app .admin-stack td.admin-empty::before {
    content: none;
  }
  .admin-app .admin-stack td:empty {
    display: none;
  }
  .admin-app .admin-table.admin-stack td.admin-empty {
    text-align: center;
  }
  .admin-app .admin-stack .admin-cell-user .admin-badges {
    margin-left: 0;
  }
}

@container admin-table (min-width: 480px) and (max-width: 700px) {
  .admin-app .admin-stack tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .admin-app .admin-q-toggle {
    min-height: 30px;
  }
}

/* OPN reader (/admin/opn#<slug>): one act's full text with an article rail
   and the corpus metadata card. Same shape as the architect act viewer
   (§9 .opn-layout/.opn-toc/.opn-doc); tables get a scrolling wrapper so
   wide EUP tables never widen the column. */

.admin-app .opn-meta { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; }

.admin-app .opn-meta-name { font-size: 22px; font-weight: 700; line-height: 1.25; }

.admin-app .opn-meta-count { font-size: 13px; color: var(--muted); }

.admin-app .opn-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }

.admin-app .opn-toc { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 10px;
    max-height: calc(100vh - 60px); }

.admin-app .opn-toc-filter { width: 100%; }

.admin-app .opn-toc-list { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; padding-right: 4px; }

.admin-app .opn-toc-item { display: grid; gap: 1px; padding: 7px 10px; border-radius: 6px; text-decoration: none;
    color: var(--text); border-left: 3px solid transparent; transition: background .15s, border-color .15s; }

.admin-app .opn-toc-item:hover { background: rgba(0,0,0,0.04); }

.admin-app .opn-toc-item.active { background: rgba(0,0,0,0.04); border-left-color: var(--teal); }

.admin-app .opn-toc-n { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: 0.3px; }

.admin-app .opn-toc-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; }

.admin-app .opn-doc-col { max-width: 900px; margin: 0 auto; width: 100%; }

.admin-app .opn-doc { max-width: 900px; font-size: 14.5px; line-height: 1.65; color: var(--text); }

.admin-app .opn-doc h1 { font-size: 20px; }

.admin-app .opn-doc h2 { font-size: 17px; }

.admin-app .opn-doc h3, .admin-app .opn-doc h4, .admin-app .opn-doc h5, .admin-app .opn-doc h6 { font-size: 15px; }

.admin-app .opn-doc h1, .admin-app .opn-doc h2, .admin-app .opn-doc h3,
.admin-app .opn-doc h4, .admin-app .opn-doc h5, .admin-app .opn-doc h6 {
    font-weight: 800; letter-spacing: -0.2px; margin: 26px 0 10px; scroll-margin-top: 20px; }

.admin-app .opn-doc .opn-clen { padding-top: 6px; border-top: 1px solid var(--app-line); color: var(--navy); }

.admin-app .opn-doc p, .admin-app .opn-doc li { margin: 8px 0; }

.admin-app .opn-doc ul, .admin-app .opn-doc ol { padding-left: 20px; }

.admin-app .opn-table-wrap { margin: 14px 0; overflow-x: auto; border: 1px solid var(--app-line); border-radius: 8px; }

.admin-app .opn-doc table { display: table; width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; line-height: 1.4; }

.admin-app .opn-doc th, .admin-app .opn-doc td { border: 0; border-bottom: 1px solid var(--app-line); border-right: 1px solid var(--app-line);
    padding: 7px 10px; vertical-align: top; text-align: left; }

.admin-app .opn-doc th:last-child, .admin-app .opn-doc td:last-child { border-right: 0; }

.admin-app .opn-doc tr:last-child > th, .admin-app .opn-doc tr:last-child > td { border-bottom: 0; }

.admin-app .opn-doc th { background: rgba(var(--navy-rgb), 0.04); font-weight: 700; color: var(--navy); }

.admin-app .opn-doc td p, .admin-app .opn-doc th p { margin: 0; }

.admin-app .opn-doc td p + p { margin-top: 4px; }

/* Metadata card: summary chips + expandable detail */
.admin-app .opn-meta-card { margin: 0 0 30px; border: 1px solid var(--app-line); border-radius: 12px;
    background: rgba(0, 0, 0, 0.015); }

.admin-app .opn-meta-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 14px 20px; }

.admin-app .opn-meta-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.admin-app .opn-meta-fact-k { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }

.admin-app .opn-meta-fact-v { font-size: 13.5px; font-weight: 600; color: var(--text); }

.admin-app .opn-meta-fact.is-warn .opn-meta-fact-v,
.admin-app .opn-meta-warn { color: var(--red); }

.admin-app .opn-meta-toggle { margin-left: auto; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600;
    color: var(--navy); background: transparent; border: 1px solid rgba(var(--navy-rgb), 0.25); border-radius: 999px; cursor: pointer; }

.admin-app .opn-meta-toggle:hover, .admin-app .opn-meta-toggle[aria-expanded="true"] { background: rgba(var(--navy-rgb), 0.08); }

.admin-app .opn-meta-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px;
    padding: 16px 20px 18px; border-top: 1px solid var(--app-line); }

.admin-app .opn-meta-detail.hidden { display: none; }

.admin-app .opn-meta-block h3 { font-size: 13px; font-weight: 800; color: var(--navy); margin: 0 0 8px; }

.admin-app .opn-meta-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0;
    font-size: 12.5px; line-height: 1.45; }

.admin-app .opn-meta-kv dt { color: var(--muted); font-weight: 700; }

.admin-app .opn-meta-kv dd { margin: 0; overflow-wrap: anywhere; }

.admin-app .opn-meta-list { margin: 0; padding-left: 18px; }

.admin-app .opn-meta-vloga { font-weight: 700; color: var(--navy); }

.admin-app .opn-meta-date { margin-left: 6px; color: var(--muted); }

.admin-app .opn-meta-none { margin: 0; font-size: 12.5px; color: var(--muted); }

@media (max-width: 1100px) {
  .admin-app .opn-meta-detail { grid-template-columns: 1fr; }
  .admin-app .opn-layout { grid-template-columns: 1fr; }
  .admin-app .opn-toc { position: static; max-height: 260px; }
}

/* ═══════════════════════════════════════════════════════════════════
   §10  LOCATION (.li-app) — the standalone parcel lookup page: hero
   search form, KO autocomplete, page-level loading/error state, the
   navy title bar, and results-shell sizing. The report body itself
   (map, cards, details, tables) is NOT here — it's `.arh-report` (§7);
   the results container is wrapped in both classes (see index.html's
   <main class="arh-report"> inside <div id="results" class="li-app">'s
   page). Verified against the original file: every report-only
   selector (top-row, panel, card, details, table, envelope, leaflet,
   infra-legend, buildability, zone-…, warning-list, pdf-…,
   diagram-loading) is excluded here since §7 already owns it — this
   is chrome only.

   Opomba: v naštevanju ne sme stati zvezdica tik pred poševnico — tak
   vzorec je ta komentar prej zapiral sredi stavka, zato je bilo
   pravilo pod njim (podvojen `html { scroll-behavior }` iz §2) tiho
   mrtvo.
   ═══════════════════════════════════════════════════════════════════ */

/* Palette tokens come from the :root block in §1 of this file. */

body.li-app {
    min-height: 100vh;
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--white);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

.li-app *,
.li-app *::before,
.li-app *::after {
    letter-spacing: 0;
}

.li-app .hidden {
    display: none !important;
}

/* Hero */

.li-app #hero {
    min-height: 100svh;
    padding: 72px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* background comes from the base body rule (var(--white)) */
}

.li-app #hero::before {
    display: none;
}

.li-app .hero-box {
    width: min(100%, 820px);
    max-width: none;
    padding: 0;
    background: transparent;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.li-app .hero-brand-lockup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--navy);
    font-size: 22px;
    font-weight: 700;
}

.li-app .hero-brand-home {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.li-app .hero-brand-home:hover,
.li-app .hero-brand-home:focus-visible {
    color: inherit;
}

.li-app .hero-brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: var(--navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.li-app .hero-brand-logo svg {
    width: 17px;
    height: 17px;
}

.li-app .hero-brand-sep {
    color: rgba(var(--navy-rgb), 0.25);
    font-weight: 500;
}

.li-app #search-form {
    width: min(100%, 560px);
    margin: 0 auto;
}

.li-app .hero-inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr) auto;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 12px;
    background: var(--glass);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(28px) saturate(1.8);
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
}

.li-app .form-field {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0 16px;
    text-align: left;
}

.li-app .form-field + .form-field {
    border-left: 1px solid rgba(var(--navy-rgb), 0.08);
}

.li-app .form-field label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 14px;
}

.li-app .hero-inputs input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--navy);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
}

.li-app .hero-inputs input::placeholder {
    color: var(--muted);
}

.li-app .hero-inputs .input-wrap {
    flex: none;
}

.li-app .hero-inputs .input-wrap input {
    border-right: 0;
}

.li-app #search-form button,
.li-app #new-search-btn,
.li-app #export-pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: auto;
    border: 1.5px solid var(--navy);
    border-radius: 999px;
    background: transparent;
    color: var(--navy);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.li-app #search-form button {
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 50%;
    background: var(--navy);
    color: var(--paper);
    align-self: center;
    flex-shrink: 0;
}

.li-app #search-form button svg {
    width: 20px;
    height: 20px;
    transform: rotate(90deg); /* the Arhipedija "A" becomes a right arrow */
}

.li-app #search-form button:hover,
.li-app #new-search-btn:hover,
.li-app #export-pdf-btn:hover {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}

.li-app #search-form button:hover {
    background: var(--navy-2);
    border-color: var(--navy-2);
    color: var(--paper);
}

.li-app .credit-widget {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--white);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.li-app .credit-widget.is-visible {
    display: inline-flex;
}

.li-app #search-form button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Autocomplete */

.li-app .ko-dropdown {
    position: absolute;
    top: calc(100% + 18px);
    left: 0;
    right: 0;
    z-index: 200;
    max-height: 240px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(var(--navy-rgb), 0.12);
}

.li-app .ko-dropdown .ko-item {
    padding: 10px 14px;
    color: var(--navy);
    font-size: 13px;
    gap: 12px;
}

.li-app .ko-dropdown .ko-item:hover,
.li-app .ko-dropdown .ko-item.active {
    background: rgba(26, 110, 122, 0.08);
}

.li-app .ko-dropdown .ko-id {
    color: var(--muted);
}

/* Loading and error */

.li-app #loading {
    background: rgba(249, 247, 244, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.li-app .spinner-block,
.li-app .step-spinner-block {
    background: var(--teal);
    border-radius: 2px;
}

.li-app .loading-step {
    color: var(--muted);
    font-size: 13px;
}

.li-app .loading-step.active {
    color: var(--navy);
}

.li-app .loading-step.done {
    color: var(--teal);
}

.li-app #error-msg {
    max-width: 640px;
    margin: 0 auto 20px;
    padding: 14px 18px;
    color: var(--red);
    background: var(--paper);
    border: 1px solid rgba(183, 58, 46, 0.28);
    border-radius: 8px;
    box-shadow: var(--shadow);
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}

/* Results shell */

.li-app #results {
    padding-top: 12px;
}

.li-app main {
    max-width: 1180px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 32px 64px;
}

/* Title bar — brand lockup stacked above the parcel info, actions right */

.li-app .title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 14px 18px;
    background: var(--navy);
    color: var(--white);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(var(--navy-rgb), 0.12);
    font-size: 16px;
    font-weight: 700;
}

.li-app .title-bar-left {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.li-app .title-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(249, 247, 244, 0.72);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.li-app .title-brand-logo {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.li-app .title-brand-logo svg {
    width: 12px;
    height: 12px;
}

.li-app .title-brand-name {
    color: var(--white);
    font-weight: 700;
}

.li-app .title-brand-sep {
    color: rgba(249, 247, 244, 0.35);
    font-weight: 500;
}

.li-app .title-brand-product {
    font-weight: 500;
    white-space: nowrap;
}

.li-app .title-parcel {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 17px;
}

.li-app .title-sep {
    color: rgba(249, 247, 244, 0.38);
    opacity: 1;
}

.li-app .title-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Zgodovina — v temni naslovni vrstici enaka kot sosednja gumba, v tihem
   pristajalnem grozdu pa manjša in v barvi strani. */

.li-app .history-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 14px;
    border: 1.5px solid rgba(249, 247, 244, 0.45);
    border-radius: 999px;
    background: transparent;
    color: var(--white);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.li-app .history-trigger svg { width: 14px; height: 14px; flex-shrink: 0; }

.li-app .history-trigger:hover,
.li-app .history-trigger[aria-expanded="true"] {
    background: var(--white);
    color: var(--navy);
    border-color: var(--white);
}

/* Opozorilo, da je pogled shranjen posnetek in ne sveža poizvedba. */

.li-app .history-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    padding: 2px 0 2px 10px;
    border-left: 2px solid var(--sand);
}

.li-app .history-notice-text { font-size: 12px; line-height: 1.5; color: var(--muted); }

.li-app .history-notice-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--navy);
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.li-app .history-notice-btn:hover { background: var(--navy); color: var(--white); }

/* Uniform action buttons: icon + short title, same border and height */

.li-app #new-search-btn,
.li-app #export-pdf-btn {
    min-height: 34px;
    gap: 7px;
    padding: 0 14px;
    color: var(--white);
    border-color: rgba(249, 247, 244, 0.45);
    font-size: 12px;
}

.li-app #new-search-btn svg,
.li-app #export-pdf-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.li-app #new-search-btn:hover,
.li-app #export-pdf-btn:hover {
    background: var(--white);
    color: var(--navy);
    border-color: var(--white);
}

.li-app .auth-signin-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--navy);
    border: 1.5px solid rgba(var(--navy-rgb), 0.24);
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.li-app .auth-signin-btn:hover {
    background: var(--white);
    color: var(--navy);
    border-color: var(--navy);
    filter: none;
}

/* Panels */

/* Envelope info panel sits top-right, like the map's infra legend
   (10px matches the Leaflet control margin). */

.li-app .diagram-loading-step {
    color: var(--muted);
}

/* Leaflet */

/* Overlay boxes — the map legend and the 3D envelope panel share one
   style: top-right corner, identical fixed width, padding, slightly
   transparent background and border. */

/* Summary cards */

/* Details */

/* Sections are always expanded — header is a plain heading, not a toggle */

@media (max-width: 980px) {
  .li-app .hero-inputs {
        grid-template-columns: 1fr;
        border-radius: 24px;
        padding: 12px;
    }
  .li-app .form-field {
        min-height: 58px;
        padding: 0 14px;
        border-left: 0 !important;
        border-bottom: 1px solid rgba(var(--navy-rgb), 0.08);
    }
  .li-app #search-form button {
        margin: 4px auto 0;
    }
}

@media (max-width: 720px) {
  .li-app #hero {
        min-height: 100svh;
        padding: 72px 18px 48px;
    }
  .li-app .hero-brand-lockup {
        font-size: 19px;
    }
  .li-app main {
        padding-left: 18px;
        padding-right: 18px;
    }
  .li-app .title-bar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
  .li-app .title-bar-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
  .li-app .hero-brand-lockup {
        font-size: 17px;
        gap: 8px;
    }
  .li-app .hero-inputs {
        border-radius: 18px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   §9  ARCHITECT (.arh-app) — the Arhitekt wizard SPA: dashboard, forms,
   offer builder, company profile, and the DGD wizard (.dgd-root, nested
   inside .arh-app). The shell and sidebar/stage nav are NOT here — they
   are the shared .app-shell component in §5, which architect uses without
   overrides. The embedded parcel report lives in .arh-report (§7). `.badge`/`.badge--*` here is a rect,
   10px-uppercase treatment distinct from the global pill `.badge` in
   §5 — DGD has its OWN slightly different `.badge` (2px radius/700
   weight vs stage 1/2's 5px/800) for its own context; both are kept,
   not unified, matching this task's lower-risk precedent elsewhere
   (project_conditions' own button system, T8). `.ds-btn`/`.ds-btn-secondary`
   call sites in architect's JS were renamed to `.btn`/`.btn-secondary`
   (the global button, visually identical) so the §4 `.ds-btn` compat
   block could be deleted outright instead of staying forever.
   ═══════════════════════════════════════════════════════════════════ */

/* An admin viewing another office (admin Biroji → »Poglej kot biro«). */
.arh-app .arh-view-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid rgba(var(--orange-rgb), 0.35);
  border-radius: 8px;
  background: rgba(var(--orange-rgb), 0.08);
  color: var(--navy);
  font-size: 13px;
  line-height: 1.4;
}

.arh-app .arh-view-banner[hidden] { display: none; }

.arh-app .arh-view-banner svg {
  flex: none;
  color: var(--orange);
}

.arh-app .arh-view-banner-text { flex: 1; }

body.arh-app {
    /* Palette (navy/navy-2/text/muted/line/line-soft/vivid/teal/sand/red/orange)
       comes from §1 :root. --white stays local: architect wants pure
       var(--surface) for panels, forms and the page background, not the shared
       off-white. (The sidebar no longer depends on this — the shared .app-shell
       in §5 carries its own --side-fg.) */
    --white: var(--surface);
    --app-bg: var(--surface); --app-line: #e8e8e8;
}

/* Page background matches .app-main's fill so the gutter the sidebar floats in
   doesn't show a different shade than the content next to it. */
body.arh-app { background: var(--white); font-family: "Outfit", sans-serif; color: var(--text); margin: 0; }

/* Checkboxes — one look for every native checkbox in this client, the same as
   the .chip box: soft border, teal fill with a white tick when on. Chips hide
   their own input, and rules further down only ever set position/margins. */
.arh-app input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.arh-app input[type="checkbox"]:hover:not(:disabled):not(:checked) { border-color: rgba(var(--navy-rgb), 0.26); }

.arh-app input[type="checkbox"]:checked {
  border-color: var(--teal);
  background-color: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206L9%2017l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

.arh-app input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--teal-rgb), 0.14); }

.arh-app input[type="checkbox"]:disabled { cursor: default; opacity: 0.55; }

/* The shell, sidebar and nav rail live in §5 as the shared .app-shell
   component — architect uses it as-is, with no overrides. */

/* ── Dashboard ─────────────────────────────────────────── */

.arh-app .dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }

.arh-app .dash-header h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin: 0; }

.arh-app .dash-empty { text-align: center; padding: 64px 20px; color: var(--muted); font-size: 14px;
    background: transparent; border: 1px dashed var(--line); border-radius: 10px; }

/* Prompt while the firm identity is not filled in (ArhitektSettings.identityNotice). */

.arh-app .dash-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px 16px; margin-bottom: 24px; }

.arh-app .dash-notice-text { flex: 1 1 280px; min-width: 0; }

/* Dashboard stat cards */

.arh-app .dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }

.arh-app .stat-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(var(--navy-rgb),0.03); transition: box-shadow .15s, transform .15s; }

.arh-app .stat-card:hover { box-shadow: 0 8px 22px rgba(var(--navy-rgb),0.08); transform: translateY(-1px); }

.arh-app .stat-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 46px; height: 46px; border-radius: 12px; }

.arh-app .stat-icon svg { width: 23px; height: 23px; display: block; }

.arh-app .stat-body { min-width: 0; }

.arh-app .stat-value { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; line-height: 1; color: var(--text); }

.arh-app .stat-label { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 4px; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.arh-app .stat-card--teal .stat-icon { background: rgba(var(--teal-rgb),0.12); color: var(--teal); }

.arh-app .stat-card--green .stat-icon { background: rgba(111,128,88,0.14); color: var(--vivid); }

.arh-app .stat-card--sand .stat-icon { background: rgba(180,123,38,0.14); color: var(--orange); }

.arh-app .stat-card--ink .stat-icon { background: rgba(var(--navy-rgb),0.08); color: var(--navy); }

@media (max-width: 860px) {
  .arh-app .dash-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Opomniki (reminders.js) na nadzorni plošči in v glavi projekta: rok za
   dopolnitev, pravnomočnost za potrditev, mnenjedajalec brez odgovora 14 dni. */
.arh-app .dash-reminders { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; padding: 14px 16px;
    background: rgba(var(--orange-rgb), 0.06); border: 1px solid rgba(var(--orange-rgb), 0.28); border-radius: 14px; }

.arh-app .dash-reminders-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
    color: var(--orange); margin-bottom: 4px; }

.arh-app .dash-reminders-title svg { width: 16px; height: 16px; display: block; }

.arh-app .dash-reminder { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 8px;
    background: none; border: none; border-radius: 8px; font: inherit; text-align: left; cursor: pointer; }

.arh-app .dash-reminder:hover { background: rgba(var(--orange-rgb), 0.08); }

.arh-app .dash-reminder-who { font-size: 13px; font-weight: 700; color: var(--text); }

.arh-app .dash-reminder-what { font-size: 12px; color: var(--muted); }

.arh-app .dash-reminder.is-overdue .dash-reminder-who,
.arh-app .dash-reminder.is-overdue .dash-reminder-what { color: var(--red); }

.arh-app .proj-table { width: 100%; border-collapse: collapse; font-size: 13px; background: transparent; }

.arh-app .proj-table th { text-align: left; padding: 12px 16px; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px; color: var(--muted); border-bottom: 1px solid var(--line); }

.arh-app .proj-table td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }

.arh-app .proj-table tbody tr:last-child td { border-bottom: none; }

.arh-app .proj-table tbody tr { cursor: pointer; transition: background .12s; }

.arh-app .proj-table tbody tr:hover td { background: rgba(var(--navy-rgb),0.03); }

.arh-app .proj-name { font-weight: 700; font-size: 14px; }

.arh-app .proj-date { font-size: 12px; color: var(--muted); }

.arh-app .proj-table th:last-child, .arh-app .proj-table td.proj-actions { width: 44px; padding-left: 0; }



/* ── Projektna mapa (document drive) ───────────────────── */

.arh-app .drive-table tbody tr { cursor: default; }

.arh-app .proj-table td.drive-actions { width: 190px; white-space: nowrap; text-align: right; }

.arh-app .drive-actions .btn { margin-left: 6px; }
.arh-app .drive-actions .btn-text { margin-left: 2px; }

.arh-app .drive-history-row td { background: rgba(var(--navy-rgb),0.02); }

.arh-app .drive-history-row .proj-name { font-weight: 500; color: var(--muted); padding-left: 18px; }

.arh-app .drive-folder { display: flex; align-items: center; gap: 10px; }

.arh-app .drive-folder-icon { display: inline-flex; color: var(--teal); }

.arh-app .drive-folder-icon svg { width: 18px; height: 18px; display: block; }

/* ── Panels / content ──────────────────────────────────── */

.arh-app .panel-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 5px; }

.arh-app .panel-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }

.arh-app .panel-title-row .panel-title { margin-bottom: 0; }

.arh-app .panel-title-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--teal); flex-shrink: 0; }

.arh-app .panel-title-icon svg { width: 22px; height: 22px; display: block; }

.arh-app .dash-title { display: flex; align-items: center; gap: 10px; }

.arh-app .dash-title .panel-title-icon svg { width: 26px; height: 26px; }

.arh-app .panel-desc { font-size: 13.5px; color: var(--muted); margin-bottom: 26px; line-height: 1.55; }

.arh-app .panel-foot { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.arh-app .panel-foot > .btn-secondary:first-child { margin-right: auto; }
.arh-app .dgd-save-status { color: var(--muted); font-size: 12px; min-height: 18px; }
.arh-app .dgd-save-status:empty { display: none; }
.arh-app .dgd-readonly .step-actions-row,
.arh-app .dgd-readonly .opis-meta-actions,
.arh-app .dgd-readonly .ds-drop-zone { display: none; }
/* Mnenja arrive while the DGD is closed for them: their drop zone stays. */
.arh-app .dgd-readonly [data-open-while-closed] .ds-drop-zone { display: block; }
.arh-app .dgd-readonly :is(input, select, textarea):disabled { opacity: 1; color: var(--text); -webkit-text-fill-color: var(--text); }
.arh-app .dgd-readonly .opis-block-utemeljitev { cursor: default; }
.arh-app .dgd-long-text { width: 100%; min-height: 90px; field-sizing: content; resize: vertical; line-height: 1.55; }
.arh-app .dgd-section-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.arh-app .dgd-section-state { margin-left: 8px; font-size: 12px; color: var(--muted); font-weight: 400; }
.arh-app .dgd-section { margin: 0 0 20px; border: 1px solid var(--line); border-radius: 8px; scroll-margin-top: 24px; }
.arh-app .dgd-section > summary,
.arh-app .auth-history > summary { cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: 14px; }
.arh-app .dgd-section > :not(summary) { margin: 0; padding: 16px; }
.arh-app .dgd-section > .objekt-card { border: 0; }
.arh-app .manual-save-status { color: var(--muted); font-size: 13px; }
.arh-app .manual-save-status[data-dirty="true"] { color: var(--orange); }

.arh-app .foot-hint { margin-right: auto; align-self: center; color: var(--orange); font-size: 12.5px; font-weight: 600; }

.arh-app .sec { background: transparent; border: 0; border-radius: 0; margin-bottom: 10px; }

.arh-app .sec-head { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--muted); padding: 12px 0; border-bottom: 1px solid var(--line); }

.arh-app .badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 9px; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.5px; border-radius: 5px; line-height: 1; text-align: center; }

.arh-app .badge--green { background: rgba(111,128,88,0.16); color: var(--vivid); }

.arh-app .badge--orange { background: rgba(180,123,38,0.16); color: var(--orange); }

.arh-app .badge--red { background: rgba(var(--red-rgb),0.14); color: var(--red); }

.arh-app .badge--blue { background: rgba(var(--teal-rgb),0.14); color: var(--teal); }

.arh-app .badge--muted { background: rgba(var(--navy-rgb),0.08); color: var(--muted); }

/* Owner confirmation */

.arh-app .owner-table { display: flex; flex-direction: column; gap: 14px; }

.arh-app .owner-row { display: grid; grid-template-columns: 1.2fr 1.4fr 0.7fr; gap: 14px; align-items: end;
    padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }


.arh-app .owner-field { display: block; min-width: 0; }

.arh-app .owner-field-label { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }

.arh-app .owner-mail-choice { display: flex; justify-content: flex-start; align-items: center; gap: 8px; grid-column: 1 / 3; min-height: 26px; }

.arh-app .owner-mail-label { display: inline; font-size: 12px; color: var(--text); }

.arh-app .owner-row .owner-remove { justify-self: end; }
/* The investor's two tick boxes share the line, the remove button ends it. */
.arh-app .owner-row-manual .owner-mail-choice { grid-column: auto; }

.arh-app .owner-name { font-weight: 700; font-size: 14px; }

.arh-app .owner-cell { font-size: 13px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }



.arh-app .owner-add { margin-top: 14px; }

/* Lokacijska informacija — več parcel: skupni zemljevid, trak, zavihki */

.arh-app .loc-overview { margin-bottom: 18px; }

.arh-app .loc-overview-map { height: 380px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); }

.arh-app .loc-overview-map .loc-map-empty { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); }

.arh-app .loc-strip { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 14px; }

.arh-app .loc-strip th { text-align: left; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); }

.arh-app .loc-strip td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }

.arh-app .loc-strip tr.is-active td { background: rgba(var(--teal-rgb),0.06); }

.arh-app .loc-strip tbody tr { cursor: pointer; }

.arh-app .loc-strip .loc-strip-num { font-weight: 700; }

.arh-app .loc-strip .loc-strip-sum td { font-weight: 700; border-bottom: 0; background: transparent; cursor: default; }

.arh-app .loc-strip .loc-strip-err { color: var(--red); }

.arh-app .loc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 14px; }

.arh-app .loc-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-control);
    background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }

.arh-app .loc-tab:hover { border-color: rgba(var(--navy-rgb),0.26); }

.arh-app .loc-tab.active { border-color: var(--teal); background: rgba(var(--teal-rgb),0.10); color: var(--teal); }

.arh-app .loc-tab--nogradnja { border-style: dashed; }

.arh-app .loc-tab .loc-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }

.arh-app .loc-tab .loc-tab-dot--ready { background: var(--vivid); }

.arh-app .loc-tab .loc-tab-dot--error { background: var(--red); }

.arh-app .loc-shared { margin-top: 26px; }

/* Report boxes inside the architect follow the DGD box language
   (.dgd-root .objekt-card): flat surface, 1px line, no shadow, no lift, no
   accent stripe. The public LI page keeps §7's richer look. */

.arh-app .arh-report .card,
.arh-app .arh-report .detail-section,
.arh-app .arh-report .panel {
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  background: var(--surface);
}

.arh-app .arh-report .card { border-top: 1px solid var(--line); transition: none; }

.arh-app .arh-report .card:hover { border-color: var(--line); box-shadow: none; transform: none; }

.arh-app .arh-report .detail-header {
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
}

.arh-app .arh-report .detail-body { padding: 16px 20px 20px; }

/* Every list in a section body starts at the body's left edge: .rules-kv
   inherited the UA list indent while .zone-list and tables did not. */
.arh-app .arh-report .rules-kv,
.arh-app .arh-report .rules-list,
.arh-app .arh-report .zone-list,
.arh-app .arh-report .warning-list { margin: 0; padding: 0; }  /* also in §7 for lokacijska */

/* Protected / hazard zones read as tags: red for hazards, orange for
   protection regimes; the dot stays as the colour cue. */
.arh-app .arh-report .zone-list { display: flex; flex-wrap: wrap; gap: 8px; }

.arh-app .arh-report .zone-list li { border-bottom: 0; padding: 5px 11px 5px 9px; border-radius: 6px;
  font-size: 13px; font-weight: 600; gap: 8px; }

.arh-app .arh-report .zone-list li.zone-item--red { background: rgba(var(--red-rgb),0.10); color: var(--red); }

.arh-app .arh-report .zone-list li.zone-item--orange { background: rgba(180,123,38,0.12); color: var(--orange); }

.arh-app .loc-overview-map { border-radius: 0; }

/* Per-parcel report has five cards (infrastructure moved to the shared
   section), so the tiles fill the row; narrower screens keep §7's stacking. */

.arh-app .loc-tab-body .arh-report .cards-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .arh-app .loc-tab-body .arh-report .cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .arh-app .loc-tab-body .arh-report .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .arh-app .loc-tab-body .arh-report .cards-grid { grid-template-columns: 1fr; }
}

/* Analiza projekta z OPN (skupna sekcija) */

.arh-app .opn-analysis { padding: 4px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }

.arh-app .opn-analysis:last-of-type { border-bottom: 0; margin-bottom: 0; }

.arh-app .opn-analysis-scope { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 13px; color: var(--muted); }

.arh-app .opn-analysis-scope strong { color: var(--text); }

.arh-app .opn-analysis-parcels { font-weight: 600; color: var(--text); }

.arh-app .opn-analysis-verdict { margin: 12px 0 8px; }

.arh-app .opn-analysis-plan { margin: 0 0 12px; }
.arh-app .opn-analysis-plan .zone-list { margin-top: 8px; }
.arh-app .opn-analysis-plan .muted { font-size: 13px; margin: 6px 0 0; }

.arh-app .opn-analysis-summary { font-size: 14px; line-height: 1.55; margin: 0 0 10px; }

.arh-app .opn-findings { margin-bottom: 14px; }

.arh-app .opn-finding-rule { color: var(--muted); font-size: 12px; }

.arh-app .opn-finding-source { color: var(--muted); font-size: 12px; }

.arh-app .opn-analysis-rules-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin: 14px 0 10px; }

.arh-app .opn-analysis-actions { margin-top: 8px; }

.arh-app .opn-analysis-loading {
  padding: 18px 0;
  text-align: center;
}

.arh-app .opn-analysis-loading .diagram-loading-step {
  margin: 0;
}


/* Pripadajoči OPPN (oppn-attachments.js) — one card per detailed act, shown
   in the location overview and above the OPN in the akt viewer. Same card
   rhythm and badge vocabulary as the OPN analysis above. */

.arh-app .oppn-card { padding: 4px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }

.arh-app .oppn-card:last-of-type { border-bottom: 0; margin-bottom: 0; }

.arh-app .oppn-card-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 13px; color: var(--muted); }

.arh-app .oppn-card-head strong { color: var(--text); }

.arh-app .oppn-parcels { font-weight: 600; color: var(--text); }

.arh-app .oppn-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }

.arh-app .oppn-card .muted { font-size: 13px; margin: 6px 0 0; }

.arh-app .oppn-docs { margin-top: 8px; }

.arh-app .oppn-attempts { font-size: 12px; }

.arh-app .oppn-confirm,
.arh-app .oppn-upload { margin-top: 12px; padding: 12px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }

.arh-app .oppn-confirm p,
.arh-app .oppn-upload p { font-size: 13px; line-height: 1.55; margin: 0 0 8px; }

.arh-app .oppn-note { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); resize: vertical; }

.arh-app .oppn-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

.arh-app .oppn-role-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }

.arh-app .oppn-role { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); }

.arh-app .oppn-file { font-size: 13px; }

.arh-app .oppn-name { flex: 1 1 280px; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); }

.arh-app .oppn-disclaimer { font-size: 12px; }

.arh-app .opn-oppn { margin: 0 0 28px; }

.arh-app .opn-oppn-pdf { display: block; width: 100%; height: 80vh; margin-top: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }

/* Skladnost step: the acts the articles are read from, above the list. */
.arh-app .legal-sources { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); font-size: 13px; }

.arh-app .legal-sources-top { display: flex; align-items: flex-start; gap: 12px; }

.arh-app .legal-sources-rows { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }

.arh-app .legal-source { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

.arh-app .legal-source-kind { min-width: 44px; font-weight: 700; color: var(--muted); }

.arh-app .legal-source-name { font-weight: 600; color: var(--text); }

.arh-app .legal-source-view { display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 4px; color: var(--muted); flex-shrink: 0; }

.arh-app .legal-source-view svg { width: 14px; height: 14px; display: block; }

.arh-app .legal-source-view:hover { color: var(--teal); background: rgba(var(--teal-rgb), 0.08); }



.arh-app .legal-sources-cancel { margin-top: 2px; }


/* Parcel rows (definition screen): k.o. | parcela | gradnja | status | × */

.arh-app .parcel-row { grid-template-columns: 1.4fr 1fr auto 1fr 26px; align-items: end; }

.arh-app .parcel-row .parcel-choice { grid-column: auto; padding-bottom: 10px; white-space: nowrap; }

.arh-app .parcel-status { font-size: 12px; color: var(--muted); padding-bottom: 11px; min-width: 0; }

.arh-app .parcel-status--ready { color: var(--vivid); }

.arh-app .parcel-status--error { color: var(--red); }

.arh-app .parcel-status--incomplete { color: var(--orange); }

/* Forms */

.arh-app .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

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

/* .form-field carries its own spacing by default so it looks right standalone
   (e.g. inside .entry-block); grid parents already space fields via `gap`,
   so their direct .form-field children opt back out. */
.arh-app .form-field { margin-bottom: 16px; }

.arh-app .form-grid > .form-field,
.arh-app .objekt-grid > .form-field,
.arh-app .objekt-grid-2 > .form-field,
.arh-app .objekt-grid-4 > .form-field,
.arh-app .dgd-root .tech-field-grid > .form-field { margin-bottom: 0; }

/* Full-width fields need breathing room above their label; sibling margins
   collapse, so this only shows where the previous element has no bottom
   margin (e.g. a full field right after a grid). Grids space via `gap`,
   so their children opt out, as does a field opening its container. */
.arh-app .form-field.form-full { margin-top: 14px; }

.arh-app .form-field.form-full:first-child,
.arh-app .form-grid > .form-field.form-full,
.arh-app .objekt-grid > .form-field.form-full,
.arh-app .objekt-grid-2 > .form-field.form-full,
.arh-app .objekt-grid-4 > .form-field.form-full,
.arh-app .dgd-root .tech-field-grid > .form-field.form-full { margin-top: 0; }

.arh-app .form-field label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: var(--muted); margin-bottom: 6px; }

/* ── Global form controls — one modern style reused everywhere ─── */

.arh-app .form-field input:not([type="checkbox"]),
.arh-app .form-field select,
.arh-app .form-field textarea,
.arh-app .owner-cell-input,
.arh-app .owner-email {
    width: 100%; box-sizing: border-box; padding: 0 14px;
    border: 1.5px solid var(--line); border-radius: 10px;
    font-size: 13px; font-weight: 500; font-family: inherit;
    color: var(--text); background: var(--surface); outline: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s; }

.arh-app .form-field input:not([type="checkbox"]),
.arh-app .form-field select { height: 42px; }

.arh-app .form-field textarea { padding: 12px 14px; resize: vertical; line-height: 1.55; min-height: 110px; }

.arh-app .owner-cell-input,
.arh-app .owner-email { height: 38px; padding: 0 12px; }

.arh-app .form-field input:not([type="checkbox"])::placeholder,
.arh-app .form-field textarea::placeholder,
.arh-app .owner-cell-input::placeholder,
.arh-app .owner-email::placeholder { color: var(--muted); opacity: 0.65; }

.arh-app .form-field input:not([type="checkbox"]):hover,
.arh-app .form-field select:hover,
.arh-app .form-field textarea:hover,
.arh-app .owner-cell-input:hover,
.arh-app .owner-email:hover { border-color: rgba(var(--navy-rgb),0.26); }

.arh-app .form-field input:not([type="checkbox"]):focus,
.arh-app .form-field select:focus,
.arh-app .form-field textarea:focus,
.arh-app .owner-cell-input:focus,
.arh-app .owner-email:focus {
    border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb),0.14); background-color: var(--surface); }

.arh-app .owner-email:disabled { opacity: 0.5; background-color: var(--app-bg); cursor: not-allowed; }

/* Custom dropdown (.ui-select) styling lives in §4 of this file, so every
   client shares it; UISelect (/static/ui-select.js) auto-enhances selects. */

/* Odprtega spustnega seznama panel ne odreže več sam od sebe (UIAnchor ga
   postavi po vidnem oknu); `overflow: visible` ostaja za ostalo vsebino. */

.arh-app .app-main .panel.active { overflow: visible; border: none; }

.arh-app .sec-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--muted); margin: 26px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }

.arh-app .sec-label:first-child { margin-top: 0; }

/* A label that opens a mount point but follows other content. */
.arh-app .sec-label.sec-label--gap { margin-top: 26px; }

/* Compact grid for numeric/short inputs (dimensions) */

.arh-app .form-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* Selectable chips (checkbox-backed pills) */

.arh-app .chip-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }

.arh-app .chip { position: relative; cursor: pointer; user-select: none; }

.arh-app .chip input { position: absolute; opacity: 0; width: 0; height: 0; }

.arh-app .chip-body { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px;
    border: 1.5px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600;
    color: var(--text); background: var(--surface);
    transition: border-color .15s, background-color .15s, color .15s; }

.arh-app .chip-body::before { content: ""; width: 15px; height: 15px; border-radius: 5px; flex-shrink: 0;
    border: 1.5px solid var(--line); background: var(--surface); transition: border-color .15s, background-color .15s; }

.arh-app .chip:hover .chip-body { border-color: rgba(var(--navy-rgb),0.26); }

.arh-app .chip input:checked ~ .chip-body { border-color: var(--teal); background: rgba(var(--teal-rgb),0.08); color: var(--teal); }

.arh-app .chip input:checked ~ .chip-body::before { border-color: var(--teal); background: var(--teal);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206L9%2017l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 11px; }

.arh-app .chip input:focus-visible ~ .chip-body { box-shadow: 0 0 0 3px rgba(var(--teal-rgb),0.14); }

.arh-app .chip-add { display: flex; align-items: center; gap: 8px; }

.arh-app .chip-add .owner-cell-input { width: 240px; }

/* Offer */

.arh-app .offer-preview { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    padding: 8px 24px; max-height: 66vh; overflow-y: auto; box-sizing: border-box; }

.arh-app .offer-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }

.arh-app .offer-link { margin-top: 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 10px; font-size: 13px; word-break: break-all; }

.arh-app .offer-link a { color: var(--teal); }

.arh-app .loading { text-align: center; padding: 50px; color: var(--muted); font-size: 13px;
    background: var(--surface); border: 1px dashed var(--line); border-radius: 10px; }

.arh-app .hidden { display: none !important; }

/* ── Offer builder / settings catalog ──────────────────────────── */

.arh-app .ob-sections { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }

.arh-app .ob-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 13px;
    background: var(--surface); border: 1px dashed var(--line); border-radius: 10px; }

.arh-app .ob-sec { border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }

.arh-app .ob-sec-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer;
    user-select: none; transition: background .12s; }

.arh-app .ob-sec-head:hover { background: rgba(var(--navy-rgb),0.03); }

.arh-app .ob-caret { color: var(--muted); font-size: 12px; width: 12px; flex-shrink: 0; }

.arh-app .ob-sec-title { font-weight: 700; font-size: 14px; flex: 1; min-width: 0; }

.arh-app .ob-sec-sum { font-weight: 800; font-size: 13.5px; color: var(--text); white-space: nowrap; }



/* Reorder arrows (settings → Dokumenti). */



.arh-app .ob-sec-body { padding: 4px 16px 16px; border-top: 1px solid var(--line-soft); }

.arh-app .ob-label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: var(--muted); margin: 14px 0 6px; }

.arh-app .ob-lines { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.arh-app .ob-line { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--app-bg); }

.arh-app .ob-line-top { display: flex; align-items: center; gap: 10px; }

.arh-app .ob-line-label { flex: 1; min-width: 0; }

.arh-app .ob-price { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

.arh-app .ob-price input { width: 110px; text-align: right; }

.arh-app .ob-price-eur { color: var(--muted); font-size: 13px; font-weight: 700; flex-shrink: 0; }

.arh-app .ob-line .et { margin-top: 8px; }

.arh-app .ob-line .et-view { border: none; background: transparent; padding: 4px 0 0; }

.arh-app .ob-line .et-text { font-size: 12.5px; color: var(--muted); }

/* Bare inputs inside line rows get the same nice control styling as .form-field */

.arh-app .ob-line-label,
.arh-app .ob-price input {
    height: 40px; box-sizing: border-box; padding: 0 13px;
    border: 1.5px solid var(--line); border-radius: 9px;
    font-size: 13px; font-weight: 500; font-family: inherit; color: var(--text);
    background: var(--surface); outline: none; transition: border-color .15s, box-shadow .15s; }

.arh-app .ob-line-label:hover,
.arh-app .ob-price input:hover { border-color: rgba(var(--navy-rgb),0.26); }

.arh-app .ob-line-label:focus,
.arh-app .ob-price input:focus {
    border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb),0.14); background: var(--surface); }

.arh-app .ob-add-line { margin-top: 12px; }

.arh-app .ob-adder { margin: 14px 0 8px; }

.arh-app .ob-adder-dd { position: relative; display: inline-block; }

.arh-app .ob-add-btn { list-style: none; }

.arh-app .ob-adder-dd summary::-webkit-details-marker { display: none; }

.arh-app .ob-add-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 320px;
    background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 6px;
    box-shadow: 0 16px 40px rgba(var(--navy-rgb),0.16); }

.arh-app .ob-add-item { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text); padding: 9px 11px; border-radius: 7px; }

.arh-app .ob-add-item:hover { background: rgba(var(--teal-rgb),0.08); color: var(--teal); }

.arh-app .ob-totals { margin: 22px 0 6px; border-top: 2px solid var(--text); }

.arh-app .ob-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 2px;
    border-bottom: 1px dashed var(--line); font-size: 13.5px; }

.arh-app .ob-total-val { font-weight: 700; white-space: nowrap; }

.arh-app .ob-total-sum { border-bottom: 0; font-size: 16px; font-weight: 800; }

.arh-app .ob-total-sum .ob-total-val { font-weight: 800; }

.arh-app .ob-signed { border-color: rgba(var(--vivid-rgb), 0.3); background: rgba(var(--vivid-rgb), 0.08); }

/* ── Company page: odgovorna oseba, team cards, signed-in user ── */

.arh-app .co-card,
.arh-app .team-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
    padding: 18px 20px; }

.arh-app .co-card .sig-slots { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); }

.arh-app .team-cards { display: flex; flex-direction: column; gap: 12px; }

.arh-app .team-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 16px;
    border-bottom: 1px solid var(--line-soft); }

.arh-app .team-card-head .user-card-info { flex: 1; }

.arh-app .team-card-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px;
    align-items: end; }

.arh-app .team-card-body .form-field { margin: 0; }

.arh-app .team-lead { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
    color: var(--text); cursor: pointer; white-space: nowrap; }

/* Signature / žig uploads (settings-signatures.js): thumbnail + label + buttons. */
.arh-app .sig-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }

.arh-app .sig-slot { display: flex; align-items: center; gap: 14px; min-width: 0; }

.arh-app .sig-slot-img { width: 148px; height: 60px; flex: 0 0 auto; display: flex; align-items: center;
    justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--app-bg);
    overflow: hidden; }

.arh-app .sig-slot-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.arh-app .sig-slot-img.is-empty { border-style: dashed; color: var(--muted); font-size: 11.5px; font-style: italic; }

.arh-app .sig-slot-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.arh-app .sig-slot-label { font-size: 12.5px; font-weight: 700; color: var(--text); }

.arh-app .sig-slot-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; }

.arh-app .sig-slot-error { font-size: 12px; color: var(--red); }

.arh-app .team-empty { color: var(--muted); font-size: 12.5px; font-style: italic; padding: 4px 2px; }

/* ── Uvajanje biroja (onboarding.js): lists, terms, tutorial cards ── */

.arh-app .onb-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; padding-left: 20px;
    font-size: 14px; line-height: 1.55; color: var(--text); }

.arh-app .onb-penalty { margin: 0 0 18px; font-size: 13.5px; }

.arh-app .onb-penalty strong { font-size: 13.5px; }

.arh-app .onb-ref { font-size: 12.5px; font-weight: 600; white-space: nowrap; }

.arh-app .onb-docs { display: flex; flex-direction: column; gap: 10px; margin: 0 0 26px; }

.arh-app .onb-doc { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--app-bg); padding: 14px 16px; }

.arh-app .onb-doc-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    flex-shrink: 0; border-radius: 8px; background: var(--surface); color: var(--navy); }

.arh-app .onb-doc-icon svg { width: 20px; height: 20px; }

.arh-app .onb-doc-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

.arh-app .onb-doc-text strong { font-size: 14px; color: var(--navy); }

.arh-app .onb-doc-text span { font-size: 12.5px; color: var(--muted); }

/* Upload as a form field (onboarding.js uploadField): a 42px row like an input. */
.arh-app .onb-upload { display: flex; align-items: center; gap: 14px; height: 42px; }

.arh-app .onb-upload-btn { box-sizing: border-box; height: 42px; min-height: 42px; width: 100%; justify-content: center; padding-top: 0; padding-bottom: 0; }

.arh-app .onb-upload.is-done { padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-input);
    background: var(--app-bg); }

.arh-app .onb-upload-done { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 13px;
    font-weight: 700; color: var(--teal); }

.arh-app .onb-upload-done svg { width: 15px; height: 15px; }

.arh-app .onb-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.arh-app .onb-card { min-height: 150px; border: 1px dashed var(--line); border-radius: var(--radius);
    background: var(--surface); }

/* The whole onboarding is one centred box: no sidebar, brand on top. */
/* A grey page so the white box stands out (a step darker than --app-bg). */
.arh-app.arh-onboarding,
.arh-app.arh-onboarding .app-shell { background: #e9eae8; }

.arh-app.arh-onboarding .app-shell { grid-template-columns: minmax(0, 1fr); }

.arh-app.arh-onboarding .app-shell .side { display: none; }

.arh-app.arh-onboarding .app-main { background: transparent; }

/* The box sits in the middle of the window, vertically too; a tall screen
   still scrolls from the top. */
.arh-app.arh-onboarding .app-main .main-inner { max-width: 1120px; min-height: 100vh; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center; padding: 40px 24px; }

/* The box: a dark column (brand, vertical steps, sign-out — the app sidebar's
   colours) beside the white screen. */
.arh-app .onb-box { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 620px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }

.arh-app .onb-side { display: flex; flex-direction: column; background: var(--side-bg); color: var(--side-fg);
    padding: 30px 24px 22px; }

.arh-app .onb-body { padding: 40px 44px 44px; min-width: 0; }

.arh-app .onb-brand { display: flex; align-items: center; gap: 11px; }

.arh-app .onb-brand-logo { width: 34px; height: 34px; flex-shrink: 0; }

.arh-app .onb-brand-logo rect { fill: var(--surface); }

.arh-app .onb-brand-logo path { fill: var(--navy); }

.arh-app .onb-brand-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }

.arh-app .onb-brand-txt strong { font-size: 16px; font-weight: 800; color: var(--side-fg); }

.arh-app .onb-brand-txt small { font-size: 12px; color: rgba(255, 255, 255, 0.55); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }

.arh-app .onb-side-label { margin: 40px 0 14px; font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }

/* Vertical stepper: circle + label per row; the line below a step turns teal
   once that step is done. */
.arh-app .onb-steps { display: flex; flex-direction: column; }

.arh-app .onb-step { position: relative; display: flex; align-items: center; gap: 12px; border: 0; background: none;
    padding: 10px 0; font: inherit; font-size: 13.5px; font-weight: 700; text-align: left;
    color: rgba(255, 255, 255, 0.62); cursor: pointer; }

.arh-app .onb-step:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 42px; height: 12px;
    width: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.14); }

.arh-app .onb-step.is-done::after { background: var(--teal); }

.arh-app .onb-step:disabled { cursor: default; color: rgba(255, 255, 255, 0.32); }

.arh-app .onb-step:not(:disabled):not(.active):hover { color: var(--side-fg); }

.arh-app .onb-step.active { color: var(--side-fg); }

.arh-app .onb-step-num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); font-size: 12px;
    font-weight: 800; transition: box-shadow 0.15s; }

.arh-app .onb-step-num svg { width: 14px; height: 14px; }

.arh-app .onb-step.active .onb-step-num { background: var(--surface); border-color: var(--surface); color: var(--navy);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); }

.arh-app .onb-step.is-done .onb-step-num { background: var(--teal); border-color: var(--teal); color: var(--surface); }

.arh-app .onb-signout { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; align-self: flex-start;
    border: 0; background: none; padding: 8px 0 0; font: inherit; font-size: 13px; font-weight: 700;
    color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: color 0.15s; }

.arh-app .onb-signout svg { width: 16px; height: 16px; }

.arh-app .onb-signout:hover { color: var(--side-fg); }

/* Last screen (V obdelavi): centred confirmation. */
.arh-app .onb-done { display: flex; flex-direction: column; align-items: center; text-align: center;
    max-width: 520px; margin: 0 auto; padding: 32px 0 16px; }

.arh-app .onb-done-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px;
    border-radius: 50%; background: rgba(var(--teal-rgb), 0.12); color: var(--teal); margin-bottom: 20px; }

.arh-app .onb-done-icon svg { width: 32px; height: 32px; }

.arh-app .onb-done-title { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -0.3px;
    margin-bottom: 14px; }

.arh-app .onb-done-text { font-size: 15px; line-height: 1.6; color: var(--text); margin: 0 0 6px; }

.arh-app .onb-done-text strong { color: var(--navy); }

.arh-app .onb-done-help { font-size: 13px; color: var(--muted); margin: 22px 0 0; }

/* Narrow screens: the column becomes a bar on top, steps in a row, only the
   current step named. */
@media (max-width: 860px) {
    .arh-app .onb-box { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .arh-app .onb-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 20px; }
    .arh-app .onb-side-label { display: none; }
    .arh-app .onb-steps { order: 3; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
    .arh-app .onb-step { padding: 0; }
    .arh-app .onb-step::after { display: none; }
    .arh-app .onb-step-label { display: none; }
    .arh-app .onb-step.active .onb-step-label { display: inline; }
    .arh-app .onb-signout { margin: 0 0 0 auto; padding: 0; }
    .arh-app .onb-body { padding: 24px 20px 28px; }
}

@media (max-width: 760px) {
    .arh-app .onb-cards { grid-template-columns: 1fr; }
}

.arh-app .user-card { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--app-bg); }

.arh-app .user-card-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

.arh-app .user-card-initials { width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: var(--surface);
    display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }

.arh-app .user-card-info { display: flex; flex-direction: column; min-width: 0; }

.arh-app .user-card-info strong { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3; }

.arh-app .user-card-info span { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Company profile header (logo avatar + inline-editable name, LinkedIn-style) */

.arh-app .co-profile { display: flex; align-items: center; gap: 20px; margin: 6px 0 26px; }

.arh-app .co-avatar { position: relative; width: 96px; height: 96px; flex: 0 0 auto;
    border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }

.arh-app .co-avatar-img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }

.arh-app .co-avatar-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--teal); color: var(--surface); font-size: 30px; font-weight: 800; letter-spacing: 0.5px; }

.arh-app .co-avatar-edit { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px;
    background: linear-gradient(transparent 52%, rgba(var(--navy-rgb),0.62)); color: var(--surface);
    font-size: 10.5px; font-weight: 700; text-align: center;
    opacity: 0; cursor: pointer; transition: opacity .15s; }

.arh-app .co-avatar:hover .co-avatar-edit { opacity: 1; }

.arh-app .co-avatar-remove { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px;
    border: 0; border-radius: 50%; background: rgba(var(--navy-rgb),0.55); color: var(--surface);
    display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
    opacity: 0; transition: opacity .15s, background .12s; }

.arh-app .co-avatar-remove svg { width: 12px; height: 12px; }

.arh-app .co-avatar:hover .co-avatar-remove { opacity: 1; }

.arh-app .co-avatar-remove:hover { background: var(--red); }

.arh-app .co-profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.arh-app .co-profile-name,
.arh-app .co-profile-sub { width: 100%; box-sizing: border-box; border: 0; outline: none;
    background: transparent; font-family: inherit; color: var(--text);
    padding: 3px 8px; margin-left: -8px; border-radius: 7px;
    transition: background .12s, box-shadow .12s; }

.arh-app .co-profile-name { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }

.arh-app .co-profile-sub { font-size: 13.5px; font-weight: 500; color: var(--muted); }

.arh-app .co-profile-name:hover,
.arh-app .co-profile-sub:hover { background: rgba(var(--navy-rgb),0.06); }

.arh-app .co-profile-name:focus,
.arh-app .co-profile-sub:focus { background: var(--surface);
    box-shadow: 0 0 0 2px rgba(var(--teal-rgb),0.22); }

.arh-app .co-profile-name::placeholder,
.arh-app .co-profile-sub::placeholder { color: var(--muted); opacity: 0.55; }

.arh-app .logo-input { display: none; }

/* ── Editable text (read-only view + Uredi → auto-growing textarea) ── */

.arh-app .et { margin-bottom: 4px; }

.arh-app .et-view { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px;
    border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); }

.arh-app .et-text { flex: 1; min-width: 0; white-space: pre-line; font-size: 13px; line-height: 1.65; color: var(--text); }

.arh-app .et-text.et-empty { color: var(--muted); font-style: italic; }




.arh-app .et-area { display: block; min-height: 0; overflow: hidden; resize: none; }

/* ── Global textarea baseline — replaces the ugly browser default ──── */

.arh-app textarea { font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.65; color: var(--text);
    width: 100%; box-sizing: border-box; padding: 12px 14px; background: var(--surface);
    border: 1.5px solid var(--line); border-radius: 10px; outline: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s; }

.arh-app textarea:hover { border-color: rgba(var(--navy-rgb),0.26); }

.arh-app textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb),0.14); background: var(--surface); }

.arh-app textarea::placeholder { color: var(--muted); opacity: 0.65; }

/* ── Stage 2: potrditev ponudbe ─────────────────────────── */

.arh-app .s2-hero { text-align: center; padding: 44px 20px 36px; }

.arh-app .s2-check { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%;
    background: rgba(111,128,88,0.16); color: var(--vivid); display: flex; align-items: center; justify-content: center; }

.arh-app .s2-check svg { width: 36px; height: 36px; }

.arh-app .s2-wait { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%;
    background: rgba(180,123,38,0.14); color: var(--orange); display: flex; align-items: center; justify-content: center; }

.arh-app .s2-wait svg { width: 38px; height: 38px; }

.arh-app .s2-hero-title { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 8px; }

.arh-app .s2-hero-sub { font-size: 14px; color: var(--muted); }

.arh-app .s2-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 200; }

.arh-app .s2-doc-list { display: flex; flex-direction: column; gap: 10px; }

.arh-app .s2-doc-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    padding: 15px 18px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface);
    font-family: inherit; cursor: pointer; transition: border-color .15s, background .12s; }

.arh-app .s2-doc-row:hover { border-color: rgba(var(--navy-rgb),0.26); background: rgba(var(--navy-rgb),0.02); }

.arh-app .s2-doc-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border-radius: 50%; background: rgba(var(--teal-rgb),0.12); color: var(--teal); font-size: 12px; font-weight: 800; flex-shrink: 0; }

/* The DGD zaključek reuses the same circle as an icon badge instead of a
   step number. */
.arh-app .s2-doc-num svg { width: 15px; height: 15px; display: block; }

.arh-app .s2-doc-info { flex: 1; min-width: 0; }

.arh-app .s2-doc-title { font-size: 14px; font-weight: 700; color: var(--text); }

.arh-app .s2-doc-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Dokumenti za podpis: include checkbox + title in a catalog-style card head. */
.arh-app .s2-pick-head { flex-wrap: wrap; }

.arh-app .s2-pick { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; }


.arh-app .s2-pick-off { color: var(--muted); font-weight: 600; text-decoration: line-through; }

/* DGD zaključek: closing a revision and the list of closed versions. */
.arh-app .dgd-version-close { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px;
    margin: -12px 0 28px; }

.arh-app .dgd-version-label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700;
    color: var(--muted); min-width: 240px; }

.arh-app .dgd-version-row { cursor: default; }

.arh-app .dgd-version-row:hover { border-color: var(--line); background: var(--surface); }

.arh-app .dgd-version-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.arh-app .dgd-version-error { color: var(--red); }

.arh-app .dgd-version-open { margin-top: 4px; }

.arh-app .dgd-version-checks { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.arh-app .dgd-version-check { font-size: 12px; color: var(--muted); }

.arh-app .dgd-version-check-label { font-weight: 700; color: var(--text); }

.arh-app .dgd-version-check-msg { padding-left: 10px; }

/* Preverba popolnosti (completeness.js): one card per checklist item with its
   status badge, the open problems under it and a link to where each is fixed.
   Shown in the zaključek step. */
.arh-app .cmp-box { margin-bottom: 24px; }

.arh-app .cmp-summary { margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--vivid); }

.arh-app .cmp-summary.is-open { color: var(--orange); }

.arh-app .cmp-list { display: flex; flex-direction: column; gap: 8px; }

.arh-app .cmp-item { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px;
    border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface); }

.arh-app .cmp-item.is-open { border-color: rgba(var(--orange-rgb), 0.28); }

.arh-app .cmp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.arh-app .cmp-label { flex: 1 1 200px; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text); }

.arh-app .cmp-note { font-size: 12px; color: var(--muted); }

.arh-app .cmp-problems { display: flex; flex-direction: column; gap: 4px; }

.arh-app .cmp-problem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13px;
    color: var(--text); }

.arh-app .cmp-problem-msg { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }

.arh-app .doc-checklist { margin-bottom: 16px; }

.arh-app .s2-doc-readonly { margin-top: 14px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 10px;
    background: var(--surface); white-space: pre-line; font-size: 13px; line-height: 1.65; color: var(--text); }

/* Document template placeholders legend (company settings → Dokumenti) */

.arh-app .tpl-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

.arh-app .tpl-ph { font-size: 11.5px; font-weight: 600; color: var(--teal); background: rgba(var(--teal-rgb),0.08);
    border: 1px solid rgba(var(--teal-rgb),0.2); border-radius: 6px; padding: 3px 8px; }

/* Create modal */

.arh-app .modal { background: var(--surface); border-radius: 12px; padding: 30px; width: 440px; max-width: 92vw;
    box-shadow: 0 24px 60px rgba(var(--navy-rgb),0.28); }

.arh-app .modal h3 { font-size: 18px; font-weight: 800; margin: 0 0 5px; }

.arh-app .modal p { font-size: 13px; color: var(--muted); margin: 0 0 22px; }
.arh-app .modal p a { color: var(--navy); font-weight: 600; }

.arh-app .ko-wrap { position: relative; }

.arh-app .ko-dd { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 1.5px solid var(--line);
    border-top: none; border-radius: 0 0 8px 8px; max-height: 210px; overflow-y: auto; z-index: 50; display: none; }

.arh-app .ko-dd.open { display: block; }

.arh-app .ko-dd-item { padding: 9px 14px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; }

.arh-app .ko-dd-item:hover,
.arh-app .ko-dd-item.hl { background: rgba(var(--navy-rgb),0.05); }

.arh-app .ko-dd-id { font-size: 11px; color: var(--muted); }

.arh-app .modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

.arh-app .modal-err { margin: 12px 0 0; }

/* ── Stage 2: grafične priloge — drawing upload widget ─────────────── */

.arh-app .du-input { display: none; }

/* Two mandatory upload slots side by side: načrti + geodetski posnetek. */
.arh-app .du-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }

.arh-app .du-slots.du-busy { pointer-events: none; opacity: 0.6; }

.arh-app .du-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--app-bg); }

.arh-app .du-slot--filled { border-color: var(--teal); }

.arh-app .du-slot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

.arh-app .du-slot-req { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 5px; }

.arh-app .du-slot--filled .du-slot-req { color: var(--teal); border-color: var(--teal); }

.arh-app .du-choice-icon { color: var(--teal); line-height: 0; }

.arh-app .du-choice-icon svg { width: 22px; height: 22px; }

.arh-app .du-choice-title { font-size: 14px; font-weight: 700; color: var(--text); }

.arh-app .du-choice-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.arh-app .du-choice-btn { margin-top: auto; align-self: stretch; }

/* The slot's own file list sits between the description and its picker. */
.arh-app .du-slot .du-list { align-self: stretch; margin-bottom: 14px; }

.arh-app .du-slot .du-list:empty { display: none; }

@media (max-width: 760px) {
    .arh-app .du-slots { grid-template-columns: 1fr; }
}

.arh-app .du-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.arh-app .du-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line-soft);
    border-radius: 9px; background: var(--surface); }

.arh-app .du-item-ext { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; color: var(--teal);
    background: rgba(var(--teal-rgb),0.10); border-radius: 5px; padding: 3px 6px; }

.arh-app .du-item-name { flex: 1; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Name + note stacked (drawing-versions.js history rows) */
.arh-app .du-item-info { flex: 1; min-width: 0; }

.arh-app .du-item-info .du-item-name { display: block; }

.arh-app .du-item-note { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



.arh-app .du-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 18px; }

.arh-app .du-status { font-size: 12.5px; color: var(--muted); }

.arh-app .du-status--busy { color: var(--teal); }

.arh-app .du-status--error { color: var(--red); }

.arh-app .drawing-version-modal { width: min(620px, calc(100vw - 32px)); }
.arh-app .drawing-version-review { display: grid; gap: 7px; margin-top: 14px; }
.arh-app .drawing-version-review label { font-size: 13px; font-weight: 650; color: var(--text); }
.arh-app .drawing-version-review input { width: 100%; }
.arh-app .drawing-archive-manifest { white-space: pre-wrap; }
.arh-app .drawing-archive-data { max-height: 50vh; margin: 0; padding: 12px; overflow: auto;
    border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
    font: 12px/1.45 "JetBrains Mono", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.arh-app .drawing-history { display: flex; flex-direction: column; gap: 8px; }
.arh-app .panel-foot-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.arh-app .drawing-extra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0 -8px; }
.arh-app .drawing-extra-hint { font-size: 12px; color: var(--muted); }
.arh-app .du-item-tag { font-size: 11px; color: var(--muted); }
.arh-app .drawing-upload-section .du-status { margin-top: 8px; }
.arh-app .drawing-upload-section .du-status:empty { display: none; }
.arh-app .drawing-history-title { margin: 18px 0 8px; font-size: 12px; font-weight: 800;
    letter-spacing: 0.45px; text-transform: uppercase; color: var(--muted); }
.arh-app .drawing-history-row .btn-text { margin-left: auto; }

.arh-app .du-proc-note { font-size: 12.5px; color: var(--teal); background: rgba(var(--teal-rgb),0.06);
    border: 1px solid rgba(var(--teal-rgb),0.16); border-radius: 9px; padding: 12px 14px; margin-bottom: 14px; line-height: 1.5; }

.arh-app .du-item--busy { background: var(--app-bg); }

@keyframes du-spin { to { transform: rotate(360deg); } }

.arh-app .du-item-spin { width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--teal); animation: du-spin 0.8s linear infinite; }

/* Company drawing profile: project cards and upload actions. */
.arh-app .dp-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.arh-app .dp-project-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 32px; }
.arh-app .dp-upload-actions, .arh-app .dp-submit-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.arh-app .dp-upload-actions { justify-content: space-between; margin: 20px 0 12px; }
.arh-app .dp-upload .du-status:empty { display: none; }
.arh-app .dp-finding-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.arh-app .dp-spacer { flex: 1; }
.arh-app .dp-statement { width: 100%; resize: vertical; }
.arh-app .dp-evidence, .arh-app .dp-samples { color: var(--muted); font-size: 12px; line-height: 1.7; padding-left: 18px; }

/* ── Stage 2: extraction summary + objekt cards ───────────────────── */

.arh-app .idz-summary { border: 1px solid var(--line-soft); border-radius: 12px; padding: 18px 20px; background: var(--app-bg); }

/* Stage 2: section-based tehnicno porocilo (idz_porocilo.js) — document-like
   flow: heading + read-only text per section, a pencil icon opens it as an
   editable textarea. */
.arh-app .idz-sekcija { margin: 24px 0 0; }

.arh-app .idz-sekcija-head { display: flex; align-items: baseline; gap: 10px;
    padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; }

.arh-app .idz-sekcija-title { flex: 1; font-size: 14px; font-weight: 800; color: var(--text); }

/* Main sections (Lokacija, Predvideni posegi) get a larger title, matching
   the "Priključki" group heading; priključek/custom sections stay small. */
.arh-app .idz-sekcija-title-lg { font-size: 17px; }

/* Group heading above a run of sections (e.g. "Priključki" above the
   connection sections) — not its own editable section; same size as a
   main section title. */
.arh-app .idz-group-title { margin: 32px 0 6px; font-size: 17px; font-weight: 800; color: var(--text); }

.arh-app .idz-prose { font-size: 13.5px; color: var(--text); line-height: 1.65; }

.arh-app .idz-prose p { margin: 0 0 10px; }

.arh-app .idz-prose p:last-child { margin-bottom: 0; }

.arh-app .idz-prose-subtitle { margin: 14px 0 5px; font-size: 14px;
    font-weight: 800; color: var(--text); }

.arh-app .idz-prose-subtitle:first-child { margin-top: 0; }

.arh-app .idz-prose-edit { min-height: 100px; }

.arh-app .idz-custom-title { flex: 1; font-size: 14px; font-weight: 800; }

/* Dismissible "Negotovosti" warning — yellow box, checkmark hides it. */
.arh-app .idz-negotovost { display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 8px; padding: 10px 12px; border-radius: 9px; font-size: 13.5px;
    line-height: 1.5; color: var(--orange); background: rgba(var(--orange-rgb), 0.12);
    border: 1px solid rgba(var(--orange-rgb), 0.3); }

.arh-app .idz-negotovost-text { flex: 1; }

.arh-app .idz-negotovost-dismiss { color: var(--orange); }
.arh-app .idz-negotovost-dismiss:hover { background: rgba(var(--orange-rgb), 0.2); color: var(--orange); }

/* Separates the "+ Dodaj sekcijo" button from the sections above it. */
.arh-app .idz-add-section-row { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-soft); }

.arh-app .idz-summary-head { font-size: 14px; font-weight: 700; color: var(--text); }


.arh-app .idz-file-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.arh-app .idz-file-tag { font-size: 11.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: 6px; padding: 3px 8px; }

/* ── Stage 2: tehnično poročilo — objekt cards (ported) ───────────── */

.arh-app .step-actions-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 20px; }

.arh-app .step-actions-row .actions-right { display: flex; gap: 10px; }

.arh-app .idz-actions-msg { font-size: 12px; color: var(--muted); }

.arh-app .idz-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 30px; }

/* Add/upload actions are btn btn-secondary btn-sm with a registry icon (plus, upload). */



.arh-app .objekt-card { border: 1px solid var(--line-soft); border-radius: 12px; padding: 20px; margin-bottom: 16px; background: var(--surface); }

.arh-app .objekt-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }

.arh-app .objekt-card-title { font-size: 14px; font-weight: 700; color: var(--text); }

.arh-app .objekt-card-actions { display: flex; gap: 12px; }

.arh-app .objekt-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 16px; }

.arh-app .objekt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }

/* Dense variant for short numeric inputs — four per row. */
.arh-app .objekt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 16px; }

/* Consecutive grids inside one card are just rows of the same form, so the
   space between them matches the grids' own row gap (they gap internally but
   carry no margin of their own). */
.arh-app .objekt-grid + .objekt-grid,
.arh-app .objekt-grid + .objekt-grid-2,
.arh-app .objekt-grid + .objekt-grid-4,
.arh-app .objekt-grid-2 + .objekt-grid,
.arh-app .objekt-grid-2 + .objekt-grid-2,
.arh-app .objekt-grid-2 + .objekt-grid-4,
.arh-app .objekt-grid-4 + .objekt-grid,
.arh-app .objekt-grid-4 + .objekt-grid-2,
.arh-app .objekt-grid-4 + .objekt-grid-4 { margin-top: 14px; }

/* Labels of different lengths wrap to different heights; bottom-align them so
   every input in a grid row sits on the same line and spacing stays even. */
.arh-app .objekt-grid > .form-field,
.arh-app .objekt-grid-2 > .form-field,
.arh-app .objekt-grid-4 > .form-field { display: flex; flex-direction: column; }
.arh-app .objekt-grid > .form-field > label,
.arh-app .objekt-grid-2 > .form-field > label,
.arh-app .objekt-grid-4 > .form-field > label { flex: 1 0 auto; display: flex; align-items: flex-end; }

/* Group heading — deliberately distinct from field labels (which are small
   muted uppercase): darker text, no uppercase, and a hairline rule so each
   group of fields reads as its own block. */
.arh-app .objekt-section-label { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none;
    color: var(--text); margin: 22px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }

.arh-app .objekt-section-hint { font-size: 12px; color: var(--muted); margin-bottom: 8px; }

/* Zunanja ureditev — free-text field + optional m² in the card head. */
.arh-app .zu-textarea {
    width: 100%; box-sizing: border-box; padding: 12px 14px;
    border: 1.5px solid var(--line); border-radius: 10px;
    font-size: 13px; font-weight: 500; font-family: inherit; line-height: 1.55;
    color: var(--text); background: var(--surface); outline: none; resize: vertical; min-height: 96px;
    transition: border-color .15s, box-shadow .15s; }
.arh-app .zu-textarea::placeholder { color: var(--muted); opacity: 0.65; }
.arh-app .zu-textarea:hover { border-color: rgba(var(--navy-rgb),0.26); }
.arh-app .zu-textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb),0.14); }

.arh-app .zu-m2-field { display: flex; align-items: center; gap: 8px; }

/* Podatki o zemljiščih (4C) — parcel/priključek tables: flex rows so the same
   layout serves 2-, 3- and 4-column tables. Header is muted uppercase; each
   data cell flexes equally, the actions cell is fixed width. */
.arh-app .zem-table { margin-bottom: 8px; }
.arh-app .zem-tr { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.arh-app .zem-td { flex: 1 1 0; min-width: 0; }
.arh-app .zem-td input,
.arh-app .zem-td select { width: 100%; box-sizing: border-box; height: 40px; }
.arh-app .zem-td-actions { flex: 0 0 34px; display: flex; justify-content: flex-end; }
.arh-app .zem-th { margin-bottom: 6px; }
.arh-app .zem-th .zem-td { font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); }
.arh-app .zem-table-foot { margin-top: 4px; }
.arh-app .zem-table-narrative > .zem-th { display: none; }
.arh-app .zem-table-narrative > .zem-tr:not(.zem-th) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; padding: 16px 36px 16px 0; border-bottom: 1px solid var(--line); gap: 16px; position: relative; }
/* The grid would drop the remove button on a line of its own: pin it to the corner. */
.arh-app .zem-table-narrative > .zem-tr:not(.zem-th) > .zem-td-actions { position: absolute; top: 14px; right: 0; }
.arh-app .zem-table-narrative .zem-narrative { grid-column: 1 / -1; }
/* Mesto + potek priključka: the four location fields share one line. */
.arh-app .zem-table-quad > .zem-tr:not(.zem-th) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .arh-app .zem-table-quad > .zem-tr:not(.zem-th) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.arh-app .zem-table-narrative .zem-narrative .dgd-long-text { min-height: 56px; }
.arh-app .zem-table-narrative .zem-td label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }

/* Read-only computed value (velikost gradbene parcele = vsota območij). */
.arh-app .zem-readonly { height: 42px; display: flex; align-items: center; padding: 0 14px;
    border: 1.5px solid var(--line-soft); border-radius: 9px; background: var(--panel);
    font-size: 13px; font-weight: 600; color: var(--text); }

/* Top-level seznam heading — larger than a field-group label. */
.arh-app .zem-section-title { font-size: 15px; margin-top: 30px; }

/* Land disclosure headings stay borderless; form groups provide the card borders. */
.arh-app .dgd-root .zem-section { border: 0; border-radius: 0; }
.arh-app .dgd-root .zem-section > summary { padding: 10px 0; border-bottom: 1px solid var(--line); }
.arh-app .dgd-root .zem-section > :not(summary) { padding: 14px 0 0; }
.arh-app .dgd-root .zem-section > .objekt-card { margin-top: 12px; padding: 18px; }

/* Priloga 4D (odmera odškodnine) — osem stolpcev uradnega obrazca ne gre v
   širino panela, zato tabela drsi vodoravno, namesto da bi stisnila polja. */
.arh-app .od-scroll { overflow-x: auto; padding-bottom: 4px; }
.arh-app .od-table { min-width: 1160px; }
.arh-app .od-table .zem-tr { align-items: flex-start; }
.arh-app .od-table .zem-td-actions { padding-top: 4px; }
.arh-app .od-facts { display: flex; flex-direction: column; gap: 6px; }
.arh-app .od-fact { font-size: 13px; color: var(--text); }
.arh-app .od-total { font-size: 16px; font-weight: 800; color: var(--teal); }
.arh-app .od-note { padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 9px;
    background: var(--panel); margin-bottom: 14px; }

.arh-app .zu-m2-field label { margin-bottom: 0; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px; color: var(--muted); white-space: nowrap; }
.arh-app .zu-m2-field input {
    width: 110px; height: 38px; box-sizing: border-box; padding: 0 12px;
    border: 1.5px solid var(--line); border-radius: 10px;
    font-size: 13px; font-weight: 500; font-family: inherit; color: var(--text);
    background: var(--surface); outline: none; transition: border-color .15s, box-shadow .15s; }
.arh-app .zu-m2-field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb),0.14); }

/* Podatki o gradnji — a–e vs. parcela consistency line under the kazalci grid. */
.arh-app .uk-sum-mismatch { color: var(--red); font-weight: 600; }

.arh-app .idz-zazidana { padding: 0 12px; height: 42px; display: flex; align-items: center; font-size: 13px; color: var(--muted);
    background: var(--app-bg); border: 1.5px solid var(--line-soft); border-radius: 8px; }

/* Izpeljana vrednost brez vnosa — kot .idz-zazidana, a raste z vsebino. */
.arh-app .idz-derived { padding: 11px 12px; min-height: 42px; font-size: 13px; color: var(--muted);
    background: var(--app-bg); border: 1.5px solid var(--line-soft); border-radius: 8px;
    white-space: pre-wrap; line-height: 1.55; }

.arh-app .idz-derived:empty::before { content: '—'; }

.arh-app .objekt-description { width: 100%; min-height: 180px; box-sizing: border-box; padding: 14px 16px;
    border: 1.5px solid var(--line-soft); border-radius: 8px; background: var(--surface); color: var(--text);
    outline: none; resize: vertical; font-family: inherit; font-size: 13px; line-height: 1.6; transition: border-color .15s; }

.arh-app .objekt-description:focus { border-color: var(--teal); }
.arh-app .dgd-root .objekt-description.dgd-long-text { min-height: 90px; field-sizing: content; }
/* An expert's gradiva in their 1B block; the expected ones still open below the list. */
.arh-app .expert-gradiva { margin-top: 12px; }
.arh-app .expert-gradiva > .auth-docs { margin-bottom: 6px; }
.arh-app .expert-gradiva > .btn-text { margin-left: -8px; }
.arh-app .expert-gradiva .auth-doc-row .auth-actions { margin-left: auto; }
.arh-app .expert-gradiva-open { margin-top: 24px; }
.arh-app .expert-gradiva-open .auth-doc-row .auth-actions { margin-left: auto; }

.arh-app .objekt-description::placeholder { color: var(--muted); font-style: italic; }

.arh-app .objekt-preview { position: relative; width: 100%; height: 312px; background: var(--surface); border: 1px solid var(--line-soft);
    border-radius: 8px; margin: 0 0 16px; overflow: hidden; touch-action: none; }

.arh-app .objekt-preview canvas { display: block; width: 100%; height: 100%; cursor: grab; outline: none; }

.arh-app .objekt-preview canvas:active { cursor: grabbing; }

.arh-app .objekt-preview-labels { position: absolute; top: 0; left: 0; pointer-events: none; }

.arh-app .objekt-preview-empty { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
    font-size: 12px; color: var(--muted); padding: 16px; text-align: center; background: var(--surface); }

.arh-app .objekt-dim-label { font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; user-select: none;
    transform: translate(-50%, -50%); line-height: 1.15; text-align: center; transition: opacity .12s linear; }

.arh-app .objekt-dim-bld { background: var(--surface); color: var(--navy); padding: 1px 6px; border: 1px solid var(--navy); border-radius: 3px; font-size: 11px; }

.arh-app .objekt-dim-side { color: var(--navy); font-size: 11px; text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface), 0 0 3px var(--surface); }

.arh-app .objekt-dim-side .parcela { font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

.arh-app .objekt-dim-side .dist { font-weight: 700; color: var(--red); font-size: 11px; margin-top: 2px; }

/* 3D massing above Podatki o objektih (building-model.js) — decorative, removable. */
.arh-app .dgd-root .objekt-preview.building-model { height: 340px; }

.arh-app .building-model-caption { position: absolute; left: 12px; bottom: 10px; font-size: 11px; color: var(--muted);
    pointer-events: none; }

@media (max-width: 860px) {
  .arh-app .objekt-grid,
.arh-app .objekt-grid-2 { grid-template-columns: 1fr; }
  .arh-app .objekt-grid-4 { grid-template-columns: 1fr 1fr; }
  .arh-app .step-actions-row { flex-direction: column; align-items: stretch; }
}

/* ── Stage 2: projektni pogoji (ported) ──────────────────────────── */

.arh-app .idz-pogoji-meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; }

.arh-app .pogoji-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.arh-app .pogoji-row-name-cat { grid-row: 2; grid-column: 1; font-size: 10px; color: var(--muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0 10px; align-self: start; }

.arh-app .pogoji-row-label { display: flex; align-items: center; height: 34px; box-sizing: border-box; padding: 0 10px;
    font-size: 13px; color: var(--text); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



/* ── Standalone views: OPN viewer + dokumentacija (outside the stage flow) ── */

.arh-app .opn-meta { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; }

.arh-app .opn-meta-name { font-size: 22px; font-weight: 700; line-height: 1.25; }

.arh-app .opn-meta-count { font-size: 13px; color: var(--muted); }

.arh-app .opn-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }

.arh-app .opn-toc { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 10px;
    max-height: calc(100vh - 60px); }

.arh-app .opn-toc-filter { width: 100%; }

.arh-app .opn-toc-list { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; padding-right: 4px; }

.arh-app .opn-toc-item { display: grid; gap: 1px; padding: 7px 10px; border-radius: 6px; text-decoration: none;
    color: var(--text); border-left: 3px solid transparent; transition: background .15s, border-color .15s; }

.arh-app .opn-toc-item:hover { background: rgba(0,0,0,0.04); }

.arh-app .opn-toc-item.active { background: rgba(0,0,0,0.04); border-left-color: var(--teal); }

.arh-app .opn-toc-n { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: 0.3px; }

.arh-app .opn-toc-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; }

.arh-app .opn-doc { max-width: 820px; font-size: 14.5px; line-height: 1.65; color: var(--text); }

.arh-app .opn-doc h1 { font-size: 20px; }

.arh-app .opn-doc h2 { font-size: 17px; }

.arh-app .opn-doc h3, .arh-app .opn-doc h4, .arh-app .opn-doc h5, .arh-app .opn-doc h6 { font-size: 15px; }

.arh-app .opn-doc h1, .arh-app .opn-doc h2, .arh-app .opn-doc h3,
.arh-app .opn-doc h4, .arh-app .opn-doc h5, .arh-app .opn-doc h6 {
    font-weight: 800; letter-spacing: -0.2px; margin: 26px 0 10px; scroll-margin-top: 20px; }

.arh-app .opn-doc .opn-clen { padding-top: 6px; border-top: 1px solid var(--app-line); color: var(--navy); }

.arh-app .opn-doc p, .arh-app .opn-doc li { margin: 8px 0; }

.arh-app .opn-doc ul, .arh-app .opn-doc ol { padding-left: 20px; }

.arh-app .opn-doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; display: block;
    overflow-x: auto; }

.arh-app .opn-doc th, .arh-app .opn-doc td { border: 1px solid var(--app-line); padding: 6px 9px; text-align: left;
    vertical-align: top; }

.arh-app .opn-doc th { background: rgba(0,0,0,0.03); font-weight: 700; }

.arh-app .todo-empty { display: flex; align-items: center; justify-content: center; min-height: 220px;
    border: 1px dashed var(--app-line); border-radius: 12px; color: var(--muted); font-size: 13px;
    font-weight: 700; letter-spacing: 1.5px; }

/* Projektni pogoji · faza 1 — potrditev predlaganih mnenjedajalcev.
   Naziv, naslov in e-naslov so urejljivi: register za nekatere organe naslova
   nima, in brez njega zahteve ni mogoče poslati. */
.arh-app .pogoji-pick-row { display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 24px;
    grid-template-rows: 34px auto; column-gap: 12px; row-gap: 4px; align-items: center;
    padding: 10px 14px; border: 1px solid var(--line-soft); background: var(--surface);
    border-radius: 9px; }

.arh-app .pogoji-pick-input { height: 34px; box-sizing: border-box; padding: 0 10px; min-width: 0;
    font: inherit; font-size: 13px; color: var(--text); background: var(--card);
    border: 1px solid var(--line); border-radius: 7px; }

.arh-app .pogoji-pick-input:focus { outline: none; border-color: var(--app-line); }

.arh-app .pogoji-pick-email { font-size: 12px; width: 100%; }

/* Address cell: reads as text with a pencil; becomes a field when empty */
.arh-app .pogoji-pick-email-cell { display: flex; align-items: center; gap: 6px;
    height: 34px; min-width: 0; }

.arh-app .pogoji-pick-email-val { font-size: 12px; color: var(--muted); padding-left: 10px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }




.arh-app .pogoji-pick-row .pogoji-row-name-cat { grid-row: 2; grid-column: 1; }

@media (max-width: 860px) {
  .arh-app .pogoji-pick-row { grid-template-columns: minmax(0, 1fr) 24px; grid-template-rows: auto; }
  .arh-app .pogoji-pick-row > [data-field="institucija"] { grid-column: 1; grid-row: 1; }
  .arh-app .pogoji-pick-row > [data-field="naslov"] { grid-column: 1; grid-row: 2; }
  .arh-app .pogoji-pick-row > [data-field="email"] { grid-column: 1; grid-row: 3; }
  .arh-app .pogoji-pick-row .pogoji-row-remove { grid-column: 2; grid-row: 1; }
  .arh-app .pogoji-pick-row .pogoji-row-name-cat { grid-column: 1; grid-row: 4; }
}

/* panel-foot holds one reactive child, so the buttons need their own flex row */
.arh-app .panel-foot-inner { display: flex; justify-content: flex-end; gap: 12px; width: 100%; }

/* Dodajanje mnenjedajalca: iskanje po vrstah mnenj iz Priloge 4A */
.arh-app .pogoji-tip-input { width: 100%; height: 38px; box-sizing: border-box; padding: 0 12px;
    font: inherit; font-size: 13px; color: var(--text); background: var(--card);
    border: 1px dashed var(--line); border-radius: 9px; }

.arh-app .pogoji-tip-input:focus { outline: none; border-style: solid; border-color: var(--app-line); }

.arh-app .pogoji-tip-input::placeholder { color: var(--muted); }

.arh-app .pogoji-add {
 margin-top: 16px;
 position: relative;
}

/* .btn is inline-flex, which would beat the hidden attribute */
.arh-app .pogoji-add [hidden] { display: none; }

.arh-app .pogoji-tip-results:not(:empty) { position: absolute; z-index: 20; left: 0; right: 0; top: 42px;
    max-height: 320px; overflow-y: auto; padding: 6px; background: var(--surface);
    border: 1px solid var(--app-line); border-radius: 10px;
    box-shadow: 0 12px 28px rgba(var(--navy-rgb),0.14); }

.arh-app .pogoji-tip-blok { font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: var(--muted); padding: 10px 10px 5px; }

.arh-app .pogoji-tip-opt { padding: 7px 10px; border-radius: 7px; cursor: pointer; }

.arh-app .pogoji-tip-opt:hover { background: rgba(var(--navy-rgb),0.05); }

.arh-app .pogoji-tip-naziv { font-size: 13.5px; color: var(--text); }

.arh-app .pogoji-tip-sub { font-size: 11px; color: var(--muted); }

/* Already on the list — shown, not hidden, so the absence reads as deliberate */
.arh-app .pogoji-tip-opt.is-taken { cursor: default; opacity: 0.45; }

.arh-app .pogoji-tip-opt.is-taken:hover { background: none; }

.arh-app .pogoji-tip-none { padding: 10px; font-size: 13px; color: var(--muted); }

/* Mnenjedajalci — kartica na organ z obema sledema (authority-rows.js):
   projektni pogoji in mnenje, datum zahteve, zgodovina prejetih dokumentov,
   dejanja. Platforma ne pošilja e-pošte; arhitekt zahtevo pošlje sam. */
.arh-app .auth-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.arh-app .auth-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
    border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface); }

.arh-app .auth-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

.arh-app .auth-name { flex: 1 1 220px; min-width: 0; }

.arh-app .auth-inst { font-size: 14px; font-weight: 700; color: var(--text); }

.arh-app .auth-cat { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase;
    letter-spacing: 0.05em; margin-top: 2px; }

.arh-app .auth-email { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted);
    min-width: 0; overflow-wrap: anywhere; }

.arh-app .auth-email.is-empty { font-style: italic; }

.arh-app .auth-tracks { display: flex; flex-direction: column; gap: 6px; }
.arh-app .auth-card > .auth-tracks { gap: 12px; }
.arh-app .auth-card > .auth-tracks > .auth-track { display: grid;
    grid-template-columns: 128px minmax(100px, 1fr) minmax(190px, auto); gap: 8px 12px; }
.arh-app .auth-track-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.arh-app .auth-card > .auth-tracks .badge { padding: 2px 6px; font-size: 9px; border-radius: 4px; }
.arh-app .auth-card > .auth-tracks .badge--green { background: rgba(111,128,88,.09); }
.arh-app .auth-card > .auth-tracks .badge--orange { background: rgba(180,123,38,.09); }
.arh-app .auth-card > .auth-tracks .badge--red { background: rgba(var(--red-rgb),.08); }
.arh-app .auth-card > .auth-tracks .badge--blue { background: rgba(var(--teal-rgb),.08); }
.arh-app .auth-card > .auth-tracks .badge--muted { background: rgba(var(--navy-rgb),.045); }
.arh-app .auth-history { border-top: 1px solid var(--line); margin-top: 8px; }
.arh-app .auth-history > summary { padding: 12px 0; }
.arh-app .auth-history .auth-docs { border-top: 0; }
.arh-app .auth-history .auth-doc { padding: 12px; background: var(--panel); border-radius: 8px; }
.arh-app .por-source { font-size: 12px; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; margin-top: 6px; }
.arh-app .por-source > summary { cursor: pointer; }
@media (max-width: 800px) {
    .arh-app .auth-card > .auth-tracks > .auth-track { grid-template-columns: 1fr 1fr; }
    .arh-app .auth-card > .auth-tracks > .auth-track > .auth-track-date { grid-column: 1 / -1; }
}

.arh-app .auth-track { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }

.arh-app .auth-track-label { width: 128px; flex: none; font-size: 12px; font-weight: 700; color: var(--muted); }

.arh-app .auth-track-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }

.arh-app .auth-date { height: 30px; box-sizing: border-box; padding: 0 8px; font: inherit; font-size: 12px;
    color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 7px; }






.arh-app .auth-docs { display: flex; flex-direction: column; gap: 6px; padding-top: 8px;
    border-top: 1px solid var(--line-soft); }

.arh-app .auth-doc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }

.arh-app .auth-doc-row select { height: 30px; font-size: 12px; }

.arh-app .auth-doc-row select.is-missing { border-color: var(--orange); }

.arh-app .auth-doc-name { font-weight: 600; color: var(--text); max-width: 260px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }

.arh-app .auth-doc-meta { font-size: 12px; color: var(--muted); }

.arh-app .auth-note { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 6px 10px; font: inherit;
    font-size: 12px; line-height: 1.5; color: var(--text); background: var(--card);
    border: 1px solid var(--line); border-radius: 7px; resize: vertical; }

.arh-app .auth-missing { font-size: 12px; color: var(--orange); }

.arh-app .auth-reminder { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
    color: var(--orange); }

.arh-app .auth-reminder svg { width: 14px; height: 14px; flex: none; }

.arh-app .auth-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arh-app .auth-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.arh-app .auth-inline > input { flex: 1 1 240px; min-width: 0; height: 36px; }
.arh-app .auth-inline .auth-actions { margin-left: auto; flex-wrap: nowrap; }
.arh-app .auth-inline .auth-actions > .btn-text:first-child { margin-left: 0; }
.arh-app .auth-list + .auth-actions { margin-top: 12px; }
/* A text button's own padding would indent its icon from the card edge. */
.arh-app .auth-actions > .btn-text:first-child { margin-left: -8px; }
.arh-app .auth-list + .btn-text { margin: 12px 0 0 -8px; }

.arh-app .auth-actions .btn svg { width: 14px; height: 14px; }

/* Zahteva za gradbeno dovoljenje (application-panel.js) above the 11A sheet:
   upravna enota, ocenjena vrednost with its BTP × €/m² hint, druge priloge. */
.arh-app .app11a { margin-bottom: 14px; }

.arh-app .app11a-hint { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.arh-app .app11a .form-field input.app11a-rate { width: 80px; height: 30px; padding: 0 8px; font-size: 12px; }

/* Client signing (signing-panel.js): who signs a document in the investors' portal. */
.arh-app .sign-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 8px; font-size: 12px; }

.arh-app .sign-pick-label { font-weight: 700; color: var(--muted); }

.arh-app .sign-pick-item { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.arh-app .app11a-signer.is-missing,
.arh-app .app11a-package .auth-doc-row.is-missing .auth-doc-meta { color: var(--orange); }

.arh-app .app11a-package { display: flex; flex-direction: column; gap: 8px; padding-top: 10px;
    border-top: 1px solid var(--line-soft); }

/* Oddaja in odločba (stage_oddaja.js): the case's phase above each step;
   pozivi za dopolnitev (completion-requests.js): numbered items with their
   state and a note of where each was fixed. */
.arh-app .subm-phase { margin-bottom: 14px; }

.arh-app .subm-add { margin-top: 12px; }

.arh-app .subm-items { display: flex; flex-direction: column; gap: 10px; padding-top: 8px;
    border-top: 1px solid var(--line-soft); }

.arh-app .subm-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }

.arh-app .subm-item-num { flex: none; width: 18px; font-weight: 700; color: var(--muted); }

.arh-app .subm-item-body { flex: 1 1 auto; min-width: 0; }

.arh-app .subm-item-edit { display: flex; align-items: center; gap: 6px; }

.arh-app .subm-item-edit input { flex: 1 1 auto; min-width: 0; }

.arh-app button.subm-status { flex: none; border: 0; cursor: pointer; }

.arh-app button.subm-status:disabled { cursor: default; }



/* Modal: naloži odgovor / ni potrebno / besedilo prejetega dokumenta */
.arh-app .auth-modal .auth-form-row { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; font-size: 13px; }

.arh-app .auth-modal .auth-form-row label { font-size: 12px; font-weight: 700; color: var(--muted); }

.arh-app .auth-modal .auth-note { width: 100%; box-sizing: border-box; padding: 6px 10px; font: inherit; font-size: 13px;
    border: 1px solid var(--line); border-radius: 7px; resize: vertical; }

.arh-app .modal.auth-modal-wide { width: 720px; }

.arh-app .auth-modal .auth-ocr { max-height: 60vh; overflow-y: auto; white-space: pre-wrap; font-size: 12.5px;
    line-height: 1.55; color: var(--text); background: var(--card); border: 1px solid var(--line);
    border-radius: 8px; padding: 12px 14px; }

.arh-app .auth-copy-head { display: flex; align-items: center; justify-content: space-between; }

.arh-app .auth-modal [hidden] { display: none; }

.arh-app .auth-clipboard { position: fixed; top: -1000px; left: 0; opacity: 0; }

/* Pregled dokumentacije — obrazci (prilogas 1A/1B/4A + one 8A per authority).
   The sheet reproduces the printed official form: a two-column ledger, a rule
   under every row, bold uppercase section headers, italic hints on their own
   line, real checkbox squares. Monochrome on purpose — the yellow in the source
   PDFs is Acrobat's form-field highlight, not part of the form. */

.arh-app .obr-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }

.arh-app .obr-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px;
    max-height: calc(100vh - 72px); overflow-y: auto; }

.arh-app .obr-rail-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 8px;
    width: 100%; text-align: left; font: inherit; background: transparent; cursor: pointer; border: 1px solid transparent; }

.arh-app .obr-rail-item:hover { background: rgba(var(--navy-rgb),0.04); }

.arh-app .obr-rail-item.active { background: var(--card); border-color: var(--app-line); }

.arh-app .obr-rail-oznaka { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    color: var(--muted); }

.arh-app .obr-rail-naslov { font-size: 13px; font-weight: 600; color: var(--text); }

.arh-app .obr-pane { max-width: 820px; min-width: 0; }

/* Page description and the (future) edit action share one row */

/* Določilo akta nosi alineje in vrstice preglednic v novih vrsticah. */
.arh-app .obr-sek .panel-desc { white-space: pre-wrap; }

/* The sheet itself — Arial, as the official workbook sets it. No frame: the
   rules inside the form already delimit it, and a box would fight them. At
   most the PDF's text width (A4 less 2 × 16 mm = 178 mm) and its 9 pt, so a
   line wraps where it will on paper. */
.arh-app .obr-sheet { color: #000; max-width: 673px;
    font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.35; }

.arh-app .obr-glava { margin-bottom: 32px; }

.arh-app .obr-glava-oznaka { font-size: 12px; font-weight: 700; margin-bottom: 10px; }

.arh-app .obr-glava-naslov { font-size: 20px; font-weight: 700; line-height: 1.25; }

.arh-app .obr-podnaslov { font-size: 12px; font-style: italic; margin: -22px 0 24px; }

/* Section: heavy rule above the bold uppercase title, hairline under it */
.arh-app .obr-sek { margin-bottom: 26px; }

.arh-app .obr-sek-head { font-size: 12px; font-weight: 700; padding: 5px 0 4px;
    border-top: 2px solid #000; border-bottom: 1px solid #000; }

/* A named group inside a section: a 1B discipline, a 4A mnenja block */
.arh-app .obr-blok-head { font-size: 12px; font-weight: 700; padding: 5px 0 4px; margin-top: 16px;
    border-bottom: 1px solid #000; }

.arh-app .obr-blok-dashed { border-top: 1px dashed #000; margin-top: 22px; }

/* Italic small print, on its own full-width line as the form prints it */
.arh-app .obr-namig { font-size: 11px; font-style: italic; color: #555;
    padding: 3px 0; border-bottom: 1px solid #ccc; }

/* "INVESTITOR 1" — a plain sub-heading row, not a styled block */
.arh-app .obr-podnaslov-row { font-size: 12px; padding: 4px 0 3px; border-bottom: 1px solid #ccc; }

/* Ledger row: label left, value right, hairline under */
.arh-app .obr-row { display: grid; grid-template-columns: 40% minmax(0, 60%);
    border-bottom: 1px solid #ccc; }

.arh-app .obr-row-l { padding: 4px 10px 3px 0; color: #000; overflow-wrap: anywhere; }

.arh-app .obr-row-v { padding: 4px 0 3px; font-weight: 700; white-space: pre-wrap;
    overflow-wrap: anywhere; }

.arh-app .obr-row-v.is-empty { min-height: 17px; }

.arh-app .obr-row-textarea .obr-row-v { font-weight: 700; }

.arh-app .obr-row-tall .obr-row-v,
.arh-app .obr-row-podpis .obr-row-v { min-height: 48px; }

/* Checkbox line: square + bold uppercase label in the value column */
.arh-app .obr-row-check .obr-row-v { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0 4px; }

.arh-app .obr-box { flex: none; width: 13px; height: 13px; margin-top: 1px; border: 1px solid #000;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; line-height: 1; font-weight: 700; }

.arh-app .obr-box-label { font-weight: 700; overflow-wrap: anywhere; }

/* Signature band: two headed columns over one tall box */
.arh-app .obr-podpis { margin-top: 30px; }

.arh-app .obr-podpis-head,
.arh-app .obr-podpis-band { display: grid; grid-template-columns: 1fr 1.4fr; }

.arh-app .obr-podpis-head { border-top: 1px solid #000; border-bottom: 1px solid #ccc; }

.arh-app .obr-podpis-l { padding: 4px 10px 3px 0; }

.arh-app .obr-podpis-band { border-bottom: 1px solid #000; }

.arh-app .obr-podpis-v { padding: 6px 10px 6px 0; min-height: 46px; font-weight: 700; }

.arh-app .obr-sig-img { max-height: 44px; max-width: 150px; margin-right: 10px; vertical-align: middle; object-fit: contain; }

/* The žig at its printed size (35 mm, the PDF's img.podpis-img.stamp) */
.arh-app .obr-sig-img.obr-stamp-img { max-height: 132px; max-width: 132px; }

/* Flags above the forms (form_people.checks) — same warm tone as the dashboard reminders. */
.arh-app .obr-checks { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; padding: 12px 16px;
    background: rgba(var(--orange-rgb), 0.06); border: 1px solid rgba(var(--orange-rgb), 0.28); border-radius: 14px; }

.arh-app .obr-checks-title { font-size: 12px; font-weight: 800; color: var(--orange); margin-bottom: 2px; }

.arh-app .obr-check { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--text); }

.arh-app .obr-check-forms { font-size: 11.5px; font-weight: 700; color: var(--muted); }

/* A closed DGD revision (documentation view, DGD wizard): read-only note with the way to reopen it. */
.arh-app .dgd-closed-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 16px; margin-bottom: 16px; padding: 12px 16px; background: rgba(var(--teal-rgb), 0.06);
    border: 1px solid rgba(var(--teal-rgb), 0.25); border-radius: 14px; }

.arh-app .dgd-closed-note-text { flex: 1 1 260px; font-size: 13px; color: var(--text); }

.arh-app .dgd-closed-note-text strong { color: var(--navy); }

/* A wizard save the server refused (e.g. a closed revision): its reason under the step title. */
.arh-app .dgd-save-error .dgd-error { padding: 0 0 12px; text-align: left; }

/* Rail folders (Priloga 22): a small uppercase label over each folder's items.
   An item left out of the package is dimmed; open issues show as a count. */
.arh-app .obr-rail-folder { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }

.arh-app .obr-rail-folder-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--muted); padding: 4px 11px 2px; }

.arh-app .obr-rail-empty { font-size: 12.5px; color: var(--muted); padding: 2px 11px 4px; }

.arh-app .obr-rail-item.is-out .obr-rail-naslov { color: var(--muted); text-decoration: line-through; }

.arh-app .obr-rail-flag { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
    margin-left: 6px; padding: 0 4px; border-radius: 8px; background: rgba(var(--orange-rgb), 0.16); color: var(--orange);
    font-size: 10px; font-weight: 800; letter-spacing: 0; vertical-align: 1px; }

/* Actions of the item on view (Prenesi PDF …) and its own open issues. */
.arh-app .obr-item-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }

.arh-app .obr-item-issues { margin-bottom: 20px; }

/* A drawing file: where it goes in the package, then its pages. */
.arh-app .obr-drawing-head { margin-bottom: 14px; }

.arh-app .obr-drawing-title { font-size: 16px; font-weight: 700; color: var(--text); }

.arh-app .obr-drawing-meta,
.arh-app .obr-drawing-note { font-size: 12.5px; color: var(--muted); }

.arh-app .obr-drawing-note { margin-bottom: 16px; }

.arh-app .obr-place-label { font-size: 12px; font-weight: 700; color: var(--muted); }

.arh-app .obr-place { min-width: 190px; }

.arh-app .obr-pages { display: flex; flex-direction: column; gap: 18px; }

.arh-app .obr-page-img { display: block; width: 100%; height: auto; border: 1px solid var(--app-line); border-radius: 8px;
    background: #fff; }

.arh-app .obr-page-num { margin-top: 4px; font-size: 11.5px; color: var(--muted); text-align: right; }

/* Prenesi vse (documentation-package.js): the whole phase as one PDF, above the rail. */
.arh-app .obr-tabs { margin-top: 0; }

.arh-app .doc-export { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
    margin-bottom: 16px; padding: 14px 18px; background: var(--card); border: 1px solid var(--app-line); border-radius: 12px; }

.arh-app .doc-export-text { flex: 1; min-width: 260px; }

.arh-app .doc-export-title { font-size: 14px; font-weight: 800; color: var(--text); }

.arh-app .doc-export-text .panel-desc { margin: 2px 0 0; }

.arh-app .doc-export-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px;
    font-size: 12.5px; color: var(--muted); }

/* The fixed sentence above the signature block — bold italic, indented right.
   2A's izjava is a four-alinea declaration, not a sentence: it runs full width
   and keeps the alinea breaks of the Pravilnik text. */
.arh-app .obr-izjava { margin: 30px 0 8px; margin-left: 40%; font-size: 12px; font-weight: 700;
    font-style: italic; line-height: 1.5; }

.arh-app .obr-izjava-siroko { margin-left: 0; white-space: pre-wrap; }

/* The official footnote at the foot of 1B */
.arh-app .obr-opomba { margin-top: 22px; padding-top: 10px; border-top: 1px solid #ccc;
    font-size: 11px; font-style: italic; color: #555; line-height: 1.5; }

/* 4A mnenja matrix: naziv | square | ime mnenja */
.arh-app .obr-mrow { display: grid; grid-template-columns: 40% 34px minmax(0, 1fr); align-items: start;
    border-bottom: 1px solid #ccc; }

.arh-app .obr-mrow-l { padding: 5px 10px 4px 0; overflow-wrap: anywhere; }

.arh-app .obr-mrow-c { padding: 5px 0 4px; }

.arh-app .obr-mrow-r { padding: 5px 0 4px; font-weight: 700; overflow-wrap: anywhere; }

.arh-app .obr-mrow-vnos { font-weight: 700; }

.arh-app .obr-mrow-vnos.is-empty { min-height: 17px; }

.arh-app .obr-empty { font-size: 14px; color: var(--muted); padding: 6px 0; }

/* 4B: per-objekt block header — a heavier variant of the sub-heading row */
.arh-app .obr-objekt-head { font-weight: 700; border-top: 2px solid #000; border-bottom: 1px solid #000;
    margin-top: 26px; padding: 6px 0 5px; }

/* Nested tables (4B deleži/gradbena parcela/odmiki, 4C seznami, 4D odmera): a
   light column grid, the header row in plain label style, data cells bold —
   matching the ledger rows. One rule per column count the forms actually use. */
.arh-app .obr-tbl { margin: 2px 0 6px; }
.arh-app .obr-table-scroll { max-width: 100%; overflow-x: auto; padding-bottom: 10px; }
.arh-app .obr-table-scroll .obr-tbl-6 { min-width: 800px; }
.arh-app .obr-table-scroll .obr-tbl-8 { min-width: 1080px; }

.arh-app .obr-tbl-row { display: grid; gap: 0 16px; border-bottom: 1px solid #ccc; }

.arh-app .obr-tbl-2 .obr-tbl-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.arh-app .obr-tbl-3 .obr-tbl-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.arh-app .obr-tbl-4 .obr-tbl-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The report's list of pogoji and mnenja: področje and mnenjedajalec get the room. */
.arh-app .obr-tbl-6 .obr-tbl-row { grid-template-columns: 1.3fr 1.6fr repeat(4, minmax(0, 1fr)); gap: 0 10px; }

/* 4D keeps readable type and column widths inside a horizontal scroller. */
.arh-app .obr-tbl-8 .obr-tbl-row { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 8px; }

.arh-app .obr-tbl-8 .obr-tbl-c { font-size: 12px; }

.arh-app .obr-tbl-c { padding: 4px 8px 3px 0; font-weight: 700; overflow-wrap: anywhere; }

.arh-app .obr-tbl-head .obr-tbl-c { font-weight: 400; color: #000; }

.arh-app .obr-tbl-c.is-empty { min-height: 17px; }

/* A table quoted from the act in 2.3 (porocilo.js): cited text, not form values. */
.arh-app .por-tbl-akt .obr-tbl-c { font-weight: 400; }

.arh-app .por-tbl-akt .por-tbl-wide { grid-column: 1 / -1; }

.arh-app .obr-tbl-5 .obr-tbl-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ── Tehnično poročilo DGD (porocilo.js) ─────────────────────────────
   Lives inside the obr-sheet document surface, so it inherits its paper look;
   these rules only add the chapter rhythm and the editing affordances. */
.arh-app .por-sheet { line-height: 1.6; }

/* The one paid action on this screen — explained, never automatic. */
.arh-app .por-sinteza { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--app-line);
    border-radius: 8px; }

.arh-app .por-sinteza-msg { flex: 1; min-width: 240px; font-size: 12px; color: #444; }

.arh-app .por-poglavje { margin: 34px 0 6px; padding-bottom: 5px; font-size: 13px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    border-bottom: 2px solid #000; }

.arh-app .por-sek { margin-top: 18px; }

.arh-app .por-sek-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    margin-bottom: 6px; }

.arh-app .por-sek-id { font-size: 12px; font-weight: 700; }

.arh-app .por-sek-naslov { font-size: 13px; font-weight: 700; }

/* Who owns this chapter — "ročno urejeno", "ureja se v koraku …" */
.arh-app .por-tag { font-size: 10px; font-style: italic; color: #555;
    padding: 1px 6px; border: 1px solid #ccc; border-radius: 9px; }

.arh-app .por-p { margin: 0 0 8px; font-size: 13px; white-space: pre-wrap; }

/* A paragraph the report may edit but does not own — click writes through to
   the step that owns it, so it reads as a field, not as static prose. It sits
   in the same right-hand column as the field values above it (por-polje value,
   40 % in) and stays a little narrower, so a priključek opis lines up under its
   opinion header. A labelled one (2.3 utemeljitev) is a por-polje row instead. */
.arh-app .por-p-vir { cursor: text; border-left: 2px solid transparent; padding-left: 8px;
    margin-left: calc(40% - 10px); max-width: 55%; }

.arh-app .por-p-vir:hover { border-left-color: #999; background: rgba(0,0,0,0.02); }

.arh-app .por-blok-naslov { margin: 10px 0 4px; font-size: 12px; font-weight: 700; }

.arh-app .por-polje { display: grid; grid-template-columns: 40% minmax(0, 60%);
    border-bottom: 1px solid #ccc; font-size: 13px; }

.arh-app .por-polje-l { padding: 4px 10px 3px 0; }

.arh-app .por-polje-v { padding: 4px 0 3px; font-weight: 700; white-space: pre-wrap; }

/* A labelled paragraph (2.3 »Utemeljitev skladnosti«): the field row, read as prose. */
.arh-app .por-polje-besedilo .por-polje-v { font-weight: 400; }

.arh-app .por-prazno { font-size: 13px; font-style: italic; color: #666; }

/* Missing inputs: named so the architect knows which step to go back to. */
.arh-app .por-manjka { margin-top: 8px; padding: 8px 10px; border-left: 3px solid #999;
    background: rgba(0,0,0,0.03); font-size: 12px; }

.arh-app .por-manjka-head { font-weight: 700; margin-bottom: 3px; }

.arh-app .por-manjka-item { color: #444; }

/* Soglasje za priključitev under its priključevanje row. */
.arh-app .por-tbl-opomba { padding: 3px 0 4px; border-bottom: 1px solid #ccc; font-size: 12px;
    font-style: italic; }

.arh-app .por-sek-actions { margin-top: 8px; }

/* ── Inline editing (inline-edit.js) in the documentation view ──────────
   A value reads as the printed sheet until hovered; the input keeps the
   sheet's type. »ročno« marks an override, with the automatic value beside
   it when that has changed (orange: stale). */
.arh-app .obr-edit-hint { font-size: 12px; color: var(--muted); }

.arh-app .ie-value { cursor: text; border-radius: 3px; }

.arh-app .ie-value:hover,
.arh-app .ie-value:focus-visible,
.arh-app .ie-toggle:hover,
.arh-app .ie-toggle:focus-visible { background: rgba(var(--teal-rgb), 0.08); outline: none; }

.arh-app .ie-value.is-empty { display: inline-block; min-width: 64px; min-height: 16px; vertical-align: middle;
    border-bottom: 1px dashed #bbb; }

.arh-app .ie-block .ie-value.is-empty { display: block; }

.arh-app .ie-input { width: 100%; box-sizing: border-box; padding: 2px 4px; font: inherit; font-weight: inherit;
    color: #000; background: #fff; border: 1px solid var(--teal); border-radius: 3px; }

.arh-app .ie-area { display: block; line-height: 1.5; resize: vertical; }

.arh-app .ie-toggle { display: inline-flex; cursor: pointer; border-radius: 3px; }

.arh-app .ie-toggle-box { display: inline-flex; align-items: center; }

.arh-app .ie-status { margin-left: 6px; font-size: 10.5px; font-weight: 400; font-style: italic; color: #666; }

.arh-app .ie-status:empty { display: none; }

.arh-app .ie-status.is-failed { color: var(--red); font-style: normal; }

.arh-app .ie-link { margin-left: 6px; }
.arh-app .ie-mark { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-left: 8px;
    font-size: 10px; font-weight: 400; font-style: italic; color: #555; white-space: normal; }

.arh-app .ie-mark-tag { padding: 0 6px; border: 1px solid #ccc; border-radius: 9px; }

.arh-app .ie-mark.is-stale .ie-mark-note { color: var(--orange); font-style: normal; font-weight: 700; }

.arh-app .obr-row-v .ie-mark,
.arh-app .obr-tbl-c .ie-mark,
.arh-app .por-polje-v .ie-mark { display: flex; margin: 2px 0 0; }

.arh-app .por-p-vir .ie-mark { margin: 2px 0 0; }

/* The automatic text that changed behind a hand-edited chapter, folded. */
.arh-app .por-samodejno-box { margin-top: 4px; }

.arh-app .por-samodejno-box .ie-link { margin-left: 0; }

.arh-app .por-samodejno { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--orange);
    background: rgba(var(--orange-rgb), 0.05); }

/* ── Pregled odmikov (dgd/step-distances.js) — objects × parcel columns,
   one editable distance per cell, the reference drawing page below. ── */
.arh-app .dist-matrix-wrap { overflow-x: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); }

.arh-app .dist-matrix { min-width: 0; font-size: 13.5px; }

.arh-app .dist-matrix th,
.arh-app .dist-matrix td { padding: 8px 10px; vertical-align: top; }

.arh-app .dist-matrix thead th { white-space: nowrap; }


.arh-app .dist-matrix td.dist-cell { min-width: 96px; font-variant-numeric: tabular-nums; }

.arh-app .dist-matrix th.dist-obj { position: sticky; left: 0; z-index: 1; background: var(--surface);
    color: var(--text); font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; }

.arh-app .dist-matrix thead th.dist-obj { color: var(--muted); font-size: 11px; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase; }

.arh-app .dist-obj-name { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }

.arh-app .dist-value + .dist-value { margin-top: 6px; }

.arh-app .dist-value-row { display: flex; align-items: center; gap: 4px; }

.arh-app .dist-remove { opacity: 0.55; }
.arh-app .dist-remove:hover, .arh-app .dist-remove:focus-visible { opacity: 1; }
.arh-app .dist-value.is-removed .dist-struck { color: var(--muted); }

.arh-app .dist-value.is-removed .ie-link { margin-left: 4px; }

.arh-app .dist-matrix td.dist-cell.is-check { background: rgba(var(--orange-rgb), 0.07); }

.arh-app .dist-check { display: block; margin-top: 2px; font-size: 11.5px; color: var(--orange); }

.arh-app .dist-check-tag { margin-right: 6px; padding: 0 6px; border: 1px solid rgba(var(--orange-rgb), 0.4);
    border-radius: 9px; font-weight: 700; }

.arh-app .dist-check-summary { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--orange);
    background: rgba(var(--orange-rgb), 0.05); font-size: 13px; color: var(--text); }

.arh-app .dist-add { margin-top: 12px; }

.arh-app .dist-add-title { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--text); }

.arh-app .dist-add .chip-group { margin-bottom: 8px; }

.arh-app .dist-add-actions { display: flex; gap: 8px; }

.arh-app .dist-none { color: var(--muted); }

.arh-app .dist-note { display: block; font-size: 11.5px; color: var(--muted); }

.arh-app .dist-page-box { margin-top: 24px; }

.arh-app .dist-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 16px; margin-bottom: 8px; }

.arh-app .dist-page-title { font-size: 15px; font-weight: 700; color: var(--text); }

.arh-app .dist-page-meta { margin-left: 10px; font-size: 12.5px; font-weight: 400; color: var(--muted); }

.arh-app .dist-page-tools { display: flex; align-items: center; gap: 6px; }

.arh-app .dist-zoom-label { min-width: 48px; font-size: 12.5px; color: var(--muted); text-align: center;
    font-variant-numeric: tabular-nums; }

.arh-app .dist-page-frame { max-height: 80vh; overflow: auto; border: 1px solid var(--app-line); border-radius: 8px;
    background: #fff; }

.arh-app .dist-page-img { display: block; width: 100%; max-width: none; height: auto; }

.arh-app .dist-legend,
.arh-app .dist-empty,
.arh-app .dist-page-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 1100px) {
  .arh-app .opn-layout { grid-template-columns: 1fr; }
  .arh-app .opn-toc { position: static; max-height: 240px; }
}

/* The shell's own narrow-screen rules live with the component in §5. */

@media (max-width: 860px) {
  .arh-app .form-grid { grid-template-columns: 1fr; }
  .arh-app .form-grid-compact { grid-template-columns: 1fr 1fr; }
  .arh-app .co-avatar { width: 72px; height: 72px; }
  .arh-app .co-profile-name { font-size: 18px; }
  .arh-app .team-card-body,
  .arh-app .sig-slots { grid-template-columns: 1fr; }
  .arh-app .team-card-head { flex-wrap: wrap; }
  .arh-app .owner-row { grid-template-columns: 1fr; }
  .arh-app .parcel-row { grid-template-columns: 1fr; }
  .arh-app .parcel-row .parcel-choice, .arh-app .parcel-status { padding-bottom: 0; }
  
.arh-app .owner-cell,
.arh-app .owner-email,
.arh-app .owner-cell-input,
.arh-app .owner-field,
.arh-app .owner-remove,
.arh-app .owner-mail-choice { grid-column: 1; }
  .arh-app .obr-layout { grid-template-columns: 1fr; }
  .arh-app .obr-rail { position: static; flex-direction: row; overflow-x: auto; }
  .arh-app .obr-row { grid-template-columns: 1fr; }
  .arh-app .obr-row-l { padding-bottom: 0; color: #555; }
  .arh-app .obr-mrow { grid-template-columns: minmax(0, 1fr) 34px; }
  .arh-app .obr-mrow-r { grid-column: 1 / -1; padding-top: 0; }
  .arh-app .obr-izjava { margin-left: 0; }
  .arh-app .por-p-vir { margin-left: -10px; max-width: none; }
}

/* ── Drawing-extraction waiting screen (.dw-*, IDZ Stage 2 & GD Stage 3) ──
   The coffee-break screen shown before the first drawing-dependent step while
   the background extraction runs. Rendered by app/architect/drawing-wait.js. */
/* The waiting screen stands alone (no panel title) and centres in the viewport. */
.arh-app .dw-screen { max-width: 560px; margin: 0 auto; padding: 30px 8px 44px; text-align: center;
    min-height: calc(100vh - 200px); display: flex; flex-direction: column; align-items: center; justify-content: center; }

.arh-app .dw-cup { position: relative; width: 108px; height: 116px; margin: 0 auto 20px; color: var(--ink); }
.arh-app .dw-mug { position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; }
.arh-app .dw-mug svg { display: block; width: 96px; height: 96px; margin: 0 auto; }
.arh-app .dw-steam { position: absolute; z-index: 1; top: 2px; width: 6px; height: 22px; border-radius: 6px; background: var(--teal); opacity: 0; filter: blur(1px); }
.arh-app .dw-steam--1 { left: 38px; animation: dw-steam 2.6s ease-in-out infinite; }
.arh-app .dw-steam--2 { left: 51px; animation: dw-steam 2.6s ease-in-out 0.5s infinite; }
.arh-app .dw-steam--3 { left: 64px; animation: dw-steam 2.6s ease-in-out 1s infinite; }
@keyframes dw-steam {
  0% { opacity: 0; transform: translateY(6px) scaleY(0.6); }
  30% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-18px) scaleY(1.25); }
}
.arh-app .dw-cup--done { color: var(--teal); }
.arh-app .dw-cup--done .dw-steam { animation: none; opacity: 0; }

.arh-app .dw-title { font-size: 22px; font-weight: 700; color: var(--navy); margin: 0 0 12px;
    line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.arh-app .dw-description { max-width: 360px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.arh-app .dw-status { display: flex; align-items: center; justify-content: center; gap: 8px;
    max-width: 460px; margin-top: 24px; min-height: 22px; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.arh-app .dw-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: 0 0 auto; animation: dw-pulse 1.8s ease-in-out infinite; }
@keyframes dw-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
.arh-app .dw-status-error { color: var(--red); }
.arh-app .dw-done-icon { display: inline-flex; color: var(--teal); }
.arh-app .dw-done-icon svg { width: 16px; height: 16px; }
.arh-app .dw-proceed { margin-top: 22px; }
/* Failed drawing extraction: the message, with »Ponovi obdelavo« on the side. */
.arh-app .drawing-failure { display: flex; align-items: center; gap: 14px; margin: 20px 0; padding: 12px 14px;
    border: 1px solid rgba(var(--red-rgb),0.24); border-radius: 9px; background: rgba(var(--red-rgb),0.06);
    color: var(--red); font-size: 13.5px; line-height: 1.5; text-align: left; }
.arh-app .drawing-failure-text { flex: 1; margin: 0; }
.arh-app .drawing-failure .btn-text { flex: 0 0 auto; }
.arh-app .dw-screen .drawing-failure { width: 100%; margin-top: 24px; margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .arh-app .dw-steam, .arh-app .dw-status-dot { animation: none; opacity: 1; }
}

/* ── DGD wizard (.dgd-root, nested inside .arh-app) ──────────────── */

/* ═══════════════════════════════════════════════════════════════════
   DGD wizard (Stage 3, .dgd-root) — merged from dgd.css
   ═══════════════════════════════════════════════════════════════════ */

/* DGD wizard styles (Stage 3). The wizard now renders like architect stages
   1/2: shared elements (titles, descriptions, sections, forms, buttons,
   footers) use the architect design system directly, and the .dgd-root wrapper
   only namespaces DGD-specific components (data grids, doc sections,
   article/objekt cards) that have no stage 1/2 equivalent. Palette comes from
   §1 :root + this client's own :root, same as the rest of architect. */

.arh-app .dgd-root { font-family: var(--font); color: var(--text); }

/* Dashboard */
.arh-app .dgd-root .dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

.arh-app .dgd-root .dash-header h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }

.arh-app .dgd-root .dash-empty { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 14px; }

.arh-app .dgd-root .proj-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); }

.arh-app .dgd-root .proj-table th { text-align: left; padding: 10px 14px; font-size: 10px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 1px; color: var(--muted); border-bottom: 1.5px solid var(--line); }

.arh-app .dgd-root .proj-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }

.arh-app .dgd-root .proj-table tbody tr { cursor: pointer; transition: background 0.1s; }

.arh-app .dgd-root .proj-table tbody tr:hover td { background: var(--white); }

.arh-app .dgd-root .proj-name { font-weight: 600; }

/* Titles, descriptions and footers now use the shared architect design
   classes (.panel-title-row / .panel-desc / .panel-foot); no Stage-3 override. */

.arh-app .dgd-root .tech-input-list { display: flex; flex-direction: column; gap: 10px; }

.arh-app .dgd-root .tech-input-section {
            border: 1px solid var(--line); background: var(--surface);
            border-radius: 8px; overflow: hidden;
        }

.arh-app .dgd-root .tech-input-head {
            display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
            align-items: center; padding: 14px 16px;
        }

.arh-app .dgd-root .tech-input-title { font-size: 14px; font-weight: 700; color: var(--text); }

.arh-app .dgd-root .tech-input-summary {
            margin-top: 4px; max-width: 680px;
            font-size: 12px; line-height: 1.45; color: var(--muted);
        }

.arh-app .dgd-root .tech-input-actions { display: flex; align-items: center; gap: 10px; }

.arh-app .dgd-root .tech-toggle {
            display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
            color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap;
        }






.arh-app .dgd-root .tech-input-body {
            border-top: 1px solid var(--line); padding: 16px;
            background: transparent;
        }

.arh-app .dgd-root .tech-required-inline {
            border-top: 1px solid var(--line);
            padding: 12px 16px 14px;
            background: transparent;
        }

.arh-app .dgd-root .tech-required-inline .tech-field-grid { margin-top: 0; }

.arh-app .dgd-root .tech-required-label {
            margin-bottom: 8px; color: var(--muted);
            font-size: 10px; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.7px;
        }

.arh-app .dgd-root .tech-input-body.is-default .tech-field-grid { opacity: 0.72; }

.arh-app .dgd-root .tech-input-body .tech-field-grid.is-default-overrides { opacity: 0.72; }

.arh-app .dgd-root .tech-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }

.arh-app .dgd-root .tech-field-full { grid-column: 1 / -1; }

.arh-app .dgd-root .tech-bool {
            display: inline-flex; align-items: center; min-height: 38px; gap: 8px;
            padding: 8px 12px; border: 1.5px solid var(--line);
            border-radius: var(--radius); background: var(--surface);
            color: var(--text); font-size: 12px; font-weight: 600;
        }

.arh-app .dgd-root .tech-bool:has(input:not(:disabled)) { cursor: pointer; }

.arh-app .dgd-root .tech-bool:has(input:not(:disabled)):hover {
            border-color: var(--navy); background: var(--white);
        }

.arh-app .dgd-root .tech-checks {
            display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
            padding: 0; border: 0; background: transparent;
        }

.arh-app .dgd-root .tech-check {
            display: flex; align-items: center; gap: 9px; min-height: 38px;
            padding: 8px 11px; border: 1.5px solid var(--line);
            border-radius: var(--radius); background: var(--surface);
            color: var(--text); font-size: 12px; line-height: 1.35;
        }

.arh-app .dgd-root .tech-check span { min-width: 0; }

.arh-app .dgd-root .tech-check:has(input:checked) {
            border-color: rgba(37, 99, 235, 0.35); background: rgba(var(--teal-rgb), 0.04);
        }

.arh-app .dgd-root .tech-check:has(input:not(:disabled)) { cursor: pointer; }

.arh-app .dgd-root .tech-check:has(input:not(:disabled)):hover {
            border-color: var(--navy); background: var(--white);
        }

.arh-app .dgd-root .tech-source-note {
            margin: 0 0 14px; padding: 10px 12px;
            border: 1px solid var(--line); border-radius: var(--radius);
            background: var(--surface); color: var(--muted);
            font-size: 12px; line-height: 1.5;
        }

.arh-app .dgd-root .tech-source-note strong {
            display: block; margin-bottom: 3px; color: var(--text);
            font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px;
        }

/* File upload — rows are the shared du-item (Stage 2 widget) */
.arh-app .dgd-root .drawing-upload-section { margin-top: 20px; }

.arh-app .dgd-root .drawing-upload-section[hidden] { display: none; }

.arh-app .dgd-root .drawing-section-label { margin: 0 0 10px; color: var(--text); font-size: 13px; font-weight: 700; }

.arh-app .dgd-root .drawing-section-hint { color: var(--muted); font-weight: 400; }

.arh-app .dgd-root .drawing-section-desc { margin-bottom: 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Drop zone on the light navy tint the architect uses for row hovers; --app-bg
   is white inside .arh-app, so it cannot carry the fill. */
.arh-app .dgd-root .ds-drop-zone,
.arh-app .rv-upload .ds-drop-zone { background: rgba(var(--navy-rgb), 0.03); border: 1.5px dashed var(--line); border-radius: 12px; }

.arh-app .dgd-root .ds-drop-zone:hover,
.arh-app .dgd-root .ds-drop-zone.drag-over,
.arh-app .rv-upload .ds-drop-zone:hover,
.arh-app .rv-upload .ds-drop-zone.drag-over { border-color: var(--teal); background: rgba(var(--navy-rgb), 0.05); }

.arh-app .dgd-root .ds-drop-zone-icon svg,
.arh-app .rv-upload .ds-drop-zone-icon svg { stroke: var(--teal); }

/* KO dropdown */

.arh-app .dgd-root .ko-dd { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface);
            border: 1.5px solid var(--navy); border-top: none; max-height: 220px;
            overflow-y: auto; z-index: 50; display: none; }

.arh-app .dgd-root .ko-dd-item { padding: 8px 14px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; }

.arh-app .dgd-root .ko-dd-item:hover,
.arh-app .dgd-root .ko-dd-item.hl { background: var(--white); }

/* Forms */
.arh-app .dgd-root .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 16px; }

/* Form controls (.form-field label/input/select/textarea) and section headers
   inherit the shared architect design system (.form-field, .sec-label) used by
   stages 1/2 — no Stage-3 overrides. */

/* Investitor / Strokovnjak blocks — shared by Stage 2 (Idejna zasnova) and
   Stage 3 (DGD), so kept unscoped (not under .dgd-root). */
.arh-app .entry-block {
            border: 1px solid var(--line); padding: 16px; margin-bottom: 12px; position: relative;
        }

.arh-app .entry-block-title {
            font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
            color: var(--muted); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center;
        }


.arh-app .dgd-root .form-field label.tech-bool,
.arh-app .dgd-root .form-field label.tech-check {
            display: flex; align-items: center; gap: 9px;
            margin: 0; text-transform: none; letter-spacing: 0;
            color: var(--text); font-size: 12px; font-weight: 600;
        }

.arh-app .dgd-root .form-field label.tech-bool { display: inline-flex; width: auto; }

/* Badges */
.arh-app .dgd-root .badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; font-size: 10px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.5px; border-radius: 2px; line-height: 1; text-align: center; }

.arh-app .dgd-root .badge--green { background: rgba(var(--vivid-rgb), 0.16); color: var(--vivid); }

.arh-app .dgd-root .badge--orange { background: rgba(var(--orange-rgb), 0.16); color: var(--orange); }

.arh-app .dgd-root .badge--red { background: rgba(var(--red-rgb), 0.14); color: var(--red); }

.arh-app .dgd-root .badge--blue { background: rgba(var(--teal-rgb), 0.14); color: var(--teal); }

.arh-app .dgd-root .badge--muted { background: rgba(var(--navy-rgb), 0.06); color: var(--muted); }

/* Loading */
.arh-app .dgd-root .doc-loading { text-align: center; padding: 60px 20px; }

.arh-app .dgd-root .doc-loading .ds-spinner { margin: 0 auto 16px; }

.arh-app .dgd-root .doc-loading-text { font-size: 13px; color: var(--muted); }

/* Step 6: structured objekt cards */
.arh-app .dgd-root .objekt-card { border: 1px solid var(--line); padding: 20px; margin-bottom: 16px; background: var(--surface); }

.arh-app .dgd-root .objekt-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }

.arh-app .dgd-root .objekt-card-title { font-size: 14px; font-weight: 700; }

.arh-app .dgd-root .objekt-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 16px; }

.arh-app .dgd-root .objekt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }

.arh-app .dgd-root .objekt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }

.arh-app .dgd-root .objekt-grid + .objekt-grid,
.arh-app .dgd-root .objekt-grid + .objekt-grid-2,
.arh-app .dgd-root .objekt-grid + .objekt-grid-4,
.arh-app .dgd-root .objekt-grid-2 + .objekt-grid,
.arh-app .dgd-root .objekt-grid-2 + .objekt-grid-2,
.arh-app .dgd-root .objekt-grid-2 + .objekt-grid-4,
.arh-app .dgd-root .objekt-grid-4 + .objekt-grid,
.arh-app .dgd-root .objekt-grid-4 + .objekt-grid-2,
.arh-app .dgd-root .objekt-grid-4 + .objekt-grid-4 { margin-top: 12px; }

.arh-app .dgd-root .objekt-grid .form-full,
.arh-app .dgd-root .objekt-grid-4 .form-full { grid-column: 1 / -1; }

.arh-app .dgd-root .objekt-preview {
            position: relative; width: 100%; height: 312px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 8px; margin: 0 0 16px;
            overflow: hidden;
            touch-action: none;
        }

.arh-app .dgd-root .objekt-dim-label {
            font-family: var(--font, system-ui, sans-serif);
            font-weight: 600;
            letter-spacing: 0.2px;
            white-space: nowrap;
            user-select: none;
            transform: translate(-50%, -50%);
            line-height: 1.15;
            text-align: center;
            transition: opacity 0.12s linear;
        }

.arh-app .dgd-root .objekt-description {
            width: 100%; min-height: 180px; box-sizing: border-box;
            padding: 14px 16px; border: 1.5px solid var(--line);
            border-radius: var(--radius); background: var(--surface);
            color: var(--text); outline: none; resize: vertical;
            font-family: var(--font);
            font-size: 13px; line-height: 1.6;
            transition: border-color 0.15s, background 0.15s;
        }

.arh-app .dgd-root .objekt-description:focus { border-color: var(--navy); background: var(--white); }

/* Step 7: article list */
.arh-app .dgd-root .articles-meta { font-size: 12px; color: var(--muted); margin-top: 18px; }

.arh-app .dgd-root .articles-toolbar {
            display: flex; align-items: center; justify-content: space-between;
            gap: 10px; margin-bottom: 22px;
        }

.arh-app .article-search { position: relative; flex: 1 1 auto; min-width: 260px; max-width: 520px; }

.arh-app .article-search-input-wrap { position: relative; }

.arh-app .article-search input {
            width: 100%; height: 40px; padding: 0 42px 0 16px;
            border: 1.5px solid var(--navy); border-radius: 999px;
            background: var(--surface); color: var(--text);
            font-family: var(--font); font-size: 13px; outline: none;
        }

.arh-app .article-search input:focus { border-color: var(--navy); background: var(--white); }

/* WebKit ob tipkanju v type=search doda lasten okrogel ✕ — podvaja naš UI. */
.arh-app .article-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Brez spinnerja ob iskanju — stanje pove vrstica "Iščem…" v dropdownu. */
.arh-app .article-search-status { display: none; }

.arh-app .article-search-dropdown {
            display: none; position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
            max-height: 360px; overflow: auto; background: var(--surface);
            border: 1px solid var(--navy); border-radius: var(--radius);
            box-shadow: 0 10px 28px rgba(0,0,0,0.12);
        }

.arh-app .article-search-dropdown.open { display: block; }

.arh-app .article-search-item {
            display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line);
            background: transparent; color: var(--text); padding: 10px 14px; cursor: pointer;
            font-family: var(--font); font-size: 13px;
        }

.arh-app .article-search-item:last-child { border-bottom: 0; }

.arh-app .article-search-item:hover,
.arh-app .article-search-item:focus { background: var(--white); outline: none; }

.arh-app .article-search-item-head { display: flex; gap: 10px; align-items: baseline; min-width: 0; }

.arh-app .article-search-num { font-weight: 700; min-width: 62px; flex-shrink: 0; }

.arh-app .article-search-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.arh-app .article-search-reason { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }

.arh-app .article-search-empty,
.arh-app .article-search-error { padding: 12px 14px; font-size: 13px; color: var(--muted); }

.arh-app .article-search-error { color: var(--red); }

@media (max-width: 640px) {
  .arh-app .dgd-root .articles-toolbar { align-items: stretch; flex-direction: column; }
  .arh-app .article-search { max-width: none; min-width: 0; }
}

/* Two-group compact člen checklist (proposed on top, all other PIP členi below). */
.arh-app .dgd-root .article-group-head {
            display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
            margin: 22px 0 8px;
        }

.arh-app .dgd-root .article-group-head:first-of-type { margin-top: 4px; }

.arh-app .dgd-root .article-group-title { font-weight: 700; font-size: 14px; }

.arh-app .dgd-root .article-group-count {
            background: var(--line); color: var(--muted); font-size: 11px; font-weight: 600;
            padding: 1px 8px; border-radius: 10px; line-height: 1.6;
        }

.arh-app .dgd-root .article-group-hint { flex-basis: 100%; font-size: 12px; color: var(--muted); }

.arh-app .dgd-root .article-group-empty { font-size: 13px; color: var(--muted); padding: 8px 2px; }

.arh-app .dgd-root .article-row2 { border-bottom: 1px solid var(--line-soft); }

.arh-app .dgd-root .article-head {
            display: flex; align-items: center; gap: 12px; padding: 9px 14px;
            cursor: pointer; font-size: 13px; margin: 0;
        }

.arh-app .dgd-root .article-head:hover { background: rgba(var(--navy-rgb), 0.03); }


.arh-app .dgd-root .article-row2 .article-num { font-weight: 700; min-width: 62px; flex-shrink: 0; }

.arh-app .dgd-root .article-row2 .article-topic {
            font-weight: 500; flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }



.arh-app .dgd-root .article-detail {
            display: none; padding: 10px 14px 12px 50px; border-top: 1px solid var(--line-soft);
            font-size: 12px; line-height: 1.6; word-break: break-word;
        }

.arh-app .dgd-root .article-row2.open .article-detail { display: block; }

.arh-app .dgd-root .article-detail-razlog { color: var(--text); }

.arh-app .dgd-root .article-detail-summary { color: var(--muted); margin-top: 4px; }

.arh-app .dgd-root .article-detail-meta { margin-top: 6px; }

/* Where a provision of a PDF-held detailed act was quoted from. */
.arh-app .dgd-root .article-provision-source { font-size: 12px; color: var(--muted); }

/* Provenance and decision of an article row (see dgd/step-articles.js). */
.arh-app .dgd-root .article-badge {
            font-size: 10px; padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
            background: var(--line); color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em;
        }
.arh-app .dgd-root .article-badge.proposal { background: rgba(var(--teal-rgb), 0.12); color: var(--teal); }
.arh-app .dgd-root .article-badge.confirmed { background: rgba(var(--vivid-rgb), 0.16); color: var(--vivid); }
.arh-app .dgd-root .article-badge.user { background: rgba(var(--sand-rgb), 0.28); color: var(--navy-2); }
.arh-app .dgd-root .article-badge.rejected { background: rgba(var(--red-rgb), 0.1); color: var(--red); }
.arh-app .dgd-root .article-badge.stale { background: var(--line); color: var(--muted); text-decoration: line-through; }
.arh-app .dgd-root .article-note { font-size: 12px; color: var(--orange); padding: 0 14px 8px 50px; line-height: 1.5; }
.arh-app .dgd-root .articles-banner {
            font-size: 13px; color: var(--teal); padding: 8px 12px; margin-bottom: 12px; border-radius: 4px;
            border: 1px solid rgba(var(--teal-rgb), 0.3); background: rgba(var(--teal-rgb), 0.06); line-height: 1.5;
        }
.arh-app .dgd-root .articles-banner.error { color: var(--red); border-color: rgba(var(--red-rgb), 0.3); background: rgba(var(--red-rgb), 0.06); }

.arh-app .dgd-root .articles-remarks {
            margin-top: 20px; padding: 14px 16px; background: transparent;
            border: 1px solid var(--line); font-size: 12px; line-height: 1.6;
        }

.arh-app .dgd-root .articles-remarks-label { font-weight: 700; text-transform: uppercase;
            letter-spacing: 1px; font-size: 10px; color: var(--muted); margin-bottom: 6px; }

/* Step 8: Opis skladnosti */
/* Status card (dgd/opis-progress.js): a summary line with the rerun actions;
   while descriptions are written it becomes a boxed loader. */
.arh-app .dgd-root .opis-status {
            display: flex; justify-content: space-between; align-items: center; gap: 12px;
            margin-bottom: 16px; font-size: 12px; color: var(--muted);
        }

.arh-app .dgd-root .opis-status :is(.opis-status-spinner, .opis-status-detail, .opis-status-pct,
            .opis-progress-bar, .opis-status-note) { display: none; }

.arh-app .dgd-root .opis-status.is-running {
            display: block; padding: 20px 22px; border: 1px solid var(--line); border-radius: 8px;
            background: var(--surface);
        }

.arh-app .dgd-root .opis-status.is-running .opis-status-head { display: flex; align-items: center; gap: 16px; }

.arh-app .dgd-root .opis-status.is-running .opis-status-spinner { display: grid; width: 28px; height: 28px; margin: 0; flex-shrink: 0; }

.arh-app .dgd-root .opis-status-body { min-width: 0; flex: 1; }

.arh-app .dgd-root .opis-status.is-running .opis-status-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.4; }

.arh-app .dgd-root .opis-status.is-running .opis-status-detail { display: block; font-size: 12.5px; margin-top: 2px; }

.arh-app .dgd-root .opis-status.is-error .opis-status-detail { color: var(--red); }

.arh-app .dgd-root .opis-status.is-running .opis-status-pct {
            display: block; font-size: 24px; font-weight: 700; color: var(--navy);
            font-variant-numeric: tabular-nums; white-space: nowrap;
        }

.arh-app .dgd-root .opis-status.is-running .opis-progress-bar {
            display: block; height: 6px; margin: 16px 0 14px; border-radius: 3px;
            background: var(--line); overflow: hidden;
        }

.arh-app .dgd-root .opis-progress-fill {
            position: relative; height: 100%; border-radius: 3px; overflow: hidden;
            background: var(--navy); transition: width 0.6s ease;
        }

/* A moving sheen keeps the bar alive between article completions. */
.arh-app .dgd-root .opis-progress-fill::after {
            content: ''; position: absolute; inset: 0; transform: translateX(-100%);
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
            animation: opis-sheen 1.6s linear infinite;
        }

@keyframes opis-sheen { to { transform: translateX(100%); } }

.arh-app .dgd-root .opis-status.is-running .opis-status-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.arh-app .dgd-root .opis-status.is-running .opis-status-note { display: block; font-size: 12px; line-height: 1.5; }

.arh-app .dgd-root .opis-list {
            width: 100%; max-width: 100%;
            font-size: 13px; line-height: 1.65; font-family: var(--font);
        }

.arh-app .dgd-root .opis-row {
            display: grid; grid-template-columns: 72px minmax(0, 1fr);
            gap: 12px; padding: 18px 0; align-items: start;
        }

.arh-app .dgd-root .opis-cell-num {
            white-space: nowrap; color: var(--text);
            display: flex; flex-direction: column; gap: 0;
        }

.arh-app .dgd-root .opis-cell-num-label {
            font-weight: 700; font-size: 13px; line-height: 1.3;
        }

.arh-app .dgd-root .opis-cell-num-akt {
            font-size: 10px; font-weight: 600; color: var(--muted);
            letter-spacing: 0.04em; line-height: 1.4;
        }

.arh-app .dgd-root .opis-cell-opis {
            color: var(--text); min-width: 0; max-width: 100%;
            overflow-wrap: anywhere; word-break: break-word;
        }

.arh-app .dgd-root .opis-cell-opis-topic {
            font-size: 12px; color: var(--muted); margin-bottom: 6px;
            overflow-wrap: anywhere;
        }

.arh-app .dgd-root .opis-row-status {
            font-size: 11px; color: var(--muted); font-style: italic;
            display: flex; align-items: center; gap: 8px;
        }

.arh-app .dgd-root .opis-row-error { color: var(--red); font-size: 12px; }

.arh-app .dgd-root .opis-row-meta { font-size: 10px; color: var(--muted); margin-top: 6px; }

.arh-app .dgd-root .opis-row-tools { display: flex; gap: 8px; margin-top: 8px; font-size: 11px; }



.arh-app .dgd-root .opis-comment-box {
            margin-top: 8px; padding: 10px; background: transparent;
            border: 1px solid var(--line); display: none;
        }

.arh-app .dgd-root .opis-comment-box.open { display: block; }

.arh-app .dgd-root .opis-comment-box textarea {
            width: 100%; box-sizing: border-box; padding: 8px 10px;
            font-family: var(--font); font-size: 12px; line-height: 1.5;
            border: 1px solid var(--line); background: var(--surface);
            resize: vertical; min-height: 60px; outline: none;
            border-radius: var(--radius);
        }

.arh-app .dgd-root .opis-comment-box textarea:focus { border-color: var(--navy); }

.arh-app .dgd-root .opis-comment-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* Block layout (lokalna orodja — Določilo + Utemeljitev par) */
.arh-app .dgd-root .opis-block { margin: 12px 0; }

.arh-app .dgd-root .opis-block-draft {
            font-size: 13px; line-height: 1.6; color: var(--text);
            white-space: pre-wrap; overflow-wrap: anywhere;
        }

.arh-app .dgd-root .opis-block-dolocilo {
            background: var(--white); border-left: 3px solid var(--line);
            padding: 10px 14px; font-size: 12px; line-height: 1.55; color: var(--text);
            white-space: pre-wrap; border-radius: 0 var(--radius) var(--radius) 0;
            margin-bottom: 8px;
        }

.arh-app .dgd-root .opis-table-scroll { max-width: 100%; margin: 8px 0; overflow-x: auto; white-space: normal; }

.arh-app .dgd-root .opis-block-dolocilo table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 11px; }

.arh-app .dgd-root .opis-block-dolocilo th,
.arh-app .dgd-root .opis-block-dolocilo td { max-width: 360px; padding: 5px 7px; border: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }

.arh-app .dgd-root .opis-block-dolocilo th { background: var(--surface); font-weight: 700; }

.arh-app .dgd-root .opis-block-utemeljitev {
            padding: 0; font-size: 13px; line-height: 1.6; color: var(--text);
            cursor: text; border: 1px solid transparent; border-radius: var(--radius);
            transition: border-color 0.15s, background 0.15s;
            white-space: pre-wrap; overflow-wrap: anywhere;
        }

.arh-app .dgd-root .opis-block-utemeljitev:hover {
            border-color: var(--line); background: transparent;
            padding: 0 6px; margin: 0 -6px;
        }

.arh-app .dgd-root .opis-block-utemeljitev-edit {
            width: 100%; box-sizing: border-box; padding: 8px 10px;
            font-family: var(--font); font-size: 13px; line-height: 1.6;
            border: 1px solid var(--navy); background: var(--white); resize: none;
            color: var(--text); outline: none; overflow: hidden;
            border-radius: var(--radius);
            margin: 0 -10px;
        }

.arh-app .dgd-root .opis-block-saved {
            font-size: 10px; color: var(--navy); margin-top: 4px;
            opacity: 0; transition: opacity 0.2s;
        }

.arh-app .dgd-root .opis-block-saved.show { opacity: 1; }

/* Trditev brez dokaza (zaveza, sklic): arhitekt jo izrecno potrdi. */
.arh-app .dgd-root .opis-block-claim {
            display: flex; align-items: center; gap: 10px;
            font-size: 11px; color: var(--muted); margin-top: 4px;
        }

.arh-app .dgd-root .opis-block-claim--open { color: var(--orange); }



.arh-app .dgd-root .opis-block-claim-done { color: var(--green, var(--navy)); }

.arh-app .dgd-root .panel-foot-hint { font-size: 12px; color: var(--muted); margin-right: auto; }

/* Razvrstitev objekta po Uredbi: podlaga in opozorila pod poljem zahtevnost. */

.arh-app .dgd-root .opis-spinner-inline {
            display: inline-block; width: 12px; height: 12px;
            border: 2px solid var(--line); border-top-color: var(--navy);
            border-radius: 50%; animation: opis-spin 0.8s linear infinite;
        }

@keyframes opis-spin { to { transform: rotate(360deg); } }

/* Opis status badges + missing-data panel */
.arh-app .dgd-root .opis-status-badge {
            display: inline-block; padding: 2px 8px; font-size: 10px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.5px; border-radius: 2px;
            margin-left: 8px; vertical-align: middle; text-align: center;
        }

.arh-app .dgd-root .opis-status-badge--partial { background: rgba(var(--orange-rgb), 0.16); color: var(--orange); }

.arh-app .dgd-root .opis-status-badge--incomplete { background: rgba(var(--red-rgb), 0.14); color: var(--red); }

.arh-app .dgd-root .opis-missing {
            margin-top: 12px; padding-top: 10px;
            border-top: 1px solid var(--line); background: transparent;
        }

.arh-app .dgd-root .opis-missing-tag {
            display: inline-flex; flex: none; padding: 2px 6px; border-radius: 4px;
            background: rgba(var(--orange-rgb), 0.12); color: var(--orange);
            font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
        }

.arh-app .dgd-root .opis-missing-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }

.arh-app .dgd-root .opis-missing-item { margin-bottom: 8px; }

.arh-app .dgd-root .opis-missing-item:last-of-type { margin-bottom: 0; }

.arh-app .dgd-root .opis-missing-label {
            font-size: 11.5px; font-weight: 600; color: var(--text);
            margin-bottom: 2px;
        }

.arh-app .dgd-root .opis-missing-scope { font-size: 11px; color: var(--muted); font-weight: 400; }

.arh-app .dgd-root .opis-missing-reason {
            font-size: 10.5px; color: var(--muted); margin-bottom: 4px; font-style: italic;
        }

.arh-app .dgd-root .opis-missing input,
.arh-app .dgd-root .opis-missing textarea {
            width: 100%; box-sizing: border-box; padding: 5px 8px;
            font-family: var(--font); font-size: 12px; line-height: 1.5;
            border: 1px solid var(--line); background: var(--surface);
            outline: none; border-radius: var(--radius);
        }

.arh-app .dgd-root .opis-missing input { height: 28px; }

.arh-app .dgd-root .opis-missing textarea { resize: vertical; min-height: 38px; }

.arh-app .dgd-root .opis-missing input:focus,
.arh-app .dgd-root .opis-missing textarea:focus { border-color: var(--navy); }

.arh-app .dgd-root .opis-missing-actions {
            display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px;
        }

.arh-app .dgd-root .opis-meta-actions { display: flex; gap: 10px; }

.arh-app .dgd-root .opis-missing-hint { color: var(--muted); font-size: 11px; line-height: 1.4; }

@media (max-width: 700px) {

  .arh-app .dgd-root .form-grid { grid-template-columns: 1fr; }
  
  .arh-app .dgd-root .tech-input-head { grid-template-columns: 1fr; }
  .arh-app .dgd-root .tech-input-actions { justify-content: space-between; }
  .arh-app .dgd-root .tech-field-grid,
.arh-app .dgd-root .tech-checks { grid-template-columns: 1fr; }
}

/* DGD Stage-3 (VanJS refactor): classes replacing former inline styles, moved
   here from dgd.css during the CSS consolidation. */

.arh-app .dgd-error { color: var(--red); font-weight: 600; font-size: 14px; padding: 20px; text-align: center; }

.arh-app .strok-detail-line { font-size: 12px; color: var(--muted); }

/* Udeleženi strokovnjaki — imenik type-ahead (reuses .article-search-*) */
.arh-app .strok-search { margin-bottom: 16px; }
.arh-app .strok-search .article-search { max-width: none; }
.arh-app .strok-manual-link { margin-top: 8px; }
.arh-app .strok-change { margin-left: auto; }
.arh-app .strok-chosen {
    margin-bottom: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--line); background: transparent;
}
.arh-app .strokovnjaki-container .entry-block { padding: 20px; border-radius: 8px; margin-bottom: 16px; }
.arh-app .strok-chosen.hidden, .arh-app .strok-search.hidden { display: none; }
.arh-app .strok-chosen-main { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.arh-app .strok-chosen-name { font-weight: 700; font-size: 14px; }
.arh-app .strok-chosen-warn {
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    color: var(--red); border: 1px solid var(--red); border-radius: 4px; padding: 1px 6px;
}

.arh-app .dgd-validation { font-size: 11px; color: var(--red); text-align: right; margin-top: 12px; min-height: 14px; }

.arh-app .dgd-missing-field > label,
.arh-app .dgd-missing-field > .objekt-section-label { color: var(--red); }

.arh-app .dgd-missing-field > input,
.arh-app .dgd-missing-field > select,
.arh-app .dgd-missing-field > textarea {
    border-color: var(--red);
    background: rgba(var(--red-rgb), 0.05);
    box-shadow: 0 0 0 3px rgba(var(--red-rgb), 0.10);
}

.arh-app .dgd-missing-field > input:focus,
.arh-app .dgd-missing-field > select:focus,
.arh-app .dgd-missing-field > textarea:focus { border-color: var(--red); }

.arh-app .articles-backend-hint { font-size: 11px; color: var(--muted); margin-top: 6px; }

.arh-app .articles-error-panel { max-width: 640px; margin: 40px auto; padding: 24px; background: #fdf3f3; border: 1px solid #ecc; border-radius: var(--radius); }

.arh-app .articles-error-title { color: var(--red); font-weight: 700; font-size: 14px; margin-bottom: 10px; }

.arh-app .articles-error-body { font-size: 13px; line-height: 1.55; color: var(--text); white-space: pre-line; }

.arh-app .articles-error-body a { color: var(--navy); font-weight: 600; }

.arh-app .articles-error-actions { margin-top: 18px; display: flex; gap: 10px; }

.arh-app .article-sklop-badge { background: var(--line); color: var(--muted); font-size: 10px; padding: 2px 6px; border-radius: 3px; margin-left: 4px; vertical-align: middle; }

/* ── §9.x ASSISTANT — removable block ────────────────────────────────
   Styles of the floating assistant (app/architect/assistant.js): one round
   button bottom right that opens a box with the tabs Vprašaj and Povratna
   informacija. Deleting this block and the .js file removes the widget. */
.arh-app .arh-asis { position: fixed; right: 16px; bottom: 16px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

.arh-app .arh-asis-fab { order: 2; width: 48px; height: 48px; border-radius: 50%;
  border: none; background: var(--navy); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(var(--navy-rgb), 0.32); transition: transform 0.12s ease; }
.arh-app .arh-asis-fab:hover { transform: translateY(-2px); }
.arh-app .arh-asis-fab svg { width: 22px; height: 22px; }
/* Marking text for feedback: the button turns teal and cancels on click. */
.arh-app .arh-asis-marking .arh-asis-fab { background: var(--teal); }

/* Height from the viewport: the panel sits 76 px from the bottom, so the
   reserve is subtracted or it would run over the top on a short screen. */
.arh-app .arh-asis-panel { order: 1; width: 380px; max-width: calc(100vw - 32px);
  height: min(calc(100vh - 110px), 620px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18); overflow: hidden; }
.arh-app .arh-asis:not(.arh-asis-open) .arh-asis-panel { display: none; }

.arh-app .arh-asis-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line); }
.arh-app .arh-asis-title { font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--text); }

.arh-app .arh-asis-tabs { display: flex; gap: 4px; padding: 8px 12px 0; }
.arh-app .arh-asis-tab { flex: 1; padding: 7px 10px; font-size: 12px; font-weight: 700;
  font-family: inherit; border: 1px solid var(--line); border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer; }
.arh-app .arh-asis-tab-on { background: var(--navy); border-color: var(--navy); color: #fff; cursor: default; }

.arh-app .arh-asis-body { flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px; }
.arh-app .arh-asis-hint { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0; }

.arh-app .arh-asis-msg { font-size: 13px; line-height: 1.55; padding: 8px 11px; border-radius: 8px; }
.arh-app .arh-asis-msg-user { align-self: flex-end; max-width: 88%; white-space: pre-wrap;
  background: rgba(var(--navy-rgb), 0.08); color: var(--text); }
.arh-app .arh-asis-msg-ai { background: var(--white); color: var(--text); }
.arh-app .arh-asis-msg-ai p { margin: 0 0 8px; }
.arh-app .arh-asis-msg-ai p:last-child { margin-bottom: 0; }
.arh-app .arh-asis-msg-ai ul,
.arh-app .arh-asis-msg-ai ol { margin: 0 0 8px; padding-left: 18px; }
.arh-app .arh-asis-msg-ai li { margin-bottom: 3px; }
.arh-app .arh-asis-msg-ai strong { font-weight: 700; }
.arh-app .arh-asis-msg-ai a { color: var(--navy); font-weight: 600; }
.arh-app .arh-asis-msg-ai code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em; padding: 1px 4px; border-radius: 4px; background: rgba(var(--navy-rgb), 0.07); }

.arh-app .arh-asis-composer { display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px; border-top: 1px solid var(--line); }
.arh-app .arh-asis-input { flex: 1; resize: none; font-family: inherit; font-size: 13px;
  line-height: 1.5; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text); }

@media (max-width: 520px) {
  .arh-app .arh-asis-panel { width: calc(100vw - 32px); }
}

/* Preverba DGD (dgd-review.js): built from the workspace pieces — sidebar
   phases (.nav-stage), stat cards, the DGD wizard's group heads and flat rows
   (.article-group-*, its panel carries .dgd-root) and the drawing upload rows
   (.du-*). Only what those lack lives here; no tinted boxes. */
.arh-app .rv-upload { margin-bottom: 26px; }

/* "beta" tag on the Preverba DGD nav item (trailing slot); mirrors .pp-app .nav-badge. */
.arh-app .nav-badge { padding: 1px 7px; border-radius: 999px; background: var(--sand); color: var(--navy);
    font-size: 10px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }

.arh-app .nav-stage .num svg { width: 14px; height: 14px; display: block; }

.arh-app .nav-stage .num.is-done { background: var(--teal); color: var(--surface); }

.arh-app .nav-stage .num.is-error { background: var(--red); color: var(--surface); }

.arh-app .nav-stage .num .du-item-spin { width: 13px; height: 13px; border-color: rgba(249,247,244,0.25); border-top-color: var(--surface); }

.arh-app .nav-stage.active .num .du-item-spin { border-color: var(--line); border-top-color: var(--teal); }

.arh-app .rv-nav-count { font-size: 12px; font-weight: 700; opacity: 0.75; }

.arh-app .stat-card--red .stat-icon { background: rgba(var(--red-rgb),0.12); color: var(--red); }

.arh-app .rv-note { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 13px; color: var(--muted); }

.arh-app .rv-muted { font-size: 12px; color: var(--muted); line-height: 1.55; }

/* Counts of a phase or review: napake (red with an error, orange otherwise) and v redu. */
.arh-app .proj-table .rv-num { width: 110px; text-align: right; font-weight: 700; color: var(--muted); }
.arh-app .proj-table .rv-date { width: 170px; white-space: nowrap; }

.arh-app .proj-table .rv-num.is-error { color: var(--red); }

.arh-app .proj-table .rv-num.is-open { color: var(--orange); }

.arh-app .proj-table .rv-num.is-ok { color: var(--text); }

/* Findings and passed checks: the module's plain box (as .dgd-section, .legal-sources). */
.arh-app .rv-row { margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

.arh-app .rv-row-head { display: flex; align-items: center; gap: 12px; font-size: 13px; }

.arh-app .rv-row-title { flex: 1; min-width: 0; font-weight: 600; color: var(--text); }

.arh-app .rv-badge { gap: 5px; flex-shrink: 0; }

.arh-app .rv-badge-btn { gap: 5px; flex-shrink: 0; border: 0; font-family: inherit; cursor: pointer; transition: filter .15s; }

.arh-app .rv-badge-btn:hover { filter: brightness(0.94); }

.arh-app .rv-badge-icon { display: inline-flex; }

.arh-app .rv-row--link { cursor: pointer; transition: background .12s; }

.arh-app .rv-row--link:hover { background: rgba(var(--navy-rgb), 0.03); }

.arh-app .rv-row-desc { margin-top: 2px; font-weight: 400; }

.arh-app .rv-group { margin-top: 36px; }

.arh-app .rv-group:first-child { margin-top: 0; }

.arh-app .nav-stage .num .rv-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; }

.arh-app .rv-badge-icon svg { width: 11px; height: 11px; display: block; }

.arh-app .rv-row.is-resolved .rv-row-title { font-weight: 500; color: var(--muted); text-decoration: line-through; }

.arh-app .rv-row.is-resolved .rv-row-detail { opacity: 0.55; }

.arh-app .rv-row-detail { display: flex; flex-direction: column; gap: 8px; margin-top: 3px; padding-left: 2px; font-size: 12.5px; }

.arh-app .rv-rule { margin-left: 10px; font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; }

.arh-app .rv-places { display: flex; flex-direction: column; margin-top: 8px; }

.arh-app .rv-place { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0;
    font-size: 13px; line-height: 1.5; color: var(--text); border-bottom: 1px solid var(--line-soft); }

.arh-app .rv-place-where { min-width: 0; color: var(--muted); }

.arh-app .rv-place-value { display: flex; align-items: baseline; gap: 10px; text-align: right; }

.arh-app .rv-place-value strong { font-weight: 600; }

.arh-app .rv-page { font-size: 12px; color: var(--muted); white-space: nowrap; }
.arh-app .btn-text.rv-page { padding: 0; min-height: 0; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.arh-app .btn-text.rv-page:hover { color: var(--teal); }
.arh-app .rv-files { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: -6px 0 18px; }

.arh-app .rv-fix { margin-top: 6px; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text); }

.arh-app .rv-row--ok { display: flex; align-items: baseline; gap: 12px; font-size: 13px; color: var(--text); }

.arh-app .rv-row--ok .rv-row-title { flex: 0 1 auto; font-weight: 500; }

.arh-app .rv-row--ok .rv-muted { margin-left: auto; text-align: right; }

.arh-app .rv-ok { display: inline-flex; color: var(--teal); }

.arh-app .rv-ok svg { width: 14px; height: 14px; display: block; }

/* ═══════════════════════════════════════════════════════════════════
   §15  PORTAL (.portal-app) — the investor's client portal
   (app/portal/index.html). The page is the architect's: its body carries
   .arh-app too, so the §5 .app-shell sidebar and the §9 panels, cards
   (.auth-card), badges, section labels and form fields apply as they are.
   Only portal-specific rules live here: phase marks in the sidebar, the
   drawer that replaces the sidebar on phones (investors open the link from
   an email, most of them on a phone), the progress strip on Domov and the
   full-screen signing sheet with its larger touch targets.
   ═══════════════════════════════════════════════════════════════════ */

/* Sidebar: project block, phase marks (done ✓ / »zdaj« / later dimmed), counts. */
.portal-app .portal-project { flex-direction: column; gap: 3px; }

.portal-app .portal-project-place { font-size: 12px; font-weight: 600; color: rgba(249,247,244,0.5); line-height: 1.35; }

.portal-app .nav-stage .num svg { width: 14px; height: 14px; display: block; }

.portal-app .nav-stage .num.is-done { background: var(--vivid); color: var(--surface); }

.portal-app .nav-stage.is-next:not(.active) { color: rgba(249,247,244,0.45); }

.portal-app .portal-now,
.portal-app .portal-count { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
    padding: 3px 7px; border-radius: 5px; background: var(--teal); color: var(--surface); line-height: 1; }

.portal-app .portal-count { background: var(--orange); }

/* Top bar with the menu button: phones only (the drawer below). */
.portal-app .portal-bar { display: none; }

.portal-app .portal-scrim { display: none; }

/* Screens */
.portal-app .portal-phase-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 12px; margin-bottom: 5px; }

.portal-app .portal-phase-head .panel-title-row { margin-bottom: 0; }

.portal-app .portal-empty { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 12px; }

.portal-app .portal-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }

.portal-app .portal-status { font-size: 13px; font-weight: 700; color: var(--teal); }

.portal-app .portal-model .objekt-preview { margin-bottom: 22px; }

.portal-app .auth-card.portal-alert { border: 1.5px solid var(--navy); }

.portal-app .portal-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }

.portal-app .auth-actions .btn svg,
.portal-app .portal-done svg { width: 16px; height: 16px; flex-shrink: 0; }

.portal-app .portal-note { font-size: 13px; color: var(--muted); }

.portal-app .portal-note:empty { display: none; }

.portal-app .portal-note.is-error { color: var(--red); font-weight: 600; }

.portal-app .portal-done { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 9px;
    background: rgba(var(--vivid-rgb), 0.12); color: var(--navy); font-size: 13.5px; font-weight: 700; }

.portal-app .portal-done svg { color: var(--vivid); }

.portal-app .portal-foot { margin: 28px 0 0; font-size: 12px; color: var(--muted); }

/* Domov: the four phases as a strip; each opens its explanation. */
.portal-app .portal-progress { list-style: none; margin: 0 0 14px; padding: 0; display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.portal-app .portal-progress button { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%;
    height: 100%; padding: 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface);
    font-family: inherit; text-align: left; cursor: pointer; transition: border-color .15s; }

.portal-app .portal-progress button:hover { border-color: var(--line); }

.portal-app .portal-progress-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 50%; background: rgba(var(--navy-rgb), 0.08); color: var(--muted); font-size: 12px; font-weight: 800; }

.portal-app .portal-progress-num svg { width: 14px; height: 14px; display: block; }

.portal-app .portal-progress-label { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--muted); }

.portal-app .portal-progress .is-done .portal-progress-num { background: var(--vivid); color: var(--surface); }

.portal-app .portal-progress .is-done .portal-progress-label,
.portal-app .portal-progress .is-current .portal-progress-label { color: var(--text); }

.portal-app .portal-progress .is-current button { border: 1.5px solid var(--teal); }

.portal-app .portal-progress .is-current .portal-progress-num { background: var(--teal); color: var(--surface); }

/* Signing sheet over the whole page: the document's pages, then the ways to sign. */
body.portal-app.portal-sheet-open { overflow: hidden; }

.portal-app .portal-sheet { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--white);
    -webkit-overflow-scrolling: touch; }

.portal-app .portal-sheet-inner { max-width: 760px; margin: 0 auto; padding: 16px 16px 40px; display: flex;
    flex-direction: column; gap: 12px; }

.portal-app .portal-sheet-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; margin-top: -16px; padding: 16px 0 10px; background: var(--white);
    border-bottom: 1px solid var(--line); }

.portal-app .portal-pages { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }

.portal-app .portal-pages img { display: block; width: 100%; height: auto; background: var(--white);
    border: 1px solid var(--line); border-radius: 7px; }

.portal-app .portal-sign-form { display: flex; flex-direction: column; gap: 12px; }

.portal-app .portal-sign-form:empty { display: none; }

.portal-app .portal-sheet-doc { font-size: 13px; font-weight: 700; color: var(--muted); overflow-wrap: anywhere; }

.portal-app .portal-sheet .panel-desc { margin-bottom: 4px; }

.portal-app .portal-sheet .form-field { margin-bottom: 0; }

.portal-app .portal-sheet .form-field input { min-height: 48px; font-size: 16px; }

.portal-app .portal-wide { width: 100%; min-height: 48px; font-size: 15px; }

.portal-app .portal-reset { align-self: flex-start; }

.portal-app .portal-choice { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px; text-align: left;
    font-family: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; color: var(--text);
    cursor: pointer; transition: border-color .15s; }

.portal-app .portal-choice:hover,
.portal-app .portal-choice:focus-visible,
.portal-app .portal-choice.is-active { border-color: var(--navy); }

.portal-app .portal-choice.is-active { box-shadow: inset 0 0 0 1px var(--navy); }

.portal-app .portal-choice svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--teal); }

.portal-app .portal-choice-body { display: flex; flex-direction: column; gap: 2px; }

.portal-app .portal-choice-title { font-size: 15px; font-weight: 700; color: var(--navy); }

.portal-app .portal-choice-text { font-size: 13px; color: var(--muted); }

.portal-app .portal-pad { display: block; width: 100%; height: 220px; background: var(--surface);
    border: 2px dashed rgba(var(--navy-rgb), 0.3); border-radius: 9px; touch-action: none; cursor: crosshair; }

.portal-app .portal-file-label { position: relative; overflow: hidden; }

.portal-app .portal-file-label svg { width: 16px; height: 16px; }

.portal-app .portal-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.portal-app .portal-preview img { display: block; max-width: 100%; max-height: 180px; margin: 0 auto;
    border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }

.portal-app .portal-howto { margin: 0; padding-left: 22px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }

/* Phones: the sidebar becomes a drawer behind the menu button in a sticky
   top bar, instead of the shared horizontal rail (§5), and the buttons get
   finger-sized. */
@media (max-width: 860px) {
    .portal-app .portal-bar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30;
        padding: 10px 12px; background: var(--side-bg); color: var(--side-fg); }

    .portal-app .portal-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
        flex-shrink: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }

    .portal-app .portal-menu svg { width: 22px; height: 22px; }

    .portal-app .portal-bar-title { min-width: 0; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden;
        text-overflow: ellipsis; }

    .portal-app .app-shell .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(330px, 86vw);
        height: auto; margin: 0; border-radius: 0 18px 18px 0; transform: translateX(-105%); transition: transform .2s ease; }

    .portal-app.portal-nav-open .app-shell .side { transform: none; }

    .portal-app .app-shell .side-nav { flex-direction: column; overflow-x: visible; }

    .portal-app .app-shell .nav-stage { min-height: 48px; }

    .portal-app.portal-nav-open .portal-scrim { display: block; position: fixed; inset: 0; z-index: 40;
        background: rgba(0, 0, 0, 0.4); }

    body.portal-app.portal-nav-open { overflow: hidden; }

    .portal-app .app-main .main-inner { padding: 20px 12px 40px; }

    .portal-app .app-main .panel.active { padding: 6px 4px; }

    .portal-app .auth-actions .btn { flex: 1 1 140px; min-height: 44px; font-size: 13px; }

    .portal-app .portal-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}