.container, .container-fluid { max-width: 1200px; }
main.container, main.container-fluid { padding-top: 2rem; padding-bottom: 3rem; }
.hero-shell, main.container, main.container-fluid { animation: lyothos-rise .32s ease-out both; }
.navbar { min-height: 4.25rem; }
.navbar-brand img { width: 38px; height: 38px; margin-right: .75rem; border-radius: .8rem; background: #fffaf0; padding: .2rem; }
.navbar-brand span { line-height: 1.1; }
.tab-content, .table-responsive { border-radius: var(--lyothos-radius-md); }
.table-responsive { border: 1px solid var(--lyothos-border); background: var(--lyothos-surface-elevated); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive .table { width: max-content; min-width: 100%; }
.card, .sa-card { overflow: hidden; }
.card-header { background: var(--lyothos-surface-muted); border-bottom-color: var(--lyothos-border); }
.btn-row, .toolbar, .actions, .modal-footer { gap: .65rem; }
@keyframes lyothos-rise { from { opacity: .9; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive primitives scoped to app layout structures that otherwise overflow. */
img, svg { max-width: 100%; }
.card, .sa-card, .summary-card, .sa-directory-card, .modal-content, .tab-content, .table-responsive, .row > [class*="col-"] { max-width: 100%; min-width: 0; }
.card-body, .card-header, .modal-body, .modal-header, .modal-footer, .tab-pane, .accordion-body { min-width: 0; }
.card-title, .accordion-button, .badge, .status-badge, .sa-badge, .role-chip { white-space: normal; overflow-wrap: anywhere; }
.navbar > .container, .navbar > .container-fluid { min-width: 0; gap: .75rem; padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); }
.navbar-brand { min-width: 0; max-width: min(70vw, 24rem); }
.navbar-brand span, [data-brand-name], #usernameDisplay { min-width: 0; overflow-wrap: anywhere; }
.navbar-collapse > .d-flex { min-width: 0; flex-wrap: wrap; }
.btn, .navbar .nav-link, .modal-footer .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.btn, .dropdown-item, .nav-link, .form-check-label { white-space: normal; }
.form-control, .form-select, .input-group, .dropdown { max-width: 100%; min-width: 0; }
.form-check:not(.form-switch), .form-switch { min-height: 44px; display: flex; align-items: center; gap: .45rem; min-width: 0; }
.form-check .form-check-input { flex: 0 0 auto; }
.form-check .form-check-label { min-width: 0; }
.nav-tabs, .nav-pills, #ownerTabs, #userManagementTabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; max-width: 100%; }
.nav-tabs .nav-item, .nav-pills .nav-link { flex: 0 0 auto; }

#ownerTabContent, #userManagementTabsContent, #ownerTabContent > .tab-pane, #userManagementTabsContent > .tab-pane,
#templateSelectorWrapper > .d-flex, #templatesTab > .row, #provisioning-panel > .row,
.sa-directory-list, #reportsContainer, #rolePermissionsGrid, #announcementList, #templateList, #templateFields { min-width: 0; }

#announcementsTab > .d-flex.justify-content-between, #accessControlTab > .d-flex.justify-content-between,
#templatesTab .col-lg-4 > .d-flex.justify-content-between, #templateForm .card-body > .d-flex.justify-content-between,
#templateBuilder .card-body > .d-flex.justify-content-between, #templateLibraryCard .card-body > .d-flex.justify-content-between,
#templateSelectionDetails .card-body > .d-flex.justify-content-between { min-width: 0; flex-wrap: wrap; gap: .75rem; }

@supports (height: 100dvh) { .login-page { min-height: 100dvh; } }

@media (max-width: 991.98px) {
  .navbar-collapse { max-height: calc(100dvh - 4.25rem); overflow-y: auto; padding: 1rem 0; }
  .navbar-nav { gap: .3rem; }
  .navbar-collapse > .d-flex { align-items: stretch !important; gap: .6rem !important; padding-top: .75rem; }
  .navbar-collapse > .d-flex > * { max-width: 100%; }
  #logoutLink { width: max-content; }
}

@media (max-width: 767.98px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }
  .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
  main.container, main.container-fluid { padding: 1rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left)) !important; }
  .hero-shell { padding: 1rem; }
  h1, .h1, .display-heading, .page-title { font-size: clamp(1.75rem, 9vw, 2.35rem); line-height: 1.08; }
  h2, .h2 { font-size: clamp(1.45rem, 7vw, 2rem); line-height: 1.12; }
  .card, .sa-card { border-radius: var(--lyothos-radius-md); }
  .card-body, .tab-content.p-4, .sa-card.p-4 { padding: 1rem !important; }
  .modal-dialog { margin: .75rem; max-width: calc(100% - 1.5rem); }
  .modal-dialog-scrollable { max-height: calc(100dvh - 1.5rem); }
  .modal-footer { flex-wrap: wrap; justify-content: stretch; }
  .modal-footer > * { flex: 1 1 8rem; margin: 0 !important; }
  input, select, textarea, .form-control, .form-select { font-size: 16px; }
  .btn-row, .toolbar, .actions, .d-flex.gap-2, .d-flex.gap-3, .d-flex.justify-content-between, .d-flex.justify-content-end { min-width: 0; flex-wrap: wrap; }
  .d-flex.gap-3 > .input-group, .d-flex.gap-2 > .input-group { flex: 1 1 100%; }
  .input-group[style*="min-width"], [style*="min-width: 280px"] { min-width: 0 !important; width: 100%; }
  #statusFilter, #templateSelectorButton, #templateSelectorMenu, #userRoleFilter, #userStatusFilter { width: 100% !important; }
  #templateSelectorWrapper .dropdown, #manage-users-panel .card-body > .d-flex.flex-wrap.gap-2.align-items-center > .flex-grow-1,
  #manage-users-panel .card-body > .d-flex.flex-wrap.gap-2.align-items-center > .form-select,
  #manage-users-panel .card-body > .d-flex.flex-wrap.gap-2.align-items-center > .btn,
  #templateForm .card-footer > .btn-group, #templateForm .card-footer > .btn { width: 100%; }
  #templateSelectorButton { justify-content: space-between; text-align: left; }
  #templateForm .card-footer > .btn-group { display: flex; flex-wrap: wrap; }
  #templateForm .card-footer > .btn-group > .btn { flex: 1 1 10rem; }
}

@media (max-width: 575.98px) {
  .container, .container-fluid { padding-left: max(.875rem, env(safe-area-inset-left)); padding-right: max(.875rem, env(safe-area-inset-right)); }
  .navbar-brand { max-width: calc(100vw - 6.5rem); }
  .navbar-brand img { width: 34px; height: 34px; margin-right: .5rem; }
  .navbar-toggler { min-width: 44px; min-height: 44px; }
  .navbar-collapse .navbar-nav, .navbar .nav-link, .navbar-collapse > .d-flex { width: 100%; }
  .navbar .nav-link { justify-content: flex-start; }
  #usernameDisplay { flex: 1 1 100%; }
  .btn-row > .btn, .actions > .btn, .toolbar > .btn { flex: 1 1 auto; }
}