/* Klin dashboard — mobile / tablet */

:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

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

body {
  overscroll-behavior-y: contain;
}

/* Touch targets */
@media (max-width: 900px) {
  button,
  .mode-btn,
  .top-mode-btn,
  .subtab-btn,
  .period-btn,
  .uik-nav-btn,
  .uik-pill,
  .uik-chip,
  select,
  input[type="text"] {
    min-height: 44px;
  }

  input[type="text"],
  select {
    font-size: 16px !important; /* iOS zoom prevention */
  }

  .container {
    padding: 10px 10px calc(12px + var(--safe-bottom));
  }

  .app-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding-top: max(4px, var(--safe-top));
  }

  .app-header-main {
    width: 100%;
    gap: 10px;
  }

  .app-header h1 {
    font-size: 17px;
    line-height: 1.25;
  }

  .header-sub {
    font-size: 12px;
    line-height: 1.35;
  }

  .header-badges {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .brand-icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  /* Top sections: horizontal scroll chips */
  .top-mode-switch {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -10px 12px;
    padding: 6px 10px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .top-mode-switch::-webkit-scrollbar {
    display: none;
  }

  .top-mode-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 12px;
    border-radius: 999px;
  }

  .top-mode-btn .tm-long {
    display: none;
  }

  .top-mode-btn .tm-short {
    display: inline;
  }

  .election-bar.mode-switch {
    margin: 0 -10px 12px;
    padding: 0 10px 4px;
    gap: 6px;
  }

  .election-bar .mode-btn {
    padding: 10px 12px;
    font-size: 12px;
    border-radius: 999px;
  }

  .period-switch,
  .subtabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    margin-bottom: 12px;
  }

  .period-switch::-webkit-scrollbar,
  .subtabs::-webkit-scrollbar {
    display: none;
  }

  .subtab-btn,
  .period-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 12px;
  }

  /* Layout: stack sidebar as collapsible panel */
  .layout {
    flex-direction: column;
  }

  .sidebar {
    display: none !important;
    width: 100%;
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 0 0 12px;
  }

  .sidebar.mobile-open {
    display: block !important;
  }

  .mobile-tools {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .mobile-tools .btn-action,
  .mobile-filter-btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mobile-filter-btn {
    border: 1px solid var(--border, #e2e8f0);
    background: #fff;
    color: var(--primary, #1e293b);
    border-radius: 12px;
    padding: 10px 12px;
    font: 600 13px/1.2 Inter, system-ui, sans-serif;
    cursor: pointer;
  }

  .mobile-filter-btn[aria-expanded="true"] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
  }

  .kpi-grid,
  .overview-hero,
  .grid-2,
  .charts-grid,
  .charts-row,
  .summary-charts-row {
    grid-template-columns: 1fr !important;
  }

  .kpi-grid {
    gap: 10px;
  }

  .campaign-hero,
  .hero-banner,
  .card,
  .panel-card {
    padding: 14px;
    border-radius: 14px;
  }

  .campaign-hero h1,
  .hero-banner h1 {
    font-size: 18px;
  }

  .chart-wrap,
  .chart-wrap.tall,
  .chart-box-lg .chart-wrap {
    height: 220px !important;
    min-height: 200px;
  }

  .table-scroll,
  .compare-table-wrap,
  .vote-matrix-wrap,
  .uik-history-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;
    padding-bottom: 4px;
  }

  .table-scroll table,
  .compare-table,
  .vote-matrix,
  .uik-history-table,
  .data-table {
    min-width: 640px;
  }

  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .table-toolbar input {
    min-width: 0;
    width: 100%;
  }

  .drawer {
    width: min(100vw, 100%);
    max-width: 100vw;
    right: 0;
    border-radius: 18px 18px 0 0;
    top: auto;
    bottom: 0;
    height: min(85vh, 85dvh);
    max-height: min(85vh, 85dvh);
    transform: translateY(110%);
  }

  .drawer.open {
    transform: translateY(0);
  }

  .toast {
    left: 12px;
    right: 12px;
    bottom: calc(12px + var(--safe-bottom));
  }

  .uik-source-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .uik-source-bar #uik-source-meta {
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
  }

  .view-desc {
    font-size: 13px;
    line-height: 1.4;
  }

  .prognoz-frame-wrap {
    min-height: 0;
    border-radius: 12px;
    margin: 0 -2px;
    /* не перехватывать wheel у iframe */
    overflow: visible;
  }

  .prognoz-frame-wrap iframe {
    height: calc(100dvh - 150px);
    min-height: 65vh;
    /* отдельный скролл внутри iframe */
    overflow: auto;
  }

  .section-label {
    font-size: 12px;
  }

  .rank-list .rank-item,
  .top-list .rank-item {
    padding: 10px;
  }
}

@media (max-width: 900px) {
  .top-mode-btn .tm-short {
    display: inline;
  }
}

@media (min-width: 901px) {
  .mobile-tools {
    display: none !important;
  }

  .top-mode-btn .tm-short {
    display: none;
  }

  .top-mode-btn .tm-long {
    display: inline;
  }
}

/* UIK plans — mobile refinements */
@media (max-width: 980px) {
  #viewUik .uik-root .uik-topbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  #viewUik .uik-root .uik-search {
    width: 100%;
    min-width: 0;
  }

  #viewUik .uik-root .uik-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  #viewUik .uik-root .uik-filters::-webkit-scrollbar {
    display: none;
  }

  #viewUik .uik-root .uik-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #viewUik .uik-root .uik-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
  }

  #viewUik .uik-root .uik-nav::-webkit-scrollbar {
    display: none;
  }

  #viewUik .uik-root .uik-nav-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 42px;
  }

  #viewUik .uik-root .uik-seg {
    padding: 8px 0;
  }

  #viewUik .uik-root .uik-cta {
    padding: 14px;
  }

  #viewUik .uik-root .uik-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #viewUik .uik-root .uik-table {
    min-width: 720px;
  }

  #viewUik .uik-root .uik-detail {
    width: min(100vw - 16px, 420px);
    right: 8px;
    left: 8px;
    max-width: none;
  }

  #viewUik .uik-root .uik-chart-wrap,
  #viewUik .uik-root .uik-chart-wrap-wide {
    height: 220px;
  }
}

@media (max-width: 640px) {
  #viewUik .uik-root .uik-kanban {
    grid-template-columns: 1fr !important;
  }

  #viewUik .uik-root .uik-heatmap {
    grid-template-columns: repeat(8, 1fr);
  }

  #viewUik .uik-root .uik-value {
    font-size: 28px;
  }

  .app-header .header-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .top-mode-btn {
    padding: 9px 10px;
    font-size: 11px;
  }

  .app-header h1 {
    font-size: 15px;
  }

  #viewUik .uik-root .uik-heatmap {
    grid-template-columns: repeat(6, 1fr);
  }
}