/* ==========================================================================
   АРТУС.Табель — macOS-style design system
   • SF Pro-like (system + Inter fallback), офлайн-шрифты
   • Светлые поверхности, плавные тени, скругления Big Sur (10-16px)
   • Translucency (backdrop-filter blur) для navbar / sheet
   • Spring-анимации; reduced-motion-friendly
   • Полностью совместим с Bootstrap 5.3 классами, расширяет и переопределяет
   ========================================================================== */

/* ── Локальные шрифты Inter (офлайн) ─────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/vendor/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/vendor/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/vendor/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/vendor/fonts/Inter-Bold.woff2') format('woff2');
}

/* ── Дизайн-токены ───────────────────────────────────────────────────────── */
:root {
  /* Палитра в стиле macOS Big Sur+/Sonoma */
  --sys-blue:        #007AFF;   /* macOS system blue */
  --sys-blue-d:      #0061CC;   /* hover/pressed */
  --sys-blue-l:      #4DA2FF;
  --sys-blue-soft:   #E3F0FF;   /* subtle tint background */
  --sys-blue-faint:  rgba(0, 122, 255, 0.10);

  --sys-green:       #34C759;
  --sys-green-d:     #28A745;
  --sys-green-soft:  #E0F8E5;

  --sys-orange:      #FF9500;
  --sys-orange-d:    #C77400;
  --sys-orange-soft: #FFEDD1;

  --sys-red:         #FF3B30;
  --sys-red-d:       #C52A22;
  --sys-red-soft:    #FFE4E2;

  --sys-purple:      #AF52DE;
  --sys-teal:        #5AC8FA;
  --sys-yellow:      #FFCC00;

  /* Брендовый бордовый — для wordmark и фирменных акцентов */
  --brand-burgundy:   #65201B;
  --brand-burgundy-d: #4A1612;

  /* Совместимость со старой системой переменных */
  --reddit-orange:   var(--sys-blue);
  --reddit-orange-d: var(--sys-blue-d);
  --reddit-blue:     var(--sys-blue);
  --reddit-blue-d:   var(--sys-blue-d);
  --accent:          var(--sys-blue);
  --accent-d:        var(--sys-blue-d);
  --accent-soft:     var(--sys-blue-soft);
  --accent-tint:     var(--sys-blue-faint);
  --accent-ring:     rgba(0, 122, 255, 0.30);
  --link:            var(--sys-blue);
  --link-hover:      var(--sys-blue-d);

  /* Семантика статусов */
  --sta-todo:        #6B6B70;
  --sta-todo-bg:     #EDEDED;
  --sta-progress:    var(--sys-blue);
  --sta-progress-bg: var(--sys-blue-soft);
  --sta-done:        var(--sys-green-d);
  --sta-done-bg:     var(--sys-green-soft);
  --sta-blocked:     var(--sys-red-d);
  --sta-blocked-bg:  var(--sys-red-soft);
  --sta-warn:        var(--sys-orange-d);
  --sta-warn-bg:     var(--sys-orange-soft);
  --sta-purple:      var(--sys-purple);
  --sta-purple-bg:   #F4E6FB;

  --c-green:     var(--sta-done);     --c-green-bg:  var(--sta-done-bg);
  --c-orange:    var(--sta-warn);     --c-orange-bg: var(--sta-warn-bg);
  --c-red:       var(--sta-blocked);  --c-red-bg:    var(--sta-blocked-bg);
  --c-blue:      var(--sta-progress); --c-blue-bg:   var(--sta-progress-bg);

  /* Поверхности — характерная macOS палитра */
  --bg:            #F5F5F7;       /* desktop wallpaper-light */
  --bg-elev:       #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F9F9FB;        /* hover/zebra */
  --surface-solid: #FFFFFF;
  --surface-dim:   #EFEFF4;        /* секции, разделители */
  --surface-sidebar: #F4F4F7;

  --text:       #1D1D1F;           /* почти-чёрный, как у Apple */
  --text-sec:   #4A4A50;
  --text-tert:  #8A8A8E;
  --text-quart: #B5B5BA;

  --border:       #DCDCE0;
  --border-s:     #C4C4C9;         /* активный/hover border */
  --border-hover: #A8A8AD;
  --hairline:     #E8E8EC;         /* 0.5px эффект — еле видимый */

  /* Тени — несколько уровней, мягкие, почти без направления */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05),
               0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.06),
               0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.08),
               0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 24px 48px -8px rgba(0, 0, 0, 0.18),
               0 8px 20px -4px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 16px 60px -10px rgba(0, 0, 0, 0.20),
                0 4px 12px rgba(0, 0, 0, 0.06);

  /* Скругления macOS Big Sur — заметно круглее, чем Jira */
  --r-xs: 4px;
  --r-sm: 6px;
  --r:    8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* Типографика */
  --font-sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                  "Inter", "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-brand:   var(--font-display);  /* wordmark больше не использует Unbounded */
  --font-body:    var(--font-sans);
  --font-mono:    ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* Spring easings — как в SwiftUI */
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* лёгкий overshoot */
  --ease-ios:       cubic-bezier(0.25, 0.1, 0.25, 1);    /* стандартный iOS */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);       /* плавный замедлитель */
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  --t-fast:   140ms;
  --t-base:   220ms;
  --t-slow:   360ms;

  /* Translucency */
  --blur-sm:  saturate(180%) blur(10px);
  --blur:     saturate(180%) blur(20px);
  --blur-lg:  saturate(180%) blur(40px);

  /* Цвет «материала» (как .ultraThinMaterial в SwiftUI) */
  --material:        rgba(255, 255, 255, 0.72);
  --material-strong: rgba(255, 255, 255, 0.86);
  --material-thin:   rgba(255, 255, 255, 0.55);
}

