/* ═══════════════════════════════════════════════════════════════
   Responsive — All media queries
   ═══════════════════════════════════════════════════════════════ */

/* ── Facade (outside) ───────────────────────────────────────── */
#sec-out-facade .facade-toolbar { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 8px; }
#sec-out-facade .facade-toolbar__group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 1 1 auto; min-width: 0; }
#sec-out-facade .facade-toolbar__walls { margin-left: auto; flex: 0 1 auto; }
#sec-out-facade .sidecard { border: 1px dashed var(--separator); border-radius: var(--r-sm); background: var(--bg-secondary); padding: 12px; overflow-x: hidden; }
#sec-out-facade .sidecard__head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin-bottom: 6px; }
#sec-out-facade .sidecard__nav .nav-btn { width: 28px; height: 28px; }
#sec-out-facade input[type="number"], #sec-out-facade select { padding: 6px 8px; }

/* Outside openings table */
#outOpeningsTable { table-layout: fixed; width: 100%; }
#sec-out-facade .sidecard__body { overflow-x: hidden; }
#sec-out-facade .sidecard__body .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Openings compact */
#sec-out-facade .openings-compact { display: grid; gap: 6px; }
#sec-out-facade .openings-compact .open-line { display: grid; grid-template-columns: 64px minmax(0,1fr) 120px auto; align-items: center; gap: 8px; }
#sec-out-facade .openings-compact .olbl { font-weight: 600; color: var(--text-primary); }
#sec-out-facade .openings-compact .odims, #sec-out-facade .openings-compact .ocnt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
#sec-out-facade .openings-compact input[type="number"] { width: 72px; padding: 6px 8px; }
#sec-out-facade .openings-compact select { min-width: 96px; padding: 6px 8px; }
#sec-out-facade .openings-compact .x { opacity: .6; }
#sec-out-facade .openings-compact .unit { color: var(--text-tertiary); }
#sec-out-facade .openings-compact.custom .open-line { grid-template-columns: 64px 1fr 120px auto; }
#sec-out-facade .mini-table table { width: 100%; border-collapse: collapse; }
#sec-out-facade .mini-table th, #sec-out-facade .mini-table td { padding: 6px 8px; border-bottom: 1px solid var(--separator); }
#sec-out-facade .mini-table input[type="number"] { width: 72px; padding: 6px 8px; }

/* Simple/advanced mode */
#outsideWrap.simple [data-advanced] { display: none !important; }
#outsideWrap.simple label:has(#facadeLayers), #outsideWrap.simple label:has(#facadeSubstrate),
#outsideWrap.simple label:has(#plinthLayers), #outsideWrap.simple label:has(#plinthSubstrate),
#outsideWrap.simple label:has(#roofPitch), #outsideWrap.simple label:has(#roofLayers),
#outsideWrap.simple label:has(#roofSubstrate), #outsideWrap.simple label:has(#soffitW),
#outsideWrap.simple label:has(#soffitLayers), #outsideWrap.simple label:has(#porchLayers),
#outsideWrap.simple label:has(#porchSubstrate), #outsideWrap.simple label:has(#terrLayers),
#outsideWrap.simple label:has(#terrSubstrate) { display: none !important; }

/* Inside simple mode */
#insideWrap.simple #sec-rooms, #insideWrap.simple #sec-openings { display: none !important; }
#insideWrap.simple #surfaceHeader { display: none !important; }
/* Hide substrate dropdown and layers input in simple mode (keep wall dimensions) */
#insideWrap.simple #paramForm select[data-field="substrate"],
#insideWrap.simple #paramForm label:has(select[data-field="substrate"]),
#insideWrap.simple #paramForm input[data-field="layers"],
#insideWrap.simple #paramForm label:has(input[data-field="layers"]) { display: none !important; }

/* Outside acc tables */
#outsideWrap .muted { color: var(--text-tertiary); }
#outsideWrap .acc table { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--bg-primary); }
#outsideWrap .acc th, #outsideWrap .acc td { padding: 6px 8px; border-bottom: 1px solid var(--separator); }
#outsideWrap .acc thead th { background: var(--bg-secondary); position: sticky; top: 0; z-index: 1; }

