/* =====================================================================
   ИС ПФ ВНИРО — единый минималистичный стиль.
   Цвета — серый/чёрный/белый, акценты приглушённые, тонкие линии.
   Шрифт — Inter (через @font-face или fallback на system-ui).
   Поддержка светлой и тёмной темы через [data-theme].
   ===================================================================== */

/* ---------- Inter ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: local('Inter Regular'), local('Inter-Regular');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: local('Inter Medium'), local('Inter-Medium');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 600; font-display: swap;
  src: local('Inter SemiBold'), local('Inter-SemiBold');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 700; font-display: swap;
  src: local('Inter Bold'), local('Inter-Bold');
}

/* ---------- design tokens ---------- */
:root {
  --bg:        #ffffff;
  --bg-soft:   #f7f7f8;
  --bg-elev:   #ffffff;
  --bg-hover:  #f2f2f4;
  --bg-active: #ebebee;
  --surface:   #ffffff;
  --border:    #e4e4e7;
  --border-strong: #d4d4d8;
  --text:      #18181b;
  --text-muted:#52525b;
  --text-dim:  #71717a;
  --text-faint:#a1a1aa;
  --accent:    #18181b;
  --accent-fg: #ffffff;
  --accent-soft: rgba(24,24,27,.06);
  --danger:    #b91c1c;
  --danger-bg: #fef2f2;
  --warn:      #b45309;
  --ok:        #15803d;
  --info:      #1d4ed8;
  --shadow-1:  0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05);
  --shadow-2:  0 4px 10px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-3:  0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
  --radius:    8px;
  --radius-lg: 14px;
  --header-h:  56px;
  --focus-ring: 0 0 0 3px rgba(24,24,27,.12);
  /* Status accents — subtle, used only on row end-cap, not row background */
  /* Survey lifecycle palette (colorkit.co/palette/c7522a-e5c185-fbf2c4-74a892-008585):
     terracotta → sand → pale yellow → sage → teal. Reads as a gradient
     "needs attention → done". */
  --st-demand:    #c7522a;
  --st-planned:   #e5c185;
  --st-surveyed:  #fbf2c4;
  --st-processed: #74a892;
  --st-ready:     #008585;
}
[data-theme="dark"] {
  --bg:        #0b0b0d;
  --bg-soft:   #0f0f12;
  --bg-elev:   #161618;
  --bg-hover:  #1c1c20;
  --bg-active: #232328;
  --surface:   #141417;
  --border:    #27272a;
  --border-strong: #3f3f46;
  --text:      #f4f4f5;
  --text-muted:#a1a1aa;
  --text-dim:  #71717a;
  --text-faint:#52525b;
  --accent:    #f4f4f5;
  --accent-fg: #0b0b0d;
  --accent-soft: rgba(244,244,245,.06);
  --danger:    #f87171;
  --danger-bg: #2a1313;
  --warn:      #f59e0b;
  --ok:        #4ade80;
  --info:      #60a5fa;
  --shadow-1:  0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.45);
  --shadow-2:  0 6px 14px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --shadow-3:  0 18px 40px rgba(0,0,0,.7);
  --focus-ring: 0 0 0 3px rgba(244,244,245,.18);
}

/* ---------- reset & base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header { flex: 0 0 auto; }
main { flex: 1 1 0; min-height: 0; }
#app { height: 100%; }

/* Allow scrolling in modules and specific containers */
.module, .side-panel .body, .modal .body, .editor-overlay {
  overflow-y: auto;
}
body.module-open { overflow-y: visible; } /* Reset if needed for module overlay */


a { color: inherit; }
button, input, select, textarea, option, optgroup {
  font-family: inherit; font-size: inherit; color: inherit;
}
button { cursor: pointer; }

/* ---------- icons ---------- */
.i, svg.i {
  width: 18px; height: 18px; display: inline-block; vertical-align: -3px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
}
.i.i-sm { width: 14px; height: 14px; stroke-width: 1.8; }
.i.i-lg { width: 22px; height: 22px; }
.i.i-xl { width: 28px; height: 28px; }

/* ---------- top header ---------- */
/* App header: limited to the same content width as a module body, so the
   app title and a module title sit on the same visual column.
   The bottom border stretches the full width of the viewport via a pseudo. */
header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  background: var(--bg);
  color: var(--text);
}
header::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%;
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--gutter, 22px);
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  --gutter: clamp(20px, 6vw, 88px);
}
.header-inner .brand {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: inherit;
}
.header-inner .brand-logo {
  width: 18px; height: 18px; object-fit: contain;
  filter: none;
}
.header-inner h1 {
  margin: 0;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  display: inline-flex; align-items: center;
}
.header-inner h1 .brand-name { color: var(--text); font-weight: 700; }
.header-inner .stats {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto; flex-wrap: wrap; justify-content: flex-end;
  font-size: 12px; color: var(--text-dim);
}
header .stats .i { opacity: .8; }
@media (max-width: 640px) {
  header .stats { display: none; }
}

/* Theme toggle — in dashboard user panel */
/* Theme toggle icon visibility */
.dash-theme .th-sys,
.dash-theme .th-light,
.dash-theme .th-dark { display: none; }
[data-theme-pref="system"] .dash-theme .th-sys   { display: block; }
[data-theme-pref="light"]  .dash-theme .th-light { display: block; }
[data-theme-pref="dark"]   .dash-theme .th-dark  { display: block; }
.dash-theme .th-sys { display: block; }
[data-theme-pref] .dash-theme .th-sys { display: none; }
[data-theme-pref="system"] .dash-theme .th-sys { display: block; }

/* ---------- main ---------- */
main { display: block; }
section, .module {
  background: var(--bg);
}

/* ---------- splash & login ---------- */
.splash {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--header-h));
  padding: 40px 20px;
  text-align: center; color: var(--text-muted);
}
.splash-logo { width: 96px; height: 96px; object-fit: contain; opacity: .8; }
.splash h2 { margin: 18px 0 0; color: var(--text-muted); font-weight: 600; font-size: 16px; }

.error-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--header-h));
  padding: 40px 20px;
  text-align: center; color: var(--text-muted);
}
.error-screen .error-icon { margin-bottom: 16px; }
.error-screen h2 { margin: 0 0 8px; color: var(--text); font-weight: 600; font-size: 18px; }
.error-screen p { margin: 4px 0; font-size: 13px; max-width: 420px; line-height: 1.5; }