/* ── База ─────────────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
*, *::before, *::after { box-sizing: border-box; }

html, body {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--bg);
  /* Тонкий градиент-fluid фон в стиле macOS desktop */
  background-image:
    radial-gradient(ellipse at top left, rgba(0,122,255,0.06), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(175,82,222,0.04), transparent 50%);
  background-attachment: fixed;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--text);
  margin-top: 0;
}
h1 { font-size: 1.75rem;  line-height: 1.2;  letter-spacing: -0.022em; }
h2 { font-size: 1.4rem;   line-height: 1.25; letter-spacing: -0.018em; }
h3 { font-size: 1.18rem;  line-height: 1.3;  letter-spacing: -0.012em; }
h4 { font-size: 1.02rem;  line-height: 1.35; padding-bottom: 6px; border-bottom: none; }
h5 { font-size: 0.95rem; }
.display-6 {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.026em;
  font-feature-settings: "tnum";
}

a { color: var(--link); text-decoration: none; transition: color var(--t-fast) var(--ease-ios); }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

hr { border-color: var(--hairline); opacity: 1; margin: 16px 0; }

main.container-fluid {
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 28px 40px;
}

/* Лёгкая входная анимация контента */
@keyframes content-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
main.container-fluid > * {
  animation: content-fade-in var(--t-base) var(--ease-out-expo) both;
}
@media (prefers-reduced-motion: reduce) {
  main.container-fluid > * { animation: none !important; }
}

/* ── Top bar: macOS toolbar с translucency ───────────────────────────────── */
.navbar {
  background: var(--material) !important;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: none;
  border-bottom: 0.5px solid var(--border);
  border-radius: 0;
  padding: 0 20px;
  min-height: 52px;
  box-shadow: 0 0.5px 0 rgba(0,0,0,0.04);
  position: sticky;
  top: 0;
  z-index: 1030;
  margin: 0;
  max-width: 100%;
}
.navbar::before { content: none; }
.navbar .container-fluid { padding: 0; }

.navbar-brand {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  text-transform: none;
  transition: opacity var(--t-fast) var(--ease-ios);
}
.navbar-brand:hover { opacity: 0.75; }
.navbar-brand .brand-logo { height: 28px; width: auto; display: block; }
.navbar-brand .brand-wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.navbar-brand .brand-wordmark .brand-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--text);
}
.navbar-brand .brand-wordmark .brand-sub {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-tert);
  margin-top: 1px;
  letter-spacing: -0.005em;
  text-transform: none;
}

.navbar .nav-link {
  color: var(--text-sec) !important;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 7px 12px !important;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background var(--t-fast) var(--ease-ios),
              color var(--t-fast) var(--ease-ios),
              transform var(--t-fast) var(--ease-spring);
  border: none;
  position: relative;
}
.navbar .nav-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text) !important;
}
.navbar .nav-link:active { transform: scale(0.96); }
.navbar .nav-link.active, .navbar .nav-link[aria-current="page"] {
  background: var(--sys-blue-soft);
  color: var(--sys-blue-d) !important;
  font-weight: 600;
}
.navbar .nav-link .bi { font-size: 0.95rem; color: var(--text-tert); transition: color var(--t-fast); }
.navbar .nav-link:hover .bi, .navbar .nav-link.active .bi { color: var(--sys-blue); }

.navbar-text {
  font-family: var(--font-sans);
  color: var(--text-sec) !important;
  font-size: 0.85rem;
  padding: 0 10px;
}
.navbar .badge {
  background: var(--sys-blue) !important;
  color: #fff !important;
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0;
  border: none;
  text-transform: none;
}

/* Бургер */
.navbar-toggler {
  border: none;
  border-radius: var(--r-sm);
  padding: 8px 10px;
  background: transparent;
  transition: background var(--t-fast) var(--ease-ios), transform var(--t-fast);
}
.navbar-toggler:hover { background: rgba(0,0,0,0.05); }
.navbar-toggler:active { transform: scale(0.94); }
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231D1D1F' stroke-linecap='round' stroke-width='2.2' d='M5 9h20M5 15h20M5 21h20'/%3E%3C/svg%3E");
}

/* Dropdown — macOS popover */
.dropdown-menu {
  background: var(--material-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 5px;
  min-width: 240px;
  font-family: var(--font-sans);
  animation: dropdown-pop 180ms var(--ease-out-expo);
  transform-origin: top center;
}
@keyframes dropdown-pop {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.dropdown-item {
  padding: 7px 12px;
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
  transition: background var(--t-fast) var(--ease-ios), color var(--t-fast) var(--ease-ios);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--sys-blue);
  color: #FFFFFF;
}
.dropdown-item:hover .bi { color: #fff; }
.dropdown-divider { border-color: var(--hairline); margin: 5px 4px; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow var(--t-base) var(--ease-out-expo),
              border-color var(--t-fast) var(--ease-ios),
              transform var(--t-base) var(--ease-out-expo);
  overflow: hidden;
}
.card::before { content: none; }
.card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-s);
}
.card-header {
  background: var(--surface-2);
  border-bottom: 0.5px solid var(--border);
  padding: 12px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--text);
  border-top-left-radius: var(--r-md);
  border-top-right-radius: var(--r-md);
}
.card-body { padding: 18px; }
.card-footer {
  background: var(--surface-2);
  border-top: 0.5px solid var(--border);
  padding: 12px 16px;
  border-radius: 0 0 var(--r-md) var(--r-md);
}

/* Метрика-карточки на дашборде — крупная цифра, цветной accent-bar */
.card.text-bg-primary,
.card.text-bg-success,
.card.text-bg-warning,
.card.text-bg-danger {
  color: var(--text) !important;
  background: var(--surface) !important;
  border: 0.5px solid var(--border) !important;
  border-left: 3px solid var(--sys-blue) !important;
}
.card.text-bg-success { border-left-color: var(--sys-green) !important; }
.card.text-bg-warning { border-left-color: var(--sys-orange) !important; }
.card.text-bg-danger  { border-left-color: var(--sys-red) !important; }
.card.text-bg-primary .display-6,
.card.text-bg-success .display-6,
.card.text-bg-warning .display-6,
.card.text-bg-danger  .display-6 { color: var(--text); }
.card .small {
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--text-tert);
  font-weight: 600;
}

