/* Shared responsive guardrails for every dashboard and public portal page. */
html,
body {
  max-width: 100%;
}

body {
  overflow-wrap: anywhere;
}

img,
video,
canvas {
  max-width: 100%;
}

.main,
.content,
.wrap,
.panel,
.section,
.topbar,
.topbar-right,
.topbar-actions,
.form-wrap,
.modal,
.modal-body,
.drawer,
.table-wrap {
  min-width: 0;
  max-width: 100%;
}

.table-wrap,
.exam-table-wrap,
.cert-table-wrap,
.pu-table-wrap,
#view-table,
#infra-view-table,
#lab-view-table {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

@media (max-width: 768px) {
  body.mobile-nav-open {
    overflow: hidden;
  }

  /* Mobile navigation is always a full off-canvas drawer, regardless of the
     user's persisted desktop collapsed-sidebar preference. */
  html.sb-pre-collapse .sidebar,
  .sidebar,
  .sidebar.collapsed {
    width: min(86vw, 300px) !important;
    max-width: 300px;
    overflow-x: visible !important;
    transform: translateX(-100%);
  }

  html.sb-pre-collapse .sidebar.open,
  .sidebar.open,
  .sidebar.collapsed.open {
    transform: translateX(0);
  }

  body:not(.roster-viewer-page) .sidebar.collapsed .sidebar-logo {
    height: auto;
    min-height: 72px;
    padding: 20px 20px 16px;
    justify-content: center;
    border-bottom: 1px solid var(--nav-border, var(--border));
  }

  body:not(.roster-viewer-page) .sidebar.collapsed .sidebar-logo > :not(.sb-toggle),
  body:not(.roster-viewer-page) .sidebar.collapsed .brand-img,
  body:not(.roster-viewer-page) .sidebar.collapsed .brand-sub {
    display: block !important;
  }

  body:not(.roster-viewer-page) .sidebar.collapsed .logo-sub-wrap {
    display: flex !important;
  }

  body:not(.roster-viewer-page) .sidebar.collapsed .nav-group-label {
    display: block;
    color: var(--muted);
    pointer-events: auto;
  }

  body:not(.roster-viewer-page) .sidebar.collapsed .nav-group-label::after {
    opacity: 0;
  }

  body:not(.roster-viewer-page) .sidebar.collapsed .nav-label {
    display: block;
    max-width: none;
    opacity: 1;
    pointer-events: auto;
  }

  body:not(.roster-viewer-page) .sidebar.collapsed .nav-item {
    gap: 9px;
    justify-content: flex-start;
    padding-left: 10px;
    padding-right: 10px;
  }

  body:not(.roster-viewer-page) .sidebar.collapsed .user-card {
    justify-content: flex-start;
    padding: 8px 10px;
    background: var(--nav-bg2, var(--surface2));
    gap: 9px;
  }

  body:not(.roster-viewer-page) .sidebar.collapsed .user-name,
  body:not(.roster-viewer-page) .sidebar.collapsed .user-role {
    display: block;
  }

  body:not(.roster-viewer-page) .sidebar.collapsed .sidebar-actions {
    display: flex;
  }

  body:not(.roster-viewer-page) .sidebar .sb-toggle,
  body:not(.roster-viewer-page) .sidebar.collapsed .sb-toggle {
    display: grid;
    place-items: center;
    left: auto;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    padding: 0;
  }

  body:not(.roster-viewer-page) .sidebar .sb-toggle .sb-icon-wrap,
  body:not(.roster-viewer-page) .sidebar .sb-toggle svg {
    display: none !important;
  }

  body:not(.roster-viewer-page) .sidebar .sb-toggle::before {
    content: '\00d7';
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
  }

  /* The persisted desktop sidebar state must never reserve 54px on a phone. */
  html.sb-pre-collapse .main,
  body.sb-collapsed .main,
  .main.collapsed,
  .main {
    width: 100% !important;
    max-width: 100% !important;
  }

  .content {
    overflow-x: hidden;
  }

  html.sb-pre-collapse .main,
  body.sb-collapsed .main,
  .main.collapsed {
    margin-left: 0 !important;
  }

  .topbar,
  body.sb-collapsed .topbar {
    min-height: 56px;
    height: auto;
    padding: 10px 16px;
    gap: 8px;
  }

  .topbar-right,
  .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .dash-tabs,
  .tab-bar,
  .billing-tabs,
  .review-tabs,
  .request-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .dash-tab-btn,
  .tab-btn,
  .billing-tab,
  .review-tab,
  .request-tab {
    flex: 0 0 auto;
  }

  .modal-backdrop,
  .cm-dialog {
    padding: 10px;
  }

  .modal {
    max-height: calc(100dvh - 20px);
  }

  .modal-body {
    max-height: calc(100dvh - 150px);
  }

  .modal-footer {
    flex-wrap: wrap;
  }

  .toast-stack {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
  }

  .toast {
    width: 100%;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  select,
  textarea {
    max-width: 100%;
    font-size: 16px;
  }

  button,
  .btn,
  .top-link {
    touch-action: manipulation;
  }

  .section-title {
    min-width: 0;
    flex-wrap: wrap;
  }

  .bulk-toolbar.visible {
    width: 100%;
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    padding: 8px 0 2px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .bulk-toolbar .bulk-divider {
    display: none;
  }

  .bulk-toolbar .btn-bulk {
    min-height: 38px;
  }

  .class-card-top > div:first-child {
    min-width: 0;
  }

  .class-card-top > .class-pill {
    flex: 0 0 auto;
    min-width: 40px;
    justify-content: center;
    white-space: nowrap;
  }

  .class-card-counts .class-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* The PowerUser desktop table becomes readable, touch-friendly cards. */
  .pu-table-wrap {
    max-height: none;
    overflow: visible;
    border: 0;
    padding: 0 12px 12px;
    background: var(--surface2);
  }

  .pu-table {
    display: block;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
  }

  .pu-table thead {
    display: none;
  }

  .pu-table tbody {
    display: grid;
    gap: 12px;
  }

  .pu-table .pu-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: start;
    padding: 14px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    overflow: visible;
  }

  .pu-table .pu-row:hover td,
  .pu-table .pu-row.selected td {
    background: transparent !important;
  }

  .pu-table .pu-row.selected {
    background: var(--blue-light);
  }

  .pu-table .pu-row > td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow-wrap: normal;
    word-break: normal;
  }

  .pu-table .pu-row > td:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-top: 3px;
  }

  .pu-table .pu-row > td:nth-child(1) input {
    width: 22px;
    height: 22px;
  }

  .pu-table .pu-row > td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    padding-right: 8px;
  }

  .pu-table .pu-row > td:nth-child(2) .td-name {
    font-size: .94rem;
    overflow-wrap: anywhere;
  }

  .pu-table .pu-row > td:nth-child(2) .td-id {
    margin-top: 3px;
    white-space: normal;
  }

  .pu-table .pu-row > td:nth-child(13) {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .pu-table .pu-row > td:nth-child(3) {
    grid-column: 2 / -1;
    grid-row: 2;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  .pu-table .pu-progress-cell,
  .pu-table .pu-member-cell {
    min-width: 0;
    max-width: none;
  }

  .pu-table .pu-progress-track {
    width: 100%;
  }

  .pu-table .pu-progress-members {
    grid-template-columns: 1fr;
  }

  .pu-table .pu-row > td:nth-child(n+4):nth-child(-n+10) {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: minmax(92px, 35%) minmax(0, 1fr);
    gap: 10px;
    margin-top: 10px;
    align-items: start;
  }

  .pu-table .pu-row > td:nth-child(n+4):nth-child(-n+10)::before,
  .pu-table .pu-row > td:nth-child(11)::before,
  .pu-table .pu-row > td:nth-child(12)::before {
    content: attr(data-label);
    font-size: .67rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .pu-table .pu-row > td:nth-child(11),
  .pu-table .pu-row > td:nth-child(12) {
    grid-column: 2 / -1;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  .pu-table .pu-row > td:nth-child(11)::before,
  .pu-table .pu-row > td:nth-child(12)::before {
    display: block;
    margin-bottom: 8px;
  }

  .pu-table .pu-member-title {
    flex-wrap: wrap;
  }

  .pu-table .pu-member-id,
  .pu-table .pu-member-meta {
    overflow-wrap: anywhere;
  }

  .pu-table .pu-pair-actions {
    min-width: 0;
  }

  /* These two legacy tools use an icon rail rather than the shared drawer. */
  body.training-preview-page .main,
  body.roster-viewer-page .main,
  body.training-preview-page.compact .main,
  body.roster-viewer-page.sb-collapsed .main {
    margin-left: 54px !important;
    width: calc(100% - 54px) !important;
  }

  body.roster-viewer-page .sidebar {
    width: 54px !important;
  }

  body.roster-viewer-page .brand {
    height: 56px;
    min-height: 56px;
    padding: 0;
    border-bottom: 0;
  }

  body.roster-viewer-page .brand img,
  body.roster-viewer-page .brand-sub,
  body.roster-viewer-page .nav-label,
  body.roster-viewer-page .nav-text,
  body.roster-viewer-page .sidebar-user-copy {
    display: none;
  }

  body.roster-viewer-page .sb-toggle {
    left: 14px;
    right: auto;
    top: 15px;
  }

  body.roster-viewer-page .nav-item,
  body.roster-viewer-page .sidebar-user {
    justify-content: center;
  }

  body.roster-viewer-page .content {
    padding: 14px;
  }

  body.roster-viewer-page .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.roster-viewer-page .session-list,
  body.roster-viewer-page .table-wrap {
    max-height: none;
  }
}

@media (max-width: 480px) {
  .content,
  body.roster-viewer-page .content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .modal-footer > .btn {
    flex: 1 1 140px;
  }
}