/* ==========================================================================
   MAXPort shared components (prefix: mp-). Built only from tokens (tokens.css).
   Prefer the Razor tag helpers (<page-header>, <status-badge>, <empty-state>)
   over writing this markup by hand. Catalog: /styleguide (Development).
   ========================================================================== */

/* ---- App shell ---- */
.mp-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mp-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--mp-content-max-width);
  margin-inline: auto;
  padding-block: var(--mp-space-4) var(--mp-space-6);
  /* Gutter grows with the screen; safe-area insets clear phone notches in landscape. */
  padding-inline: max(var(--mp-page-gutter), env(safe-area-inset-left)) max(var(--mp-page-gutter), env(safe-area-inset-right));
  min-width: 0; /* lets wide children (tables) scroll instead of stretching the page */
}

.mp-navbar {
  background-color: var(--mp-color-surface);
  border-bottom: 1px solid var(--mp-color-border);
  box-shadow: var(--mp-shadow-sm);
}
.mp-navbar .navbar-brand {
  font-weight: var(--mp-font-weight-bold);
  color: var(--mp-color-text);
}
.mp-navbar .nav-link { color: var(--mp-color-text-muted); font-weight: var(--mp-font-weight-medium); }
.mp-navbar .nav-link:hover { color: var(--mp-color-text); }
.mp-navbar .nav-link.active,
.mp-navbar .nav-link[aria-current="page"] { color: var(--mp-color-primary); }

.mp-navbar > .container-fluid {
  padding-inline: max(var(--mp-page-gutter), env(safe-area-inset-left)) max(var(--mp-page-gutter), env(safe-area-inset-right));
}

.mp-user-menu__name {
  font-weight: var(--mp-font-weight-medium);
  color: var(--mp-color-text);
  overflow-wrap: anywhere;
}

/* Profile menu (top right): avatar with initials + name opens a dropdown (My profile, Change password, theme, Sign out). */
.mp-user-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  min-height: var(--mp-touch-target);
  max-width: 16rem;
  padding: var(--mp-space-1) var(--mp-space-2);
  border: 0;
  border-radius: var(--mp-radius-pill);
  background: transparent;
  color: var(--mp-color-text);
}
.mp-user-menu__toggle:hover { background-color: var(--mp-color-surface-muted); }
.mp-user-menu__toggle .mp-user-menu__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.mp-user-menu__panel { min-width: 16rem; max-width: min(20rem, calc(100vw - 2 * var(--mp-page-gutter))); }
.mp-user-menu__who { padding: var(--mp-space-2) var(--mp-space-3); }
.mp-user-menu__who strong, .mp-user-menu__who span { display: block; overflow-wrap: anywhere; }
.mp-user-menu__who span { font-size: var(--mp-font-size-sm); color: var(--mp-color-text-muted); }
.mp-user-menu__theme { padding: var(--mp-space-2) var(--mp-space-3); }
.mp-user-menu__panel .dropdown-item { display: flex; align-items: center; gap: var(--mp-space-2); min-height: var(--mp-touch-target); }

.mp-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--mp-color-primary-subtle);
  color: var(--mp-color-link);
  font-size: var(--mp-font-size-sm);
  font-weight: var(--mp-font-weight-semibold);
  line-height: 1;
}

.mp-break-anywhere { overflow-wrap: anywhere; }

/* Team form: a box per Guest site (or "all sites") with its rights as checkboxes that wrap into columns (D20). */
.mp-site-rights {
  min-width: 0;
  padding: var(--mp-space-3);
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius);
}
.mp-site-rights__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--mp-space-1) var(--mp-space-3);
  margin-top: var(--mp-space-2);
}

/* Collapsed menu (phones, iPad portrait): separate the theme switch and user menu from the links. */
@media (max-width: 991.98px) {
  .mp-theme-switch { margin-block: var(--mp-space-2) var(--mp-space-3); }
  .mp-user-menu { margin-block: var(--mp-space-2); }
}

