/* =============================================
   Malla_SV — Responsive Design
   ============================================= */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .header-center { display: none; }

  #panel-left {
    position: absolute; top: 0; left: 0; height: 100%;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
    z-index: 80;
  }
  #panel-left.show { transform: translateX(0); }

  #panel-right {
    position: absolute; top: 0; right: 0; height: 100%;
    transform: translateX(100%);
    box-shadow: var(--shadow-lg);
    z-index: 80;
  }
  #panel-right.show { transform: translateX(0); }

  #mobile-left-toggle, #mobile-right-toggle { display: flex; }

  /* Dimmer overlay when panel is open */
  .panel-dimmer {
    display: none;
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 70;
  }
  .panel-dimmer.active { display: block; }
}

/* ── Mobile (≤640px) ── */
@media (max-width: 640px) {
  #panel-left, #panel-right { width: 100%; min-width: unset; }

  .logo-sub { display: none; }
  .header-logo .logo-text { font-size: 16px; }

  .toolbar-btn { width: 30px; height: 30px; font-size: 13px; }
  .toolbar-label { display: none; }
  #toolbar { padding: 0 4px; gap: 1px; }

  .modal-box { min-width: unset; max-width: 95vw; }

  #status-bar .status-item:not(:first-child):not(.status-tool-item) { display: none; }
}