/* ===== Login screen — split: logo left · form right ===== */
.login-screen {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  z-index: 1000;
}
.login-brand {
  display: flex; align-items: center; justify-content: center;
  padding: 48px;
  /* The brand panel stays the same warm light-grey in BOTH themes —
     the multicolour logo reads badly on a near-black background. */
  background: #f5f5f5;
  border-right: 1px solid #e4e4e4;
}
[data-theme="dark"] .login-brand {
  background: #ebebeb;
  border-right-color: #d8d8d8;
}
.login-logo {
  width: auto; height: auto;
  max-width: 78%; max-height: 60vh;
  object-fit: contain;
}
/* Login logo stays in its original colours even in dark mode. */

.login-form {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 32px;
}
.login-form-inner {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-heading {
  margin: 0 0 6px; font-size: 22px; font-weight: 600; color: var(--text);
  letter-spacing: -0.005em;
}
.login-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); }
.login-field input {
  padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
  font-size: 14px;
}
.login-field input:focus { outline: none; border-color: var(--text); box-shadow: var(--focus-ring); }
.login-error {
  background: var(--danger-bg); color: var(--danger);
  padding: 8px 12px; border-radius: var(--radius); font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
.login-btn {
  margin-top: 4px;
  padding: 11px; border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-fg); font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.login-btn:hover:not(:disabled) { opacity: .9; }
.login-btn:disabled { opacity: .55; cursor: default; }

@media (max-width: 800px) {
  .login-screen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-brand {
    padding: 24px 20px;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  .login-logo { max-width: 75%; max-height: 120px; }
  .login-form  { padding: 28px 20px; align-items: flex-start; }
  .login-form-inner { margin: 0 auto; }
}

/* ---------- Main menu — dashboard left · modules right ---------- */
#view-menu {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  grid-template-rows: 100%;
  gap: 56px;
  padding: 0 36px;
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
}

.dash-side {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  padding: 32px 0 60px;
  margin: 0;
  background: transparent;
  border: 0;
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
}
.dash-avatar {
  position: relative;
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  /* No border — clean look. Soft shadow gives it a bit of presence. */
  margin: 0 0 24px 0;
  box-shadow: 0 6px 24px rgba(0,0,0,.10);
}
.dash-avatar .dash-avatar-fallback {
  width: 72px; height: 72px; stroke-width: 1.4; color: var(--text-dim);
}
.dash-avatar .dash-avatar-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; display: block;
}
.dash-avatar .dash-avatar-img[hidden] { display: none; }

.dash-hello {
  font-size: 12px; color: var(--text-dim);
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 4px;
}
.dash-name {
  font-size: 28px; font-weight: 700; line-height: 1.1;
  color: var(--text); letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.dash-email {
  font-size: 13px; color: var(--text-muted); margin-bottom: 10px;
}
.dash-role  {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 24px;
}

.dash-stats {
  display: flex; flex-direction: column;
  gap: 18px;
  padding: 0;
  margin: auto 0;   /* pushes stats to the visual centre of the column */
}
.dash-tile {
  background: transparent;
  border: 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.dash-tile-label { font-size: 11px; color: var(--text-dim); letter-spacing: .04em; text-transform: uppercase; }
.dash-tile-value { font-size: 26px; font-weight: 600; color: var(--text); line-height: 1.1; }
.dash-tile-sub   { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.dash-actions {
  margin-top: auto;
  display: flex; flex-direction: column;
}
.dash-actions button {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px; border: 0; background: none;
  color: var(--text-muted); cursor: pointer;
  font: inherit; font-size: 13px; border-radius: 6px;
}
.dash-actions button:hover { color: var(--text); }
.dash-actions button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dash-actions button .i { width: 18px; height: 18px; flex: 0 0 auto; }
/* dash-logout and dash-theme share .dash-actions button styles */

/* ---------- bento grid (right side) ---------- */
.bento-section {
  grid-column: 1 / -1;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
  margin: 12px 0 -4px; padding: 0;
}
.bento-section:first-child { margin-top: 0; }

.menu-bento {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-content: start;
  overflow-y: auto;
  padding: 32px 0 60px;
  height: 100%;
}
.menu-bento::-webkit-scrollbar { width: 6px; }
.menu-bento::-webkit-scrollbar-track { background: transparent; }
.menu-bento::-webkit-scrollbar-thumb { background: var(--text-faint); border-radius: 3px; }
.menu-bento::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }



/* Between 900–1150px the two-column dashboard squeezes the right-side
   bento into ~280–320px wide cells, which made the cards look cramped
   and oddly proportioned. From 1150px down we collapse to a single
   column: stats sit horizontally under the avatar, then the bento gets
   the full width and breathes again. */
@media (max-width: 1150px) {
  html, body { overflow: visible; height: auto; display: block; }
  main { height: auto; overflow: visible; }
  #app { height: auto; }
  #view-menu {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 20px 18px 60px;
    height: auto;
    overflow: visible;
  }
  .dash-side {
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: 0;
    align-items: flex-start;
    padding: 0;
  }
  .menu-bento {
    overflow: visible;
    padding: 0;
    height: auto;
  }
  .dash-avatar { width: 110px; height: 110px; margin-left: 0; }
  .dash-avatar .dash-avatar-fallback { width: 52px; height: 52px; }
  .dash-name { font-size: 22px; }
  .dash-stats { flex-direction: row; flex-wrap: wrap; gap: 18px 32px;
    margin: 0; }
  .dash-tile-value { font-size: 22px; }
  .dash-logout { margin-top: 12px; }
}
@media (max-width: 600px) {
  .dash-stats { flex-direction: column; gap: 14px; }
}
/* Hero card — featured tile above sections */
.bento-card.bento-hero {
  grid-column: 1 / -1;
  min-height: 144px;
  padding: 24px 28px 22px;
  border-width: 2px;
  /* Two-zone layout: icon+title bottom-left, stats bottom-right */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-template-areas: none;
}
.bento-hero-left {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start; flex-shrink: 0;
}
.bento-hero .bento-icon { margin: 0; }
.bento-hero .bento-icon .i { width: 28px; height: 28px; }
.bento-hero .bento-title { font-size: 20px; }
.bento-hero-stats {
  text-align: right;
  line-height: 1.5;
  min-width: 0;
  font-size: 12px; color: var(--text-dim);
}

.bento-card[hidden] { display: none !important; }
.bento-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  display: grid;
  /* Icon shares the same left column as the title; both top-aligned.
     The icon sits flush at the top-left of the tile, on the tile's own
     background — no separate plate, no border. */
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "icon"
    "title"
    "sub";
  row-gap: 6px;
  justify-items: start;
  align-content: start;
  cursor: pointer; text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.bento-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.bento-card:active { transform: translateY(1px); }
.bento-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Quick-add button on bento cards */
.bento-add {
  position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border);
  align-items: center; justify-content: center;
  cursor: pointer; line-height: 1;
  transition: transform .12s, opacity .15s;
  z-index: 2;
  display: none; opacity: 0;
}
.bento-add .i { width: 14px; height: 14px; }
.bento-add:hover { transform: translateX(-50%) scale(1.15); color: var(--text); }
.bento-card:hover .bento-add.visible { display: flex; opacity: 1; }

