/* ═══════════════════════════════════════════════════════════════════
   SKLUBS CARD EDITOR — RESPONSIVE STYLES
   Breakpoints: Mobile < 768px | Tablet 768–1199px | Desktop ≥ 1200px
   ═══════════════════════════════════════════════════════════════════ */

/* ─── TABLET (768–1199px) ────────────────────────────────────────── */
@media (max-width: 1199px) {
  :root {
    --sidebar-width:  240px;
    --panel-width:    280px;
  }

  #app {
    grid-template-columns: var(--sidebar-width) 1fr var(--panel-width);
  }

  /* Collapse some panels by default on tablet */
  .topbar-name { display: none; }

  /* Compact pricing panel */
  .price-row { padding: var(--space-2) var(--space-3); }
  .pricing-total-preview { font-size: 15px; }
}

/* ─── MOBILE (< 768px) ───────────────────────────────────────────── */
@media (max-width: 767px) {
  body { overflow: hidden; }

  /* Switch to mobile layout: stacked panels */
  #app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  /* ── Topbar ── */
  #topbar {
    order: 1;
    height: 52px;
    padding: 0 var(--space-3);
    gap: var(--space-3);
  }

  .topbar-brand { padding-right: var(--space-3); }
  .topbar-name  { display: none; }

  .topbar-tools { display: none; } /* Collapsed into bottom bar on mobile */

  .topbar-actions { gap: var(--space-2); }
  .btn-lg { height: 36px; font-size: 13px; padding: 0 var(--space-4); }

  /* ── Canvas Area (center, takes most space) ── */
  #canvas-area {
    order: 2;
    flex: 1;
    min-height: 0;
  }

  #canvas-toolbar { padding: var(--space-2); gap: var(--space-2); }
  #canvas-viewport {
    background-size: 18px 18px;
  }

  /* ── Bottom Sheet for Sidebar ── */
  #sidebar {
    order: 3;
    width: 100%;
    height: auto;
    max-height: 45vh;
    border-right: none;
    border-top: 1px solid var(--border);
    flex-direction: column-reverse;
  }

  /* Horizontal Tabs at top of bottom sheet */
  .sidebar-tabs {
    flex-direction: row;
    border-bottom: none;
    border-top: 1px solid var(--border);
  }

  /* ── Properties Panel as slide-up sheet ── */
  #properties-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50vh;
    max-height: 50vh;
    z-index: 500;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    transform: translateY(100%);
    transition: transform var(--duration-slow) var(--ease-spring);
  }

  #properties-panel.mobile-open {
    transform: translateY(0);
  }

  /* Drag handle at top of sheet */
  #properties-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border);
    margin: var(--space-3) auto var(--space-2);
    flex-shrink: 0;
  }

  /* ── Mobile Floating Toolbar ── */
  #mobile-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--grey-950);
    border-top: 1px solid var(--border);
    order: 4;
    flex-shrink: 0;
  }

  /* ── Status bar hidden on mobile ── */
  #statusbar { display: none; }

  /* ── Modal — full screen on mobile ── */
  .modal {
    width: 100vw;
    max-height: 90vh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  }

  .modal-overlay {
    align-items: flex-end;
  }

  /* ── Pricing Panel Mobile ── */
  #pricing-panel {
    border-top: none;
    border-bottom: 1px solid var(--border);
  }

  .pricing-total-preview { font-size: 17px; }

  .paper-grid        { grid-template-columns: 1fr 1fr; }
  .props-section-title { font-size: 9px; }

  /* ── Template Grid ── */
  .template-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); }
  .template-card { border-width: 1px; }
}

/* ─── PRINT STYLES ───────────────────────────────────────────────── */
@media print {
  #topbar, #sidebar, #canvas-toolbar, #properties-panel,
  #statusbar, #context-menu, #toast-container { display: none !important; }

  #canvas-area {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }

  body { background: white; color: black; }
}

/* ─── HIGH DPI DISPLAYS ──────────────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharpen borders on retina */
  #topbar, #sidebar, #properties-panel {
    border-width: 0.5px;
  }
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── TOUCH DEVICES — no hover states ───────────────────────────── */
@media (hover: none) {
  .btn-icon:hover,
  .btn-secondary:hover,
  .btn-ghost:hover,
  .template-card:hover,
  .layer-item:hover,
  .option-btn:hover { transform: none; }
}

/* ─── MOBILE TOOLBAR (hidden on desktop) ─────────────────────────── */
#mobile-toolbar { display: none; }

@media (max-width: 767px) {
  #mobile-toolbar { display: flex; }
}

/* ─── LANDSCAPE PHONE ────────────────────────────────────────────── */
@media (max-width: 767px) and (orientation: landscape) {
  #sidebar { max-height: 35vh; }

  #properties-panel { height: 60vh; }

  #canvas-area { min-height: 200px; }
}