/* Stagger-анимация входа карточек на дашборде/списках */
@keyframes card-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.row > [class*="col-"] > .card,
.dash-widget > .card {
  animation: card-rise 380ms var(--ease-out-expo) both;
}
.row > [class*="col-"]:nth-child(1) > .card { animation-delay: 0ms; }
.row > [class*="col-"]:nth-child(2) > .card { animation-delay: 40ms; }
.row > [class*="col-"]:nth-child(3) > .card { animation-delay: 80ms; }
.row > [class*="col-"]:nth-child(4) > .card { animation-delay: 120ms; }
.row > [class*="col-"]:nth-child(5) > .card { animation-delay: 160ms; }
.row > [class*="col-"]:nth-child(6) > .card { animation-delay: 200ms; }
.row > [class*="col-"]:nth-child(7) > .card { animation-delay: 240ms; }
.row > [class*="col-"]:nth-child(8) > .card { animation-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  .row > [class*="col-"] > .card { animation: none !important; }
}

/* ── Кнопки — macOS push button ──────────────────────────────────────────── */
.btn {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: -0.005em;
  text-transform: none;
  border-radius: var(--r);
  padding: 7px 16px;
  border: 0.5px solid transparent;
  transition: background var(--t-fast) var(--ease-ios),
              color var(--t-fast) var(--ease-ios),
              border-color var(--t-fast) var(--ease-ios),
              box-shadow var(--t-fast) var(--ease-ios),
              transform 90ms var(--ease-spring);
  box-shadow: var(--shadow-xs);
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}
.btn:active { transform: scale(0.96); }
.btn-lg { padding: 11px 22px; font-size: 0.97rem; border-radius: var(--r-md); font-weight: 600; }
.btn-sm { padding: 5px 12px; font-size: 0.8rem; border-radius: var(--r-sm); }