/* Roof section */
#outsideWrap.advanced #sec-out-roof > .row { flex-wrap: wrap; }
#outsideWrap #roofTypeSeg { flex: 0 0 auto; max-width: 100%; white-space: nowrap; }
#sec-out-roof { overflow-x: hidden; }
#sec-out-roof > .row { width: 100%; max-width: 100%; }
#sec-out-roof #roofFieldsGrid { min-width: 0; max-width: 100%; width: 100%; display: flex; flex-wrap: wrap; gap: 6px 12px; }
#sec-out-roof #roofRow2Main, #sec-out-roof #roofRow4Soffit { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 10px; flex: 1 1 100%; min-width: 0; max-width: 100%; width: 100%; }
#sec-out-roof #roofRow3Base { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 10px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
#sec-out-roof #roofFieldsGrid > label, #sec-out-roof #roofFieldsGrid label { display: inline-grid; grid-auto-flow: column; grid-template-columns: max-content minmax(0, 1fr); align-items: center; column-gap: 6px; min-height: 30px; margin: 0; min-width: 0; max-width: 100%; }
#sec-out-roof #roofFieldsGrid select, #sec-out-roof #roofFieldsGrid input[type="number"] { max-width: 100%; }
#sec-out-roof #roofRow4Soffit { position: relative; margin-top: 10px; padding-top: 10px; }
#sec-out-roof #roofRow4Soffit::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(to right, transparent, var(--separator), transparent); pointer-events: none; }

/* Plinth */
#sec-out-plinth { overflow-x: hidden; }
#sec-out-plinth #plinthRow { display: flex; flex-wrap: nowrap; align-items: end; gap: 8px 10px; min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; }
#sec-out-plinth .plinth-check-wrap { display: inline-flex; align-items: center; gap: 3px; min-height: 30px; min-width: 0; max-width: 42%; white-space: normal; word-break: normal; overflow-wrap: break-word; flex: 1 1 220px; }
#sec-out-plinth .plinth-check-wrap input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; min-width: 16px; margin: 0; }
#sec-out-plinth input[type="number"] { width: 96px; max-width: 100%; padding: 6px 8px; box-sizing: border-box; }
#sec-out-plinth select { width: 220px; max-width: 100%; box-sizing: border-box; }

/* Gables — layout now in components.css REDESIGN 2026 */
.gable-card .field { display: flex; flex-direction: column; gap: 4px; }
.gable-card input[type="number"] { width: 100%; box-sizing: border-box; }
.opening.selected { outline: 2px dashed rgba(255,255,255,0.95); box-shadow: 0 0 0 2px rgba(0,0,0,0.25) inset, 0 0 0 3px rgba(80,160,255,0.9); }
.g-openings-layer .g-opening { cursor: grab; }
.g-openings-layer .g-opening.dragging { cursor: grabbing; }

/* Addons (porch, terrace) */
#sec-out-addons .addons-set + .addons-set { margin-top: 12px; }
#sec-out-addons .field .lab { display: block; margin-bottom: 4px; color: var(--text-tertiary); font-size: 12px; }
#sec-out-addons .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* #outGablesPanel layout is in components.css REDESIGN 2026 */
/* #addonsCards grid layout is in components.css REDESIGN 2026 */

/* Export PDF */
#sec-scheme #exportPlanPdf { padding: 6px 12px; line-height: 1; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--separator-opaque); background: var(--bg-primary); font-weight: 600; vertical-align: middle; }
#sec-scheme .seg button, #sec-scheme #exportPlanPdf { display: inline-flex; align-items: center; }