.mp-footer {
  flex-shrink: 0;
  padding: var(--mp-space-4);
  padding-bottom: max(var(--mp-space-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--mp-color-border);
  color: var(--mp-color-text-muted);
  font-size: var(--mp-font-size-sm);
  text-align: center;
}

/* Skip link: hidden until focused by keyboard (WCAG 2.4.1). */
.mp-skip-link {
  position: absolute;
  left: var(--mp-space-4);
  top: -100px;
  z-index: 1080;
  padding: var(--mp-space-2) var(--mp-space-4);
  background: var(--mp-color-primary);
  color: var(--mp-color-on-primary);
  border-radius: var(--mp-radius);
}
.mp-skip-link:focus { top: var(--mp-space-2); color: var(--mp-color-on-primary); }

/* ---- Page header: title, optional subtitle, optional actions ---- */
.mp-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mp-space-4);
  margin-bottom: var(--mp-space-5);
}
.mp-page-header > :first-child { min-width: 0; }
.mp-page-header__title {
  margin: 0;
  /* Fluid: 24px on phones → 30px on laptops. */
  font-size: clamp(var(--mp-font-size-2xl), 1.2rem + 1.5vw, var(--mp-font-size-3xl));
  font-weight: var(--mp-font-weight-bold);
  overflow-wrap: anywhere;
}
.mp-page-header__subtitle {
  margin: var(--mp-space-1) 0 0;
  color: var(--mp-color-text-muted);
}
.mp-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-space-2);
}
/* Phones: actions go full width under the title, easy to tap with a thumb. */
@media (max-width: 575.98px) {
  .mp-page-header { align-items: stretch; }
  .mp-page-header > * { flex: 1 1 100%; }
  .mp-page-header__actions > .btn { flex: 1 1 auto; white-space: nowrap; } /* share the row; wrap to a new line instead of squeezing labels */
}

/* ---- Status badge: tone = success | warning | danger | info | neutral ---- */
.mp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-1);
  padding: 0.125rem var(--mp-space-2);
  border-radius: var(--mp-radius-pill);
  font-size: var(--mp-font-size-xs);
  font-weight: var(--mp-font-weight-semibold);
  line-height: 1.5;
  color: var(--mp-color-text);
  background-color: var(--mp-color-surface-muted);
  border: 1px solid var(--mp-color-border);
}
.mp-badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--mp-color-text-muted);
}
.mp-badge--success { background-color: var(--mp-color-success-subtle); border-color: transparent; }
.mp-badge--success::before { background-color: var(--mp-color-success); }
.mp-badge--warning { background-color: var(--mp-color-warning-subtle); border-color: transparent; }
.mp-badge--warning::before { background-color: var(--mp-color-warning); }
.mp-badge--danger { background-color: var(--mp-color-danger-subtle); border-color: transparent; }
.mp-badge--danger::before { background-color: var(--mp-color-danger); }
.mp-badge--info { background-color: var(--mp-color-info-subtle); border-color: transparent; }
.mp-badge--info::before { background-color: var(--mp-color-info); }

/* ---- Empty state: shown when a list has no items ---- */
.mp-empty-state {
  padding: var(--mp-space-7) var(--mp-space-5);
  text-align: center;
  background-color: var(--mp-color-surface);
  border: 1px dashed var(--mp-color-border-strong);
  border-radius: var(--mp-radius-lg);
}
.mp-empty-state__title {
  margin: 0 0 var(--mp-space-2);
  font-size: var(--mp-font-size-lg);
  font-weight: var(--mp-font-weight-semibold);
}
.mp-empty-state__text {
  margin: 0 auto var(--mp-space-4);
  max-width: 40ch;
  color: var(--mp-color-text-muted);
}

/* ---- Icons (<mp-icon>) ---- */
.mp-icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  vertical-align: -0.25em;
}

/* Square icon-only button (e.g. the ☰ menu button). Always has an aria-label. */
.mp-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mp-touch-target);
  height: var(--mp-touch-target);
  padding: 0;
  color: var(--mp-color-text);
  border-radius: var(--mp-radius);
}
.mp-icon-button:hover { background-color: var(--mp-color-surface-muted); }

/* ---- Signed-in app shell: left sidebar + main panel ----
   ≥ 992px: sidebar is a fixed column. < 992px: Bootstrap .offcanvas-lg turns it into a slide-out menu (☰). */
.mp-app {
  display: flex;
  flex: 1 0 auto;
  min-width: 0;
}

.mp-main--app {
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
}

