/* 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;
  }
}