/* ============================================================
   Ductor Admin — Design System
   Inspired by Linear / Stripe / Notion / Attio / Vercel
   Light, calm, premium enterprise UI
   v1.0 · 2026-05-27
   ============================================================ */

:root {
  /* ---- Color tokens ---- */
  --ds-bg:            #F5F7FB;
  --ds-bg-elev:       #FFFFFF;
  --ds-card:          #FFFFFF;
  --ds-card-muted:    #FAFBFD;
  --ds-text:          #0F172A;
  --ds-text-muted:    #64748B;
  --ds-text-faint:    #94A3B8;
  --ds-border:        rgba(15, 23, 42, 0.08);
  --ds-border-strong: rgba(15, 23, 42, 0.14);
  --ds-divider:       rgba(15, 23, 42, 0.06);

  --ds-primary:       #3B82F6;
  --ds-primary-600:   #2563EB;
  --ds-primary-soft:  #EFF6FF;

  --ds-success:       #10B981;
  --ds-success-soft:  #ECFDF5;
  --ds-success-text:  #047857;

  --ds-warn:          #F59E0B;
  --ds-warn-soft:     #FFFBEB;
  --ds-warn-text:     #92400E;

  --ds-danger:        #EF4444;
  --ds-danger-soft:   #FEF2F2;
  --ds-danger-text:   #B91C1C;

  --ds-accent-purple: #A855F7;
  --ds-accent-lime:   #84CC16;

  /* ============================================================
   * M2.5 — Semantic operational tokens (canonical).
   * Use these names in NEW code. Project-specific aliases (mws/mcr)
   * remain for backward compat.
   * ============================================================ */
  /* Purple — semantic for absence (vacation / sick / leave) */
  --ds-purple:        #A855F7;
  --ds-purple-soft:   #F3E8FF;
  --ds-purple-text:   #6D28D9;

  /* ============================================================
   * v2.2 — Shift Operations Engine 7-color palette (FINAL_V2 §13).
   * 10 operational states mapped to 7 tones (gray/yellow/green/blue/
   * orange/red/purple). Plus payment-status orthogonal palette.
   * ============================================================ */
  /* Info / In-progress (operational state: in_progress) */
  --ds-info:          #3B82F6;
  --ds-info-soft:     #DBEAFE;
  --ds-info-text:     #1D4ED8;

  /* Orange / Partially completed (operational state: partially_completed) */
  --ds-orange:        #EA580C;
  --ds-orange-soft:   #FED7AA;
  --ds-orange-text:   #C2410C;

  /* Deep purple — Finance / Paid (payment_status=paid) */
  --ds-paid:          #1E40AF;
  --ds-paid-soft:     #DBEAFE;
  --ds-paid-text:     #1E3A8A;

  /* Neutral / Draft / Cancelled — extra muted slate */
  --ds-neutral:       #94A3B8;
  --ds-neutral-soft:  #F1F5F9;
  --ds-neutral-text:  #475569;

  /* ---- ds-pill ui_variant aliases (FINAL_V2 §22) ----
   * Backend declares: danger / warning / success / info / neutral.
   * Frontend renders via these classes. */

  /* Project tints (Купер / Маркет-Сб / Маркет-Кур) — softer */
  --ds-kuper:         #3B82F6;
  --ds-kuper-soft:    #F4F8FF;
  --ds-mws:           #C026D3;
  --ds-mws-soft:      #FBF5FE;
  --ds-mcr:           #65A30D;
  --ds-mcr-soft:      #F6FBED;

  /* ---- Typography scale ---- */
  --ds-text-xs:    11px;
  --ds-text-sm:    12px;
  --ds-text-base:  14px;
  --ds-text-lg:    16px;
  --ds-text-xl:    20px;
  --ds-text-2xl:   24px;
  --ds-text-3xl:   30px;
  --ds-text-4xl:   36px;

  --ds-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- Spacing scale (8-pt) ---- */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;
  --ds-space-8: 40px;

  /* ---- Radii ---- */
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 18px;
  --ds-radius-pill: 999px;

  /* ---- Shadows (soft, layered) ---- */
  --ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04),
                  0 1px 1px rgba(15, 23, 42, 0.03);
  --ds-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06),
                  0 1px 2px rgba(15, 23, 42, 0.04);
  --ds-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08),
                  0 2px 6px rgba(15, 23, 42, 0.04);

  /* ---- Transitions ---- */
  --ds-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-dur-fast: 120ms;
  --ds-dur:      180ms;
}

/* ============================================================
   ds-page scope — opt-in container for redesigned pages.
   No styles leak to legacy pages that don't wrap content in .ds-page.
   ============================================================ */

.ds-page {
  font-family: var(--ds-font-sans);
  color: var(--ds-text);
  font-size: var(--ds-text-base);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

/* Lift body background for this page */
body:has(.ds-page) {
  background: var(--ds-bg);
}

/* ---- Layout helpers ---- */
.ds-stack-2 > * + * { margin-top: var(--ds-space-2); }
.ds-stack-3 > * + * { margin-top: var(--ds-space-3); }
.ds-stack-4 > * + * { margin-top: var(--ds-space-4); }
.ds-stack-5 > * + * { margin-top: var(--ds-space-5); }
.ds-stack-6 > * + * { margin-top: var(--ds-space-6); }

/* ============================================================
   Cards
   ============================================================ */

.ds-page .ds-card,
.ds-page .ds-card-tight {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  transition: box-shadow var(--ds-dur) var(--ds-ease),
              transform var(--ds-dur) var(--ds-ease);
}

.ds-page .ds-card { padding: var(--ds-space-6); }
.ds-page .ds-card-tight { padding: var(--ds-space-4) var(--ds-space-5); }

.ds-page .ds-card-hover:hover {
  box-shadow: var(--ds-shadow-md);
}

.ds-page .ds-card-flat {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-4);
}

/* Section card with project-color top accent stripe */
.ds-page .ds-card-accent {
  position: relative;
  overflow: hidden;
}
.ds-page .ds-card-accent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--ds-accent-color, var(--ds-primary));
  opacity: 0.85;
}

/* ============================================================
   Typography utilities
   ============================================================ */

.ds-page .ds-h1 {
  font-size: var(--ds-text-3xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ds-text);
}
.ds-page .ds-h2 {
  font-size: var(--ds-text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ds-text);
}
.ds-page .ds-h3 {
  font-size: var(--ds-text-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ds-text);
}
.ds-page .ds-label {
  font-size: var(--ds-text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}
.ds-page .ds-muted     { color: var(--ds-text-muted); }
.ds-page .ds-faint     { color: var(--ds-text-faint); }
.ds-page .ds-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.ds-page .ds-display {
  font-size: var(--ds-text-4xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
}
.ds-page .ds-display-sm {
  font-size: var(--ds-text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
}

/* ============================================================
   Pills / badges
   ============================================================ */

.ds-page .ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ds-text-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--ds-radius-pill);
  background: #F1F5F9;
  color: var(--ds-text-muted);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.ds-page .ds-pill-primary { background: var(--ds-primary-soft); color: #1D4ED8; }
.ds-page .ds-pill-success { background: var(--ds-success-soft); color: var(--ds-success-text); }
.ds-page .ds-pill-warn    { background: var(--ds-warn-soft);    color: var(--ds-warn-text); }
.ds-page .ds-pill-danger  { background: var(--ds-danger-soft);  color: var(--ds-danger-text); }
.ds-page .ds-pill-purple  { background: var(--ds-mws-soft);     color: #86198F; }
.ds-page .ds-pill-lime    { background: var(--ds-mcr-soft);     color: #4D7C0F; }

/* v2.2 — ui_variant pills (FINAL_V2 §22). Backend declares variant string. */
.ds-page .ds-pill-info     { background: var(--ds-info-soft);    color: var(--ds-info-text); }
.ds-page .ds-pill-orange   { background: var(--ds-orange-soft);  color: var(--ds-orange-text); }
.ds-page .ds-pill-paid     { background: var(--ds-paid-soft);    color: var(--ds-paid-text); }
.ds-page .ds-pill-neutral  { background: var(--ds-neutral-soft); color: var(--ds-neutral-text); }

/* v2.2 — state-pills (10 operational states, named for direct backend mapping) */
.ds-page .ds-state-draft                            { background: var(--ds-neutral-soft); color: var(--ds-neutral-text); }
.ds-page .ds-state-assigned                         { background: var(--ds-warn-soft);    color: var(--ds-warn-text); }
.ds-page .ds-state-awaiting_employee_confirmation   { background: var(--ds-warn-soft);    color: var(--ds-warn-text); }
.ds-page .ds-state-awaiting_manager_confirmation    { background: var(--ds-warn-soft);    color: var(--ds-warn-text); }
.ds-page .ds-state-confirmed                        { background: var(--ds-success-soft); color: var(--ds-success-text); }
.ds-page .ds-state-in_progress                      { background: var(--ds-info-soft);    color: var(--ds-info-text); }
.ds-page .ds-state-verified                         { background: var(--ds-success-soft); color: var(--ds-success-text); }
.ds-page .ds-state-partially_completed              { background: var(--ds-orange-soft);  color: var(--ds-orange-text); }
.ds-page .ds-state-failed                           { background: var(--ds-danger-soft);  color: var(--ds-danger-text); }
.ds-page .ds-state-cancelled                        { background: var(--ds-neutral-soft); color: var(--ds-neutral-text); }

/* v2.2 — payment-status pills (orthogonal to state) */
.ds-page .ds-payment-pending  { background: var(--ds-neutral-soft); color: var(--ds-neutral-text); }
.ds-page .ds-payment-approved { background: var(--ds-success-soft); color: var(--ds-success-text); }
.ds-page .ds-payment-paid     { background: var(--ds-paid-soft);    color: var(--ds-paid-text); }
.ds-page .ds-payment-rejected { background: var(--ds-danger-soft);  color: var(--ds-danger-text); }

/* v2.2 — coverage-status badges (red border accent for at_risk/uncovered) */
.ds-page .ds-coverage-open      { background: var(--ds-neutral-soft); color: var(--ds-neutral-text); }
.ds-page .ds-coverage-assigned  { background: var(--ds-warn-soft);    color: var(--ds-warn-text); }
.ds-page .ds-coverage-covered   { background: var(--ds-success-soft); color: var(--ds-success-text); }
.ds-page .ds-coverage-at_risk   {
  background: var(--ds-warn-soft);   color: var(--ds-warn-text);
  border: 1px solid var(--ds-warn);
}
.ds-page .ds-coverage-uncovered {
  background: var(--ds-danger-soft); color: var(--ds-danger-text);
  border: 1px solid var(--ds-danger);
}

/* Trend deltas */
.ds-page .ds-delta-up   { color: var(--ds-success-text); font-weight: 600; font-size: var(--ds-text-xs); }
.ds-page .ds-delta-down { color: var(--ds-danger-text);  font-weight: 600; font-size: var(--ds-text-xs); }
.ds-page .ds-delta-flat { color: var(--ds-text-muted);   font-weight: 600; font-size: var(--ds-text-xs); }

/* ============================================================
   Buttons
   ============================================================ */

.ds-page .ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--ds-border-strong);
  background: var(--ds-card);
  color: var(--ds-text);
  transition: background var(--ds-dur-fast) var(--ds-ease),
              border-color var(--ds-dur-fast) var(--ds-ease);
  text-decoration: none;
}
.ds-page .ds-btn:hover { background: #F8FAFC; border-color: rgba(15, 23, 42, 0.18); }

.ds-page .ds-btn-primary {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
}
.ds-page .ds-btn-primary:hover {
  background: var(--ds-primary-600);
  border-color: var(--ds-primary-600);
}

.ds-page .ds-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ds-text-muted);
}
.ds-page .ds-btn-ghost:hover { background: #F1F5F9; color: var(--ds-text); }

/* Chip preset (date presets) */
.ds-page .ds-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ds-dur-fast) var(--ds-ease);
  text-decoration: none;
}
.ds-page .ds-chip:hover {
  background: #F8FAFC;
  color: var(--ds-text);
}
.ds-page .ds-chip-active {
  background: var(--ds-text);
  color: #fff;
  border-color: var(--ds-text);
}

/* ============================================================
   Inputs (light)
   ============================================================ */

.ds-page .ds-input,
.ds-page .ds-select {
  height: 32px;
  padding: 0 10px;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-strong);
  background: var(--ds-card);
  color: var(--ds-text);
  font-size: var(--ds-text-sm);
  transition: border-color var(--ds-dur-fast) var(--ds-ease),
              box-shadow var(--ds-dur-fast) var(--ds-ease);
}
.ds-page .ds-input:focus,
.ds-page .ds-select:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ============================================================
   Tables (Stripe / Attio style)
   ============================================================ */

.ds-page .ds-table-wrap {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}
.ds-page .ds-table-scroll {
  max-height: 78vh;
  overflow: auto;
}
.ds-page .ds-table {
  width: 100%;
  font-size: var(--ds-text-sm);
  border-collapse: separate;
  border-spacing: 0;
}
.ds-page .ds-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ds-card-muted);
  color: var(--ds-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--ds-text-xs);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ds-border);
  white-space: nowrap;
}
.ds-page .ds-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ds-divider);
  color: var(--ds-text);
  vertical-align: middle;
}
.ds-page .ds-table tbody tr:last-child td { border-bottom: none; }
.ds-page .ds-table tbody tr {
  transition: background var(--ds-dur-fast) var(--ds-ease);
}
.ds-page .ds-table tbody tr:hover { background: #F8FAFC; }
.ds-page .ds-table td.ds-num,
.ds-page .ds-table th.ds-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ds-page .ds-table tfoot td {
  padding: 12px 14px;
  background: var(--ds-card-muted);
  border-top: 1px solid var(--ds-border-strong);
  font-weight: 600;
  color: var(--ds-text);
}
.ds-page .ds-sticky-left {
  position: sticky;
  left: 0;
  background: var(--ds-card);
  z-index: 2;
}
.ds-page .ds-table tbody tr:hover .ds-sticky-left { background: #F8FAFC; }

/* Soft column tinting for project columns inside a table */
.ds-page .ds-col-kuper { background: var(--ds-kuper-soft); }
.ds-page .ds-col-mws   { background: var(--ds-mws-soft); }
.ds-page .ds-col-mcr   { background: var(--ds-mcr-soft); }
.ds-page .ds-col-sum   { background: #F1F5F9; font-weight: 600; }
.ds-page .ds-table tbody tr:hover .ds-col-kuper { background: #E9F0FF; }
.ds-page .ds-table tbody tr:hover .ds-col-mws   { background: #F4E8FB; }
.ds-page .ds-table tbody tr:hover .ds-col-mcr   { background: #EEF7DD; }
.ds-page .ds-table tbody tr:hover .ds-col-sum   { background: #E2E8F0; }

/* Conversion cells (heat-coded) */
.ds-page .ds-cell-good { color: var(--ds-success-text); font-weight: 600; }
.ds-page .ds-cell-bad  { color: var(--ds-danger-text);  font-weight: 600; }
.ds-page .ds-cell-mid  { color: var(--ds-text-muted); }

/* ============================================================
   Banners (info / warn) — flat, low-noise
   ============================================================ */

.ds-page .ds-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-sm);
  line-height: 1.45;
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
}
.ds-page .ds-banner-info {
  background: var(--ds-primary-soft);
  border-color: rgba(59, 130, 246, 0.2);
  color: #1E40AF;
}
.ds-page .ds-banner-warn {
  background: var(--ds-warn-soft);
  border-color: rgba(245, 158, 11, 0.25);
  color: var(--ds-warn-text);
}
.ds-page .ds-banner-icon {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
}

/* ============================================================
   KPI tile (Linear/Stripe style — large number, label, delta)
   ============================================================ */

.ds-page .ds-kpi {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-5);
  box-shadow: var(--ds-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 116px;
}
.ds-page .ds-kpi__label {
  font-size: var(--ds-text-xs);
  font-weight: 500;
  color: var(--ds-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ds-page .ds-kpi__value {
  font-size: var(--ds-text-3xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
  line-height: 1.05;
}
.ds-page .ds-kpi__hint {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}

/* ============================================================
   Section header (title + optional helper text + actions)
   ============================================================ */

.ds-page .ds-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-3);
}
.ds-page .ds-section-title {
  font-size: var(--ds-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ds-text);
}
.ds-page .ds-section-sub {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  margin-top: 2px;
}

/* ============================================================
   Page header (Linear-style: large title + caption + actions row)
   ============================================================ */

.ds-page .ds-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding-bottom: var(--ds-space-5);
}
.ds-page .ds-page-title {
  font-size: var(--ds-text-3xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ds-text);
  margin: 0;
}
.ds-page .ds-page-caption {
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
  margin-top: 4px;
}

/* ============================================================
   v2 additions — 2026-05-27
   Sidebar shell, KPI tinted icons, alerts, AI-card, avatars,
   status dots, empty state, topbar buttons, multi-select.
   Layout primitives (.ds-app, .ds-sidebar, .ds-main) are
   UNSCOPED — used directly by base.html.
   Component classes scoped under .ds-page (opt-in per template).
   ============================================================ */

/* ---------- Layout shell (UNSCOPED) ---------- */
.ds-app {
  display: flex;
  min-height: 100vh;
  min-width: 1280px;
}
.ds-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--ds-bg-elev);
  border-right: 1px solid var(--ds-border);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.ds-sidebar-logo    { padding: 20px 20px 24px; }
.ds-sidebar-nav     { padding: 0 12px; flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.ds-sidebar-footer  { padding: 12px; border-top: 1px solid var(--ds-border); }

.ds-main {
  flex: 1;
  min-width: 0;
  padding: var(--ds-space-6) 20px;
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

.ds-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ds-nav-item:hover  { background: #F1F5F9; color: var(--ds-text); }
.ds-nav-item.active { background: #EFF6FF; color: #2563EB; }
.ds-nav-item.active svg { color: #2563EB; }
.ds-nav-item-icon { width: 18px; height: 18px; flex-shrink: 0; }
.ds-nav-item-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sidebar grouped section (e.g. Аналитика менеджеров / Смены и выплаты / Настройки) */
.ds-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 10px 0 4px;
}
.ds-nav-group-label {
  padding: 4px 12px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-text-faint);
  user-select: none;
}
.ds-nav-item--child {
  padding-left: 14px;
  font-size: 13px;
  font-weight: 500;
}
.ds-nav-item--child .ds-nav-item-icon { width: 16px; height: 16px; }

/* Notification badge on a nav item (e.g. Запросы count) */
.ds-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ds-danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  line-height: 1;
}
.ds-nav-item.active .ds-nav-badge { background: #fff; color: var(--ds-primary-600); }

/* Separator between sidebar sections */
.ds-nav-divider {
  height: 1px;
  background: var(--ds-border);
  margin: 12px 8px 8px;
}

/* ============================================================
   View-as banner (L1 admin impersonating another manager)
   ============================================================ */
.ds-viewas-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-warn-soft);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: var(--ds-warn-text);
  font-size: var(--ds-text-sm);
  margin-bottom: var(--ds-space-3);
}
.ds-viewas-banner__role { opacity: 0.7; font-size: var(--ds-text-xs); }
.ds-viewas-banner__exit {
  font-size: var(--ds-text-xs);
  font-weight: 500;
  text-decoration: none;
  padding: 3px 10px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid currentColor;
  color: var(--ds-warn-text);
  transition: background 120ms ease;
  white-space: nowrap;
}
.ds-viewas-banner__exit:hover { background: rgba(245, 158, 11, 0.12); }

/* ============================================================
   Sync-freshness pills (Amo / Payouts / Marketing data age)
   ============================================================ */
.ds-fresh-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--ds-space-3);
}
.ds-fresh-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ds-fresh-pill__age { opacity: 0.65; margin-left: 2px; }
.ds-fresh-pill--ok      { background: var(--ds-success-soft); color: var(--ds-success-text); border-color: rgba(16,185,129,0.18); }
.ds-fresh-pill--warn    { background: var(--ds-warn-soft);    color: var(--ds-warn-text);    border-color: rgba(245,158,11,0.22); }
.ds-fresh-pill--stale   { background: var(--ds-danger-soft);  color: var(--ds-danger-text);  border-color: rgba(239,68,68,0.22); }
.ds-fresh-pill--unknown { background: #F1F5F9;                color: var(--ds-text-muted);   border-color: var(--ds-border); }

.ds-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  margin-bottom: var(--ds-space-2);
}
.ds-topbar-title { display: flex; flex-direction: column; gap: 2px; }
.ds-topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9999px;
  background: var(--ds-bg-elev);
  border: 1px solid rgba(226,232,240,0.8);
  font-size: var(--ds-text-sm);
  color: #334155;
  cursor: pointer;
}
.ds-topbar-btn:hover { background: #F8FAFC; }
.ds-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: var(--ds-bg-elev);
  border: 1px solid rgba(226,232,240,0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  cursor: pointer;
  position: relative;
}
.ds-icon-btn:hover { background: #F8FAFC; }
.ds-badge-count {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--ds-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 9999px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
}

/* ---------- KPI extras (scoped) ---------- */
.ds-page .ds-kpi__icon {
  width: 40px; height: 40px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-page .ds-kpi__spark { height: 36px; margin-top: 6px; }
.ds-page .ds-kpi__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

/* ---------- Tint utilities (scoped) ---------- */
.ds-page .ds-tint-blue    { background: #DBEAFE; color: #2563EB; }
.ds-page .ds-tint-amber   { background: #FEF3C7; color: #D97706; }
.ds-page .ds-tint-violet  { background: #EDE9FE; color: #7C3AED; }
.ds-page .ds-tint-cyan    { background: #CFFAFE; color: #0891B2; }
.ds-page .ds-tint-emerald { background: #D1FAE5; color: #059669; }
.ds-page .ds-tint-rose    { background: #FFE4E6; color: #E11D48; }

/* ---------- Alerts list (scoped) ---------- */
.ds-page .ds-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #F1F5F9;
}
.ds-page .ds-alert:last-child { border-bottom: 0; }
.ds-page .ds-alert-dot {
  width: 28px; height: 28px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-page .ds-alert-body  { flex: 1; min-width: 0; }
.ds-page .ds-alert-title { font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-text); }
.ds-page .ds-alert-sub   { font-size: var(--ds-text-xs); color: var(--ds-text-muted); margin-top: 2px; }
.ds-page .ds-alert-time  { font-size: var(--ds-text-xs); color: var(--ds-text-faint); white-space: nowrap; }

/* ---------- AI helper card (scoped) ---------- */
.ds-page .ds-ai-card {
  background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);
  border: 1px solid #E0E7FF;
  border-radius: 16px;
  padding: var(--ds-space-3);
}
.ds-ai-card {
  background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);
  border: 1px solid #E0E7FF;
  border-radius: 16px;
  padding: 12px;
}

/* ---------- Avatar / status dots (scoped) ---------- */
.ds-page .ds-avatar,
.ds-avatar {
  width: 32px; height: 32px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #E0E7FF, #FCE7F3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  flex-shrink: 0;
  overflow: hidden;
}
.ds-page .ds-avatar-sm,
.ds-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.ds-page .ds-avatar-lg,
.ds-avatar-lg { width: 40px; height: 40px; font-size: 14px; }

.ds-page .ds-dot,
.ds-dot { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; }
.ds-page .ds-dot-online,  .ds-dot-online  { background: var(--ds-success); }
.ds-page .ds-dot-busy,    .ds-dot-busy    { background: var(--ds-warn); }
.ds-page .ds-dot-offline, .ds-dot-offline { background: #CBD5E1; }

/* ---------- Progress bar (scoped) ---------- */
.ds-page .ds-progress {
  background: #E2E8F0;
  border-radius: 9999px;
  overflow: hidden;
  height: 6px;
}
.ds-page .ds-progress-fill {
  background: var(--ds-primary-600);
  height: 100%;
  border-radius: 9999px;
  transition: width .3s;
}
.ds-page .ds-progress-lg { height: 10px; }

/* ---------- Tabs pill (scoped) ---------- */
.ds-page .ds-tabs-pill {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #F1F5F9;
  border-radius: 9999px;
}
.ds-page .ds-tab-pill {
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: var(--ds-text-xs);
  font-weight: 500;
  color: var(--ds-text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.ds-page .ds-tab-pill:hover  { color: var(--ds-text); }
.ds-page .ds-tab-pill.active { background: var(--ds-primary-600); color: #fff; }

/* ---------- Multi-select dropdown (scoped) ---------- */
.ds-page .ds-ms { position: relative; display: inline-block; }
.ds-page .ds-ms > summary {
  list-style: none;
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--ds-border-strong);
  background: var(--ds-bg-elev);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: var(--ds-text-sm);
}
.ds-page .ds-ms > summary::-webkit-details-marker { display: none; }
.ds-page .ds-ms-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--ds-bg-elev);
  border: 1px solid var(--ds-border-strong);
  border-radius: 12px;
  box-shadow: 0 10px 30px -8px rgba(15,23,42,0.18);
  padding: 8px;
}
.ds-page .ds-ms-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.ds-page .ds-ms-opt:hover { background: #F8FAFC; }

/* ---------- Empty state (scoped) ---------- */
.ds-page .ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--ds-text-faint);
  text-align: center;
}
.ds-page .ds-empty-title { font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-text-muted); }
.ds-page .ds-empty-sub   { font-size: var(--ds-text-xs); }

/* ---------- Badge aliases (already partial in prod) ---------- */
.ds-page .ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: var(--ds-text-xs);
  font-weight: 500;
  line-height: 1.4;
}
.ds-page .ds-badge-success { background: var(--ds-success-soft); color: var(--ds-success-text); }
.ds-page .ds-badge-danger  { background: var(--ds-danger-soft);  color: var(--ds-danger-text); }
.ds-page .ds-badge-warning { background: var(--ds-warn-soft);    color: var(--ds-warn-text); }
.ds-page .ds-badge-info    { background: #E0F2FE;                color: #0369A1; }
.ds-page .ds-badge-neutral { background: #F1F5F9;                color: #475569; }

/* ============================================================
   v2.1 additions — 2026-05-27 — tables, charts, pills polish
   Применяется ко всем .ds-page страницам автоматически.
   ============================================================ */

/* ---------- TABLE BASE (any <table> inside .ds-page) ---------- */
.ds-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

/* Headers */
.ds-page table thead th,
.ds-page .pivot-scroll thead th {
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-muted);
  background: var(--ds-card-muted) !important;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--ds-border);
  white-space: nowrap;
}
.ds-page table thead th.num,
.ds-page .pivot-cell.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Body rows */
.ds-page table tbody td,
.ds-page .pivot-scroll tbody td {
  padding: 12px;
  font-size: 13px;
  vertical-align: middle;
  border-bottom: 1px solid var(--ds-divider);
  color: var(--ds-text);
}
.ds-page table tbody tr:last-child td,
.ds-page .pivot-scroll tbody tr:last-child td { border-bottom: 0; }

.ds-page table tbody tr,
.ds-page .pivot-scroll tbody tr {
  transition: background 120ms ease;
}
.ds-page table tbody tr:hover,
.ds-page .pivot-scroll tbody tr:hover {
  background: var(--ds-card-muted);
}
.ds-page table tbody tr:hover .sticky-left,
.ds-page .pivot-scroll tbody tr:hover .sticky-left {
  background: var(--ds-card-muted);
}

/* Zebra (only when explicitly requested) */
.ds-page table.zebra tbody tr:nth-child(even),
.ds-page .pivot-scroll.zebra tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, 0.5);
}

/* Number cells — tabular nums globally */
.ds-page .num,
.ds-page td.num,
.ds-page th.num,
.ds-page .pivot-cell.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Footer (totals) */
.ds-page table tfoot td,
.ds-page .pivot-scroll tfoot td {
  font-weight: 600;
  background: var(--ds-warn-soft);
  border-top: 2px solid #FDE68A;
  color: var(--ds-text);
}

/* Conversion cells — softer fills */
.ds-page .conv-good {
  background: var(--ds-success-soft);
  color: var(--ds-success-text);
  font-weight: 600;
}
.ds-page .conv-bad {
  background: var(--ds-danger-soft);
  color: var(--ds-danger-text);
  font-weight: 600;
}
.ds-page .conv-mid {
  background: transparent;
  color: var(--ds-text-muted);
}

/* ---------- TEAM PILLS (unified) ---------- */
.ds-page .team-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1.4;
  padding: 3px 8px;
  border-radius: 9999px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.ds-page .team-pill.team-1,
.ds-page .team-1  { background: var(--ds-primary-soft); color: #1D4ED8; }
.ds-page .team-pill.team-3,
.ds-page .team-3  { background: var(--ds-warn-soft);    color: var(--ds-warn-text); }
.ds-page .team-pill.team-no,
.ds-page .team-no { background: #F1F5F9;                color: var(--ds-text-muted); }

/* Manager name + ID compact format helper */
.ds-page .mgr-name {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.ds-page .mgr-name-text { font-weight: 500; color: var(--ds-text); }
.ds-page .mgr-id-pill {
  display: inline-block;
  background: #F1F5F9;
  color: var(--ds-text-muted);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}

/* ---------- APEXCHARTS GLOBAL POLISH (CSS overrides) ---------- */
.ds-page .apexcharts-tooltip {
  background: var(--ds-card) !important;
  border: 1px solid var(--ds-border-strong) !important;
  box-shadow: 0 10px 30px -8px rgba(15,23,42,0.18) !important;
  border-radius: var(--ds-radius-md) !important;
  font-family: var(--ds-font-sans, inherit) !important;
}
.ds-page .apexcharts-tooltip-title {
  background: var(--ds-card-muted) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  color: var(--ds-text) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ds-page .apexcharts-xaxis text,
.ds-page .apexcharts-yaxis text {
  fill: var(--ds-text-muted) !important;
  font-size: 11px !important;
  font-family: var(--ds-font-sans, inherit) !important;
}
.ds-page .apexcharts-legend-text {
  color: var(--ds-text-muted) !important;
  font-size: 12px !important;
  font-family: var(--ds-font-sans, inherit) !important;
}
.ds-page .apexcharts-gridline {
  stroke: var(--ds-divider) !important;
}
.ds-page .apexcharts-grid-borders line {
  stroke: var(--ds-border) !important;
}
/* Data labels on bars/columns */
.ds-page .apexcharts-data-labels text {
  font-family: var(--ds-font-sans, inherit) !important;
  font-weight: 500 !important;
}

/* ---------- COMPACT NUMBER FORMATTING ---------- */
.ds-page .num-positive { color: var(--ds-success-text); font-weight: 500; }
.ds-page .num-negative { color: var(--ds-danger-text); font-weight: 500; }
.ds-page .num-zero     { color: var(--ds-text-faint); }

/* ---------- SECTION DIVIDERS (between major page sections) ---------- */
.ds-page .ds-section-divider {
  border-top: 1px solid var(--ds-divider);
  margin: var(--ds-space-6) 0;
}

/* ============================================================
   v2.2 — compact analytics tables  (2026-05-27)
   Аналитические pivot-таблицы (.pivot-scroll и большие <table>
   внутри .ds-page) делаем плотнее, чтобы не приходилось много листать.
   ============================================================ */

/* Pivot-scroll: компактный режим по умолчанию */
.ds-page .pivot-scroll thead th {
  padding: 8px 10px !important;
  font-size: 10px !important;
  letter-spacing: 0.03em;
  line-height: 1.25;
  white-space: normal;       /* allow header wrapping */
  vertical-align: bottom;
  min-width: 0;
}
.ds-page .pivot-scroll tbody td,
.ds-page .pivot-scroll tfoot td {
  padding: 7px 10px !important;
  font-size: 12.5px !important;
  line-height: 1.35;
}
.ds-page .pivot-scroll .pivot-cell {
  padding: 7px 10px !important;
}
.ds-page .pivot-scroll .pivot-cell.num {
  padding: 7px 8px !important;
}

/* Manager name — keep on one line */
.ds-page .mgr-name {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  min-width: 0;
}
.ds-page .pivot-scroll td .mgr-name,
.ds-page .pivot-scroll td a + br + a,
.ds-page .pivot-scroll td > a {
  white-space: nowrap;
}

/* Conversion-cell — slimmer padding so numbers don't drown in color */
.ds-page .conv-good,
.ds-page .conv-bad,
.ds-page .conv-mid {
  padding: 6px 10px !important;
}

/* Sparkline / trend column — small fixed width */
.ds-page .pivot-scroll td:has(.trend-spark),
.ds-page .pivot-scroll td:has([id^="spark-"]) {
  width: 90px;
  padding: 4px 8px !important;
}

/* Tighter row hover (no big paint shift) */
.ds-page .pivot-scroll tbody tr { height: auto; }

/* Manager name format: "Юмбина Елена 36 #36" — make #ID a softer pill */
.ds-page .mgr-id-pill,
.ds-page td .mgr-id {
  font-size: 10px;
  color: var(--ds-text-faint);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: transparent;
  padding: 0;
}

/* Team pill compact in pivot cells */
.ds-page .pivot-scroll td .team-pill {
  font-size: 10px;
  padding: 2px 7px;
  line-height: 1.4;
}

/* Generic .ds-page table compact mode (opt-in) */
.ds-page table.compact thead th { padding: 8px 10px; font-size: 10px; }
.ds-page table.compact tbody td { padding: 7px 10px; font-size: 12.5px; }

/* Sticky header on regular .ds-page tables that have .sticky-thead */
.ds-page table.sticky-thead thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* ============================================================
   v2.3 — form fixes  (2026-05-27)
   - Чекбоксы и радио не должны растягиваться width:100%
     (фикс блока «Назначить нескольким» и т.п.)
   ============================================================ */
.ds-page input[type="checkbox"],
.ds-page input[type="radio"] {
  width: auto !important;
  height: auto !important;
  flex-shrink: 0;
  vertical-align: middle;
  accent-color: var(--ds-primary);
}

/* Чекбокс-список сотрудников — компактная сетка вместо столбика */
.ds-page #batch-emps-list label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--ds-radius-sm);
  font-size: 12px;
  white-space: nowrap;
}
.ds-page #batch-emps-list label:hover {
  background: var(--ds-card-muted);
}
.ds-page #batch-emps-list label span {
  display: inline;
  white-space: nowrap;
}
/* multi-col layout when many employees */
.ds-page #batch-emps-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px;
}

/* Role filter pills */
.ds-page .batch-role-filter + span,
.ds-page .batch-role-filter ~ * {
  white-space: nowrap;
}

/* ============================================================
   v2.4 — manager-card avatars & clickable name affordance
   ============================================================ */

.ds-page .mgr-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.ds-page .mgr-card-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-page .mgr-avatar {
  width: 38px; height: 38px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--ds-primary-soft) 0%, #EDE9FE 100%);
  color: var(--ds-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  border: 1px solid var(--ds-primary-soft);
}

/* Override v2 dashed underline — make the link feel like a button/title */
.ds-page .mgr-name-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-text) !important;
  border-bottom: none !important;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s;
  line-height: 1.2;
}
.ds-page .mgr-name-link:hover {
  color: var(--ds-primary) !important;
}

/* Chevron-right hint after the name (CSS-only, no extra markup) */
.ds-page .mgr-name-link::after {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 2px;
  transition: transform .15s ease, background-image .15s ease;
  opacity: 0.7;
}
.ds-page .mgr-name-link:hover::after {
  transform: translateX(3px);
  opacity: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/* Meta row: id-pill + role + newbie */
.ds-page .mgr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Sharper id-pill (override v2.1) */
.ds-page .mgr-id-pill {
  display: inline-block;
  background: #F1F5F9;
  color: var(--ds-text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}

/* Make the whole manager card feel hoverable (subtle lift) */
.ds-page .amo-card:has(.mgr-name-link):hover {
  border-color: var(--ds-border-strong);
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  transition: border-color .15s, box-shadow .15s;
}

/* ============================================================
   v2.5 — fix nested label flex-direction (2026-05-28)
   В checklist.html / shifts.html правило `.assign-block .create-form label
   { flex-direction: column }` рекурсивно ловит чекбоксы внутри #batch-emps-list
   и .role-filter-row. Принудительно делаем их row.
   ============================================================ */
.ds-page #batch-emps-list label,
.ds-page .role-filter-row label,
.ds-page .emp-list label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  padding: 4px 8px;
  border-radius: var(--ds-radius-sm);
  font-size: 12px;
  color: var(--ds-text);
  cursor: pointer;
}
.ds-page #batch-emps-list label:hover,
.ds-page .emp-list label:hover,
.ds-page .role-filter-row label:hover {
  background: var(--ds-card-muted);
}
.ds-page #batch-emps-list label > input[type="checkbox"],
.ds-page .role-filter-row label > input[type="checkbox"],
.ds-page .emp-list label > input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
}
.ds-page #batch-emps-list label > span,
.ds-page .emp-list label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  white-space: nowrap;
}
/* Name span (first) takes priority, role/team can be hidden if no room */
.ds-page #batch-emps-list label > span:first-of-type,
.ds-page .emp-list label > span:first-of-type {
  font-weight: 500;
  color: var(--ds-text);
  flex-shrink: 1;
}
.ds-page #batch-emps-list label > span.amo-muted,
.ds-page .emp-list label > span.amo-muted {
  flex-shrink: 100;
  font-size: 11px;
}

/* Tighter grid for emp-list — fit ~8 in a row */
.ds-page #batch-emps-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2px;
}

