/* ═══════════════════════════════════════════════════════════════════════════
   BENNING E-CAD — Mobile & Tablet Fixes
   Comprehensive responsive improvements for all screen sizes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOUCH TARGETS: Min 44px everywhere ──────────────────────────────── */
@media (max-width: 1024px) {
  /* All interactive elements minimum 44px touch target */
  button, .menu-btn, .tool-btn-lbl, .tb3-btn, .action-btn,
  .modal-btn,
  .prop-apply-btn, .btn-primary, .btn-cancel, .btn-secondary {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Sidebar items: block-level, not inline */
  .cat-header, .sym-item {
    min-height: 44px;
  }

  /* Menu buttons need to be tappable */
  .menu-btn {
    min-height: 44px;
    height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }

  /* Row 1 must grow to fit 44px menu buttons */
  .toolbar-row-1 {
    height: 44px !important;
    min-height: 44px !important;
  }

  /* Tool buttons */
  .tool-btn-lbl {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
  }
  .tb3-btn {
    min-height: 36px;
    padding: 6px 10px;
  }
}

/* ── 2. CANVAS: Touch-action for pan/zoom ───────────────────────────────── */
#canvas-area,
#main-canvas {
  touch-action: none; /* allow JS touch handlers to control pan/zoom */
}

/* Crisp-rendering fuer Canvas-Elemente: verhindert CSS-seitigen Blur bei DPR-Skalierung */
#main-canvas,
#overlay-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* Firefox fallback */
}

/* Single-finger pan on mobile */
@media (max-width: 768px) {
  #canvas-area {
    touch-action: none;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 3. SIDEBAR: Overlay behavior on mobile ─────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar becomes a slide-in overlay, not inline */
  #symbol-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 280px !important;
    z-index: 300 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3) !important;
    will-change: transform;
  }

  #symbol-sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  /* Backdrop for sidebar overlay */
  #sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 299;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  #sidebar-backdrop.visible {
    display: block;
  }

  /* Main canvas area takes full width on mobile (sidebar is overlay) */
  #workspace {
    margin-left: 0 !important;
  }

  /* sidebar-right variant on mobile */
  .sidebar-right #symbol-sidebar {
    left: auto !important;
    right: 0 !important;
    transform: translateX(100%) !important;
  }
  .sidebar-right #symbol-sidebar.mobile-open {
    transform: translateX(0) !important;
  }
}

/* ── 4. HAMBURGER BUTTON: Correct styling and positioning ───────────────── */
#sidebar-toggle {
  /* Visible only on mobile via JS — ensure 44px touch target */
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  display: none !important; /* shown via JS */
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 768px) {
  /* Toolbar row 1 must not hide the hamburger */
  .toolbar-row-1 {
    overflow: visible !important;
    flex-wrap: nowrap;
  }

  /* Compact menu buttons on mobile — horizontal scroll row 1 */
  .toolbar-row-1 {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .toolbar-row-1::-webkit-scrollbar { display: none; }

  /* Toolbar row 2: horizontal scroll for tools */
  .toolbar-row-2 {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
  .toolbar-row-2::-webkit-scrollbar { display: none; }

  /* Toolbar row 3: horizontal scroll */
  .toolbar-row-3 {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
  .toolbar-row-3::-webkit-scrollbar { display: none; }
}

/* ── 5. PROPERTY PANEL: Bottom-sheet on mobile ──────────────────────────── */
@media (max-width: 768px) {
  /* Bottom sheet style when visible */
  #prop-panel.mobile-sheet {
    display: flex !important;
    position: fixed !important;
    bottom: var(--status-h, 24px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 55vh !important;
    max-height: 55vh !important;
    z-index: 400 !important;
    border-left: none !important;
    border-top: 2px solid var(--border) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.25) !important;
    overflow-y: auto !important;
    animation: slideUp 0.25s ease-out;
  }

  @keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
  }

  /* Drag handle for bottom sheet */
  #prop-panel.mobile-sheet::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 8px auto 4px;
    flex-shrink: 0;
  }

  /* FAB button: always visible, bigger on mobile */
  #prop-panel-mobile-toggle {
    display: flex !important;
    position: fixed !important;
    bottom: calc(var(--status-h, 24px) + 12px) !important;
    right: 12px !important;
    width: 52px !important;
    height: 52px !important;
    background: var(--accent) !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 350 !important;
    box-shadow: 0 4px 16px rgba(26,115,232,0.5) !important;
    color: #ffffff !important;
    border: none !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
  }

  #prop-panel-mobile-toggle:hover,
  #prop-panel-mobile-toggle:active {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(26,115,232,0.6) !important;
  }
}

/* ── 6. MODALS: Full-screen-friendly on small screens ───────────────────── */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 12px 8px !important;
    align-items: flex-end !important; /* slide from bottom */
  }

  .modal {
    min-width: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
  }

  /* Modal title: larger for touch */
  .modal-title {
    font-size: 16px !important;
  }

  /* Modal actions: full-width buttons stacked */
  .modal-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .modal-actions button,
  .modal-actions .btn-primary,
  .modal-actions .btn-cancel,
  .modal-btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }

  /* Import dialog tabs: scroll */
  [style*="min-width:400px"],
  [style*="min-width: 400px"] {
    min-width: unset !important;
  }
}

