/* NG Eesti Intra — shared design tokens + app-shell components.
   Palette/type system AND component layer (shell, sidebar, topbar,
   dashboard cards, tables, chips, toolbars…) carried over from the
   approved mockup, adapted to this app's real class names so the live
   app matches it without touching the print-critical document
   forms/prints, which intentionally keep their own separate, unchanged
   styling (see assets/css/offer-print.css for Üüripakkumine's). */

:root{
  --nge-primary:#47648e;
  --nge-primary-dark:#334c70;
  --nge-primary-light:#e8edf5;
  --nge-bg:#f4f6f9;
  --nge-surface:#ffffff;
  --nge-surface-2:#eef1f6;
  --nge-sidebar:#1e2a3c;
  --nge-sidebar-2:#263449;
  --nge-sidebar-text:#c4cede;
  --nge-sidebar-text-dim:#8593a8;
  --nge-border:#dde3ec;
  --nge-border-strong:#c5cedb;
  --nge-text:#20272f;
  --nge-text-muted:#5c6773;
  --nge-text-faint:#8a93a1;
  --nge-success:#2f8f5b;
  --nge-success-bg:#e3f3ea;
  --nge-warning:#b9791f;
  --nge-warning-bg:#faf0dd;
  --nge-danger:#c2493f;
  --nge-danger-bg:#fbe9e6;
  /* 2026-09 addition (Aruanded — Vabad pinnad "reserved"/Potentsiaalne
     rename): a 5th badge colour. All 4 existing tones were already
     claimed by another vacancy status, and re-using badge-danger (red)
     for a status now named "Potentsiaalne" (a positive, hopeful status)
     read as a semantic clash — red still meant "final/urgent" everywhere
     else in the portal. Same gold already used as the accent colour in
     the Hinnapakkumine print design (assets/css/offer-print.css's
     --op-gold: #c9962c) rather than inventing an unrelated new hue. */
  --nge-gold:#a97a17;
  --nge-gold-bg:#f7edd6;
  /* 2026-09-24 addition (Valvelaud, Asendus/"A" shift chip): needed a 5th
     categorical tone distinct from every existing badge/chip colour (the
     gold above is already spoken for by Zenith's regular "T" shift code
     in the approved mockup). Same value as the mockup's own --nge-accent
     invented for that demo — carried over unchanged rather than picking a
     new one. */
  --nge-accent:#6d4aa8;
  --nge-accent-bg:#efe7fb;
  /* 2026-09-24 addition (Valvelaud, riigipüha veerg/lahter graafikus):
     mokap v8 märgib püha veeru omaette sooja beeži tooniga, mitte punase
     "ohu" tooniga (--nge-danger-bg) — esimeses parandusringis kasutati
     ekslikult danger-bg't, mis nägi graafikus välja nagu tõrge, mitte
     lihtsalt "see on püha" märge. Väärtus mokapi enda kõvakodeeritud
     tooni järgi (#f3ece0 ekraanil / #eee2c9 prindis — prindifail kasutab
     otse literaalset heksi, sest prindil pole tumedat teemat).
  */
  --nge-holiday-bg:#f3ece0;
  /* 2026-09-25 addition (Valvelaud, koristajate "KT" vahetuskoodi plaat):
     6. kategooriline toon — kõik 5 eelmist (primary/primary-dark/gold/
     accent/ ja success/warning/danger badge-tasandil) olid juba mõne teise
     graafiku koodiga kasutuses, uus roheline-sinine (teal) toon eristub
     neist kõigist selgelt ega kattu ühegi status-tähendusega mujal portaalis. */
  --nge-teal:#1a7d70;
  --nge-teal-bg:#dceeeb;
  --nge-focus:#7592ba;
  /* v5.62: tokens that differ between the themes (text-on-surface use of primary-dark,
     the sidebar admin link, the amber note callout, the offer-preview desk colour) */
  --nge-primary-text:var(--nge-primary-dark);
  --nge-sb-admin-cur:#e3c98a;
  --nge-note-bg:#fff8e6; --nge-note-border:#f0d98c;
  --nge-desk:#e9edf3;
  --nge-shadow:0 1px 2px rgba(24,31,41,.05),0 6px 16px rgba(24,31,41,.06);
  --nge-radius:10px;
}
/* v5.62: the dark palette is screen-only. Print and "save as PDF" always use
   the light tokens, whatever the device theme or the user's choice. color-scheme
   makes native controls (date picker, select list, scrollbars) follow the theme. */
:root{color-scheme:light}
@media screen and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --nge-primary-text:#9db9de; --nge-sb-admin-cur:#fff; --nge-note-bg:rgba(219,165,76,.14); --nge-note-border:rgba(219,165,76,.4); --nge-desk:var(--nge-bg);
    --nge-primary:#7592ba; --nge-primary-dark:#5a7aa6; --nge-primary-light:rgba(117,146,186,.16);
    --nge-bg:#12161d; --nge-surface:#1a212b; --nge-surface-2:#212a36;
    --nge-sidebar:#0e131a; --nge-sidebar-2:#161e28;
    --nge-sidebar-text:#c4cede; --nge-sidebar-text-dim:#657183;
    --nge-border:#2b333f; --nge-border-strong:#3a4453;
    --nge-text:#e7ebf1; --nge-text-muted:#a1abbb; --nge-text-faint:#6b7688;
    --nge-success:#5bbf8a; --nge-success-bg:rgba(91,191,138,.14);
    --nge-warning:#dba54c; --nge-warning-bg:rgba(219,165,76,.14);
    --nge-danger:#e08076; --nge-danger-bg:rgba(224,128,118,.14);
    --nge-gold:#d1a94c; --nge-gold-bg:rgba(209,169,76,.16);
    --nge-accent:#a98bd6; --nge-accent-bg:rgba(169,139,214,.16);
    --nge-holiday-bg:rgba(196,168,110,.16);
    --nge-teal:#4fc3b0; --nge-teal-bg:rgba(79,195,176,.16);
    --nge-focus:#7592ba;
    --nge-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
  }
}
@media screen{
:root[data-theme="dark"]{
  color-scheme:dark;
  --nge-primary-text:#9db9de; --nge-sb-admin-cur:#fff; --nge-note-bg:rgba(219,165,76,.14); --nge-note-border:rgba(219,165,76,.4); --nge-desk:var(--nge-bg);
  --nge-primary:#7592ba; --nge-primary-dark:#5a7aa6; --nge-primary-light:rgba(117,146,186,.16);
  --nge-bg:#12161d; --nge-surface:#1a212b; --nge-surface-2:#212a36;
  --nge-sidebar:#0e131a; --nge-sidebar-2:#161e28;
  --nge-sidebar-text:#c4cede; --nge-sidebar-text-dim:#65718f;
  --nge-border:#2b333f; --nge-border-strong:#3a4453;
  --nge-text:#e7ebf1; --nge-text-muted:#a1abbb; --nge-text-faint:#6b7688;
  --nge-success:#5bbf8a; --nge-success-bg:rgba(91,191,138,.14);
  --nge-warning:#dba54c; --nge-warning-bg:rgba(219,165,76,.14);
  --nge-danger:#e08076; --nge-danger-bg:rgba(224,128,118,.14);
  --nge-gold:#d1a94c; --nge-gold-bg:rgba(209,169,76,.16);
  --nge-accent:#a98bd6; --nge-accent-bg:rgba(169,139,214,.16);
  --nge-holiday-bg:rgba(196,168,110,.16);
  --nge-teal:#4fc3b0; --nge-teal-bg:rgba(79,195,176,.16);
  --nge-focus:#7592ba;
  --nge-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
}
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--nge-bg);color:var(--nge-text);font-family:"Public Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Manrope",system-ui,sans-serif;font-weight:700;margin:0}
a{color:var(--nge-primary)}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--nge-focus);outline-offset:2px}
.ng-logo{height:34px;width:auto;color:var(--nge-primary);display:block}

