/* ==========================================================================
   NEWBUS UI  —  мягкий дашборд-фреймворк
   Вдохновлён светлыми SaaS-интерфейсами: воздушный фон, скруглённые карточки,
   один спокойный акцентный цвет, мягкие тени вместо жёстких линий.

   Канонический файл проекта elogoped.ru: app/static/css/newbus.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ШРИФТЫ
   Google Fonts через @import намеренно не используется: он блокирует рендеринг,
   нарушает строгую CSP и отправляет IP посетителя стороннему сервису — лишнее
   в проекте с персональными данными. Положите файлы в static/fonts/ и
   раскомментируйте @font-face; до тех пор работает системный шрифт.
   -------------------------------------------------------------------------- */
/*
@font-face{ font-family:'Inter'; src:url('../fonts/Inter.woff2') format('woff2');
            font-weight:400 700; font-display:swap; }
@font-face{ font-family:'Manrope'; src:url('../fonts/Manrope.woff2') format('woff2');
            font-weight:500 800; font-display:swap; }
*/

/* --------------------------------------------------------------------------
   2. ДИЗАЙН-ТОКЕНЫ
   -------------------------------------------------------------------------- */
:root{
  /* -- цвет: фон и поверхности -- */
  --nb-bg:            #F3F4FA;
  --nb-surface:       #FFFFFF;
  --nb-surface-alt:   #F8F9FD;
  --nb-border:        #E8E9F3;
  --nb-border-strong: #D9DBEA;

  /* -- цвет: текст -- */
  --nb-text:           #1C1F2E;
  --nb-text-secondary: #888CA3;
  --nb-text-muted:     #B6B9CC;
  --nb-text-on-accent: #FFFFFF;

  /* -- акцент -- */
  --nb-primary:        #5B6EF5;
  --nb-primary-hover:  #4A5CE2;
  --nb-primary-active: #3E4FCC;
  --nb-primary-soft:   #EEF0FE;
  --nb-primary-soft-hover: #E1E4FD;

  /* -- статусные цвета -- */
  --nb-success:      #22C55E;
  --nb-success-soft: #E8F9EF;
  --nb-success-text: #17A34B;
  --nb-warning:      #F59E0B;
  --nb-warning-soft: #FEF3E2;
  --nb-warning-text: #B4790A;
  --nb-danger:       #EF4444;
  --nb-danger-soft:  #FDEBEB;
  --nb-info:         #3B82F6;
  --nb-info-soft:    #EAF2FE;
  --nb-violet:       #A855F7;
  --nb-violet-soft:  #F4EBFE;

  /* -- радиусы -- */
  --nb-radius-sm:   8px;
  --nb-radius-md:   12px;
  --nb-radius-lg:   16px;
  --nb-radius-xl:   22px;
  --nb-radius-pill: 999px;

  /* -- отступы (шкала 4px) -- */
  --nb-space-1: 4px;
  --nb-space-2: 8px;
  --nb-space-3: 12px;
  --nb-space-4: 16px;
  --nb-space-5: 20px;
  --nb-space-6: 24px;
  --nb-space-7: 28px;
  --nb-space-8: 32px;
  --nb-space-10: 40px;
  --nb-space-12: 48px;

  /* -- тени -- */
  --nb-shadow-sm: 0 1px 2px rgba(28,31,46,.05);
  --nb-shadow-md: 0 6px 16px rgba(28,31,46,.06);
  --nb-shadow-lg: 0 16px 40px rgba(28,31,46,.10);
  --nb-shadow-focus: 0 0 0 4px rgba(91,110,245,.18);

  /* -- типографика -- */
  --nb-font-display: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nb-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* -- переходы -- */
  --nb-ease: cubic-bezier(.4,0,.2,1);
  --nb-fast: 120ms var(--nb-ease);
  --nb-med:  200ms var(--nb-ease);

  /* -- каркас приложения -- */
  --nb-sidebar-w: 248px;
  --nb-topbar-h: 64px;
}