/* ============================================================
   v2.6 — mobile baseline (2026-05-28)
   Min support: 320px (старые iPhone SE).
   Sidebar off-canvas + burger header <1024px.
   Этот блок ПЕРЕОПРЕДЕЛЯЕТ некоторые правила v1-v2.5 для узких экранов.
   ============================================================ */

/* Mobile header & burger — hidden on desktop */
.ds-mobile-header { display: none; }
.ds-burger {
  width: 36px; height: 36px;
  border-radius: 9999px;
  background: var(--ds-bg-elev);
  border: 1px solid var(--ds-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ds-text);
  padding: 0;
}
.ds-burger:hover { background: var(--ds-card-muted); }
.ds-sidebar-backdrop { display: none; }

/* ===================== DESKTOP (≥1024px) ===================== */
/* leave existing behavior; just reduce hard min-width from 1440 to 1280 */
@media (min-width: 1024px) {
  body, .ds-app { min-width: 1280px; }
}

/* ===================== TABLET + PHONE (<1024px) ===================== */
@media (max-width: 1023.98px) {
  body, .ds-app {
    min-width: 0 !important;
    width: 100%;
  }

  /* Mobile header shown */
  .ds-mobile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    padding: 0 16px;
    background: var(--ds-bg-elev);
    border-bottom: 1px solid var(--ds-border);
    z-index: 50;
  }
  .ds-mobile-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }

  /* Sidebar off-canvas */
  .ds-sidebar {
    position: fixed !important;
    top: 0; left: 0;
    width: 260px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 100;
    box-shadow: 0 10px 40px -8px rgba(15, 23, 42, 0.25);
    border-right: 1px solid var(--ds-border);
  }
  .ds-app.ds-app--open .ds-sidebar { transform: translateX(0); }

  /* Backdrop visible when sidebar open */
  .ds-app.ds-app--open .ds-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 99;
    -webkit-tap-highlight-color: transparent;
  }

  /* Main content gets top padding for mobile header */
  .ds-main {
    padding: 16px;
    padding-top: 68px;
    width: 100%;
    min-width: 0;
  }
}

/* ===================== PHONE (<640px) — стэк всё ===================== */
@media (max-width: 639.98px) {
  .ds-main { padding: 12px; padding-top: 64px; }

  /* Sidebar чуть шире для удобства тапа */
  .ds-sidebar { width: min(280px, 85vw); }

  /* All Tailwind responsive grid utilities collapse to 1 col */
  .ds-page [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
  }

  /* Specific named grids that exist on managers pages */
  .ds-page .kpi-grid,
  .ds-page .create-form,
  .ds-page #batch-form,
  .ds-page #single-form {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Buttons full-width for thumb taps */
  .ds-page .amo-accent,
  .ds-page .m-accent,
  .ds-page .ds-btn-primary,
  .ds-page button[type="submit"]:not(.ds-icon-btn) {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    justify-content: center;
  }
  /* Inline buttons in toolbars should not stretch */
  .ds-page .pivot-toolbar button,
  .ds-page .ds-tabs button,
  .ds-page .ds-tabs a {
    width: auto !important;
  }

  /* Tables wrap in horizontal scroll */
  .ds-page .pivot-scroll,
  .ds-page .table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .ds-page table {
    min-width: 600px;   /* force horizontal scroll on narrow */
  }

  /* Cards чуть плотнее */
  .ds-page .amo-card,
  .ds-page .ds-card {
    padding: 14px;
    border-radius: 12px;
  }
  .ds-page .amo-card-tight {
    padding: 12px;
  }

  /* Headers смягчаем */
  .ds-page .ds-h1,
  .ds-page .ds-page-title { font-size: 20px; line-height: 1.2; }
  .ds-page .ds-h2 { font-size: 16px; }

  /* Tabs горизонтальный скролл */
  .ds-page .ds-tabs--underline,
  .ds-page .proj-tab-row,
  .ds-page .preset-row {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  .ds-page .proj-tab,
  .ds-page .preset-btn {
    flex-shrink: 0;
  }

  /* Employee chips — 1 column, bigger tap area */
  .ds-page #batch-emps-list {
    grid-template-columns: 1fr !important;
  }
  .ds-page #batch-emps-list label,
  .ds-page .emp-list label {
    padding: 10px 12px !important;
    font-size: 13px;
    min-height: 40px;   /* touch target */
  }

  /* Manager cards (checklist) — single column with avatar still left */
  .ds-page .mgr-card-head { gap: 10px; }
  .ds-page .mgr-avatar { width: 36px; height: 36px; font-size: 12px; }
  .ds-page .mgr-name-link { font-size: 14px; }

  /* Calendar (managers_checklist & managers_my_shifts) — fixed compact */
  .ds-page .calendar-grid,
  .ds-page table.calendar {
    table-layout: fixed;
    width: 100%;
    min-width: 0 !important;   /* override horizontal-scroll min-width */
  }
  .ds-page .calendar-grid td,
  .ds-page .calendar-grid th,
  .ds-page table.calendar td,
  .ds-page table.calendar th {
    padding: 4px 2px !important;
    font-size: 11px !important;
    text-align: center;
    height: 40px;
  }

  /* Status badges and pills wrap nicely */
  .ds-page .status-pill,
  .ds-page .team-pill,
  .ds-page .role-pill { font-size: 10px; padding: 2px 7px; }

  /* Topbar/page-head: stack actions below title */
  .ds-page .ds-page-head,
  .ds-page .ds-topbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .ds-page .ds-topbar > div:last-child,
  .ds-page .ds-page-head > div:last-child {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Make filter forms readable */
  .ds-page form.amo-card .grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===================== VERY-SMALL PHONE (<360px) ===================== */
@media (max-width: 359.98px) {
  .ds-main { padding: 10px; padding-top: 62px; }
  .ds-page .calendar-grid td,
  .ds-page .calendar-grid th,
  .ds-page table.calendar td,
  .ds-page table.calendar th {
    padding: 3px 1px !important;
    font-size: 10px !important;
    height: 36px;
  }
  .ds-page .amo-card { padding: 12px; }
}

/* ============================================================
   v2.7 — Inter font + softer radii + lift shadow (2026-05-28)
   Подтягивает mhrai-admin к WorkForce OS feel:
   • Inter вместо system-sans
   • radius-lg 16→18, radius-md 12→14
   • Карточки получают двойную тень (shadow-sm + lift)
   ============================================================ */

:root {
  --ds-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ds-radius-lg: 18px;
  --ds-radius-md: 14px;
  --ds-shadow-lift: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
}

html, body, .ds-page, .ds-app, .ds-sidebar, .ds-main {
  font-family: var(--ds-font-sans);
  letter-spacing: -0.005em;
}

/* Card shadow lift — apply to all main card variants */
.ds-page .amo-card,
.ds-page .ds-card,
.ds-page .m-card {
  box-shadow: var(--ds-shadow-lift);
  border-radius: 18px;
}
.ds-page .amo-card-tight,
.ds-page .ds-sub-card,
.ds-page .m-card-tight {
  border-radius: 14px;
}
.ds-page .pivot-scroll {
  border-radius: 18px;
}

/* Inputs/select — match new radius scale */
.ds-page .ds-input,
.ds-page .ds-select,
.ds-page input[type="date"],
.ds-page input[type="text"],
.ds-page input[type="number"],
.ds-page input[type="month"],
.ds-page input[type="time"],
.ds-page select {
  border-radius: 12px;
}

/* Buttons — slightly softer */
.ds-page .ds-btn,
.ds-page .ds-btn-primary,
.ds-page .amo-accent,
.ds-page .m-accent {
  border-radius: 12px;
}

/* Pills — keep round (9999) */

/* ============================================================
   v2.8 — Workforce OS hard apply (2026-05-28)
   Перебиваем все legacy литеральные значения через !important.
   Точные токены из брифа Тимофея.
   ============================================================ */

:root {
  /* Workforce OS exact palette */
  --ds-primary:        #2563EB !important;
  --ds-primary-600:    #1D4ED8 !important;
  --ds-primary-soft:   #DBEAFE !important;

  --ds-success:        #22C55E !important;
  --ds-success-soft:   #DCFCE7 !important;
  --ds-success-text:   #15803D !important;

  --ds-warn:           #F59E0B !important;
  --ds-warn-soft:      #FEF3C7 !important;
  --ds-warn-text:      #B45309 !important;

  --ds-danger:         #EF4444 !important;
  --ds-danger-soft:    #FEE2E2 !important;
  --ds-danger-text:    #B91C1C !important;

  --ds-bg:             #F7F8FA !important;
  --ds-bg-elev:        #FFFFFF !important;
  --ds-card:           #FFFFFF !important;
  --ds-border:         #E5E7EB !important;
  --ds-border-strong:  #D1D5DB !important;
  --ds-divider:        #F1F5F9 !important;
  --ds-text:           #111827 !important;
  --ds-text-muted:     #6B7280 !important;
  --ds-text-faint:    #9CA3AF !important;

  --ds-radius-lg:      18px !important;
  --ds-radius-md:      14px !important;
  --ds-radius-sm:      10px !important;

  --ds-shadow-sm:      0 1px 2px rgba(15, 23, 42, 0.04) !important;
  --ds-shadow-lift:    0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px -4px rgba(15, 23, 42, 0.08) !important;

  --ds-font-sans:      'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

/* Force Inter globally */
html, body,
.ds-page, .ds-page *, .ds-app, .ds-sidebar, .ds-main {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.005em;
}

/* Force body background */
body { background: #F7F8FA !important; }

/* Force 18px radius on all major cards */
.ds-page .amo-card,
.ds-page .ds-card,
.ds-page .m-card,
.ds-page .kpi-card,
.ds-card,
.amo-card {
  border-radius: 18px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px -4px rgba(15, 23, 42, 0.08) !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
}

.ds-page .amo-card-tight,
.ds-page .ds-sub-card,
.ds-page .m-card-tight {
  border-radius: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
}

/* Pivot-scroll wrap also rounded */
.ds-page .pivot-scroll {
  border-radius: 18px !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  overflow: hidden;
}
.ds-page .pivot-scroll table { border-radius: 18px; }

/* Inputs/selects — softer */
.ds-page .ds-input,
.ds-page .ds-select,
.ds-page input[type="date"],
.ds-page input[type="text"],
.ds-page input[type="number"],
.ds-page input[type="month"],
.ds-page input[type="time"],
.ds-page select,
.ds-input,
.ds-select {
  border-radius: 12px !important;
  border: 1px solid #E5E7EB !important;
  background: #FFFFFF !important;
}

/* Buttons */
.ds-page .ds-btn,
.ds-page .amo-accent,
.ds-page .m-accent,
.ds-page .ds-btn-primary {
  border-radius: 12px !important;
}
.ds-page .amo-accent,
.ds-page .m-accent,
.ds-page .ds-btn-primary {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
}
.ds-page .amo-accent:hover,
.ds-page .m-accent:hover,
.ds-page .ds-btn-primary:hover {
  background: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
}

/* Sidebar nav active = Linear style (light-blue bg + blue text) */
.ds-nav-item.active {
  background: #EFF6FF !important;
  color: #2563EB !important;
  border-radius: 12px;
}
.ds-nav-item.active svg { color: #2563EB !important; }

/* Status chips/pills (Workforce OS palette) */
.ds-page .ds-pill-success,
.ds-page .pill-success,
.ds-page .conv-good {
  background: #DCFCE7 !important;
  color: #15803D !important;
}
.ds-page .ds-pill-warning,
.ds-page .pill-warning {
  background: #FEF3C7 !important;
  color: #B45309 !important;
}
.ds-page .ds-pill-danger,
.ds-page .pill-danger,
.ds-page .conv-bad {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
}
.ds-page .ds-pill-primary,
.ds-page .pill-primary {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}

/* H1 / page title */
.ds-page .ds-h1,
.ds-page .ds-page-title,
.ds-page h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
}
.ds-page .ds-h2,
.ds-page h2 {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

/* Larger spacing on cards */
.ds-page .amo-card { padding: 24px !important; }
.ds-page .amo-card-tight { padding: 16px !important; }

/* ============================================================
   M1 — SHIFTS WORKSPACE shell
   ============================================================
   Page layout for /managers/checklist (operational workspace).
   topbar + toolbar + stats + content area, all flowing inside .ds-main.
   Сами view-partials (Calendar/Table/Timeline/Employee) добавляются в M2-M6.
*/

:root {
  --ds-drawer-w:     440px;
  --ds-topbar-h:     56px;
  --ds-toolbar-h:    60px;
  --ds-stats-h:      72px;
  --ds-row-compact:  64px;
  --ds-cell-w:       64px;
  --ds-cell-h:       48px;
}

.ds-workspace {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: calc(-1 * var(--ds-space-6)) calc(-1 * var(--ds-space-8));
  min-height: calc(100vh - 0px);
}

.ds-workspace-topbar,
.ds-workspace-toolbar,
.ds-workspace-stats {
  position: sticky;
  z-index: 30;
  background: var(--ds-bg);
  padding: 10px var(--ds-space-8);
  border-bottom: 1px solid var(--ds-border);
}
.ds-workspace-topbar  { top: 0;                                              min-height: var(--ds-topbar-h); }
.ds-workspace-toolbar { top: var(--ds-topbar-h);                             min-height: var(--ds-toolbar-h); }
.ds-workspace-stats   { top: calc(var(--ds-topbar-h) + var(--ds-toolbar-h)); min-height: var(--ds-stats-h); }

.ds-workspace-topbar__row,
.ds-workspace-toolbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  width: 100%;
  height: 100%;
}
.ds-workspace-topbar__filters,
.ds-workspace-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ds-workspace-toolbar__indicators {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ds-workspace-content {
  flex: 1;
  padding: var(--ds-space-5) var(--ds-space-8) var(--ds-space-8);
  min-width: 0;
}

/* ============================================================
   Segmented control (view switcher: Calendar / Table / Timeline / Employee)
   ============================================================ */
.ds-segmented {
  display: inline-flex;
  background: #F1F5F9;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: 3px;
  gap: 2px;
}
.ds-segmented__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: var(--ds-text-sm);
  font-weight: 500;
  color: var(--ds-text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: all 120ms ease;
  white-space: nowrap;
  background: transparent;
  border: none;
}
.ds-segmented__item:hover { color: var(--ds-text); }
.ds-segmented__item.active {
  background: var(--ds-card);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-xs);
}
.ds-segmented__item .ds-segmented__icon { width: 14px; height: 14px; }

/* ============================================================
   Action toolbar — buttons + indicators
   ============================================================ */
.ds-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-sm);
  font-weight: 500;
  background: var(--ds-card);
  border: 1px solid var(--ds-border-strong);
  color: var(--ds-text);
  cursor: pointer;
  text-decoration: none;
  transition: all 120ms ease;
}
.ds-action-btn:hover { background: #F8FAFC; border-color: rgba(15,23,42,0.18); }
.ds-action-btn--primary {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
}
.ds-action-btn--primary:hover { background: var(--ds-primary-600); border-color: var(--ds-primary-600); }
.ds-action-btn--urgent {
  background: var(--ds-danger-soft);
  border-color: rgba(239,68,68,0.25);
  color: var(--ds-danger-text);
}
.ds-action-btn--urgent:hover { background: #FEE2E2; }
.ds-action-btn__icon { width: 14px; height: 14px; }

/* Compact indicator pill (e.g. "⚠ 3 риска", "🕓 5 ждут", "📥 2 запроса") */
.ds-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
}
.ds-indicator:hover { transform: translateY(-1px); }
.ds-indicator__icon { width: 12px; height: 12px; }
.ds-indicator--risk     { background: var(--ds-warn-soft);    color: var(--ds-warn-text);    border-color: rgba(245,158,11,0.22); }
.ds-indicator--pending  { background: #EFF6FF;                color: #1D4ED8;                border-color: rgba(59,130,246,0.20); }
.ds-indicator--requests { background: var(--ds-primary-soft); color: #1D4ED8;                border-color: rgba(59,130,246,0.20); }
.ds-indicator--ok       { background: var(--ds-success-soft); color: var(--ds-success-text); border-color: rgba(16,185,129,0.20); }

/* ============================================================
   Mini stats strip — 5 horizontal compact metrics
   ============================================================ */
.ds-stats-strip {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 12px 0 16px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 10px;
}
.ds-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ds-stat__icon {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-md);
  background: #F1F5F9;
  color: var(--ds-text-muted);
  flex-shrink: 0;
}
.ds-stat__icon svg { width: 18px; height: 18px; }
.ds-stat__body { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.ds-stat__value {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}
.ds-stat__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.ds-stat--success .ds-stat__icon { background: var(--ds-success-soft); color: var(--ds-success-text); }
.ds-stat--warn    .ds-stat__icon { background: var(--ds-warn-soft);    color: var(--ds-warn-text); }
.ds-stat--danger  .ds-stat__icon { background: var(--ds-danger-soft);  color: var(--ds-danger-text); }
.ds-stat--primary .ds-stat__icon { background: var(--ds-primary-soft); color: #1D4ED8; }

/* Compact filter control (Date / Team / Project / Manager dropdowns in topbar) */
.ds-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  font-size: var(--ds-text-sm);
  color: var(--ds-text);
  cursor: pointer;
  transition: border-color 120ms ease;
  text-decoration: none;
}
.ds-filter:hover { border-color: var(--ds-border-strong); }
.ds-filter__icon  { width: 14px; height: 14px; color: var(--ds-text-muted); }
.ds-filter__chev  { width: 12px; height: 12px; color: var(--ds-text-faint); margin-left: 2px; }
.ds-filter--input { padding: 0 10px; }
.ds-filter--input input {
  border: none; outline: none; background: transparent;
  font-size: var(--ds-text-sm); color: var(--ds-text); width: 160px;
}
.ds-filter--input input::placeholder { color: var(--ds-text-faint); }

/* ============================================================
   Drawer skeleton (M3 will wire HTMX content)
   ============================================================ */
.ds-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--ds-drawer-w), 100vw);
  background: var(--ds-card);
  border-left: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-lg);
  z-index: 60;
  transform: translateX(100%);
  transition: transform 220ms var(--ds-ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ds-drawer--open { transform: translateX(0); }
.ds-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.25);
  backdrop-filter: blur(2px);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ds-ease);
}
.ds-drawer-backdrop--open {
  opacity: 1;
  pointer-events: auto;
}
.ds-drawer-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-text-faint);
  font-size: var(--ds-text-sm);
}

@media (max-width: 768px) {
  .ds-drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 85vh;
    border-left: none;
    border-top: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
    transform: translateY(100%);
  }
  .ds-drawer--open { transform: translateY(0); }
}

/* ============================================================
   Inline analytics sub-nav — restored after sidebar consolidation
   Used inside _analytics_subnav.html partial for 4 analytics templates.
   ============================================================ */
.ds-subnav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin: 0 0 var(--ds-space-5);
  background: #F1F5F9;
  border-radius: var(--ds-radius-md);
  width: fit-content;
}
.ds-subnav__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: var(--ds-text-sm);
  font-weight: 500;
  color: var(--ds-text-muted);
  text-decoration: none;
  transition: all 120ms ease;
}
.ds-subnav__item:hover { color: var(--ds-text); }
.ds-subnav__item.active {
  background: var(--ds-card);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-xs);
}

/* Workspace shell adapts to mobile: drop horizontal padding, kill sticky */
@media (max-width: 768px) {
  .ds-workspace { margin: 0; }
  .ds-workspace-topbar,
  .ds-workspace-toolbar,
  .ds-workspace-stats { padding-left: var(--ds-space-4); padding-right: var(--ds-space-4); }
  .ds-workspace-content { padding: var(--ds-space-4); }
}

/* ============================================================
   WORKSPACE SHELL — M1 (Smены operational workspace)
   /managers/checklist превращается в operational console:
   sticky topbar (filters + view switcher) + action toolbar + mini stats strip +
   swap-target content area + right-side drawer.
   ============================================================ */

:root {
  --ds-drawer-w:    440px;
  --ds-topbar-h:    56px;
  --ds-toolbar-h:   64px;
  --ds-stats-h:     60px;
  --ds-row-compact: 64px;
  --ds-cell-w:      64px;
  --ds-cell-h:      48px;
}

.ds-workspace {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: calc(100vh - var(--ds-space-6) * 2);
  margin: calc(var(--ds-space-6) * -1) calc(var(--ds-space-8) * -1);
  background: var(--ds-bg);
}