.bento-card.bento-soon {
  cursor: not-allowed; opacity: .55;
  background: var(--bg-soft);
  border-style: dashed;
}
.bento-card.bento-soon:hover { transform: none; background: var(--bg-soft); }
.bento-icon {
  grid-area: icon;
  /* Naked icon: no background plate, no border. Sits at top-left. */
  width: auto; height: auto;
  background: transparent; border: 0;
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: flex-start;
  margin: 0 0 4px 0;
}
.bento-icon .i { width: 22px; height: 22px; stroke-width: 1.6; }
.bento-title { grid-area: title;
  font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.25; }
.bento-sub   { grid-area: sub;
  font-size: 12px; color: var(--text-dim); line-height: 1.4; }

@media (max-width: 600px) {
  .menu-bento { grid-template-columns: 1fr; }
}

/* ---------- modules (waters/surveys/docs) ---------- */
.module {
  /* Same horizontal gutter as the app header so the two share the same
     centred column. Top padding is zero — the sticky module header sits
     right at the top edge, matching the app header's height. */
  --gutter: clamp(20px, 6vw, 88px);
  padding: 0 var(--gutter) 80px;
  max-width: 1400px;
  margin: 0 auto;
}
.editor-overlay {
  --gutter: clamp(20px, 6vw, 88px);
  position: fixed; inset: 0; background: var(--bg); z-index: 90;
  overflow: auto; padding: 0 var(--gutter) 80px;
  max-width: 1400px; margin: 0 auto;
}
.editor-overlay.show { display: block !important; }
/* Module header replaces the app header while a module is open.
   Layout: [user — left] [module title — centered] [actions + close — right]
   Sits in the same centred column as the app header (no negative margins). */
.editor-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  padding: 0;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--bg); z-index: 50;
  height: var(--header-h);
}

.editor-title {
  margin: 0;
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
  justify-self: center; white-space: nowrap;
}
.editor-title .i { width: 18px; height: 18px; }

.editor-actions {
  justify-self: end;
  display: flex; gap: 4px; align-items: center;
}
/* Close action separated from the rest of the toolbar */
.editor-actions .close-action { margin-left: 16px; }

/* User mini-block inside module header (avatar + name; no extra chrome). */
.mh-user {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; color: var(--text);
}
.mh-user .mh-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-soft); overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.mh-user .mh-user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-user .mh-user-avatar .i { width: 16px; height: 16px; color: var(--text-dim); }
.mh-user .mh-user-name { white-space: nowrap; }
@media (max-width: 700px) {
  .mh-user .mh-user-name { display: none; }
}

/* Hide the global app header when a module is open. */
body.module-open > header { display: none; }

/* Theme toggle moves to bottom-left corner globally. */
/* Theme toggle — pinned to the bottom of the viewport, aligned with the
   left gutter so it sits on the same vertical line as the dashboard's
   logout button. */
.theme-toggle {
  position: fixed;
  left: clamp(20px, 6vw, 88px);
  bottom: 20px;
  z-index: 70;
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--text); }

/* Hero — generous breathing room around the search card.
   Takes at least a quarter of the viewport so the search visually anchors
   the screen. */
.hero {
  /* The "25% of the viewport" feel is achieved through vertical margins
     above and below the search card, not via min-height. That way the
     card stays anchored: when the filters panel expands the surrounding
     spacing doesn't shrink to keep min-height. */
  padding: 0;
  margin: 12.5vh calc(var(--gutter, 22px) * -0.5);
  display: flex;
  align-items: flex-start;
}
.hero > .search-card { width: 100%; }

/* The search card visually unifies the search bar with the filters panel
   that drops out of it. A single fixed radius — small enough that the
   bottom corners look right both when the card is just a pill and when
   the filters panel expands below. No transition = no corner "jumping". */
.search-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  overflow: hidden;
}
.search-card:focus-within { border-color: var(--text); box-shadow: var(--focus-ring); }

.hero-search {
  display: flex; align-items: center; gap: 14px;
  background: transparent;
  border: 0;
  /* Right padding is intentionally larger than left so the funnel button
     (round, 34px) sits comfortably inside the card's rounded right edge
     (radius 28px) without being clipped by overflow:hidden. */
  padding: 12px 18px 12px 24px;
}
.hero-icon { color: var(--text-dim); display: inline-flex; }
.hero-icon .i { width: 22px; height: 22px; }
.hero-search input {
  flex: 1 1 auto; border: 0; outline: none; background: transparent;
  font-size: 17px; padding: 4px 0; color: var(--text);
}
.hero-search input::placeholder { color: var(--text-faint); }

.hero-filter {
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: 0; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 auto;
  transition: background .12s ease, color .12s ease;
}
.hero-filter .i { width: 16px; height: 16px; }
.hero-filter:hover { background: var(--bg-hover); color: var(--text); }
.hero-filter:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hero-filter.active { background: var(--accent); color: var(--accent-fg); }

/* Filters panel — lives inside .search-card, drops out under the search row.
   Hidden by default; the funnel button toggles .filters-hidden. */