/* --------------------------------------------------------------------------
   3. RESET / БАЗА
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--nb-bg);
  color: var(--nb-text);
  font-family: var(--nb-font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--nb-font-display);
  font-weight: 700;
  margin: 0 0 var(--nb-space-2);
  color: var(--nb-text);
  letter-spacing: -0.01em;
}
h1{ font-size: 32px; font-weight: 800; }
h2{ font-size: 24px; }
h3{ font-size: 19px; }
h4{ font-size: 16px; }
p{ margin: 0 0 var(--nb-space-3); color: var(--nb-text-secondary); }
a{ color: var(--nb-primary); text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width: 100%; display: block; }
ul,ol{ margin: 0; padding: 0; list-style: none; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; color: inherit; }

/* Контур вместо тени: box-shadow обрезается у предков с overflow:hidden */
:focus-visible{
  outline: 2px solid var(--nb-primary);
  outline-offset: 2px;
  border-radius: var(--nb-radius-sm);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   4. ЛЕЙАУТ / КОНТЕЙНЕРЫ
   -------------------------------------------------------------------------- */
.nb-container{ max-width: 1200px; margin: 0 auto; padding: 0 var(--nb-space-6); }
.nb-container-narrow{ max-width: 720px; margin: 0 auto; padding: 0 var(--nb-space-6); }
.nb-grid{ display: grid; gap: var(--nb-space-5); }
.nb-grid-2{ grid-template-columns: repeat(2, 1fr); }
.nb-grid-3{ grid-template-columns: repeat(3, 1fr); }
.nb-grid-4{ grid-template-columns: repeat(4, 1fr); }
.nb-flex{ display: flex; }
.nb-flex-col{ display: flex; flex-direction: column; }
.nb-flex-wrap{ flex-wrap: wrap; }
.nb-flex-1{ flex: 1; }
.nb-items-center{ align-items: center; }
.nb-items-start{ align-items: flex-start; }
.nb-justify-between{ justify-content: space-between; }
.nb-justify-end{ justify-content: flex-end; }
.nb-justify-center{ justify-content: center; }
.nb-gap-1{ gap: var(--nb-space-1); } .nb-gap-2{ gap: var(--nb-space-2); }
.nb-gap-3{ gap: var(--nb-space-3); } .nb-gap-4{ gap: var(--nb-space-4); }
.nb-gap-5{ gap: var(--nb-space-5); } .nb-gap-6{ gap: var(--nb-space-6); }
@media (max-width: 860px){
  .nb-grid-2, .nb-grid-3, .nb-grid-4{ grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5. КНОПКИ
   Единая система: 3 размера × 6 стилей. Все на общей геометрии.
   -------------------------------------------------------------------------- */
.nb-btn{
  --btn-h: 44px;
  --btn-px: 20px;
  --btn-radius: var(--nb-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nb-space-2);
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  font-family: var(--nb-font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--nb-fast), border-color var(--nb-fast),
              color var(--nb-fast), box-shadow var(--nb-fast), transform var(--nb-fast);
  user-select: none;
}
.nb-btn:hover{ text-decoration: none; }
.nb-btn:active{ transform: translateY(1px); }
.nb-btn:disabled, .nb-btn.is-disabled{
  opacity: .45; cursor: not-allowed; pointer-events: none;
}
.nb-btn svg{ width: 18px; height: 18px; flex-shrink: 0; }

/* размеры */
.nb-btn-sm{ --btn-h: 34px; --btn-px: 14px; --btn-radius: var(--nb-radius-sm); font-size: 13px; }
.nb-btn-lg{ --btn-h: 52px; --btn-px: 26px; --btn-radius: var(--nb-radius-lg); font-size: 15px; }

/* primary */
.nb-btn-primary{ background: var(--nb-primary); color: var(--nb-text-on-accent); box-shadow: 0 4px 10px rgba(91,110,245,.28); }
.nb-btn-primary:hover{ background: var(--nb-primary-hover); color: var(--nb-text-on-accent); }
.nb-btn-primary:active{ background: var(--nb-primary-active); }

/* secondary — мягкая заливка в тон акцента */
.nb-btn-secondary{ background: var(--nb-primary-soft); color: var(--nb-primary); }
.nb-btn-secondary:hover{ background: var(--nb-primary-soft-hover); color: var(--nb-primary); }

/* outline */
.nb-btn-outline{ background: var(--nb-surface); color: var(--nb-text); border-color: var(--nb-border-strong); }
.nb-btn-outline:hover{ border-color: var(--nb-primary); color: var(--nb-primary); }

/* ghost — без фона, для тулбаров */
.nb-btn-ghost{ background: transparent; color: var(--nb-text-secondary); }
.nb-btn-ghost:hover{ background: var(--nb-surface-alt); color: var(--nb-text); }

/* danger */
.nb-btn-danger{ background: var(--nb-danger-soft); color: var(--nb-danger); }
.nb-btn-danger:hover{ background: #FADCDC; color: var(--nb-danger); }
.nb-btn-danger-solid{ background: var(--nb-danger); color: #fff; }
.nb-btn-danger-solid:hover{ background: #DC3B3B; color: #fff; }

/* icon-only button */
.nb-btn-icon{ width: var(--btn-h); padding: 0; border-radius: var(--btn-radius); }

/* полная ширина */
.nb-btn-block{ width: 100%; }

/* состояние загрузки */
.nb-btn.is-loading{ color: transparent !important; position: relative; pointer-events: none; }
.nb-btn.is-loading::after{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-top-color: transparent;
  color: var(--nb-text-on-accent);
  animation: nb-spin .6s linear infinite;
}
@keyframes nb-spin{ to{ transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   6. ФОРМЫ
   -------------------------------------------------------------------------- */
.nb-field{ margin-bottom: var(--nb-space-4); }
.nb-label{
  display: block; margin-bottom: var(--nb-space-2);
  font-size: 13px; font-weight: 600; color: var(--nb-text);
}
.nb-label .nb-req{ color: var(--nb-danger); margin-left: 2px; }
.nb-hint{ margin-top: var(--nb-space-2); font-size: 12.5px; color: var(--nb-text-muted); }
.nb-error{ margin-top: var(--nb-space-2); font-size: 12.5px; color: var(--nb-danger); }

.nb-input, .nb-select, .nb-textarea{
  width: 100%;
  height: 44px;
  padding: 0 var(--nb-space-4);
  background: var(--nb-surface-alt);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-md);
  color: var(--nb-text);
  transition: border-color var(--nb-fast), box-shadow var(--nb-fast), background var(--nb-fast);
}
.nb-input::placeholder, .nb-textarea::placeholder{ color: var(--nb-text-muted); }
.nb-textarea{ height: auto; min-height: 110px; padding: var(--nb-space-3) var(--nb-space-4); resize: vertical; line-height: 1.55; }
.nb-input:focus, .nb-select:focus, .nb-textarea:focus{
  outline: none; background: var(--nb-surface);
  border-color: var(--nb-primary); box-shadow: var(--nb-shadow-focus);
}
.nb-input.is-error, .nb-select.is-error, .nb-textarea.is-error{ border-color: var(--nb-danger); }
.nb-input.is-error ~ .nb-hint{ color: var(--nb-danger); }
.nb-input:disabled, .nb-select:disabled, .nb-textarea:disabled{
  opacity:.6; cursor: not-allowed;
}

.nb-select{ appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23888CA3' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}

/* поиск с иконкой */
.nb-search{ position: relative; }
.nb-search .nb-input{ padding-left: 42px; }
.nb-search svg{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--nb-text-muted); pointer-events: none;
}

/* чекбокс */
.nb-checkbox{ display: inline-flex; align-items: center; gap: var(--nb-space-2); cursor: pointer; font-size: 14px; }
.nb-checkbox input{ appearance: none; width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid var(--nb-border-strong); background: var(--nb-surface); cursor: pointer;
  display: grid; place-content: center; transition: all var(--nb-fast); flex-shrink: 0; }
.nb-checkbox input::after{ content:""; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transition: transform var(--nb-fast); margin-top: -2px; }
.nb-checkbox input:checked{ background: var(--nb-primary); border-color: var(--nb-primary); }
.nb-checkbox input:checked::after{ transform: rotate(45deg) scale(1); }

/* радио */
.nb-radio{ display: inline-flex; align-items: center; gap: var(--nb-space-2); cursor: pointer; font-size: 14px; }
.nb-radio input{ appearance: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--nb-border-strong); display: grid; place-content: center; cursor: pointer; flex-shrink: 0; }
.nb-radio input::after{ content:""; width: 10px; height: 10px; border-radius: 50%; background: var(--nb-primary); transform: scale(0); transition: transform var(--nb-fast); }
.nb-radio input:checked{ border-color: var(--nb-primary); }
.nb-radio input:checked::after{ transform: scale(1); }

/* переключатель (switch) */
.nb-switch{ position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.nb-switch input{ opacity: 0; width: 0; height: 0; }
.nb-switch-track{ position: absolute; inset: 0; background: var(--nb-border-strong); border-radius: var(--nb-radius-pill); transition: background var(--nb-fast); cursor: pointer; }
.nb-switch-track::before{ content:""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform var(--nb-fast); box-shadow: var(--nb-shadow-sm); }
.nb-switch input:checked + .nb-switch-track{ background: var(--nb-primary); }
.nb-switch input:checked + .nb-switch-track::before{ transform: translateX(18px); }

/* --------------------------------------------------------------------------
   7. КАРТОЧКИ
   -------------------------------------------------------------------------- */
.nb-card{
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-lg);
  padding: var(--nb-space-6);
  box-shadow: var(--nb-shadow-sm);
}
.nb-card-header{ display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-3); margin-bottom: var(--nb-space-4); }
.nb-card-title{ font-family: var(--nb-font-display); font-weight: 700; font-size: 16px; margin: 0; }
.nb-card-flat{ box-shadow: none; }
.nb-card-alt{ background: var(--nb-surface-alt); border-color: transparent; }
.nb-card-pad-0{ padding: 0; overflow: hidden; }
.nb-card-link{ display: block; color: inherit; }
.nb-card-link:hover{ text-decoration: none; box-shadow: var(--nb-shadow-md); transform: translateY(-2px); transition: all var(--nb-med); }

/* --------------------------------------------------------------------------
   8. БЕЙДЖИ / ТЕГИ (pill)
   -------------------------------------------------------------------------- */
.nb-badge{
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 var(--nb-space-3);
  border-radius: var(--nb-radius-pill);
  font-size: 12.5px; font-weight: 600;
  background: var(--nb-surface-alt); color: var(--nb-text-secondary);
  white-space: nowrap;
}
.nb-badge::before{ content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.nb-badge-primary{ background: var(--nb-primary-soft); color: var(--nb-primary); }
.nb-badge-success{ background: var(--nb-success-soft); color: var(--nb-success-text); }
.nb-badge-warning{ background: var(--nb-warning-soft); color: var(--nb-warning-text); }
.nb-badge-danger{ background: var(--nb-danger-soft); color: var(--nb-danger); }
.nb-badge-info{ background: var(--nb-info-soft); color: var(--nb-info); }
.nb-badge-violet{ background: var(--nb-violet-soft); color: var(--nb-violet); }
.nb-badge-dot-off::before{ display: none; }

/* --------------------------------------------------------------------------
   9. АВАТАРЫ
   -------------------------------------------------------------------------- */
.nb-avatar{
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; background: var(--nb-primary-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--nb-primary);
  border: 2px solid var(--nb-surface); flex-shrink: 0;
}
.nb-avatar-sm{ width: 30px; height: 30px; font-size: 12px; }
.nb-avatar-lg{ width: 56px; height: 56px; font-size: 18px; }
.nb-avatar-group{ display: flex; }
.nb-avatar-group .nb-avatar{ margin-left: -10px; }
.nb-avatar-group .nb-avatar:first-child{ margin-left: 0; }
.nb-avatar-group-more{
  width: 40px; height: 40px; border-radius: 50%; background: var(--nb-surface-alt);
  border: 2px solid var(--nb-surface); display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--nb-text-secondary); margin-left: -10px;
}

/* --------------------------------------------------------------------------
   10. НАВИГАЦИЯ / САЙДБАР
   -------------------------------------------------------------------------- */
.nb-sidebar{
  width: var(--nb-sidebar-w); background: var(--nb-surface); border-radius: var(--nb-radius-xl);
  padding: var(--nb-space-5); border: 1px solid var(--nb-border);
}
.nb-nav-item{
  display: flex; align-items: center; gap: var(--nb-space-3);
  padding: var(--nb-space-3) var(--nb-space-4);
  border-radius: var(--nb-radius-md);
  color: var(--nb-text-secondary); font-weight: 600; font-size: 14px;
  cursor: pointer; transition: background var(--nb-fast), color var(--nb-fast);
  text-decoration: none;
}
.nb-nav-item svg{ width: 19px; height: 19px; flex-shrink: 0; }
.nb-nav-item:hover{ background: var(--nb-surface-alt); color: var(--nb-text); text-decoration: none; }
.nb-nav-item.is-active,
.nb-nav-item[aria-current="page"]{ background: var(--nb-primary); color: #fff; }
.nb-nav-item.is-active:hover,
.nb-nav-item[aria-current="page"]:hover{ background: var(--nb-primary-hover); color: #fff; }
.nb-nav-section{
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--nb-text-muted); padding: var(--nb-space-4) var(--nb-space-4) var(--nb-space-2);
}

/* табы */
.nb-tabs{ display: inline-flex; gap: 4px; background: var(--nb-surface-alt); padding: 4px; border-radius: var(--nb-radius-md); }
.nb-tab{
  padding: 8px 18px; border-radius: var(--nb-radius-sm); font-weight: 600; font-size: 13.5px;
  color: var(--nb-text-secondary); cursor: pointer; border: none; background: transparent;
  transition: all var(--nb-fast); text-decoration: none; display: inline-flex; align-items: center;
}
.nb-tab:hover{ text-decoration: none; color: var(--nb-text); }
.nb-tab.is-active{ background: var(--nb-surface); color: var(--nb-text); box-shadow: var(--nb-shadow-sm); }

/* --------------------------------------------------------------------------
   11. ТАБЛИЦА
   -------------------------------------------------------------------------- */
.nb-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nb-table{ width: 100%; border-collapse: separate; border-spacing: 0; }
.nb-table th{
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--nb-text-muted); font-weight: 700; padding: var(--nb-space-3) var(--nb-space-4);
  border-bottom: 1px solid var(--nb-border); white-space: nowrap; background: var(--nb-surface);
}
.nb-table-sticky th{ position: sticky; top: 0; z-index: 2; }
.nb-table td{
  padding: var(--nb-space-4); border-bottom: 1px solid var(--nb-border); font-size: 14px;
  vertical-align: middle;
}
.nb-table tr:last-child td{ border-bottom: none; }
@media (hover: hover){
  .nb-table tbody tr:hover td{ background: var(--nb-surface-alt); }
}
.nb-table-footer{
  display:flex; align-items:center; justify-content:space-between; gap: var(--nb-space-3);
  padding: var(--nb-space-3) var(--nb-space-4); border-top: 1px solid var(--nb-border);
  font-size: 13px; color: var(--nb-text-secondary);
}

/* --------------------------------------------------------------------------
   12. АЛЕРТЫ / УВЕДОМЛЕНИЯ
   -------------------------------------------------------------------------- */
.nb-alert{
  display: flex; gap: var(--nb-space-3); align-items: flex-start;
  padding: var(--nb-space-4); border-radius: var(--nb-radius-md);
  background: var(--nb-info-soft); border: 1px solid transparent;
  font-size: 13.5px; color: var(--nb-text);
}
.nb-alert svg{ width: 20px; height: 20px; flex-shrink: 0; color: var(--nb-info); }
.nb-alert strong{ display: block; margin-bottom: 2px; }
.nb-alert-success{ background: var(--nb-success-soft); } .nb-alert-success svg{ color: var(--nb-success-text); }
.nb-alert-warning{ background: var(--nb-warning-soft); } .nb-alert-warning svg{ color: var(--nb-warning-text); }
.nb-alert-danger{ background: var(--nb-danger-soft); } .nb-alert-danger svg{ color: var(--nb-danger); }

/* --------------------------------------------------------------------------
   13. МОДАЛЬНОЕ ОКНО
   -------------------------------------------------------------------------- */
.nb-modal-backdrop{
  position: fixed; inset: 0; background: rgba(20,22,35,.45);
  display: flex; align-items: center; justify-content: center; padding: var(--nb-space-6);
  backdrop-filter: blur(2px); z-index: 1000;
}
.nb-modal{
  width: 100%; max-width: 420px; background: var(--nb-surface);
  border-radius: var(--nb-radius-xl); padding: var(--nb-space-6);
  box-shadow: var(--nb-shadow-lg);
}
.nb-modal-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--nb-space-4); }
.nb-modal-footer{ display: flex; justify-content: flex-end; gap: var(--nb-space-3); margin-top: var(--nb-space-6); }

/* --------------------------------------------------------------------------
   14. ПРОГРЕСС / ИНДИКАТОРЫ
   -------------------------------------------------------------------------- */
.nb-progress{ height: 8px; border-radius: var(--nb-radius-pill); background: var(--nb-surface-alt); overflow: hidden; }
.nb-progress-bar{ height: 100%; border-radius: var(--nb-radius-pill); background: var(--nb-primary); transition: width var(--nb-med); }

/* --------------------------------------------------------------------------
   15. ПАГИНАЦИЯ
   -------------------------------------------------------------------------- */
.nb-pagination{ display: inline-flex; gap: var(--nb-space-2); }
.nb-page-item{
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--nb-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 600; color: var(--nb-text-secondary); cursor: pointer;
  transition: all var(--nb-fast); text-decoration: none;
}
.nb-page-item:hover{ background: var(--nb-surface-alt); text-decoration: none; }
.nb-page-item.is-active{ background: var(--nb-primary); color: #fff; }
.nb-page-item.is-disabled{ opacity:.4; pointer-events:none; }

/* --------------------------------------------------------------------------
   16. КАЛЕНДАРЬ (компактный, месяц)
   -------------------------------------------------------------------------- */
.nb-calendar{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.nb-calendar-label{ font-size: 11px; font-weight: 700; color: var(--nb-text-muted); padding-bottom: 6px; }
.nb-calendar-day{
  height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--nb-radius-sm); font-size: 13px; color: var(--nb-text); cursor: pointer;
}
.nb-calendar-day:hover{ background: var(--nb-surface-alt); }
.nb-calendar-day.is-muted{ color: var(--nb-text-muted); }
.nb-calendar-day.is-today{ background: var(--nb-primary); color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------------
   17. УТИЛИТЫ
   -------------------------------------------------------------------------- */
.nb-text-secondary{ color: var(--nb-text-secondary); }
.nb-text-muted{ color: var(--nb-text-muted); }
.nb-text-primary{ color: var(--nb-primary); }
.nb-text-danger{ color: var(--nb-danger); }
.nb-text-success{ color: var(--nb-success-text); }
.nb-text-sm{ font-size: 13px; }
.nb-text-xs{ font-size: 12px; }
.nb-text-lg{ font-size: 17px; }
.nb-text-center{ text-align: center; }
.nb-text-right{ text-align: right; }
.nb-font-semibold{ font-weight: 600; }
.nb-font-bold{ font-weight: 700; }
.nb-mt-0{ margin-top:0 } .nb-mb-0{ margin-bottom:0 }
.nb-mt-2{ margin-top: var(--nb-space-2) } .nb-mt-3{ margin-top: var(--nb-space-3) }
.nb-mt-4{ margin-top: var(--nb-space-4) } .nb-mt-5{ margin-top: var(--nb-space-5) }
.nb-mt-6{ margin-top: var(--nb-space-6) }
.nb-mb-2{ margin-bottom: var(--nb-space-2) } .nb-mb-3{ margin-bottom: var(--nb-space-3) }
.nb-mb-4{ margin-bottom: var(--nb-space-4) } .nb-mb-5{ margin-bottom: var(--nb-space-5) }
.nb-mb-6{ margin-bottom: var(--nb-space-6) }
.nb-w-full{ width: 100%; }
.nb-rounded-lg{ border-radius: var(--nb-radius-lg); }
.nb-divider{ height: 1px; background: var(--nb-border); border: none; margin: var(--nb-space-5) 0; }
.nb-truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-hidden{ display: none !important; }
.nb-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==========================================================================
   ДОПОЛНЕНИЯ ДЛЯ ЛИЧНОГО КАБИНЕТА (elogoped.ru)
   ========================================================================== */

/* --------------------------------------------------------------------------
   18. КАРКАС ПРИЛОЖЕНИЯ
   -------------------------------------------------------------------------- */
.nb-app{ min-height: 100vh; display: flex; flex-direction: column; }
.nb-topbar{
  height: var(--nb-topbar-h); background: var(--nb-surface);
  border-bottom: 1px solid var(--nb-border);
  display: flex; align-items: center; gap: var(--nb-space-4);
  padding: 0 var(--nb-space-6); position: sticky; top: 0; z-index: 100;
}
.nb-topbar-brand{
  font-family: var(--nb-font-display); font-weight: 800; font-size: 17px;
  color: var(--nb-text); text-decoration: none; display: flex; align-items: center; gap: 8px;
}
.nb-topbar-brand:hover{ text-decoration: none; }
.nb-topbar-spacer{ flex: 1; }

.nb-shell{ display: flex; gap: var(--nb-space-6); align-items: flex-start;
  max-width: 1360px; margin: 0 auto; width: 100%;
  padding: var(--nb-space-6); }
.nb-shell > .nb-sidebar{ position: sticky; top: calc(var(--nb-topbar-h) + var(--nb-space-6));
  flex-shrink: 0; }
.nb-main{ flex: 1; min-width: 0; padding-bottom: var(--nb-space-12); }

@media (max-width: 900px){
  .nb-shell{ flex-direction: column; padding: var(--nb-space-4); gap: var(--nb-space-4); }
  .nb-shell > .nb-sidebar{ position: static; width: 100%; }
  .nb-main{ padding-bottom: 90px; }
}

.nb-page-header{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--nb-space-4); flex-wrap: wrap; margin-bottom: var(--nb-space-6);
}
.nb-page-header h1{ font-size: 26px; margin: 0 0 2px; }
.nb-page-header p{ margin: 0; font-size: 13.5px; }

.nb-breadcrumbs{
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--nb-text-muted); margin-bottom: var(--nb-space-3);
}
.nb-breadcrumbs a{ color: var(--nb-text-secondary); }
.nb-breadcrumbs span::after{ content: "/"; margin-left: 6px; color: var(--nb-text-muted); }
.nb-breadcrumbs span:last-child::after{ content: ""; }

/* нижняя навигация для телефона */
.nb-bottom-nav{
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--nb-surface); border-top: 1px solid var(--nb-border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.nb-bottom-nav a{
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 600; color: var(--nb-text-muted); text-decoration: none;
  padding: 4px 2px; border-radius: var(--nb-radius-sm);
}
.nb-bottom-nav a svg{ width: 20px; height: 20px; }
.nb-bottom-nav a[aria-current="page"]{ color: var(--nb-primary); }
@media (max-width: 900px){ .nb-bottom-nav{ display: flex; } }

/* --------------------------------------------------------------------------
   19. КАЛЕНДАРЬ С СОБЫТИЯМИ (месяц)
   -------------------------------------------------------------------------- */
.nb-cal{
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--nb-border); border-radius: var(--nb-radius-lg);
  overflow: hidden; background: var(--nb-border);
  gap: 1px;
}
.nb-cal-head{
  background: var(--nb-surface-alt); padding: 10px 8px; text-align: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--nb-text-muted);
}
.nb-cal-cell{
  background: var(--nb-surface); min-height: 104px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.nb-cal-cell.is-out{ background: var(--nb-surface-alt); }
.nb-cal-date{
  font-size: 12.5px; font-weight: 700; color: var(--nb-text-secondary);
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
}
.nb-cal-cell.is-out .nb-cal-date{ color: var(--nb-text-muted); font-weight: 600; }
.nb-cal-cell.is-today .nb-cal-date{ background: var(--nb-primary); color: #fff; }

.nb-event{
  display: block; font-size: 11.5px; font-weight: 600; line-height: 1.3;
  padding: 4px 6px; border-radius: 6px; text-decoration: none;
  background: var(--nb-primary-soft); color: var(--nb-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-left: 3px solid var(--nb-primary);
}
.nb-event:hover{ text-decoration: none; filter: brightness(.97); }
.nb-event-free{ background: var(--nb-info-soft); color: var(--nb-info); border-left-color: var(--nb-info); }
.nb-event-done{ background: var(--nb-success-soft); color: var(--nb-success-text); border-left-color: var(--nb-success); }
.nb-event-miss{ background: var(--nb-warning-soft); color: var(--nb-warning-text); border-left-color: var(--nb-warning); }
.nb-event-time{ font-weight: 700; }

@media (max-width: 700px){
  .nb-cal-cell{ min-height: 68px; padding: 4px; }
  .nb-event{ font-size: 10px; padding: 2px 4px; }
}

/* --------------------------------------------------------------------------
   20. БОКОВАЯ ПАНЕЛЬ (drawer)
   -------------------------------------------------------------------------- */
.nb-drawer-backdrop{
  position: fixed; inset: 0; background: rgba(20,22,35,.45);
  z-index: 900; display: flex; justify-content: flex-end;
}
.nb-drawer{
  width: 100%; max-width: 460px; height: 100%; background: var(--nb-surface);
  padding: var(--nb-space-6); overflow-y: auto; box-shadow: var(--nb-shadow-lg);
  display: flex; flex-direction: column; gap: var(--nb-space-4);
}
.nb-drawer-header{ display: flex; align-items: center; justify-content: space-between; }

/* --------------------------------------------------------------------------
   21. ВЫПАДАЮЩЕЕ МЕНЮ
   -------------------------------------------------------------------------- */
.nb-dropdown{ position: relative; display: inline-block; }
.nb-menu{
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; z-index: 300;
  background: var(--nb-surface); border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-md); box-shadow: var(--nb-shadow-lg);
  padding: 6px; display: none;
}
.nb-dropdown.is-open .nb-menu{ display: block; }
.nb-menu a, .nb-menu button{
  display: flex; align-items: center; gap: var(--nb-space-2); width: 100%;
  padding: 9px 12px; border-radius: var(--nb-radius-sm); border: none; background: none;
  font-size: 13.5px; font-weight: 600; color: var(--nb-text); text-align: left;
  cursor: pointer; text-decoration: none;
}
.nb-menu a:hover, .nb-menu button:hover{ background: var(--nb-surface-alt); text-decoration: none; }
.nb-menu-danger{ color: var(--nb-danger) !important; }
.nb-menu-divider{ height:1px; background: var(--nb-border); margin: 5px 0; }

/* --------------------------------------------------------------------------
   22. ВСПЛЫВАЮЩИЕ СООБЩЕНИЯ
   -------------------------------------------------------------------------- */
.nb-toasts{
  position: fixed; top: calc(var(--nb-topbar-h) + 12px); right: 16px; z-index: 1100;
  display: flex; flex-direction: column; gap: var(--nb-space-2); max-width: min(420px, calc(100vw - 32px));
}
.nb-toast{
  display: flex; align-items: flex-start; gap: var(--nb-space-3);
  background: var(--nb-surface); border: 1px solid var(--nb-border);
  border-left: 4px solid var(--nb-info);
  border-radius: var(--nb-radius-md); box-shadow: var(--nb-shadow-lg);
  padding: var(--nb-space-3) var(--nb-space-4); font-size: 13.5px;
  animation: nb-toast-in 180ms var(--nb-ease);
}
.nb-toast-success{ border-left-color: var(--nb-success); }
.nb-toast-warning{ border-left-color: var(--nb-warning); }
.nb-toast-danger{ border-left-color: var(--nb-danger); }
.nb-toast-close{
  background: none; border: none; cursor: pointer; color: var(--nb-text-muted);
  font-size: 16px; line-height: 1; padding: 2px 4px; margin-left: auto;
}
@keyframes nb-toast-in{ from{ opacity: 0; transform: translateX(12px); } to{ opacity: 1; } }

/* --------------------------------------------------------------------------
   23. ПУСТЫЕ СОСТОЯНИЯ
   -------------------------------------------------------------------------- */
.nb-empty{
  text-align: center; padding: var(--nb-space-10) var(--nb-space-6);
  color: var(--nb-text-secondary);
}
.nb-empty svg{ width: 44px; height: 44px; color: var(--nb-text-muted); margin: 0 auto var(--nb-space-4); }
.nb-empty h3{ font-size: 16px; margin-bottom: var(--nb-space-2); }
.nb-empty p{ font-size: 13.5px; max-width: 380px; margin: 0 auto var(--nb-space-4); }

/* --------------------------------------------------------------------------
   24. ЗАГРУЗКА ФАЙЛОВ
   -------------------------------------------------------------------------- */
/* display:block обязателен: <label> по умолчанию inline, и пунктирная рамка
   разрывается на фрагменты по строкам вместо единого блока */
.nb-upload{
  display: block;
  border: 1.5px dashed var(--nb-border-strong); border-radius: var(--nb-radius-lg);
  background: var(--nb-surface-alt); padding: var(--nb-space-6);
  text-align: center; cursor: pointer; transition: all var(--nb-fast);
}
.nb-upload svg{ display: block; margin-left: auto; margin-right: auto; }
.nb-upload:hover, .nb-upload.is-dragover{
  border-color: var(--nb-primary); background: var(--nb-primary-soft);
}
.nb-upload svg{ width: 28px; height: 28px; color: var(--nb-text-muted); margin-bottom: var(--nb-space-2); }
.nb-upload input[type=file]{ display: none; }

.nb-file-item{
  display: flex; align-items: center; gap: var(--nb-space-3);
  padding: var(--nb-space-3); border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-md); background: var(--nb-surface);
}
.nb-file-icon{
  width: 38px; height: 38px; border-radius: var(--nb-radius-sm); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--nb-primary-soft); color: var(--nb-primary);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
}
.nb-file-meta{ min-width: 0; flex: 1; }
.nb-file-name{ font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   25. ПОКАЗАТЕЛИ
   -------------------------------------------------------------------------- */
.nb-stat{
  background: var(--nb-surface); border: 1px solid var(--nb-border);
  border-radius: var(--nb-radius-lg); padding: var(--nb-space-5);
  box-shadow: var(--nb-shadow-sm);
}
.nb-stat-label{
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--nb-text-muted); margin-bottom: 6px;
}
.nb-stat-value{ font-family: var(--nb-font-display); font-size: 28px; font-weight: 800; line-height: 1.1; }
.nb-stat-hint{ font-size: 12.5px; color: var(--nb-text-secondary); margin-top: 4px; }

/* --------------------------------------------------------------------------
   26. ЛЕНТА СОБЫТИЙ
   -------------------------------------------------------------------------- */
.nb-timeline{ position: relative; padding-left: var(--nb-space-6); }
.nb-timeline::before{
  content:""; position:absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--nb-border);
}
.nb-timeline-item{ position: relative; padding-bottom: var(--nb-space-5); }
.nb-timeline-item:last-child{ padding-bottom: 0; }
.nb-timeline-item::before{
  content:""; position:absolute; left: calc(-1 * var(--nb-space-6) + 2px); top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--nb-surface); border: 2px solid var(--nb-primary);
}
.nb-timeline-date{ font-size: 12px; font-weight: 700; color: var(--nb-text-muted); }