/* --- 1. STICKY TOPBAR --- */
.ds-workspace-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  height: var(--ds-topbar-h);
  padding: 0 var(--ds-space-6);
  background: var(--ds-bg-elev);
  border-bottom: 1px solid var(--ds-border);
}
.ds-workspace-topbar__title {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 16px; font-weight: 600; color: var(--ds-text);
  letter-spacing: -0.01em;
}
.ds-workspace-topbar__title small {
  font-size: 12px; font-weight: 500; color: var(--ds-text-muted);
}
.ds-workspace-topbar__filters {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap; overflow-x: auto;
}
.ds-workspace-topbar__filters > * { flex-shrink: 0; }

/* compact field used inside topbar (date, select, search) */
.ds-field {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-card);
  color: var(--ds-text);
  font-size: 13px;
  transition: border-color 120ms, box-shadow 120ms;
}
.ds-field:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.ds-field--search {
  padding-left: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%2364748B' stroke-width='2'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 8px center;
  min-width: 200px;
}

/* --- VIEW SWITCHER (segmented control) --- */
.ds-segmented {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  background: #F1F5F9;
  border-radius: var(--ds-radius-md);
  gap: 2px;
}
.ds-segmented__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-text-muted);
  cursor: pointer;
  border: none;
  background: transparent;
  text-decoration: none;
  transition: background 120ms, color 120ms;
  white-space: nowrap;
}
.ds-segmented__item:hover { color: var(--ds-text); }
.ds-segmented__item.active {
  background: var(--ds-card);
  color: var(--ds-text);
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
.ds-segmented__item-icon { width: 14px; height: 14px; }

/* --- 2. ACTION TOOLBAR --- */
.ds-workspace-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  min-height: var(--ds-toolbar-h);
  padding: 12px var(--ds-space-6);
  background: var(--ds-bg-elev);
  border-bottom: 1px solid var(--ds-border);
}
.ds-workspace-toolbar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-workspace-toolbar__indicators { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* action button used inside toolbar */
.ds-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--ds-radius-md);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--ds-border-strong);
  background: var(--ds-card);
  color: var(--ds-text);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.ds-action-btn:hover  { background: #F8FAFC; border-color: rgba(15,23,42,0.18); }
.ds-action-btn:active { transform: translateY(1px); }
.ds-action-btn--primary {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
}
.ds-action-btn--primary:hover {
  background: var(--ds-primary-600);
  border-color: var(--ds-primary-600);
}
.ds-action-btn__icon { width: 16px; height: 16px; }

/* (M2.5 dedupe) .ds-indicator-pill — canonical definition lives later in file
   (search for "Indicator pills" comment). First block removed 2026-05-28 per
   M2.5 cleanup note: cascade was overriding it anyway, kept --neutral intent
   merged into the surviving block. */

/* --- 3. MINI STATS STRIP --- */
.ds-stats-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin: 12px 0 16px;
  background: #FFFFFF;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 10px;
  overflow-x: auto;
}
.ds-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 18px;
  border-right: 1px solid var(--ds-divider);
  white-space: nowrap;
}
.ds-stat:first-child { padding-left: 0; }
.ds-stat:last-child  { border-right: none; padding-right: 0; }
.ds-stat__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-stat__icon svg { width: 15px; height: 15px; }
.ds-stat__icon--primary { background: var(--ds-primary-soft); color: var(--ds-primary-600); }
.ds-stat__icon--success { background: var(--ds-success-soft); color: var(--ds-success-text); }
.ds-stat__icon--warn    { background: var(--ds-warn-soft);    color: var(--ds-warn-text); }
.ds-stat__icon--danger  { background: var(--ds-danger-soft);  color: var(--ds-danger-text); }
.ds-stat__icon--neutral { background: #F1F5F9;                color: var(--ds-text-muted); }
.ds-stat__body  { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ds-stat__value { font-size: 16px; font-weight: 600; color: var(--ds-text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ds-stat__label { font-size: 11px; font-weight: 500; color: var(--ds-text-muted); letter-spacing: 0.02em; line-height: 1.2; }

/* --- 4. WORKSPACE CONTENT AREA (HTMX swap target) --- */
.ds-workspace-content {
  flex: 1;
  padding: var(--ds-space-5) var(--ds-space-6);
  min-width: 0;
}
.ds-workspace-content--legacy {
  /* M1 transitional: existing content lives here unwrapped. M2 replaces with Calendar view. */
  display: block;
}

/* --- 5. RIGHT-SIDE DRAWER (M3 will populate) --- */
.ds-drawer {
  position: fixed;
  top: 0; right: 0;
  width: var(--ds-drawer-w);
  max-width: 100vw;
  height: 100vh;
  background: var(--ds-card);
  border-left: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-lg);
  transform: translateX(100%);
  transition: transform 200ms var(--ds-ease);
  z-index: 60;
  overflow-y: auto;
}
/* BUG6 fix: removed auto-open by :not(:empty) — drawer OFF-CANVAS by default */
.ds-drawer.ds-drawer--open       { transform: translateX(0); }
.ds-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ds-ease);
  z-index: 55;
}
.ds-drawer-backdrop.ds-drawer-backdrop--open {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 768px) {
  .ds-drawer {
    width: 100vw;
    height: 88vh;
    top: auto;
    bottom: 0;
    border-left: none;
    border-top: 1px solid var(--ds-border);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  /* BUG6: removed mobile auto-open by :not(:empty) */
  .ds-drawer.ds-drawer--open { transform: translateY(0); }
}

/* --- Workspace responsive tweaks --- */
@media (max-width: 1024px) {
  .ds-workspace {
    margin: 0;
  }
  .ds-workspace-topbar,
  .ds-workspace-toolbar,
  .ds-stats-strip,
  .ds-workspace-content { padding-left: var(--ds-space-4); padding-right: var(--ds-space-4); }
  .ds-workspace-topbar { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; gap: 8px; }
}

/* Inline analytics sub-nav (replaces sidebar children for analytics pages) */
.ds-subnav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--ds-space-4);
  border-bottom: 1px solid var(--ds-border);
  padding-bottom: 0;
  overflow-x: auto;
}
.ds-subnav__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin-bottom: -1px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-text-muted);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms, border-color 120ms;
}
.ds-subnav__item:hover { color: var(--ds-text); }
.ds-subnav__item.active {
  color: var(--ds-text);
  border-bottom-color: var(--ds-primary);
}
.ds-subnav__icon { width: 14px; height: 14px; }

/* ============================================================
   M2 — CALENDAR VIEW (operational workspace)
   ============================================================
   Compact employee × day grid for /managers/checklist?view=calendar.
   Used by partials/_workspace_calendar.html.
   Color system: 6 operational states (NO rainbow).
*/

.ds-cal {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
}

.ds-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
}
.ds-cal__head-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-cal__head-month {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ds-text);
}
.ds-cal__head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-cal__nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Scroll container — horizontal overflow only, sticky left identity column survives */
.ds-cal__scroll {
  width: 100%;
  overflow-x: auto;
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
}

/* Table layout — sticky thead + first column */
.ds-cal__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--ds-text-sm);
  table-layout: fixed;
}

.ds-cal__row {
  height: var(--ds-row-compact);
}
.ds-cal__row:nth-child(even) td:not(.ds-cal__td-employee) {
  background: rgba(248, 250, 252, 0.5);
}
.ds-cal__row:hover td { background: #F8FAFC; }
.ds-cal__row:hover .ds-cal__td-employee { background: #F1F5F9; }

/* Header cells */
.ds-cal__th-employee,
.ds-cal__th-day {
  position: sticky;
  top: 0;
  background: var(--ds-card-muted);
  border-bottom: 1px solid var(--ds-border);
  font-weight: 500;
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-muted);
  z-index: 4;
  padding: 8px 6px;
  text-align: center;
  white-space: nowrap;
}
.ds-cal__th-employee {
  position: sticky;
  left: 0;
  z-index: 6;
  text-align: left;
  padding-left: 14px;
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  background: var(--ds-card-muted);
  box-shadow: 1px 0 0 var(--ds-border);
}
.ds-cal__th-day {
  width: var(--ds-cell-w);
  min-width: var(--ds-cell-w);
  max-width: var(--ds-cell-w);
}
.ds-cal__th-day--weekend { color: var(--ds-text-faint); background: #F4F6FB; }
.ds-cal__th-day--today { position: relative; }
.ds-cal__th-dow {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ds-text-faint);
}
.ds-cal__th-num {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  width: 26px; height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  transition: background 120ms ease, color 120ms ease;
}
/* Per Тимофей reference: today = blue filled circle around day number */
.ds-cal__th-day--today .ds-cal__th-num {
  background: var(--ds-primary);
  color: #ffffff;
}

/* Body cells */
.ds-cal__td-employee {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--ds-card);
  border-bottom: 1px solid var(--ds-divider);
  padding: 8px 14px;
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  vertical-align: middle;
  box-shadow: 1px 0 0 var(--ds-border);
}
.ds-cal__td-day {
  border-bottom: 1px solid var(--ds-divider);
  padding: 4px;
  vertical-align: top;
  text-align: center;
}

/* ============================================================
   Employee identity tag (sticky left)
   ============================================================ */
.ds-emp-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ds-emp-tag__avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ds-primary-soft);
  color: var(--ds-primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ds-emp-tag__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
  flex: 1;
}
.ds-emp-tag__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.ds-emp-tag__name:hover { color: var(--ds-primary-600); }
.ds-emp-tag__role {
  font-size: 11px;
  color: var(--ds-text-muted);
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds-emp-tag__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-emp-tag__dot--ok   { background: var(--ds-success); }
.ds-emp-tag__dot--warn { background: var(--ds-warn); }
.ds-emp-tag__dot--bad  { background: var(--ds-danger); }

/* ============================================================
   Shift cell — 6 operational states (NO rainbow)
   ============================================================ */
.ds-shift-cell {
  position: relative;
  width: 56px;
  height: 48px;
  border-radius: 8px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 80ms var(--ds-ease), box-shadow 80ms var(--ds-ease);
  border: 1px solid transparent;
  color: var(--ds-text);
  margin: 0 auto;
  box-sizing: border-box;
}
.ds-shift-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15,23,42,0.08);
  z-index: 3;
}
.ds-shift-cell--today {
  outline: 2px solid var(--ds-primary);
  outline-offset: -1px;
}
.ds-shift-cell__hours {
  line-height: 1.1;
  font-size: 10px;
  font-weight: 600;
  color: inherit;
}
.ds-shift-cell__markers {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  min-height: 8px;
}

/* === 8-STATE PALETTE (per reference: 2 green shades for assigned vs confirmed,
   blue active, amber waiting, red issue, purple/red-soft/gray for absences) === */
/* Назначена — light green */
.ds-shift-cell--assigned,
.ds-shift-cell--scheduled,
.ds-shift-cell--draft {
  background: #ECFDF5;            /* very soft mint */
  color: #047857;
  border-color: rgba(16,185,129,0.16);
}
/* Подтверждена — bright green */
.ds-shift-cell--confirmed,
.ds-shift-cell--success,
.ds-shift-cell--verified,
.ds-shift-cell--paid {
  background: #BBF7D0;            /* saturated green */
  color: #166534;
  border-color: rgba(22,101,52,0.16);
}
.ds-shift-cell--in_progress,
.ds-shift-cell--active,
.ds-shift-cell--progress {
  background: var(--ds-primary-soft);
  color: #1D4ED8;
  border-color: rgba(59,130,246,0.22);
}
.ds-shift-cell--waiting,
.ds-shift-cell--partial {
  background: var(--ds-warn-soft);
  color: var(--ds-warn-text);
  border-color: rgba(245,158,11,0.22);
}
.ds-shift-cell--issue,
.ds-shift-cell--failed {
  background: var(--ds-danger-soft);
  color: var(--ds-danger-text);
  border-color: rgba(239,68,68,0.22);
}
/* Absence base — variants override below */
.ds-shift-cell--absence,
.ds-shift-cell--vacation,
.ds-shift-cell--abs-vacation {
  background: var(--ds-purple-soft);
  color: var(--ds-purple-text);
  border-color: rgba(168,85,247,0.20);
}
.ds-shift-cell--sick,
.ds-shift-cell--abs-sick {
  background: #FFE4E6;             /* peach/red-soft per reference */
  color: #9F1239;
  border-color: rgba(225,29,72,0.18);
}
.ds-shift-cell--abs-dayoff,
.ds-shift-cell--abs-unavailable,
.ds-shift-cell--abs-personal {
  background: #F1F5F9;
  color: var(--ds-text-muted);
  border-color: var(--ds-border);
}
.ds-shift-cell--empty {
  background: transparent;
  color: transparent;
  border-color: transparent;
  cursor: default;
  position: relative;
}
.ds-shift-cell--empty:hover { transform: none; box-shadow: none; }
.ds-shift-cell--empty::after {
  content: "";
  display: block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ds-text-faint);
  opacity: 0.22;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}

/* Absence label text — visible label like "Отпуск" / "Больн." centered */
.ds-shift-cell__abs-label {
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  letter-spacing: -0.005em;
  line-height: 1.1;
  padding: 0 2px;
}

/* Corner markers (12×12 dots) */
.ds-cell-marker {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  font-size: 0;
  vertical-align: middle;
}
.ds-cell-marker--comment { background: var(--ds-primary); }
.ds-cell-marker--partial { background: var(--ds-warn); }
.ds-cell-marker--risk    { background: var(--ds-danger); }

/* ============================================================
   Legend (compact swatches below grid)
   ============================================================ */
.ds-cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 0 4px;
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}
.ds-cal__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.ds-legend-swatch--assigned    { background: #ECFDF5;                border-color: rgba(16,185,129,0.30); }
.ds-legend-swatch--confirmed   { background: #BBF7D0;                border-color: rgba(22,101,52,0.30); }
.ds-legend-swatch--in_progress { background: var(--ds-primary-soft); border-color: rgba(59,130,246,0.30); }
.ds-legend-swatch--waiting     { background: var(--ds-warn-soft);    border-color: rgba(245,158,11,0.30); }
.ds-legend-swatch--issue       { background: var(--ds-danger-soft);  border-color: rgba(239,68,68,0.30); }
.ds-legend-swatch--vacation,
.ds-legend-swatch--absence     { background: var(--ds-purple-soft);  border-color: rgba(168,85,247,0.30); }
.ds-legend-swatch--sick        { background: #FFE4E6;                border-color: rgba(225,29,72,0.30); }
.ds-legend-swatch--dayoff,
.ds-legend-swatch--empty       { background: #F1F5F9;                border-color: var(--ds-border); }

/* Legacy toggle (for opening old cards/all-shifts panel during transition) */
.ds-cal__legacy-toggle {
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  padding: 8px 14px;
  background: var(--ds-card-muted);
}
.ds-cal__legacy-toggle[open] { background: var(--ds-card); }

/* ============================================================
   View-stub (Table/Timeline/Employee — M2 placeholders)
   ============================================================ */
.ds-view-stub {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: 56px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: var(--ds-shadow-sm);
}
.ds-view-stub__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--ds-card-muted);
  color: var(--ds-text-faint);
}
.ds-view-stub__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ds-text);
}
.ds-view-stub__caption {
  font-size: 13px;
  color: var(--ds-text-muted);
  line-height: 1.5;
  max-width: 520px;
}
.ds-view-stub__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-primary-soft);
  color: var(--ds-primary-600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mobile: smaller cells, no sticky */
@media (max-width: 768px) {
  .ds-cal__th-employee,
  .ds-cal__td-employee { width: 160px; min-width: 160px; max-width: 160px; padding-left: 8px; padding-right: 8px; }
  .ds-cal__th-day { width: 48px; min-width: 48px; max-width: 48px; }
  .ds-shift-cell { width: 44px; height: 40px; }
}

/* ============================================================
   M2 — Calendar view (compact employee×day operational grid)
   ============================================================ */

.ds-cal {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}
.ds-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-card-muted);
}
/* BUG-arrows fix Тимофей 2026-05-28: explicit row override — earlier rule
   at line ~2611 had flex-direction:column which stacked arrows vertically. */
.ds-cal__head-title { display: flex; flex-direction: row !important; align-items: center; gap: 8px; flex-wrap: nowrap; }
.ds-cal__head-month {
  font-size: var(--ds-text-base); font-weight: 600;
  color: var(--ds-text); letter-spacing: -0.01em;
}
.ds-cal__head-actions { display: flex; align-items: center; gap: 6px; }
.ds-cal__nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: all 120ms ease;
}
.ds-cal__nav:hover { background: #F8FAFC; color: var(--ds-text); }

.ds-cal__scroll {
  overflow-x: auto;
  overflow-y: visible;
  background: var(--ds-card);
  max-width: 100%;
}
.ds-cal__table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Headers */
.ds-cal__th-employee,
.ds-cal__th-day {
  background: var(--ds-card-muted);
  border-bottom: 1px solid var(--ds-border);
  font-weight: 500;
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  padding: 8px 6px;
  white-space: nowrap;
  text-align: center;
}
.ds-cal__th-employee {
  position: sticky; left: 0; z-index: 4;
  text-align: left;
  padding: 8px 14px;
  min-width: 220px;
  background: var(--ds-card-muted);
  box-shadow: 1px 0 0 var(--ds-border);
}
.ds-cal__th-day {
  width: 52px; min-width: 52px;
  display: table-cell;
  vertical-align: middle;
}
.ds-cal__th-day--weekend { background: #F8FAFC; color: var(--ds-text-faint); }
.ds-cal__th-day--today {
  background: var(--ds-primary-soft); color: var(--ds-primary-600);
  font-weight: 600;
}
.ds-cal__th-dow {
  display: block; font-size: 10px; opacity: 0.7;
  line-height: 1.1;
}
.ds-cal__th-num {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ds-text); margin-top: 1px;
  line-height: 1.1; text-transform: none; letter-spacing: 0;
}
.ds-cal__th-day--today .ds-cal__th-num { color: var(--ds-primary-600); }

/* Body rows */
.ds-cal__row { transition: background 100ms ease; }
.ds-cal__row:hover { background: #FAFBFD; }
.ds-cal__td-employee,
.ds-cal__td-day {
  border-bottom: 1px solid var(--ds-divider);
  padding: 4px;
  vertical-align: middle;
}
.ds-cal__td-employee {
  position: sticky; left: 0; z-index: 2;
  background: var(--ds-card);
  padding: 8px 14px;
  min-width: 220px;
  box-shadow: 1px 0 0 var(--ds-border);
}
.ds-cal__row:hover .ds-cal__td-employee { background: #FAFBFD; }
.ds-cal__td-day { padding: 3px; }

/* Employee identity tag */
.ds-emp-tag { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ds-emp-tag__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  color: var(--ds-primary-600);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; flex-shrink: 0;
  letter-spacing: 0;
}
.ds-emp-tag__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ds-emp-tag__name {
  font-size: 13px; font-weight: 500; color: var(--ds-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 170px;
}
.ds-emp-tag__role {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--ds-text-muted); margin-top: 1px;
}
.ds-emp-tag__dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; margin-left: 4px;
}
.ds-emp-tag__dot--ok   { background: var(--ds-success); }
.ds-emp-tag__dot--warn { background: var(--ds-warn); }
.ds-emp-tag__dot--bad  { background: var(--ds-danger); }

/* ============================================================
   Shift cell — 6 operational states
   ============================================================ */
.ds-shift-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 44px;
  padding: 2px 4px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  position: relative;
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease;
  line-height: 1.15;
  text-align: center;
}
.ds-shift-cell:hover {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
  z-index: 2;
}
.ds-shift-cell--today { outline: 1.5px solid var(--ds-primary-600); }

.ds-shift-cell__hours {
  display: block; font-weight: 500; font-size: 11px;
  letter-spacing: -0.01em;
}
.ds-shift-cell__markers {
  position: absolute; top: 2px; right: 3px;
  display: flex; gap: 2px;
}

/* === LEGACY state-color block — removed 2026-05-28 (Тимофей).
   Конфликтовало с 8-STATE PALETTE выше (line ~2855): `--scheduled` дублировал
   как mint (правильно) и как amber (legacy). Сохраняем canonical палитру выше.
   Если нужны переопределения — добавлять туда. === */
.ds-shift-cell--empty {
  background: transparent;
  color: transparent;
  cursor: default;
  position: relative;
  min-height: 36px;
}
.ds-shift-cell--empty:hover { transform: none; box-shadow: none; }
.ds-shift-cell--empty::after {
  content: "";
  display: block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ds-text-faint);
  opacity: 0.22;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.ds-shift-cell--cancelled {
  background: #F8FAFC; color: var(--ds-text-faint);
  font-size: 13px;
}

/* Cell markers (corner dots) */
.ds-cell-marker {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
}
.ds-cell-marker--comment { background: var(--ds-primary); }
.ds-cell-marker--partial { background: var(--ds-warn); }
.ds-cell-marker--risk    { background: var(--ds-danger); }

/* ============================================================
   Calendar legend
   ============================================================ */
.ds-cal__legend {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-card-muted);
  font-size: 12px;
  color: var(--ds-text-muted);
}
.ds-cal__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ds-legend-swatch {
  display: inline-block;
  width: 18px; height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}