.mp-sidebar {
  --bs-offcanvas-width: min(18rem, 85vw);
  --bs-offcanvas-bg: var(--mp-color-surface);
}
.mp-sidebar__body {
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-4);
}
@media (min-width: 992px) {
  .mp-sidebar {
    flex: 0 0 var(--mp-sidebar-width);
    width: var(--mp-sidebar-width);
    padding: var(--mp-space-4) var(--mp-space-3);
    border-right: 1px solid var(--mp-color-border);
    background-color: var(--mp-color-surface);
  }
  .mp-sidebar__body {
    position: sticky;
    top: var(--mp-space-4);
  }
}

.mp-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: var(--mp-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mp-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  min-height: 2.5rem;
  padding: var(--mp-space-2) var(--mp-space-3);
  border-radius: var(--mp-radius-pill);
  color: var(--mp-color-text);
  font-weight: var(--mp-font-weight-medium);
  text-decoration: none;
  transition: background-color var(--mp-transition);
}
.mp-sidebar__link:hover { background-color: var(--mp-color-surface-muted); color: var(--mp-color-text); }
.mp-sidebar__link.active,
.mp-sidebar__link[aria-current="page"] {
  background-color: var(--mp-color-primary-subtle);
  color: var(--mp-color-link);
  font-weight: var(--mp-font-weight-semibold);
}
@media (pointer: coarse) {
  .mp-sidebar__link { min-height: var(--mp-touch-target); }
}

.mp-sidebar__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mp-space-3);
  padding-top: var(--mp-space-4);
  border-top: 1px solid var(--mp-color-border);
}
.mp-sidebar__small-link { font-size: var(--mp-font-size-sm); }

/* ---- Storage meter (sidebar + dashboard), like DocHub's "X of Y used" ---- */
.mp-storage { width: 100%; padding: var(--mp-space-3) var(--mp-space-2) 0; font-size: var(--mp-font-size-sm); }
/* In the sidebar: a separator line above, like the one above the footer links. */
.mp-sidebar__body > .mp-storage { padding-top: var(--mp-space-4); border-top: 1px solid var(--mp-color-border); }
.mp-storage__label { display: flex; align-items: center; gap: var(--mp-space-2); margin-bottom: var(--mp-space-1); font-weight: var(--mp-font-weight-semibold); }
.mp-storage__text strong { font-weight: var(--mp-font-weight-medium); }
.mp-storage__scope { color: var(--mp-color-text-muted); font-size: var(--mp-font-size-xs); }
/* The bar (native <progress>, like the inline meter) turns amber from 75 % and red from 90 % of the limit. */
.mp-storage__bar {
  appearance: none;
  display: block;
  width: 100%;
  height: 0.4rem;
  margin-bottom: var(--mp-space-2);
  border: 0;
  border-radius: var(--mp-radius-pill);
  background-color: var(--mp-color-surface-muted);
  overflow: hidden;
}
.mp-storage__bar::-webkit-progress-bar { background-color: var(--mp-color-surface-muted); }
.mp-storage__bar::-webkit-progress-value,
.mp-storage-inline__bar::-webkit-progress-value { border-radius: var(--mp-radius-pill); background-color: var(--mp-color-primary); }
.mp-storage__bar::-moz-progress-bar,
.mp-storage-inline__bar::-moz-progress-bar { border-radius: var(--mp-radius-pill); background-color: var(--mp-color-primary); }
.mp-storage__bar--warning::-webkit-progress-value, .mp-storage-inline__bar--warning::-webkit-progress-value { background-color: var(--mp-color-warning); }
.mp-storage__bar--warning::-moz-progress-bar, .mp-storage-inline__bar--warning::-moz-progress-bar { background-color: var(--mp-color-warning); }
.mp-storage__bar--danger::-webkit-progress-value, .mp-storage-inline__bar--danger::-webkit-progress-value { background-color: var(--mp-color-danger); }
.mp-storage__bar--danger::-moz-progress-bar, .mp-storage-inline__bar--danger::-moz-progress-bar { background-color: var(--mp-color-danger); }
.mp-storage--large .mp-storage__bar { height: 0.6rem; }
.mp-storage--large { padding: 0; font-size: var(--mp-font-size-base); }
.mp-storage--large .mp-storage__label { font-size: var(--mp-font-size-lg); margin-bottom: var(--mp-space-2); }
.mp-storage--large .mp-storage__text { font-size: var(--mp-font-size-xl); }
.mp-storage--large .mp-storage__scope { font-size: var(--mp-font-size-sm); }