/* --------------------------------------------------------------------------
   27. СЕГМЕНТЫ И ФИЛЬТРЫ
   -------------------------------------------------------------------------- */
.nb-segmented{
  display: inline-flex; background: var(--nb-surface-alt); padding: 3px;
  border-radius: var(--nb-radius-md); gap: 2px;
}
.nb-segmented a, .nb-segmented button{
  padding: 7px 14px; border-radius: var(--nb-radius-sm); border: none; background: none;
  font-size: 13px; font-weight: 600; color: var(--nb-text-secondary);
  cursor: pointer; text-decoration: none;
}
.nb-segmented a:hover, .nb-segmented button:hover{ color: var(--nb-text); text-decoration: none; }
.nb-segmented .is-active{ background: var(--nb-surface); color: var(--nb-text); box-shadow: var(--nb-shadow-sm); }

.nb-chip{
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 var(--nb-space-3);
  border: 1px solid var(--nb-border-strong); border-radius: var(--nb-radius-pill);
  background: var(--nb-surface); color: var(--nb-text-secondary);
  font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: all var(--nb-fast);
}
.nb-chip:hover{ border-color: var(--nb-primary); color: var(--nb-primary); text-decoration: none; }
.nb-chip.is-active{ background: var(--nb-primary); border-color: var(--nb-primary); color: #fff; }

/* --------------------------------------------------------------------------
   28. СКЕЛЕТОНЫ
   -------------------------------------------------------------------------- */
.nb-skeleton{
  background: linear-gradient(90deg, var(--nb-surface-alt) 25%, #EFF1F8 37%, var(--nb-surface-alt) 63%);
  background-size: 400% 100%; border-radius: var(--nb-radius-sm);
  animation: nb-shimmer 1.4s ease infinite; height: 14px;
}
@keyframes nb-shimmer{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }

/* --------------------------------------------------------------------------
   29. СПИСОК СВОЙСТВ И ТЕКСТОВЫЕ БЛОКИ
   -------------------------------------------------------------------------- */
.nb-props{ display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: var(--nb-space-3) var(--nb-space-5); }
.nb-props dt{ font-size: 13px; font-weight: 600; color: var(--nb-text-secondary); }
.nb-props dd{ margin: 0; font-size: 14px; }
@media (max-width: 560px){
  .nb-props{ grid-template-columns: 1fr; gap: var(--nb-space-1); }
  .nb-props dd{ margin-bottom: var(--nb-space-3); }
}

.nb-prose{ max-width: 70ch; }
.nb-prose p{ color: var(--nb-text); margin-bottom: var(--nb-space-4); }
.nb-prose h2{ margin-top: var(--nb-space-8); }
.nb-prose h3{ margin-top: var(--nb-space-6); }
.nb-prose ul{ list-style: disc; padding-left: 22px; margin-bottom: var(--nb-space-4); }
.nb-prose li{ margin-bottom: var(--nb-space-2); }
.nb-note{ white-space: pre-wrap; font-size: 14px; color: var(--nb-text); }

/* --------------------------------------------------------------------------
   30. ЛЕНДИНГ
   -------------------------------------------------------------------------- */
.nb-hero{ padding: var(--nb-space-12) 0; }
.nb-hero h1{ font-size: clamp(30px, 5vw, 46px); line-height: 1.12; margin-bottom: var(--nb-space-4); }
.nb-hero p.nb-lead{ font-size: 17px; max-width: 560px; margin-bottom: var(--nb-space-6); }
.nb-section{ padding: var(--nb-space-12) 0; border-top: 1px solid var(--nb-border); }
.nb-feature svg{ width: 26px; height: 26px; color: var(--nb-primary); margin-bottom: var(--nb-space-3); }
.nb-footer{
  border-top: 1px solid var(--nb-border); padding: var(--nb-space-8) 0;
  color: var(--nb-text-muted); font-size: 13px;
}