.container, .container-fluid { max-width: 1200px; }
main.container, main.container-fluid { padding-top: 1.5rem; padding-bottom: 2rem; }
.hero-shell, main.container, main.container-fluid { animation: lyothos-rise .32s ease-out both; }
.navbar { min-height: 4.25rem; }

/* Shared authenticated shell. The existing navbar remains the compact/mobile shell. */
.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1035; width: 14rem; display: flex; flex-direction: column; padding: 1rem .75rem; color: #fff; background: #10251f; }
.app-sidebar-heading { display: flex; align-items: center; gap: .25rem; }
.app-sidebar-brand { display: flex; align-items: center; gap: .7rem; min-height: 3.25rem; padding: .25rem .5rem 1rem; color: #fff; font-weight: 800; text-decoration: none; }
.app-sidebar-brand:hover { color: #fff; }
.app-sidebar-brand img { width: 2rem; height: 2rem; padding: .18rem; object-fit: contain; border-radius: .5rem; background: #fff; }
.app-sidebar-collapse { width: 2.75rem; height: 2.75rem; margin: 0 0 .75rem auto; flex: 0 0 auto; color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: .55rem; background: transparent; }
.app-sidebar-collapse:hover { background: rgba(255,255,255,.08); }
.app-sidebar nav { display: grid; gap: .2rem; overflow-y: auto; }
.app-sidebar-link { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .55rem .7rem; color: rgba(255,255,255,.78); border-radius: .55rem; font-weight: 700; text-decoration: none; }
.app-sidebar-link i { width: 1.15rem; text-align: center; }
.app-sidebar-link:hover, .app-sidebar-link:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
.app-sidebar-link.active { color: #10251f; background: #e7efe8; }
.app-sidebar-account { display: grid; gap: .75rem; margin-top: auto; padding: 1rem .5rem .25rem; border-top: 1px solid rgba(255,255,255,.18); }
.app-sidebar-account > div:first-child { display: grid; gap: .35rem; min-width: 0; }
.app-sidebar-identity strong { overflow: hidden; color: #fff; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar-identity { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .5rem; }
.app-sidebar-identity .badge { flex: 0 0 auto; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar .badge, .app-sidebar .badge-role { color: #10251f !important; background: #f7f5ef !important; border-color: rgba(255,255,255,.55) !important; }
.app-sidebar .btn-outline-secondary { color: #fff; background: transparent; border-color: rgba(255,255,255,.48); }
.app-sidebar .btn-outline-secondary:hover, .app-sidebar .btn-outline-secondary:focus-visible { color: #10251f; background: #f7f5ef; border-color: #f7f5ef; }
.app-sidebar-actions { display: grid; grid-template-columns: 2.75rem 1fr; gap: .5rem; }
.app-sidebar-actions .btn { min-height: 2.75rem; }
.app-sidebar .btn-outline-light { color: #f7f5ef; background: transparent; border-color: rgba(247,245,239,.62); }
.app-sidebar .btn-outline-light:hover, .app-sidebar .btn-outline-light:focus-visible { color: #10251f; background: #f7f5ef; border-color: #f7f5ef; }
.app-sidebar .btn-outline-light:disabled, .app-sidebar .btn-outline-light.disabled { color: rgba(247,245,239,.62) !important; background: rgba(247,245,239,.08) !important; border-color: rgba(247,245,239,.25) !important; }
.app-sidebar #sidebarUtilities .notification-center { margin: 0 !important; }
.app-sidebar #sidebarUtilities .notification-center > button { width: 100%; color: #fff; border-color: rgba(255,255,255,.35); }
body.has-app-sidebar > .navbar { display: none; }
body.has-app-sidebar > main, body.has-app-sidebar > .tenant-admin { width: auto; max-width: none; margin-left: 14rem; }
body.app-sidebar-collapsed .app-sidebar { width: 4.5rem; }
body.app-sidebar-collapsed .app-sidebar-brand span, body.app-sidebar-collapsed .app-sidebar-link span, body.app-sidebar-collapsed .app-sidebar-account { display: none; }
body.app-sidebar-collapsed .app-sidebar-account { display: grid; padding: .75rem 0 .25rem; }
body.app-sidebar-collapsed .app-sidebar-account > :not(#sidebarUtilities) { display: none; }
body.app-sidebar-collapsed #notificationCenter { display: block; margin: 0 auto !important; }
body.app-sidebar-collapsed #notificationCenter > button { width: 3rem; height: 3rem; color: #fff; border-color: rgba(255,255,255,.35); background: #10251f; }
body.app-sidebar-collapsed .app-sidebar-heading { display: grid; justify-items: center; }
body.app-sidebar-collapsed .app-sidebar-brand, body.app-sidebar-collapsed .app-sidebar-collapse { margin: 0; padding-inline: 0; }
body.app-sidebar-collapsed .app-sidebar-link { justify-content: center; padding-inline: .5rem; }
body.app-sidebar-collapsed > main, body.app-sidebar-collapsed > .tenant-admin { margin-left: 4.5rem; }
.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: none; } }

/* 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) {
  .app-sidebar { display: none; }
  body.has-app-sidebar > .navbar { display: flex; }
  body.has-app-sidebar > main, body.has-app-sidebar > .tenant-admin { width: auto; margin-left: 0; }
  .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; }
  #notificationCenter { margin: 0 !important; }
  #notificationCenter > button { min-width: 44px; min-height: 44px; }
}

@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; }
}
/* Reserve the asynchronous owner-card content area to avoid page jumps. */
#organizationOverviewMetrics {
  min-height: 7.5rem;
}

#organizationSetupSteps {
  min-height: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Reflow within the usable content area (which excludes the desktop sidebar). */
.hero-shell { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.app-sidebar { max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
.app-sidebar nav { flex: 1 1 auto; min-height: 3rem; }
.app-sidebar-heading, .app-sidebar-account { flex-shrink: 0; }
.btn { overflow-wrap: anywhere; }
.btn > .bi, .btn > svg, .btn-close { flex-shrink: 0; }
.sa-directory-card-left, .sa-directory-card-middle, .sa-directory-card-right { min-width: 0; max-width: 100%; }
.sa-directory-card-actions { flex-wrap: wrap; }
.sa-directory-card-actions .dropdown-item { white-space: normal; overflow-wrap: anywhere; }
/* Keep long labels/data inside their component without hiding page overflow. */
.modal-title, .modal-body, .sa-chip, .tenant-admin .hero, .tenant-admin .notice,
.tenant-admin .drawer-panel, .tenant-admin .summary .card { overflow-wrap: anywhere; }
.modal-header, .modal-footer { flex-shrink: 0; }
.modal-body { overflow-y: auto; }
.modal-content { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
.modal-dialog-centered { min-height: calc(100% - 1rem); }
.tenant-admin .toolbar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.tenant-admin .toolbar > *, .tenant-admin .table-wrap { min-width: 0; max-width: 100%; }
.tenant-admin .toolbar .btn { width: 100%; }
.drawer-panel .checklist { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* Inline page styles intentionally set drawer sizing; constrain the child form. */
.drawer-panel .form-grid > *, .tenant-admin .form-grid > * { min-width: 0; }
@media (max-height: 600px) {
  .app-sidebar { padding-block: .5rem; }
  .app-sidebar-account { padding-top: .5rem; gap: .35rem; }
  .login-page { align-items: flex-start !important; }
}
@media (max-width: 575.98px) {
  .tenant-admin .toolbar { grid-template-columns: minmax(0, 1fr); }
  .modal-header, .modal-body, .modal-footer { padding: .85rem; }
  .interval-row { grid-template-columns: minmax(0, 1fr); }
  .interval-row > .btn { justify-self: end; }
  .sa-directory-card-actions { width: 100%; }
  .sa-directory-card-actions > .btn { flex: 1 1 8rem; }
}