.filters-wrap.filters-hidden { display: none; }
.filters-wrap {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}
.filters-wrap > summary { display: none; }
.filters-wrap .filters {
  margin: 0; border: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 16px;
  padding: 18px 24px 20px;
}
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.filters input:not([type=checkbox]):not([type=radio]),
.filters select {
  padding: 7px 10px; border: 1px solid var(--border-strong);
  border-radius: 6px; font-size: 13px;
  background: var(--bg); color: var(--text); width: 100%;
}
.filters input:focus, .filters select:focus {
  outline: none; border-color: var(--text); box-shadow: var(--focus-ring);
}
.filters-check { flex-direction: row !important; align-items: center; gap: 8px !important; cursor: pointer; }
.filters-footer { display: flex; justify-content: flex-end; padding-top: 4px; }
.reset-btn {
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-muted); border-radius: 6px; padding: 6px 12px;
  cursor: pointer; font-size: 12px;
}
.reset-btn:hover { background: var(--bg-hover); color: var(--text); }
.len-range { display: flex; gap: 4px; align-items: center; }
.len-range .sep { color: var(--text-faint); }

.toolbar {
  display: flex; align-items: center; gap: 10px; padding: 4px 0 10px;
  font-size: 12px; color: var(--text-muted);
}
.toolbar .right { margin-left: auto; }
.toolbar .group-by {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted);
}
.toolbar .group-by select {
  padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 12px;
  font-family: inherit;
}
.toolbar .group-by select:focus {
  outline: none; border-color: var(--text); box-shadow: var(--focus-ring);
}

/* ---------- tables ---------- */
table {
  width: 100%; border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
}
thead th {
  background: var(--bg-soft);
  text-align: left; padding: 9px 12px;
  font-weight: 500; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none;
  white-space: nowrap;
  font-size: 12px; letter-spacing: .01em;
}
thead th .arrow { font-size: 10px; color: var(--text); margin-left: 4px; }
tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  vertical-align: middle; color: var(--text);
  line-height: 1.4;
}
/* Consistent row height across all main module tables */
#view-waters tbody tr, #view-surveys tbody tr, #view-documents tbody tr,
#view-researches tbody tr, #view-admin tbody tr { min-height: 44px; }
#view-waters tbody td, #view-surveys tbody td, #view-documents tbody td,
#view-researches tbody td, #view-admin tbody td { vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-hover); cursor: pointer; }

/* numeric cell */
td.num {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--text);
}
th.num { text-align: right; }

/* Fixed-width document number column (max ~5 chars). Overflow is hidden
   with ellipsis; the full value is in the title tooltip. */