/* ═══════════════════════════════════════════════════════════════
   MEDIA QUERIES
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablet: wizard as floating bottom sheet ───────────────── */
@media (max-width: 1023px) {
  .canvas-layout { flex-direction: column; }
  .canvas { min-height: 280px; flex: 1; }
  .canvas__chips {
    position: relative;
    bottom: auto; left: auto;
    transform: none;
    padding: 8px 12px;
    display: flex;
    justify-content: center;
  }
  .chip-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--separator-opaque) transparent; }
  .chip-bar::-webkit-scrollbar { height: 4px; }
  .chip-bar::-webkit-scrollbar-thumb { background: var(--separator-opaque); border-radius: 2px; }
  .chip-bar::-webkit-scrollbar-track { background: transparent; }
  .wizard {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    top: auto;
    transform: none;
    width: 100%;
    max-height: 50vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.12);
    animation-name: wizSheetIn;
    z-index: 100;
  }
  .wiz-viewport { max-height: calc(50vh - 140px); }
  @keyframes wizSheetIn {
    from { opacity: 0; transform: translateY(40px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
  }
  .app-bar__left h1 { font-size: 14px; }
  .wiz-step { padding: 10px 16px; }
  .wiz-progress { padding: 12px 16px 8px; }
  .wiz-nav { padding: 6px 16px 12px; }
  .wiz-mini { margin: 0 10px 6px; }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .app-bar {
    padding: 0 12px;
    height: 48px;
    gap: 8px;
  }
  .app-bar__left h1 { display: none; }
  .app-logo { width: 26px; height: 26px; }
  .app-bar__center {
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-bar__center::-webkit-scrollbar { display: none; }
  .pill-seg button { padding: 5px 10px; font-size: 12px; }
  #guideToggleWrap { display: none; }
  #helpTourBtn { display: inline-flex; }
  .app-bar__right { gap: 4px; }
  .app-bar__icon { width: 32px; height: 32px; }

  .wizard { max-height: 55vh; padding-bottom: env(safe-area-inset-bottom); transform: none; }
  .wiz-viewport { max-height: calc(55vh - 130px); }
  .wiz-step { padding: 8px 12px; gap: 10px; }
  .wiz-card { padding: 12px 14px; border-radius: var(--r-md); }
  .wiz-kpi__val { font-size: 18px; }
  .wiz-kpi__card { padding: 10px 12px; border-radius: var(--r-md); }
  .wiz-result__btn { padding: 10px 12px; font-size: 12px; }
  .wiz-nav__btn { padding: 8px 16px; font-size: 12px; }
  .wiz-mini { font-size: 12px; height: 36px; margin: 0 8px 4px; gap: 10px; }
  .wiz-mini__item b { font-size: 13px; }
  .wizard input[type="number"], .wizard select { padding: 7px 10px; font-size: 13px; }
  .canvas__chips { bottom: max(8px, env(safe-area-inset-bottom)); }
  .chip { padding: 6px 12px; font-size: 12px; }

  .popover {
    width: calc(100vw - 24px);
    right: 12px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .popover__body { padding: 16px; }
  .sec { padding: 12px; }
  .drawing-help-panel { width: calc(100vw - 24px); right: 12px; top: 60px; }
  .tool-strip { padding: 4px 8px; }
  .formula-breakdown { margin: 0 8px 4px; }
}

/* ── Desktop wide (min-width) ───────────────────────────────── */
@media (min-width: 960px) {
  /* gable cards stay 1-column — each card needs full width for 3 input fields */
}

/* ── Medium tablet ─────────────────────────────────────────── */
@media (max-width: 980px) {
  #sec-out-addons .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  #sec-out-geom .geom-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}

/* ── Small tablet ──────────────────────────────────────────── */
@media (max-width: 720px) {
  .table-surfaces col.name { width: auto; }
  #sec-out-facade .facade-toolbar__group { grid-template-columns: 1fr 1fr; }
  #sec-out-facade .sidecard__head { grid-template-columns: 1fr; gap: 6px; }
  #outsideWrap #sec-out-roof > .row > label:first-of-type { margin-left: 0 !important; }
}

@media (max-width: 640px) {
  #sec-out-facade .openings-compact .open-line { grid-template-columns: 64px 1fr; }
  #sec-out-facade .openings-compact .ocnt { justify-self: start; }
  #sec-out-facade .openings-compact .open-line > .btn { grid-column: 1 / -1; justify-self: start; }
  #sec-out-addons .grid-3 { grid-template-columns: 1fr; }
}

/* ── Small mobile ───────────────────────────────────────────── */
@media (max-width: 560px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .tool-strip { flex-wrap: wrap; }
  .tool-strip__btns { flex-wrap: wrap; }
  .tool-strip__btns .tool-btn[data-tooltip]:hover::after { left: 0; transform: translate(0, -6px); min-width: 160px; }
  /* Legacy seg-tools compat */
  .seg.seg-tools { flex-wrap: wrap; }
  .seg.seg-tools .tool-btn {
    flex: 1 1 100%; border-right: 0;
    border-bottom: 1px solid var(--separator);
    padding: 6px 10px;
  }
  .seg.seg-tools .tool-btn:last-child { border-bottom: 0; }
  /* Wizard compact */
  .wiz-progress__title { display: none; }
  .wiz-progress { padding: 10px 12px 6px; gap: 10px; }
  .wiz-progress__dots { gap: 4px; }
  .wiz-dot { width: 12px; height: 12px; }
  .wiz-step { padding: 6px 12px 12px; gap: 10px; }
  .wiz-nav { flex-direction: row; padding: 4px 12px 10px; }
  .wiz-nav__btn { flex: 1; justify-content: center; font-size: 12px; padding: 8px 10px; }
  .wiz-mini { font-size: 11px; gap: 6px; height: 32px; margin: 0 6px 4px; padding: 0 10px; }
  .wiz-mini__item b { font-size: 12px; }
  .wiz-card { padding: 10px 12px; }
  .wiz-card__title { font-size: 10px; margin-bottom: 8px; }
  .wiz-reserve__slider::-webkit-slider-thumb { width: 16px; height: 16px; }
  .wiz-reserve__input { width: 40px; font-size: 14px; }
  .wiz-result__acts { flex-direction: column; gap: 6px; }
  /* Redesign compact overrides */
  .wizard .sol-total-card__price { font-size: 24px; }
  .wizard .tool-strip__btns .tool-btn { padding: 8px 6px; font-size: 12px; }
  .wizard .table-surfaces--simple tbody tr.surf-row td { padding: 5px 4px; }
  .wizard .seg.seg-small button { padding: 4px 8px; font-size: 10px; }
  .wizard #roomManageButtons .btn.ghost.small { padding: 4px 8px; font-size: 10px; }
  .wiz-rooms-row { gap: 2px; }
  /* Outside redesign compact */
  .wizard #sec-out-geom .geom-grid { padding: 12px; }
  .wizard #sec-out-geom .geom-grid input[type="number"] { height: 38px; font-size: 14px; }
  .wizard #facadeTable thead th { font-size: 8px; }
  .wizard #facadeTable tbody tr.facade-row td { padding: 5px 4px; font-size: 12px; }
  .wizard .facade-toolbar { padding: 8px; }
  .wizard #roofFieldsGrid { padding: 8px; }
  .wizard #plinthRow { padding: 8px; }
  .wizard .addon-card section { padding: 10px; }
  .wizard .addon-card .grid-3 { grid-template-columns: 1fr 1fr; }
  .wizard .gable-card section { padding: 6px 8px; }
  .wizard .gable-card header { padding: 4px 8px; }
  .wizard .gable-card .gable-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .scheme-header { flex-wrap: wrap; }
  .scheme-toolbar { width: 100%; justify-content: flex-end; }
  .scheme-hint { display: none; }
  #sec-out-kpi .kpi, #outsideWrap .kpi[data-role="outside-kpi"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 420px) {
  #sec-out-geom .geom-grid { grid-template-columns: 1fr; }
  .wizard .addon-card .grid-3 { grid-template-columns: 1fr; }
  .wizard #addonsCards { grid-template-columns: 1fr; }
  .wizard .gable-card .gable-grid { grid-template-columns: 1fr; }
}


/* ── Landscape on small screens ─────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  .app-bar { height: 44px; padding: 0 8px; gap: 6px; }
  .app-bar__left h1 { font-size: 12px; }
  .canvas { min-height: 200px; }
  .wizard { max-height: 50vh; }
  .pill-seg button { padding: 4px 10px; font-size: 11px; }
}

/* ── Print ─────────────────────────────────────────────────── */
@media print {
  /* Hide non-printable UI chrome */
  .app-bar,
  .canvas__toolbar,
  .canvas__chips,
  .toast,
  .t-overlay,
  .popover,
  .fp2d-context-menu,
  .drawing-help-panel,
  .calc-modal-backdrop,
  .zoom-ui {
    display: none !important;
  }

  /* Remove decorative backgrounds and shadows from body */
  body {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  /* Let the canvas / content area fill the printed page */
  .canvas-layout {
    display: block !important;
  }
  .canvas {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  /* Wizard: full-width, auto-height, no overlay */
  .wizard {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    animation: none !important;
  }
  .wiz-step { display: flex !important; opacity: 1 !important; transform: none !important; filter: none !important; position: static !important; animation: none !important; }
  .wiz-step > * { animation: none !important; }
  .wiz-nav, .wiz-progress, .wiz-mini { display: none !important; }
}


/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .t-ring, .t-ring--step, .t-pop, .t-pop--pop { animation: none !important; transition: none !important; }
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}


/* ── Force wizard step sections visible (override simple-mode hiding) ── */
/* Inside: rooms and openings hidden by CSS !important in simple mode */
#insideWrap.simple .wizard #sec-rooms,
#insideWrap.simple .wizard #sec-openings { display: block !important; }


/* ── Dark mode auto (tour) ──────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --t-backdrop: rgba(0,0,0,var(--t-backdrop-opacity, .62));
    --t-pop-bg: #0b1220;
    --t-pop-border: #1e293b;
    --t-pop-shadow: 0 24px 64px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.25);
    --t-title: #e2e8f0;
    --t-text: #cbd5e1;
    --t-muted: #94a3b8;
    --t-ring: #e2e8f0;
    --t-ring-glow: rgba(59,130,246,.35);
    --t-danger-bg: #2b1513;
    --t-danger-bd: #6b2220;
    --t-danger-tx: #fecaca;
  }
}