/* Small inline meter (per Guest site in a table, like DocHub's): text over a thin bar. A native <progress>, so no inline width style. */
.mp-storage-inline { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--mp-space-1); min-width: 8rem; }
.mp-storage-inline__text { font-size: var(--mp-font-size-xs); color: var(--mp-color-text-muted); white-space: nowrap; }
.mp-storage-inline__bar {
  appearance: none;
  width: 100%;
  height: 0.3rem;
  border: 0;
  border-radius: var(--mp-radius-pill);
  background-color: var(--mp-color-surface-muted);
  color: var(--mp-color-primary);
  overflow: hidden;
}
.mp-storage-inline__bar::-webkit-progress-bar { background-color: var(--mp-color-surface-muted); }
.mp-storage-inline__bar::-webkit-progress-value { background-color: var(--mp-color-primary); border-radius: var(--mp-radius-pill); }
.mp-storage-inline__bar::-moz-progress-bar { background-color: var(--mp-color-primary); border-radius: var(--mp-radius-pill); }

/* ---- Row actions (small buttons at the end of a table row) ---- */
.mp-row-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--mp-space-2); }

/* Vertical list of checkboxes (e.g. access rights on a form) */
.mp-check-list { display: grid; gap: var(--mp-space-2); }

/* One-time secret (temporary password): monospace, easy to read aloud */
.mp-secret { font-family: var(--bs-font-monospace); letter-spacing: 0.08em; }

/* Narrow input for short values (numbers with a unit) */
.mp-input-narrow { max-width: 14rem; }

/* ---- Toolbar row above a list (search box, switcher, counts) ---- */
.mp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mp-space-3);
  margin-bottom: var(--mp-space-3);
}
.mp-toolbar__search { flex: 1 1 16rem; max-width: 24rem; }

/* ---- Section tabs (e.g. a Guest site's invoices: Files / New invoices / Payment proposals) ----
   Bootstrap .nav-underline inside nav.mp-tabs; wraps on phones; counts as <status-badge>. */
.mp-tabs {
  margin-bottom: var(--mp-space-4);
  border-bottom: 1px solid var(--mp-color-border);
}
.mp-tabs .nav {
  --bs-nav-underline-gap: var(--mp-space-5);
  --bs-nav-underline-link-active-color: var(--mp-color-text);
  --bs-nav-link-color: var(--mp-color-text-muted);
  --bs-nav-link-hover-color: var(--mp-color-text);
  flex-wrap: wrap;
  row-gap: 0;
}
.mp-tabs .nav-link { display: inline-flex; align-items: center; gap: var(--mp-space-2); }
.mp-tabs .nav-link.active { border-bottom-color: var(--mp-color-primary); }
@media (pointer: coarse) { .mp-tabs .nav-link { min-height: var(--mp-touch-target); } }

/* ---- Breadcrumb (folder path) ---- */
.mp-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mp-space-1) var(--mp-space-2);
  margin: 0 0 var(--mp-space-2);
  padding: 0;
  list-style: none;
  font-size: var(--mp-font-size-sm);
  color: var(--mp-color-text-muted);
}
.mp-breadcrumb li { display: inline-flex; align-items: center; gap: var(--mp-space-2); min-width: 0; overflow-wrap: anywhere; }
.mp-breadcrumb li + li::before { content: "›"; color: var(--mp-color-text-muted); }
.mp-breadcrumb a { color: var(--mp-color-text-muted); text-decoration: none; }
.mp-breadcrumb a:hover { color: var(--mp-color-link); text-decoration: underline; }
.mp-breadcrumb [aria-current="page"] { color: var(--mp-color-text); font-weight: var(--mp-font-weight-medium); }

/* ---- File list (folders first, then files; like Google Drive / OneDrive list view). Invoices: Views/Invoices/Browse.cshtml ---- */
.mp-file-list__summary {
  margin: 0 0 var(--mp-space-2);
  font-size: var(--mp-font-size-sm);
  color: var(--mp-color-text-muted);
}
.mp-file-list td:first-child { min-width: 0; }
.mp-file-list__name {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-3);
  min-height: 2rem;
  color: var(--mp-color-text);
  font-weight: var(--mp-font-weight-medium);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.mp-file-list__name:hover { color: var(--mp-color-link); text-decoration: underline; }