.ds-legend-swatch--confirmed   { background: #DCFCE7; }
.ds-legend-swatch--in_progress { background: #DBEAFE; }
.ds-legend-swatch--waiting     { background: #FEF3C7; }
.ds-legend-swatch--issue       { background: #FEE2E2; }
.ds-legend-swatch--absence     { background: #EDE9FE; }
.ds-legend-swatch--empty       { background: #F8FAFC; border: 1px solid var(--ds-border); }

/* ============================================================
   View stubs (Table/Timeline/Employee — coming in M4/M5/M6)
   ============================================================ */
.ds-view-stub {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 80px 24px;
  text-align: center;
  background: var(--ds-card);
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-lg);
}
.ds-view-stub__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #F1F5F9;
  color: var(--ds-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.ds-view-stub__icon svg { width: 28px; height: 28px; }
.ds-view-stub__title {
  font-size: 18px; font-weight: 600;
  color: var(--ds-text); letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.ds-view-stub__caption {
  font-size: 13px; color: var(--ds-text-muted);
  line-height: 1.5; max-width: 480px; margin-bottom: 20px;
}

/* ============================================================
   Indicator pills (used in toolbar — A3 polling targets)
   ============================================================ */
.ds-indicator-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-xs); font-weight: 500;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 100ms ease;
}
.ds-indicator-pill:hover { transform: translateY(-1px); }
.ds-indicator-pill__icon  { width: 12px; height: 12px; }
.ds-indicator-pill__count { font-weight: 600; }
.ds-indicator-pill--danger  { background: var(--ds-danger-soft);  color: var(--ds-danger-text);  border-color: rgba(239,68,68,0.22); }
.ds-indicator-pill--warn    { background: var(--ds-warn-soft);    color: var(--ds-warn-text);    border-color: rgba(245,158,11,0.22); }
.ds-indicator-pill--neutral { background: #F1F5F9;                color: var(--ds-text-muted);   border-color: var(--ds-border); }
.ds-indicator-pill--primary { background: var(--ds-primary-soft); color: #1D4ED8;                border-color: rgba(59,130,246,0.20); }

/* ============================================================
   M2.5 — Design System Stabilization (canonical layer)
   ============================================================
   Goal: одна canonical система для chip / text / table density / card
   modifiers. Старые алиасы (.ds-pill-*, .ds-state-*, .ds-payment-*,
   .ds-coverage-*) сохраняются для backward-compat — они ВСЕ resolve
   через те же tonale tokens.

   Использование:
   - НОВЫЙ код → .ds-chip + intent + size + style
   - СТАРЫЙ код продолжает работать через aliases (без переписывания)
*/

/* ============================================================
   ds-chip — unified chip system (canonical replacement for ds-pill).
   ============================================================
   Composition:
     <span class="ds-chip ds-chip--sm ds-chip--success ds-chip--soft">label</span>
   Modifiers (orthogonal):
     size:   --xs (20px) / --sm (24px) / --md (28px, default)
     intent: --primary / --success / --warn / --danger / --purple / --neutral / --info / --orange / --paid
     style:  --soft (default) / --solid / --outline
*/
.ds-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: #F1F5F9;
  color: var(--ds-text-muted);
  border: 1px solid transparent;
}
.ds-chip--xs { height: 20px; padding: 0 8px; font-size: 10.5px; }
.ds-chip--sm { height: 22px; padding: 0 9px; font-size: 11px; }
.ds-chip--md { height: 26px; padding: 0 11px; font-size: var(--ds-text-sm); font-weight: 500; }

/* Soft (default tonal fill, no border) */
.ds-chip--soft.ds-chip--primary { background: var(--ds-primary-soft); color: #1D4ED8; }
.ds-chip--soft.ds-chip--success { background: var(--ds-success-soft); color: var(--ds-success-text); }
.ds-chip--soft.ds-chip--warn    { background: var(--ds-warn-soft);    color: var(--ds-warn-text); }
.ds-chip--soft.ds-chip--danger  { background: var(--ds-danger-soft);  color: var(--ds-danger-text); }
.ds-chip--soft.ds-chip--purple  { background: var(--ds-purple-soft);  color: var(--ds-purple-text); }
.ds-chip--soft.ds-chip--neutral { background: var(--ds-neutral-soft); color: var(--ds-neutral-text); }
.ds-chip--soft.ds-chip--info    { background: var(--ds-info-soft);    color: var(--ds-info-text); }
.ds-chip--soft.ds-chip--orange  { background: var(--ds-orange-soft);  color: var(--ds-orange-text); }
.ds-chip--soft.ds-chip--paid    { background: var(--ds-paid-soft);    color: var(--ds-paid-text); }

/* Solid (filled brand color) */
.ds-chip--solid.ds-chip--primary { background: var(--ds-primary); color: #fff; }
.ds-chip--solid.ds-chip--success { background: var(--ds-success); color: #fff; }
.ds-chip--solid.ds-chip--warn    { background: var(--ds-warn);    color: #fff; }
.ds-chip--solid.ds-chip--danger  { background: var(--ds-danger);  color: #fff; }
.ds-chip--solid.ds-chip--purple  { background: var(--ds-purple);  color: #fff; }
.ds-chip--solid.ds-chip--neutral { background: var(--ds-neutral); color: #fff; }

/* Outline (white bg, colored border + text) */
.ds-chip--outline                { background: transparent; }
.ds-chip--outline.ds-chip--primary { border-color: var(--ds-primary); color: var(--ds-primary-600); }
.ds-chip--outline.ds-chip--success { border-color: var(--ds-success); color: var(--ds-success-text); }
.ds-chip--outline.ds-chip--warn    { border-color: var(--ds-warn);    color: var(--ds-warn-text); }
.ds-chip--outline.ds-chip--danger  { border-color: var(--ds-danger);  color: var(--ds-danger-text); }
.ds-chip--outline.ds-chip--purple  { border-color: var(--ds-purple);  color: var(--ds-purple-text); }
.ds-chip--outline.ds-chip--neutral { border-color: var(--ds-border-strong); color: var(--ds-text-muted); }

/* Backward-compat — old .ds-pill-* automatically resolve to chip-soft equivalents.
   Old call sites continue to work; new code uses .ds-chip. */
.ds-pill                { /* base styles inherited from existing rule */ }
/* (No additional aliases needed — existing .ds-pill-* rules already in file work fine,
   they share the same tokens as .ds-chip--soft. .ds-chip is the GROWTH path.) */

/* ============================================================
   ds-text — canonical typography hierarchy (4 levels)
   ============================================================
   New code uses .ds-text-{title|body|caption|micro} + --muted variant.
   Existing .ds-h1/h2/h3/display continue to work (legacy semantic).
*/
.ds-text-title   { font-size: var(--ds-text-xl);  font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--ds-text); }
.ds-text-body    { font-size: var(--ds-text-base); font-weight: 400; line-height: 1.5;        color: var(--ds-text); }
.ds-text-caption { font-size: var(--ds-text-sm);   font-weight: 400; line-height: 1.4;        color: var(--ds-text-muted); }
.ds-text-micro   { font-size: var(--ds-text-xs);   font-weight: 500; line-height: 1.3;        color: var(--ds-text-muted); letter-spacing: 0.02em; }

.ds-text-title--muted   { color: var(--ds-text-muted); }
.ds-text-body--muted    { color: var(--ds-text-muted); }
.ds-text-caption--muted { color: var(--ds-text-faint); }
.ds-text-micro--muted   { color: var(--ds-text-faint); }

.ds-text-numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.ds-text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
}

/* ============================================================
   ds-table density modifiers — apply to .ds-table parent
   ============================================================
   Default = normal. Operational pages should opt into --compact.
*/
.ds-table--compact tbody td,
.ds-table--compact thead th { padding: 6px 10px; font-size: var(--ds-text-xs); }
.ds-table--compact tbody td { line-height: 1.3; }

.ds-table--normal tbody td,
.ds-table--normal thead th  { padding: 10px 14px; }

.ds-table--comfortable tbody td,
.ds-table--comfortable thead th { padding: 14px 18px; font-size: var(--ds-text-base); }

/* ============================================================
   ds-card modifiers — clickable/selected/highlighted
   ============================================================ */
.ds-card--clickable {
  cursor: pointer;
  transition: box-shadow 140ms var(--ds-ease),
              transform 140ms var(--ds-ease),
              border-color 140ms var(--ds-ease);
}
.ds-card--clickable:hover {
  box-shadow: var(--ds-shadow-md);
  border-color: var(--ds-border-strong);
}
.ds-card--clickable:active { transform: translateY(0.5px); }

.ds-card--selected {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), var(--ds-shadow-sm);
}

.ds-card--highlighted {
  background: var(--ds-primary-soft);
  border-color: rgba(59, 130, 246, 0.2);
}

/* ============================================================
   ds-state-color helpers (canonical mapping, single source of truth)
   ============================================================
   These map each operational state to its (bg, fg) pair.
   .ds-state-*, .ds-shift-cell--*, .ds-pill-* and .ds-chip-soft-* all
   reference the same tokens — change once, propagate everywhere.
*/
.ds-tone--confirmed,
.ds-tone--success,
.ds-tone--verified,
.ds-tone--paid          { background: var(--ds-success-soft); color: var(--ds-success-text); }
.ds-tone--in_progress,
.ds-tone--active,
.ds-tone--info          { background: var(--ds-info-soft); color: var(--ds-info-text); }
.ds-tone--waiting,
.ds-tone--scheduled,
.ds-tone--draft,
.ds-tone--warn          { background: var(--ds-warn-soft); color: var(--ds-warn-text); }
.ds-tone--partial,
.ds-tone--orange        { background: var(--ds-orange-soft); color: var(--ds-orange-text); }
.ds-tone--failed,
.ds-tone--issue,
.ds-tone--danger        { background: var(--ds-danger-soft); color: var(--ds-danger-text); }
.ds-tone--absence,
.ds-tone--vacation,
.ds-tone--sick,
.ds-tone--purple        { background: var(--ds-purple-soft); color: var(--ds-purple-text); }
.ds-tone--cancelled,
.ds-tone--empty,
.ds-tone--neutral       { background: var(--ds-neutral-soft); color: var(--ds-neutral-text); }

/* ============================================================
   Cleanup notes (kept aliases — DO NOT remove):
   ============================================================
   * .ds-pill / .ds-pill-* (lines 247+) — alias of .ds-chip--soft--*
   * .ds-state-* (lines 274+) — domain alias (shift state codes)
   * .ds-payment-* (lines 286+) — domain alias (payment status)
   * .ds-coverage-* (lines 292+) — domain alias (shift coverage status)
   * .ds-shift-cell--* (calendar cells) — domain alias (operational palette)
   * .ds-stat__icon--* AND .ds-stat--* .ds-stat__icon (parent+element modifier)
     — both kept; future code prefers element-modifier (.ds-stat__icon--<x>)
   * .ds-indicator-pill (defined 2x in CSS) — second def wins (cascade);
     left intentionally for now; remove first def in next refactor pass.
*/

/* ============================================================
   M3 — Shift Drawer (right-side slide-in, populated via HTMX)
   ============================================================ */

.ds-drawer-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
  padding: 40px 16px;
  text-align: center;
}

/* ---- HEAD: state pills + close button ---- */
.ds-drawer__head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--ds-divider);
}
.ds-drawer__close {
  margin-left: auto;
  width: 28px; height: 28px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  color: var(--ds-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 120ms ease;
}
.ds-drawer__close:hover { background: #F8FAFC; color: var(--ds-text); }

/* ---- HERO: time + date ---- */
.ds-drawer__hero {
  padding: 14px 16px 16px;
  border-bottom: 1px solid var(--ds-divider);
}
.ds-drawer__hero-time {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.ds-drawer__hero-date {
  margin-top: 2px;
  font-size: var(--ds-text-sm);
  color: var(--ds-text-muted);
}

/* ---- BODY (scrollable middle) ---- */
.ds-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px;
}
.ds-drawer__section { margin-top: 14px; }
.ds-drawer__section-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
  margin-bottom: 6px;
}

/* ---- Employee row ---- */
.ds-drawer__employee {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--ds-card-muted);
  border-radius: var(--ds-radius-md);
}
.ds-drawer__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  color: var(--ds-primary-600);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; flex-shrink: 0;
}
.ds-drawer__employee-name { font-size: 14px; font-weight: 500; color: var(--ds-text); }
.ds-drawer__employee-role { font-size: 11px; color: var(--ds-text-muted); margin-top: 2px; }

/* ---- Key-value grid (project / location / pay / plan / fact / payment) ---- */
.ds-drawer__kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-top: 14px;
}
.ds-drawer__kv {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds-drawer__kv-label {
  font-size: 11px;
  color: var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.ds-drawer__kv-value {
  font-size: 13px;
  color: var(--ds-text);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.ds-drawer__kv-value--num { font-variant-numeric: tabular-nums; }
.ds-drawer__kv-sub { font-size: 11px; color: var(--ds-text-muted); font-weight: 400; margin-top: 1px; }

/* ---- Comment block ---- */
.ds-drawer__comment {
  font-size: 13px;
  color: var(--ds-text);
  line-height: 1.45;
  background: var(--ds-card-muted);
  border-left: 3px solid var(--ds-primary);
  border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
  padding: 10px 12px;
}

/* ---- Timeline (events list) ---- */
.ds-drawer__timeline {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  border-left: 1px dashed var(--ds-border);
  padding-left: 14px;
}
.ds-drawer__timeline-row {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12px;
  color: var(--ds-text);
  position: relative;
}
.ds-drawer__timeline-dot {
  position: absolute; left: -19px; top: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ds-text-faint);
  border: 2px solid var(--ds-card);
  box-shadow: 0 0 0 1px var(--ds-border);
}
.ds-drawer__timeline-row--checkin  .ds-drawer__timeline-dot { background: var(--ds-success); }
.ds-drawer__timeline-row--state    .ds-drawer__timeline-dot { background: var(--ds-primary); }
.ds-drawer__timeline-row--report   .ds-drawer__timeline-dot { background: var(--ds-warn); }
.ds-drawer__timeline-row--approval .ds-drawer__timeline-dot { background: var(--ds-success); }
.ds-drawer__timeline-ts {
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-muted);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 38px;
}
.ds-drawer__timeline-title { font-weight: 500; }
.ds-drawer__timeline-actor { color: var(--ds-text-muted); font-size: 11px; }

/* ---- FOOTER (quick actions) ---- */
.ds-drawer__footer {
  border-top: 1px solid var(--ds-border);
  padding: 12px 16px;
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--ds-card-muted);
}
.ds-drawer__action { flex: 1 1 calc(50% - 3px); justify-content: center; }

/* ---- ERROR ALERT (returned by failed POST) ---- */
.ds-drawer__error {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 12px 0;
  padding: 8px 12px;
  border-radius: var(--ds-radius-md);
  font-size: 12px;
  background: var(--ds-danger-soft);
  color: var(--ds-danger-text);
  border: 1px solid rgba(239,68,68,0.18);
}
.ds-drawer__error--warn {
  background: var(--ds-warn-soft);
  color: var(--ds-warn-text);
  border-color: rgba(245,158,11,0.20);
}
.ds-drawer__error--info {
  background: var(--ds-primary-soft);
  color: #1D4ED8;
  border-color: rgba(59,130,246,0.20);
}

/* ---- State pills (used in drawer head + reusable) ---- */
.ds-state-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ds-state-pill--sm { font-size: 10.5px; padding: 2px 8px; }
.ds-state-pill--success { background: var(--ds-success-soft); color: var(--ds-success-text); border-color: rgba(16,185,129,0.20); }
.ds-state-pill--primary { background: var(--ds-primary-soft); color: #1D4ED8;                border-color: rgba(59,130,246,0.20); }
.ds-state-pill--warn    { background: var(--ds-warn-soft);    color: var(--ds-warn-text);    border-color: rgba(245,158,11,0.20); }
.ds-state-pill--danger  { background: var(--ds-danger-soft);  color: var(--ds-danger-text);  border-color: rgba(239,68,68,0.20); }
.ds-state-pill--purple  { background: var(--ds-purple-soft);  color: var(--ds-purple-text);  border-color: rgba(168,85,247,0.20); }
.ds-state-pill--neutral { background: #F1F5F9;                color: var(--ds-text-muted);   border-color: var(--ds-border); }

/* ---- Backdrop active + drawer scrolling fix ---- */
.ds-drawer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Mobile: drawer becomes bottom-sheet was already defined in M1; reaffirm interplay */
@media (max-width: 768px) {
  .ds-drawer__head { padding: 12px 14px 8px; }
  .ds-drawer__hero { padding: 12px 14px; }
  .ds-drawer__hero-time { font-size: 18px; }
  .ds-drawer__body { padding: 10px 14px 12px; }
  .ds-drawer__footer { padding: 10px 14px; }
  .ds-drawer__kv-grid { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================
   M4 — Table view (workspace bulk-ops surface)
   ============================================================ */

.ds-table-view { display: flex; flex-direction: column; gap: 12px; }

/* ---- Filters row ---- */
.ds-table-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
}
.ds-table-filters__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
}
.ds-table-filters__field > .ds-text-caption {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}
.ds-table-filters__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 0 6px;
}

/* ---- Bulk-actions bar ---- */
.ds-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  background: var(--ds-primary-soft);
  border: 1px solid rgba(59,130,246,0.22);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  animation: ds-bulk-fadein 140ms ease;
}
.ds-bulk-bar[hidden] { display: none; }
.ds-bulk-bar__count {
  font-size: var(--ds-text-sm);
  color: #1D4ED8;
  font-weight: 500;
}
.ds-bulk-bar__count b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ds-bulk-bar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
@keyframes ds-bulk-fadein {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Table body ---- */
.ds-table__col-check  { width: 32px; padding-right: 0 !important; }
.ds-table__col-actions { width: 36px; text-align: right; }
.ds-table__row { cursor: default; }
.ds-table__row:hover { background: #F8FAFC; }
.ds-table__row:has(input[type="checkbox"]:checked) { background: var(--ds-primary-soft); }

.ds-table__employee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ds-table__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  color: var(--ds-primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px; font-weight: 600;
  flex-shrink: 0;
}
.ds-table__employee-name {
  font-size: var(--ds-text-sm);
  color: var(--ds-text);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.005em;
}
a.ds-table__employee-name:hover { color: var(--ds-primary-600); text-decoration: underline; }

/* Compact icon-only button (chevron in row tail) */
.ds-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-faint);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 100ms ease;
}
.ds-icon-btn:hover {
  background: var(--ds-primary-soft);
  color: var(--ds-primary-600);
  border-color: rgba(59,130,246,0.22);
}

/* ============================================================
   M5 — Timeline view (operational activity feed)
   ============================================================ */

.ds-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 920px;
}

.ds-timeline__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 4px;
}

/* Day group */
.ds-timeline__day {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}

.ds-timeline__day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--ds-card-muted);
  border-bottom: 1px solid var(--ds-border);
}
.ds-timeline__day-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}
.ds-timeline__day-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--ds-text-faint);
  font-variant-numeric: tabular-nums;
  background: var(--ds-card);
  padding: 1px 8px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
}

.ds-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Row — single compact line ~32px tall */
.ds-timeline__row {
  display: grid;
  grid-template-columns: 48px 22px minmax(140px, auto) auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: var(--ds-text-sm);
  color: var(--ds-text);
  line-height: 1.4;
  border-bottom: 1px solid var(--ds-divider);
  transition: background 100ms ease;
}
.ds-timeline__row:last-child { border-bottom: none; }
.ds-timeline__row--clickable { cursor: pointer; }
.ds-timeline__row--clickable:hover { background: #F8FAFC; }
.ds-timeline__row--clickable:focus { outline: 2px solid var(--ds-primary-soft); outline-offset: -2px; }

.ds-timeline__ts {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-muted);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.ds-timeline__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  color: var(--ds-primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.ds-timeline__avatar--system {
  background: #F1F5F9;
  color: var(--ds-text-muted);
  font-size: 12px;
}

.ds-timeline__actor {
  font-weight: 500;
  color: var(--ds-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-timeline__target {
  color: var(--ds-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
}

.ds-timeline__delta {
  font-size: 11px;
  color: var(--ds-text-faint);
  font-variant-numeric: tabular-nums;
}

.ds-timeline__chevron {
  color: var(--ds-text-faint);
  opacity: 0.6;
  transition: opacity 100ms ease;
}
.ds-timeline__row--clickable:hover .ds-timeline__chevron {
  opacity: 1;
  color: var(--ds-primary-600);
}

/* Compact on mobile — collapse target into 2-line layout */
@media (max-width: 640px) {
  .ds-timeline__row {
    grid-template-columns: 44px 22px 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 2px;
  }
  .ds-timeline__actor { grid-column: 3 / 5; }
  .ds-timeline__target {
    grid-column: 1 / -1;
    padding-left: 78px;
    font-size: 11.5px;
  }
}

/* ============================================================
   M6 — Employee view (compact operational cards) + Profile drawer
   ============================================================ */

/* ---- Cards grid ---- */
.ds-emp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.ds-emp-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  text-decoration: none;
  color: var(--ds-text);
  transition: box-shadow 100ms ease, transform 100ms ease, border-color 100ms ease;
  cursor: pointer;
}
.ds-emp-card:hover {
  box-shadow: var(--ds-shadow-md);
  border-color: var(--ds-border-strong);
  transform: translateY(-1px);
}

.ds-emp-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-emp-card__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  color: var(--ds-primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600; font-size: 14px;
  flex-shrink: 0;
}
.ds-emp-card__head-body { flex: 1; min-width: 0; line-height: 1.2; }
.ds-emp-card__name {
  font-size: var(--ds-text-sm); font-weight: 600;
  color: var(--ds-text); letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-emp-card__role {
  font-size: 11px;
  color: var(--ds-text-muted);
  margin-top: 1px;
}

/* KPI row */
.ds-emp-card__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--ds-divider);
}
.ds-emp-card__kpi { text-align: center; min-width: 0; }
.ds-emp-card__kpi-value {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
  line-height: 1.1;
}
.ds-emp-card__kpi-value--bad { color: var(--ds-danger-text); }
.ds-emp-card__kpi-unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--ds-text-muted);
  margin-left: 1px;
}
.ds-emp-card__kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-muted);
  margin-top: 2px;
  font-weight: 500;
}

/* 14-day dot trend */
.ds-emp-card__trend {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  align-items: center;
}
.ds-emp-card__dot {
  flex: 1 1 auto;
  height: 12px;
  border-radius: 2.5px;
  min-width: 8px;
  max-width: 18px;
}
.ds-emp-card__dot--success { background: #BBF7D0; }
.ds-emp-card__dot--waiting { background: var(--ds-warn-soft); }
.ds-emp-card__dot--issue   { background: #FCA5A5; }
.ds-emp-card__dot--empty   { background: #F1F5F9; }

.ds-emp-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-primary-600);
  margin-top: 2px;
  letter-spacing: -0.005em;
}

/* ---- Employee profile drawer ---- */
.ds-emp-drawer__att-strip {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  align-items: center;
}
.ds-emp-drawer__att-block {
  flex: 1 1 0;
  height: 22px;
  border-radius: 3px;
  min-width: 6px;
}
.ds-emp-drawer__att-block--success { background: #BBF7D0; }
.ds-emp-drawer__att-block--waiting { background: var(--ds-warn-soft); }
.ds-emp-drawer__att-block--issue   { background: #FCA5A5; }
.ds-emp-drawer__att-block--absence { background: var(--ds-purple-soft); }
.ds-emp-drawer__att-block--empty   { background: #F1F5F9; }

.ds-emp-drawer__shift-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ds-emp-drawer__shift-row {
  display: grid;
  grid-template-columns: 80px auto 1fr 14px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-card-muted);
  font-size: var(--ds-text-sm);
  cursor: pointer;
  transition: background 100ms ease;
}
.ds-emp-drawer__shift-row:hover { background: #EFF6FF; }
.ds-emp-drawer__shift-row:focus { outline: 2px solid var(--ds-primary-soft); outline-offset: -2px; }
.ds-emp-drawer__shift-date {
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-muted);
  font-size: 12px;
}
.ds-emp-drawer__shift-hours {
  text-align: right;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.ds-emp-drawer__spark {
  background: var(--ds-card-muted);
  padding: 8px 10px;
  border-radius: var(--ds-radius-sm);
}

.ds-emp-drawer__notes {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.ds-emp-drawer__note {
  background: var(--ds-card-muted);
  padding: 10px 12px;
  border-radius: var(--ds-radius-sm);
  border-left: 2px solid var(--ds-primary);
}
.ds-emp-drawer__note-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 4px;
}
.ds-emp-drawer__note-author {
  font-size: 12px; font-weight: 600; color: var(--ds-text);
}
.ds-emp-drawer__note-text {
  font-size: 12.5px; color: var(--ds-text); line-height: 1.4;
}

.ds-emp-drawer__abs-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ds-emp-drawer__abs-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  padding: 4px 0;
}

.ds-emp-drawer__settings {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ds-emp-drawer__settings .ds-action-btn { position: relative; }
.ds-emp-drawer__settings-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 4px;
}
.ds-emp-drawer__settings-dot--ok { background: var(--ds-success); }

/* ============================================================
   M6 — Employee profile drawer (gap-fill: classes used by _drawer_employee.html)
   ============================================================ */

/* Drawer header (large avatar variant for profile vs shift) */
.ds-drawer__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-card);
}
.ds-drawer__head-body { flex: 1; min-width: 0; }
.ds-drawer__head-name {
  font-size: 16px; font-weight: 600;
  color: var(--ds-text);
  letter-spacing: -0.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-drawer__head-sub {
  display: flex; align-items: center; gap: 8px;
  margin-top: 3px;
  font-size: 12px; color: var(--ds-text-muted);
}
.ds-drawer__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg,#DBEAFE 0%,#BFDBFE 100%);
  color: var(--ds-primary-600);
  font-weight: 600; font-size: 12px;
  flex-shrink: 0;
}
.ds-drawer__avatar--lg {
  width: 44px; height: 44px;
  font-size: 16px;
}
.ds-drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--ds-radius-md);
  background: transparent;
  border: 1px solid var(--ds-border);
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: all 100ms ease;
}
.ds-drawer__close:hover {
  background: var(--ds-card-muted);
  color: var(--ds-text);
  border-color: var(--ds-border-strong);
}

/* Drawer body container */
.ds-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 4px;
  display: flex; flex-direction: column; gap: 14px;
}
.ds-drawer__section { display: flex; flex-direction: column; gap: 8px; }
.ds-drawer__section-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

/* Drawer KV grid — generic + quad variant for 4-up KPI strip */
.ds-drawer__kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-card-muted);
}
.ds-drawer__kv-grid--quad { grid-template-columns: repeat(4, 1fr); }
.ds-drawer__kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-drawer__kv-label {
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ds-text-muted);
}
.ds-drawer__kv-value {
  font-size: 14px; font-weight: 600;
  color: var(--ds-text);
  letter-spacing: -0.005em;
}
.ds-drawer__kv-value--num { font-variant-numeric: tabular-nums; font-size: 18px; }
.ds-drawer__kv-value--bad { color: var(--ds-danger-text); }
.ds-drawer__kv-sub { font-size: 11px; color: var(--ds-text-muted); margin-top: 2px; }

/* Drawer footer (action buttons) */
.ds-drawer__footer {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-card-muted);
}

/* Drawer error banner */
.ds-drawer__error {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--ds-warn-soft);
  border-bottom: 1px solid rgba(245,158,11,0.22);
  color: var(--ds-warn-text);
  font-size: 12.5px;
}
.ds-drawer__error--danger { background: var(--ds-danger-soft); color: var(--ds-danger-text); border-bottom-color: rgba(239,68,68,0.22); }

/* ----- Employee profile internal blocks ----- */

/* Attendance strip — 30 small cells */
.ds-emp-strip {
  display: flex; flex-wrap: wrap; gap: 3px;
}
.ds-emp-strip__cell {
  width: 12px; height: 18px;
  border-radius: 3px;
  flex-shrink: 0;
  background: #F1F5F9;
}
.ds-emp-strip__cell--success { background: #BBF7D0; }
.ds-emp-strip__cell--waiting { background: #FEF3C7; }
.ds-emp-strip__cell--issue   { background: #FEE2E2; }
.ds-emp-strip__cell--absence { background: var(--ds-purple-soft); }
.ds-emp-strip__cell--empty   { background: #F1F5F9; }

/* Recent-shifts compact list */
.ds-emp-shift-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-emp-shift-list__row { display: contents; }
.ds-emp-shift-list__link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--ds-radius-sm);
  text-decoration: none;
  color: var(--ds-text);
  font-size: 12.5px;
  border: 1px solid transparent;
  transition: background 100ms ease;
}
.ds-emp-shift-list__link:hover {
  background: #F8FAFC;
  border-color: var(--ds-border);
}
.ds-emp-shift-list__date {
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-muted);
  min-width: 70px;
}
.ds-emp-shift-list__hours {
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-muted);
  font-size: 11.5px;
}

/* Comments */
.ds-emp-comment {
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-card);
}
.ds-emp-comment + .ds-emp-comment { margin-top: 6px; }
.ds-emp-comment__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
.ds-emp-comment__author { font-size: 12px; font-weight: 600; color: var(--ds-text); }
.ds-emp-comment__ts { font-size: 11px; color: var(--ds-text-faint); font-variant-numeric: tabular-nums; }
.ds-emp-comment__body { font-size: 12.5px; color: var(--ds-text); line-height: 1.4; }

/* Absence + dispute + risk lists — compact rows */
.ds-emp-absence-list,
.ds-emp-dispute-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ds-emp-absence-list__row,
.ds-emp-dispute-list__row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  padding: 6px 10px;
  background: var(--ds-card-muted);
  border-radius: var(--ds-radius-sm);
}
.ds-emp-risk-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* Drawer empty state */
.ds-drawer-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 16px;
  color: var(--ds-text-faint);
  text-align: center;
}

/* ============================================================
   P0 calendar interactivity fix 2026-05-28T17:22 — re-applied after parallel-worker overwrite.
   ============================================================ */
.ds-shift-cell--empty {
  cursor: pointer !important;
  background: transparent;
  display: block;
  min-height: 36px;
  text-decoration: none;
  transition: background 100ms ease, outline-color 100ms ease;
  position: relative;
}
.ds-shift-cell--empty:hover {
  background: var(--ds-primary-soft);
  outline: 1px dashed rgba(59,130,246,0.35);
  outline-offset: -2px;
}
.ds-shift-cell--empty:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: -2px;
}
.ds-shift-cell--empty::before {
  content: "+";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ds-primary);
  opacity: 0;
  transition: opacity 100ms ease;
}
.ds-shift-cell--empty:hover::before { opacity: 0.7; }

.ds-emp-tag.ds-emp-tag--clickable {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: var(--ds-radius-sm);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 100ms ease;
}
.ds-emp-tag.ds-emp-tag--clickable:hover { background: #F1F5F9; }
.ds-emp-tag.ds-emp-tag--clickable:hover .ds-emp-tag__name { color: var(--ds-primary-600); }

/* ============================================================
   BUG5 — Assign drawer (3 modes: single / batch / template)
   ============================================================ */

/* Mode tabs (Single / Massово / По шаблону) */
.ds-drawer-assign__tabs {
  display: flex;
  gap: 4px;
  padding: 6px 14px 0;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-card-muted);
}
.ds-drawer-assign__tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ds-text-muted);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 120ms ease;
}
.ds-drawer-assign__tab:hover { color: var(--ds-text); background: rgba(15,23,42,0.03); }
.ds-drawer-assign__tab.active {
  color: var(--ds-primary-600);
  background: var(--ds-card);
  border-bottom-color: var(--ds-primary);
}

/* Form fields inside drawer body */
.ds-drawer-assign__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.ds-drawer-assign__field > .ds-drawer__section-label {
  margin-bottom: 0;
}
.ds-drawer-assign__field > .ds-field {
  width: 100%;
}
.ds-drawer-assign__row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.ds-drawer-assign__row-2 .ds-drawer-assign__field { margin-bottom: 0; }

/* Multi-employee chip selector */
.ds-drawer-assign__chip-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-card-muted);
  max-height: 240px;
  overflow-y: auto;
}
.ds-drawer-assign__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  font-size: 12px;
  cursor: pointer;
  transition: all 100ms ease;
}
.ds-drawer-assign__chip:hover { border-color: var(--ds-border-strong); }
.ds-drawer-assign__chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ds-drawer-assign__chip:has(input[type="checkbox"]:checked) {
  background: var(--ds-primary-soft);
  border-color: var(--ds-primary);
  color: #1D4ED8;
  font-weight: 500;
}
.ds-drawer-assign__chip:has(input[type="checkbox"]:checked) .ds-drawer-assign__chip-avatar {
  background: var(--ds-primary);
  color: #fff;
}
.ds-drawer-assign__chip-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #E2E8F0;
  color: var(--ds-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600;
  flex-shrink: 0;
  transition: all 100ms ease;
}
.ds-drawer-assign__chip-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   BUG5 — Assign drawer (single/batch/template) styling
   ============================================================ */

/* Mode tabs (Single / Massово / По шаблону) */
.ds-drawer-assign__tabs {
  display: flex;
  gap: 2px;
  padding: 6px 12px 0;
  background: var(--ds-card-muted);
  border-bottom: 1px solid var(--ds-border);
}
.ds-drawer-assign__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ds-text-muted);
  border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0;
  text-decoration: none;
  cursor: pointer;
  transition: all 120ms ease;
  border-bottom: 2px solid transparent;
}
.ds-drawer-assign__tab:hover { color: var(--ds-text); background: rgba(15,23,42,0.03); }
.ds-drawer-assign__tab.active {
  color: var(--ds-primary-600);
  background: var(--ds-card);
  border-bottom-color: var(--ds-primary);
}

/* Form field row */
.ds-drawer-assign__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
}
.ds-drawer-assign__field > label,
.ds-drawer-assign__field > .ds-drawer__section-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}
.ds-drawer-assign__field .ds-field {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-strong);
  background: var(--ds-card);
  font-size: 13px;
  color: var(--ds-text);
}
.ds-drawer-assign__field .ds-field:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.ds-drawer-assign__field select.ds-field { appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2364748B' stroke-width='2'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Two-up grid (start/end time, date-from/date-to) */
.ds-drawer-assign__row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.ds-drawer-assign__row-2 .ds-drawer-assign__field { margin-top: 0; }

/* Multi-select chip group (employees) */
.ds-drawer-assign__chip-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  background: var(--ds-card-muted);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
}
.ds-drawer-assign__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  font-size: 11.5px;
  color: var(--ds-text);
  cursor: pointer;
  transition: all 100ms ease;
  user-select: none;
}
.ds-drawer-assign__chip:hover { border-color: var(--ds-border-strong); }
.ds-drawer-assign__chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ds-drawer-assign__chip:has(input:checked) {
  background: var(--ds-primary-soft);
  border-color: rgba(59,130,246,0.30);
  color: #1D4ED8;
}
.ds-drawer-assign__chip-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  color: var(--ds-primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px; font-weight: 600;
  flex-shrink: 0;
}
.ds-drawer-assign__chip:has(input:checked) .ds-drawer-assign__chip-avatar {
  background: var(--ds-primary);
  color: #fff;
}
.ds-drawer-assign__chip-name {
  font-weight: 500;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Success state inside drawer body */
.ds-drawer-assign__success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}
.ds-drawer-assign__success-state .icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.ds-drawer-assign__success-state .title {
  font-size: 18px; font-weight: 600;
  color: var(--ds-text); letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.ds-drawer-assign__success-state .sub {
  font-size: 13px; color: var(--ds-text-muted);
}

/* ============================================================
   Empty cell hover polish (Тимофей 2026-05-28): visible + icon + dashed outline
   ============================================================ */
.ds-shift-cell--empty {
  cursor: pointer !important;
  transition: background 120ms ease, outline-color 120ms ease;
}
.ds-shift-cell--empty:hover {
  background: var(--ds-primary-soft) !important;
  outline: 1.5px dashed rgba(59,130,246,0.45);
  outline-offset: -3px;
  border-radius: var(--ds-radius-sm);
  transform: none !important;
  box-shadow: none !important;
}
/* Replace center dot with '+' icon on hover */
.ds-shift-cell--empty:hover::after {
  content: "+";
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  opacity: 1 !important;
  color: var(--ds-primary-600);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 0 !important;
}
.ds-shift-cell--empty:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: -2px;
}

