/*
  Dashboard responsiveness helpers
  - Non-invasive: improves mobile layout without rewriting every page
  - Loaded only on dashboard pages via includes/dashboard_footer.php
*/

/* Improve Tap Targets */
button, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Avoid horizontal overflow from long strings (refs, emails) */
pre, code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Images should never overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Tables: make scrollable on small screens */
@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Forms: ensure inputs don’t overflow columns */
input, select, textarea {
  max-width: 100%;
}

/* Dashboard main content: allow children to shrink properly */
.dashboard-main, main {
  min-width: 0;
}

/* Reduce perceived “blank space” under the sticky dashboard header on mobile (admin + user).
   This happens because the sticky header sits above the page flow and any top margin
   on the first card/container reads like an empty gap.
*/
@media (max-width: 1023px) {
  /* remove top margin on the first element inside dashboard main */
  .dashboard-container main > :first-child {
    margin-top: 0 !important;
  }

  /* ensure the grid wrapper doesn’t add an extra top gap */
  .dashboard-container > .grid {
    margin-top: 0 !important;
  }

  /* Admin dashboard: remove any top padding/margin on the container itself.
     Use a body class instead of :has() for broad browser support.
  */
  body.is-admin .dashboard-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Dashboard content area width (user + admin)
   Matches the screenshot look by keeping a centered, fixed-ish reading width.
*/
:root {
  /* Total width of the entire dashboard layout (sidebar + main content) */
  --dashboard-content-max: 1000px;
}

.dashboard-container {
  width: 100%;
  max-width: var(--dashboard-content-max);
}

/* Ensure dashboard pages never render full-width even if another stylesheet overrides container rules */
body {
  overflow-x: hidden;
}

.dashboard-container,
.dashboard-container * {
  box-sizing: border-box;
}

/* Force main content area to have a readable width on large screens */
@media (min-width: 1024px) {
  .dashboard-container {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ensure the dashboard grid/layout cannot overflow the container */
.dashboard-container > .grid {
  width: 100%;
}

/* Safety: prevent fixed sidebar from forcing full-viewport layout on large screens */
@media (min-width: 1024px) {
  .dashboard-container [data-dashboard-sidebar] {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Receipt specific: wrap long reference strings */
.receipt-ref, .qb-ref {
  word-break: break-word;
}