/* ---- form basics (shared with document edit forms — untouched look) --- */
.field{margin-bottom:16px;min-width:0}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--nge-text-muted);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;min-width:0;padding:10px 12px;border:1px solid var(--nge-border-strong);border-radius:8px;
  background:var(--nge-bg);color:var(--nge-text);font-size:14px;font-family:inherit;
}
/* Bugfix (ver 4.2): native date/datetime/time controls (iOS/Android) carry
   their own intrinsic min-content width (the rendered "dd.mm.yyyy" text),
   which is wider than a grid track on a narrow phone. A CSS grid item's
   default min-width:auto lets that intrinsic size win over width:100% and
   push the control past its column — reported as the date field on
   documents/viivis/edit.php "hanging off the edge" on mobile. min-width:0
   above (on both .field and the control itself) lets the track's own width
   win instead, matching every other field type. Applies to every .field
   date/datetime-local/time input across all document forms, not just one. */
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--nge-focus);outline-offset:1px}
.field-hint{font-size:12px;color:var(--nge-text-faint);margin-top:5px}
.field-error{font-size:12.5px;color:var(--nge-danger);margin-top:5px}
.checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--nge-text-muted);cursor:pointer;user-select:none}
.checkbox input{width:15px;height:15px;accent-color:var(--nge-primary);flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;padding:10px 18px;font-weight:600;font-size:13.5px;font-family:"Public Sans"}
.btn-primary{background:var(--nge-primary);color:#fff}
.btn-primary:hover{background:var(--nge-primary-dark)}
.btn-outline{background:var(--nge-surface);color:var(--nge-text);border:1px solid var(--nge-border-strong)}
.btn-outline:hover{background:var(--nge-surface-2)}
.btn-ghost{background:transparent;color:var(--nge-primary);border:1px solid var(--nge-border-strong)}
.btn-ghost:hover{border-color:var(--nge-primary);background:var(--nge-primary-light)}
.btn-danger{background:var(--nge-danger-bg);color:var(--nge-danger);border:1px solid transparent}
.btn-danger:hover{background:var(--nge-danger);color:#fff}
.btn-sm{padding:6px 12px;font-size:12.5px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.alert{border-radius:8px;padding:12px 14px;font-size:13.5px;margin-bottom:16px}
.alert-danger{background:var(--nge-danger-bg);color:var(--nge-danger)}
.alert-success{background:var(--nge-success-bg);color:var(--nge-success)}
.alert-warning{background:var(--nge-warning-bg);color:var(--nge-warning)}

/* Status pills — kept as .badge in markup (list/admin pages already use
   this class name) but given the mockup's dot+pill "chip" look. */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;flex:none}
.badge-success{background:var(--nge-success-bg);color:var(--nge-success)}
.badge-success::before{background:var(--nge-success)}
.badge-warning{background:var(--nge-warning-bg);color:var(--nge-warning)}
.badge-warning::before{background:var(--nge-warning)}
.badge-danger{background:var(--nge-danger-bg);color:var(--nge-danger)}
.badge-danger::before{background:var(--nge-danger)}
.badge-muted{background:var(--nge-surface-2);color:var(--nge-text-faint)}
.badge-muted::before{background:var(--nge-text-faint)}
/* 2026-09-09 addition (Vabad pinnad — Loobumissoov status): the only badge
   tone missing from the set above — informational/in-progress, distinct
   from success/warning/danger/muted. Reuses the shared primary token so it
   tracks the palette (incl. dark mode) automatically, same as every other
   variant here. */
.badge-info{background:var(--nge-primary-light);color:var(--nge-primary-text)}
.badge-info::before{background:var(--nge-primary)}
/* 2026-09 addition (Aruanded — "reserved" vacancy status renamed
   Broneeritud -> Potentsiaalne, globally, including this live Vabad
   pinnad screen): see the --nge-gold doc comment near :root above for
   why this couldn't just reuse one of the 4 existing tones. */
.badge-gold{background:var(--nge-gold-bg);color:var(--nge-gold)}
.badge-gold::before{background:var(--nge-gold)}

/* ---- login screen (left-aligned, matches the approved mockup) --------- */
.login-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:32px 16px}
.login-card{width:100%;max-width:380px;background:var(--nge-surface);border:1px solid var(--nge-border);border-radius:var(--nge-radius);box-shadow:var(--nge-shadow);padding:36px 32px 28px}
.login-logo{margin-bottom:18px;position:relative;display:inline-block}
.login-logo .ng-logo{width:168px;height:auto;color:var(--nge-primary)}
/* Animated login logo (ver 5.0): the static SVG (above) always renders
   first and stays put; assets/js/login-logo.js only fades it out and
   fades the Lottie crop in once the animation has actually loaded, so a
   blocked/offline cdnjs script or JSON leaves the plain static logo
   exactly as it always looked. See login-logo.js for the full contract. */
.login-logo-static{display:block;opacity:1;transition:opacity .35s ease}
.login-logo-anim-crop{position:absolute;left:0;top:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .35s ease}
.login-logo-anim-canvas{position:absolute}
.login-logo-anim-canvas svg{display:block}
.login-tagline{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--nge-text-faint);margin-bottom:24px}
.login-card h1{font-size:19px;margin-bottom:4px}
.login-sub{color:var(--nge-text-muted);font-size:13px;margin-bottom:24px}
.login-card .btn-primary{width:100%;padding:11px;margin-top:6px}
.field-inline{margin-bottom:18px}

/* ---- app shell ---------------------------------------------------------- */
.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.sidebar{background:var(--nge-sidebar);color:var(--nge-sidebar-text);padding:20px 14px;display:flex;flex-direction:column;gap:22px}
/* .sb-row1 only exists to give the mobile breakpoint something to turn
   into its own horizontal-scroll strip (logo + top-level nav) separate
   from the ver 4.4 mobile doc-type <select> below it. On desktop it must
   be invisible to layout — display:contents makes .sb-logo/.sb-nav act
   as direct children of .sidebar's own column flex, unchanged from
   every version before ver 4.4. */
