/**
 * UXD-VS-01 v1.1 — base rules that apply once, everywhere, rather than being
 * repeated per component: reset, base typography, focus ring, reduced
 * motion, and the two utility classes referenced across the component
 * inventory (`.tabular-nums`, `.layer-popped`).
 *
 * Nothing here is a component: D.1–D.15 style themselves against the tokens
 * in `tokens.css`, not against selectors defined here.
 */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-canvas);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--t-400-size);
  line-height: var(--t-400-line);
  font-weight: var(--t-400-weight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
  margin: 0;
}

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

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--accent);
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A-7 / B.2: italics are not used anywhere in this application. Kept as a
   guard rather than an assumption — a stray <em>/<i> still renders upright. */
em,
i {
  font-style: normal;
}

/* B.2: table figures in counters, prices, hours and dates. */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* B.6: dark theme shadows do not read, so popped layers (menu, drawer,
   dialog) add a border there instead of relying on sh-2 alone. */
.layer-popped {
  box-shadow: var(--sh-2);
}
:root[data-theme="dark"] .layer-popped {
  border: var(--bw-1) solid var(--border);
}

:focus-visible {
  outline: var(--bw-2) solid var(--focus-ring);
  outline-offset: 2px;
}

/* G.1: the ring never disappears, but a table row's ring points inward so it
   does not clip against the row above it. */
[data-focus-inward]:focus-visible {
  outline-offset: -2px;
}

/* B.7 / G.5: prefers-reduced-motion collapses every transition and animation
   to zero, unconditionally — this is not opt-in per component. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
 * FTP-026 commit 2/3 — navigation shell and list-screen component styles.
 * Declared simplification: this file carries every component's CSS (no
 * CSS-Modules/styled-components tooling exists in this project and adding
 * one is outside FTP-026's ratified eighteen paths), rather than one
 * stylesheet per component. Breakpoints follow C.2 exactly: phone <768,
 * tablet 768-1023, desktop >=1024.
 * ======================================================================== */

[data-skip-link] {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  background: var(--bg-surface);
  color: var(--text-1);
  padding: var(--space-8) var(--space-12);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-1);
}
[data-skip-link]:focus {
  left: var(--space-8);
  top: var(--space-8);
}

[data-shell="app"] {
  min-height: 100vh;
  background: var(--bg-canvas);
}

[data-shell-header] {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  height: 56px;
  padding: 0 var(--workarea-inset);
  background: var(--bg-surface);
  border-bottom: var(--bw-1) solid var(--border);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}
@media (min-width: 768px) {
  [data-shell-header] {
    display: none;
  }
}
[data-shell-header] [data-action="open-sections"] {
  min-height: var(--tap-target-phone);
  min-width: var(--tap-target-phone);
  font: inherit;
  font-weight: var(--t-400-label-weight);
  color: var(--text-1);
}

[data-shell-body] {
  display: flex;
  align-items: flex-start;
}

[data-shell-nav="desktop"] {
  display: none;
}
@media (min-width: 768px) {
  [data-shell-nav="desktop"] {
    display: flex;
    flex-direction: column;
    width: var(--nav-width);
    flex: 0 0 var(--nav-width);
    min-height: 100vh;
    background: var(--bg-subtle);
    border-right: var(--bw-1) solid var(--border);
    padding: var(--space-16) 0;
    position: sticky;
    top: 0;
  }
}
[data-shell-nav-brand] {
  font-size: var(--t-500-size);
  font-weight: 500;
  padding: 0 var(--space-16) var(--space-12);
}
[data-shell-nav-heading] {
  font-size: var(--t-200-size);
  letter-spacing: var(--t-200-tracking);
  color: var(--text-3);
  text-transform: none;
  padding: 0 var(--space-16);
  margin-bottom: var(--space-8);
}
[data-shell-nav-items] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 var(--space-8);
}
[data-shell-nav-item] {
  display: block;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--r-1);
  color: var(--text-2);
  font-weight: var(--t-400-label-weight);
  min-height: 40px;
  border-left: var(--bw-2) solid transparent;
}
[data-shell-nav-item]:hover {
  background: var(--bg-hover);
}
[data-shell-nav-item][data-active="true"] {
  background: var(--bg-selected);
  color: var(--text-1);
  border-left-color: var(--accent);
}
[data-shell-nav-placeholder] {
  font-size: var(--t-300-size);
  color: var(--text-3);
  padding: var(--space-12) var(--space-16);
}
[data-shell-nav-footer] {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-16) 0;
  border-top: var(--bw-1) solid var(--border);
}
[data-shell-nav-footer] button {
  text-align: left;
  padding: var(--space-8) 0;
  color: var(--text-2);
  font-weight: var(--t-400-label-weight);
}

