/* ═══════════════════════════════════════════════════
   RESPONSIVE — ett ställe, inga konflikter
   Alla media queries samlade här
   ═══════════════════════════════════════════════════ */

/* ── Mobil base (< 480px) ────────────── */
@media (max-width: 479px) {
  .con { padding: 12px 10px; gap: 10px; }
  .card-body { padding: 10px 12px; }
.kpi-number { font-size: 24px; }
}

/* ── Tablet (768px+) ─────────────────── */
@media (min-width: 768px) {
  .con { padding: 16px 18px; gap: 14px; }
  .topbar { padding: 13px 20px; padding-top: calc(13px + env(safe-area-inset-top)); }
  .modal-overlay { align-items: center; }
  .modal-sheet { border-radius: 16px; max-width: 560px; }
}

/* ── Mid-tablet (900px+) ─────────────── */
@media (min-width: 900px) {
  .con { padding: 18px 22px; }
}

/* ── Desktop (1024px+) ───────────────── */
@media (min-width: 1024px) {
  .con { padding: 22px 30px; padding-bottom: 40px; }
  .modal-sheet { max-width: 600px; }
  .topbar { padding: 14px 28px; }
}

/* ── Wide desktop (1280px+) ──────────── */
@media (min-width: 1280px) {
  .con { max-width: 1320px; margin: 0 auto; }
}

/* ── XL desktop (1440px+) ────────────── */
@media (min-width: 1440px) {
  .con { padding: 24px 36px; }
  .topbar { padding: 16px 36px; }
}

/* ── Rondering utförande kontrollpunkter ── */
.ron-pt-row {
  padding: 12px 14px;
}
.ron-pt-border {
  border-top: 1px solid var(--br);
}
.ron-pt-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.ron-pt-desc {
  font-size: 11px;
  color: var(--mt);
  line-height: 1.4;
  margin-top: 2px;
  margin-bottom: 8px;
}
.ron-pt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ron-pt-ej {
  grid-column: 1 / -1;
}
.ron-pt-ok, .ron-pt-avv, .ron-pt-ej {
  padding: 10px 8px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: opacity .12s;
  white-space: nowrap;
}
.ron-pt-ok:active, .ron-pt-avv:active, .ron-pt-ej:active { opacity: .75; }
.ron-pt-ok  { background: #dcfce7; border-color: #86efac; color: #15803d; }
.ron-pt-avv { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.ron-pt-ej  { background: #f9fafb; border-color: var(--br); color: var(--mt); font-size: 11px; font-weight: 600; }

/* Desktop: compact horizontal layout */
@media (min-width: 768px) {
  .ron-pt-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
  }
  .ron-pt-body {
    flex: 1;
    min-width: 0;
  }
  .ron-pt-desc {
    margin-bottom: 0;
  }
  .ron-pt-actions {
    grid-template-columns: auto auto auto;
    flex-shrink: 0;
  }
  .ron-pt-ej {
    grid-column: auto;
  }
  .ron-pt-ok, .ron-pt-avv, .ron-pt-ej {
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* ── Mobil overflow-fix (~390px) ─────── */
@media (max-width: 430px) {
  /* Fakturadetalj — tabell */
  .inv-lines-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 11px;
  }
  .inv-lines-table th,
  .inv-lines-table td {
    white-space: nowrap;
    padding: 6px 7px;
    font-size: 11px;
  }

  /* Offertkalkylator — inputs */
  .off-calc-fields {
    display: block;
  }
  .off-calc-fields .g2,
  .off-calc-fields .g3 {
    grid-template-columns: 1fr;
  }
  .off-calc-chip-row {
    flex-wrap: wrap;
    gap: 5px;
  }

  /* AO material-tabell */
  .ao-mat-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ao-mat-table th,
  .ao-mat-table td {
    white-space: nowrap;
    font-size: 11px;
    padding: 5px 6px;
  }

  /* Offertrader — radbryt på liten skärm */
  .off-line-row-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .off-detail-hero-actions {
    flex-wrap: wrap;
    gap: 5px;
  }
}

/* ── Mobil AO-detalj ────────────────────────────────── */
@media (max-width: 639px) {
  /* Back-knapp: bara ikon på mobil */
  .ao-back-label { display: none; }

  /* Titelkort: tighter */
  .ao-title-main { font-size: 16px; }
  .ao-title-hero { padding: 12px 14px 8px; }
  .ao-action-strip { padding: 8px 12px 10px; gap: 5px; }
  .ao-desc-body { padding: 10px 14px; }
  .ao-info-row { padding: 9px 14px; }
  .ao-info-lbl { min-width: 60px; width: 60px; }

  /* Topbar: kompaktare på mobil */
  .topbar { padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); }
  #topbar-title { font-size: 15px; }
  #topbar-sub   { display: none; }
}

/* ── Mobil AO-lista: enklare kort ──────────────────── */
@media (max-width: 639px) {
  .ao-list-item {
    padding: 10px 12px;
  }
  .ao-item-id {
    display: none;
  }
  .ao-item-badges {
    gap: 3px;
  }
  /* Dashboard: kompaktare KPI */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .kpi-card {
    padding: 12px;
  }
  .kpi-val {
    font-size: 24px;
  }
  /* Modal: prevent overflow on narrow screens */
  .modal-inner {
    margin: 8px;
    max-height: calc(100dvh - 16px);
  }
}

/* ── AO-hero: desktop two-column (Runda 3) ── */
@media (min-width: 1024px) {
  .ao-hero-body {
    flex-direction: row;
    align-items: stretch;
  }
  .ao-hero-info {
    flex: 1; min-width: 0;
    border-right: 1px solid var(--br);
  }
  .ao-hero-actions {
    flex: 0 0 230px;
    border-top: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    background: var(--bg);
    border-radius: 0 0 10px 0;
    padding: 12px 14px;
  }
  .ao-hero-actions .btn,
  .ao-hero-actions select.btn {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ── AO filter chips: desktop only ── */
.qf-row-desktop { display: none; }
.ao-filter-btn  { display: inline-flex; }

@media (min-width: 768px) {
  .qf-row-desktop { display: flex; }
  .ao-filter-btn  { display: none; }
  .ao-active-filter { display: none; }
}

/* ── Invoice detail — desktop two-column ─── */
@media (min-width: 900px) {
  .inv-layout { flex-direction: row; align-items: flex-start; gap: 14px; }
  .inv-left  { flex: 1; min-width: 0; }
  .inv-right { flex: 0 0 280px; position: sticky; top: 62px; }
}

/* ── Property detail — desktop two-column (Runda 4) ── */
@media (min-width: 1024px) {
  .prop-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
  }
  .prop-layout-left  { flex: 1; min-width: 0; }
  .prop-layout-right {
    display: block;
    flex: 0 0 280px;
    position: sticky;
    top: 62px;
  }
  /* On desktop, hide the inline header card (shown in right column instead) */
  .prop-inline-header { display: none; }
  /* Mobile quick banner hides on desktop */
  .prop-mobile-quick,
  .off-mobile-quick { display: none !important; }
}