/* Download icon next to a file that opens in the browser (D38). */
.mp-file-list__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  margin-left: var(--mp-space-1);
  border-radius: var(--mp-radius-sm);
  color: var(--mp-color-text-muted);
  vertical-align: middle;
}
.mp-file-list__download:hover { color: var(--mp-color-link); background-color: var(--mp-color-surface-muted); }
@media (pointer: coarse) {
  .mp-file-list__download { min-width: var(--mp-touch-target); min-height: var(--mp-touch-target); }
}
.mp-file-list__meta {
  margin-top: var(--mp-space-1);
  padding-left: calc(1.25em + var(--mp-space-3));
  font-size: var(--mp-font-size-xs);
  color: var(--mp-color-text-muted);
}
@media (pointer: coarse) {
  .mp-file-list__name { min-height: var(--mp-touch-target); }
}

.mp-file-icon { width: 1.5em; height: 1.5em; }
.mp-file-icon--folder { color: var(--mp-color-folder); }
.mp-file-icon--pdf { color: var(--mp-color-file-pdf); }
.mp-file-icon--document { color: var(--mp-color-file-document); }
.mp-file-icon--spreadsheet { color: var(--mp-color-file-spreadsheet); }
.mp-file-icon--presentation { color: var(--mp-color-file-presentation); }
.mp-file-icon--image { color: var(--mp-color-file-image); }
.mp-file-icon--archive,
.mp-file-icon--other { color: var(--mp-color-file-other); }

/* ---- Multi-select in a file list + selection bar (js/selection.js), e.g. "Mark as posted" ---- */
.mp-file-list__select { width: 2.75rem; padding-right: 0 !important; }
.mp-file-list__select .form-check-input { width: 1.15em; height: 1.15em; margin: 0; cursor: pointer; }
@media (pointer: coarse) {
  .mp-file-list__select { width: var(--mp-touch-target); }
  .mp-file-list__select .form-check-input { width: 1.4em; height: 1.4em; }
}
.mp-file-list__row--selected > td { --bs-table-bg: var(--mp-color-primary-subtle); --bs-table-hover-bg: var(--mp-color-primary-subtle); }

.mp-selection-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-2) var(--mp-space-3);
  margin-bottom: var(--mp-space-3);
  padding: var(--mp-space-2) var(--mp-space-3);
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius);
  background-color: var(--mp-color-surface);
}
.mp-selection-bar__count { font-size: var(--mp-font-size-sm); color: var(--mp-color-text-muted); }

/* List of the items an action will change, on a confirmation page */
.mp-confirm-list {
  max-height: 20rem;
  overflow-y: auto;
  margin: 0 0 var(--mp-space-4);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mp-color-border);
}
.mp-confirm-list li {
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
  padding: var(--mp-space-2) 0;
  border-bottom: 1px solid var(--mp-color-border);
}
.mp-confirm-list__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* ---- Drag-and-drop upload area (js/upload.js) ---- */
.mp-dropzone { position: relative; min-height: 12rem; }
.mp-dropzone__overlay {
  position: absolute;
  inset: calc(-1 * var(--mp-space-2));
  z-index: 5;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--mp-space-7);
  border: 2px dashed var(--mp-color-primary);
  border-radius: var(--mp-radius-lg);
  background-color: color-mix(in srgb, var(--mp-color-primary-subtle) 85%, transparent);
  pointer-events: none; /* keep drag events on the zone itself */
}
.mp-dropzone--active .mp-dropzone__overlay { display: flex; }
.mp-dropzone__message {
  position: sticky;
  top: var(--mp-space-7);
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  padding: var(--mp-space-3) var(--mp-space-5);
  border-radius: var(--mp-radius-pill);
  background-color: var(--mp-color-primary);
  color: var(--mp-color-on-primary);
  font-weight: var(--mp-font-weight-semibold);
  box-shadow: var(--mp-shadow-lg);
}
/* Drag and drop needs a mouse / trackpad: hide the hint on touch devices (they use the Upload button). */
@media (pointer: coarse) { .mp-drop-hint { display: none; } }