[data-shell-main] {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-16);
}
@media (min-width: 768px) {
  [data-shell-main] {
    padding: var(--space-24) var(--space-32);
  }
}

[data-shell-crumb="desktop"] {
  display: none;
}
[data-shell-crumb="mobile"] {
  display: block;
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
  [data-shell-crumb="desktop"] {
    display: block;
    margin-bottom: var(--space-16);
  }
  [data-shell-crumb="mobile"] {
    display: none;
  }
}
[data-breadcrumb] {
  font-size: var(--t-300-size);
  color: var(--text-3);
}
[data-breadcrumb] a {
  color: var(--accent);
}

[data-shell-content] {
  outline: none;
}

[data-shell-drawer-root] {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
}
[data-shell-drawer-backdrop] {
  position: absolute;
  inset: 0;
  background: rgba(16, 18, 22, 0.4);
}
:root[data-theme="dark"] [data-shell-drawer-backdrop] {
  background: rgba(0, 0, 0, 0.6);
}
[data-shell-drawer] {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(280px, 85vw);
  background: var(--bg-surface);
  border-right: var(--bw-1) solid var(--border);
  box-shadow: var(--sh-2);
  display: flex;
  flex-direction: column;
  padding: var(--space-16) 0;
  overflow-y: auto;
  transition: transform var(--mo-layer-duration) var(--mo-layer-easing);
}
[data-shell-drawer-header] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-16) var(--space-12);
}

/* Saved views (D.5) */
[data-panel="saved-views"] {
  display: flex;
  gap: var(--space-8);
  overflow-x: auto;
  margin: var(--space-16) 0;
}
[data-panel="saved-views"] button {
  padding: var(--space-8) var(--space-12);
  border-radius: var(--r-1);
  color: var(--text-2);
  font-weight: var(--t-400-label-weight);
  white-space: nowrap;
  border: var(--bw-1) solid var(--border);
  background: var(--bg-subtle);
}
[data-panel="saved-views"] button[aria-pressed="true"] {
  background: var(--bg-selected);
  color: var(--text-1);
  border-color: var(--accent-border);
}

/* Filters (D.6) */
[data-filters-root] {
  display: inline-block;
  position: relative;
}
[data-action="toggle-filters"] {
  border: var(--bw-1) solid var(--border-strong);
  border-radius: var(--r-2);
  padding: var(--space-8) var(--space-12);
}
[data-action="toggle-filters"][aria-pressed="true"] {
  background: var(--accent-bg);
}
[data-filters-panel] {
  background: var(--bg-surface);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--sh-2);
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
[data-filters-panel="inline"] {
  position: absolute;
  top: calc(100% + var(--space-8));
  left: 0;
  z-index: var(--z-overlay);
  min-width: 280px;
}
[data-filters-panel="sheet"] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90vh;
  z-index: var(--z-overlay);
  border-radius: var(--r-3) var(--r-3) 0 0;
}
/* VS-33: checkbox groups (radio for "Ответственный", VS-32's exception) —
   no <select>, no toggle switch, matching D.6 literally. */
[data-filter-field] {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  border: none;
  padding: 0;
  margin: 0 0 var(--space-16);
}
[data-filter-field] legend {
  font-size: var(--t-400-label-size);
  font-weight: var(--t-400-label-weight);
  color: var(--text-2);
  padding: 0 0 var(--space-4);
}
[data-filter-option] {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--tap-target-pointer);
  font-size: var(--t-400-size);
}
@media (max-width: 767px) {
  [data-filter-option] {
    min-height: var(--tap-target-phone);
  }
}
[data-filter-option] input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent-solid);
}
[data-filters-actions] {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
}