/* ============================================================
   BUG5 — Template mode (full feature parity) — additional polish
   ============================================================ */

/* Quick-date pills row */
.ds-drawer-assign__quick-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.ds-drawer-assign__quick-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  color: var(--ds-text-muted);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 100ms ease;
}
.ds-drawer-assign__quick-pill:hover {
  background: var(--ds-primary-soft);
  color: #1D4ED8;
  border-color: rgba(59,130,246,0.20);
}

/* Role filter (4 checkbox pills) */
.ds-drawer-assign__filter-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ds-drawer-assign__role-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--ds-radius-pill);
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  font-size: 11.5px;
  color: var(--ds-text-muted);
  cursor: pointer;
  transition: all 100ms ease;
  user-select: none;
}
.ds-drawer-assign__role-pill:hover { border-color: var(--ds-border-strong); }
.ds-drawer-assign__role-pill input[type="checkbox"] {
  appearance: none;
  width: 12px; height: 12px;
  border-radius: 3px;
  border: 1px solid var(--ds-border-strong);
  cursor: pointer;
  position: relative;
}
.ds-drawer-assign__role-pill input[type="checkbox"]:checked {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
}
.ds-drawer-assign__role-pill input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 1px 2px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.ds-drawer-assign__role-pill:has(input:checked) {
  background: var(--ds-primary-soft);
  border-color: rgba(59,130,246,0.30);
  color: #1D4ED8;
  font-weight: 500;
}

/* Employee checklist (template mode — simpler than chip-multi) */
.ds-drawer-assign__checklist {
  max-height: 280px;
  overflow-y: auto;
  background: var(--ds-card-muted);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
}
.ds-drawer-assign__checkrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--ds-text);
  cursor: pointer;
  border-bottom: 1px solid var(--ds-divider);
  transition: background 80ms ease;
}
.ds-drawer-assign__checkrow:last-child { border-bottom: none; }
.ds-drawer-assign__checkrow:hover { background: var(--ds-card); }
.ds-drawer-assign__checkrow[hidden] { display: none; }
.ds-drawer-assign__checkrow input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--ds-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.ds-drawer-assign__checkrow:has(input:checked) {
  background: var(--ds-primary-soft);
}
.ds-drawer-assign__checkrow-name { font-weight: 500; }
.ds-drawer-assign__checkrow-role { color: var(--ds-text-muted); font-size: 11.5px; }

/* Live preview block */
.ds-drawer-assign__preview {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin-top: 14px;
  background: var(--ds-primary-soft);
  border: 1px solid rgba(59,130,246,0.18);
  border-radius: var(--ds-radius-md);
}
.ds-drawer-assign__preview-text {
  font-size: 12.5px;
  color: #1D4ED8;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.ds-drawer-assign__preview-text strong {
  font-weight: 700;
  color: var(--ds-primary-600);
}

/* + Create template link */
.ds-drawer-assign__add-tpl-link:hover {
  text-decoration: underline;
}

/* ============================================================
   Absence-approval overlap confirm modal
   ============================================================ */

.ds-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(2px);
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: ds-modal-fade 140ms ease;
}
.ds-modal-overlay--open { display: flex; }
@keyframes ds-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ds-modal {
  background: var(--ds-card);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-lg);
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: ds-modal-pop 180ms var(--ds-ease);
}
@keyframes ds-modal-pop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.ds-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--ds-divider);
}
.ds-modal__head-body { flex: 1; min-width: 0; }
.ds-modal__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.ds-modal__sub {
  font-size: 12px;
  color: var(--ds-text-muted);
  margin-top: 3px;
}
.ds-modal__close {
  width: 24px; height: 24px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  color: var(--ds-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 100ms ease;
}
.ds-modal__close:hover { background: #F8FAFC; color: var(--ds-text); border-color: var(--ds-border-strong); }

.ds-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
}

.ds-modal__shift-list {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 8px;
  background: var(--ds-card-muted);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-modal__shift-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  font-size: 12.5px;
  background: var(--ds-card);
  border-radius: var(--ds-radius-sm);
}
.ds-modal__shift-date {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ds-text);
  min-width: 60px;
}
.ds-modal__shift-hours {
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-muted);
  flex: 1;
}

.ds-modal__question {
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-text);
  margin-top: 6px;
}
.ds-modal__hint {
  font-size: 12px;
  color: var(--ds-text-muted);
  line-height: 1.4;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--ds-warn-soft);
  border-left: 3px solid var(--ds-warn);
  border-radius: var(--ds-radius-sm);
}

.ds-modal__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--ds-divider);
  background: var(--ds-card-muted);
}

/* ============================================================
   CANONICAL state→color mapping for Calendar shift cells
   (Тимофей 2026-05-28: override all earlier blocks via !important so
   8 legend colors применяются consistently независимо от cascade order).
   ============================================================ */

/* 1. Назначена — light mint green */
.ds-shift-cell--assigned,
.ds-shift-cell--awaiting_employee_confirmation,
.ds-shift-cell--awaiting_manager_confirmation,
.ds-shift-cell--scheduled,
.ds-shift-cell--draft {
  background-color: #ECFDF5 !important;
  color: #047857 !important;
  border-color: rgba(16,185,129,0.16) !important;
}

/* 2. Подтверждена — saturated green */
.ds-shift-cell--confirmed,
.ds-shift-cell--verified,
.ds-shift-cell--paid {
  background-color: #BBF7D0 !important;
  color: #166534 !important;
  border-color: rgba(22,101,52,0.22) !important;
}

/* 3. В работе — primary blue */
.ds-shift-cell--in_progress,
.ds-shift-cell--active,
.ds-shift-cell--progress {
  background-color: var(--ds-primary-soft) !important;
  color: #1D4ED8 !important;
  border-color: rgba(59,130,246,0.22) !important;
}

/* 4. Требует проверки — amber */
.ds-shift-cell--awaiting_verification,
.ds-shift-cell--waiting,
.ds-shift-cell--partially_completed,
.ds-shift-cell--partial,
.ds-shift-cell--submitted,
.ds-shift-cell--reconciliation {
  background-color: var(--ds-warn-soft) !important;
  color: var(--ds-warn-text) !important;
  border-color: rgba(245,158,11,0.22) !important;
}

/* 5. Неявка — red */
.ds-shift-cell--failed,
.ds-shift-cell--no_show,
.ds-shift-cell--shift_breakdown,
.ds-shift-cell--issue {
  background-color: var(--ds-danger-soft) !important;
  color: var(--ds-danger-text) !important;
  border-color: rgba(239,68,68,0.22) !important;
}

/* 6/7/8. Absence palette — purple/pink/gray по absence_kind variant
   (см. .ds-shift-cell--abs-* выше). Reaffirm для уверенности. */
.ds-shift-cell--abs-vacation,
.ds-shift-cell--vacation {
  background-color: var(--ds-purple-soft) !important;
  color: var(--ds-purple-text) !important;
  border-color: rgba(168,85,247,0.22) !important;
}
.ds-shift-cell--abs-sick,
.ds-shift-cell--sick {
  background-color: #FFE4E6 !important;          /* peach/red-soft */
  color: #9F1239 !important;
  border-color: rgba(225,29,72,0.22) !important;
}
.ds-shift-cell--abs-dayoff,
.ds-shift-cell--abs-unavailable,
.ds-shift-cell--abs-personal,
.ds-shift-cell--cancelled,
.ds-shift-cell--late_cancel,
.ds-shift-cell--rejected_by_manager,
.ds-shift-cell--employee_declined {
  background-color: #F1F5F9 !important;
  color: var(--ds-text-muted) !important;
  border-color: var(--ds-border) !important;
}

/* Empty + unknown — transparent, faint dot (sustained from earlier). */
.ds-shift-cell--empty {
  background-color: transparent !important;
  color: transparent !important;
  border-color: transparent !important;
}

/* Staged-approve modal extras: warn button + wrap footer */
.ds-action-btn--warn {
  background: var(--ds-warn-soft);
  border-color: rgba(245,158,11,0.30);
  color: var(--ds-warn-text);
}
.ds-action-btn--warn:hover { background: #FEF3C7; border-color: rgba(245,158,11,0.45); }

.ds-modal__footer--wrap {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* ============================================================
   Calendar cell width — fit exactly 8 days в viewport (Тимофей 2026-05-28)
   Available width = viewport - sidebar(220) - workspace padding(~60) - employee col(~220) ≈ -500px.
   Min-width 110px гарантирует читаемость + horizontal scroll on small viewports.
   ============================================================ */
.ds-cal__th-day,
.ds-cal__td-day {
  width:     max(110px, calc((100vw - 500px) / 8)) !important;
  min-width: max(110px, calc((100vw - 500px) / 8)) !important;
  max-width: max(110px, calc((100vw - 500px) / 8)) !important;
}

@media (max-width: 1023px) {
  /* Tablet — sidebar collapses to drawer; account for that */
  .ds-cal__th-day,
  .ds-cal__td-day {
    width:     max(90px, calc((100vw - 240px) / 8)) !important;
    min-width: max(90px, calc((100vw - 240px) / 8)) !important;
    max-width: max(90px, calc((100vw - 240px) / 8)) !important;
  }
}

@media (max-width: 640px) {
  /* Mobile — fixed compact cells, horizontal scroll dominates */
  .ds-cal__th-day,
  .ds-cal__td-day {
    width: 80px !important; min-width: 80px !important; max-width: 80px !important;
  }
}

/* ============================================================
   v2.9 — calendar grid alignment + readability  (2026-05-29)
   Тимофей: «столбцы привязать к строкам, имена не обрезались»
   ============================================================ */

/* Employee column — wider so «Ямбова Регина 20» помещается */
.ds-cal__th-employee,
.ds-cal__td-employee {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Day column — чуть шире и одинаковый padding в th/td для perfect alignment */
:root {
  --ds-cell-w: 72px;
}
.ds-cal__th-day,
.ds-cal__td-day {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  padding: 6px 4px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Header day cell: center вертикально dow+num blocks */
.ds-cal__th-day {
  height: 56px;
}
.ds-cal__th-dow { display: block; line-height: 1.2; margin-bottom: 2px; }
.ds-cal__th-num { margin: 0 auto !important; }

/* Body day cell — pill/cell occupies the cell with vertical/horizontal centering */
.ds-cal__td-day > * {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Shift cell pills (Больн, Отпуск, hours) — softer fills, narrower padding */
.ds-shift-cell {
  min-width: 56px;
  height: 28px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}
.ds-shift-cell--empty {
  min-width: 24px;
  height: 24px;
  border: 1px dashed var(--ds-border-strong);
  background: transparent;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .15s;
}
.ds-cal__row:hover .ds-shift-cell--empty { opacity: 1; }
.ds-shift-cell--absence {
  background: var(--ds-danger-soft);
  color: var(--ds-danger-text);
}
.ds-shift-cell--abs-vacation,
.ds-shift-cell--absence.ds-shift-cell--abs-отпуск {
  background: #EDE9FE;
  color: #6D28D9;
}

/* Day-header «today» indicator — bring above pills */
.ds-cal__th-day--today .ds-cal__th-num {
  background: var(--ds-primary) !important;
  color: #fff !important;
}

/* Reduce row height a bit, make grid more scannable */
.ds-cal__row { height: 56px !important; }
.ds-cal__td-employee { padding: 6px 14px !important; }

/* Manager name — let it grow to 200px, ellipsis if longer */
.ds-emp-tag__name {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}
.ds-emp-tag__role {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--ds-text-muted);
}

/* Avatar size — match new height */
.ds-emp-tag__avatar {
  width: 30px;
  height: 30px;
  font-size: 12px;
  flex-shrink: 0;
}
.ds-emp-tag { gap: 10px !important; }

/* Weekend column shading — softer */
.ds-cal__th-day--weekend,
.ds-cal__row td.ds-cal__td-day:nth-child(n) {
  /* keep base */
}

/* ============================================================
   Live search-filter list (Тимофей 2026-05-29 / global search)
   ============================================================ */
.ds-search-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-search-list__input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-border-strong);
  background: var(--ds-card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>") no-repeat 9px center;
  font-size: 12.5px;
  color: var(--ds-text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ds-search-list__input:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.ds-search-list__input::placeholder {
  color: var(--ds-text-faint);
  font-size: 12px;
}
.ds-search-list__items {
  max-height: 300px;
  overflow-y: auto;
}
.ds-search-list__count {
  font-size: 11px;
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
}
[hidden].ds-search-list__item,
[hidden].ds-search-list__row,
[hidden].ds-drawer-assign__chip,
[hidden].ds-drawer-assign__checkrow,
[hidden].ds-emp-card { display: none !important; }

/* ============================================================
   v3.1 — calendar visual polish (2026-05-29)
   No layout changes. Strict numbers from brief.
   ============================================================ */

/* ===== EMPLOYEE COLUMN ===== */
.ds-cal__td-employee,
.ds-cal__th-employee {
  padding: 14px 20px !important;
}
.ds-cal__td-employee { background: var(--ds-card) !important; }

.ds-emp-tag {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
}
.ds-emp-tag__avatar {
  width: 32px !important;
  height: 32px !important;
  font-size: 13px !important;
  font-weight: 600;
  flex-shrink: 0;
  border-radius: 9999px;
  background: linear-gradient(135deg, #DBEAFE 0%, #EDE9FE 100%);
  color: var(--ds-primary);
  border: 1px solid #DBEAFE;
}
.ds-emp-tag__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ds-emp-tag__name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ds-text) !important;
  line-height: 1.2;
  letter-spacing: -0.005em;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-emp-tag__role {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ds-text-muted) !important;
  line-height: 1.2;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== ROWS / SEPARATORS ===== */
.ds-cal__row { height: 56px !important; }

.ds-cal__td-day,
.ds-cal__td-employee {
  border-bottom: 1px solid #EAECEF !important;
}

/* Zebra на чётные строки (cleaner #FAFBFC) */
.ds-cal__row:nth-child(even) td:not(.ds-cal__td-employee) {
  background: #FAFBFC !important;
}
.ds-cal__row:nth-child(even) .ds-cal__td-employee {
  background: #FAFBFC !important;
}
.ds-cal__row:hover td:not(.ds-cal__td-employee) {
  background: #F1F5F9 !important;
}
.ds-cal__row:hover .ds-cal__td-employee {
  background: #F1F5F9 !important;
}

/* ===== HEADER ===== */
.ds-cal__th-employee,
.ds-cal__th-day {
  background: var(--ds-card-muted) !important;
  padding: 12px 6px !important;
  border-bottom: 1px solid #EAECEF !important;
}
.ds-cal__th-dow {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #9CA3AF !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ds-cal__th-num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ds-text) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  margin: 0 auto !important;
  font-variant-numeric: tabular-nums;
}
.ds-cal__th-day--today .ds-cal__th-num {
  background: var(--ds-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}
.ds-cal__th-day--weekend { background: #F4F6FB !important; }
.ds-cal__th-day--weekend .ds-cal__th-num { color: #94A3B8 !important; }

/* ===== SHIFT CHIPS ===== */
.ds-shift-cell {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px !important;
  min-width: 84px;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
  letter-spacing: -0.01em;
}
.ds-shift-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
}
.ds-shift-cell__hours {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ds-shift-cell__hours::before {
  display: inline-block;
  margin-right: 5px;
  width: 12px; height: 12px;
  vertical-align: -2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ===== STATUS COLOR PALETTE ===== */
/* Assigned — blue */
.ds-shift-cell--assigned,
.ds-shift-cell--draft {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}
.ds-shift-cell--assigned .ds-shift-cell__hours::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/></svg>");
}

/* Confirmed — green */
.ds-shift-cell--confirmed {
  background: #DCFCE7 !important;
  color: #15803D !important;
}
.ds-shift-cell--confirmed .ds-shift-cell__hours::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* Working / in_progress — cyan */
.ds-shift-cell--in_progress,
.ds-shift-cell--working {
  background: #CFFAFE !important;
  color: #0E7490 !important;
}
.ds-shift-cell--in_progress .ds-shift-cell__hours::before,
.ds-shift-cell--working .ds-shift-cell__hours::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7490' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15 14'/></svg>");
}

/* Review / waiting — orange */
.ds-shift-cell--waiting,
.ds-shift-cell--review,
.ds-shift-cell--awaiting_employee_confirmation,
.ds-shift-cell--awaiting_manager_confirmation {
  background: #FFEDD5 !important;
  color: #C2410C !important;
}
.ds-shift-cell--waiting .ds-shift-cell__hours::before,
.ds-shift-cell--review .ds-shift-cell__hours::before,
.ds-shift-cell--awaiting_employee_confirmation .ds-shift-cell__hours::before,
.ds-shift-cell--awaiting_manager_confirmation .ds-shift-cell__hours::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><line x1='12' y1='8' x2='12' y2='12'/><circle cx='12' cy='16' r='1' fill='%23C2410C'/></svg>");
}

/* Issue / failed — red */
.ds-shift-cell--issue,
.ds-shift-cell--failed {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
}
.ds-shift-cell--issue .ds-shift-cell__hours::before,
.ds-shift-cell--failed .ds-shift-cell__hours::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
}

/* Sick — red OUTLINE only */
.ds-shift-cell--abs-sick,
.ds-shift-cell--absence.ds-shift-cell--abs-sick,
.ds-shift-cell--absence[title*="ольнич"],
.ds-shift-cell--absence[title*="Sick"] {
  background: #FFFFFF !important;
  color: #B91C1C !important;
  border: 1.5px solid #FCA5A5 !important;
}

/* Vacation — purple */
.ds-shift-cell--abs-vacation,
.ds-shift-cell--absence.ds-shift-cell--abs-vacation,
.ds-shift-cell--absence[title*="тпуск"],
.ds-shift-cell--absence[title*="Vacation"] {
  background: #EDE9FE !important;
  color: #6D28D9 !important;
  border: none !important;
}

/* Generic absence fallback — neutral */
.ds-shift-cell--absence {
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600;
  padding: 0 10px !important;
  height: 30px !important;
}

/* Empty cell — barely-visible dashed circle for «+» add affordance */
.ds-shift-cell--empty {
  min-width: 28px !important;
  width: 28px !important;
  height: 28px !important;
  border: 1.5px dashed #CBD5E1 !important;
  background: transparent !important;
  border-radius: 8px !important;
  opacity: 0;
  transition: opacity 150ms ease;
}
.ds-cal__row:hover .ds-shift-cell--empty { opacity: 0.7; }
.ds-shift-cell--empty:hover { opacity: 1 !important; border-color: var(--ds-primary) !important; background: var(--ds-primary-soft) !important; }

/* ===== KPI ROW POLISH ===== */
.ds-page .ds-kpi,
.ds-page .kpi-card {
  padding: 24px !important;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.ds-page .ds-kpi:hover,
.ds-page .kpi-card:hover {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -4px rgba(15, 23, 42, 0.10) !important;
  transform: translateY(-1px);
}
.ds-page .ds-kpi__num,
.ds-page .kpi-card .num,
.ds-page .kpi-card__value {
  font-size: 26px !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ds-page .ds-kpi__title,
.ds-page .kpi-card__label {
  font-size: 13px !important;
  font-weight: 500;
  color: var(--ds-text-muted);
}
.ds-page .ds-kpi__icon,
.ds-page .kpi-card__icon {
  width: 44px !important;
  height: 44px !important;
}
.ds-page .ds-kpi__icon svg,
.ds-page .kpi-card__icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* ===== CALENDAR WRAPPER ===== */
.ds-cal {
  border-radius: 18px;
  background: var(--ds-card);
}
.ds-cal__scroll {
  border-radius: 16px;
}

/* Markers (comment/partial/risk) tighter */
.ds-cell-marker {
  width: 5px !important;
  height: 5px !important;
}

/* ============================================================
   v3.2 — calendar 8-day viewport with clamped cell width
   ============================================================ */

/* ===== EMPLOYEE COLUMN — 230px sticky ===== */
.ds-cal__th-employee,
.ds-cal__td-employee {
  width: 230px !important;
  min-width: 230px !important;
  max-width: 230px !important;
  position: sticky !important;
  left: 0 !important;
  z-index: 5;
  background: var(--ds-card) !important;
  box-shadow: 1px 0 0 #EAECEF !important;
}
.ds-cal__th-employee { z-index: 7; background: var(--ds-card-muted) !important; }
.ds-cal__row:nth-child(even) .ds-cal__td-employee { background: #FAFBFC !important; }
.ds-cal__row:hover .ds-cal__td-employee { background: #F1F5F9 !important; }

/* ===== DAY COLUMN — clamped calc ===== */
:root {
  --ds-cal-emp-w: 230px;
  --ds-cal-cell-w: clamp(120px, calc((100vw - var(--ds-sidebar-w, 220px) - 64px - 230px) / 8), 160px);
}
@media (max-width: 1023.98px) {
  :root {
    --ds-cal-cell-w: clamp(120px, calc((100vw - 32px - 230px) / 8), 160px);
  }
}
@media (max-width: 639.98px) {
  :root {
    --ds-cal-emp-w: 180px;
    --ds-cal-cell-w: clamp(110px, calc((100vw - 24px - 180px) / 8), 160px);
  }
  .ds-cal__th-employee,
  .ds-cal__td-employee {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
  }
}

.ds-cal__th-day,
.ds-cal__td-day {
  width: var(--ds-cal-cell-w) !important;
  min-width: var(--ds-cal-cell-w) !important;
  max-width: var(--ds-cal-cell-w) !important;
  padding: 6px 8px !important;
  vertical-align: middle !important;
}

/* ===== ROW HEIGHT 52px ===== */
.ds-cal__row { height: 52px !important; }
.ds-cal__td-employee { padding: 8px 16px !important; }
.ds-cal__th-employee { padding: 10px 16px !important; }

/* ===== HORIZONTAL SCROLL CONTAINER ===== */
.ds-cal__scroll {
  overflow-x: auto !important;
  overflow-y: visible !important;
  position: relative;
  -webkit-overflow-scrolling: touch;
  /* Thin scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}
.ds-cal__scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.ds-cal__scroll::-webkit-scrollbar-track { background: transparent; }
.ds-cal__scroll::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.ds-cal__scroll::-webkit-scrollbar-thumb:hover { background: #94A3B8; background-clip: padding-box; }

/* Fade-out on right edge when more days exist */
.ds-cal {
  position: relative;
}
.ds-cal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.85));
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  z-index: 3;
}

/* Table grows by content */
.ds-cal__table {
  width: max-content !important;
  min-width: 100% !important;
  table-layout: fixed !important;
}

/* ===== SHIFT CHIPS — fit cells, allow wrap ===== */
.ds-cal__td-day {
  text-align: center;
}
.ds-cal__td-day > * {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  max-width: 100% !important;
  box-sizing: border-box;
}
.ds-shift-cell {
  max-width: 100% !important;
  min-width: 0 !important;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* If multiple chips inside one day cell — stack with gap */
.ds-cal__td-day {
  display: table-cell;
}
.ds-cal__td-day-stack {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  padding: 4px;
}
.ds-cal__td-day-stack > .ds-shift-cell {
  width: 100%;
  justify-content: center;
}

/* Empty cell — keep small + visible only on hover */
.ds-shift-cell--empty {
  min-width: 28px !important;
  width: 28px !important;
  height: 28px !important;
}

/* ============================================================
   v3.3 — calendar WOW polish (2026-05-29)
   No template changes. Pure CSS.
   ============================================================ */

/* ===== 1. KILL EXCEL FEEL — softer grid ===== */
.ds-cal__table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.ds-cal__td-day,
.ds-cal__td-employee {
  border-bottom: 1px solid #EEF2F7 !important;
  border-right: 0 !important;
  border-left: 0 !important;
}
.ds-cal__th-day,
.ds-cal__th-employee {
  border-bottom: 1px solid #E5E7EB !important;
  border-right: 0 !important;
}
/* Soft zebra */
.ds-cal__row:nth-child(even) td:not(.ds-cal__td-employee) {
  background: #FAFBFC !important;
}
.ds-cal__row:nth-child(even) .ds-cal__td-employee {
  background: #FAFBFC !important;
}
.ds-cal__row:hover td:not(.ds-cal__td-employee) {
  background: rgba(219, 234, 254, 0.25) !important;
}
.ds-cal__row:hover .ds-cal__td-employee {
  background: #F1F5F9 !important;
}

/* ===== 2. EMPLOYEE COLUMN 240px sticky ===== */
.ds-cal__th-employee,
.ds-cal__td-employee {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  position: sticky !important;
  left: 0 !important;
  z-index: 5;
  box-shadow: 1px 0 0 #EEF2F7 !important;
}
.ds-cal__th-employee { z-index: 7; background: var(--ds-card-muted) !important; padding: 12px 18px !important; }
.ds-cal__td-employee { padding: 8px 18px !important; }

.ds-emp-tag {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
}
.ds-emp-tag__avatar {
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
  font-weight: 600;
  border-radius: 9999px;
  background: linear-gradient(135deg, #DBEAFE 0%, #EDE9FE 100%);
  color: var(--ds-primary);
  border: 1px solid #DBEAFE;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.ds-emp-tag__name {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--ds-text) !important;
  line-height: 1.2;
  letter-spacing: -0.005em;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-emp-tag__role {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ds-text-muted) !important;
  margin-top: 2px;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 3. 8-DAY VIEWPORT, min 130 max 160 ===== */
:root {
  --ds-cal-emp-w: 240px;
  --ds-cal-cell-w: clamp(130px, calc((100vw - var(--ds-sidebar-w, 220px) - 64px - 240px) / 8), 160px);
}
@media (max-width: 1023.98px) {
  :root { --ds-cal-cell-w: clamp(130px, calc((100vw - 32px - 240px) / 8), 160px); }
}
@media (max-width: 639.98px) {
  :root {
    --ds-cal-emp-w: 180px;
    --ds-cal-cell-w: clamp(120px, calc((100vw - 24px - 180px) / 8), 160px);
  }
}

.ds-cal__th-day,
.ds-cal__td-day {
  width: var(--ds-cal-cell-w) !important;
  min-width: var(--ds-cal-cell-w) !important;
  max-width: var(--ds-cal-cell-w) !important;
  padding: 6px 6px !important;
  vertical-align: middle !important;
  text-align: center !important;
}

/* ===== 4. SHIFT = EVENT BLOCK ===== */
.ds-cal__row { height: 60px !important; }

.ds-shift-cell {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 1px !important;
  height: 44px !important;
  min-width: 100px;
  max-width: calc(var(--ds-cal-cell-w) - 12px) !important;
  width: 100%;
  padding: 6px 10px 6px 12px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 150ms ease, box-shadow 150ms ease;
  letter-spacing: -0.005em;
}
.ds-shift-cell::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: currentColor;
  opacity: 0.6;
}
.ds-shift-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.12);
}
.ds-shift-cell__hours {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.ds-shift-cell__hours::before {
  display: inline-block;
  width: 12px; height: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
/* Status label via CSS pseudo on the parent */
.ds-shift-cell::after {
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* === STATUSES === */
.ds-shift-cell--assigned,
.ds-shift-cell--draft {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
}
.ds-shift-cell--assigned::after { content: 'Назначена'; }
.ds-shift-cell--assigned .ds-shift-cell__hours::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}

.ds-shift-cell--confirmed {
  background: #ECFDF5 !important;
  color: #15803D !important;
}
.ds-shift-cell--confirmed::after { content: 'Подтверждена'; }
.ds-shift-cell--confirmed .ds-shift-cell__hours::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

.ds-shift-cell--in_progress,
.ds-shift-cell--working {
  background: #ECFEFF !important;
  color: #0E7490 !important;
}
.ds-shift-cell--in_progress::after,
.ds-shift-cell--working::after { content: 'В работе'; }
.ds-shift-cell--in_progress .ds-shift-cell__hours::before,
.ds-shift-cell--working .ds-shift-cell__hours::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7490' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15 14'/></svg>");
}

.ds-shift-cell--waiting,
.ds-shift-cell--review,
.ds-shift-cell--awaiting_employee_confirmation,
.ds-shift-cell--awaiting_manager_confirmation {
  background: #FFF7ED !important;
  color: #C2410C !important;
}
.ds-shift-cell--waiting::after,
.ds-shift-cell--review::after,
.ds-shift-cell--awaiting_employee_confirmation::after,
.ds-shift-cell--awaiting_manager_confirmation::after { content: 'Требует проверки'; }
.ds-shift-cell--waiting .ds-shift-cell__hours::before,
.ds-shift-cell--review .ds-shift-cell__hours::before,
.ds-shift-cell--awaiting_employee_confirmation .ds-shift-cell__hours::before,
.ds-shift-cell--awaiting_manager_confirmation .ds-shift-cell__hours::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><line x1='12' y1='8' x2='12' y2='12'/><circle cx='12' cy='16' r='0.5' fill='%23C2410C'/></svg>");
}

.ds-shift-cell--issue,
.ds-shift-cell--failed {
  background: #FEF2F2 !important;
  color: #B91C1C !important;
}
.ds-shift-cell--issue::after,
.ds-shift-cell--failed::after { content: 'Невыход'; }
.ds-shift-cell--issue .ds-shift-cell__hours::before,
.ds-shift-cell--failed .ds-shift-cell__hours::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><line x1='9' y1='9' x2='15' y2='15'/><line x1='15' y1='9' x2='9' y2='15'/></svg>");
}

/* Sick — red outline soft */
.ds-shift-cell--abs-sick,
.ds-shift-cell--absence.ds-shift-cell--abs-sick,
.ds-shift-cell--absence[title*="ольнич"],
.ds-shift-cell--absence[title*="Sick"] {
  background: #FEF2F2 !important;
  color: #B91C1C !important;
  border: 1px solid #FCA5A5 !important;
}
.ds-shift-cell--abs-sick::after,
.ds-shift-cell--absence[title*="ольнич"]::after,
.ds-shift-cell--absence[title*="Sick"]::after { content: 'Больничный'; }
.ds-shift-cell--abs-sick .ds-shift-cell__abs-label,
.ds-shift-cell--absence[title*="ольнич"] .ds-shift-cell__abs-label {
  display: none;
}
.ds-shift-cell--abs-sick::before { background: #B91C1C; opacity: 0.5; }

/* Vacation — purple */
.ds-shift-cell--abs-vacation,
.ds-shift-cell--absence.ds-shift-cell--abs-vacation,
.ds-shift-cell--absence[title*="тпуск"],
.ds-shift-cell--absence[title*="Vacation"] {
  background: #F5F3FF !important;
  color: #6D28D9 !important;
}
.ds-shift-cell--abs-vacation::after,
.ds-shift-cell--absence[title*="тпуск"]::after { content: 'Отпуск'; }
.ds-shift-cell--abs-vacation .ds-shift-cell__abs-label,
.ds-shift-cell--absence[title*="тпуск"] .ds-shift-cell__abs-label { display: none; }

/* Absence text label fallback (when title doesn't match) */
.ds-shift-cell--absence .ds-shift-cell__abs-label {
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.85;
}

/* ===== 5. EMPTY CELL — hidden until row/cell hover ===== */
.ds-shift-cell--empty {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 28px !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px dashed transparent !important;
  background: transparent !important;
  border-radius: 8px !important;
  opacity: 0;
  transition: all 150ms ease;
  position: relative;
  color: var(--ds-text-faint);
}
.ds-shift-cell--empty::before {
  content: '+';
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  color: inherit;
  display: block;
  background: none !important;
}
.ds-cal__row:hover .ds-shift-cell--empty {
  opacity: 0.4;
  border-color: #CBD5E1 !important;
}
.ds-shift-cell--empty:hover {
  opacity: 1 !important;
  border-color: var(--ds-primary) !important;
  background: var(--ds-primary-soft) !important;
  color: var(--ds-primary);
  transform: scale(1.05);
}

/* ===== 6. TODAY — blue circle on header + soft column tint ===== */
/* CSS-only column highlight is not possible without column index attr.
   We add at least: bolder circle on the today header + soft top-bar marker. */
.ds-cal__th-day--today {
  background: linear-gradient(180deg, rgba(219,234,254,0.4) 0%, rgba(219,234,254,0) 100%) !important;
  position: relative;
}
.ds-cal__th-day--today::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 32px; height: 3px;
  background: var(--ds-primary);
  border-radius: 0 0 4px 4px;
}
.ds-cal__th-day--today .ds-cal__th-num {
  background: var(--ds-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}
/* Today shift cell — primary accent */
.ds-shift-cell--today {
  outline: 2px solid var(--ds-primary);
  outline-offset: -2px;
}

/* ===== 7. HEADER ===== */
.ds-cal__th-employee,
.ds-cal__th-day {
  background: var(--ds-card-muted) !important;
  padding: 12px 6px !important;
  border-bottom: 1px solid #E5E7EB !important;
}
.ds-cal__th-dow {
  display: block !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #9CA3AF !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ds-cal__th-num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ds-text) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  margin: 0 auto !important;
  font-variant-numeric: tabular-nums;
  transition: all 200ms ease;
}
.ds-cal__th-day--weekend { background: #F4F6FB !important; }
.ds-cal__th-day--weekend .ds-cal__th-num { color: #94A3B8 !important; }

/* Week grouping — extra space after weekend */
.ds-cal__th-day--weekend + .ds-cal__th-day:not(.ds-cal__th-day--weekend),
.ds-cal__td-day { /* td handled per column via nth-child not possible */ }
.ds-cal__th-day--weekend + .ds-cal__th-day:not(.ds-cal__th-day--weekend) {
  box-shadow: inset 2px 0 0 #D1D5DB;
}

/* ===== 8. WRAPPER + SCROLL POLISH ===== */
.ds-cal {
  border: 1px solid #EEF2F7;
  border-radius: 18px;
  background: var(--ds-card);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 8px 24px -8px rgba(15,23,42,0.06);
  overflow: hidden;
  position: relative;
}
.ds-cal__scroll {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}
.ds-cal__scroll::-webkit-scrollbar { height: 10px; }
.ds-cal__scroll::-webkit-scrollbar-track { background: #F8FAFC; }
.ds-cal__scroll::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
  border: 2px solid #F8FAFC;
  background-clip: padding-box;
}
.ds-cal__scroll::-webkit-scrollbar-thumb:hover { background: #94A3B8; background-clip: padding-box; }

/* Fade-out right edge */
.ds-cal::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40px; height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.95));
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  z-index: 3;
}

.ds-cal__table {
  width: max-content !important;
  min-width: 100% !important;
  table-layout: fixed !important;
}

/* ============================================================
   v3.4 — calendar vertical scroll + taller rows (2026-05-29)
   ============================================================ */

/* ===== 1. ROW HEIGHT 72px ===== */
.ds-cal__row {
  height: 72px !important;
  min-height: 72px;
}
.ds-cal__td-day,
.ds-cal__td-employee {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  vertical-align: middle !important;
}
.ds-cal__td-employee {
  padding: 14px 16px !important;
}

/* ===== 2. CALENDAR BODY VERTICAL SCROLL ===== */
.ds-cal__scroll {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: 68vh;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
  position: relative;
}

/* ===== 3. STICKY HEADER (top) + STICKY LEFT (employee col) + STICKY CORNER ===== */
.ds-cal__th-employee,
.ds-cal__th-day {
  position: sticky !important;
  top: 0 !important;
  z-index: 6;
  background: var(--ds-card-muted) !important;
}
.ds-cal__th-employee {
  left: 0 !important;
  z-index: 8 !important;       /* corner — above everything */
  box-shadow: 1px 0 0 #EEF2F7, 0 1px 0 #E5E7EB !important;
}
.ds-cal__th-day {
  box-shadow: 0 1px 0 #E5E7EB;
}

.ds-cal__td-employee {
  position: sticky !important;
  left: 0 !important;
  z-index: 4;
  background: var(--ds-card) !important;
  box-shadow: 1px 0 0 #EEF2F7 !important;
}
.ds-cal__row:nth-child(even) .ds-cal__td-employee { background: #FAFBFC !important; }
.ds-cal__row:hover .ds-cal__td-employee { background: #EFF6FF !important; }

/* ===== 4. HOVER ROW — soft blue tint ===== */
.ds-cal__row:hover td:not(.ds-cal__td-employee) {
  background: #F8FAFC !important;
}

/* ===== 5. WRAPPER OUTSIDE — keep rounded ===== */
.ds-cal {
  border: 1px solid #EEF2F7;
  border-radius: 18px;
  background: var(--ds-card);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 8px 24px -8px rgba(15,23,42,0.06);
  overflow: hidden;
  position: relative;
}

/* Fade-out at right edge — keep but don't overflow vertical scrollbar */
.ds-cal::after {
  content: '';
  position: absolute;
  top: 0;
  right: 12px;   /* leave room for v-scrollbar */
  width: 32px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.85));
  z-index: 3;
}

/* ===== 6. SCROLLBARS — refined ===== */
.ds-cal__scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.ds-cal__scroll::-webkit-scrollbar-track {
  background: #F8FAFC;
}
.ds-cal__scroll::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
  border: 2px solid #F8FAFC;
  background-clip: padding-box;
}
.ds-cal__scroll::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
  background-clip: padding-box;
}
.ds-cal__scroll::-webkit-scrollbar-corner {
  background: #F8FAFC;
}

/* ===== 7. EVENT BLOCK — make sure it fits taller row nicely ===== */
.ds-cal__td-day {
  text-align: center;
  vertical-align: middle !important;
}
.ds-cal__td-day > * {
  margin: 0 auto;
}
.ds-shift-cell {
  height: 44px !important;
  min-width: 0;
  max-width: calc(var(--ds-cal-cell-w) - 12px) !important;
  width: calc(100% - 8px);
}

/* Multi-event cell: vertical stack with gap 6px */
.ds-cal__td-day-stack {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  padding: 4px;
}
.ds-cal__td-day-stack > .ds-shift-cell {
  width: 100%;
  height: 38px !important;
}

/* If many events — let the row expand */
.ds-cal__row:has(.ds-cal__td-day-stack > *:nth-child(2)) {
  height: 88px !important;
}
.ds-cal__row:has(.ds-cal__td-day-stack > *:nth-child(3)) {
  height: 96px !important;
}

/* ===== 8. EMPTY CELL — invisible until cell hover only ===== */
.ds-shift-cell--empty {
  opacity: 0 !important;
  border: 1px dashed transparent !important;
}
.ds-cal__td-day:hover .ds-shift-cell--empty {
  opacity: 0.4 !important;
  border-color: #CBD5E1 !important;
}
.ds-shift-cell--empty:hover {
  opacity: 1 !important;
  border-color: var(--ds-primary) !important;
  background: var(--ds-primary-soft) !important;
  color: var(--ds-primary);
}

/* ============================================================
   RT-030 — Global textarea.ds-input (2026-06-11)
   Раньше textarea наследовала height: 32px от ".ds-page .ds-input",
   что превращало её визуально в однострочный input (~32px).
   Глобальный fix: full-width, comfortable multi-line, vertical resize.
   Применяется ко ВСЕМ textarea с классом .ds-input — раскатывает RT-028
   на /managers/settings/roles/{id}?tab=basic, /locations/*, и т.д.
   Чтобы получить компактный textarea (например chat-composer) — переопределять
   с более высокой специфичностью (см. .ds-chat-composer__input в requests_admin.css).
   ============================================================ */
.ds-page textarea.ds-input,
textarea.ds-input {
  width: 100%;
  height: auto;
  min-height: 96px;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.4;
  font-family: inherit;
  box-sizing: border-box;
}

/* ============================================================
   M4A — UI components (2026-06-12)
   4 новых компонента для Track B Phase 5 UI:
   - .ds-stat-mini (+ .ds-stat-strip)       — KPI mini-stat strip на /managers/org
   - .ds-impersonation-banner               — sticky View-As banner (ADR-0026)
   - .ds-tree-editor                        — tree editor для /managers/org (departments + teams)
   - .ds-onboarding-card                    — Dashboard onboarding checklist
   Все блоки используют только существующие --ds-* токены.
   Mockup ref: workspace/output_to_user/m4a_track_b_mockups/v2/mockup.html
   Spec ref:   workspace/output_to_user/m4a_track_b_mockups/v2/spec.md
   ============================================================ */

/* ----------- KPI mini-stat strip (C.5) ----------- */
.ds-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 14px;
}
@media (max-width: 720px) {
  .ds-stat-strip { grid-template-columns: repeat(2, 1fr); }
}
.ds-stat-mini {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--ds-shadow-sm);
}
.ds-stat-mini__ico {
  width: 34px;
  height: 34px;
  border-radius: var(--ds-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}
.ds-stat-mini__ico > svg,
.ds-stat-mini__ico > i[data-lucide] {
  width: 18px;
  height: 18px;
}
.ds-stat-mini__ico--info    { background: var(--ds-info-soft);    color: var(--ds-info-text); }
.ds-stat-mini__ico--success { background: var(--ds-success-soft); color: var(--ds-success-text); }
.ds-stat-mini__ico--warn    { background: var(--ds-warn-soft);    color: var(--ds-warn-text); }
.ds-stat-mini__ico--neutral { background: var(--ds-divider);      color: var(--ds-text-muted); }
.ds-stat-mini__body {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.ds-stat-mini__label {
  font-size: 11.5px;
  color: var(--ds-text-muted);
  font-weight: 500;
}
.ds-stat-mini__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ds-text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ----------- View-As banner / Impersonation (ADR-0026) ----------- */
/* Rendered в base.html когда request.state.session.impersonated_employee_id is set.
   Sticky top — над .ds-main, между .ds-mobile-header и .ds-app. */
.ds-impersonation-banner {
  position: relative;
  background: linear-gradient(90deg, #1E1B4B, #312E81);
  color: #FFFFFF;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 50;
}
.ds-impersonation-banner__chip {
  background: var(--ds-warn);
  color: #1F2937;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--ds-radius-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ds-impersonation-banner__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds-impersonation-banner__who {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: var(--ds-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ds-impersonation-banner__who b { font-weight: 700; }
.ds-impersonation-banner__arrow { color: #A5B4FC; width: 14px; height: 14px; }
.ds-impersonation-banner__timer {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  color: #E5E7EB;
  font-weight: 500;
}
.ds-impersonation-banner__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.20);
}
.ds-impersonation-banner__exit,
.ds-impersonation-banner__extend {
  margin-left: 10px;
  background: #FFFFFF;
  color: var(--ds-text);
  border: 0;
  border-radius: var(--ds-radius-sm);
  padding: 5px 12px;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.ds-impersonation-banner__exit:hover { background: #F3F4F6; }
.ds-impersonation-banner__extend {
  background: var(--ds-warn);
  color: #7C2D12;
}
.ds-impersonation-banner__extend:hover { background: #FBBF24; }
/* Warning state: < 5 минут до expire */
.ds-impersonation-banner--warning {
  background: linear-gradient(90deg, #7C2D12, #9A3412);
}
.ds-impersonation-banner--warning .ds-impersonation-banner__chip {
  background: var(--ds-warn);
  color: #7C2D12;
}
.ds-impersonation-banner--warning .ds-impersonation-banner__dot {
  background: var(--ds-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

/* ----------- Org tree editor (/managers/org) ----------- */
.ds-tree-editor {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-tree-editor__root {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ds-card-muted);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  margin-bottom: 8px;
}
.ds-tree-editor__root-ico { width: 18px; height: 18px; color: var(--ds-primary); }
.ds-tree-editor__root-name { font-size: 14.5px; font-weight: 700; }
.ds-tree-editor__root-meta {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ds-text-muted);
}

.ds-tree-editor__dept {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-card);
}
.ds-tree-editor__dept + .ds-tree-editor__dept { margin-top: 8px; }
.ds-tree-editor__dept-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
}
.ds-tree-editor__dept-chev {
  color: var(--ds-text-faint);
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}
.ds-tree-editor__dept-ico { width: 16px; height: 16px; color: var(--ds-primary); }
.ds-tree-editor__dept-name { font-weight: 600; font-size: 14px; }
.ds-tree-editor__dept-count {
  margin-left: 6px;
  color: var(--ds-text-faint);
  font-size: 11.5px;
}
.ds-tree-editor__dept-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.ds-tree-editor__dept-head:hover .ds-tree-editor__dept-actions { opacity: 1; }
.ds-tree-editor__dept--open .ds-tree-editor__dept-chev { transform: rotate(90deg); }
.ds-tree-editor__dept--open .ds-tree-editor__dept-body { display: block; }
.ds-tree-editor__dept-body {
  display: none;
  border-top: 1px solid var(--ds-divider);
  background: var(--ds-card-muted);
  border-radius: 0 0 var(--ds-radius-md) var(--ds-radius-md);
  padding: 6px 10px 10px 36px;
}
/* Inline-edit state — клик на name → input + Save/Cancel */
.ds-tree-editor__dept--editing .ds-tree-editor__dept-head {
  background: var(--ds-primary-soft);
}
.ds-tree-editor__name-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.ds-tree-editor__name-edit input {
  height: 30px;
  padding: 0 10px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
  color: var(--ds-text);
  min-width: 240px;
  background: var(--ds-card);
}
.ds-tree-editor__name-edit input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ds-tree-editor__team {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--ds-radius-sm);
}
.ds-tree-editor__team:hover { background: var(--ds-card); }
.ds-tree-editor__team-ico { width: 14px; height: 14px; color: var(--ds-success); }
.ds-tree-editor__team-name { font-size: 13.5px; }
.ds-tree-editor__team-count {
  color: var(--ds-text-faint);
  font-size: 11.5px;
  margin-left: 4px;
}
.ds-tree-editor__team-actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
  opacity: 0;
}
.ds-tree-editor__team:hover .ds-tree-editor__team-actions { opacity: 1; }

.ds-tree-editor__icon-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--ds-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-text-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
.ds-tree-editor__icon-btn:hover {
  background: var(--ds-divider);
  color: var(--ds-text);
}
.ds-tree-editor__icon-btn--danger:hover {
  background: var(--ds-danger-soft);
  color: var(--ds-danger-text);
}
.ds-tree-editor__icon-btn > svg,
.ds-tree-editor__icon-btn > i[data-lucide] { width: 14px; height: 14px; }

.ds-tree-editor__add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: var(--ds-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--ds-radius-sm);
}
.ds-tree-editor__add:hover { background: var(--ds-primary-soft); }
.ds-tree-editor__add--big {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  justify-content: center;
}

/* Inline new-team form внутри department body */
.ds-tree-editor__newteam {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--ds-card);
  border: 1px dashed var(--ds-primary);
  border-radius: var(--ds-radius-sm);
  margin-top: 4px;
}
.ds-tree-editor__newteam input {
  flex: 1;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border-strong);
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.ds-tree-editor__newteam input:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ----------- Onboarding checklist (C.3) ----------- */
.ds-onboarding-card {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  padding: 18px 20px;
  margin: 0 0 18px;
  position: relative;
}
.ds-onboarding-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
}
.ds-onboarding-card__ico {
  width: 38px;
  height: 38px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-primary-soft);
  color: var(--ds-primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
}
.ds-onboarding-card__ico > svg,
.ds-onboarding-card__ico > i[data-lucide] { width: 20px; height: 20px; }
.ds-onboarding-card__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}
.ds-onboarding-card__sub {
  font-size: 12.5px;
  color: var(--ds-text-muted);
  margin: 2px 0 0;
}
.ds-onboarding-card__dismiss {
  position: absolute;
  top: 14px;
  right: 14px;
}
.ds-onboarding-card__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 14px;
}
.ds-onboarding-card__bar {
  flex: 1;
  height: 6px;
  background: var(--ds-divider);
  border-radius: 9999px;
  overflow: hidden;
}
.ds-onboarding-card__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ds-primary), #60A5FA);
  border-radius: 9999px;
  transition: width 0.25s ease;
}
.ds-onboarding-card__pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
}
.ds-onboarding-card__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 720px) {
  .ds-onboarding-card__list { grid-template-columns: 1fr; }
}
.ds-onboarding-card__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text);
  font-size: 13.5px;
  cursor: pointer;
  border: 1px solid transparent;
}
.ds-onboarding-card__item:hover {
  background: var(--ds-card-muted);
  border-color: var(--ds-border);
}
.ds-onboarding-card__step-ico { width: 20px; height: 20px; flex: 0 0 20px; }
.ds-onboarding-card__step-num {
  font-size: 11px;
  color: var(--ds-text-faint);
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
  width: 14px;
}
.ds-onboarding-card__cta {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ds-primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}
/* Done state */
.ds-onboarding-card__item--done { color: var(--ds-text-muted); }
.ds-onboarding-card__item--done .ds-onboarding-card__step-ico { color: var(--ds-success); }
.ds-onboarding-card__item--done .ds-onboarding-card__step-label {
  text-decoration: line-through;
  text-decoration-color: var(--ds-text-faint);
}
.ds-onboarding-card__item--done .ds-onboarding-card__cta { display: none; }
/* Next (first undone) state */
.ds-onboarding-card__item--next {
  background: var(--ds-primary-soft);
  border-color: var(--ds-info-soft);
}
.ds-onboarding-card__item--next .ds-onboarding-card__step-ico { color: var(--ds-primary); }
.ds-onboarding-card__item--next .ds-onboarding-card__step-label {
  font-weight: 600;
  color: var(--ds-primary-600);
}
/* Pending (later undone) state */
.ds-onboarding-card__item--pending .ds-onboarding-card__step-ico { color: var(--ds-text-faint); }
.ds-onboarding-card__item--pending .ds-onboarding-card__cta { color: var(--ds-text-faint); }

