/* ═══════════════════════════════════════════════════════════════════════
   ARTTOP — Responsive Design Pro (v0.37.9.305)
   ───────────────────────────────────────────────────────────────────────
   Breakpoints:
     - Mobile     ≤ 640px
     - Tablet     641 – 1024px
     - Laptop     1025 – 1440px (default tuned for this size)
     - Desktop    ≥ 1441px
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── MOBILE (≤ 640px) ───────── */
@media (max-width: 640px) {
  :root {
    --sidebar-w: 0px;
    --header-h: 56px;
    --copyright-h: 28px;
    --radius: 8px;
    --radius-pro: 10px;
  }
  body { font-size: 14px; }

  /* Sidebar becomes a slide-in overlay on mobile (not part of grid) */
  .app-shell {
    grid-template-columns: 1fr !important;
    grid-template-areas: "header" "main" !important;
  }
  #sidebar {
    position: fixed !important;
    top: var(--header-h, 56px) !important;
    bottom: var(--copyright-h, 28px) !important;
    width: 86vw !important;
    max-width: 320px !important;
    z-index: 70 !important;
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 50px rgba(0,0,0,0.4) !important;
  }
  /* default (collapsed): pushed off-screen on the appropriate side */
  html[dir="rtl"] #sidebar { left: auto !important; right: 0 !important; transform: translateX(100%) !important; }
  html[dir="ltr"] #sidebar { right: auto !important; left: 0 !important; transform: translateX(-100%) !important; }
  /* visible state */
  body:not(.sidebar-collapsed) #sidebar { transform: translateX(0) !important; }

  /* Backdrop overlay when sidebar open */
  body:not(.sidebar-collapsed)::after {
    content: '';
    position: fixed;
    inset: var(--header-h, 56px) 0 0 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    z-index: 65;
  }

  /* Floating handle becomes a hamburger FAB on mobile */
  .sb-pro-handle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    bottom: calc(var(--copyright-h, 28px) + 12px) !important;
    top: auto !important;
    transform: none !important;
  }
  html[dir="rtl"] .sb-pro-handle { right: 12px !important; left: auto !important; }
  html[dir="ltr"] .sb-pro-handle { left: 12px !important; right: auto !important; }
  .sb-pro-handle::before { content: '☰' !important; font-size: 18px !important; }
  body:not(.sidebar-collapsed) .sb-pro-handle::before { content: '✕' !important; }

  /* Main content takes full width */
  #appMain, #mainContent, #screenContainer {
    margin: 0 !important;
    padding: 12px !important;
    max-width: 100% !important;
  }

  /* Modals become bottom-sheets on mobile */
  .modal-backdrop:not(.mwc-minimized):not(.mwc-max-backdrop) {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal:not(.mwc-maximized) {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    animation: mwcSlideUpMobile 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  @keyframes mwcSlideUpMobile { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* Modal window controls bigger touch targets */
  .modal-header .mwc-btn { width: 32px !important; height: 32px !important; font-size: 16px !important; }
  .modal-close { width: 36px !important; height: 36px !important; }

  /* Stats/KPI grids stack vertically on mobile */
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .stat-card { padding: 12px !important; }

  /* Tables horizontally scroll on mobile */
  table { font-size: 12px !important; }
  .screen-content table, .ms-screen table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Status bar: hide non-essential segments */
  #pspStatusBar { font-size: 9.5px !important; padding: 0 6px !important; gap: 6px !important; }
  #pspStatusBar .seg-hide-sm { display: none !important; }

  /* Modal minimize tray below status bar */
  #mwcTray {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(var(--copyright-h, 28px) + 56px) !important;
    max-width: calc(100vw - 16px) !important;
    overflow-x: auto !important;
  }

  /* Buttons & form controls — bigger touch targets */
  button, .btn, input, select, textarea {
    min-height: 38px;
    font-size: 14px;
  }

  /* Command palette modal full screen */
  #cmdPaletteBackdrop { padding-top: 6vh !important; }
  .cmd-modal { width: 94vw !important; max-height: 86vh !important; }

  /* Hero headers more compact */
  .screen-header { padding: 14px 12px !important; }
  .screen-header h1 { font-size: 17px !important; }

  /* Active company badge smaller */
  .acb-badge { padding: 4px 7px !important; max-width: 140px !important; }
  .acb-badge .nm .top { max-width: 80px !important; font-size: 10px !important; }
  .acb-badge .logo { width: 22px !important; height: 22px !important; }
}

/* ───────── TABLET (641 – 1024px) ───────── */
@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --sidebar-w: 220px;
    --header-h: 58px;
  }
  body { font-size: 14.5px; }

  /* Stats grid: 3 columns */
  .stats-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Modal medium size */
  .modal:not(.mwc-maximized) {
    width: 86vw !important;
    max-width: 720px !important;
  }

  /* Sidebar collapses to overlay on tablet too (not part of grid) */
  .app-shell { grid-template-columns: 1fr !important; grid-template-areas: "header" "main" !important; }
  #sidebar {
    position: fixed !important;
    top: var(--header-h, 58px) !important;
    bottom: var(--copyright-h, 28px) !important;
    width: 260px !important;
    z-index: 70 !important;
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 0 32px rgba(0,0,0,0.30) !important;
  }
  html[dir="rtl"] #sidebar { right: 0 !important; left: auto !important; }
  html[dir="ltr"] #sidebar { left: 0 !important; right: auto !important; }
  html[dir="rtl"] body.sidebar-collapsed #sidebar { transform: translateX(100%) !important; }
  html[dir="ltr"] body.sidebar-collapsed #sidebar { transform: translateX(-100%) !important; }
  body:not(.sidebar-collapsed) #sidebar { transform: translateX(0) !important; }

  body:not(.sidebar-collapsed)::after {
    content: '';
    position: fixed;
    inset: var(--header-h, 58px) 0 0 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(2px);
    z-index: 65;
  }

  #appMain, #mainContent, #screenContainer { margin: 0 !important; }

  /* Status bar abbreviated */
  #pspStatusBar { font-size: 10.5px !important; }
}