.sb-row1{display:contents}
.sb-doc-select{display:none}
.sb-logo{display:flex;align-items:center;gap:8px;padding:4px 6px 0}
.sb-logo .ng-logo{width:112px;height:auto;color:#ffffff}
.sb-logo-tag{font-family:"Manrope",sans-serif;font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--nge-sidebar-text-dim);text-transform:uppercase;margin-top:2px}
.sb-nav{display:flex;flex-direction:column;gap:2px}
.sb-group-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--nge-sidebar-text-dim);margin:14px 10px 6px}
.sb-nav li{list-style:none}
.sb-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;font-size:13.5px;font-weight:500;color:var(--nge-sidebar-text);text-decoration:none;border:none;background:transparent;width:100%;text-align:left}
.sb-link .ic{width:17px;text-align:center;opacity:.85;flex:none}
.sb-link:hover{background:var(--nge-sidebar-2)}
.sb-link.current{background:var(--nge-primary);color:#fff}
.sb-link.admin{color:#e3c98a}
.sb-link.admin.current{color:var(--nge-sb-admin-cur)}
.sb-sub{display:flex;flex-direction:column;gap:1px;margin:2px 4px 8px 27px;padding-left:12px;border-left:1px solid #2b374a}
.sb-sublink{display:block;padding:6px 9px;border-radius:6px;font-size:12px;color:var(--nge-sidebar-text-dim);text-decoration:none}
.sb-sublink:hover{background:var(--nge-sidebar-2);color:var(--nge-sidebar-text)}
.sb-sublink.current{background:var(--nge-primary);color:#fff}

.main{padding:22px 28px 60px;min-width:0}
.content{display:contents}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.crumbs{font-size:12.5px;color:var(--nge-text-faint)}
.crumbs b{color:var(--nge-text-muted);font-weight:600}
.page-title{font-size:22px;margin-top:3px}
.user-chip{display:flex;align-items:center;gap:10px;background:var(--nge-surface);border:1px solid var(--nge-border);border-radius:999px;padding:5px 14px 5px 6px}
.user-chip-link{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;border-radius:999px}
.user-chip-link:hover .name{color:var(--nge-primary)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--nge-primary-light);color:var(--nge-primary);display:flex;align-items:center;justify-content:center;font-family:"Manrope",sans-serif;font-weight:700;font-size:11.5px;flex:none}
.user-chip .name{font-weight:600;font-size:13px;white-space:nowrap}
.role-tag{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--nge-surface-2);color:var(--nge-text-muted);white-space:nowrap}
.role-tag.admin{background:var(--nge-warning-bg);color:var(--nge-warning)}
.user-chip .logout-btn{border:none;background:transparent;color:var(--nge-text-faint);font-size:12px;font-weight:600;line-height:1;padding:5px 7px;border-radius:6px}
.user-chip .logout-btn:hover{background:var(--nge-surface-2);color:var(--nge-text)}
.user-chip form{display:flex;margin:0}

.app-version-footer{padding:18px 0 0;text-align:center;font-size:11px;color:var(--nge-text-faint)}
/* Never printed — explicit requirement: this footer is screen-only unless
   a specific document form is later asked to include it. */
@media print{ .app-version-footer{display:none !important} }

/* ---- dashboard: document-type cards + plans banner --------------------- */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:20px}
.doc-card{background:var(--nge-surface);border:1px solid var(--nge-border);border-radius:var(--nge-radius);padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--nge-shadow)}
.doc-card .dc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.dc-icon{width:36px;height:36px;border-radius:8px;background:var(--nge-primary-light);color:var(--nge-primary);display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.dc-count{font-family:"Manrope",sans-serif;font-weight:800;font-size:19px;color:var(--nge-text);text-align:right}
.dc-count span{display:block;font-family:"Public Sans";font-weight:500;font-size:10.5px;color:var(--nge-text-faint);text-transform:uppercase;letter-spacing:.04em}
.doc-card h3{font-size:14.5px}
.doc-card .dc-desc{font-size:12px;color:var(--nge-text-muted);flex:1}
.dc-actions{display:flex;gap:8px}
.dc-actions .btn{flex:1;padding:8px 10px;font-size:12.5px}

.plans-card{background:linear-gradient(135deg,var(--nge-primary) 0%,var(--nge-primary-dark) 100%);border-radius:var(--nge-radius);padding:20px 22px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;box-shadow:var(--nge-shadow);margin-bottom:20px}
.plans-card h3{font-size:16px;margin-bottom:4px;color:#fff}
.plans-card p{margin:0;font-size:12.5px;opacity:.85;max-width:44ch}
.plans-card .btn{background:#fff;color:var(--nge-primary-dark);white-space:nowrap}
.plans-card .btn:hover{background:var(--nge-surface-2)}

/* ---- panels -------------------------------------------------------------
   .panel is the general padded content card (dashboard intro text, the
   admin "edit user" form, Plaanid's accordions, …). Add .panel-flush to a
   panel whose children (.panel-head / .toolbar / .tbl-wrap+table / .callout
   / .add-user-card) bring their own edge-to-edge padding — used for every
   panel built primarily around a data table, matching the mockup. */
.panel{background:var(--nge-surface);border:1px solid var(--nge-border);border-radius:var(--nge-radius);box-shadow:var(--nge-shadow);padding:20px 22px;margin-bottom:20px}
.panel h2{font-size:14.5px;margin-bottom:14px}
.panel.panel-flush{padding:0;overflow:hidden}
.panel-flush > h2{padding:16px 18px 0;margin-bottom:10px}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--nge-border);gap:12px;flex-wrap:wrap}
.panel-head h2{font-size:15.5px;margin:0}
.panel-head .hint{font-size:12px;color:var(--nge-text-faint);margin-top:2px}

/* ---- tables -------------------------------------------------------------
   table.data is the shared class for every browsable list (document
   history, admin users, admin log, dashboard "recent"). The printed
   documents (documents/<module>/view.php) use their own, entirely
   separate styling and never touch this class, so their layout is
   unaffected. */
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--nge-text-faint);font-weight:700;padding:10px 18px;border-bottom:1px solid var(--nge-border);background:var(--nge-surface-2)}
table.data td{padding:11px 18px;border-bottom:1px solid var(--nge-border);vertical-align:middle;color:var(--nge-text)}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:var(--nge-surface-2)}
table.data .row-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.tbl-wrap{overflow-x:auto}

.toolbar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--nge-border);flex-wrap:wrap}
.toolbar form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Search field, unified with the "+Uus ..." button's own height/padding
   (2026-09 feedback round item 5) — same 38px-tall control either way, so
   the two sit level in the toolbar instead of the search box reading
   shorter/secondary. An explicit "Otsi" submit button sits next to the
   input — before, the field only searched on Enter, with no visible
   control. One shared component (documents/list.php, driven by ?type=)
   used by Arved/Aktid/Teatised/Kassa/Viivisearved alike, so this one
   change is already unified across every document list. */
.search{display:flex;align-items:center;gap:8px}
/* Bugfix (2026-09-03, live-tested): ".toolbar form{flex-wrap:wrap}" above
   has higher specificity than ".search" alone and was winning, wrapping
   the search-box+Otsi button onto their own line below "+ Uus ...". This
   beats it back for the search form specifically — every other form still
   wraps on narrow screens as before. */
.toolbar form.search{flex-wrap:nowrap}
.search .search-box{flex:0 1 240px;min-width:140px;display:flex;align-items:center;gap:7px;background:var(--nge-bg);border:1px solid var(--nge-border);border-radius:8px;padding:10px 12px;height:38px}
.search .search-box input{border:none;background:transparent;font-family:inherit;font-size:12.5px;color:var(--nge-text);width:100%;outline:none}
.search .search-box svg{flex:none;width:14px;height:14px;color:var(--nge-text-faint)}
.search .btn{height:38px}
select.filter{border:1px solid var(--nge-border);background:var(--nge-surface);border-radius:8px;padding:8px 10px;font-size:12.5px;font-family:inherit;color:var(--nge-text-muted)}

.callout{display:flex;gap:10px;background:var(--nge-primary-light);border:1px solid var(--nge-border-strong);border-radius:8px;padding:12px 14px;font-size:12.5px;color:var(--nge-text-muted);margin:16px 18px}
.callout .ic{color:var(--nge-primary);flex:none}
.callout b{color:var(--nge-text)}
.panel-flush .callout:last-child{margin-bottom:18px}

/* Admin "add user" inline widget below the users table. */
.add-user-card{margin:16px 18px 18px;border:1px dashed var(--nge-border-strong);border-radius:8px;padding:16px;display:grid;grid-template-columns:1.2fr 1fr 0.9fr 0.9fr auto;gap:12px;align-items:end;background:var(--nge-bg)}
.add-user-card .field{margin-bottom:0}
.add-user-card .field label{margin-bottom:5px}
.add-user-card .field input,.add-user-card .field select{padding:8px 10px;font-size:13px}

/* Reusable responsive form-field grids, used by every document edit
   screen instead of one-off inline grid-template-columns, so the mobile
   breakpoint below can collapse them to one column. */
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px 20px}
.form-grid-label{display:grid;grid-template-columns:120px 1fr;gap:14px}
/* When a form-grid sits directly inside a .panel-flush (no padding of its
   own), it needs its own padding — used by the redesigned document edit
   screens (documents/<module>/edit.php). */
