/* =============================================================================
   StatDistrict — мобильная / PWA-адаптация
   -----------------------------------------------------------------------------
   Safe-area, нижний tabbar, touch-цели, таблицы, модалки, админ-drawer.
   Подключается после style.css / admin.css.
   ============================================================================= */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --tabbar-h: 64px;
  --touch-min: 44px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  overscroll-behavior-y: contain;
}

/* Убираем синий тап-хайлайт на iOS */
a, button, .btn, .nav-link, .app-tab {
  -webkit-tap-highlight-color: transparent;
}

/* =============================================================================
   Нижний tabbar (школьный кабинет)
   ============================================================================= */
.app-tabbar {
  display: none;
}

.app-more-sheet .offcanvas-body {
  padding-bottom: calc(1rem + var(--safe-bottom));
}

.app-more-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.app-more-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-height: 72px;
  padding: 0.85rem 0.9rem;
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: var(--sh-xs);
  color: var(--ink) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: var(--text-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.app-more-link i {
  font-size: 1.25rem;
  color: var(--brand-600);
}

.app-more-link:active {
  transform: scale(0.98);
}

.app-more-link.is-danger {
  color: var(--bad) !important;
}
.app-more-link.is-danger i { color: var(--bad); }

/* =============================================================================
   ≤991px — планшеты и телефоны
   ============================================================================= */
@media (max-width: 991.98px) {
  /* --- Школьная шапка --- */
  .app-header {
    padding-top: var(--safe-top);
  }

  .app-header .container {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  .brand-title {
    font-size: 1rem !important;
  }

  .brand-sub { display: none; }

  .school-chip {
    max-width: 28vw;
    padding: 0.32rem 0.55rem;
  }

  .school-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-header .btn-ghost span,
  .app-header .logout-label {
    display: none;
  }

  /* Горизонтальный скролл верхнего меню (если tabbar скрыт) */
  .app-nav {
    top: auto;
    position: sticky;
    padding: 0.25rem 0;
  }

  .app-nav .navbar-toggler {
    display: none !important;
  }

  .app-nav .navbar-collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .app-nav .navbar-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.25rem;
    padding: 0.2rem 0 0.35rem;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .app-nav .navbar-nav::-webkit-scrollbar { display: none; }

  .app-nav .nav-link {
    white-space: nowrap;
    flex: 0 0 auto;
    min-height: var(--touch-min);
    padding: 0.45rem 0.85rem !important;
  }

  /* Когда есть нижний tabbar — прячем верхнее меню */
  body.has-tabbar .app-nav {
    display: none !important;
  }

  body.has-tabbar {
    padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 0.5rem);
  }

  .app-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    min-height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding: 0.35rem 0.35rem calc(0.35rem + var(--safe-bottom));
    margin: 0;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    backdrop-filter: blur(22px) saturate(1.35);
    border-top: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 -8px 28px rgba(12, 74, 110, 0.1);
  }

  .app-tab {
    appearance: none;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-height: 52px;
    padding: 0.25rem 0.15rem;
    border-radius: var(--r-md);
    color: var(--muted);
    text-decoration: none !important;
    font-size: 0.65rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.1;
    transition: color 0.15s var(--ease), background 0.15s var(--ease),
      transform 0.15s var(--ease);
  }

  .app-tab i {
    font-size: 1.2rem;
    line-height: 1;
  }

  .app-tab:active {
    transform: scale(0.96);
  }

  .app-tab.is-active,
  .app-tab.active {
    color: var(--brand-700);
    background: rgba(12, 150, 232, 0.1);
  }

  .app-tab.is-active i,
  .app-tab.active i {
    color: var(--brand-600);
  }

  /* Контент */
  main.container {
    padding-left: max(0.85rem, var(--safe-left)) !important;
    padding-right: max(0.85rem, var(--safe-right)) !important;
    padding-bottom: 1.5rem !important;
  }

  .app-footer {
    padding-bottom: 1rem;
    font-size: 0.7rem;
  }

  body.has-tabbar .app-footer {
    padding-bottom: 0.5rem;
  }

  /* KPI / сетки */
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .kpi {
    padding: 0.9rem 0.85rem 0.85rem;
    border-radius: var(--r-lg);
  }

  .kpi-value {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }

  /* Фильтры */
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.85rem;
  }

  .filter-bar .field,
  .filter-bar .field--grow {
    min-width: 0;
    width: 100%;
  }

  .filter-bar .spacer { display: none; }

  .filter-bar .actions {
    width: 100%;
  }

  .filter-bar .actions .btn {
    flex: 1 1 auto;
    min-height: var(--touch-min);
  }

  /* Таблицы — горизонтальный скролл */
  .table-responsive,
  .table-scroll,
  .admin-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .table-responsive > .table,
  .table-scroll > .table {
    margin-bottom: 0;
  }

  .table {
    min-width: 520px;
  }

  .table > :not(caption) > * > * {
    padding: 0.7rem 0.65rem;
  }

  .notify-bell-btn {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }

  /* Кнопки / формы — удобный тач */
  .btn,
  .form-control,
  .form-select {
    min-height: var(--touch-min);
    font-size: 16px; /* без авто-зума iOS */
  }

  .btn-sm {
    min-height: 40px;
    font-size: 0.8125rem;
  }

  .btn-lg {
    min-height: 52px;
  }

  /* Модалки почти на весь экран */
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .modal-content {
    border-radius: var(--r-xl);
    max-height: calc(100dvh - 1rem - var(--safe-top) - var(--safe-bottom));
  }

  .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Auth */
  .auth-shell {
    padding: 1rem 0.85rem;
    padding-top: calc(1rem + var(--safe-top));
    padding-bottom: calc(1rem + var(--safe-bottom));
    align-items: stretch;
  }

  .auth-layout {
    gap: 0.85rem;
  }

  .auth-card,
  .auth-visual {
    border-radius: var(--r-xl);
  }

  .auth-card {
    padding: 1.35rem 1.15rem 1.25rem;
  }

  /* Hero */
  .dash-hero {
    padding: 1rem 1rem 0.75rem;
    border-radius: var(--r-xl);
  }

  .dash-hero-copy h1,
  .dash-hero-copy h2 {
    font-size: 1.3rem;
  }

  .dash-hero-actions {
    width: 100%;
  }

  .dash-hero-actions .btn {
    flex: 1 1 auto;
  }

  /* Notify panel — почти full-bleed */
  .notify-panel {
    position: fixed;
    left: 0.65rem;
    right: 0.65rem;
    top: calc(var(--safe-top) + 3.5rem);
    width: auto;
    max-height: min(70dvh, 520px);
  }

  .notify-list {
    max-height: min(50dvh, 360px);
  }

  /* Админ topbar + safe area */
  .admin-topbar {
    padding-top: calc(0.55rem + var(--safe-top));
    padding-left: max(0.75rem, var(--safe-left));
    padding-right: max(0.75rem, var(--safe-right));
    gap: 0.5rem;
  }

  .admin-topbar .page-title {
    font-size: 1.05rem;
  }

  .admin-topbar .role-badge {
    display: none;
  }

  .admin-sidebar {
    padding-top: var(--safe-top);
    width: min(var(--sidebar-w), calc(100vw - 3rem));
    flex-basis: min(var(--sidebar-w), calc(100vw - 3rem));
    border-radius: 0 var(--r-2xl) var(--r-2xl) 0;
    min-height: 100%;
    height: 100%;
    max-height: 100dvh;
    top: 0;
    z-index: 1040;
  }

  .admin-wrapper {
    gap: 0;
    padding: 0;
    /* не режем fixed drawer / scrim */
    isolation: auto;
    background-image:
      radial-gradient(900px 520px at 8% -10%, rgba(56, 189, 248, 0.4), transparent 58%),
      radial-gradient(780px 460px at 92% 0%, rgba(34, 211, 238, 0.28), transparent 55%),
      linear-gradient(165deg, #d7ecfb 0%, #e8f5fd 42%, #dff3fb 100%);
  }

  .admin-topbar {
    margin: 0.65rem 0.65rem 0.75rem;
    border-radius: var(--r-lg);
    z-index: 40;
  }

  .admin-sidebar .nav-link,
  .admin-sidebar .nav-group-toggle {
    min-height: var(--touch-min);
  }

  .sidebar-scrim {
    background: rgba(12, 74, 110, 0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1030;
  }

  .admin-content {
    padding: 0.85rem max(0.85rem, var(--safe-left)) calc(1.25rem + var(--safe-bottom)) max(0.85rem, var(--safe-right));
  }

  .sidebar-toggle {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    z-index: 50;
    position: relative;
  }

  /* Формы: 16px — без авто-зума iOS; удобные touch-поля */
  input.form-control,
  select.form-select,
  textarea.form-control,
  .form-control,
  .form-select {
    font-size: 16px !important;
    min-height: var(--touch-min);
  }

  textarea.form-control {
    min-height: 96px;
  }

  .btn,
  .icon-btn {
    min-height: var(--touch-min);
  }

  .modal-dialog {
    margin: calc(0.5rem + var(--safe-top)) 0.5rem calc(0.5rem + var(--safe-bottom));
    max-width: calc(100vw - 1rem);
  }

  .modal-content {
    max-height: calc(100dvh - 1rem - var(--safe-top) - var(--safe-bottom));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive {
    -webkit-overflow-scrolling: touch;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
  }

  .filter-bar,
  .panel-head {
    gap: 0.65rem;
  }

  .filter-bar .btn,
  .panel-head .btn {
    flex: 1 1 auto;
  }

  .chat-app {
    min-height: calc(100dvh - 8rem);
  }

  .chat-composer {
    padding-bottom: max(0.55rem, var(--safe-bottom));
  }
}

/* =============================================================================
   ≤575px — узкие телефоны
   ============================================================================= */
@media (max-width: 575.98px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .kpi-label {
    font-size: 0.68rem;
  }

  .school-page-head {
    flex-direction: column;
    align-items: stretch;
  }

  .school-page-head .btn {
    width: 100%;
  }

  .row.g-3 > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .panel-head,
  .panel-body,
  .card-header,
  .card-body {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .app-more-grid {
    grid-template-columns: 1fr;
  }

  .brand-logo {
    width: 36px;
    height: 36px;
  }

  .app-tab span {
    font-size: 0.6rem;
  }

  /* На очень узких — KPI в одну колонку если мало места */
  @media (max-width: 360px) {
    .kpi-grid {
      grid-template-columns: 1fr;
    }
  }
}

/* =============================================================================
   Standalone PWA (добавлено на домашний экран)
   ============================================================================= */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .app-header {
    padding-top: max(0.35rem, var(--safe-top));
  }

  .admin-topbar {
    padding-top: max(0.55rem, var(--safe-top));
    margin-top: max(0.35rem, var(--safe-top));
  }

  body.has-tabbar .app-tabbar {
    box-shadow: 0 -10px 32px rgba(12, 74, 110, 0.14);
  }

  /* В PWA прячем системный «тянуть для обновления» меньше мешает drawer */
  body.admin-drawer-open {
    overscroll-behavior: none;
  }
}

/* Landscape phone */
@media (max-width: 991.98px) and (orientation: landscape) {
  .app-tabbar {
    min-height: calc(52px + var(--safe-bottom));
  }

  .app-tab {
    min-height: 44px;
    flex-direction: row;
    gap: 0.35rem;
  }

  .auth-visual {
    display: none;
  }

  .auth-layout {
    max-width: 420px;
    margin-inline: auto;
  }
}

@media print {
  .app-tabbar,
  .app-more-sheet,
  .sidebar-scrim {
    display: none !important;
  }

  body.has-tabbar {
    padding-bottom: 0 !important;
  }
}