/* Primary — синяя SF Symbols-style filled */
.btn-primary, .btn-ios-primary {
  background: var(--sys-blue);
  color: #FFFFFF;
  border-color: var(--sys-blue);
  box-shadow: 0 1px 2px rgba(0,122,255,0.20);
}
.btn-primary:hover, .btn-ios-primary:hover {
  background: var(--sys-blue-d);
  border-color: var(--sys-blue-d);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0,122,255,0.28);
}
.btn-primary:active, .btn-ios-primary:active { background: #00509E; box-shadow: var(--shadow-xs); }

.btn-success { background: var(--sys-green); color: #FFFFFF; border-color: var(--sys-green); box-shadow: 0 1px 2px rgba(52,199,89,0.20); }
.btn-success:hover { background: var(--sys-green-d); border-color: var(--sys-green-d); color: #FFFFFF; box-shadow: 0 2px 6px rgba(52,199,89,0.28); }

.btn-warning { background: var(--sys-orange); color: #FFFFFF; border-color: var(--sys-orange); box-shadow: 0 1px 2px rgba(255,149,0,0.20); }
.btn-warning:hover { background: var(--sys-orange-d); border-color: var(--sys-orange-d); color: #FFFFFF; box-shadow: 0 2px 6px rgba(255,149,0,0.28); }

.btn-danger  { background: var(--sys-red); color: #FFFFFF; border-color: var(--sys-red); box-shadow: 0 1px 2px rgba(255,59,48,0.20); }
.btn-danger:hover { background: var(--sys-red-d); border-color: var(--sys-red-d); color: #FFFFFF; box-shadow: 0 2px 6px rgba(255,59,48,0.28); }

.btn-secondary {
  background: rgba(120, 120, 128, 0.12);
  color: var(--text);
  border-color: transparent;
  box-shadow: none;
}
.btn-secondary:hover { background: rgba(120, 120, 128, 0.18); color: var(--text); }
.btn-secondary:active { background: rgba(120, 120, 128, 0.24); }

/* Outline — bordered, transparent */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-secondary {
  background: var(--surface);
  border-width: 0.5px;
  box-shadow: var(--shadow-xs);
}
.btn-outline-primary   { color: var(--sys-blue); border-color: var(--border-s); }
.btn-outline-primary:hover,
.btn-outline-primary.active { background: var(--sys-blue); color: #FFFFFF; border-color: var(--sys-blue); }

.btn-outline-success   { color: var(--sys-green-d); border-color: var(--border-s); }
.btn-outline-success:hover,
.btn-outline-success.active { background: var(--sys-green); color: #FFFFFF; border-color: var(--sys-green); }

.btn-outline-warning   { color: var(--sys-orange-d); border-color: var(--border-s); }
.btn-outline-warning:hover,
.btn-outline-warning.active { background: var(--sys-orange); color: #FFFFFF; border-color: var(--sys-orange); }

.btn-outline-danger    { color: var(--sys-red-d); border-color: var(--border-s); }
.btn-outline-danger:hover,
.btn-outline-danger.active { background: var(--sys-red); color: #FFFFFF; border-color: var(--sys-red); }

.btn-outline-secondary { color: var(--text-sec); border-color: var(--border-s); }
.btn-outline-secondary:hover { background: var(--surface-dim); color: var(--text); border-color: var(--border-s); }

.btn:focus, .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow-xs);
}
.btn:disabled, .btn.disabled {
  opacity: 0.45;
  pointer-events: none;
  box-shadow: none;
}

/* Segmented control — точно как iOS/macOS */
.btn-group {
  background: rgba(120, 120, 128, 0.12);
  border-radius: var(--r);
  padding: 2px;
  box-shadow: none;
  border: none;
  gap: 0;
}
.btn-group > .btn {
  border-radius: calc(var(--r) - 2px) !important;
  margin: 0;
  border: none !important;
  background: transparent;
  color: var(--text-sec);
  padding: 5px 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  font-size: 0.83rem;
  box-shadow: none !important;
  transition: background var(--t-fast) var(--ease-ios),
              color var(--t-fast) var(--ease-ios),
              transform 80ms var(--ease-spring);
}
.btn-group > .btn:hover { color: var(--text); }
.btn-group > .btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 1px rgba(0,0,0,0.05) !important;
}
.btn-group > .btn.active:hover { background: var(--surface); }

/* ── Формы ───────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 11px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.02);
  transition: border-color var(--t-fast) var(--ease-ios),
              background var(--t-fast) var(--ease-ios),
              box-shadow var(--t-fast) var(--ease-ios);
}
.form-control:hover, .form-select:hover { border-color: var(--border-s); }
.form-control:focus, .form-select:focus {
  background: #FFFFFF;
  border-color: var(--sys-blue);
  box-shadow: 0 0 0 3px var(--accent-ring);
  color: var(--text);
  outline: none;
}
.form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--sys-red);
  box-shadow: 0 0 0 3px rgba(255,59,48,0.18);
}
.form-control::placeholder { color: var(--text-quart); }
.form-control-lg, .form-select-lg {
  padding: 11px 14px; font-size: 0.96rem; border-radius: var(--r);
}
.form-control-sm, .form-select-sm { padding: 5px 10px; font-size: 0.82rem; }
.form-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-sec);
  margin-bottom: 4px;
}
.form-text { color: var(--text-tert); font-size: 0.8rem; font-family: var(--font-sans); }
.input-group { border-radius: var(--r-sm); }
.input-group .form-control { border-radius: var(--r-sm) 0 0 var(--r-sm) !important; }
.input-group-text {
  background: var(--surface-dim);
  border: 0.5px solid var(--border);
  color: var(--text-sec);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.84rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.input-group .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
textarea.form-control { border-radius: var(--r-sm); line-height: 1.55; resize: vertical; }

/* macOS-style switch (используем Bootstrap form-check.form-switch) */
.form-check-input {
  border: 0.5px solid var(--border);
  background-color: rgba(120, 120, 128, 0.16);
  width: 1.5em;
  height: 1.5em;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-ios),
              border-color var(--t-fast) var(--ease-ios);
}
.form-check-input:checked {
  background-color: var(--sys-blue);
  border-color: var(--sys-blue);
}
.form-check-input:focus {
  border-color: var(--sys-blue);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.form-switch .form-check-input {
  width: 2.4em;
  height: 1.4em;
  border-radius: var(--r-pill);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* ── Таблицы ─────────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  color: var(--text);
  margin-bottom: 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
}
.table thead th {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tert);
  font-weight: 600;
  border-bottom: 0.5px solid var(--border);
  padding: 10px 14px;
  background: var(--surface-2);
}
.table tbody td {
  padding: 11px 14px;
  border-bottom: 0.5px solid var(--hairline);
  vertical-align: middle;
}
.table-hover tbody tr {
  transition: background var(--t-fast) var(--ease-ios);
}
.table-hover tbody tr:hover { background: var(--sys-blue-soft); }
.table-light { background: var(--surface-2) !important; color: var(--text); }
.table-sm td, .table-sm th { padding: 7px 10px; font-size: 0.82rem; }
.table-responsive { border-radius: var(--r-md); }

.table tbody tr:last-child td { border-bottom: none; }
.table td .form-control,
.table td .form-select { height: 32px; padding: 4px 8px; font-size: 0.84rem; }
.table td .btn-sm { vertical-align: middle; }

.table-secondary,
.table-secondary > * {
  --bs-table-bg: transparent !important;
  color: var(--text-tert) !important;
  background: var(--surface-dim) !important;
}

/* ── Lozenges (badges) ───────────────────────────────────────────────────── */
.badge {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.7rem;
  border-radius: var(--r-pill);
  padding: 3px 9px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge.bg-primary   { background: var(--sta-progress-bg) !important; color: var(--sta-progress) !important; }
.badge.bg-success   { background: var(--sta-done-bg)     !important; color: var(--sta-done)     !important; }
.badge.bg-warning   { background: var(--sta-warn-bg)     !important; color: var(--sta-warn)     !important; }
.badge.bg-danger    { background: var(--sta-blocked-bg)  !important; color: var(--sta-blocked)  !important; }
.badge.bg-secondary { background: var(--sta-todo-bg)     !important; color: var(--sta-todo)     !important; border: none; }
.badge.bg-light     { background: var(--surface-dim)     !important; color: var(--text)         !important; }
.badge.bg-info-subtle { background: var(--sys-blue-soft) !important; color: var(--sta-progress) !important; }

/* ── Progress ─────────────────────────────────────────────────────────────── */
.progress {
  background: rgba(120, 120, 128, 0.16);
  border: none;
  border-radius: var(--r-pill);
  height: 8px;
  overflow: hidden;
  box-shadow: none;
}
.progress-bar {
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.66rem;
  background: var(--sys-blue);
  color: #FFFFFF;
  box-shadow: none;
  transition: width var(--t-slow) var(--ease-out-expo);
}
.progress-bar.bg-success { background: var(--sys-green) !important; }
.progress-bar.bg-warning { background: var(--sys-orange) !important; }
.progress-bar.bg-danger  { background: var(--sys-red) !important; }
.progress-bar.bg-info    { background: var(--sys-teal) !important; color: #FFFFFF; }

.progress:has(.progress-bar:not(:empty)) { height: 18px; }

/* ── Алерты — macOS notification style ───────────────────────────────────── */
.alert {
  border: 0.5px solid transparent;
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  box-shadow: var(--shadow-sm);
  font-weight: 400;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.alert-success { background: var(--sys-green-soft);  color: #1F5C2E; border-color: rgba(52,199,89,0.30); }
.alert-danger  { background: var(--sys-red-soft);    color: #8B1F18; border-color: rgba(255,59,48,0.30); }
.alert-warning { background: var(--sys-orange-soft); color: #6B4500; border-color: rgba(255,149,0,0.30); }
.alert-info    { background: var(--sys-blue-soft);   color: #003D80; border-color: rgba(0,122,255,0.30); }
.alert-light   { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-close {
  border-radius: 50%;
  opacity: 0.55;
  width: 18px;
  height: 18px;
  padding: 4px;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.btn-close:hover { opacity: 1; background-color: rgba(0,0,0,0.06); }

/* ── List group ──────────────────────────────────────────────────────────── */
.list-group {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 0.5px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.list-group-item {
  background: var(--surface);
  border-color: var(--hairline);
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--text);
  transition: background var(--t-fast) var(--ease-ios);
}
.list-group-item:hover { background: var(--surface-2); }
.list-group-flush > .list-group-item { border-left: 0; border-right: 0; }

/* ── Авторизация — macOS sheet ───────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background-image:
    radial-gradient(ellipse 800px 600px at 30% 20%, rgba(0,122,255,0.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 70% 80%, rgba(175,82,222,0.06), transparent 60%);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--material-strong);
  -webkit-backdrop-filter: var(--blur-lg);
  backdrop-filter: var(--blur-lg);
  border: 0.5px solid rgba(255,255,255,0.6);
  border-radius: var(--r-xl);
  padding: 44px 36px 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: sheet-pop 380ms var(--ease-out-expo);
}
@keyframes sheet-pop {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-card::before { content: none; }
.auth-brand { text-align: center; margin-bottom: 28px; position: relative; }
.auth-logo {
  width: 80px; height: 100px;
  margin: 0 auto 16px;
  background: url('/static/brand/artus_logo_dark.png') center/contain no-repeat;
  display: block;
}
.auth-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 4px 0 4px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.auth-sub {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-tert);
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}

.auth-form .ios-field { margin-bottom: 14px; }
.ios-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-sec);
  margin-bottom: 6px;
}
.ios-field input {
  width: 100%;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r);
  padding: 11px 14px;
  font-family: var(--font-sans);
  font-size: 0.96rem;
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.ios-field input:focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--sys-blue);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.ios-field input.is-invalid {
  border-color: var(--sys-red);
  box-shadow: 0 0 0 3px rgba(255,59,48,0.18);
}
.btn-ios-primary {
  display: block; width: 100%;
  margin-top: 18px;
  padding: 12px 14px;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 0.98rem;
  border-radius: var(--r);
}

.auth-footer { text-align: center; margin-top: 22px; font-size: 0.86rem; color: var(--text-tert); font-family: var(--font-sans); }
.auth-footer a { color: var(--sys-blue); font-weight: 600; }
.auth-hint { text-align: center; margin-top: 8px; color: var(--text-tert); font-size: 0.8rem; font-family: var(--font-sans); }
.auth-demo {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 0.5px solid var(--border);
  border-radius: var(--r);
  font-size: 0.82rem;
  color: var(--text-sec);
}
.auth-demo summary { cursor: pointer; font-weight: 600; list-style: none; color: var(--text); }
.auth-demo summary::-webkit-details-marker { display: none; }
.auth-demo summary::before { content: "ⓘ  "; color: var(--sys-blue); }
.auth-demo div { padding: 2px 0; font-family: var(--font-mono); }

/* ── Scrollbars — macOS overlay ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.20);
  border-radius: 999px;
  border: 4px solid transparent;
  background-clip: padding-box;
  transition: background 0.15s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.36);
  background-clip: padding-box;
}
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-color: rgba(0,0,0,0.20) transparent; }

/* ── Утилиты ─────────────────────────────────────────────────────────────── */
.text-muted { color: var(--text-tert) !important; }
.text-primary { color: var(--sys-blue) !important; }
.text-success { color: var(--sys-green-d) !important; }
.text-warning { color: var(--sys-orange-d) !important; }
.text-danger  { color: var(--sys-red-d) !important; }
.bg-primary   { background-color: var(--sys-blue) !important; }

canvas { font-family: var(--font-sans); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  background: var(--surface-dim);
  color: var(--text-sec);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
}

.bi { display: inline-block; vertical-align: -0.125em; line-height: 1; }

.table td, .table th,
.fw-semibold, .fw-bold {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.text-nowrap, .num { white-space: nowrap; }

/* ── Модалки — macOS sheet ───────────────────────────────────────────────── */
.modal-backdrop.show {
  opacity: 1;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.modal-content {
  border: 0.5px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  position: relative;
  overflow: hidden;
  animation: modal-pop 320ms var(--ease-out-expo);
}
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-content::before { content: none; }
.modal-header {
  border-bottom: 0.5px solid var(--border);
  padding: 16px 22px;
  background: var(--surface-2);
}
.modal-body   { padding: 20px 22px; background: var(--surface); }
.modal-footer {
  border-top: 0.5px solid var(--border);
  padding: 14px 22px;
  background: var(--surface-2);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  gap: 8px;
}
.modal-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: none;
}
.modal-xl .modal-body { max-height: 78vh; }

.emp-link, .cat-link {
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--t-fast) var(--ease-ios);
  border-bottom: 0.5px solid transparent;
}
.emp-link:hover, .cat-link:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Сворачиваемые разделы ───────────────────────────────────────────────── */
.section-row { cursor: pointer; user-select: none; }
.section-row .section-cell {
  background: var(--surface-2) !important;
  color: var(--text-sec);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding-left: 14px;
  border-bottom: 0.5px solid var(--hairline);
  font-size: 0.74rem !important;
  text-transform: uppercase;
}
.section-row:hover .section-cell { background: var(--sys-blue-soft) !important; color: var(--text); }
.section-row:focus { outline: none; }
.section-row:focus .section-cell { box-shadow: inset 0 0 0 2px var(--sys-blue); }
.section-chevron {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-spring);
  margin-right: 6px;
  color: var(--text-tert);
}
.section-row.collapsed .section-chevron { transform: rotate(-90deg); }
.section-count {
  background: var(--sta-progress-bg) !important;
  color: var(--sta-progress) !important;
  font-weight: 600;
  border: none;
}

/* ТОП-3 */
.top-rank-1 td { border-left: 3px solid #FFCC00; background: rgba(255, 204, 0, 0.05); }
.top-rank-2 td { border-left: 3px solid #B5B5BA; background: rgba(120,120,128, 0.04); }
.top-rank-3 td { border-left: 3px solid #B87333; background: rgba(184,115,51, 0.05); }
.medal { font-size: 1.05rem; line-height: 1; }

/* Пикер */
.picker-trigger {
  height: auto !important;
  min-height: 48px;
  cursor: pointer;
  background: var(--surface) !important;
  border: 0.5px solid var(--border);
  border-radius: var(--r);
  transition: border-color var(--t-fast) var(--ease-ios),
              background var(--t-fast) var(--ease-ios),
              box-shadow var(--t-fast) var(--ease-ios);
  text-align: left;
}
.picker-trigger:hover { border-color: var(--border-s); background: var(--surface-2) !important; }
.picker-trigger:focus { border-color: var(--sys-blue); box-shadow: 0 0 0 3px var(--accent-ring); }
.picker-trigger.is-invalid { border-color: var(--sys-red); box-shadow: 0 0 0 3px rgba(255,59,48,0.18); }
#cat-picker-label { display: inline-block; max-width: calc(100% - 60px); }

.picker-breadcrumb {
  padding: 10px 14px;
  background: var(--surface-2);
  border: 0.5px solid var(--border);
  border-radius: var(--r);
  font-size: 0.86rem;
}
.picker-crumb { font-weight: 600; color: var(--text); }

.picker-card {
  width: 100%;
  min-height: 124px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 16px 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-ios),
              box-shadow var(--t-base) var(--ease-out-expo),
              transform var(--t-base) var(--ease-spring);
  box-shadow: var(--shadow-sm);
}
.picker-card:hover {
  border-color: var(--sys-blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.picker-card:active { transform: scale(0.97); }
.picker-card .bi { font-size: 2.2rem; line-height: 1; color: var(--sys-blue); }
.picker-card-label { font-family: var(--font-sans); font-weight: 600; font-size: 0.96rem; letter-spacing: -0.005em; }
.picker-card-count { font-size: 0.76rem; color: var(--text-tert); font-family: var(--font-sans); }

.picker-card.pf-floor   { border-top: 3px solid var(--sys-orange); }
.picker-card.pf-ceiling { border-top: 3px solid var(--sys-blue); }
.picker-card.pf-walls   { border-top: 3px solid var(--sys-green); }
.picker-card.pf-other   { border-top: 3px solid var(--text-quart); }

.picker-list .list-group-item {
  border: none;
  border-bottom: 0.5px solid var(--hairline);
  background: transparent;
  cursor: pointer;
  padding: 12px 14px;
}
.picker-list .list-group-item:last-child { border-bottom: none; }
.picker-list .list-group-item:hover { background: var(--sys-blue-soft); }
.picker-row { text-align: left; }

/* Мастер — номер-таблетка */
.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--sys-blue);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.82rem;
  margin-right: 10px;
  flex-shrink: 0;
}

#quick-preview-body tr.row-warn td    { background: var(--sys-orange-soft); }
#quick-preview-body tr.row-edited td  { background: var(--sys-blue-soft); box-shadow: inset 3px 0 0 var(--sys-blue); }
#quick-preview-body tr.row-edited.row-warn td { background: #FBE5F0; }
#quick-preview-body tr.row-proposed-cls td {
  background: rgba(255, 204, 0, 0.10);
  box-shadow: inset 3px 0 0 var(--sys-orange);
}
.proposed-work { max-width: 320px; }

tr.cat-pending td { background: var(--sys-orange-soft); }
.pending-card { border-left: 3px solid var(--sys-orange); }
.pending-card .card-header { background: var(--sys-orange-soft); }

/* Nav-pills */
.nav-pills .nav-link {
  color: var(--text-sec);
  font-family: var(--font-sans);
  font-weight: 500;
  border-radius: var(--r);
  padding: 8px 16px;
  background: transparent;
  font-size: 0.88rem;
  letter-spacing: -0.005em;
  text-transform: none;
  transition: background var(--t-fast) var(--ease-ios), color var(--t-fast) var(--ease-ios);
}
.nav-pills .nav-link:hover { color: var(--text); background: var(--surface-dim); }
.nav-pills .nav-link.active {
  background: var(--sys-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0,122,255,0.25);
}

/* Группа бригадира */
.submitter-group .submitter-header {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  user-select: none;
  padding: 14px 18px !important;
  transition: border-color var(--t-fast) var(--ease-ios),
              box-shadow var(--t-base) var(--ease-out-expo);
  box-shadow: var(--shadow-sm);
}
.submitter-group .submitter-header:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-s);
}
.submitter-group .submitter-header[aria-expanded="false"] .submitter-chev { transform: rotate(-90deg); }
.submitter-chev {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-spring);
  color: var(--text-tert);
}

/* Raw text */
.raw-text-block {
  background: var(--surface-dim);
  border: 0.5px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.55;
  margin: 0;
}

/* Виджеты дашборда (drag-handles, jiggle) */
.dash-widget { position: relative; }
.dash-widget .widget-handle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 6px;
  background: var(--sys-orange-soft);
  border: 1px dashed var(--sys-orange);
  border-radius: var(--r);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--sys-orange-d);
  cursor: grab;
  user-select: none;
}
.dash-widget .widget-handle:active { cursor: grabbing; }
.dash-widget .widget-handle .widget-title { font-weight: 600; flex: 1; }
.dash-widget .widget-handle .widget-remove {
  border: none; background: transparent; color: var(--sys-red);
  font-size: 1.1rem; line-height: 1; padding: 2px 8px; cursor: pointer;
  border-radius: var(--r-xs);
  transition: background var(--t-fast);
}
.dash-widget .widget-handle .widget-remove:hover { background: var(--sys-red-soft); }

body.dash-editing .dash-widget .widget-handle { display: flex; }
body.dash-editing .dash-widget {
  animation: widget-jiggle 0.6s ease-in-out infinite alternate;
  transform-origin: center;
}
body.dash-editing .dash-widget:nth-child(odd) { animation-delay: 0.2s; }
@keyframes widget-jiggle {
  0%   { transform: rotate(-0.4deg); }
  100% { transform: rotate(0.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.dash-editing .dash-widget { animation: none !important; }
}

.dash-widget.sortable-ghost > *:not(.widget-handle) { opacity: 0.25; }
.dash-widget.sortable-drag  { opacity: 0.95; cursor: grabbing; }
.dash-widget.sortable-chosen .widget-handle { background: var(--sys-blue-soft); border-color: var(--sys-blue); color: var(--sys-blue-d); }

.dash-add-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px dashed var(--border-s);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-ios),
              border-color var(--t-fast) var(--ease-ios),
              color var(--t-fast) var(--ease-ios),
              transform 90ms var(--ease-spring);
}
.dash-add-chip:hover {
  background: var(--sys-blue);
  border-color: var(--sys-blue);
  color: #FFFFFF;
}
.dash-add-chip:active { transform: scale(0.96); }
.dash-add-chip .bi { color: inherit; }

/* Thanks modal */
.thanks-modal-content {
  border: 0.5px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--surface) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.thanks-check-circle { width: 110px; height: 110px; margin: 0 auto; }
.thanks-check-circle svg { width: 100%; height: 100%; }
.thanks-circle-bg {
  stroke: var(--sys-green); stroke-width: 5;
  stroke-dasharray: 226; stroke-dashoffset: 226;
  animation: circle-draw 0.6s var(--ease-out-expo) 0.1s forwards;
}
.thanks-check-path {
  stroke: var(--sys-green); stroke-width: 6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 80; stroke-dashoffset: 80;
  animation: check-draw 0.4s var(--ease-out-expo) 0.7s forwards;
}
@keyframes circle-draw { to { stroke-dashoffset: 0; } }
@keyframes check-draw  { to { stroke-dashoffset: 0; } }

.thanks-message {
  background: var(--sys-blue-soft);
  border: 0.5px solid var(--sys-blue);
  border-left: 3px solid var(--sys-blue);
  border-radius: var(--r);
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
  font-weight: 400;
  line-height: 1.5;
  animation: thanks-appear 0.5s var(--ease-out-expo) 1.1s backwards;
}
@keyframes thanks-appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Превью фото/видео */
.brig-thumb {
  position: relative;
  width: 110px; height: 110px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-dim);
  border: 0.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out-expo);
}
.brig-thumb:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow); }
.brig-thumb-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.brig-thumb-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78));
  color: #FFFFFF; font-size: 0.72rem;
  padding: 16px 8px 6px;
  font-family: var(--font-sans); font-weight: 500;
}
.brig-thumb-label .bi { margin-right: 4px; }
.brig-thumb-remove {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: #FFFFFF;
  font-size: 0.75rem; line-height: 1;
  cursor: pointer; padding: 0;
  display: grid; place-items: center;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-spring);
}
.brig-thumb-remove:hover { background: var(--sys-red); transform: scale(1.1); }

.pto-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.pto-attach-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-dim);
  border: 0.5px solid var(--border);
  display: block;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast) var(--ease-ios),
              box-shadow var(--t-base) var(--ease-out-expo),
              transform var(--t-base) var(--ease-spring);
}
.pto-attach-item:hover {
  border-color: var(--sys-blue);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.pto-attach-item img, .pto-attach-item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pto-attach-badge {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(0,0,0,0.78); color: #FFFFFF;
  border-radius: var(--r-xs); padding: 3px 8px;
  font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500;
}

.inbox-card .submission-preview {
  background: var(--surface-2);
  border-radius: var(--r);
  padding: 12px 16px;
  font-style: italic;
  color: var(--text-sec);
  border-left: 3px solid var(--sys-blue);
}

/* Кликабельные карточки и строки */
.clickable-card {
  display: block;
  cursor: pointer;
  transition: box-shadow var(--t-base) var(--ease-out-expo),
              border-color var(--t-fast) var(--ease-ios),
              transform var(--t-base) var(--ease-spring);
}
.clickable-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-s);
  transform: translateY(-2px);
}
.clickable-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.clickable-card:active { transform: translateY(0) scale(0.99); }