th.col-no, td.col-no {
  width: 5.5ch; min-width: 5.5ch; max-width: 5.5ch;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* ID column — small, light, tabular */
th.col-id, td.col-id {
  width: 4ch; min-width: 4ch;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
/* Name column — wider, takes priority */
th.col-name, td.col-name {
  min-width: 220px;
  font-weight: 500;
}

/* Row markers — left edge accent only */
tbody tr.row-dirty   td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tbody tr.row-new     td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
tbody tr.row-removed { opacity: .45; }
tbody tr.row-removed td:not(:last-child) { text-decoration: line-through; }

/* Survey status: NO background tint anymore, only a small coloured cap on the
   right edge of the row. Cap = inset shadow on the last <td>. */
/* Status indicator on the LEFT edge — matches the dirty/new accent style. */
tbody tr.row-st-demand    td:first-child { box-shadow: inset 3px 0 0 var(--st-demand); }
tbody tr.row-st-planned   td:first-child { box-shadow: inset 3px 0 0 var(--st-planned); }
tbody tr.row-st-surveyed  td:first-child { box-shadow: inset 3px 0 0 var(--st-surveyed); }
tbody tr.row-st-processed td:first-child { box-shadow: inset 3px 0 0 var(--st-processed); }
tbody tr.row-st-ready     td:first-child { box-shadow: inset 3px 0 0 var(--st-ready); }
/* dirty / new override the status accent so the user always sees pending edits */
tbody tr.row-dirty td:first-child { box-shadow: inset 3px 0 0 var(--warn) !important; }
tbody tr.row-new   td:first-child { box-shadow: inset 3px 0 0 var(--ok)   !important; }

/* Row flags (изменено / новое / удалено) */
.row-flag { display: inline-block; font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 4px; margin-right: 6px;
  background: var(--bg-soft); color: var(--text-muted); border: 1px solid var(--border); }
.row-flag.new     { color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.row-flag.dirty   { color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.row-flag.removed { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }

/* ---------- status segmented bar (in surveys / water side panel) ---------- */
.status-bar {
  display: inline-flex; flex-direction: column; gap: 3px;
  align-items: flex-start; min-width: 100px;
}
.status-bar .sb-track { display: flex; gap: 2px; width: 100%; min-width: 100px; }
.status-bar .sb-label { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.status-bar .seg {
  flex: 1 1 0; height: 4px; border-radius: 2px;
  background: var(--bg-active);
}
.status-bar .seg-off { background: var(--bg-active); }
.status-bar .seg-demand.seg-on    { background: var(--st-demand); }
.status-bar .seg-planned.seg-on   { background: var(--st-planned); }
.status-bar .seg-surveyed.seg-on  { background: var(--st-surveyed); }
.status-bar .seg-processed.seg-on { background: var(--st-processed); }
.status-bar .seg-ready.seg-on     { background: var(--st-ready); }

/* Category pills (В / I / II). Compact, monochrome, with a subtle weight
   ramp so высшая reads as the "strongest" without using colour. */
.pill.cat-0 { color: var(--text);       border-color: var(--text);         font-weight: 700; }
.pill.cat-1 { color: var(--text);       border-color: var(--border-strong); font-weight: 600; }
.pill.cat-2 { color: var(--text-muted); border-color: var(--border);        font-weight: 500; }
/* Category pills are coin-shaped (perfect circles), like a medal.
   Fixed 22px box, content centred, no padding so the border draws a
   true circle regardless of the digit/letter inside. */
.pill.cat-0, .pill.cat-1, .pill.cat-2 {
  width: 22px; height: 22px; padding: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Survey type pills (used in pills inside Water-panel summary) — neutral */
.surv  { display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 500;
  background: var(--bg-soft); color: var(--text-muted);
  border: 1px solid var(--border); white-space: nowrap;
}
.surv-none { color: var(--text-faint); font-size: 11px; font-style: italic; }

/* Type/category pills — neutral with subtle outline */
.pill { display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 500;
  background: var(--bg-soft); color: var(--text-muted);
  border: 1px solid var(--border); }

/* Waterfall chain — outflow ancestry in water side-panel */
.wf-chain {
  margin: 0;
  border-left: 2px solid var(--border);
}
.wf-step {
  display: flex; align-items: center;
  padding: 5px 8px;
  cursor: pointer; border-radius: 0 6px 6px 0;
  transition: background .12s;
}
.wf-step:hover { background: var(--bg-hover); }
.wf-info {
  display: flex; align-items: center; gap: 5px;
  flex-wrap: wrap; min-width: 0;
}
.wf-bank {
  font-size: 22px; color: var(--text-muted);
  flex: 0 0 auto; line-height: 1;
}
.wf-bank-up { color: var(--text-dim); }
.wf-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap;
}
.wf-km {
  font-size: 11px; color: var(--text-dim);
  white-space: nowrap;
}
/* Auto-generated description — visually distinct from stored data */
.auto-desc, .kv .v.auto-desc { color: var(--text-faint); }

.wf-surveys {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 2px;
}

/* Geo indicator column in waters table */
.col-geo { width: 30px; min-width: 30px; max-width: 30px; padding: 0 !important; text-align: center; }
.geo-badge { color: var(--text-faint); display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; }
.geo-badge .i { width: 16px; height: 16px; }
.geo-badge:hover { color: var(--text-muted); }

/* Clickable water link in survey panel */
.water-link { color: var(--text); text-decoration: none; border-bottom: 1px dashed var(--border-strong); }
.water-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Water map */
.water-map-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.water-map-wrap .wm-map {
  width: 100%; aspect-ratio: 1; min-height: 200px; max-height: 400px;
}

/* Sub-row: water + category bar inline */
.sub-row { margin-bottom: 6px; }
.sub-row-main { display: flex; align-items: center; gap: 8px; }
.sub-row-water { flex: 1 1 auto; min-width: 0; }
.sub-row-water input { width: 100%; box-sizing: border-box; }
.sub-row-del { flex: 0 0 auto; }

/* Category bar: 3 clickable stages */
.cat-bar { display: flex; flex: 0 0 auto; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border); }
.cat-stage { border: 0; background: var(--bg-soft); color: var(--text-muted);
  padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s; line-height: 1.4; }
.cat-stage + .cat-stage { border-left: 1px solid var(--border); }
.cat-stage:hover { background: var(--bg-hover); }
.cat-stage.active.cat-0 { background: var(--text); color: var(--bg); }
.cat-stage.active.cat-1 { background: var(--text-muted); color: var(--bg); }
.cat-stage.active.cat-2 { background: var(--border-strong); color: var(--bg); }

/* Permission bar (admin user editor) */
.perm-grid { display: flex; flex-direction: column; gap: 8px; }
.perm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.perm-label { font-size: 13px; color: var(--text); flex: 1 1 auto; }
.perm-bar { display: flex; flex: 0 0 auto; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border); }
.perm-stage { border: 0; background: var(--bg-soft); color: var(--text-muted);
  padding: 5px 12px; font-size: 13px; cursor: pointer;
  transition: background .15s, color .15s; line-height: 1.4; }
.perm-stage + .perm-stage { border-left: 1px solid var(--border); }
.perm-stage:hover { background: var(--bg-hover); }
.perm-stage.active.perm-none { background: var(--bg-hover); color: var(--text-muted); }
.perm-stage.active.perm-view { background: var(--text-muted); color: var(--bg); }
.perm-stage.active.perm-edit { background: var(--text); color: var(--bg); }

/* keyword pills (for research module) */
.kw-pill { display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; background: var(--bg-soft); color: var(--text-muted);
  border: 1px solid var(--border); margin: 2px 2px 2px 0; }

.pill.cat-virtual { border-style: dashed !important; border-width: 1.5px; }

/* ---------- buttons ---------- */
.btn {
  background: var(--accent); color: var(--accent-fg); border: 0;
  padding: 8px 14px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn:hover:not(:disabled) { opacity: .9; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.secondary {
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
}
.btn.secondary:hover:not(:disabled) { background: var(--bg-hover); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger.secondary {
  background: var(--surface); color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
.btn.danger.secondary:hover:not(:disabled) { background: var(--danger-bg); }

/* Icon-only borderless buttons */
.iconbtn {
  width: 36px; height: 36px; border-radius: 6px;
  border: 0; background: transparent; color: var(--text-muted);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; transition: background .12s ease, color .12s ease;
}
.iconbtn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
.iconbtn:active { background: var(--bg-active); }
.iconbtn:disabled { opacity: .35; cursor: default; }
.iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.iconbtn.primary { color: var(--ok); }
.iconbtn.danger  { color: var(--danger); }
.iconbtn .dirty-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 2px var(--bg);
}
td.actions .iconbtn { width: 30px; height: 30px; font-size: 15px; margin-left: 2px; }
td.actions { white-space: nowrap; }

/* ---------- floating action button ---------- */
.fab-stack {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column-reverse; gap: 12px;
  z-index: 50;
}
.fab {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
  border: 0; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: opacity .12s ease, transform .12s ease;
}
.fab:hover  { opacity: .92; }
.fab:active { transform: translateY(1px); }
.fab:focus-visible { outline: none; box-shadow: var(--shadow-2), var(--focus-ring); }

/* ---------- modals ---------- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.modal-bg.show { display: flex; }
.modal {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 780px; width: 100%; max-height: 90vh; overflow: auto;
  box-shadow: var(--shadow-3);
}
/* File drop zone */
.file-drop {
  border: 1px dashed var(--border); border-radius: 6px;
  padding: 12px 14px; cursor: pointer;
  color: var(--text-dim); font-size: 11px; line-height: 1.5;
  transition: border-color .15s, background .15s;
  position: relative;
  display: flex; align-items: center; gap: 14px;
}
.file-drop:hover { border-color: var(--border-strong); }
.file-drop.drag-over { border-color: var(--accent); background: var(--bg-soft); }
.file-drop.has-file { border-style: solid; }
.file-drop input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.file-drop .fd-icon { color: var(--text-faint); flex: 0 0 auto; }
.file-drop .fd-icon .i { width: 28px; height: 28px; }
.file-drop .fd-body { flex: 1 1 auto; min-width: 0; }
.file-drop .fd-name { font-weight: 600; color: var(--text); font-size: 12px; }
.file-drop .fd-remove {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: transparent; color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
}
.file-drop .fd-remove:hover { background: var(--bg-hover); color: var(--danger); }

/* Status dot (circle + label) */
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sd-circle { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto; }

/* Status picker (edit form) */
.status-picker { position: relative; }
.sp-trigger { display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); cursor: pointer; width: 100%; font: inherit;
  color: var(--text); text-align: left; }
.sp-trigger:hover { border-color: var(--border-strong); }
.sp-dropdown { display: none; position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 2px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: var(--shadow-2); z-index: 10;
  overflow: hidden; }
.status-picker.open .sp-dropdown { display: block; }
.sp-option { display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; font-size: 13px; }
.sp-option:hover { background: var(--bg-hover); }

/* Confirm dialog */
.confirm-modal { max-width: 400px; border-radius: var(--radius-lg); }

.modal header {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface); color: var(--text);
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  /* Cancel global <header> rules that leak in */
  max-width: none; margin: 0; --gutter: 0; height: auto;
}
.modal header::after { content: none; }
.modal header h2 { margin: 0; font-size: 15px; font-weight: 600; }
.modal .body { padding: 16px 20px 20px; }
/* Modal close button — matches the borderless .iconbtn style elsewhere. */
.modal .close {
  width: 36px; height: 36px; border-radius: 6px;
  border: 0; background: transparent; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.modal .close:hover { background: var(--bg-hover); color: var(--text); }
.modal .close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.modal .iconbtn { color: var(--text-muted); background: transparent; }
.modal .actions {
  display: flex; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.modal .actions .spacer { flex: 1; }

/* Edit modal as a side-attached drawer */
.modal-bg.side-mode {
  background: transparent; pointer-events: none;
  justify-content: flex-end; align-items: stretch;
  padding: 0; z-index: 130;
}
.modal-bg.side-mode.with-side { padding-right: 0; }
.modal-bg.side-mode .modal {
  pointer-events: auto;
  max-width: 560px; width: 560px; max-height: 100vh; height: 100vh;
  border-radius: 0; box-shadow: var(--shadow-3);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease;
  border-left: 1px solid var(--border);
}
.modal-bg.side-mode.show .modal { transform: translateX(0); }
.modal-bg.side-mode .modal header { border-radius: 0;
  justify-content: space-between; }
.modal-bg.side-mode .modal .body { flex: 1 1 auto; overflow: auto; }
.modal-bg.side-mode .modal .actions {
  border-radius: 0;
}
@media (max-width: 640px) {
  .modal-bg.side-mode .modal { width: 100%; max-width: 100%; }
}

/* ---------- side panel (drill-down stack) ---------- */
.side-panel {
  position: fixed; top: 0; right: 0; height: 100%;
  width: 560px; max-width: 90vw;
  background: var(--surface); color: var(--text);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease;
  z-index: 120;
}
.side-panel[hidden] { display: none !important; }
.side-panel.show { transform: translateX(0); }
.side-panel.behind header { filter: brightness(.96); }
.side-panel header {
  background: var(--surface); color: var(--text);
  padding: 10px 14px; display: flex; gap: 8px; align-items: center;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  /* Cancel the global <header> rules that would otherwise leak in:
     max-width:1400px (centres the bar instead of filling the panel) and
     padding from clamp(20px,6vw,88px) (pushes the title into the middle
     and squeezes the actions group). */
  max-width: none;
  margin: 0;
  height: auto;
  --gutter: 0;
}
.side-panel header::after { content: none; }
.side-panel header .title {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Actions always pinned to the right edge of the panel header, regardless
   of how long (or short) the title is and whether the title div managed
   to claim all the free space via flex:1. */
.side-panel .actions { display: flex; gap: 4px; flex: 0 0 auto; margin-left: auto; }
.side-panel .actions .iconbtn-light {
  width: 32px; height: 32px; padding: 0; border-radius: 6px;
  background: transparent; color: var(--text-muted); border: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.side-panel .actions .iconbtn-light:hover { background: var(--bg-hover); color: var(--text); }
.side-panel .actions .close-btn {
  background: transparent; border: 0; color: var(--text-muted);
  width: 32px; height: 32px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.side-panel .actions .close-btn:hover { background: var(--bg-hover); color: var(--text); }

.side-panel .body { flex: 1 1 auto; min-height: 0; position: relative;
  background: var(--bg); overflow: auto; }
.side-panel .body.with-pad { padding: 42px; }
.side-panel .body .kv { margin: 0 0 14px; }
.side-panel .body h3.sec {
  font-size: 13px; color: var(--text-muted); font-weight: 600;
  margin: 42px 0 12px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}
.side-panel .body h3.sec:first-child { margin-top: 0; }

.sp-pdf-wrap { width: 100%; height: 100%; min-height: 480px; margin: 0; }
.sp-pdf      { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.side-panel.pdf-mode .body { background: #525659; padding: 0; }
.side-panel.pdf-mode .sp-pdf-wrap { height: 100%; }
/* PDF panel width states */
.side-panel.pdf-mode { transition: width .3s ease, max-width .3s ease; }
.side-panel.pdf-half { width: 50vw; max-width: 50vw; }
.side-panel.pdf-full { width: 100vw; max-width: 100vw; }
.side-panel .pdf-close {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; display: none;
}
.side-panel .pdf-close:hover { background: rgba(0,0,0,.75); }

.side-panel .placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: var(--text-muted); text-align: center; padding: 24px; font-size: 13px;
}
/* When inside padded body with other content, placeholder is inline, not overlay */
.side-panel .body.with-pad .placeholder {
  position: static; min-height: 30vh;
}
.side-panel .placeholder .icon { color: var(--text-faint); }
.side-panel .placeholder .path {
  font-size: 11px; background: var(--bg-soft); color: var(--text-muted);
  padding: 6px 10px; border-radius: 6px; word-break: break-all; max-width: 100%;
}

/* kv-list used in side panels */
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 16px;
  margin-bottom: 16px; font-size: 13px; }
.kv .k { color: var(--text-muted); }
.kv .v { color: var(--text); }

/* Sub-tables in side panels */
.sub-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.sub-table th, .sub-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.sub-table th { background: var(--bg-soft); color: var(--text-muted); font-weight: 500; font-size: 12px; }
.sub-table tr:last-child td { border-bottom: 0; }
.sub-table tr:hover { background: var(--bg-hover); }

/* Survey doc rendered HTML inside side panel */
.sp-doc { font-size: 14px; color: var(--text); line-height: 1.5; padding: 8px 14px; }
/* Legacy header (kept for Document info panel compat) */
.sp-doc-header { padding: 12px 14px 4px; border-bottom: 1px solid var(--border); margin: 0; background: var(--bg-soft); }
.sp-doc-header p { margin: 4px 0; font-size: 13px; }
.sp-section { color: var(--text-muted); }

/* ---------- form / editor ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-muted); }
.form-grid label.full, .form-grid div.full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea {
  padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit;
  width: 100%; min-width: 0; box-sizing: border-box;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: none; border-color: var(--text); box-shadow: var(--focus-ring);
}
.form-grid .hint { font-size: 11px; color: var(--text-dim); }
.form-grid .err-msg { font-size: 11px; color: var(--danger); }
.form-grid code { font-size: 12px;
  background: var(--bg-soft); padding: 1px 5px; border-radius: 4px; }

/* Pager */
.pager { display: flex; gap: 6px; align-items: center; justify-content: center;
  margin: 14px 0 0; flex-wrap: wrap; }
.pager button {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 5px 10px; font-size: 12px; cursor: pointer;
}
.pager button:disabled { opacity: .5; cursor: default; }
.pager button:hover:not(:disabled) { background: var(--bg-hover); }
.pager button.active {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}

/* Toast */
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 10px 16px; border-radius: 8px;
  box-shadow: var(--shadow-3);
  font-size: 13px; opacity: 0; transition: opacity .2s ease, transform .2s ease;
  z-index: 200; pointer-events: none; max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--danger); }

/* Group separator row inside main module tables.
   Used by Waters / Surveys / Documents when there's a natural grouping.
   Rendered as a tall, clearly visible band; the whole header is a button
   that collapses / expands the rows below it. */
tbody tr.group-row {
  background: var(--bg-soft);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  cursor: default;
}
tbody tr.group-row + tr.group-row { border-top: 0; }
tbody tr.group-row:hover { background: var(--bg-hover); }
tbody tr.group-row td {
  padding: 0;
  border-bottom: 0;
}
tbody tr.group-row td:last-child::after { display: none !important; }

.group-toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: transparent; border: 0; color: var(--text);
  font: inherit; font-weight: 600; font-size: 14px;
  text-align: left; cursor: pointer;
  letter-spacing: -0.005em;
}
.group-toggle:hover { background: var(--bg-hover); }
.group-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring) inset; }
.group-chevron {
  width: 18px; height: 18px; stroke-width: 2;
  color: var(--text-muted);
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.group-toggle[aria-expanded="false"] .group-chevron {
  transform: rotate(-90deg);
}
.group-label {
  flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.group-count {
  font-weight: 500;
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}
tbody tr.group-row.collapsed { border-bottom-width: 1px; }

/* ---------- responsive table → cards on phones ----------
   ONLY for the main module tables, not for tables inside document HTML
   rendered in the side panel (.sp-doc table). */
@media (max-width: 640px) {
  html, body { font-size: 14px; }
  .module { --gutter: 14px; padding: 12px var(--gutter) 70px; }
  .editor-bar { grid-template-columns: 1fr auto; gap: 6px; }
  .editor-title { font-size: 13px; min-width: 0; justify-self: start;
    overflow: hidden; text-overflow: ellipsis; }
  .mh-user { display: none; }
  .editor-overlay { --gutter: 14px; padding: 0 var(--gutter) 70px; }
  .hero { padding: 0; margin: 18px 0; }
  .hero-search { padding: 10px 16px; gap: 10px; }
  .hero-search input { font-size: 15px; }
  /* Toolbar (counts + "Группировать по") was wrapping into 4–5 messy
     lines on phones. Stack the two halves vertically and let the select
     take the full width. */
  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 6px 0 12px;
  }
  .toolbar > #w-count,
  .toolbar > #s-count,
  .toolbar > #d-count,
  .toolbar > #r-count,
  .toolbar > #a-count { font-size: 12px; }
  .toolbar .group-by {
    margin-left: 0;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .toolbar .group-by select { flex: 1 1 auto; }
  #view-waters table, #view-surveys table, #view-documents table, #view-researches table {
    border-radius: 0; border-left: 0; border-right: 0; background: transparent; border: 0;
  }
  #view-waters thead, #view-surveys thead, #view-documents thead, #view-researches thead { display: none; }
  #view-waters tbody, #view-waters tbody tr, #view-waters tbody td,
  #view-surveys tbody, #view-surveys tbody tr, #view-surveys tbody td,
  #view-documents tbody, #view-documents tbody tr, #view-documents tbody td,
  #view-researches tbody, #view-researches tbody tr, #view-researches tbody td {
    display: block; width: 100%;
  }
  #view-waters tbody tr, #view-surveys tbody tr, #view-documents tbody tr, #view-researches tbody tr {
    border-bottom: 1px solid var(--border);
    padding: 8px 0 12px;
    height: auto;
  }
  #view-waters tbody td, #view-surveys tbody td, #view-documents tbody td, #view-researches tbody td {
    /* Mobile card pattern: tiny label on its own line, value underneath
       taking the full card width. This gives long values (Описание,
       Гидросхема, Position) room to breathe and removes the awkward
       hanging-indent we used to get when label+value shared a row. */
    display: block;
    padding: 6px 14px 0;
    border-bottom: 0;
    font-size: 13.5px;
    line-height: 1.4;
    min-height: 0;
  }
  /* Pills, progress bars and other inline content shouldn't break the
     row rhythm. */
  #view-waters tbody td .pill,
  #view-surveys tbody td .pill,
  #view-documents tbody td .pill,
  #view-researches tbody td .pill,
  #view-waters tbody td .progress,
  #view-surveys tbody td .progress,
  #view-documents tbody td .progress,
  #view-researches tbody td .progress { vertical-align: middle; }
  #view-waters tbody td::before,
  #view-surveys tbody td::before,
  #view-documents tbody td::before,
  #view-researches tbody td::before {
    content: attr(data-label);
    display: block;
    color: var(--text-dim);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-bottom: 2px;
  }
  #view-waters  tbody td.actions,
  #view-surveys tbody td.actions,
  #view-documents tbody td.actions,
  #view-researches tbody td.actions {
    display: flex; gap: 4px; padding: 10px 14px 4px;
    min-height: 34px; line-height: 1;
  }
  #view-waters  tbody td.actions::before,
  #view-surveys tbody td.actions::before,
  #view-documents tbody td.actions::before,
  #view-researches tbody td.actions::before { content: none; }
  #view-waters  tbody td.num, #view-waters  tbody td.num::before,
  #view-surveys tbody td.num, #view-surveys tbody td.num::before,
  #view-documents tbody td.num, #view-documents tbody td.num::before,
  #view-researches tbody td.num, #view-researches tbody td.num::before { text-align: left; }

  /* Group separators on phone: full-width header, no data-label prefix */
  #view-waters  tbody tr.group-row,
  #view-surveys tbody tr.group-row,
  #view-documents tbody tr.group-row,
  #view-researches tbody tr.group-row { padding: 0; }
  #view-waters  tbody tr.group-row td,
  #view-surveys tbody tr.group-row td,
  #view-documents tbody tr.group-row td,
  #view-researches tbody tr.group-row td { padding: 0; }
  #view-waters  tbody tr.group-row td::before,
  #view-surveys tbody tr.group-row td::before,
  #view-documents tbody tr.group-row td::before,
  #view-researches tbody tr.group-row td::before { content: ""; margin: 0; }
  .group-toggle { padding: 12px 14px; }
  /* kv grid → stacked label above value on phones */
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv .k { font-size: 10.5px; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.04em; margin-top: 10px; line-height: 1.2; }
  .kv .k:first-child { margin-top: 0; }
  .kv .v { margin-top: 2px; }
  .side-panel .body.with-pad { padding: 20px; }

  /* Doc editor: sub-row on mobile.
     Line 1: water picker (full width, explicit width so it can't overflow).
     Line 2: category bar + delete — tight together, gap from water above. */
  .sub-row {
    margin-bottom: 16px;
  }
  .sub-row-main {
    flex-wrap: wrap;
    gap: 4px;
  }
  .sub-row-water {
    width: 100%;
    min-width: 0;
    flex: none;
    margin-bottom: 2px;
  }
  /* Form grid → single column on phones */
  .form-grid { grid-template-columns: 1fr; }

  /* Prevent horizontal scroll on editor overlay & side-mode modal */
  .editor-overlay { overflow-x: hidden; }
  .modal-bg.side-mode .modal .body { overflow-x: hidden; }
}