.panel-flush .form-grid-2,.panel-flush .form-grid-3,.panel-flush .form-grid-label{padding:18px}
.form-grid-2 .full,.form-grid-3 .full,.form-grid-label .full{grid-column:1/-1}
.form-grid-2 .opt,.form-grid-3 .opt,.form-grid-label .opt{font-weight:400;color:var(--nge-text-faint)}
/* Universal upper bound on how wide an input-form grid may grow (2026-09
   feedback round item 2 — "разъехались" on very wide monitors). This only
   CAPS growth, it never forces a size: on a laptop or phone the panel is
   already narrower than 860px and this rule never engages — the existing
   max-width:860px media query further below still switches these same
   grids to one column on small screens, untouched by this rule — while on
   a big desktop monitor it simply stops the grid from stretching each
   field far past a comfortable reading width. Applies to every
   .panel-flush form automatically, including profile.php's Nimi / Parool /
   Kontaktandmed panels, with no extra markup anywhere. */
.panel-flush .form-grid-2,.panel-flush .form-grid-3,.panel-flush .form-grid-label{max-width:860px}

/* Line-item table wrapper (Arve teenused/kaup, Viivis arved-read) + its
   trailing "+ Lisa rida" action, and the totals summary bar under it —
   shared by every document edit screen that has an editable item table. */
.line-tbl{margin:0 18px 18px;border:1px solid var(--nge-border);border-radius:8px;overflow:hidden}
.line-tbl .tbl-wrap{overflow-x:auto}
.line-tbl table.data{width:100%}
.add-row{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px 18px;font-size:12.5px;font-weight:600;font-family:inherit;color:var(--nge-primary);background:transparent;border:none;border-top:1px dashed var(--nge-border);cursor:pointer}
.add-row:hover{background:var(--nge-primary-light)}

.total-row{display:flex;justify-content:flex-end;flex-wrap:wrap;align-items:baseline;gap:8px 22px;padding:12px 18px;margin:0 18px 18px;background:var(--nge-surface-2);border-radius:8px;font-size:13.5px;color:var(--nge-text-muted)}
.total-row b{font-family:"Manrope",sans-serif;font-size:16px;color:var(--nge-text)}

/* Trailing save/cancel bar — placed as the last element of the last panel
   in a document edit form (instead of floating after all panels). */
.form-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 18px;border-top:1px solid var(--nge-border)}

@media (max-width:860px){
  /* Bugfix (ver 4.4, measured — see README). .shell's min-height:100vh
     (set higher up, desktop-only in intent — it's what makes the sidebar
     visually span the full viewport as a tall left column) was never
     reset for the mobile single-column collapse below. On a page with
     little content (an empty document list, "Kirjeid ei leitud"), the
     grid had extra vertical space to fill and gave it to the sidebar row
     — measured at 242px tall instead of its natural ~58px, i.e. a big
     dark empty band above the actual page content. min-height:0 here
     lets the mobile layout size to its own content again, confirmed by
     the same before/after Playwright measurement method as the ver 4.3
     fixes below. */
  .shell{grid-template-columns:1fr;min-height:0}
  /* Ver 5.10: overflow-x was "visible" here, which under CSS Grid re-enables
     content-based automatic minimum sizing for .sidebar as a grid item of
     .shell{grid-template-columns:1fr} — the sidebar (and with it the whole
     page) was stretched wide enough to fit .sb-row1's nav-strip content
     without scrolling, even though .sb-row1 already has its own
     overflow-x:auto and was designed to scroll internally. Confirmed via
     Playwright at 860/834/640/480/428/390/320px: switching to
     overflow-x:hidden removes ALL portal-wide horizontal overflow at every
     width down to 320px, with .sb-row1's own internal scroll unaffected. */
  .sidebar{position:sticky;top:0;z-index:40;flex-direction:column;align-items:stretch;padding:0;gap:0;overflow-x:hidden}
  /* Ver 4.4: this is the strip that used to be .sidebar itself (logo +
     top-level nav, horizontally scrollable) — pulled onto its own row so
     the ver 4.4 doc-type <select> below can sit under it as a second,
     always-visible row instead of competing for space inside the same
     scroll strip. */
  .sb-row1{display:flex;flex-direction:row;align-items:center;padding:10px 12px;gap:12px;overflow-x:auto}
  .sb-nav{flex-direction:row;gap:4px}
  .sb-group-label{display:none}
  /* Ver 4.4: replaces the ver 4.2/4.3 horizontal pill submenu on mobile
     with the <select> below — back to display:none here, but this time
     because an equivalent (in fact quicker — zero swiping, one tap)
     mobile control exists elsewhere, not because the submenu has no
     mobile equivalent at all (that was ver 4.2's actual bug). Desktop is
     completely unaffected — .sb-sub still renders permanently there. */
  .sb-sub{display:none}
  .sb-doc-select{
    display:block;width:100%;margin:0;padding:10px 14px;border:none;
    border-top:1px solid #2b374a;border-radius:0;background:var(--nge-sidebar-2);
    color:#fff;font-size:13px;font-family:inherit;
  }
  /* Bugfix (ver 4.3, verified against real rendering — see README). Every
     .sb-link carries "width:100%" for the DESKTOP vertical layout (each
     link fills its 220px column) and nothing ever reset that for the
     mobile horizontal row — so every pill tried to claim the full row
     width, measured at ~1090px each on a ~390px phone screen. width:auto
     here lets every pill size to its own text again. */
  .sb-link{white-space:nowrap;flex:none;width:auto}
  .main{padding:18px 14px 48px}
  .topbar{align-items:center}
  .user-chip .name{display:none}
  .add-user-card{grid-template-columns:1fr}

  table.data:not(.keep-table),
  table.data:not(.keep-table) thead,
  table.data:not(.keep-table) tbody,
  table.data:not(.keep-table) th,
  table.data:not(.keep-table) td,
  table.data:not(.keep-table) tr{display:block}
  table.data:not(.keep-table) thead{display:none}
  table.data:not(.keep-table) tr{border-bottom:1px solid var(--nge-border);padding:10px 4px}
  .panel-flush table.data:not(.keep-table) tr{border-bottom:1px solid var(--nge-border);padding:10px 18px}
  table.data:not(.keep-table) td{border:none;padding:5px 2px;display:flex;justify-content:space-between;gap:12px;text-align:right}
  table.data:not(.keep-table) td::before{content:attr(data-label);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--nge-text-faint);font-weight:700;text-align:left}
  table.data:not(.keep-table) .row-actions{justify-content:flex-end}
}

/* ---- Üüripakkumine (commercial offer) edit-form components — ver 4.0 -- */
.static-value{padding:10px 12px;border:1px solid var(--nge-border);border-radius:8px;background:var(--nge-surface-2);color:var(--nge-text);font-size:14px}
.static-value.muted{color:var(--nge-text-faint);font-style:italic}

.building-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.building-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:1.5px solid var(--nge-border-strong);border-radius:10px;background:var(--nge-surface);text-align:left}
.building-btn .bb-title{font-family:"Manrope",sans-serif;font-weight:700;font-size:15px;color:var(--nge-text)}
.building-btn .bb-sub{font-size:12px;color:var(--nge-text-faint)}
.building-btn.active{border-color:var(--nge-primary);background:var(--nge-primary-light)}
.building-btn.active .bb-title{color:var(--nge-primary-text)}
/* .building-picker sits directly in .panel-flush (padding:0) rather than
   inside a .form-grid-2, so unlike every other field group in this panel
   it had no inset of its own — the buttons' rounded border touched, and
   with .panel-flush's overflow:hidden, sometimes clipped against, the
   panel's own rounded edge. Mirrors .panel-flush .form-grid-2's 18px/14px.
   ver 4.2 fix #2: it was ALSO missing the same max-width:860px every
   .form-grid-2/.form-grid-3/.form-grid-label in this panel already has
   (see that rule below) — on a wide monitor the buttons stretched far
   past the rest of the form's width, looking oversized/misaligned next
   to the narrower fields above and below them. */
.panel-flush .building-picker{padding:16px 18px 0; max-width:860px}
@media (max-width:640px){
  .panel-flush .building-picker{padding:14px 14px 0}
}

