/* Staff portal viewport helpers — phones, tablets, and narrow windows. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

/*
 * Temporary (phone/tablet) drawer overlay is z-index 1301 and covers the full
 * viewport, including the app bar. ClipMode Always keeps the drawer itself below
 * the app bar, but without this the hamburger still sits under the overlay -- a
 * tap near it closes via the overlay rather than the button, which breaks the
 * toggle affordance and focus. 1400 puts the app bar above both.
 */
.mud-appbar {
  z-index: 1400;
}

/* Toolbars: title + actions must wrap instead of overflowing. */
.portal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.portal-toolbar > .mud-typography-h4,
.portal-toolbar > .mud-typography-h5 {
  flex: 1 1 12rem;
  min-width: 0;
}

.portal-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Wide tables/grids scroll horizontally instead of breaking the page. */
.portal-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.portal-table-scroll .mud-table,
.portal-table-scroll .mud-data-grid {
  min-width: 0;
}

/*
 * App bar title swap. The long title needs ~404px; at 768px only ~393px is free once the
 * hamburger, logo, and sign-out button are placed, so it was rendering ellipsised. At
 * 1024px it fit with zero slack -- one longer display name away from clipping again.
 * Swapping at 1280px keeps real headroom; the logo carries the branding below that.
 */
@media (max-width: 1279.95px) {
  .portal-appbar-title-full {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .portal-appbar-title-short {
    display: none !important;
  }
}

@media (max-width: 599.95px) {
  .mud-main-content {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .mud-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Keep MudBlazor stacked-table labels readable. */
  .mud-table.mud-table-small .mud-table-cell:before {
    max-width: 40%;
    white-space: normal;
  }

  .portal-alert-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .portal-alert-actions .mud-button-root {
    align-self: stretch;
  }
}

/* Sign-in card: generous padding on desktop, but not so much that the fields are
   squeezed into the middle third of a 320px phone. */
.portal-login-card {
  padding: 1.5rem;
}

@media (min-width: 600px) {
  .portal-login-card {
    padding: 2rem;
  }
}

/* Off-screen but still in the accessibility tree -- used by PortalStatusMessage's
   always-present live region. Not display:none, which would remove it entirely. */
.portal-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Avoid horizontal page scroll from dialogs / pickers on small devices. */
.mud-dialog {
  max-width: calc(100vw - 1.5rem);
}

.mud-dialog .mud-dialog-content {
  overflow-x: auto;
}

.portal-receipt-preview {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: #1E2124;
  border-radius: 6px;
}

.portal-html-preview {
  max-height: 28rem;
  overflow: auto;
  font-size: 0.95rem;
  line-height: 1.5;
}

.portal-html-preview img {
  max-width: 100%;
  height: auto;
}

.portal-richtext {
  margin-top: 1rem;
}

.portal-richtext-host .ql-toolbar.ql-snow {
  border-color: var(--mud-palette-lines-default);
  border-radius: 4px 4px 0 0;
}

.portal-richtext-host .ql-container.ql-snow {
  border-color: var(--mud-palette-lines-default);
  border-radius: 0 0 4px 4px;
  font-size: 1rem;
  min-height: 14rem;
}

.portal-richtext-host .ql-editor {
  min-height: 14rem;
}

.portal-page-preview {
  position: sticky;
  top: 5.5rem;
}

.portal-page-preview-frame {
  display: block;
  width: 100%;
  min-height: 75vh;
  height: calc(100vh - 8rem);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 4px;
  background: #fff;
}

.portal-hero-preview {
  max-width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.portal-project-thumb {
  max-height: 140px;
}

/* Blazor's circuit-failure banner is injected outside the layout, so it can't be
   styled by MudBlazor components. The layout's ErrorBoundary catches per-page
   exceptions; this only appears when the circuit itself is gone. */
#blazor-error-ui {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 2000;
  display: none;
  padding: 0.75rem 1.25rem;
  background: #FF8C26;
  color: #1E2124;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 -1px 3px rgb(0 0 0 / 0.2);
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  float: inline-end;
}