/* ============================================================
   M5.4 — OPS-CENTER (Операционный центр) — append-only block
   Source mockup: workspace/m5_4_operations_mockup.webp
   Target: /home/ductor/services/admin/static/css/design_system.css
   Date: 2026-06-14
   All colors via existing --ds-* tokens.
   ============================================================ */


/* ----- Page wrapper ----- */
.ds-ops {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 0 36px;   /* horizontal gutter comes from .ds-main (global 20px) */
  max-width: none;
  margin: 0;
}


/* ----- Header (title + period + refreshed) ----- */
.ds-ops__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;   /* + .ds-ops gap 18 = 36px title->content */
}
.ds-ops__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ds-text);
  margin: 0 0 10px;
}
.ds-ops__refreshed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ds-text-muted);
  margin-top: 6px;
}
.ds-ops__refreshed > i,
.ds-ops__refreshed > [data-lucide] {
  width: 14px;
  height: 14px;
}

.ds-ops-period {
  display: inline-flex;
  gap: 8px;
}
.ds-ops-period__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--ds-radius-md, 10px);
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  color: var(--ds-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ds-ops-period__btn:hover {
  background: var(--ds-bg);
}
.ds-ops-period__btn.is-active {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: var(--ds-card);
}
.ds-ops-period__btn > i,
.ds-ops-period__btn > [data-lucide] {
  width: 14px;
  height: 14px;
}


/* ----- KPI group header ----- */
.ds-ops-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-ops-group__head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
}
.ds-ops-group__head > i,
.ds-ops-group__head > [data-lucide] {
  width: 14px;
  height: 14px;
}
.ds-ops-group__head--problems > [data-lucide],
.ds-ops-group__head--problems > i { color: var(--ds-danger); }
.ds-ops-group__head--status > [data-lucide],
.ds-ops-group__head--status > i { color: var(--ds-info); }


/* ----- KPI strip: 5+2 cards in a single row, responsive ----- */
.ds-ops-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr) 14px repeat(2, 1fr);
  gap: 10px;
}
.ds-ops-kpi-row__divider {
  /* visual gap between «Проблемы» (5) and «Состояние» (2) groups */
  width: 1px;
  background: var(--ds-border);
  align-self: stretch;
  justify-self: center;
}
@media (max-width: 1180px) {
  .ds-ops-kpi-row {
    grid-template-columns: repeat(4, 1fr);
  }
  .ds-ops-kpi-row__divider { display: none; }
}
@media (max-width: 760px) {
  .ds-ops-kpi-row { grid-template-columns: repeat(2, 1fr); }
}


/* ----- KPI card ----- */
.ds-ops-kpi {
  display: block;
  padding: 14px 14px 14px;
  border-radius: 14px;
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  text-decoration: none;
  color: var(--ds-text);
  position: relative;
  transition: transform 120ms ease, box-shadow 120ms ease;
  cursor: pointer;
}
.ds-ops-kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-lift,
                0 1px 2px rgba(15, 23, 42, 0.06),
                0 4px 14px rgba(15, 23, 42, 0.08));
}
.ds-ops-kpi__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ds-ops-kpi__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-ops-kpi__icon > i,
.ds-ops-kpi__icon > [data-lucide] {
  width: 16px;
  height: 16px;
}
.ds-ops-kpi__value {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
  letter-spacing: -0.01em;
  line-height: 1;
}
.ds-ops-kpi__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
  margin: 6px 0 4px;
  line-height: 1.25;
}
.ds-ops-kpi__sub {
  font-size: 11.5px;
  color: var(--ds-text-muted);
  line-height: 1.4;
  padding-right: 14px;
  min-height: 28px;
}
.ds-ops-kpi__chev {
  position: absolute;
  right: 12px;
  bottom: 14px;
  width: 14px;
  height: 14px;
  color: var(--ds-text-faint);
}

/* Color variants — pale tinted bg + matching icon color */
.ds-ops-kpi--orange   { background: var(--ds-warn-soft);    }
.ds-ops-kpi--orange   .ds-ops-kpi__icon {
  background: rgba(245, 158, 11, 0.18); color: var(--ds-orange-text, var(--ds-warn-text));
}
.ds-ops-kpi--yellow   { background: var(--ds-warn-soft);    }
.ds-ops-kpi--yellow   .ds-ops-kpi__icon {
  background: rgba(245, 158, 11, 0.18); color: var(--ds-warn-text);
}
.ds-ops-kpi--red      { background: var(--ds-danger-soft);  }
.ds-ops-kpi--red      .ds-ops-kpi__icon {
  background: rgba(239, 68, 68, 0.16); color: var(--ds-danger-text);
}
.ds-ops-kpi--blue     { background: var(--ds-info-soft);    }
.ds-ops-kpi--blue     .ds-ops-kpi__icon {
  background: rgba(59, 130, 246, 0.18); color: var(--ds-info-text);
}
.ds-ops-kpi--critical { background: var(--ds-danger-soft);  }
.ds-ops-kpi--critical .ds-ops-kpi__icon {
  background: rgba(239, 68, 68, 0.16); color: var(--ds-danger-text);
}
.ds-ops-kpi--green    { background: var(--ds-success-soft); }
.ds-ops-kpi--green    .ds-ops-kpi__icon {
  background: rgba(16, 185, 129, 0.18); color: var(--ds-success-text);
}
.ds-ops-kpi--purple   { background: var(--ds-purple-soft, #F3E8FF); }
.ds-ops-kpi--purple   .ds-ops-kpi__icon {
  background: rgba(168, 85, 247, 0.18); color: var(--ds-purple-text, #6D28D9);
}


/* ============================================================
   Main row — 2-col 50/50: «Требуют внимания» + «Сейчас на смене»
   ============================================================ */

.ds-ops-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px) {
  .ds-ops-main { grid-template-columns: 1fr; }
}


/* ----- Block (shared shell) ----- */
.ds-ops-block {
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ds-ops-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
}
.ds-ops-block__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-text);
}
.ds-ops-block__title > i,
.ds-ops-block__title > [data-lucide] { width: 16px; height: 16px; }

.ds-ops-block__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ds-text-muted);
  text-decoration: none;
  font-weight: 500;
}
.ds-ops-block__link:hover { color: var(--ds-text); }
.ds-ops-block__link > i,
.ds-ops-block__link > [data-lucide] { width: 13px; height: 13px; }

/* Header tints per mockup */
.ds-ops-block--attention .ds-ops-block__head { background: var(--ds-danger-soft); }
.ds-ops-block--attention .ds-ops-block__title > [data-lucide],
.ds-ops-block--attention .ds-ops-block__title > i { color: var(--ds-danger); }

.ds-ops-block--onshift   .ds-ops-block__head { background: var(--ds-info-soft); }
.ds-ops-block--onshift   .ds-ops-block__title > [data-lucide],
.ds-ops-block--onshift   .ds-ops-block__title > i { color: var(--ds-info-text); }

.ds-ops-block--events    .ds-ops-block__head { background: var(--ds-neutral-soft, #F1F5F9); }
.ds-ops-block--events    .ds-ops-block__title > [data-lucide],
.ds-ops-block--events    .ds-ops-block__title > i { color: var(--ds-text-muted); }


/* ----- Attention rows ----- */
.ds-ops-attn { padding: 4px 0; }
.ds-ops-attn__row {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  text-decoration: none;
  color: var(--ds-text);
  transition: background 120ms ease;
  border-top: 1px solid var(--ds-divider);
}
.ds-ops-attn__row:first-child { border-top: 0; }
.ds-ops-attn__row:hover { background: var(--ds-bg); }
.ds-ops-attn__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-danger-soft);
  color: var(--ds-danger);
}
.ds-ops-attn__icon > i,
.ds-ops-attn__icon > [data-lucide] { width: 16px; height: 16px; }
.ds-ops-attn__icon--warn { background: var(--ds-warn-soft);   color: var(--ds-warn-text); }
.ds-ops-attn__icon--info { background: var(--ds-info-soft);   color: var(--ds-info-text); }
.ds-ops-attn__icon--blue { background: var(--ds-primary-soft); color: var(--ds-primary-600); }

