/* ============================================================
   Lippa Studio — Global Mobile / Tablet Responsive Fixes
   Indlæses på alle sider EFTER side-specifik <style>-blok,
   så regler her har kaskade-forrang ved ens specificitet.
   ============================================================ */

/* Beskrivelseskolonne: div-wrapper sætter max-width så table-layout:auto
   ikke udvider kolonnen til det længste varenavn */
.desc-clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
@media (max-width: 768px) {
  .desc-clip {
    max-width: 130px;
  }
}

/* ─── TABEL-SCROLL FIX (alle skærmstørrelser) ──────────────────────────────
   overflow:clip på .table-wrap forhindrer horisontal scroll.
   Overrides til overflow-x:auto uanset skærmbredde.          */
.table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.scroll-table-wrap {
  -webkit-overflow-scrolling: touch;
}

/* ─── TABLET (≤ 1024px) ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .page {
    padding: 16px 14px;
  }
}

/* ─── MOBIL (≤ 768px) ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page {
    padding: 12px 10px;
  }

  :root {
    --gap: 10px;
  }

  /* Touch-venlige knapper (minimum 40px høje) */
  .btn {
    min-height: 40px;
    padding: 8px 12px;
  }

  /* Filter-bar: kompakt padding + wrapping */
  .filter-bar {
    padding: 10px 12px;
    gap: 8px;
  }

  /* Forhindrer iOS auto-zoom ved focus (kræver font-size ≥ 16px) */
  .filter-bar select,
  .filter-bar input {
    font-size: 16px;
  }

  /* Tabel-header: kompakt */
  .table-header {
    padding: 10px 12px;
    gap: 6px;
  }
  .table-actions {
    flex-wrap: wrap;
  }

  /* Tabelceller: mindre padding + skrift */
  .data-table th {
    font-size: 10px;
    padding: 7px 8px;
  }
  /* min-width sikrer at kolonne-label er synlig i smalle talkolonner:
     sort-btn (~20px) + input (~48px) + padding (12px) = 80px minimum */
  .data-table th.filter-th {
    min-width: 80px;
  }

  /* Tabellen får sit eget scrollområde — headers sidder fast i toppen af det.
     Løser sticky-konflikt med overflow-x:auto scroll-container.            */
  .table-wrap {
    max-height: 60svh;
    max-height: 60vh; /* fallback */
  }
  .data-table th,
  .data-table th.filter-th {
    position: sticky !important;
    top: 0 !important;
    z-index: 11 !important;
  }
  .data-table td {
    padding: 7px 8px;
    font-size: 12px;
  }

  /* Side-drawer: fuld bredde på mobil */
  .drawer {
    width: 100vw;
  }

  /* Modaler: reduceret padding */
  .mov-overlay {
    padding: 20px 10px 10px;
  }
  .mov-modal {
    border-radius: 8px;
  }
}

/* ─── SMÅ TELEFONER (≤ 480px) ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .page {
    padding: 8px 8px;
  }

  :root {
    --gap: 8px;
  }

  /* KPI-grid: altid 2 kolonner */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tabel-header: stables lodret */
  .table-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Badges: mindre */
  .badge {
    font-size: 10px;
    padding: 1px 6px;
  }

  /* Modaler: fuld bredde uden sidemargen */
  .mov-modal {
    max-width: calc(100vw - 16px);
  }
}

/* ─── STICKY FØRSTE KOLONNE (≤ 768px) ──────────────────────────────────────
   Fastfrysning af identifikations-kolonner ved horisontal tabel-scroll.
   Kræver at .table-wrap har overflow-x:auto (sat i ovenstående).          */
@media (max-width: 768px) {

  /* ── Ordrelister (purchase-orders + greenmind-orders) ──────────────
     "Ordrenr." er første kolonne → sticky ved left:0.
     td: col-klasse tilføjet via JS-patch.
     th: data-col attr genereret af col-filters.js.                    */
  .data-table td.col-number,
  .data-table th[data-col="number"] {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--surface);
    box-shadow: 2px 0 5px rgba(0,0,0,.3);
  }

  /* ── purchase.html + greenmind.html (#main-table) ───────────────────
     Kun checkbox (col-select) er sticky — varenummer ruller frit.
     Override den generelle .col-number-regel (til ordrelister).       */
  #main-table td.col-number,
  #main-table th.col-number {
    position: static;
    box-shadow: none;
  }
  #main-table td.col-select,
  #main-table th.col-select {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--surface);
    box-shadow: 2px 0 5px rgba(0,0,0,.3);
  }
}

/* ─── SALES.HTML: STICKY FØRSTE KOLONNE ────────────────────────────────────
   4 tabeller med ID — varenr./kundernr. fastfryses ved horisontal scroll.
   sticky-thead sætter thead th{top:0;background:var(--surface2)},
   derfor bruger th:first-child surface2 og td:first-child surface.       */
@media (max-width: 768px) {

  #tbl-products td:first-child,
  #tbl-margins td:first-child,
  #tbl-customers td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--surface);
    box-shadow: 2px 0 5px rgba(0,0,0,.3);
  }

  #tbl-products thead th:first-child,
  #tbl-margins thead th:first-child,
  #tbl-customers thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 5; /* Over data-rækker */
    background: var(--surface2); /* Matcher sticky-thead header */
    box-shadow: 2px 0 5px rgba(0,0,0,.3);
  }
}

/* ─── KOLONNE-VÆLGER: BOTTOM SHEET PÅ MOBIL ────────────────────────────────
   Desktop: absolut dropdown. Mobil: fixed bottom sheet der dækker fuld bredde,
   med et semi-transparent overlay bagved der lukker ved tap.                */
@media (max-width: 768px) {
  .col-picker-dd {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: 75vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
    padding: 8px 16px 32px !important; /* 32px ekstra bund for iOS home-indikator */
    box-shadow: 0 -4px 24px rgba(0,0,0,.5) !important;
    z-index: 1000 !important;
  }

  /* Håndtag øverst */
  .col-picker-dd::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 8px auto 12px;
  }

  /* Større touch-targets på items */
  .col-picker-item {
    min-height: 44px;
    padding: 10px 8px;
    font-size: 14px !important;
  }

  /* Dim baggrund når åben */
  .col-picker-wrap.open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 999;
  }

  .col-picker-footer button {
    min-height: 40px;
    font-size: 13px !important;
    padding: 8px 12px;
  }
}