/*
 * Final responsive guardrails shared by public pages and every role portal.
 * Component visuals remain in their existing stylesheets; this file only
 * prevents viewport overflow and resolves layouts that need narrower reflow.
 */

html {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  max-width: 100%;
}

:where(.app-shell, .content-wrap, .content, #pageSearchRoot, .page-body,
  .main-column, .right-column, .dashboard-grid, .grid, .template-stats,
  .admin-stats, .summary-grid, .form-grid, .form-body, .settings-form,
  .calendar-page-card, .announcements-page-card, .role-profile-page,
  .role-profile-layout, .role-profile-left, .role-profile-right,
  .ai-center-grid, .diagnostics-grid, form, fieldset) {
  min-width: 0;
  max-width: 100%;
}

:where(.page-body, .main-column, .right-column, .dashboard-grid, .grid,
  .template-stats, .admin-stats, .summary-grid, .form-grid,
  .role-profile-layout, .ai-center-grid, .diagnostics-grid) > * {
  min-width: 0;
}

fieldset {
  min-inline-size: 0;
}

iframe,
embed,
object,
video,
canvas,
img,
svg {
  max-width: 100%;
}

:where(.card, .template-stat, .welcome-banner, .modal-card, .guidance-modal,
  .announcement-card, .event-manager-item, .role-profile-card,
  .notif-preview-item, .details-panel) :where(h1, h2, h3, h4, p, a, strong, span, small),
:where(.security-device-name, .security-device-meta, .diagnostics-code-output) {
  overflow-wrap: anywhere;
}

:where(.card, .modal-card, .guidance-modal, .details-panel) :where(pre, code) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-width: 0;
  max-width: 100%;
}

input[type="file"] {
  width: 100%;
}

:where(button, .btn, .btn-mini, .btn-card-action) {
  max-width: 100%;
}

:where(.section-header, .section-head, .page-section-head, .role-section-head,
  .card-header, .calendar-page-toolbar, .events-header, .modal-head) > * {
  min-width: 0;
}

/* Shared trusted-device rows used by profile and administrator security pages. */
.account-security-card {
  width: 100%;
}

.security-device-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.security-device-header > div,
.security-device-copy {
  min-width: 0;
}

.security-device-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.security-device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border, #dbe8f6);
  border-radius: 8px;
  background: var(--surface, #fff);
}

.security-device-copy {
  flex: 1 1 auto;
}

.security-device-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .92rem;
  font-weight: 600;
}

.security-current-device {
  padding: 2px 8px;
  border-radius: 999px;
  color: #0369a1;
  background: #e0f2fe;
  font-size: .72rem;
  font-weight: 600;
}

.security-device-meta {
  margin-top: 4px;
  color: var(--muted, #6d7d94);
  font-size: .8rem;
}

.security-device-action {
  flex: 0 0 auto;
  margin: 0;
}

.security-device-revoke {
  padding: 4px 8px;
  border: 0;
  color: #dc2626;
  background: transparent;
  font-size: .82rem;
  text-decoration: underline;
}

.security-revoke-all {
  padding: 5px 12px;
  border: 1px solid #ef4444;
  border-radius: 6px;
  color: #ef4444;
  background: transparent;
  font-size: .82rem;
}

/* Administrator diagnostics: allow every fixed-minimum grid to shrink safely. */
.diagnostics-grid {
  display: grid;
  gap: 12px;
}

.diagnostics-grid--migrations {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  margin-bottom: 12px;
}

.diagnostics-grid--provider {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  font-size: .9rem;
}

.diagnostics-grid--setup {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}

.diagnostics-grid--speech {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
  font-size: .88rem;
}

.diagnostics-tile {
  min-width: 0;
  padding: 14px;
  border-radius: var(--radius-sm, 12px);
  background: var(--surface-muted, #f3f7fc);
}

.diagnostics-setup-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border, #dbe8f6);
  border-radius: var(--radius-sm, 12px);
}

.diagnostics-code-output {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
}

/* Secure standalone pages do not use the portal shell. */
.standalone-page {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.standalone-card {
  box-sizing: border-box;
  width: min(calc(100% - 24px), 760px);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.standalone-page .shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 992px;
}

@media (max-width: 1180px) {
  .topbar.template-topbar {
    height: auto;
    flex-wrap: wrap;
  }

  .topbar.template-topbar .header-left {
    flex: 1 1 180px;
  }

  .topbar.template-topbar .header-right {
    flex: 1 1 460px;
  }
}

@media (max-width: 768px) {
  .security-device-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .security-device-header > form,
  .security-revoke-all {
    width: 100%;
  }

  .calendar-widget-head,
  .calendar-page-toolbar,
  .events-header {
    flex-wrap: wrap;
  }

  .standalone-page .card,
  .standalone-card {
    padding: 20px;
  }
}

@media (max-width: 520px) {
  .notif-dropdown {
    position: fixed;
    top: 68px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
  }

  .security-device-row {
    align-items: stretch;
    flex-direction: column;
  }

  .security-device-action,
  .security-device-revoke {
    width: 100%;
  }

  .security-device-revoke {
    min-height: 44px;
    text-align: left;
  }

  .calendar-page-nav strong {
    min-width: 0;
    flex: 1 1 100%;
  }

  .calendar-view-tabs,
  .view-toggle {
    max-width: 100%;
    overflow-x: auto;
  }

  .announcement-actions > :where(button, .btn, form),
  .announcement-actions > form :where(button, .btn) {
    width: 100%;
  }

  .standalone-card {
    width: calc(100% - 20px);
    padding: 18px;
  }

  .standalone-page :where(h1, h2) {
    overflow-wrap: anywhere;
    line-height: 1.2;
  }

  .standalone-page .actions {
    align-items: stretch;
    flex-direction: column;
  }

  .standalone-page .actions > form,
  .standalone-page .actions .btn {
    width: 100%;
  }
}

@media (max-width: 425px) {
  .topbar.template-topbar {
    gap: 8px;
  }

  .topbar.template-topbar h1 {
    max-width: 100%;
    font-size: 1rem;
  }

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

  .calendar-widget-toolbar strong {
    min-width: 0;
    font-size: .82rem;
  }

  .calendar-weekdays,
  .calendar-days {
    gap: 2px;
  }

  .calendar-day {
    height: 32px;
  }

  .pagination {
    gap: 8px;
  }
}

@media (max-width: 375px) {
  .content,
  body.form-focus .content {
    padding: 8px;
  }

  .card,
  .card-pad,
  .welcome-banner,
  .template-stat {
    padding: 14px;
  }

  .modal-card,
  .modal-card-wide,
  .guidance-modal {
    padding: 14px;
  }
}

@media (max-width: 320px) {
  .content,
  body.form-focus .content {
    padding: 6px;
  }

  .topbar.template-topbar {
    padding: 7px 8px;
  }

  .card,
  .card-pad,
  .welcome-banner,
  .template-stat {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar.template-topbar,
  .security-device-row,
  .standalone-page * {
    scroll-behavior: auto;
  }
}