.ds-ops-attn__body { display: flex; flex-direction: column; min-width: 0; }
.ds-ops-attn__label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ds-text);
  line-height: 1.2;
}
.ds-ops-attn__sub {
  font-size: 12px;
  color: var(--ds-text-muted);
  line-height: 1.35;
  margin-top: 2px;
}
.ds-ops-attn__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ds-danger-soft);
  color: var(--ds-danger-text);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ds-ops-attn__chev {
  width: 16px;
  height: 16px;
  color: var(--ds-text-faint);
}

/* ============================================================
   M5.2 — Calendar tenant patch (2026-06-13)
   Per mockup workspace/output_to_user/m5_calendar_target_mockup.webp
   Append at the end of static/css/design_system.css.

   Adds:
     - Period bar + Week/Month range toggle (.ck-period-bar / .ck-range-toggle)
     - Open Shifts integrated row (.os-row + .os-card priority variants)
     - Employee row avatar + name + role (.ck-emp)
     - Day-header today highlight + week-view month suffix
   Uses ONLY existing --ds-* tokens. No new color variables.
   ============================================================ */

/* ----------- Period bar (above calendar card) ----------- */
.ck-period-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  margin: 16px 0 12px;
  font-size: 13px;
}
.ck-period-bar__label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ck-period-bar__key {
  font-weight: 600;
  color: var(--ds-text);
}
.ck-period-bar__sep {
  color: var(--ds-text-faint);
}
.ck-period-bar__dates {
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}
.ck-period-bar__count {
  color: var(--ds-text-muted);
  font-size: 12px;
}
.ck-period-bar__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  color: var(--ds-text-muted);
  text-decoration: none;
  border-radius: var(--ds-radius-sm);
  font-size: 16px;
  line-height: 1;
}
.ck-period-bar__next:hover {
  background: var(--ds-bg);
  color: var(--ds-text);
}

/* ----------- Range toggle (Неделя / Месяц) ----------- */
.ck-range-toggle {
  display: inline-flex;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  padding: 3px;
}
.ck-range-toggle__btn {
  background: transparent;
  border: none;
  padding: 5px 14px;
  border-radius: calc(var(--ds-radius-md) - 4px);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ds-text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.ck-range-toggle__btn:hover:not(.is-active) {
  color: var(--ds-text);
}
.ck-range-toggle__btn.is-active {
  background: var(--ds-card);
  color: var(--ds-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* ----------- Day header — today + week-view month suffix ----------- */
.ck-th-day {
  vertical-align: middle;
  padding: 8px 4px !important;
}
.ck-th-day__dow {
  font-size: 10.5px;
  color: var(--ds-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.ck-th-day__num {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 9999px;
  min-width: 28px;
}
.ck-th-day__num.is-today-badge {
  background: var(--ds-primary, #2563EB);
  color: #fff;
}
.ck-th-day.is-weekend .ck-th-day__dow,
.ck-th-day.is-weekend .ck-th-day__num {
  color: #DC2626;
}
.ck-th-day.is-weekend .ck-th-day__num.is-today-badge {
  color: #fff;
}
.ck-th-total {
  background: var(--ds-bg);
  font-weight: 600;
  color: var(--ds-text-muted);
  font-size: 12px;
}

/* ----------- Open Shifts row (integrated into grid) ----------- */
.ck-grid .os-row > td {
  vertical-align: top;
  padding: 8px 6px;
  background: var(--ds-card);
}
.ck-grid .os-row__head {
  background: var(--ds-bg) !important;
  vertical-align: top !important;
  padding: 12px !important;
  text-align: left !important;
  position: sticky;
  left: 0;
  z-index: 2;
}
.os-row__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text);
  line-height: 1.2;
}
.os-row__count {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--ds-danger-soft);
  color: var(--ds-danger-text);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ds-ops-attn__chev {
  width: 16px;
  height: 16px;
  color: var(--ds-text-faint);
}


/* ----- On-shift block ----- */
.ds-ops-onshift {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ds-ops-onshift__big-label {
  font-size: 13px;
  color: var(--ds-text-muted);
}
.ds-ops-onshift__big-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--ds-text);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-top: 4px;
}
.ds-ops-onshift__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.os-row__cell {
  vertical-align: top !important;
  padding: 6px 4px !important;
  min-width: 130px;
  background: var(--ds-card);
}
.os-row__cell.is-weekend {
  background: #FEFAFA;
}
.os-row__stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ds-ops-onshift__item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ds-text);
  padding: 4px 0;
}
.ds-ops-onshift__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* background applied via inline style="background:<color>" */
  background: var(--ds-text-faint);
}
.ds-ops-onshift__name {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}
.ds-ops-onshift__line {
  display: block;
  border-bottom: 1px dotted var(--ds-border-strong, var(--ds-border));
  flex: 1;
  height: 8px;
  margin: 0 6px;
}
.ds-ops-onshift__name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.ds-ops-onshift__count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
}
.ds-ops-onshift__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 40px;
  margin-top: 6px;
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.ds-ops-onshift__btn:hover {
  background: var(--ds-bg);
  border-color: var(--ds-border-strong, var(--ds-border));
}
.ds-ops-onshift__btn > i,
.ds-ops-onshift__btn > [data-lucide] { width: 13px; height: 13px; }


/* ----- Events block ----- */
.ds-ops-events__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  padding: 8px 18px 18px;
}
@media (max-width: 760px) {
  .ds-ops-events__grid { grid-template-columns: 1fr; }
}
.ds-ops-events__row {
  display: grid;
  grid-template-columns: 56px 30px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--ds-text);
}
.ds-ops-events__ts {
  font-size: 12px;
  color: var(--ds-text-muted);
  font-variant-numeric: tabular-nums;
}
.ds-ops-events__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ds-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-muted);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.ds-ops-events__avatar > img {
  width: 100%; height: 100%; object-fit: cover;
}
.ds-ops-events__avatar--bot {
  background: var(--ds-info-soft);
  color: var(--ds-info-text);
}
.ds-ops-events__text {
  font-size: 13px;
  color: var(--ds-text);
  line-height: 1.35;
}
.os-row__total {
  background: var(--ds-bg) !important;
  font-weight: 600;
  color: var(--ds-text);
  text-align: center;
  vertical-align: top !important;
  padding: 12px !important;
}