/* ───────── LAPTOP (1025 – 1440px) — DEFAULT STYLES APPLY ───────── */
@media (min-width: 1025px) and (max-width: 1440px) {
  :root {
    --sidebar-w: 260px;
  }
  body { font-size: 14px; }
}

/* ───────── DESKTOP (≥ 1441px) — More breathing room ───────── */
@media (min-width: 1441px) {
  :root {
    --sidebar-w: 300px;
  }
  body { font-size: 15px; }
  .screen-container { max-width: 1600px !important; }

  /* Premium status bar — more info */
  #pspStatusBar { font-size: 12px !important; padding: 0 22px !important; }

  /* Larger modal cap so massive screens don't dwarf modals */
  .modal-lg:not(.mwc-maximized) { max-width: 1100px !important; }
  .modal-md:not(.mwc-maximized) { max-width: 760px !important; }

  /* Active company badge larger */
  .acb-badge { padding: 8px 12px !important; }
  .acb-badge .logo { width: 32px !important; height: 32px !important; }
  .acb-badge .nm .top { font-size: 12.5px !important; max-width: 160px !important; }
}

/* ───────── ULTRA-WIDE (≥ 1921px) — Cinema/4K ───────── */
@media (min-width: 1921px) {
  :root { --sidebar-w: 320px; }
  body { font-size: 16px; }
  .screen-container { max-width: 1800px !important; }
}

/* ───────── PORTRAIT TABLETS — Special handling ───────── */
@media (orientation: portrait) and (min-width: 641px) and (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ───────── HIGH-DPI — Sharper borders ───────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .ms-card, .stat-card, .modal { border-width: 0.5px; }
}

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

/* ───────── PRINT — Hide UI chrome ───────── */
@media print {
  #sidebar, #pspStatusBar, .sb-pro-handle, #mwcTray, .mwc-bar,
  .app-header, .screen-header { display: none !important; }
  body { padding: 0 !important; background: #fff !important; }
  #appMain, #mainContent { margin: 0 !important; padding: 0 !important; }
}