/* Status badges (D.2) */
[data-badge="status"] {
  display: inline-block;
  font-size: var(--t-200-size);
  font-weight: var(--t-200-weight);
  letter-spacing: var(--t-200-tracking);
  padding: var(--space-2) var(--space-8);
  border-radius: var(--r-1);
  border: var(--bw-1) solid var(--neutral-border);
  background: var(--neutral-bg);
  color: var(--text-1);
}
[data-badge="status"][data-status="published"] {
  background: var(--ok-bg);
  border-color: var(--ok-border);
  color: var(--ok-text);
}
[data-badge="status"][data-status="retired"] {
  background: var(--neutral-bg);
  border-color: var(--neutral-border);
  color: var(--text-2);
}

/* List table (D.3) — desktop/tablet only; mobile uses the block-row list */
[data-list-table] {
  display: none;
}
[data-list-mobile] {
  display: block;
}
@media (min-width: 768px) {
  [data-list-table] {
    display: table;
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface);
    border: var(--bw-1) solid var(--border);
    border-radius: var(--r-3);
  }
  [data-list-mobile] {
    display: none;
  }
  [data-list-table] th {
    background: var(--bg-subtle);
    color: var(--text-2);
    font-size: var(--t-400-label-size);
    font-weight: var(--t-400-label-weight);
    text-align: left;
    padding: var(--space-8) var(--space-12);
    position: sticky;
    top: 56px;
  }
  [data-list-table] td {
    padding: var(--space-8) var(--space-12);
    border-top: var(--bw-1) solid var(--border-subtle);
  }
  [data-list-table] tr:hover td {
    background: var(--bg-hover);
  }
  /* Ten columns on desktop; tablet keeps the five UXD-VS-01 names
     explicitly and hides the rest (C.3) — declared reconciliation in
     index.tsx's header comment. */
  [data-column="code"],
  [data-column="serviceType"],
  [data-column="category"],
  [data-column="responsible"],
  [data-column="updated"] {
    display: none;
  }
}
@media (min-width: 1024px) {
  [data-column="code"],
  [data-column="serviceType"],
  [data-column="category"],
  [data-column="responsible"],
  [data-column="updated"] {
    display: table-cell;
  }
}

/* Mobile block-row (D.4) */
[data-service-row] {
  padding: var(--space-12) 0;
  border-bottom: var(--bw-1) solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}
[data-row-line="1"] {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
[data-row-title] {
  flex: 1 1 auto;
  color: var(--text-1);
  font-weight: var(--t-400-weight);
}
[data-row-line="2"] {
  display: flex;
  gap: var(--space-12);
  font-size: var(--t-300-size);
  color: var(--text-2);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
[data-swipe-actions] {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
[data-swipe-actions] button {
  width: 88px;
  font-size: var(--t-200-size);
  background: var(--neutral-bg);
  color: var(--text-1);
}
[data-longpress-sheet] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-surface);
  border-top: var(--bw-1) solid var(--border);
  box-shadow: var(--sh-2);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  padding: var(--space-16);
}

/* Kebab (D.1, E.3/E.4) — present at every width */
[data-kebab-root] {
  position: relative;
  display: inline-block;
}
[data-action="open-row-menu"] {
  min-width: var(--tap-target-pointer);
  min-height: var(--tap-target-pointer);
}
@media (max-width: 767px) {
  [data-action="open-row-menu"] {
    min-width: var(--tap-target-phone);
    min-height: var(--tap-target-phone);
  }
}
[data-kebab-menu] {
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--bg-surface);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--sh-2);
  min-width: 180px;
  z-index: var(--z-overlay);
  padding: var(--space-4) 0;
}
[data-kebab-menu] button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-8) var(--space-12);
  min-height: 40px;
}
[data-kebab-menu] button:hover {
  background: var(--bg-hover);
}

/* Skeletons (F.2) — no shimmer, no pulse: A-2 forbids decoration that
   carries no information, and an animated skeleton is exactly that. */
[data-skeleton] {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
[data-skeleton-row] {
  height: 44px;
  background: var(--bg-subtle);
  border-radius: var(--r-1);
}

/* Confirm dialog (E.5, D.13) */
[data-confirm-dialog] {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-width: 400px;
  background: var(--bg-surface);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--sh-2);
  padding: var(--space-16);
  z-index: var(--z-dialog);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Categories / templates (D.9-style rows) */
[data-category-list] {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
[data-category-entry] {
  display: block;
  padding: var(--space-12) var(--space-16);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-3);
  background: var(--bg-surface);
}
[data-category-entry]:hover {
  background: var(--bg-hover);
}