/* ═══════════════════════════════════════════════════════════════════════════
   BESS CRM – responsiv anpassning
   Brytpunkter:  telefon <768  ·  iPad 768–1023  ·  dator ≥1024
   Princip: samma HTML och funktioner på alla enheter, bara presentationen
   ändras. Många element har inline-stilar i JS-mallarna, därför !important
   där det behövs för att media queries ska vinna.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { color-scheme: light; }   /* formulärkontroller ska inte bli halvmörka på enheter med mörkt systemläge */

html, body { max-width: 100%; overflow-x: hidden; }   /* aldrig horisontell scroll på sidnivå */
* { -webkit-tap-highlight-color: rgba(99, 102, 241, .15); }
img, svg, canvas, video { max-width: 100%; }

/* Tabeller: scroll-wrapper (läggs på av enhanceTables) */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > table { min-width: 640px; }
.card > .table-responsive { border-radius: inherit; }

/* Sidomenyns backdrop (bara mobil) */
#sidebar-backdrop { display: none; }

/* Topbar-knappar: tryckyta */
.topbar-menu-btn, #topbar-action, #topbar .topbar-right > div > button { min-width: 44px; min-height: 44px; }

/* ───────────────────────────────────────────────────────────────────────────
   iPad och mindre (<1024)
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Sidomenyn infälld som rail (64 px), expanderbar med hamburgaren */
  #sidebar { width: 64px; }
  #sidebar .nav-label { display: none; }
  #sidebar:not(.collapsed).expanded-tablet { width: 260px; }
  #main-content { margin-left: 64px; }
  #main-content.expanded { margin-left: 64px; }
  body.sidebar-open #sidebar { width: 260px; }
  body.sidebar-open #sidebar .nav-label { display: block; }
  body.sidebar-open #sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 39; }

  #page-content { padding: 16px !important; }

  /* Ställverksdetalj: KPI 4→2, rollup 9→scroll, huvudlayout 1 kolumn */
  .stn-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stn-rollup-grid { display: flex !important; overflow-x: auto; gap: 8px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .stn-rollup-grid > * { min-width: 92px; flex: 0 0 auto; }
  .stn-detail-grid { grid-template-columns: 1fr !important; }

  /* Markägar-drawer: bredare andel */
  #itr-drawer { width: min(460px, 92vw) !important; }

  /* Kartsidans KML-panel får inte tränga ut kartan */
  #map-page-wrapper { flex-wrap: wrap; }
  #kml-list-panel { width: 100% !important; height: auto !important; max-height: 50vh; }

  /* Kort-grids: aldrig bredare än skärmen */
  #properties-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important; }

  /* Pipeline: touch-vänlig horisontell scroll */
  .pipeline-column { scroll-snap-align: start; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Telefon (<768)
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Sidomeny: off-canvas. Innehållet tar hela bredden. */
  #sidebar { width: 260px; transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto; }
  #sidebar .nav-label { display: block; }
  body.sidebar-open #sidebar { transform: translateX(0); }
  #main-content, #main-content.expanded { margin-left: 0 !important; }

  /* Topbar */
  #topbar { padding: 0 12px !important; height: 56px !important; gap: 8px; }
  #page-title { font-size: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-left { flex: 1; min-width: 0; }
  .topbar-right { gap: 6px !important; flex-shrink: 0; }
  .topbar-username { display: none; }
  #topbar-action .topbar-action-label { display: none; }          /* bara ikon */
  #topbar-action { padding: 0 12px !important; }

  #page-content { padding: 12px !important; }

  /* Rubrikrader och knappgrupper får radbrytas */
  #page-content > div > div[style*="justify-content:space-between"],
  #page-content .card > div[style*="justify-content:space-between"] { flex-wrap: wrap; gap: 8px; }

  /* Tryckytor och läsbarhet */
  button, .btn-primary, .btn-secondary, .nav-item, .tab-btn, a.btn-secondary { min-height: 44px; }
  .btn-primary, .btn-secondary { padding-top: 10px; padding-bottom: 10px; }
  .form-input, input, select, textarea { font-size: 16px !important; }          /* iOS zoomar vid <16px */
  input[type="checkbox"], input[type="radio"] { min-height: 0; }
  .tab-nav { display: flex !important; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .tab-btn { white-space: nowrap; }

  /* Modaler: fyll skärmen, en kolumn i alla formulär-grids, sticky knapprad */
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal-content, .modal-overlay > div[style*="max-width"] {
    max-width: 100% !important; width: 100% !important;
    max-height: 100vh !important; max-height: 100dvh !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .modal-content [style*="grid-template-columns"],
  .modal-overlay [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .modal-content [style*="padding:20px 24px"], .modal-content [style*="padding:24px 28px"], .modal-content [style*="padding:12px 28px"] { padding-left: 16px !important; padding-right: 16px !important; }
  #project-detail-modal .modal-content > div[style*="justify-content:space-between"] { flex-wrap: wrap; }

  /* Drawer: fullbredd */
  #itr-drawer { width: 100vw !important; }

  /* Tabeller → kort. Varje <td> visar sin rubrik (data-label) till vänster. */
  .table-responsive > table { min-width: 0; width: 100%; }
  .table-responsive > table thead { display: none; }
  .table-responsive > table, .table-responsive > table tbody, .table-responsive > table tr, .table-responsive > table td { display: block; width: 100%; }
  .table-responsive > table tr { border: 1px solid #e2e8f0; border-radius: 10px; margin: 0 0 10px; padding: 6px 0; background: #fff; }
  .table-responsive > table td { border-bottom: 1px solid #f1f5f9 !important; padding: 8px 12px !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: right; }
  .table-responsive > table td:last-child { border-bottom: none !important; }
  .table-responsive > table td[data-label]::before { content: attr(data-label); font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .3px; text-align: left; flex-shrink: 0; }
  .table-responsive > table td[colspan] { justify-content: center; }
  .table-responsive > table td > div[style*="display:flex"] { justify-content: flex-end; flex-wrap: wrap; }

  /* Ställverkslista: rad → kort med viktigast först */
  .stn-row { flex-wrap: wrap !important; padding: 12px 14px !important; gap: 8px 10px !important; }
  .stn-row-main { flex: 1 1 100% !important; order: -1; padding-left: 0; }
  .stn-row-main > div { white-space: normal !important; }
  .stn-row > div[onclick*="_stnToggleSelect"] { order: -2; }
  .stn-row-action { margin-left: auto; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .stn-row-action + .stn-row-action { margin-left: 0; }
  .stn-row-chevron { display: none; }

  /* Ställverksdetalj */
  .stn-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  #stn-map { height: 300px !important; }
  #sweden-map { min-height: 60vh !important; height: 60vh !important; }
  #kml-list-panel { max-height: 40vh; }

  /* Kort-grids */
  #properties-grid, #page-content [style*="grid-template-columns:repeat(auto-fill"] { grid-template-columns: 1fr !important; }
  #page-content [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Popovers får inte bli bredare än skärmen */
  [style*="width:240px"], [style*="width:280px"], [style*="min-width:300px"] { max-width: calc(100vw - 24px) !important; }

  /* Brödsmulor: visa bara föräldern och nuvarande vy om det är trångt */
  .breadcrumbs { white-space: normal; }

  /* Uppföljningar/ringlista: rubrik + åtgärdsgrupp radbryts, knappar fyller raden */
  #page-content div[style*="align-items:flex-start"][style*="justify-content:space-between"] { flex-wrap: wrap; }
  #page-content div[style*="align-items:flex-start"][style*="justify-content:space-between"] > div:last-child { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }

  /* Ringlistans kort: telefonpillret och snabbknapparna under namnet, inte till höger */
  #page-content .cl-card > div[style*="display:flex"] { flex-wrap: wrap; }
  #page-content .cl-card > div[style*="display:flex"] > div[style*="flex-shrink:0"]:last-child { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

  /* Ringlistans flikrad: radbryt, sorteringsselect får hela raden */
  .cl-tabrow > select, .cl-tabrow select { flex: 1 1 100%; max-width: 100%; }

  /* Kartsidans kontrollrad */
  #map-page-header input[style*="width:210px"] { width: 100% !important; }

  /* Login */
  .login-bg > div { padding: 16px !important; }
}

/* Små telefoner (≤360) */
@media (max-width: 360px) {
  #page-content { padding: 8px !important; }
  .stn-kpi-grid { grid-template-columns: 1fr !important; }
}

/* iPad liggande / smal dator (1024–1279): behåll full layout men krymp luft */
@media (min-width: 1024px) and (max-width: 1279px) {
  #page-content { padding: 20px !important; }
  .stn-detail-grid { grid-template-columns: 1fr 320px !important; }
}

/* Pekskärmar: inga hover-only-interaktioner krävs, större träffytor */
@media (hover: none) and (pointer: coarse) {
  .stn-row-action { opacity: 1 !important; }
  .nav-item { padding-top: 12px; padding-bottom: 12px; }
}

/* Respektera reducerad rörelse */
@media (prefers-reduced-motion: reduce) {
  #sidebar, #main-content { transition: none !important; }
}