/*
──────────────────────────────────────────────────────────────────
Copyright (c) 2026 Ilhom Abdullayev (@aib81).
Proyekt: AT MEDSERT — sertifikatsiya tizimi (ISO 13485).
Email: ilhom8108@gmail.com · Telegram: @aib81 (id: 834760045)

Mualliflik huquqi muallifga tegishli. Without written permission —
no copying, forking, or commercial use is allowed.
──────────────────────────────────────────────────────────────────
*/
/* Sidebar navigation component. Vertical list, keyboard-navigable. */

.nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-2);
}

.nav__brand-title {
  color: var(--text-header);
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0;
}

.nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav__item {
  margin: 0;
}

.nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast),
              color var(--transition-fast);
}

.nav__link:hover,
.nav__link:focus-visible {
  background: var(--bg-alternate);
  color: var(--text-header);
  text-decoration: none;
}

.nav__link--active {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

.nav__link--active:hover,
.nav__link--active:focus-visible {
  background: var(--accent-hover);
  color: #ffffff;
}

.nav__controls {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Web 034: блок с настройками темы/языка наверху сайдбара (после brand'a) */
.nav__top-settings {
  margin: 8px 0 12px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border, rgba(127,127,127,.25));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nav__top-settings .theme-switcher,
.nav__top-settings .language-switcher {
  margin: 0;
}

/* --- Collapse button + collapsed state (2026-06-09) ---
   Кнопка ‹/› в правом верхнем углу sidebar.
   При nav--collapsed левый sidebar сужается до 56px:
   - текст пунктов и brand title скрыты
   - остаётся только узкая полоса с иконками
   - main-сontent расширяется
   Состояние сохраняется в localStorage("nav.collapsed"). */
.app-nav { position: relative; transition: width 0.18s ease, min-width 0.18s ease; }

.nav__collapse-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--bg-secondary, #ffffff);
  color: var(--text-primary, #1f2937);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease;
}
.nav__collapse-btn:hover { transform: scale(1.1); }
.nav__collapse-icon { display: inline-block; transition: transform 0.18s ease; }

/* Иконка перед текстом пункта (видна всегда) */
.nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 16px;
  flex-shrink: 0;
}
.nav__link-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Свёрнутое состояние */
.app-nav.nav--collapsed { width: 56px !important; min-width: 56px !important; }
.app-nav.nav--collapsed .nav__brand-title,
.app-nav.nav--collapsed .nav__top-settings,
.app-nav.nav--collapsed .nav__brand > *:not(.nav__brand-logo),
.app-nav.nav--collapsed .nav__link-label,
.app-nav.nav--collapsed .nav__user,
.app-nav.nav--collapsed .nav__guest {
  display: none !important;
}
.app-nav.nav--collapsed .nav__brand {
  justify-content: center;
  padding: 8px 0;
}
.app-nav.nav--collapsed .nav__brand-logo {
  width: 32px !important;
}
.app-nav.nav--collapsed .nav__link {
  justify-content: center;
  padding: 8px 0;
  gap: 0;
}
.app-nav.nav--collapsed .nav__link-icon {
  font-size: 18px;
  width: 28px;
  height: 28px;
}
.app-nav.nav--collapsed .nav__item {
  margin: 2px 0;
}
.app-nav.nav--collapsed .nav__collapse-icon { transform: rotate(180deg); }
.app-nav.nav--collapsed .nav__controls { padding: 4px; }

/* Pre-paint collapse — сразу при загрузке (до того как JS добавит nav--collapsed) */
html.nav-collapsed-pre .app-nav { width: 56px !important; min-width: 56px !important; }

/* Когда меню свёрнуто — grid-колонка main расширяется на освободившееся
   место. Используем :has() (поддерживается во всех современных браузерах). */
.app-layout:has(.app-nav.nav--collapsed),
html.nav-collapsed-pre .app-layout {
  grid-template-columns: 56px 1fr !important;
}