.room-list{max-height:320px;overflow-y:auto;border:1px solid var(--nge-border);border-radius:8px;background:var(--nge-surface)}
/* ver 4.2: rooms are grouped by floor (<details> per floor/section) instead
   of one flat, hard-capped list — see documents/pakkumine/edit.php's
   renderRoomList(). Lets staff browse straight to a floor without already
   knowing the exact room number, which a single alphabetic/numeric-prefix
   search box couldn't do. */
.room-group{border-bottom:1px solid var(--nge-border)}
.room-group:last-child{border-bottom:none}
.room-group > summary{display:flex;align-items:center;gap:7px;padding:9px 12px;cursor:pointer;list-style:none;font-size:12.5px;font-weight:600;color:var(--nge-text);background:var(--nge-surface-2)}
.room-group > summary::-webkit-details-marker{display:none}
.room-group > summary::before{content:'▸';font-size:10px;color:var(--nge-text-faint);transition:transform .15s}
.room-group[open] > summary::before{transform:rotate(90deg)}
.room-group > summary .rg-label{flex:1}
.room-group > summary .rg-count{font-family:"JetBrains Mono",monospace;font-weight:400;font-size:11px;color:var(--nge-text-faint)}
.room-group-body{display:flex;flex-direction:column}
.room-group-note{padding:8px 12px;font-size:11px;color:var(--nge-text-faint)}

/* ver 4.2 — live pre-save page-overflow indicator (documents/pakkumine/
   edit.php's #offerMeasure clone measures the real print CSS/layout in
   the browser doing the save; this just displays the result). */
.page-fit-indicator{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.page-fit-indicator.ok{color:var(--nge-success);background:var(--nge-success-bg)}
.page-fit-indicator.over{color:var(--nge-danger);background:var(--nge-danger-bg)}
.room-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;padding:8px 12px;border:none;border-bottom:1px solid var(--nge-border);background:transparent}
.room-item:last-child{border-bottom:none}
.room-item .ri-num{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:13px;color:var(--nge-text)}
.room-item .ri-meta{font-size:11.5px;color:var(--nge-text-faint)}
.room-item.active{background:var(--nge-primary-light)}
.room-item.active .ri-num{color:var(--nge-primary-text)}
.room-item.unavailable{opacity:.45;cursor:not-allowed}
.room-empty{padding:14px;text-align:center;color:var(--nge-text-faint);font-size:12.5px}

.autocomplete-results{position:relative;margin-top:4px;border:1px solid var(--nge-border-strong);border-radius:8px;background:var(--nge-surface);box-shadow:var(--nge-shadow);max-height:220px;overflow-y:auto;z-index:20}
.autocomplete-item{display:block;width:100%;text-align:left;padding:9px 12px;border:none;border-bottom:1px solid var(--nge-border);background:transparent;font-size:13px;color:var(--nge-text)}
.autocomplete-item:last-child{border-bottom:none}
.autocomplete-item:hover{background:var(--nge-surface-2)}
/* 2026-09 "срок действия договора" round: shown only when a client result
   carries contract_end (uurnikud/vabad_edit.php's building-scoped search —
   see assets/js/company-search.js) — never appears on the other document
   forms' plain e-Äriregister+client search. */
.ac-end-hint{font-size:11px;color:var(--nge-text-faint);white-space:nowrap}

.offer-texts{display:flex;flex-direction:column;gap:16px;padding:18px}
.text-block textarea{font-family:"Public Sans",sans-serif;resize:vertical;margin-bottom:8px}

@media (max-width:640px){
  .building-picker{grid-template-columns:1fr}
}

@media (max-width:640px){
  .form-grid-2,.form-grid-3,.form-grid-label{grid-template-columns:1fr}
  .doc-grid{grid-template-columns:1fr}
  /* Tighter inset on small screens for the same .panel-flush field grids
     (ver 3.8) — 18px reads fine on desktop but eats too much of a narrow
     phone's width; 14px keeps the recessed-field look without cramping
     the inputs themselves. */
  .panel-flush .form-grid-2,.panel-flush .form-grid-3,.panel-flush .form-grid-label{padding:14px}
}

/* ==========================================================================
   2026-09 27-item feedback round — new shared components. Everything
   above this line is unchanged; the app's existing forms/prints keep
   looking exactly as they did unless a rule below specifically targets
   them by a new class name (never a bare existing selector), so nothing
   here can silently change a page this round didn't touch.
   ========================================================================== */

/* ---- contrast fix (item 19): light-mode --nge-text-faint measured
   ~3.1:1 on white, ~2.9:1 on --nge-bg — both fail WCAG AA for normal-size
   text (needs 4.5:1). #66707e measures ~5.0:1 / ~4.6:1 on the same two
   surfaces — safely AA, still visibly the "quietest" of the three text
   tones (lighter than --nge-text-muted). Dark-mode value already passed
   and is untouched. */
:root{ --nge-text-faint:#66707e; }

/* ---- required-field marker (item 4) ------------------------------------ */
.field label .req{ color:var(--nge-danger); margin-left:3px; font-weight:700; }

/* ---- inline field validation (item 4+6): assets/js/field-validation.js
   intercepts the native required/invalid check on submit, toggles
   .has-error on the .field wrapper instead of letting the browser show
   its own tooltip, and injects a .field-error message right under the
   control (.field-error itself already existed in this file). A generic
   top-of-page .alert-danger is still used for the rare error only the
   server itself can detect (e.g. a duplicate number) — this cannot be
   attributed to one specific field without deeper save.php changes. */
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:var(--nge-danger); background:var(--nge-danger-bg); }
.field.has-error label{ color:var(--nge-danger); }

/* ---- date field (item 3): a styled text input ("pp.kk.aaaa") with a
   calendar-icon button that opens the browser's native date picker
   (showPicker() where supported) hidden underneath — the pattern is
   taken from the user's own Arve_NG_EESTI.html reference file. It
   sidesteps the iOS Safari native date-input intrinsic-width bug
   entirely, because the VISIBLE control the user types into is a plain
   text input, never a native date widget. assets/js/date-field.js
   upgrades any <input type="date" class="js-date"> into this markup
   automatically at page load — no per-form template rewrite needed. */
.date-field-wrap{ position:relative; }
.date-field-wrap input.date-field-text{ padding-right:38px; }
/* v5.52: pointer-events:none added. See the v5.52 comment below — for a
   mouse/touch pointer this icon is now purely decorative (the real native
   date input sits on top of this exact box and receives the actual tap);
   kept fully focusable/clickable via KEYBOARD still (Tab + Enter/Space),
   since pointer-events only governs pointer hit-testing, not keyboard
   focus or a keyboard-synthesized click — so :hover (a pointer-only
   pseudo-class) no longer highlights this icon on mouse hover, a minor,
   accepted cosmetic trade-off; the pointer cursor itself is unaffected
   (the native input below now carries its own cursor:pointer). */
.date-field-wrap .date-field-ico{ position:absolute; right:1px; top:1px; bottom:1px; width:36px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; border-radius:0 7px 7px 0; color:var(--nge-text-faint); cursor:pointer; padding:0; pointer-events:none; }
.date-field-wrap .date-field-ico:hover{ color:var(--nge-primary); background:var(--nge-surface-2); }
.date-field-wrap .date-field-ico svg{ width:16px; height:16px; pointer-events:none; }
/* v5.52 (per Alex, 2026-10: calendar icon confirmed still broken on real
   iPhone after v5.51's showPicker()-visibility fix — that hypothesis was
   insufficient). Root cause reconsidered: v5.51 (and the original
   markup) always opened the picker INDIRECTLY — a click on the icon
   <button> ran JS (showPicker(), falling back to .focus()) against a
   separate, fully hidden input. iOS WebKit's showPicker()/focus()-driven
   picker opening is exactly the part that empirically does not work
   reliably on the user's real device, independent of how "rendered" the
   hidden input is sized.
   New approach: stop going through any JS API for the pointer/touch path
   entirely. The real <input type="date"> is now positioned to exactly
   cover the icon's own 36px hit-box (not the whole field, so it never
   overlaps the visible text input to its left) and made directly
   clickable (pointer-events:auto, real cursor:pointer). A tap there is
   now a 100% genuine, unmediated native tap on the real control — the
   same interaction that reliably opens the OS date picker when tapping
   any plain, unstyled <input type="date">, on every engine including
   iOS WebKit. No API, no "is this rendered enough" heuristic, nothing
   for a given WebKit build to silently fail. Still fully invisible
   (opacity:0) — the user keeps seeing only the dd.mm.yyyy text field +
   icon, the real control is just moved/exposed to taps precisely where
   the icon already visually is.
   The old JS click handler on the icon <button> (showPicker()/.focus(),
   assets/js/date-field.js) is left in place unchanged — with the icon
   now pointer-events:none, that handler is unreachable by mouse/touch,
   but a *keyboard* Enter/Space on the still-focusable icon still
   dispatches a synthetic click the browser delivers directly to the
   focused element regardless of pointer-events, so it keeps working as
   the keyboard-accessible path (keyboard use was never the reported
   problem, only real-device touch was, so this fallback is deliberately
   kept rather than removed). */