/* ---- Upload progress panel (like Google Drive's "Uploading N items") ---- */
.mp-upload-panel {
  position: fixed;
  right: max(var(--mp-space-4), env(safe-area-inset-right));
  bottom: max(var(--mp-space-4), env(safe-area-inset-bottom));
  z-index: 1060;
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100vw - 2 * var(--mp-space-4)));
  max-height: min(60vh, 28rem);
  background-color: var(--mp-color-surface);
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-lg);
}
.mp-upload-panel[hidden] { display: none; }
@media (max-width: 575.98px) {
  .mp-upload-panel { left: var(--mp-space-2); right: var(--mp-space-2); width: auto; bottom: max(var(--mp-space-2), env(safe-area-inset-bottom)); }
}
.mp-upload-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-2);
  padding: var(--mp-space-2) var(--mp-space-2) var(--mp-space-2) var(--mp-space-4);
  border-bottom: 1px solid var(--mp-color-border);
}
.mp-upload-panel__title { margin: 0; font-size: var(--mp-font-size-base); font-weight: var(--mp-font-weight-semibold); min-height: 2.5rem; display: flex; align-items: center; }
.mp-upload-panel__list { margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.mp-upload-panel__footer { padding: var(--mp-space-3) var(--mp-space-4); border-top: 1px solid var(--mp-color-border); }
.mp-upload-panel__footer[hidden] { display: none; }

.mp-upload-item { padding: var(--mp-space-3) var(--mp-space-4); border-bottom: 1px solid var(--mp-color-border); }
.mp-upload-item:last-child { border-bottom: 0; }
.mp-upload-item__row { display: flex; justify-content: space-between; gap: var(--mp-space-3); font-size: var(--mp-font-size-sm); }
.mp-upload-item__name { min-width: 0; overflow-wrap: anywhere; font-weight: var(--mp-font-weight-medium); }
.mp-upload-item__state { flex-shrink: 0; color: var(--mp-color-text-muted); }
.mp-upload-item__progress { --bs-progress-height: 0.35rem; --bs-progress-bar-bg: var(--mp-color-primary); --bs-progress-bg: var(--mp-color-surface-muted); margin-top: var(--mp-space-2); }
.mp-upload-item__detail { margin-top: var(--mp-space-1); font-size: var(--mp-font-size-xs); color: var(--mp-color-text-muted); }
.mp-upload-item__detail:empty { display: none; }
.mp-upload-item--done .mp-upload-item__state { color: var(--mp-color-success); font-weight: var(--mp-font-weight-semibold); }
.mp-upload-item--done .progress-bar { background-color: var(--mp-color-success); }
.mp-upload-item--failed .mp-upload-item__state { color: var(--mp-color-danger); font-weight: var(--mp-font-weight-semibold); }
.mp-upload-item--failed .progress { display: none; }
.mp-upload-item--failed .mp-upload-item__detail { color: var(--mp-color-danger); }

/* ---- Auth pages (sign in, etc.): one centered, narrow card ---- */
.mp-auth {
  display: flex;
  justify-content: center;
  padding-block: var(--mp-space-4);
}
.mp-auth__card { width: 100%; max-width: 26rem; }  /* ~416px: full width on phones, centered on tablets/laptops */
.mp-auth__card--wide { max-width: 40rem; }          /* confirmation pages that list several items */
.mp-auth__card > .card-body { padding: var(--mp-space-5); }
.mp-auth .mp-page-header { margin-bottom: var(--mp-space-4); }
@media (min-width: 768px) {
  .mp-auth { padding-block: var(--mp-space-7); }
  .mp-auth__card > .card-body { padding: var(--mp-space-6); }
}

/* ---- Responsive table: stacks rows as cards on phones ----
   Usage: <table class="table mp-table-stack">, and give every <td> a data-label="Column name".
   ≥ 768px it's a normal table; < 768px each row becomes a card with "label: value" lines. */
@media (max-width: 767.98px) {
  .mp-table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .mp-table-stack,
  .mp-table-stack tbody,
  .mp-table-stack tr,
  .mp-table-stack td { display: block; width: 100%; }
  .mp-table-stack tr {
    padding: var(--mp-space-2) 0;
    border-bottom: 1px solid var(--mp-color-border);
  }
  .mp-table-stack tr:last-child { border-bottom: 0; }
  .mp-table-stack td {
    display: flex;
    justify-content: space-between;
    gap: var(--mp-space-3);
    padding: var(--mp-space-1) var(--mp-space-3);
    border: 0;
    text-align: end;
    overflow-wrap: anywhere;
  }
  .mp-table-stack td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-weight: var(--mp-font-weight-semibold);
    color: var(--mp-color-text-muted);
    text-align: start;
  }
  /* First cell (usually the name) reads as the card title. */
  .mp-table-stack td:first-child { font-weight: var(--mp-font-weight-semibold); text-align: start; }
  .mp-table-stack td:first-child::before { content: none; }
}

