@charset "UTF-8";
/* mobile.css — адаптация сайта под телефоны (360–430) и планшеты. Подключается последним. */
html,body{max-width:100%;overflow-x:hidden}
img,video,svg,canvas,iframe{max-width:100%}
main,.container,.workspace-content,.panel,.workspace>*{min-width:0}
h1,h2,h3,.panel,.notice,.metric-card,.empty-state,td,th{overflow-wrap:anywhere}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- планшеты и ниже ---------- */
@media(max-width:900px){
  .workspace-heading h1,.detail-heading h1,.page-heading h1{overflow-wrap:anywhere;hyphens:auto}
  .section-top{gap:16px}
}

/* ---------- телефоны ---------- */
@media(max-width:720px){
  .container{width:auto;margin-inline:16px;max-width:none}
  .container.container{width:auto}
  h1{font-size:clamp(28px,8.4vw,40px)}
  h2{font-size:clamp(22px,6.4vw,30px)}
  .workspace-heading h1{font-size:clamp(26px,7.6vw,34px)}
  .page-heading h1,.detail-heading h1,.auth-intro h1{font-size:clamp(26px,8vw,38px)}
  .section{padding-block:48px}

  /* тестовая плашка: одна компактная строка */
  .stage-bar{padding:4px 12px;font-size:11px;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:center}
  .stage-extra{display:none}

  /* шапка и бургер */
  .site-header{position:sticky;top:0;z-index:60}
  .header-inner{min-height:56px;padding-block:8px}
  .menu-toggle{min-width:44px;min-height:44px;justify-content:center}
  .anthem-toggle{min-width:44px;min-height:44px;justify-content:center}
  .header-actions .button{min-height:44px;padding:8px 14px}
  .js-ready .main-nav.is-open{display:block;max-height:calc(100vh - 120px);overflow-y:auto}
  .main-nav>a{min-height:44px;display:flex;align-items:center}

  /* кнопки и поля */
  .button{min-height:48px;max-width:100%;white-space:normal;text-align:center}
  .form-actions{flex-direction:column;align-items:stretch;gap:12px}
  .form-actions>.button,.form-actions>button,.form-actions>form,.form-actions>form .button{width:100%}
  .workspace-heading .button,.section-top>.button,.list-heading>.button,.approval-card>.button,.empty-state .button{width:100%}
  .button-small{min-height:44px}
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea{font-size:16px!important;min-height:48px;max-width:100%}
  textarea{min-height:110px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  label{max-width:100%}
  .panel{padding:20px 16px}
  .auth-intro,.auth-panel{padding:28px 16px}
  .auth-section{min-height:0}
  .auth-panel>*{max-width:none}
  .id-code input{font-size:24px;letter-spacing:.25em}
  .id-list li{padding:14px}

  /* навигация кабинета/управления: лента табов в одну строку */
  .app-page.cab,.app-page.mng{padding-top:0}
  .app-page .workspace{padding-block:0 56px}
  .sidebar{position:static;margin:0 -16px 20px;padding:10px 0 0;background:var(--spk-bg,#1d1e42);border-bottom:1px solid rgba(255,255,255,.14)}
  .sidebar-home{padding:0 16px;margin:0 0 8px;gap:10px}
  .sidebar-home .avatar{width:34px;height:34px;font-size:14px}
  .sidebar-home small{display:none}
  .side-nav{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;padding:2px 16px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .side-nav::-webkit-scrollbar{display:none}
  .side-nav>a{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;min-height:44px;padding:10px 14px;display:inline-flex;align-items:center;font-size:12px}
  .side-nav>.nav-label{display:none}
  .sidebar .scope-note{display:none}
  .sidebar-bottom{display:flex;justify-content:space-between;gap:12px;padding:0 16px 10px;margin:0}
  .sidebar-bottom .text-link,.sidebar-bottom .plain-button{font-size:12px;min-height:32px}
  .workspace-content{padding:0}

  /* сетки и карточки */
  .metrics-grid,.metrics-five,.account-metrics,.club-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-card{padding:16px 14px;min-height:0}
  .metric-card>strong{font-size:30px;margin:10px 0}
  .detail-grid,.dashboard-bottom,.account-detail-grid,.club-settings-grid,.approval-detail-grid{grid-template-columns:minmax(0,1fr)}
  .section-top,.list-heading{flex-direction:column;align-items:stretch}
  .attendance-summary{flex-wrap:wrap}
  .balance-banner{padding:20px 16px}
  .pagination{flex-wrap:wrap;gap:10px}
  .pagination .button{flex:1}

  /* таблицы -> карточки */
  .table-wrap{overflow:visible;border:0;background:transparent;border-radius:0}
  .table-wrap table,table.is-stackable{min-width:0!important;width:100%;display:block;border:0}
  .table-wrap table caption{display:none}
  .table-wrap thead,table.is-stackable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table-wrap tbody,table.is-stackable tbody{display:block}
  .table-wrap tr,table.is-stackable tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;padding:4px 0;overflow:hidden}
  .table-wrap td,table.is-stackable td{display:grid;grid-template-columns:minmax(84px,34%) minmax(0,1fr);gap:4px 12px;align-items:start;padding:10px 14px;border:0;border-bottom:1px dashed var(--line);text-align:left!important;white-space:normal!important}
  .table-wrap tr td:last-child,table.is-stackable tr td:last-child{border-bottom:0}
  .table-wrap td::before,table.is-stackable td::before{content:attr(data-label);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.5;padding-top:2px}
  .table-wrap td[data-label=""],table.is-stackable td[data-label=""],.table-wrap td[colspan],table.is-stackable td[colspan]{display:block}
  .table-wrap td[data-label=""]::before,table.is-stackable td[data-label=""]::before,.table-wrap td[colspan]::before,table.is-stackable td[colspan]::before{display:none}
  .table-wrap td>*{min-width:0}
  .table-wrap td .button,.table-wrap td form,.table-wrap td .text-link{max-width:100%}
  .table-wrap td .button{width:100%}
  .table-wrap td[colspan]{padding:0}
  .table-wrap td[colspan] .empty-state{padding:28px 16px}
  .table-wrap .circle-arrow{width:44px;height:44px}
  .attendance-table .button{min-width:0}
  .table-wrap .pill{max-width:100%}

  /* пустые состояния и баннеры */
  .empty-state{padding:28px 16px;max-width:100%}
  .empty-state h2,.empty-state h3{font-size:clamp(20px,6vw,26px)}
  .app-banner{font-size:13px}

  /* подвал */
  .footer-bottom-links{gap:10px 16px}
}

/* ---------- узкие телефоны ---------- */
@media(max-width:430px){
  .metrics-grid,.metrics-five,.account-metrics,.club-metrics{grid-template-columns:1fr}
  .table-wrap td,table.is-stackable td{grid-template-columns:1fr;gap:2px}
}

/* ---------- доп. правила: строки-списки, формы в таблицах ---------- */
@media(max-width:720px){
  .registration-row{flex-wrap:wrap;padding:14px;gap:10px 12px;min-width:0}
  .registration-row .row-main{flex:1 1 140px;min-width:0}
  .registration-row .pill{max-width:100%;white-space:normal}
  .ledger-row{gap:12px;min-width:0}
  .ledger-row>div{min-width:0}
  .ev3-format-row,.ev3-add form{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .ev3-format-row>*{width:100%;max-width:100%;min-width:0}
  .ev3-format-row .ev3-check{display:flex;align-items:center;gap:10px;min-height:44px}
  .ev3-format-row input[type=checkbox]{width:22px;flex:none}
  .table-wrap td form[class]{max-width:100%}
}

@media(min-width:721px) and (max-width:900px){
  .metrics-grid>:last-child:nth-child(odd){grid-column:1/-1}
}