.date-field-wrap input.date-field-native{ position:absolute; right:1px; top:1px; bottom:1px; left:auto; width:36px; opacity:0; pointer-events:auto; cursor:pointer; }

/* ---- generalized company-search autofill (item 3): reuses the existing
   .autocomplete-results/.autocomplete-item look (previously wired up on
   Pakkumine only) on any text field via assets/js/company-search.js and
   a small data-* attribute contract — no new visual language. */
.company-ac-empty{ padding:10px 12px; font-size:12.5px; color:var(--nge-text-faint); }

/* ---- sidebar "Dokumendid" submenu, collapsed by default (item 10) ------ */
.sb-link.sb-toggle{ cursor:pointer; }
.sb-link.sb-toggle .sb-caret{ margin-left:auto; width:9px; height:9px; flex:none; transition:transform .15s ease; opacity:.75; }
.sb-link.sb-toggle[aria-expanded="true"] .sb-caret{ transform:rotate(90deg); }
.sb-sub[hidden]{ display:none; }

/* ---- colorful document-type icons (item 11) — the client explicitly
   asked for tinted colour tiles rather than the originally-proposed flat
   monochrome set ("мне сейчас очень нравятся цветные иконки"). Each doc
   type keeps one accent colour, set inline per element as --doc-color /
   --doc-color-bg so this one rule covers dashboard cards AND the sidebar
   submenu without a modifier class per colour. */
.dc-icon.dc-icon-color{ background:var(--doc-color-bg,var(--nge-primary-light)); color:var(--doc-color,var(--nge-primary)); }
.dc-icon.dc-icon-color svg{ width:19px; height:19px; }
.sb-sublink{ display:flex; align-items:center; gap:8px; }
.sb-sublink .sic{ width:15px; height:15px; flex:none; color:var(--doc-color,inherit); opacity:.95; }

/* ---- pagination with prev/next + ellipsis (item 12) -------------------- */
.pagination{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:16px 18px 18px; }
.pagination .pg-ellipsis{ padding:0 4px; color:var(--nge-text-faint); font-size:12.5px; }
.pagination .btn[disabled]{ opacity:.4; cursor:default; }

/* ---- list sort/filter toolbar (item 13) --------------------------------- */
.toolbar.toolbar-2row{ align-items:flex-start; flex-direction:column; gap:12px; }
.toolbar-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%; }
th.th-sort{ cursor:pointer; user-select:none; white-space:nowrap; }
th.th-sort .sort-ic{ display:inline-block; width:9px; margin-left:4px; opacity:.5; }
th.th-sort.active .sort-ic{ opacity:1; color:var(--nge-primary); }
th.th-sort:hover{ color:var(--nge-text); }

/* ---- horizontal scroll hint, table + print preview (items 15/17) -------
   2026-09 fix: this used to be a position:absolute; right:0 pseudo-element
   inside the scrolling .tbl-wrap itself. Chrome anchors an absolutely
   positioned right:0 (and, we confirmed, left:100%) child of a scrolling
   element to the edge of its SCROLLABLE content area, not to the visible
   edge of the box — so the fade visibly slid left together with the
   table as you scrolled it (reported by Alex on uurnikud/vabad.php, where
   the long "Märkused" column made the drift obvious). Confirmed via a
   live Playwright experiment: the pseudo-element's rendered position
   moved by exactly the scroll delta, even though getBoundingClientRect()
   of .tbl-wrap itself never changed.
   Fix: render the fade as .tbl-wrap's own background-image instead of a
   positioned child — background-size does the fade-in animation (0 → 28px
   wide), and CSS backgrounds on a scrolling element are, by definition,
   fixed relative to its padding box regardless of how far its content is
   scrolled (no position:absolute involved at all, so the Chrome quirk
   above never applies). Verified pinned at every scroll position
   (start/middle/end) at 1100/1920px, no visual change at rest. Shared
   rule — also fixes the same latent drift on uurnikud/list.php's two
   tables and documents/list.php, which use this exact same class. */
.tbl-wrap.scroll-hint{
  background-image: linear-gradient(90deg, transparent, var(--nge-surface));
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 0 100%;
  transition: background-size .15s ease;
}
.tbl-wrap.scroll-hint.can-scroll{ background-size: 28px 100%; }
.scroll-hint-label{ display:flex; align-items:center; gap:6px; justify-content:center; padding:7px; font-size:11px; color:var(--nge-text-faint); border-top:1px solid var(--nge-border); background:var(--nge-surface-2); }
.scroll-hint-label svg{ width:12px; height:12px; }
.scroll-hint-label[hidden]{ display:none; }

/* ---- empty states (items 23/25) ----------------------------------------- */
.empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:44px 20px; color:var(--nge-text-faint); }
.empty-state .es-icon{ width:38px; height:38px; color:var(--nge-border-strong); margin-bottom:4px; }
.empty-state .es-icon svg{ width:100%; height:100%; }
.empty-state .es-title{ font-family:"Manrope",sans-serif; font-weight:700; font-size:13.5px; color:var(--nge-text-muted); }
.empty-state .es-sub{ font-size:12px; max-width:34ch; }
.ac-empty-msg{ display:flex; align-items:center; gap:6px; padding:10px 12px; font-size:12.5px; color:var(--nge-text-faint); }

/* ---- custom delete-confirmation modal (item 24) — replaces the native
   confirm() dialog wherever a form used onsubmit="return confirm(...)"
   for a destructive action; assets/js/confirm-modal.js intercepts the
   submit and shows this instead. ------------------------------------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(15,20,28,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:100; }
.modal-overlay[hidden]{ display:none; }
.modal-card{ background:var(--nge-surface); border-radius:var(--nge-radius); box-shadow:var(--nge-shadow); max-width:380px; width:100%; padding:22px 22px 18px; }
.modal-card .mc-icon{ width:38px; height:38px; border-radius:10px; background:var(--nge-danger-bg); color:var(--nge-danger); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.modal-card .mc-icon svg{ width:19px; height:19px; }
.modal-card h3{ font-size:15.5px; margin-bottom:6px; }
.modal-card p{ font-size:13px; color:var(--nge-text-muted); margin:0 0 20px; line-height:1.5; }
.modal-card .mc-actions{ display:flex; justify-content:flex-end; gap:10px; }

/* ---- room-list business exclusion + capped-result note (items 3/26) ---- */
.room-item.excluded-biz{ opacity:.55; cursor:not-allowed; }
.room-item .ri-flag{ display:inline-flex; align-items:center; font-size:10px; font-weight:700; padding:1px 6px; border-radius:5px; margin-left:6px; letter-spacing:.02em; }
.room-item .ri-flag.biz{ background:var(--nge-warning-bg); color:var(--nge-warning); }
.room-item .ri-flag.tech{ background:var(--nge-surface-2); color:var(--nge-text-faint); }

