/* KORDELIA 1.2.7 — responsive stable ordinateur / tablette / mobile */
:root {
  --touch-size: 42px;
  --mobile-header-height: 48px;
  --mobile-gap: 6px;
  --app-viewport-height: 100dvh;
}

* { box-sizing: border-box; }
html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}
img, canvas { max-width: 100%; }
button, input, select, textarea { font: inherit; }
.mobile-menu-toggle,
.mobile-brand-lockup,
.mobile-nav-section,
.mobile-menu-backdrop { display: none; }

/* Ordinateur intermédiaire / tablette large */
@media (max-width: 1180px) {
  .app-shell { min-width: 0; padding: 16px; }
  .topbar { gap: 12px; }
  .brand-strip { min-width: 0; max-width: 100%; }
  .partner-logo { max-width: 110px; height: auto; }
  .kordelia-header-logo { max-width: 125px; }
  .main-tabs { overflow-x: auto; scrollbar-width: thin; }
  .tab-button { flex: 0 0 auto; }
  main { min-width: 0; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .home-layout { grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); }
  .table-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Interface tablette et mobile : même vue stable, y compris en paysage iPhone */
@media (max-width: 860px) {
  html, body { min-height: -webkit-fill-available; }
  body.mobile-menu-open { overflow: hidden; }

  .app-shell {
    min-height: 100svh;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* En-tête unique, toujours visible dans le flux iOS */
  .topbar {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    z-index: 3000 !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0,1fr) 40px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: calc(var(--mobile-header-height) + env(safe-area-inset-top)) !important;
    height: calc(var(--mobile-header-height) + env(safe-area-inset-top)) !important;
    margin: 0 !important;
    padding: env(safe-area-inset-top) 4px 0 !important;
    gap: 3px !important;
    background: #effaf8 !important;
    border-bottom: 1px solid rgba(12,65,68,.16) !important;
    box-shadow: 0 2px 8px rgba(12,65,68,.10) !important;
    overflow: visible !important;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: rgba(12,65,68,.06) !important;
    color: #073f45 !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
  }
  .mobile-menu-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .mobile-menu-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-menu-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
  .mobile-menu-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .brand-strip {
    grid-column: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    gap: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .brand-strip > .partner-logo,
  .brand-strip > .brand-separator { display: none !important; }
  .mobile-brand-lockup {
    display: flex !important;
    align-items: baseline;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    gap: 6px;
    white-space: nowrap;
  }
  .mobile-brand-lockup strong {
    color: #0c4144;
    font-size: .91rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .11em;
  }
  .mobile-brand-lockup small {
    display: block !important;
    min-width: 0;
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #567173;
    font-size: .68rem;
    line-height: 1;
    font-weight: 800;
  }

  .top-actions {
    display: flex !important;
    width: 36px !important;
    min-width: 36px !important;
    gap: 0 !important;
    justify-content: center !important;
  }
  .top-actions > .history-button,
  .top-actions > [data-view="parametres"],
  #refreshButton { display: none !important; }
  .user-menu { width: 36px; }
  .user-menu-button {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    justify-content: center !important;
  }
  .user-menu-text, .user-chevron { display: none !important; }
  .user-avatar { font-size: 1rem; }
  .user-dropdown {
    position: fixed !important;
    top: calc(var(--mobile-header-height) + env(safe-area-inset-top)) !important;
    right: 6px !important;
    left: 6px !important;
    width: auto !important;
    max-height: calc(var(--app-viewport-height) - var(--mobile-header-height) - env(safe-area-inset-top) - 8px) !important;
    overflow: auto !important;
    z-index: 3100 !important;
  }

  /* Tiroir mobile compact */
  .main-tabs {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 3200 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: min(82vw, 310px) !important;
    height: var(--app-viewport-height) !important;
    min-height: 100svh !important;
    max-height: none !important;
    padding: calc(58px + env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 16px 16px 0 !important;
    background: linear-gradient(180deg,#0c4a4e,#082f33) !important;
    box-shadow: 18px 0 40px rgba(0,0,0,.30) !important;
    transform: translateX(-105%) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: transform .22s ease !important;
  }
  .mobile-menu-open .main-tabs {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }
  .main-tabs::before {
    content: "KORDELIA";
    position: absolute;
    top: calc(18px + env(safe-area-inset-top));
    left: 18px;
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: .13em;
  }
  .tab-button {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: rgba(255,255,255,.91) !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    text-align: left !important;
    text-transform: none !important;
  }
  .tab-button.active,
  .tab-button:hover {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #fff !important;
  }
  .mobile-nav-section {
    display: grid !important;
    gap: 2px !important;
    margin-top: 6px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
  }
  .mobile-nav-section-title {
    padding: 4px 12px 3px !important;
    color: rgba(255,255,255,.58) !important;
    font-size: .62rem !important;
    font-weight: 900 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
  }
  .mobile-admin-settings[aria-hidden="true"] { display: none !important; }
  .mobile-menu-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 3150 !important;
    background: rgba(3,26,29,.46) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .18s ease, visibility .18s ease !important;
  }
  .mobile-menu-open .mobile-menu-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .main-tabs { isolation: isolate !important; }
  .main-tabs .tab-button,
  .main-tabs .mobile-nav-section {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  .mobile-menu-toggle { z-index: 3300 !important; }

  /* Contenu */
  main {
    width: 100% !important;
    min-width: 0 !important;
    padding: 5px 5px 54px !important;
  }
  .view, .view-head, .inline-actions { min-width: 0 !important; }
  .view-head, .view-head.compact {
    align-items: stretch !important;
    gap: 4px !important;
    margin: 0 0 5px !important;
  }
  .view-head h1 { display: none !important; }
  .inline-actions {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto !important;
    width: 100% !important;
    gap: 4px !important;
  }
  .inline-actions .search-box {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .search-box,
  .search-box input,
  .inline-actions .icon-label {
    min-height: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    font-size: .72rem !important;
  }
  .search-box input { width: 100% !important; min-width: 0 !important; }
  .inline-actions .icon-label {
    width: auto !important;
    min-width: 74px !important;
    padding: 3px 8px !important;
    gap: 5px !important;
  }

  .home-layout, .dashboard-grid, .settings-layout { grid-template-columns: 1fr !important; gap: 7px !important; }
  .settings-card, .panel { padding: 9px !important; border-radius: 9px !important; }
  .period-panel { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .period-panel .panel-label, .period-reset-link { grid-column: 1 / -1 !important; }
  .chart-layout { flex-direction: column !important; }
  .table-filters.open, .table-filters.is-open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-height: 62dvh !important;
    overflow-y: auto !important;
  }

  /* Toutes les tables métier deviennent des fiches, portrait ET paysage */
  .table-shell {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .table-shell table,
  .table-shell thead,
  .table-shell tbody,
  .table-shell tr,
  .table-shell td {
    width: 100% !important;
    min-width: 0 !important;
  }
  .table-shell table,
  .table-shell thead,
  .table-shell tbody,
  .table-shell tr,
  .table-shell td { display: block !important; }
  .table-shell thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }
  .table-shell tbody {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }
  .table-shell tbody tr {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 6px 5px !important;
    overflow: hidden !important;
    border: 1px solid rgba(12,65,68,.15) !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: 0 2px 7px rgba(12,65,68,.07) !important;
  }
  .table-shell tbody td {
    display: grid !important;
    grid-template-columns: minmax(67px,34%) minmax(0,1fr) !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 29px !important;
    padding: 2px 3px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(12,65,68,.07) !important;
    white-space: normal !important;
    font-size: .72rem !important;
    line-height: 1.12 !important;
  }
  .table-shell tbody td::before {
    content: attr(data-label);
    min-width: 0;
    overflow: hidden;
    color: #526c6e;
    font-size: .57rem !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-overflow: ellipsis;
  }
  .table-shell tbody td[data-label="Compteur"] {
    grid-column: 1 / -1 !important;
    display: block !important;
    min-height: 36px !important;
    margin: 0 -6px 1px !important;
    padding: 6px !important;
    overflow: visible !important;
    border-bottom: 1px solid rgba(12,65,68,.13) !important;
    background: linear-gradient(180deg,#fff,#fbfdfd) !important;
  }
  .table-shell tbody td[data-label="Compteur"]::before { display: none !important; }

  /* Champs prioritaires sur une demi-largeur, champs longs sur toute la carte */
  .table-shell tbody td[data-label="Statut"],
  .table-shell tbody td[data-label="Commentaires"],
  .table-shell tbody td[data-label="Profil bâtiment"],
  .table-shell tbody td[data-label="Anomalie détectée"],
  .table-shell tbody td[data-label="État"] {
    grid-column: 1 / -1 !important;
  }
  .table-shell tbody td[data-label="Statut"] { border-bottom: 0 !important; }
  .table-shell tbody td[data-label="Commentaires"] {
    display: block !important;
    padding-top: 4px !important;
    border-top: 1px solid rgba(12,65,68,.07) !important;
    border-bottom: 0 !important;
  }
  .table-shell tbody td[data-label="Commentaires"]::before {
    display: block !important;
    margin-bottom: 3px !important;
  }

  .cell-compteur {
    display: grid !important;
    grid-template-columns: 12px minmax(0,1fr) 28px 28px !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }
  .dot { width: 11px !important; height: 11px !important; }
  .meter-text, .meter-name {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #102f34 !important;
    font-size: .81rem !important;
    line-height: 1.12 !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .prob-meter { min-width: 0 !important; gap: 2px !important; }
  .prob-value { font-size: .72rem !important; line-height: 1 !important; }
  .prob-track { height: 7px !important; min-width: 0 !important; }

  .table-shell input,
  .table-shell select,
  .table-shell textarea,
  .editable-select,
  .editable-field {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 29px !important;
    height: 29px !important;
    padding: 2px 5px !important;
    border-radius: 6px !important;
    font-size: .68rem !important;
  }
  .table-shell textarea { height: auto !important; min-height: 38px !important; }

  .copy-meter-button,
  .analysis-info-button,
  .comment-button,
  .comment-delete-button,
  .comment-inline-add,
  .comment-open-button {
    min-width: 27px !important;
    min-height: 27px !important;
    height: 27px !important;
    padding: 2px 5px !important;
    border-radius: 6px !important;
    font-size: .62rem !important;
  }
  .comment-inline-cell { display: grid !important; gap: 3px !important; }
  .comment-inline-entry {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 24px !important;
    gap: 3px !important;
    padding: 4px 5px !important;
    border-radius: 6px !important;
  }
  .comment-inline-content {
    min-width: 0 !important;
    max-height: 38px !important;
    overflow: hidden !important;
    font-size: .62rem !important;
    line-height: 1.15 !important;
  }
  .comment-inline-empty { font-size: .62rem !important; }
  .comment-inline-add { justify-self: start !important; width: auto !important; }

  .mobile-card-toggle { display: none !important; }
  .table-footer { display: none !important; }
  .status-bar { padding: 6px !important; font-size: .65rem !important; }
  footer { font-size: .59rem !important; }

  .comment-modal-card, .meter-modal-card {
    width: calc(100vw - 8px) !important;
    max-width: none !important;
    max-height: calc(var(--app-viewport-height) - 8px) !important;
    margin: 4px !important;
    padding: 10px !important;
    border-radius: 10px !important;
    overflow: auto !important;
  }
  .comment-modal-actions, .meter-modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: #fff !important;
    padding-top: 6px !important;
  }
  .scroll-top-button { right: 7px !important; bottom: 8px !important; }
  .scroll-top-button span:last-child { display: none !important; }
}

/* Très petit écran : barre d’outils sur deux lignes, sans aucun débordement */
@media (max-width: 390px) {
  .inline-actions { grid-template-columns: 1fr 1fr !important; }
  .inline-actions .search-box { grid-column: 1 / -1 !important; }
  .inline-actions .icon-label { width: 100% !important; min-width: 0 !important; }
  .mobile-brand-lockup { gap: 4px; }
  .mobile-brand-lockup strong { font-size: .82rem; }
  .mobile-brand-lockup small { max-width: 31vw; font-size: .62rem; }
  .table-shell tbody td { grid-template-columns: 60px minmax(0,1fr) !important; }
}

/* Paysage téléphone : cartes toujours stables, deux cartes seulement si la largeur est réellement suffisante. */
@media (orientation: landscape) and (min-width: 700px) and (max-width: 860px) and (min-height: 360px) {
  .table-shell tbody {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 5px !important;
  }
  .table-shell tbody tr { align-self: start !important; }
}

@media (hover: none) and (pointer: coarse) {
  button, [role="button"], select, input[type="date"], input[type="search"] { touch-action: manipulation; }
}


/* KORDELIA 1.2.7 — navigation mobile fiabilisée et actions utiles uniquement */
@media (max-width: 860px) {
  .mobile-brand-lockup {
    align-items: center !important;
    gap: 6px !important;
  }
  .mobile-kordelia-mark {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
  }
  .mobile-brand-copy {
    display: flex !important;
    align-items: baseline !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  /* L’export Excel reste une fonction ordinateur/tablette, pas smartphone. */
  .inline-actions [data-export] {
    display: none !important;
  }
  .inline-actions {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  /* Sur l’accueil mobile, seules les priorités non traitées sont affichées. */
  #homeView .home-layout {
    display: block !important;
  }
  #homeView .import-card {
    display: none !important;
  }
  #homeView .alerts-panel {
    width: 100% !important;
    margin: 0 !important;
  }
}


/* =========================================================
   Kordelia 3.0.0 — audit mobile 2026-09
   Navigation et ergonomie petits écrans
   ========================================================= */
.mobile-global-water-subnav,
.mobile-global-section-title,
.mobile-global-subitem { display:none; }

@media (max-width: 860px) {
  /* Les actions tactiles ne doivent jamais être minuscules. */
  button, a, select, input[type="button"], input[type="submit"] {
    -webkit-tap-highlight-color: rgba(18,113,117,.12);
  }

  /* Paramètres Eau : menu horizontal compact plutôt qu'une longue colonne. */
  .settings-layout {
    display:block !important;
  }
  .settings-menu {
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    gap:6px !important;
    margin:0 0 10px !important;
    padding:4px 1px 7px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    background:transparent !important;
    border:0 !important;
  }
  .settings-menu .setting-link {
    flex:0 0 auto !important;
    width:auto !important;
    min-width:max-content !important;
    min-height:42px !important;
    padding:8px 12px !important;
    border-radius:9px !important;
    scroll-snap-align:start;
  }
  .settings-content {
    width:100% !important;
    min-width:0 !important;
  }

  /* Dashboard et pages globales : aucun panneau ne dépasse l'écran. */
  .dashboard-grid,
  .home-summary-grid,
  .portal-grid,
  .about-v3-page,
  .global-users-page,
  .settings-content,
  .panel {
    max-width:100% !important;
    min-width:0 !important;
  }

  .dashboard-grid,
  .home-summary-grid {
    grid-template-columns:1fr !important;
  }

  /* Accueil général : cartes confortables sur écran type iPhone SE. */
  .portal-inner {
    width:100% !important;
    padding:18px 10px 44px !important;
  }
  .portal-intro {
    margin-bottom:20px !important;
    padding:0 4px !important;
  }
  .portal-logo {
    height:92px !important;
    max-width:88vw !important;
    margin-bottom:10px !important;
  }
  .portal-intro h1 {
    font-size:1.72rem !important;
    line-height:1.12 !important;
  }
  .portal-intro p {
    font-size:.86rem !important;
    line-height:1.45 !important;
  }
  .portal-grid {
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .portal-card {
    min-height:210px !important;
    padding:22px !important;
    border-radius:16px !important;
  }
  .portal-icon {
    width:58px !important;
    height:58px !important;
    margin-bottom:16px !important;
  }
  .portal-icon svg { width:36px !important; height:36px !important; }
  .portal-copy strong { font-size:1.4rem !important; }
  .portal-copy span { font-size:.84rem !important; }
  .portal-action { padding-top:18px !important; }

  /* À propos : sommaire scrollable, contenu lisible. */
  .about-summary {
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    padding:8px !important;
  }
  .about-summary a {
    flex:0 0 auto !important;
    min-height:38px;
    display:flex;
    align-items:center;
  }
  .about-v3-hero { padding:18px !important; }
  .about-v3-page > section { padding:16px !important; }

  /* Pied de page : lisible et jamais sous le bouton Remonter. */
  .status-bar {
    position:relative !important;
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    gap:5px 8px !important;
    padding:9px 54px calc(9px + env(safe-area-inset-bottom)) 9px !important;
    white-space:normal !important;
  }
  .status-bar .footer-brand {
    grid-column:1 / -1 !important;
    white-space:normal !important;
    line-height:1.3 !important;
  }
  .scroll-top-button.footer-visible {
    bottom:calc(72px + env(safe-area-inset-bottom)) !important;
  }

  /* Modales et formulaires : éviter les zooms automatiques d'iOS. */
  input, select, textarea {
    font-size:16px;
  }
}

@media (max-width: 390px) {
  .portal-card { min-height:196px !important; padding:18px !important; }
  .settings-menu .setting-link { padding:7px 10px !important; }
}


/* Kordelia 3.0.0 — interaction tactile du graphique compteur */
#meterModalCanvas {
  touch-action: pan-y;
}

.meter-mobile-readout {
  display:none;
}

@media (max-width: 860px), (pointer: coarse) {
  #meterModalCanvas {
    cursor:default;
    touch-action:pan-y;
  }

  .meter-mobile-readout {
    display:flex;
    flex-direction:column;
    gap:3px;
    margin-top:8px;
    padding:10px 12px;
    border:1px solid rgba(18,113,117,.24);
    border-radius:9px;
    background:rgba(18,113,117,.06);
    color:#061527;
  }

  .meter-mobile-readout[hidden] {
    display:none !important;
  }

  .meter-mobile-readout-label {
    font-size:.68rem;
    line-height:1.15;
    font-weight:850;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#607085;
  }

  .meter-mobile-readout strong {
    font-size:.92rem;
    line-height:1.3;
    overflow-wrap:anywhere;
  }
}

@media(max-width:760px){
  .settings-sublevel-head{align-items:stretch!important;flex-direction:column!important;gap:9px!important}
  .settings-version-switch{margin-left:0!important;width:100%!important}
  .settings-version-button{flex:1 1 0!important;min-width:0!important;padding:8px 10px!important;font-size:12px!important}
}