/* ----------- Open Shift card ----------- */
.os-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-border-strong);
  border-radius: 8px;
  padding: 8px 10px 8px 11px;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.12s, border-color 0.12s, transform 0.08s;
  font-size: 12px;
  color: var(--ds-text);
}
.os-card:hover {
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}
.os-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.os-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-text);
  line-height: 1.25;
}
.os-card__sub {
  font-size: 11px;
  color: var(--ds-text-muted);
  line-height: 1.3;
}
.os-card__time {
  font-size: 11.5px;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.os-card__priority {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
}
.os-card__priority-icon {
  font-size: 11px;
  line-height: 1;
}
.os-card__priority-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.os-card__cta {
  margin-top: 8px;
  width: 100%;
  padding: 5px 8px;
  background: var(--ds-card);
  border: 1px solid var(--ds-border-strong);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ds-text);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.os-card__cta:hover {
  background: var(--ds-bg);
  border-color: var(--ds-text-muted);
}

/* Priority variants — left stripe + chip colour */
.os-card--high {
  border-left-color: #DC2626;
}
.os-card--high .os-card__priority { color: #DC2626; }

.os-card--medium {
  border-left-color: #EA580C;
}
.os-card--medium .os-card__priority { color: #EA580C; }

.os-card--low {
  border-left-color: #2563EB;
}
.os-card--low .os-card__priority { color: #2563EB; }

/* ----------- Employee row — avatar + name + role ----------- */
.ck-grid .ck-employee-head {
  padding: 10px 12px !important;
}
.ck-emp {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ds-text);
}
.ck-emp__avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ck-emp__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.ck-emp__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-emp__role {
  font-size: 11px;
  color: var(--ds-text-muted);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* ----------- Legacy os-zone* — hidden (replaced by .os-row*) ----------- */
.os-zone { display: none !important; }
/* ============================================================
   M5.2 — Unified calendar cell card (admin + tenant canal)
   Date: 2026-06-14
   PO directive verbatim: «название, объект, время смены 09:00-18:00,
   кол-во часов (9ч). Пример: Уборка, Профсоюзов, 25, 09:00-18:00, 9ч».

   Single CSS class `.cal-cell-card` used by BOTH _workspace_calendar.html
   (admin) and managers_checklist_tenant.html (tenant) — identical visual.
   Replaces the divergent `.ds-shift-cell--*` (admin) and `.ck-cell.has-shift`
   (tenant) inner content; outer <td> sizing classes are unchanged.

   Append-only block, safe to add at end of design_system.css.
   ============================================================ */

/* ----- Cell shell ----- */
.cal-cell-card {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px 6px 10px;
  background: #F8FAFC;
  border: 1px solid var(--ds-border, #E5E7EB);
  border-left: 3px solid #94A3B8;  /* default stripe — overridden by --state */
  border-radius: 8px;
  min-height: 84px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ds-text, #0F172A);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.1s ease, transform 0.06s ease;
  box-sizing: border-box;
  position: relative;
}
.cal-cell-card:hover {
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
}

.cal-cell-card__role {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-text, #0F172A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-cell-card__loc {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text, #0F172A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-cell-card__addr {
  font-size: 10.5px;
  color: var(--ds-text-muted, #64748B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-cell-card__time {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text, #0F172A);
  margin-top: 1px;
}
.cal-cell-card__hours {
  font-size: 10.5px;
  color: var(--ds-text-muted, #64748B);
}

/* Today highlight — additive */
.cal-cell-card--today {
  outline: 2px solid var(--ds-primary, #2563EB);
  outline-offset: -1px;
}

/* ----- State stripe colors (assignment.state) ----- */

/* assigned — blue */
.cal-cell-card--assigned {
  background: #EFF6FF;
  border-color: #DBEAFE;
  border-left-color: #2563EB;
}
.cal-cell-card--assigned .cal-cell-card__time { color: #1D4ED8; }

/* confirmed — green */
.cal-cell-card--confirmed {
  background: #ECFDF5;
  border-color: #D1FAE5;
  border-left-color: #10B981;
}
.cal-cell-card--confirmed .cal-cell-card__time { color: #047857; }

/* in_progress — cyan */
.cal-cell-card--in_progress {
  background: #ECFEFF;
  border-color: #CFFAFE;
  border-left-color: #06B6D4;
}
.cal-cell-card--in_progress .cal-cell-card__time { color: #0E7490; }

/* waiting / submitted — amber */
.cal-cell-card--waiting,
.cal-cell-card--submitted {
  background: #FEF3C7;
  border-color: #FDE68A;
  border-left-color: #F59E0B;
}
.cal-cell-card--waiting .cal-cell-card__time,
.cal-cell-card--submitted .cal-cell-card__time { color: #B45309; }

/* issue / no_show — red */
.cal-cell-card--issue,
.cal-cell-card--no_show {
  background: #FEF2F2;
  border-color: #FECACA;
  border-left-color: #DC2626;
}
.cal-cell-card--issue .cal-cell-card__time,
.cal-cell-card--no_show .cal-cell-card__time { color: #B91C1C; }

/* cancelled — grey + strikethrough time */
.cal-cell-card--cancelled {
  background: #F8FAFC;
  border-color: #E5E7EB;
  border-left-color: #94A3B8;
  opacity: 0.72;
}
.cal-cell-card--cancelled .cal-cell-card__time {
  text-decoration: line-through;
  text-decoration-color: #94A3B8;
}

/* ----- Absence variants (vacation / sick / dayoff) ----- */
.cal-cell-card--absence {
  background: #F1F5F9;
  border-color: #E2E8F0;
  border-left-color: #94A3B8;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-muted, #64748B);
  gap: 4px;
}
.cal-cell-card--absence .cal-cell-card__abs-icon {
  font-size: 16px; opacity: 0.7;
}
.cal-cell-card--absence .cal-cell-card__abs-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cal-cell-card--abs-vacation {
  background: #F5F3FF;
  border-color: #EDE9FE;
  border-left-color: #8B5CF6;
  color: #5B21B6;
}
.cal-cell-card--abs-sick {
  background: #FFF1F2;
  border-color: #FFE4E6;
  border-left-color: #BE185D;
  color: #9F1239;
}
.cal-cell-card--abs-dayoff {
  background: #F1F5F9;
  border-color: #E2E8F0;
  border-left-color: #94A3B8;
  color: #475569;
}

/* ----- Empty cell — subtle "+", appears on hover ----- */
.cal-cell-card--empty {
  background: transparent;
  border: 1px dashed transparent;
  min-height: 84px;
  align-items: center;
  justify-content: center;
  color: var(--ds-text-faint, #94A3B8);
  opacity: 0.30;
  transition: opacity 0.15s ease, background 0.15s ease,
              border-color 0.15s ease, color 0.15s ease;
}
.cal-cell-card--empty:hover {
  opacity: 1;
  background: var(--ds-primary-soft, #EFF6FF);
  border: 1px solid var(--ds-primary, #2563EB);
  border-left-width: 3px;
  color: var(--ds-primary, #2563EB);
  box-shadow: none;
  transform: none;
}
.cal-cell-card__plus {
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
}

/* ----- Cell markers (right-top corner dots) ----- */
.cal-cell-card__markers {
  position: absolute;
  top: 5px;
  right: 6px;
  display: flex;
  gap: 3px;
}
.cal-cell-card__markers .ds-cell-marker,
.cal-cell-card__markers .cal-cell-marker {
  width: 5px; height: 5px; border-radius: 50%; display: inline-block;
}
.cal-cell-card__markers .cal-cell-marker--comment { background: #3B82F6; }
.cal-cell-card__markers .cal-cell-marker--partial { background: #F59E0B; }
.cal-cell-card__markers .cal-cell-marker--risk    { background: #DC2626; }

/* ----- TD container compat — grow to fit card ----- */
.ds-cal__td-day,
.ck-cell {
  vertical-align: top;
  padding: 4px;
  height: auto !important;     /* override legacy fixed height (.ck-cell height:36) */
  min-height: 92px;
}
.ck-cell { color: inherit; }     /* drop ck-cell's text-color override */
.ck-cell.has-shift,
.ck-cell.is-weekend,
.ck-cell.is-cancelled {
  /* legacy background helpers no longer used when .cal-cell-card is the
     content; null them out to avoid double-tinting. */
  background: transparent !important;
}

/* Outer <td> hover effect (was on .ck-cell) — moved to inner card. */
.ck-cell:hover { background: transparent !important; outline: none !important; }

/* M5.2 — Open Shift bundle badge «×N» — top-right corner of os-card. */
.os-card__multi {
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-text);
  background: var(--ds-card, #FFFFFF);
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
  pointer-events: none;
}
/* ============================================================
   M5.2 — Unified button design system (tenant calendar)
   Date: 2026-06-14
   PO directive: «давай по дизайну все кнопки красивыми сделаем,
                  во всех формах и окнах».
   Reference: workspace/output_to_user/m52_button_design_reference.webp

   ─── BUTTON SCALE ───────────────────────────────────────────
   .ds-btn               40px tall · 14px text · 10px radius
   .ds-btn--compact      34px tall · 13px text · 8px radius (toolbar)
   .ds-btn--card-cta     30px tall · 12.5px text · 6px radius (in-card)
   .ds-btn--icon-only    36×36 · 8px radius (close ×, kebab)

   ─── PALETTE (--ds-* tokens ONLY) ────────────────────────────
   primary fill         --ds-primary           bg
   primary fill hover   --ds-primary-600       darker
   primary text         var(--ds-card, #fff)   white-on-blue
   secondary outline    --ds-border / --ds-bg  light surface
   secondary text       --ds-text              dark slate
   ghost                transparent / --ds-bg  no border
   danger outline       --ds-danger            ring
   danger fill          --ds-danger-soft       light pink wash
   danger text          --ds-danger-text       dark red

   ─── ICON ALIGNMENT ─────────────────────────────────────────
   Default: icon LEFT of label, 6px gap.
   Stacked (--stacked): icon ABOVE label (for danger «Удалить все
   смены группы» per reference), 6px gap, vertical center.

   All buttons share:
     · font-family: inherit
     · font-weight: 600
     · transitions: bg 120ms, border 120ms, color 120ms
     · cursor: pointer (default: not-allowed)
     · disabled: opacity .55 + cursor not-allowed
   ============================================================ */


/* ----- Base ----- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--ds-radius-md, 10px);
  border: 1px solid transparent;
  background: var(--ds-card, #FFFFFF);
  color: var(--ds-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease,
              color 120ms ease, box-shadow 120ms ease;
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
  text-decoration: none;
}
.ds-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ds-primary-soft, rgba(37, 99, 235, 0.22));
}
.ds-btn[disabled],
.ds-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ds-btn > i,
.ds-btn > svg,
.ds-btn > [data-lucide] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ----- Primary (filled) ----- */
.ds-btn--primary {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  /* --ds-card is the white surface token (#FFFFFF); reuse for token-driven white-on-blue */
  color: var(--ds-card, #FFFFFF);
}
.ds-btn--primary:hover {
  background: var(--ds-primary-600, var(--ds-primary));
  border-color: var(--ds-primary-600, var(--ds-primary));
}

/* ----- Secondary (outline) ----- */
.ds-btn--secondary {
  background: var(--ds-card, #FFFFFF);
  border-color: var(--ds-border);
  color: var(--ds-text);
}
.ds-btn--secondary:hover {
  background: var(--ds-bg);
  border-color: var(--ds-border-strong, var(--ds-border));
}

/* ----- Ghost (no border, text-only) ----- */
.ds-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ds-text-muted);
}
.ds-btn--ghost:hover {
  background: var(--ds-bg);
  color: var(--ds-text);
}

/* ----- Danger (red outline + soft hover) ----- */
.ds-btn--danger {
  background: var(--ds-card, #FFFFFF);
  border-color: var(--ds-danger);
  color: var(--ds-danger-text, var(--ds-danger));
}
.ds-btn--danger:hover {
  background: var(--ds-danger-soft);
  border-color: var(--ds-danger);
}
.ds-btn--danger-fill {
  background: var(--ds-danger);
  border-color: var(--ds-danger);
  color: var(--ds-card, #FFFFFF);
}
.ds-btn--danger-fill:hover {
  /* Token-free darken via CSS filter — no color literal needed. */
  filter: brightness(0.93);
}

/* ----- Stacked layout (icon ABOVE label) per reference «Удалить все смены группы» ----- */
.ds-btn--stacked {
  flex-direction: column;
  gap: 6px;
  height: auto;
  min-height: 64px;
  padding: 10px 18px;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}
.ds-btn--stacked > i,
.ds-btn--stacked > svg,
.ds-btn--stacked > [data-lucide] {
  width: 18px;
  height: 18px;
}

/* ----- Size modifiers ----- */
.ds-btn--compact {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: var(--ds-radius-sm, 8px);
}
.ds-btn--compact > i,
.ds-btn--compact > svg,
.ds-btn--compact > [data-lucide] {
  width: 14px;
  height: 14px;
}
.ds-btn--card-cta {
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--ds-border-strong, var(--ds-border));
  background: var(--ds-card, #FFFFFF);
  color: var(--ds-primary);
  width: 100%;
}
.ds-btn--card-cta:hover {
  background: var(--ds-primary-soft);
  border-color: var(--ds-primary);
  color: var(--ds-primary-600, var(--ds-primary));
}
.ds-btn--card-cta > i,
.ds-btn--card-cta > svg,
.ds-btn--card-cta > [data-lucide] {
  width: 13px;
  height: 13px;
}

/* ----- Icon-only (×close, kebab) ----- */
.ds-btn--icon-only {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--ds-radius-sm, 8px);
  color: var(--ds-text-muted);
  background: transparent;
  border: 0;
}
.ds-btn--icon-only:hover {
  background: var(--ds-bg);
  color: var(--ds-text);
}
.ds-btn--icon-only > i,
.ds-btn--icon-only > svg,
.ds-btn--icon-only > [data-lucide] {
  width: 18px;
  height: 18px;
}


/* ----- Button row container (consistent gap) ----- */
.ds-btn-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ds-btn-row--end { justify-content: flex-end; }
.ds-btn-row--between {
  justify-content: space-between;
  flex-wrap: wrap;
}


/* ============================================================
   ADOPTION OVERRIDES — adopt unified look on existing classes
   without touching template markup. Append-only, more-specific
   selectors win cleanly over legacy inline styles.
   ============================================================ */


/* ----- M4A.6.5 ck-modal buttons (assign / manage / dev modals) ----- */
.ck-modal-btn,
.ck-modal .ck-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-width: 100px;
  padding: 0 16px;
  border-radius: var(--ds-radius-md, 10px);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.ck-modal-btn > i,
.ck-modal-btn > svg,
.ck-modal-btn > [data-lucide] {
  width: 16px;
  height: 16px;
}
.ck-modal-btn--ghost,
.ck-modal .ck-modal-btn--ghost {
  background: var(--ds-card, #FFFFFF);
  border-color: var(--ds-border);
  color: var(--ds-text);
}
.ck-modal-btn--ghost:hover,
.ck-modal .ck-modal-btn--ghost:hover {
  background: var(--ds-bg);
  border-color: var(--ds-border-strong, var(--ds-border));
}
.ck-modal-btn--primary,
.ck-modal .ck-modal-btn--primary {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: var(--ds-card, #FFFFFF);
}
.ck-modal-btn--primary:hover,
.ck-modal .ck-modal-btn--primary:hover {
  background: var(--ds-primary-600, var(--ds-primary));
  border-color: var(--ds-primary-600, var(--ds-primary));
}
.ck-modal-btn--danger,
.ck-modal .ck-modal-btn--danger {
  background: var(--ds-card, #FFFFFF);
  border-color: var(--ds-danger);
  color: var(--ds-danger-text, var(--ds-danger));
}
.ck-modal-btn--danger:hover,
.ck-modal .ck-modal-btn--danger:hover {
  background: var(--ds-danger-soft);
  border-color: var(--ds-danger);
}


/* ----- Drawer Step 7 buttons (M5.2 prev) ----- */
.os-drawer__btn {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--ds-radius-md, 10px);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.os-drawer__btn > i,
.os-drawer__btn > [data-lucide] {
  width: 14px;
  height: 14px;
}


/* ----- Open Shift card CTA («Назначить» inside card) ----- */
.os-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 30px;
  margin-top: 10px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  background: var(--ds-card, #FFFFFF);
  border: 1px solid var(--ds-border-strong, var(--ds-border));
  border-radius: 6px;
  color: var(--ds-primary);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  text-align: center;
}
.os-card__cta:hover {
  background: var(--ds-primary-soft);
  border-color: var(--ds-primary);
  color: var(--ds-primary-600, var(--ds-primary));
}


/* ----- Workspace toolbar buttons (Назначить / Массово / Шаблон / Срочная замена) ----- */
.ds-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--ds-radius-sm, 8px);
  border: 1px solid var(--ds-border);
  background: var(--ds-card, #FFFFFF);
  color: var(--ds-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  text-decoration: none;
}
.ds-action-btn:hover {
  background: var(--ds-bg);
  border-color: var(--ds-border-strong, var(--ds-border));
}
.ds-action-btn__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ds-action-btn--primary {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: var(--ds-card, #FFFFFF);
}
.ds-action-btn--primary:hover {
  background: var(--ds-primary-600, var(--ds-primary));
  border-color: var(--ds-primary-600, var(--ds-primary));
}
.ds-action-btn[disabled],
.ds-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* ----- Period bar Week/Month toggle ----- */
.ck-range-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md, 10px);
}
.ck-range-toggle button {
  height: 28px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ds-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--ds-radius-sm, 8px);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.ck-range-toggle button:hover {
  color: var(--ds-text);
}
.ck-range-toggle button.is-active {
  background: var(--ds-card, #FFFFFF);
  color: var(--ds-text);
  font-weight: 600;
  box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}
.ck-range-toggle button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}


/* ----- Indicator pills (right side of toolbar) — preserve current shape,
        just polish height/spacing for consistency with new button family ----- */
.ds-indicator-pill {
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: var(--ds-card, #FFFFFF);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  transition: background 120ms ease, border-color 120ms ease;
}
.ds-indicator-pill:hover {
  background: var(--ds-bg);
}
.ds-indicator-pill__icon { width: 14px; height: 14px; flex-shrink: 0; }
.ds-indicator-pill--danger {
  background: var(--ds-danger-soft);
  border-color: transparent;
  color: var(--ds-danger-text, var(--ds-danger));
}
.ds-indicator-pill--warn {
  background: var(--ds-warn-soft);
  border-color: transparent;
  color: var(--ds-warn-text, var(--ds-warn));
}
.ds-indicator-pill--primary {
  background: var(--ds-primary-soft);
  border-color: transparent;
  color: var(--ds-primary-text, var(--ds-primary));
}


/* ----- Modal × close button — unify across ck-modal / osc-modal / os-drawer ----- */
.os-drawer__close,
.ck-modal .ck-modal-close,
.osc-modal .osc-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--ds-radius-sm, 8px);
  background: transparent;
  border: 0;
  color: var(--ds-text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.os-drawer__close:hover,
.ck-modal .ck-modal-close:hover,
.osc-modal .osc-close:hover {
  background: var(--ds-bg);
  color: var(--ds-text);
}

/* M5.2 — .ck-modal-btn--secondary outline modifier (used by «Перенести»). */
.ck-modal .ck-modal-btn--secondary {
  background: var(--ds-card, #FFFFFF);
  border-color: var(--ds-border);
  color: var(--ds-text);
}
.ck-modal .ck-modal-btn--secondary:hover {
  background: var(--ds-bg);
  border-color: var(--ds-border-strong, var(--ds-border));
}

/* M5.2 — Open Shift card: whole-card clickable. Hover hint appears at bottom, replacing the old «Назначить» button. */
.os-card { transition: background 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease; }
.os-card:hover {
  border-color: var(--ds-primary);
  background: var(--ds-primary-soft, #EFF6FF);
  box-shadow: 0 2px 8px -2px rgba(15,23,42,0.10);
}
.os-card__hover-hint {
  display: none;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-primary);
  text-align: center;
}
.os-card:hover .os-card__hover-hint { display: block; }
.os-card:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 1px;
}

/* M5.2 — Universal time picker */
.ds-timepicker { position: relative; display: inline-block; width: 100%; }
.ds-timepicker .ds-time-input {
  width: 100%;
  padding: 6px 36px 6px 10px;
  font-size: 13px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: #fff;
  color: var(--ds-text);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
.ds-timepicker .ds-time-input:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-soft, rgba(37,99,235,0.15));
}
.ds-timepicker__trigger {
  position: absolute; top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ds-text-muted, #64748B);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ds-radius-sm); padding: 0;
}
.ds-timepicker__trigger:hover {
  background: var(--ds-bg);
  color: var(--ds-primary);
}
.ds-timepicker__trigger > i,
.ds-timepicker__trigger > [data-lucide] { width: 16px; height: 16px; }
.ds-timepicker__dropdown {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 50;
  margin-top: 4px;
  max-height: 240px; overflow-y: auto;
  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md, 10px);
  box-shadow: 0 8px 24px -8px rgba(15,23,42,0.18);
  padding: 4px;
}
.ds-timepicker__dropdown.is-open { display: block; }
.ds-timepicker__option {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--ds-text);
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
}
.ds-timepicker__option:hover { background: var(--ds-primary-soft, #EFF6FF); color: var(--ds-primary); }
.ds-timepicker__option:focus { outline: none; background: var(--ds-bg); }
/* ============================================================
   M5.2 — Period Picker (Week-first)
   Date: 2026-06-14
   Spec: workspace/output_to_user/m52_period_picker_spec.md

   ─── COMPONENT MAP ──────────────────────────────────────────
   .ds-period-picker                 — outer flex container (← label →)
   .ds-period-picker__btn            — ← / → nav arrows (icon-only 34×34)
   .ds-period-picker__label          — clickable header («17–23 июня 2026»)
   .ds-period-picker__popover        — floating month grid (absolute)
   .ds-period-picker__pop-head       — month nav row inside popover
   .ds-period-picker__cal            — 7×N day grid (Mon → Sun)
   .ds-period-picker__dow            — DOW header cell (Пн Вт … Вс)
   .ds-period-picker__day            — day button (+ is-* state mods)

   All colors via --ds-* tokens.
   ============================================================ */


/* ----- Outer shell ----- */
.ds-period-picker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--ds-card, #FFFFFF);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md, 10px);
  padding: 3px;
  position: relative;
  font-family: inherit;
}

/* ----- ← / → nav buttons ----- */
.ds-period-picker__btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ds-text-muted);
  border-radius: var(--ds-radius-sm, 8px);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  transition: background 120ms ease, color 120ms ease;
}
.ds-period-picker__btn:hover {
  background: var(--ds-bg);
  color: var(--ds-text);
}
.ds-period-picker__btn > i,
.ds-period-picker__btn > [data-lucide] {
  width: 16px;
  height: 16px;
}

/* ----- Clickable label (range display) ----- */
.ds-period-picker__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  color: var(--ds-text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--ds-radius-sm, 8px);
  transition: background 120ms ease;
  min-width: 180px;
  justify-content: center;
}
.ds-period-picker__label:hover { background: var(--ds-bg); }
.ds-period-picker__label > i.ds-period-picker__chev,
.ds-period-picker__label > [data-lucide="chevron-down"] {
  width: 13px;
  height: 13px;
  color: var(--ds-text-muted);
}

/* ----- Popover ----- */
.ds-period-picker__popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: 280px;
  background: var(--ds-card, #FFFFFF);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md, 10px);
  box-shadow: var(--ds-shadow-lift,
                0 1px 2px rgba(15, 23, 42, 0.06),
                0 8px 24px rgba(15, 23, 42, 0.10));
  padding: 12px;
  display: none;
}
.ds-period-picker__popover.is-open { display: block; }

/* Popover header (month nav) */
.ds-period-picker__pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ds-period-picker__pop-month {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
  text-transform: capitalize;
}
.ds-period-picker__pop-nav {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ds-text-muted);
  border-radius: var(--ds-radius-sm, 8px);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  font-family: inherit;
  transition: background 120ms ease, color 120ms ease;
}
.ds-period-picker__pop-nav:hover {
  background: var(--ds-bg);
  color: var(--ds-text);
}

/* Calendar grid (Mon-first) */
.ds-period-picker__cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

/* DOW header row */
.ds-period-picker__dow {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-faint);
  text-align: center;
  padding: 4px 0 6px;
}

/* Day button */
.ds-period-picker__day {
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--ds-text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease;
  font-variant-numeric: tabular-nums;
}
.ds-period-picker__day:hover {
  background: var(--ds-bg);
}
/* Outside-month days (greyed) */
.ds-period-picker__day.is-outside {
  color: var(--ds-text-faint);
}
/* Today marker (subtle outline) */
.ds-period-picker__day.is-today {
  box-shadow: inset 0 0 0 1px var(--ds-primary);
  color: var(--ds-primary, var(--ds-text));
}
/* Whole-week highlight (anchor week in current selection) */
.ds-period-picker__day.is-anchor-week {
  background: var(--ds-primary-soft);
  color: var(--ds-primary-text, var(--ds-primary));
}
/* Whole-week hover (Connecteam-style sweep) */
.ds-period-picker__day.is-hovered-week {
  background: var(--ds-bg);
  color: var(--ds-text);
}
.ds-period-picker__day.is-hovered-week.is-anchor-week {
  background: var(--ds-primary-soft);
}
/* Single anchor day — filled primary */
.ds-period-picker__day.is-anchor {
  background: var(--ds-primary);
  color: var(--ds-card, #FFFFFF);
  font-weight: 700;
  box-shadow: none;
}
.ds-period-picker__day.is-anchor:hover {
  background: var(--ds-primary-600, var(--ds-primary));
}
/* Single-day hover (mouseenter cell) */
.ds-period-picker__day.is-hovered:not(.is-anchor) {
  background: var(--ds-primary-soft);
  color: var(--ds-primary-text, var(--ds-primary));
}


/* ----- Period bar container (wraps picker + team filter + mode toggle) ----- */
.ck-period-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ds-card, #FFFFFF);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md, 10px);
  padding: 8px 12px;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.ck-period-bar__left,
.ck-period-bar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ck-period-bar__team {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm, 8px);
  background: var(--ds-card, #FFFFFF);
  color: var(--ds-text);
  font-family: inherit;
  font-size: 13px;
  min-width: 180px;
}
.ck-period-bar__team:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

/* Period count badge («7 дн.» / «30 дн.»), shown next to label inline */
.ck-period-bar__count {
  font-size: 12px;
  color: var(--ds-text-faint);
  margin-left: 6px;
}

/* M5.2 — Stronger state colors + ! attention marker on calendar cells. */
.cal-cell-card { border-left-width: 5px !important; }
.cal-cell-card--assigned    { background: #DBEAFE !important; }
.cal-cell-card--confirmed   { background: #BBF7D0 !important; }
.cal-cell-card--in_progress { background: #A5F3FC !important; }
.cal-cell-card--waiting,
.cal-cell-card--submitted   { background: #FDE68A !important; }
.cal-cell-card--issue,
.cal-cell-card--no_show     { background: #FECACA !important; }
.cal-cell-card--cancelled   { background: #E2E8F0 !important; opacity: 0.65; }

.cal-cell-card__attention {
  position: absolute;
  top: 4px; right: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ds-danger-text, #DC2626);
  color: #fff;
  font-size: 12px; font-weight: 700; line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(220,38,38,0.4);
  z-index: 2;
}
/* ============================================================
   M5.2 — Location color identification (PO 2026-06-14)
   Append-only к design_system.css

   ─── COMPONENT MAP ──────────────────────────────────────────
   .ds-color-picker             — wrapper для swatches в form
   .ds-color-swatch             — один swatch (radio label)
   .ds-color-swatch__radio      — visually-hidden radio input
   .ds-color-swatch__dot        — coloured circle (32×32)
   .ds-color-swatch__label      — RU label под dot
   .ds-color-swatch.is-selected — selection ring
   .ds-color-swatch--none       — special «без цвета» variant

   .cal-cell-card--has-loc-color  — top-border 3px по --loc-color
   .os-card--has-loc-color        — top-border 3px + .os-card__loc-dot
   .os-card__loc-dot              — inline coloured dot перед role
   .os-drawer__loc-dot            — inline coloured dot в drawer

   ─── DESIGN ─────────────────────────────────────────────────
   Form swatches: grid of 12 dots + «no color», ~32px circles,
                  click → radio checked → is-selected ring.
   Cells:         3px top border colored to location.
                  Orthogonal to state-stripe (border-left) — both
                  signals visible simultaneously.
   ============================================================ */


/* ----- Color picker (form) ----- */
.ds-color-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  padding: 4px 0;
}

.ds-color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  border: 2px solid transparent;
  border-radius: var(--ds-radius-md, 10px);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  position: relative;
  user-select: none;
}
.ds-color-swatch:hover {
  background: var(--ds-bg);
}
.ds-color-swatch.is-selected {
  border-color: var(--ds-primary);
  background: var(--ds-primary-soft);
}

/* Hide native radio visually but keep it accessible. */
.ds-color-swatch__radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ds-color-swatch__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ds-border);
  display: inline-block;
  /* background applied via inline style="background: #RRGGBB" */
}
.ds-color-swatch__label {
  font-size: 11px;
  color: var(--ds-text-muted);
  text-align: center;
  white-space: nowrap;
}
.ds-color-swatch.is-selected .ds-color-swatch__label {
  color: var(--ds-text);
  font-weight: 600;
}

/* «Без цвета» variant: striped diagonal pattern indicating "no color". */
.ds-color-swatch--none .ds-color-swatch__dot {
  background: var(--ds-card, #FFFFFF);
  background-image: linear-gradient(
    135deg,
    transparent 45%,
    var(--ds-border-strong, var(--ds-border)) 45%,
    var(--ds-border-strong, var(--ds-border)) 55%,
    transparent 55%);
}


/* ----- Cell-card top stripe ----- */
/* Location color = top border 3px. Orthogonal to state border-left.
   --loc-color comes from inline style attr on the element. */
.cal-cell-card--has-loc-color {
  border-top: 3px solid var(--loc-color, transparent);
  padding-top: 4px;  /* tighten so the 3px stripe doesn't push content */
}


/* ----- Open Shift card top stripe + inline dot ----- */
.os-card--has-loc-color {
  border-top: 3px solid var(--loc-color, transparent);
}
.os-card__loc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--loc-color, var(--ds-text-faint));
  margin-right: 4px;
  vertical-align: 1px;
  border: 1px solid var(--ds-border);
}


/* ----- Drawer location dot ----- */
.os-drawer__loc-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
  border: 1px solid var(--ds-border);
  /* background applied via inline style */
}


/* M5.2 — require_confirmation toggle in osc-modal (PO 2026-06-15). */
.osc-modal .osc-conf-row { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ds-border); }
.osc-modal .osc-toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--ds-text);
}
.osc-modal .osc-toggle input[type="checkbox"] { display: none; }
.osc-modal .osc-toggle__track {
  position: relative; display: inline-block;
  width: 36px; height: 20px; border-radius: 999px;
  background: var(--ds-border); transition: background 0.15s ease;
}
.osc-modal .osc-toggle__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: left 0.15s ease;
}
.osc-modal .osc-toggle input:checked + .osc-toggle__track { background: var(--ds-primary); }
.osc-modal .osc-toggle input:checked + .osc-toggle__track .osc-toggle__thumb { left: 18px; }
.osc-modal .osc-conf-deadline { margin-top: 10px; }
.osc-modal .osc-conf-deadline input[type="number"] {
  width: 100%; padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
  background: #fff; color: var(--ds-text); font-family: inherit;
  box-sizing: border-box;
}


/* M5.2 — Table view for tenant calendar list (PO 2026-06-15). */
.ck-table-view { padding: 12px; }
.ck-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ck-tbl th {
  text-align: left; padding: 10px 12px;
  font-size: 11px; font-weight: 600; color: var(--ds-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--ds-bg, #F1F5F9);
  border-bottom: 1px solid var(--ds-border);
  position: sticky; top: 0; z-index: 1;
}
.ck-tbl td {
  padding: 10px 12px; border-bottom: 1px solid var(--ds-border);
  vertical-align: top;
}
.ck-tbl-row:hover td { background: var(--ds-primary-soft, #EFF6FF); }
.ck-tbl-row--assigned td { background: rgba(59,130,246,0.05); }
.ck-tbl-row--confirmed td { background: rgba(34,197,94,0.05); }
.ck-tbl-row--no_show td, .ck-tbl-row--issue td { background: rgba(239,68,68,0.05); }
.ck-tbl-row--cancelled td { color: var(--ds-text-muted); opacity: 0.7; text-decoration: line-through; }
.ck-tbl .pill { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ck-tbl .pill-assigned { background: #DBEAFE; color: #1E40AF; }
.ck-tbl .pill-confirmed { background: #BBF7D0; color: #166534; }
.ck-tbl .pill-in_progress { background: #A5F3FC; color: #155E75; }
.ck-tbl .pill-waiting, .ck-tbl .pill-submitted { background: #FDE68A; color: #92400E; }
.ck-tbl .pill-issue, .ck-tbl .pill-no_show { background: #FECACA; color: #991B1B; }
.ck-tbl .pill-cancelled { background: #E2E8F0; color: #475569; }


/* M5.2 — Table row clickable */
.ck-tbl-row { cursor: pointer; }
.ck-tbl-row:hover td { background: var(--ds-primary-soft, #EFF6FF) !important; }

.ck-tbl .pill-open { background: #FED7AA; color: #9A3412; font-weight: 600; }

/* M5.2 PO 2026-06-15 — корнер + для open shifts row. */
.os-row__cell { position: relative; min-height: 60px; }


/* M5.4 PO 2026-06-15 — Operations inline list panel. */
.ds-ops-list-panel {
  margin: 16px 0;
  background: #FFFFFF;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(15,23,42,0.05);
  overflow: hidden;
}
.ds-ops-list-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--ds-bg, #F1F5F9);
  border-bottom: 1px solid var(--ds-border);
}
.ds-ops-list-panel__title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ds-text);
}
.ds-ops-list-panel__icon { width: 16px; height: 16px; color: var(--ds-primary); }
.ds-ops-list-panel__count {
  margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--ds-primary-soft, #EFF6FF); color: var(--ds-primary);
  font-size: 12px; font-weight: 700;
}
.ds-ops-list-panel__close {
  background: transparent; border: none; cursor: pointer;
  color: var(--ds-text-muted); font-size: 22px; line-height: 1;
  padding: 0 4px;
}
.ds-ops-list-panel__close:hover { color: var(--ds-text); }
.ds-ops-list-panel__body { padding: 0; }
.ds-ops-list-panel__empty {
  padding: 24px; text-align: center; color: var(--ds-text-muted); font-size: 13px;
}
.ds-ops-list-panel__scroll { overflow-x: auto; }
.ds-ops-list-panel__tbl { width: 100%; }
.ds-ops-list-panel__tbl .pill {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.ds-ops-list-panel__tbl .pill-open { background: #FED7AA; color: #9A3412; }
.ds-ops-list-panel__tbl .pill-awaiting_employee_confirmation { background: #DBEAFE; color: #1E40AF; }
.ds-ops-list-panel__tbl .pill-confirmed { background: #BBF7D0; color: #166534; }
.ds-ops-list-panel__tbl .pill-no_show, .ds-ops-list-panel__tbl .pill-issue { background: #FECACA; color: #991B1B; }


/* M5.4 PO 2026-06-15 — clickable row in inline list panel. */
.ds-ops-list-panel__row { cursor: pointer; transition: background 0.10s ease; }
.ds-ops-list-panel__row:hover td { background: var(--ds-primary-soft, #EFF6FF); }


/* M5.2 PO 2026-06-15 — Operations inline shift-details + reassign modal. */
.ops-detail-modal { position: fixed; inset: 0; background: rgba(15,23,42,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 1000; }
.ops-detail-modal[hidden] { display: none; }
.ops-detail-modal__card { background: #fff; max-width: 560px; width: 100%;
  border-radius: 12px; padding: 22px 24px; box-shadow: 0 12px 32px rgba(15,23,42,0.20);
  position: relative; max-height: 90vh; overflow-y: auto; }
.ops-detail-modal__close { position: absolute; top: 10px; right: 12px;
  background: transparent; border: none; cursor: pointer; font-size: 24px;
  color: var(--ds-text-muted); }
.ops-detail-modal__close:hover { color: var(--ds-text); }
.ops-detail-modal__title { font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--ds-text); }
.ops-detail-modal__meta { background: var(--ds-bg, #F1F5F9); padding: 12px; border-radius: 8px;
  font-size: 13px; line-height: 1.5; color: var(--ds-text); margin-bottom: 14px; }
.ops-detail-modal__meta-row { padding: 2px 0; }
.ops-detail-modal__meta-row b { font-weight: 600; color: var(--ds-text-muted); margin-right: 6px; }
.ops-detail-modal__section { margin-top: 12px; }
.ops-detail-modal__section-title { font-size: 13px; font-weight: 600; color: var(--ds-text); margin-bottom: 6px; }
.ops-detail-modal__emp-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--ds-border);
  border-radius: 8px; padding: 4px; margin-top: 6px; }
.ops-detail-modal__emp-row { display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.ops-detail-modal__emp-row:hover { background: var(--ds-bg, #F1F5F9); }
.ops-detail-modal__emp-name { flex: 1; }
.ops-detail-modal__pill { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ops-detail-modal__pill--free { background: #DCFCE7; color: #166534; }
.ops-detail-modal__pill--busy { background: #FECACA; color: #991B1B; }
.ops-detail-modal__empty { padding: 16px; text-align: center; color: var(--ds-text-muted); font-size: 13px; }
.ops-detail-modal__error { color: #b91c1c; font-size: 13px; padding: 8px 0; }
.ops-detail-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* M5.4 PO 2026-06-15 — modal styles for unified ck-modal/osc-modal (extracted from managers_checklist_tenant.html inline so /managers/operations can use the same modal). */

  /* M4A.6.5 modal */
  .ck-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
    display: none; align-items: center; justify-content: center;
    z-index: 9999;
  }
  .ck-modal-backdrop.is-open { display: flex; }
  .ck-modal {
    background: #fff; border-radius: var(--ds-radius-lg);
    max-width: 520px; width: calc(100% - 32px); max-height: 90vh; overflow: auto;
    padding: 20px 22px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
  }
  .ck-modal h2 { font-size: 18px; font-weight: 600; color: var(--ds-text);
                  margin: 0 0 4px; }
  .ck-modal .ck-modal-sub { font-size: 13px; color: var(--ds-text-muted);
                             margin: 0 0 16px; }
  .ck-modal label { display: block; font-size: 12px; color: var(--ds-text);
                     font-weight: 500; margin: 10px 0 4px; }
  .ck-modal input, .ck-modal select, .ck-modal textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm); font-size: 14px;
    background: #fff; color: var(--ds-text); box-sizing: border-box;
  }
  .ck-modal .ck-row-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ck-modal-actions { display: flex; gap: 10px; justify-content: flex-end;
                       margin-top: 16px; padding-top: 14px;
                       border-top: 1px solid var(--ds-border); }
  .ck-modal-btn { padding: 8px 16px; border-radius: var(--ds-radius-md);
                   font-size: 13px; cursor: pointer; font-weight: 500; }
  .ck-modal-btn--ghost { background: #fff; color: var(--ds-text);
                          border: 1px solid var(--ds-border); }
  .ck-modal-btn--primary { background: var(--ds-primary, #2563EB);
                            color: #fff; border: 1px solid var(--ds-primary, #2563EB); }
  .ck-modal-btn--danger { background: #DC2626; color: #fff;
                           border: 1px solid #DC2626; }
  .ck-modal-error { font-size: 12px; color: #DC2626; margin-top: 8px;
                     min-height: 16px; }
  .ck-modal .assign-meta { font-size: 12px; color: var(--ds-text-muted);
                            background: #F8FAFC; border-radius: var(--ds-radius-sm);
                            padding: 8px 10px; margin: 8px 0 4px; }

  /* M5.2 — Period bar (выше grid) */
  .ck-period-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    padding: 10px 14px; margin-bottom: var(--ds-space-3);
    flex-wrap: wrap; gap: 12px;
  }
  .ck-period-bar__left  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ck-period-bar__label { font-size: 13px; font-weight: 600; color: var(--ds-text); }
  .ck-period-bar__range { font-size: 13px; color: var(--ds-text-muted); }
  .ck-period-bar__count { font-size: 12px; color: var(--ds-text-faint); }
  .ck-period-bar__sep   { color: var(--ds-text-faint); margin: 0 2px; }
  .ck-period-bar__more  {
    width: 26px; height: 26px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ds-text-muted); background: transparent; border: 0; cursor: pointer;
    text-decoration: none;
  }
  .ck-period-bar__more:hover { background: var(--ds-bg); }
  .ck-period-bar__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .ck-filters-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ck-filter-input, .ck-filter-select {
    height: 32px; padding: 4px 10px; font-size: 13px;
    border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
    background: #fff; color: var(--ds-text); font-family: inherit;
  }
  .ck-filter-input { min-width: 180px; }
  .ck-filter-select { min-width: 160px; max-width: 220px; }
  .ck-filter-input:focus, .ck-filter-select:focus {
    outline: none; border-color: var(--ds-primary);
    box-shadow: 0 0 0 3px var(--ds-primary-soft, rgba(37,99,235,0.15));
  }
  .ck-period-bar__team {
    font-size: 13px; padding: 6px 10px;
    border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
    background: #fff; color: var(--ds-text); min-width: 180px;
  }
  .ck-range-toggle {
    display: inline-flex; background: var(--ds-bg);
    border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
    padding: 3px; gap: 2px;
  }
  .ck-range-toggle button {
    background: transparent; border: 0; padding: 5px 14px;
    font-size: 13px; font-weight: 500; color: var(--ds-text-muted);
    border-radius: var(--ds-radius-sm); cursor: pointer; font-family: inherit;
  }
  .ck-range-toggle button.is-active {
    background: #fff; color: var(--ds-text); font-weight: 600;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
  }
  .ck-range-toggle button[disabled] { cursor: not-allowed; opacity: 0.7; }
  .ck-grid .ck-employee-head { padding: 10px 12px; }
  .ck-emp { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ds-text); }
  .ck-emp__avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
                    background: var(--ds-bg); color: var(--ds-text-muted);
                    display: inline-flex; align-items: center; justify-content: center;
                    font-size: 12px; font-weight: 600; text-transform: uppercase; }
  .ck-emp__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .ck-emp__name { font-size: 13px; font-weight: 600; color: var(--ds-text);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ck-emp__role { font-size: 11px; color: var(--ds-text-muted); margin-top: 1px;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ck-grid thead th .ck-dow { display: block; font-size: 10.5px; font-weight: 600;
                               color: var(--ds-text-faint); letter-spacing: .04em; text-transform: uppercase; }
  .ck-grid thead th .ck-day { display: block; font-size: 14px; font-weight: 700;
                               color: var(--ds-text); margin-top: 2px; }
  .ck-grid thead th.is-today .ck-day {
    display: inline-flex; width: 26px; height: 26px;
    background: var(--ds-primary, #2563EB); color: #fff;
    border-radius: 50%; align-items: center; justify-content: center; margin-top: 2px;
  }


  /* M5.2 addendum — Create Open Shift modal styling */
  .osc-modal { max-width: 480px; }
  .osc-modal { position: relative; }
  .osc-modal__close {
    position: absolute; top: 10px; right: 12px;
    width: 30px; height: 30px;
    background: transparent; border: 0;
    font-size: 24px; line-height: 1;
    color: var(--ds-text-muted, #64748B);
    cursor: pointer; border-radius: var(--ds-radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-family: inherit;
  }
  .osc-modal__close:hover { background: var(--ds-bg, #F1F5F9); color: var(--ds-text); }
  .osc-modal form label { display: block; font-size: 12px; font-weight: 600;
                          color: var(--ds-text); margin: 10px 0 4px; }
  .osc-modal form select,
  .osc-modal form input[type="date"],
  .osc-modal form input[type="time"],
  .osc-modal form textarea {
    width: 100%; padding: 6px 10px; font-size: 13px;
    border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
    background: #fff; color: var(--ds-text); font-family: inherit;
    box-sizing: border-box;
  }
  .osc-modal .osc-req { color: var(--ds-danger-text, #DC2626); }
  .osc-modal .osc-opt { color: var(--ds-text-muted, #64748B); font-weight: 400; font-size: 11px; }
  .osc-modal .osc-emp-search {
    width: 100%; padding: 6px 10px; font-size: 13px; box-sizing: border-box;
    border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
    background: #fff; color: var(--ds-text); font-family: inherit;
    margin-top: 4px;
  }
  .osc-modal .osc-emp-list {
    max-height: 180px; overflow-y: auto;
    border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm);
    background: #fff; padding: 4px; margin-top: 4px;
  }
  .osc-modal .osc-emp-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 6px; border-radius: var(--ds-radius-sm);
    font-size: 13px; color: var(--ds-text); cursor: pointer;
    margin: 0;
  }
  .osc-modal .osc-emp-row:hover { background: var(--ds-bg, #F1F5F9); }
  .osc-modal .osc-emp-row input[type="checkbox"] { margin: 0; flex-shrink: 0; }
  .osc-modal .osc-emp-name {
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 80px;          /* PO 2026-06-16 — reserve baseline width for имени */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .osc-modal .osc-emp-avail {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .osc-modal .osc-emp-team {
    font-size: 11px; color: var(--ds-text-muted, #64748B);
    flex-shrink: 0;
    margin-right: 4px;
  }
  .osc-modal .osc-emp-empty { display: block; padding: 8px; font-size: 12px;
                              color: var(--ds-text-muted, #64748B); font-style: italic; }
  .osc-modal .osc-emp-hint { font-size: 11px; color: var(--ds-text-muted, #64748B);
                              margin-top: 4px; }
  .osc-modal .ck-row-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .osc-modal .ck-modal-error { color: var(--ds-danger-text, #DC2626);
                               font-size: 12px; min-height: 14px; margin: 8px 0 0; }
  .osc-modal .ck-modal-actions { display: flex; gap: 8px; justify-content: flex-end;
                                  margin-top: 14px; }
  .osc-modal .ck-modal-btn {
    padding: 7px 14px; font-size: 13px; font-weight: 600; border-radius: 6px;
    border: 1px solid var(--ds-border); cursor: pointer; background: #fff;
    color: var(--ds-text); font-family: inherit;
  }
  .osc-modal .ck-modal-btn--primary { background: var(--ds-primary, #2563EB);
                                       color: #fff; border-color: var(--ds-primary, #2563EB); }
  .osc-modal .ck-modal-btn--primary:disabled { opacity: 0.6; cursor: not-allowed; }
  .osc-modal .ck-modal-btn--ghost { background: var(--ds-bg, #F1F5F9); color: var(--ds-text-muted, #64748B); }
  .osc-modal .ck-modal-btn--danger {
    background: var(--ds-danger-soft, #FEE2E2);
    background: var(--ds-danger-soft, #FEE2E2);
    color: var(--ds-danger-text, #B91C1C);
    border-color: var(--ds-danger-text, #B91C1C);
  }
  .osc-modal .ck-modal-btn--danger:hover { background: #FECACA; }
  .osc-modal .ck-modal-btn--danger:disabled { opacity: 0.6; cursor: not-allowed; }


/* M5.2 PO 2026-06-15 — Employee availability badges in osc-modal emp-list. */
.osc-modal .osc-emp-avail {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  flex-shrink: 0;
  white-space: nowrap;
}
.osc-modal .osc-emp-avail:empty { padding: 0; }
.osc-modal .osc-emp-avail--free {
  background: #DCFCE7;
  color: #166534;
}
.osc-modal .osc-emp-avail--busy {
  background: #FECACA;
  color: #991B1B;
}

/* M5.5 Phase 5 final — absence badge variants (PO 2026-06-17, UX m5_5_absences_ux.md §2). */
.osc-modal .osc-emp-avail--absence {
  font-weight: 500;
}
.osc-modal .osc-emp-avail--abs-sick {
  background: #FFE4E6;
  color: #BE123C;
  border: 1px solid #FCA5A5;
}
.osc-modal .osc-emp-avail--abs-vacation {
  background: #EDE9FE;
  color: #6D28D9;
  border: 1px solid #C4B5FD;
}
.osc-modal .osc-emp-avail--abs-day-off {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}
.osc-modal .osc-emp-avail--abs-unavailable {
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #CBD5E1;
}
.osc-modal .osc-emp-row--absence input[type="checkbox"] {
  pointer-events: none;
}
.osc-modal .osc-emp-row { gap: 8px; }

/* M5.2 PO 2026-06-16 — FORCE emp-row layout (defensive) */
.osc-modal .osc-emp-row { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; padding: 5px 6px !important; }
.osc-modal .osc-emp-row .osc-emp-name { display: inline !important; color: var(--ds-text, #0F172A) !important; font-size: 13px !important; visibility: visible !important; opacity: 1 !important; min-width: 80px !important; flex: 1 1 auto !important; }

/* M5.2 PO 2026-06-16 — Force checkbox width в emp-list (override global input width:100%) */
.osc-modal .osc-emp-row input[type="checkbox"] { width: 16px !important; height: 16px !important; }

/* ============================================================
   RITM collapsible sidebar (global, all /managers screens)
   Toggled via dsToggleSidebar() -> html.ds-sidebar-collapsed,
   persisted in localStorage (ds-sidebar-collapsed). Icons-only
   when collapsed; .ds-main flexes to fill the freed width.
   Desktop-gated so mobile off-canvas behaviour is untouched.
   ============================================================ */
.ds-sidebar { transition: width .2s ease; }

.ds-sidebar-toggle {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 12px 4px; margin-top: auto;
  padding: 10px 12px; border: none; background: transparent;
  color: var(--ds-text-muted); border-radius: 12px; cursor: pointer;
  font-size: var(--ds-text-sm); font-weight: 500; width: calc(100% - 24px);
}
.ds-sidebar-toggle:hover { background: #F1F5F9; color: var(--ds-text); }
.ds-sidebar-toggle__icon { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s ease; }

@media (min-width: 1024px) {
  .ds-sidebar-collapsed .ds-sidebar { width: 64px; }
  .ds-sidebar-collapsed .ds-sidebar-nav .ds-nav-item {
    font-size: 0; gap: 0; justify-content: center; padding-left: 0; padding-right: 0;
  }
  .ds-sidebar-collapsed .ds-nav-group-label { display: none; }
  .ds-sidebar-collapsed .ds-sidebar-logo span { display: none; }
  .ds-sidebar-collapsed .ds-sidebar-toggle { justify-content: center; width: auto; }
  .ds-sidebar-collapsed .ds-sidebar-toggle__label { display: none; }
  .ds-sidebar-collapsed .ds-sidebar-toggle__icon { transform: rotate(180deg); }
  /* footer: keep the avatar centred, hide name + «Выйти». */
  .ds-sidebar-collapsed .ds-sidebar-footer .flex { justify-content: center; }
  .ds-sidebar-collapsed .ds-sidebar-footer .min-w-0 { display: none; }
}

/* ============================================================
   RITM /managers global spacing standard
   - Horizontal gutter: 20px L/R for every screen, via .ds-main
     (above). Screen roots add no own horizontal padding except
     .ds-ops, normalised above.
   - Header -> content gap: 36px. Applied to direct-child page
     titles; screens with bespoke header wrappers (.ds-ops__head,
     .ds-emp-list__header, Назначения .ck-head) carry their own 36.
   ============================================================ */
.ds-page > h1 { margin: 0 0 36px; }