/* ---- photo upload preview + oversize warning (item 9) ------------------- */
.photo-drop{ border:1.5px dashed var(--nge-border-strong); border-radius:8px; padding:14px; text-align:center; }
.photo-drop.has-preview{ padding:0; border-style:solid; overflow:hidden; }
.photo-drop .pd-preview{ position:relative; }
.photo-drop .pd-preview img{ width:100%; max-height:180px; object-fit:cover; display:block; }
.photo-drop .pd-remove{ position:absolute; top:6px; right:6px; background:rgba(20,26,35,.65); color:#fff; border:none; border-radius:6px; padding:4px 9px; font-size:11px; font-weight:600; }
.photo-size-warn{ font-size:12px; color:var(--nge-danger); margin-top:6px; }

/* ---- soft Väljastas-contact warning (item 2) ---------------------------- */
.valjastas-warn{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--nge-warning); margin-top:6px; }
.valjastas-warn svg{ width:14px; height:14px; flex:none; margin-top:1px; }
.valjastas-warn[hidden]{ display:none; }

/* ---- sticky save bar + mobile step dots (items 7/16) -------------------- */
.sticky-save{ position:sticky; bottom:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--nge-surface); border-top:1px solid var(--nge-border); box-shadow:0 -6px 16px rgba(24,31,41,.07); padding:12px 18px; margin-top:8px; flex-wrap:wrap; }
.sticky-save .ss-progress{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--nge-text-faint); }
.sticky-save .ss-dots{ display:flex; gap:4px; }
.sticky-save .ss-dots .dot{ width:6px; height:6px; border-radius:50%; background:var(--nge-border-strong); transition:background .15s ease; }
.sticky-save .ss-dots .dot.filled{ background:var(--nge-primary); }
.sticky-save .ss-actions{ display:flex; gap:10px; margin-left:auto; }
@media (max-width:640px){
  .sticky-save{ flex-direction:column; align-items:stretch; }
  .sticky-save .ss-progress{ justify-content:center; }
  .sticky-save .ss-actions{ margin-left:0; }
  .sticky-save .ss-actions .btn{ flex:1; }
}

/* ---- v5.58: roles, access tree, document owner ---------------------------- */
.doc-issuer-locked{background:var(--nge-surface-2)!important;pointer-events:none;color:var(--nge-text)}
.doc-owner{border:1px solid var(--nge-border);border-radius:8px;padding:6px 14px 10px;margin:0 0 16px;min-width:0;grid-column:1 / -1}
.doc-owner[hidden],.doc-owner [hidden]{display:none!important}
.doc-owner legend{padding:0 6px;font-size:13px;font-weight:600}
.doc-owner-sub{font-weight:400;color:var(--nge-text-muted)}
.doc-owner-opt{display:flex;align-items:center;gap:4px;font-size:14px;cursor:pointer;font-weight:400;color:var(--nge-text);margin:0}
.doc-owner-hit{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.doc-owner-opt input{width:18px;height:18px;margin:0;accent-color:var(--nge-primary)}

/* Kasutajad: list + access panel (mockup 2C) */
.ua-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.ua-layout.has-panel .ua-panel{order:-1} /* phones/tablets: the editor opens above the list */
@media (min-width:1100px){
  .ua-layout{grid-template-columns:minmax(0,1fr) minmax(380px,460px)}
  .ua-layout.has-panel .ua-panel{order:0}
  .ua-panel{position:sticky;top:12px}
}
.ua-list.panel-flush,.ua-panel.panel-flush{margin-bottom:0}
.ua-rows{list-style:none;margin:0;padding:0}
.ua-rows li+li{border-top:1px solid var(--nge-border)}
.ua-row{display:flex;flex-direction:column;gap:6px;padding:14px 18px;text-decoration:none;color:var(--nge-text);min-height:44px}
.ua-row:hover{background:var(--nge-surface-2)}
.ua-row:focus-visible{outline:2px solid var(--nge-focus);outline-offset:-2px}
.ua-row.is-selected{background:var(--nge-primary-light);box-shadow:inset 3px 0 0 var(--nge-primary)}
.ua-row.is-inactive .ua-name{color:var(--nge-text-faint)}
.ua-row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ua-name{font-weight:600;font-size:14.5px;min-width:0;overflow-wrap:anywhere}
.ua-you{font-weight:400;color:var(--nge-text-faint)}
.ua-row-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--nge-text-muted)}
.ua-role{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.ua-role-super_admin{background:var(--nge-accent-bg);color:var(--nge-accent)}
.ua-role-admin{background:var(--nge-primary-light);color:var(--nge-primary)}
.ua-role-user{background:var(--nge-surface-2);color:var(--nge-text-muted)}
.ua-chips{display:flex;flex-wrap:wrap;gap:6px}
.ua-chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--nge-surface-2);color:var(--nge-text-muted);white-space:nowrap}
.ua-chip-dok{background:var(--nge-primary-light);color:var(--nge-primary)}
.ua-chip-uur{background:var(--nge-success-bg);color:var(--nge-success)}
.ua-chip-val{background:var(--nge-gold-bg);color:var(--nge-gold)}
.ua-chip-aru{background:var(--nge-accent-bg);color:var(--nge-accent)}
.ua-chip-pla{background:var(--nge-teal-bg,var(--nge-surface-2));color:var(--nge-teal,var(--nge-text-muted))}
.ua-chip-all{background:var(--nge-accent-bg);color:var(--nge-accent)}
.ua-chip-none{background:var(--nge-warning-bg);color:var(--nge-warning)}
.ua-form{padding:0}
.ua-fields{padding:16px 18px 0}
.ua-access{padding:4px 18px 4px}
.ua-access h3{font-size:14px;margin:6px 0 10px}
.ua-adminnote{margin:4px 18px 8px;padding:12px 14px;border-radius:8px;background:var(--nge-primary-light);border:1px solid var(--nge-border-strong);font-size:12.5px;color:var(--nge-text-muted)}
.ua-access[hidden],.ua-adminnote[hidden],.ua-sub[hidden]{display:none!important}
.ua-tree{border:1px solid var(--nge-border);border-radius:8px;overflow:hidden}
.ua-tree-tools{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px;background:var(--nge-surface-2);border-bottom:1px solid var(--nge-border)}
.ua-mod+.ua-mod{border-top:1px solid var(--nge-border)}
.ua-mod-head{display:flex;align-items:center;gap:8px;padding:0 6px 0 0}
.ua-check{display:flex;align-items:center;gap:2px;flex:1;min-width:0;cursor:pointer;font-size:14px;font-weight:400;color:var(--nge-text);margin:0}
.ua-mod-name{font-weight:600}
.ua-hit{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;flex:none}
.ua-check input{width:18px;height:18px;margin:0;accent-color:var(--nge-primary)}
.ua-count{font-size:12px;color:var(--nge-text-faint);font-variant-numeric:tabular-nums}
.ua-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:transparent;color:var(--nge-text-muted);cursor:pointer;border-radius:8px;flex:none}
.ua-toggle:hover{background:var(--nge-surface-2)}
.ua-toggle svg{width:18px;height:18px;transition:transform .15s}
.ua-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.ua-sub{padding:0 0 6px 28px;background:var(--nge-surface)}
.ua-check-sub{font-size:13.5px}
.ua-danger{display:flex;gap:10px;flex-wrap:wrap;padding:16px 18px;border-top:1px solid var(--nge-border)}
.ua-danger .btn{min-height:44px}
.ua-empty{display:none}
@media (min-width:1100px){.ua-empty{display:block}}
@media (prefers-reduced-motion:reduce){.ua-toggle svg{transition:none}}

/* ---- v5.59: editable line-item tables of Arve (.line-tbl-arve) and Viivis
   (.line-tbl-viivis). Scoped to these two modifier classes only: the shared
   .line-tbl / table.data rules above are untouched. Inputs get the same look
   as .field inputs (the table cells sit outside .field), the table is fixed
   layout (no min-width, so no horizontal scroll), and below a breakpoint every
   row becomes a card with the data-label captions above the inputs. */