@media (max-width: 480px) {
  .modal-overlay {
    padding: 0 !important;
  }

  .modal {
    border-radius: 12px 12px 0 0 !important;
    max-height: 92vh !important;
  }
}

/* ── 7. STATUS BAR: Readable on small screens ───────────────────────────── */
@media (max-width: 768px) {
  #status-bar {
    font-size: 10px !important;
    padding: 0 6px !important;
    gap: 4px !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  #status-bar::-webkit-scrollbar { display: none; }

  /* Bottom bar with page tabs */
  #bottom-bar {
    flex-shrink: 0;
  }

  /* Page tabs: scrollable */
  #page-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  #page-tabs::-webkit-scrollbar { display: none; }

  /* Zoom slider: bigger touch area */
  #zoom-slider {
    width: 80px !important;
    height: 20px !important;
  }

  /* Status zoom buttons */
  .sb-zoom-btn {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    font-size: 16px !important;
  }
}

/* ── 8. TYPOGRAPHY: Min 13px on mobile for readability ──────────────────── */
@media (max-width: 480px) {
  /* Base font size */
  body {
    font-size: 14px;
  }

  /* Prop panel labels */
  .prop-label {
    font-size: 12px !important;
  }

  .prop-input,
  #prop-content input,
  #prop-content select,
  #prop-content textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  /* Section titles */
  .prop-section-title {
    font-size: 11px !important;
  }

  /* Menu items */
  .menu-item {
    font-size: 14px !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
  }

  /* Cat headers in sidebar */
  .cat-header {
    font-size: 12px !important;
    padding: 10px 12px !important;
    min-height: 44px !important;
  }

  /* Symbol items */
  .sym-item {
    min-height: 44px !important;
  }

  /* Button text */
  .menu-btn {
    font-size: 13px !important;
  }

  /* Toolbar labels — hide on very small screens to save space */
  .tb-label {
    display: none !important;
  }

  /* Row 3 toolbar — collapse */
  .toolbar-row-3 {
    display: none !important;
  }
}

/* ── 9. PREVENT iOS INPUT ZOOM (min 16px for inputs in forms) ───────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important; /* prevents iOS auto-zoom on focus */
  }
}

/* ── 10. MENU DROPDOWNS: Full-width on mobile ───────────────────────────── */
@media (max-width: 768px) {
  .menu-dropdown {
    position: fixed !important;
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    width: calc(100vw - 16px) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 500 !important;
    border-radius: 12px !important;
  }

  .menu-item {
    padding: 12px 16px !important;
    font-size: 14px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Submenus become inline on mobile */
  .ctx-submenu {
    position: static !important;
    display: none;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--border) !important;
    margin-top: 4px !important;
    padding: 4px 0 !important;
    background: rgba(0,0,0,0.05) !important;
  }

  .ctx-has-sub:hover .ctx-submenu,
  .ctx-has-sub.open .ctx-submenu {
    display: block !important;
  }
}

/* ── 11. SINGLE-FINGER PAN ON CANVAS ────────────────────────────────────── */
/* Applied via JS, but CSS helper class */
@media (max-width: 768px) {
  #canvas-area.touch-panning {
    cursor: grabbing !important;
  }
}

/* ── 12. TABLET (1024px) IMPROVEMENTS ───────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Sidebar: narrower on tablet */
  #symbol-sidebar {
    width: 200px !important;
  }

  /* Prop panel: narrower */
  #prop-panel {
    width: 220px !important;
    min-width: 200px !important;
  }

  /* Toolbar row 1: allow scroll if needed */
  .toolbar-row-1 {
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .toolbar-row-1::-webkit-scrollbar { display: none; }

  /* Tool buttons: minimum 40px on tablet */
  .tool-btn-lbl {
    min-width: 40px !important;
    min-height: 40px !important;
    height: 40px !important;
  }

  .menu-item {
    min-height: 36px !important;
  }
}

/* ── 13. SINGLE-FINGER PAN (JS will toggle this class) ─────────────────── */
/* touch-pan CSS class applied by JS handler */
@media (max-width: 768px) {
  body.mobile-sidebar-open {
    overflow: hidden !important;
  }
}

/* ── 14. EDITOR MODAL: max-width fix ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Fix modals that have inline min-width styles */
  .modal[style*="min-width"],
  .modal[style*="max-width"] {
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── 15. SYMBOL SIDEBAR ITEMS: Better touch targets ────────────────────── */
@media (max-width: 768px) {
  .sym-item {
    padding: 8px 10px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Sym grid: 2 columns on mobile */
  .sym-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Symbol preview larger */
  .sym-item svg {
    width: 28px !important;
    height: 28px !important;
  }
}