/* ---- Global responsive safeguards ---- */
img, svg, video, canvas { max-width: 100%; height: auto; }
.mp-main :where(p, li, td, dd, h1, h2, h3) { overflow-wrap: break-word; } /* long file names / emails never widen the page */

/* Touch devices (phones, iPad, tablets): comfortable tap targets. */
@media (pointer: coarse) {
  .btn,
  .form-control,
  .form-select,
  .mp-navbar .nav-link,
  .navbar-toggler { min-height: var(--mp-touch-target); }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mp-space-2); }
  .form-check-input { width: 1.25em; height: 1.25em; }
}

/* ---- Fluid page gutter ---- */
@media (min-width: 576px) { :root { --mp-page-gutter: var(--mp-space-4); } }
@media (min-width: 992px) { :root { --mp-page-gutter: var(--mp-space-5); } }

/* ---- Style guide page helpers ---- */
.mp-swatch {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  font-size: var(--mp-font-size-sm);
  min-width: 0;
  overflow-wrap: anywhere;
}
.mp-swatch__chip {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--mp-radius);
  border: 1px solid var(--mp-color-border);
}

/* Authenticator app setup and sign-in code (platform admins, D44) */
.mp-steps { padding-left: var(--mp-space-5); margin-bottom: var(--mp-space-4); }
.mp-steps > li { margin-bottom: var(--mp-space-3); }
.mp-qr {
  display: block;
  margin: var(--mp-space-3) 0;
  padding: var(--mp-space-2);
  max-width: 100%;
  height: auto;
  background: var(--mp-color-qr-background);
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius);
}
.mp-code-input { font-family: var(--mp-font-mono); font-size: var(--mp-font-size-lg); letter-spacing: 0.2em; }

/* Dashboard Team card (D47): avatar, name, role badge per person */
.mp-team-list { list-style: none; margin: 0; padding: 0; }
.mp-team-list__item { display: flex; align-items: center; gap: var(--mp-space-2); padding: var(--mp-space-1) 0; }
.mp-team-list__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* Organization branding top left (D51): logo 32px high, name next to it; long names shorten with an ellipsis */
.mp-navbar > .container-fluid { flex-wrap: nowrap; }  /* brand and profile menu stay on one line, the brand gives way */
.mp-user-menu { flex: none; }
.mp-user-menu .btn { white-space: nowrap; }
.mp-brand { display: inline-flex; align-items: center; gap: var(--mp-space-2); min-width: 0; flex: 0 1 auto; overflow: hidden; }
.mp-brand__logo { display: block; flex: none; height: 2rem; width: auto; max-width: 10rem; object-fit: contain; }
.mp-brand__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
@media (max-width: 575.98px) {
  .mp-brand__logo { max-width: 6rem; }
  .mp-brand__name { max-width: 8rem; }
}
.mp-brand-preview { display: flex; width: fit-content; padding: var(--mp-space-2); border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius); background: var(--mp-color-surface); }

/* A titled section inside a card, below its main content (Dashboard: Guest sites in the Organization card, D53) */
.mp-card-section { margin-top: var(--mp-space-4); padding-top: var(--mp-space-3); border-top: 1px solid var(--mp-color-border); }

/* Guest sites listed in a card (D53): icon, name (link), Guests, New invoices badge */
.mp-site-list { list-style: none; margin: 0; padding: 0; }
.mp-site-list__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-1) var(--mp-space-2); padding: var(--mp-space-1) 0; }
.mp-site-list__icon { color: var(--mp-color-text-muted); }
.mp-site-list__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: var(--mp-font-weight-medium); }