.line-tbl-arve,.line-tbl-viivis{margin-top:18px}
.line-tbl-arve table.data,.line-tbl-viivis table.data{table-layout:fixed;width:100%;min-width:0}
.line-tbl-arve table.data th,.line-tbl-viivis table.data th{padding:10px 6px;vertical-align:bottom}
.line-tbl-arve table.data td,.line-tbl-viivis table.data td{padding:10px 6px}
.line-tbl-arve table.data th:first-child,.line-tbl-viivis table.data th:first-child,
.line-tbl-arve table.data td:first-child,.line-tbl-viivis table.data td:first-child{padding-left:14px}
.line-tbl-arve table.data th:last-child,.line-tbl-viivis table.data th:last-child,
.line-tbl-arve table.data td:last-child,.line-tbl-viivis table.data td:last-child{padding-right:14px;text-align:right}
.line-tbl-arve th:nth-child(1){width:6%}
.line-tbl-arve th:nth-child(2){width:34%}
.line-tbl-arve th:nth-child(3){width:10%}
.line-tbl-arve th:nth-child(4){width:11%}
.line-tbl-arve th:nth-child(5){width:17%}
.line-tbl-arve th:nth-child(6){width:16%}
.line-tbl-arve th:nth-child(7){width:6%}
/* v5.75: 10 columns (Kuni kp added after Maksetähtaeg) */
.line-tbl-viivis th:nth-child(1){width:4%}
.line-tbl-viivis th:nth-child(2){width:13%}
.line-tbl-viivis th:nth-child(3){width:11%}
.line-tbl-viivis th:nth-child(4){width:13%}
.line-tbl-viivis th:nth-child(5){width:13%}
.line-tbl-viivis th:nth-child(6){width:13%}
.line-tbl-viivis th:nth-child(7){width:7%}
.line-tbl-viivis th:nth-child(8){width:8%}
.line-tbl-viivis th:nth-child(9){width:9%}
.line-tbl-viivis th:nth-child(10){width:5%}
.line-tbl-arve input:not(.date-field-native),.line-tbl-viivis input:not(.date-field-native){
  display:block;width:100%;min-width:0;height:40px;padding:0 10px;border:1px solid var(--nge-border-strong);border-radius:8px;
  background:var(--nge-bg);color:var(--nge-text);font-size:14px;font-family:inherit;line-height:1.2;
}
.line-tbl-arve input.date-field-text,.line-tbl-viivis input.date-field-text{padding-right:36px}
.line-tbl-arve input.js-decimal,.line-tbl-viivis input.js-decimal{text-align:right}
.line-tbl-arve input:not(.date-field-native):focus,.line-tbl-viivis input:not(.date-field-native):focus{outline:2px solid var(--nge-focus);outline-offset:1px}
.line-tbl-arve .num-out,.line-tbl-viivis .num-out{text-align:right;white-space:nowrap}
.line-tbl-arve .row-remove,.line-tbl-viivis .row-remove{width:36px;height:40px;padding:0;font-size:18px;line-height:1}
.line-tbl-arve .date-field-wrap,.line-tbl-viivis .date-field-wrap{min-width:0}
.line-tbl-arve th:nth-child(n+4):nth-child(-n+6),.line-tbl-viivis th:nth-child(3),.line-tbl-viivis th:nth-child(n+7):nth-child(-n+9){text-align:right}
.line-tbl-viivis th:nth-child(8){padding-right:10px}

@media (max-width:1180px){
  .line-tbl-arve .tbl-wrap,.line-tbl-viivis .tbl-wrap{overflow-x:visible}
  .line-tbl-arve table.data,.line-tbl-arve table.data thead,.line-tbl-arve table.data tbody,.line-tbl-arve table.data td,
  .line-tbl-viivis table.data,.line-tbl-viivis table.data thead,.line-tbl-viivis table.data tbody,.line-tbl-viivis table.data td{display:block}
  .line-tbl-arve table.data thead,.line-tbl-viivis table.data thead{display:none}
  .line-tbl-arve table.data tr,.line-tbl-viivis table.data tr{
    position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;
    padding:14px;border-bottom:1px solid var(--nge-border);
  }
  .line-tbl-arve table.data td,.line-tbl-viivis table.data td{padding:0;border:none;min-width:0;text-align:left}
  .line-tbl-arve table.data td::before,.line-tbl-viivis table.data td::before{
    content:attr(data-label);display:block;margin-bottom:4px;font-size:10.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.04em;color:var(--nge-text-faint);
  }
  .line-tbl-arve table.data td.rownum,.line-tbl-viivis table.data td.rownum{grid-column:1/-1;font-weight:700;padding-right:44px}
  .line-tbl-arve table.data td.rownum::before,.line-tbl-viivis table.data td.rownum::before{content:"Rida ";display:inline;margin:0;font-size:12px;letter-spacing:0;text-transform:none}
  .line-tbl-arve table.data td:last-child,.line-tbl-viivis table.data td:last-child{position:absolute;top:8px;right:8px;padding:0}
  .line-tbl-arve table.data td:last-child::before,.line-tbl-viivis table.data td:last-child::before{display:none}
  .line-tbl-arve table.data td:nth-child(2){grid-column:1/-1}
  .line-tbl-arve table.data td:first-child,.line-tbl-viivis table.data td:first-child{padding-left:0}
  .line-tbl-arve table.data td.rownum,.line-tbl-viivis table.data td.rownum{font-family:inherit;font-size:13.5px}
  .line-tbl-arve .num-out,.line-tbl-viivis .num-out{align-self:start;font-size:14px}
}

/* ---- v5.62: theme picker on the profile page (Hele / Tume / Automaatne) -- */
.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px 18px 4px;max-width:720px}
.theme-opt{position:relative;display:block;cursor:pointer;min-width:0}
.theme-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.theme-card{display:flex;flex-direction:column;gap:3px;padding:10px;border:1px solid var(--nge-border-strong);border-radius:10px;background:var(--nge-surface);min-width:0}
.theme-opt:hover .theme-card{border-color:var(--nge-primary)}
.theme-opt input:checked + .theme-card{border-color:var(--nge-primary);box-shadow:0 0 0 2px var(--nge-primary)}
.theme-opt input:focus-visible + .theme-card{outline:2px solid var(--nge-focus);outline-offset:2px}
.theme-sw{display:flex;flex-direction:column;justify-content:center;gap:5px;height:54px;padding:8px 10px;border-radius:7px;border:1px solid rgba(128,128,128,.35);margin-bottom:6px}
.theme-sw i{display:block;height:6px;border-radius:3px}
.theme-sw i:nth-child(1){width:45%}
.theme-sw i:nth-child(2){width:80%}
.theme-sw i:nth-child(3){width:60%}
.theme-sw-light{background:#f4f6fa}
.theme-sw-light i{background:#c5cedb}
.theme-sw-light i:nth-child(1){background:#47648e}
.theme-sw-dark{background:#12161d}
.theme-sw-dark i{background:#3a4453}
.theme-sw-dark i:nth-child(1){background:#7592ba}
.theme-sw-auto{background:linear-gradient(115deg,#f4f6fa 0 50%,#12161d 50% 100%)}
.theme-sw-auto i{background:#8a97ab}
.theme-sw-auto i:nth-child(1){background:#5f7ca6}
.theme-t{font-weight:700;font-size:13.5px;color:var(--nge-text)}
.theme-d{font-size:11.5px;color:var(--nge-text-faint);line-height:1.35}
@media (max-width:520px){
  .theme-options{grid-template-columns:1fr;gap:10px}
  .theme-card{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"sw t" "sw d";column-gap:12px;align-items:center}
  .theme-sw{grid-area:sw;height:44px;margin:0}
  .theme-t{grid-area:t;align-self:end}
  .theme-d{grid-area:d;align-self:start}
}