a.clickable-card.text-bg-primary,
a.clickable-card.text-bg-success,
a.clickable-card.text-bg-warning,
a.clickable-card.text-bg-danger { color: var(--text) !important; }

tr.clickable-row { cursor: pointer; transition: background var(--t-fast) var(--ease-ios); }
tr.clickable-row:hover { background: var(--sys-blue-soft); }
tr.clickable-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sys-blue); }

.row-actions { cursor: default; }
.row-actions .btn, .row-actions form { cursor: pointer; }

/* ── Спиннеры — мягкие ───────────────────────────────────────────────────── */
.spinner-border, .spinner-border-sm {
  border-width: 2px;
  animation-duration: 0.7s;
}

/* ── Skeleton (заготовка для будущих loading states) ─────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--surface-dim) 0%,
    var(--surface-2) 50%,
    var(--surface-dim) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
   МОБИЛЬНЫЕ ПРАВИЛА — приоритет: iOS-привычки, крупные touch-targets,
   плотная вертикальная подача, sticky CTA, безопасные зоны
   ────────────────────────────────────────────────────────────────────────── */

/* Tablet и ниже (lg) */
@media (max-width: 991.98px) {
  main.container-fluid { padding: 20px 16px 32px; }
}

/* Mobile (md) — главное правило */
@media (max-width: 767.98px) {
  html, body { font-size: 15px; }
  main.container-fluid {
    padding: 14px 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  h1 { font-size: 1.4rem; letter-spacing: -0.018em; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1.05rem; }
  h4, .h4 { font-size: 0.95rem; }
  .display-6 { font-size: 1.7rem; }

  /* Карточки на мобильном — больше воздуха, мягче скругления */
  .card {
    border-radius: var(--r-lg);
    border-color: var(--hairline);
  }
  .card-header { padding: 14px 16px; font-size: 0.9rem; }
  .card-body   { padding: 16px; }

  /* Все интерактивные элементы — Apple HIG минимум 44pt */
  .form-control, .form-select { min-height: 44px; font-size: 1rem; padding: 10px 13px; border-radius: var(--r); }
  .form-control-lg, .form-select-lg { min-height: 52px; font-size: 1.05rem; padding: 13px 16px; border-radius: var(--r-md); }
  textarea.form-control { min-height: 88px; }
  .btn { min-height: 44px; padding: 10px 18px; font-size: 0.95rem; border-radius: var(--r-md); }
  .btn-lg { min-height: 52px; padding: 14px 22px; font-size: 1.02rem; border-radius: var(--r-md); font-weight: 600; }
  .btn-sm { min-height: 36px; padding: 7px 14px; font-size: 0.86rem; }
  .volume-input { font-size: 1.45rem !important; font-weight: 700; }

  /* Form labels — iOS-style на мобильном */
  .form-label { font-size: 0.88rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }

  /* Sticky bottom CTA — то что часто нужно нажать */
  .submit-sticky {
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--material-strong);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-top: 0.5px solid var(--border);
    z-index: 1020;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
  }
  .submit-sticky .btn { width: 100%; }
  .mobile-form { margin-bottom: 96px; }

  /* Navbar на мобильном — чуть компактнее, бургер крупнее */
  .navbar { padding: 0 12px; min-height: 48px; }
  .navbar-brand { gap: 8px; padding: 6px 0; }
  .navbar-brand .brand-logo { height: 26px; }
  .navbar-brand .brand-wordmark .brand-name { font-size: 0.92rem; }

  /* Развёрнутое меню — sheet-style сверху */
  .navbar-collapse {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--material-strong);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-top: 0.5px solid var(--border);
    border-bottom: 0.5px solid var(--border);
    padding: 10px 12px 14px;
    margin-top: 0;
    box-shadow: var(--shadow-md);
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
    animation: sheet-slide-down 280ms var(--ease-out-expo);
  }
  @keyframes sheet-slide-down {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .navbar .nav-link {
    padding: 12px 14px !important;
    border-radius: var(--r);
    min-height: 44px;
    font-size: 0.95rem;
  }
  .navbar .nav-link .bi { font-size: 1.05rem; margin-right: 4px; }

  /* Auth — больше воздуха на мобильном */
  .auth-wrap { padding: 24px 16px; }
  .auth-card { padding: 32px 22px 26px; border-radius: var(--r-xl); }
  .auth-logo { width: 64px; height: 80px; }
  .auth-title { font-size: 1.35rem; }
  .ios-field input { padding: 13px 14px; font-size: 1rem; }

  /* Модалки на мобильном превращаются в bottom-sheet */
  .modal.fade .modal-dialog { transform: translate3d(0, 100%, 0); }
  .modal.show .modal-dialog { transform: none; }
  .modal-dialog {
    margin: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transition: transform 320ms var(--ease-out-expo);
  }
  .modal-content {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: none;
    max-height: calc(100vh - env(safe-area-inset-top) - 20px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .modal-header {
    padding: 16px 18px 14px;
    /* Sheet «handle» — индикатор сверху как в iOS */
    position: relative;
  }
  .modal-header::before {
    content: '';
    position: absolute;
    top: 7px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px;
    border-radius: var(--r-pill);
    background: rgba(120, 120, 128, 0.4);
  }
  .modal-body { padding: 16px 18px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer {
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-footer .btn { width: 100%; margin: 0; }
  .modal-xl .modal-body, .modal-lg .modal-body, .modal .modal-body { max-height: none; }

  /* Таблицы на мобильном — горизонтальный scroll, мягкие тени */
  .table-responsive {
    border-radius: var(--r-md);
    box-shadow: inset -8px 0 8px -8px rgba(0,0,0,0.10);
  }
  .table thead th { padding: 8px 10px; font-size: 0.66rem; }
  .table tbody td { padding: 10px; font-size: 0.86rem; }

  /* Список — увеличенные строки */
  .list-group-item { padding: 14px 16px; min-height: 52px; }

  /* Бейджи на мобильном */
  .badge { font-size: 0.72rem; padding: 4px 10px; }

  /* Picker карточки — крупнее на мобильном */
  .picker-card { min-height: 110px; padding: 14px 8px; }
  .picker-card .bi { font-size: 1.9rem; }
  .picker-card-label { font-size: 0.92rem; }

  /* Row-actions на мобильном — чуть ниже, чтобы не сбивались */
  .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

  /* Превью фото — больше на мобильном */
  .brig-thumb { width: 96px; height: 96px; }

  /* Алерты компактнее */
  .alert { padding: 11px 14px; font-size: 0.88rem; border-radius: var(--r); }
}

/* Совсем маленькие (sm) */
@media (max-width: 575.98px) {
  .btn-group { flex-wrap: wrap; }
  .btn-group > .btn { flex: 1 1 auto; min-width: 70px; }

  /* Стек кнопок в формах — вертикально */
  form .d-flex.gap-2 > .btn,
  .card-body .d-flex.gap-2 > .btn { flex: 1 1 auto; }

  /* На очень узком — фон без блюра (CPU дорого) */
  .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface) !important; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}