/* ============================================================
   Screen-limit safety: every fixed/absolute panel clamps to
   viewport bounds so nothing ever renders outside the screen.
   ============================================================ */

/* --- Body / html: allow vertical scroll, forbid horizontal --- */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
body { overflow-y: auto; }

/* --- Footer: measure once, reuse everywhere --- */
:root {
  --footer-height: 56px;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-height);
  z-index: 50;
}

/* --- Dashboard body reserves footer space so content never slides under it --- */
.dashboard {
  padding-bottom: var(--footer-height);
  overflow-x: hidden;
}

/* --- Middle section: never taller than viewport minus footer --- */
.middle-section-wrapper {
  height: calc(100vh - var(--footer-height));
  max-height: 100vh;
}

/* --- display-area padding uses real footer height, not hardcoded 100px --- */
#display-area {
  padding: 0 15px var(--footer-height) 15px;
}

/* --- Dashboard widget layer stops above the footer --- */
#dashboardLayer {
  bottom: var(--footer-height);
}

/* --- Side slider tray: stop above footer, never wider than viewport --- */
.slider-tray {
  height: calc(100% - var(--footer-height));
  bottom: var(--footer-height);
  max-width: 90vw;
  width: min(40%, 90vw);
}
@media (max-width: 820px) {
  .slider-tray {
    width: min(82%, 90vw);
  }
}

/* --- Extension modal: clamp to viewport on all sides --- */
.modal-root {
  padding: 1rem;
  overflow: hidden;
}
#extensionModal .modal-panel {
  width: min(640px, 90vw);
  height: min(480px, 80vh);
  max-width: 90vw;
  max-height: 85vh;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
}

/* --- Generic modal panels: never wider than viewport --- */
.modal-panel {
  width: min(90%, 520px);
  max-width: 90vw;
}
.edit-modal-dialog {
  width: min(640px, 95vw);
  max-width: 95vw;
}

/* --- Notification panel: clamp to viewport --- */
.notification-panel {
  width: min(360px, calc(100vw - 30px));
  right: 15px;
  top: calc(56px + 60px);          /* header height + gap */
  max-width: calc(100vw - 30px);
}

/* --- Toast: keep inside viewport --- */
.toast {
  max-width: min(320px, calc(100vw - 30px));
  right: 15px;
  left: 15px;
  width: auto;
}

/* --- Add-widget dialog: clamp --- */
.add-widget-dialog {
  width: min(320px, 90vw);
  max-width: 90vw;
}

/* --- Theme menu: keep inside viewport, never past left edge --- */
.theme-menu {
  left: 0;
  right: auto;
  min-width: 130px;
  max-width: calc(100vw - 20px);
}

/* --- QR table modal: clamp --- */
#qrTableModal .qr-table-panel {
  width: min(100%, 95vw);
  max-width: 95vw;
  max-height: calc(100vh - 120px);
}
#qrTableModal .qr-table-wrap {
  max-height: calc(100vh - 180px);
}

/* --- QR transfer modal: clamp --- */
#qrTransferModal .modal-panel {
  width: min(100%, 90vw);
  max-width: 90vw;
  max-height: calc(100vh - 120px);
}

/* --- Messenger delete button: keep inside widget --- */
.messenger-delete-btn {
  right: 6px;
  bottom: 6px;
  max-width: calc(100% - 12px);
}

/* --- Calendar month grid: never wider than container --- */
.calendar-month-grid {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* --- Datasheet hero image: never wider than screen --- */
.datasheet-hero-image {
  max-width: min(260px, 40vw, 100%);
}
.datasheet-gallery-item {
  width: min(220px, calc(50vw - 6px));
}

/* --- Inline style migration classes: add viewport clamps --- */
.css_background_fff_border_radius_1_8525f7,
.css_background_fff_border_radius_1_f30e10,
.css_background_fff_border_radius_1_e6fed9 {
  width: min(92%, 520px);
  max-width: 92vw;
}

/* --- Partner card, reseller card: never wider than viewport --- */
.partner-card,
.reseller-card {
  max-width: 100%;
}

/* --- Tables: scroll horizontally inside their container, never break layout --- */
table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* --- Any element with a fixed pixel width > 90vw on mobile gets clamped --- */
@media (max-width: 600px) {
  .modal-panel,
  .edit-modal-dialog,
  #extensionModal .modal-panel,
  #qrTableModal .qr-table-panel,
  #qrTransferModal .modal-panel,
  .add-widget-dialog,
  .notification-panel,
  .toast,
  .theme-menu,
  .card,
  .tag-detail-card,
  .datasheet,
  .qr-card {
    max-width: 95vw;
    width: auto;
  }
  .slider-tray {
    width: 100%;
  }
  #display-area {
    padding-left: 10px;
    padding-right: 10px;
  }
  .header {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* --- Wide screens: keep content readable but let the dashboard background
       fill the full viewport instead of capping to 1400px with side gaps. --- */
@media (min-width: 1400px) {
  .middle-section {
    max-width: 1360px;
    margin: 0 auto;
  }
}