/* Lookup (water picker in editor) */
/* Water picker: input + rich preview on blur */
.lookup { position: relative; min-width: 0; }
.lookup .wp-preview {
  cursor: text;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); font-size: 13px; line-height: 1.5;
  height: 36px; box-sizing: border-box;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: none;
  max-width: 100%;
}
.lookup .wp-preview:hover { border-color: var(--border-strong); }
@media (max-width: 640px) {
  .lookup .wp-preview {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto;
    min-height: 36px;
  }
}
.lookup.picked input { display: none; }
.lookup.picked .wp-preview { display: block; }
.lookup .results {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: var(--shadow-2);
  max-height: 280px; overflow: auto; z-index: 10; display: none;
}
.chips-pop .results {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: var(--shadow-2);
  max-height: 200px; overflow: auto; display: none;
  margin-top: 4px;
}
.chips-pop { position: relative; }
.lookup.open .results, .lookup .results.open,
.chips-pop.open .results { display: block; }
.lookup .results .row, .lookup .results .item,
.chips-pop .results .item {
  padding: 7px 10px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.lookup .results .row:last-child, .lookup .results .item:last-child,
.chips-pop .results .item:last-child { border-bottom: 0; }
.lookup .results .row:hover, .lookup .results .row.active,
.lookup .results .item:hover, .lookup .results .item.active,
.chips-pop .results .item:hover, .chips-pop .results .item.active {
  background: var(--bg-hover);
}
.lookup .results .row .sub { font-size: 11px; color: var(--text-dim); }
.lookup .results .item small, .chips-pop .results .item small {
  color: var(--text-muted); }
.lookup .results .empty, .chips-pop .results .empty {
  padding: 10px; color: var(--text-muted); font-size: 13px; }

/* Chips (contributors) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--bg); min-height: 40px; align-items: center;
  width: 100%; min-width: 0; box-sizing: border-box; }
.chip { display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 4px 2px 10px;
  font-size: 12px; color: var(--text); }
.chip button { background: transparent; border: 0; cursor: pointer;
  color: var(--text-muted); padding: 2px 4px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; }
.chip button:hover { background: var(--bg-active); color: var(--text); }
.chips .add { flex: 1 1 100px; min-width: 100px; border: 0; outline: none;
  background: transparent; font-size: 13px; padding: 4px 6px; color: var(--text); }

/* Subtle empty state */
.empty {
  padding: 14px; text-align: center;
  color: var(--text-dim); font-size: 13px;
  background: var(--bg-soft); border: 1px dashed var(--border); border-radius: 6px;
}

/* ---------- timeline (water-panel collision) ---------- */
.timeline { display: flex; flex-direction: column; gap: 6px; padding-left: 6px;
  border-left: 1px solid var(--border); margin-left: 4px; }
.timeline-item { display: flex; gap: 8px; padding: 6px 0 6px 10px; font-size: 12px; }
.timeline-item .dt { color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 90px; }
.timeline-item .drop { color: var(--warn); font-size: 11px; margin-left: 4px; }

/* Misc */
.coll      { color: var(--warn); font-size: 12px; display: inline-flex; align-items: center; gap: 2px; }
.coll-none { color: var(--text-faint); font-size: 12px; }
.coll-row  td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* ---------- contrast/legacy classes that some code still uses ---------- */
.dirty-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); margin-right: 4px; }
.brand-name { color: inherit; }