/* RegTech - Page layout and feature-specific styles */

/* Shared page shell */
[class$="-page"],
.dashboard-page {
  width: 100%;
  max-width: 100%;
}

.page-header {
  margin-bottom: var(--space-6);
}

.page-header .page-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.page-header .page-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.page-header .page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Dashboard */
.dashboard-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
}

.dashboard-content > .stats-grid {
  width: 100%;
}

/* Widget grid — flex-based so cards always fill half the row */
.dashboard-content > .dashboard-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  width: 100%;
}

.dashboard-content > .dashboard-grid > .dashboard-card {
  flex: 1 1 calc(50% - var(--space-6) / 2);
  min-width: min(100%, 20rem);
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
}

.dashboard-card .card-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dashboard-card .card-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.dashboard-card .quick-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-card .card-content {
  padding: var(--space-6);
}

.dashboard-card .loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--gray-500);
}

.dashboard-card .loading-spinner .spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--gray-200);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0;
}

.recent-audits,
.upcoming-tasks,
.compliance-overview {
  min-height: 4rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.recent-audits .audit-item,
.upcoming-tasks .task-item {
  margin: 0;
}

.audit-info,
.task-info {
  flex: 1;
  min-width: 0;
}

.audit-status {
  flex-shrink: 0;
}

/* Dashboard metrics & tasks */
.compliance-metrics {
  display: grid;
  gap: var(--space-4);
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.metric-label {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  font-weight: 500;
}

.metric-value {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.metric-number {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--gray-900);
}

.task-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.task-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
}

.task-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.risk-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.risk-badge.low {
  background: var(--badge-success-bg);
  color: var(--badge-success-fg);
}

.risk-badge.medium {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-fg);
}

.risk-badge.high {
  background: var(--badge-error-bg);
  color: var(--badge-error-fg);
}

.error-state {
  text-align: center;
  padding: var(--space-6);
  color: var(--error-600);
}

.error-state i,
.error-state .lucide {
  width: 2rem;
  height: 2rem;
  margin: 0 auto var(--space-2);
  display: block;
}

.text-green-500 {
  color: var(--success-600);
}

/* Date range filter */
.date-range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.date-range .filter-input {
  min-width: 9rem;
}

/* Shared list page tables */
.reports-table-container,
.schools-table-container,
.users-table-container,
.table-container {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.reports-table,
.schools-table,
.users-table {
  width: 100%;
  border-collapse: collapse;
}

.reports-table th,
.reports-table td,
.schools-table th,
.schools-table td,
.users-table th,
.users-table td {
  padding: var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: middle;
}

.reports-table th,
.schools-table th,
.users-table th {
  background: var(--gray-50);
  font-weight: 600;
  color: var(--gray-700);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reports-table tbody tr:hover,
.schools-table tbody tr:hover,
.users-table tbody tr:hover {
  background: var(--gray-50);
}

.loading-cell,
.empty-cell {
  text-align: center;
  padding: var(--space-8) !important;
  color: var(--gray-500);
}

/* Row cell layouts */
.user-info,
.school-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.user-info .user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--primary-100);
  color: var(--primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.user-details h4.user-name,
.school-name h4 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-900);
}

.user-title,
.school-address {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.user-email {
  font-size: var(--font-size-sm);
  color: var(--gray-700);
}

.user-actions,
.school-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.user-date,
.school-date {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

/* Badges */
.role-badge,
.school-type-badge,
.state-badge,
.subscription-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.role-badge.admin,
.role-badge.super_admin,
.role-badge.school_admin {
  background: var(--badge-info-bg);
  color: var(--badge-info-fg);
}

.role-badge.auditor {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-fg);
}

.role-badge.teacher,
.role-badge.staff,
.role-badge.viewer {
  background: var(--badge-success-bg);
  color: var(--badge-success-fg);
}

.status-badge.active {
  background: var(--badge-success-bg);
  color: var(--badge-success-fg);
}

.status-badge.inactive,
.status-badge.suspended {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
}

.status-badge.pending {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-fg);
}

.school-type-badge.private {
  background: var(--badge-info-bg);
  color: var(--badge-info-fg);
}

.school-type-badge.charter {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-fg);
}

.school-type-badge.religious {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
}

.state-badge {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
}

.subscription-badge.basic {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
}

.subscription-badge.professional {
  background: var(--badge-info-bg);
  color: var(--badge-info-fg);
}

.subscription-badge.enterprise {
  background: var(--badge-success-bg);
  color: var(--badge-success-fg);
}

/* School/profile detail grids */
.school-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.school-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.school-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}

.school-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.info-item label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.info-item span {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
}

.template-content {
  flex: 1;
  min-width: 0;
}

/* Center loading spinners in grids */
.templates-grid > .loading-spinner,
#templates-grid > .loading-spinner {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-12);
  color: var(--gray-500);
}

@media (max-width: 991.98px) {
  .school-info-grid {
    grid-template-columns: 1fr;
  }
}

/* Profile sections */
.profile-page .tab-content {
  display: block;
}

.profile-section {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}

.section-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}

.section-content {
  padding: var(--space-6);
}

.profile-form {
  max-width: 48rem;
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-gray-100, #f3f4f6);
  border: 2px solid var(--color-gray-200, #e5e7eb);
}

.profile-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}


.school-info {
  display: grid;
  gap: var(--space-4);
}

.school-info .info-row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--space-4);
  align-items: baseline;
}

.school-info .info-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-600);
}

.school-info .info-value {
  color: var(--gray-900);
}

/* Filters section card styling */
.filters-section {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
}

.filters-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  flex: 1 1 16rem;
  min-width: min(100%, 16rem);
  max-width: 24rem;
}

.search-box i,
.search-box .lucide {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--gray-400);
  pointer-events: none;
}

.search-box input,
.search-box .form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-3) 2.5rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  background: var(--surface);
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.filters-row .filter-select,
.filters-row .control-select {
  min-width: 9rem;
}

/* Tables (audits list) */
.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  flex-wrap: wrap;
}

.table-wrapper {
  overflow-x: auto;
}

.table-wrapper .data-table {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.results-count {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.table-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.control-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--surface);
}

/* Sortable table headers */
.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.data-table th.sortable i {
  width: 0.875rem;
  height: 0.875rem;
  vertical-align: middle;
  margin-left: var(--space-1);
  opacity: 0.4;
}

/* Templates grid */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.template-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.template-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.template-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--primary-100);
  color: var(--primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.template-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.template-state,
.default-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
}

.default-badge {
  background: var(--badge-info-bg);
  color: var(--badge-info-fg);
}

.template-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}

.template-description {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.5;
}

.template-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.detail-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.template-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: auto;
}

/* Template detail modal */
.template-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.template-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.template-detail-title-block {
  flex: 1 1 16rem;
  min-width: 0;
}

.template-detail-title-block h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
}

.template-detail-description {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.5;
}

.template-detail-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.template-detail .category-badge,
.template-detail .state-badge,
.template-detail .default-badge,
.template-detail .agency-badge,
.template-detail .critical-badge,
.template-detail .required-badge,
.template-detail .citation-badge,
.template-detail .evidence-badge,
.template-detail .item-type {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
  text-transform: none;
}

.template-detail .category-badge {
  background: var(--badge-info-bg);
  color: var(--badge-info-fg);
}

.template-detail .agency-badge {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
  border: 1px solid var(--gray-300);
}

.template-detail .citation-badge,
.citation-badge {
  background: var(--badge-success-bg);
  color: var(--badge-success-fg);
  border: 1px solid transparent;
}

.template-detail .critical-badge,
.critical-badge,
.badge-critical {
  background: var(--badge-error-bg);
  color: var(--badge-error-fg);
}

.template-detail .required-badge,
.required-badge {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-fg);
}

.template-detail .evidence-badge,
.evidence-badge {
  background: var(--badge-info-bg);
  color: var(--badge-info-fg);
  border: 1px solid transparent;
}

.template-detail .item-type {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
  text-transform: capitalize;
}

.critical-badge,
.required-badge,
.citation-badge,
.evidence-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.template-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
}

.template-info-grid .info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.template-info-grid .info-item label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.template-info-grid .info-item span {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--gray-900);
}

.template-structure-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.template-structure-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--gray-900);
}

.structure-count,
.section-item-count {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  font-weight: 500;
}

.template-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.template-section {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.template-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.template-section-header h4 {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
}

.template-items {
  display: flex;
  flex-direction: column;
}

.template-item {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--gray-100);
}

.template-item:last-child {
  border-bottom: none;
}

.template-item .item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.template-item .item-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.4;
}

.template-item .item-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.template-item .item-description {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.5;
}

.template-item .item-citation {
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.4;
}

.pack-disclaimer {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--gray-50);
  border-left: 3px solid var(--gray-300);
  color: var(--gray-600);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.template-info-grid .info-item-wide {
  grid-column: 1 / -1;
}

.template-item .item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.template-empty {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

/* Profile */
.profile-page {
  width: 100%;
}

.profile-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--gray-200);
  overflow-x: auto;
}

.tab-btn {
  padding: var(--space-3) var(--space-4);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gray-600);
  border-bottom: 2px solid transparent;
  font-weight: 500;
  white-space: nowrap;
}

.tab-btn.active {
  color: var(--primary-600);
  border-bottom-color: var(--primary-500);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.profile-content {
  display: grid;
  gap: var(--space-6);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.profile-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

/* Audit execution */
.audit-items-section {
  margin-top: var(--space-6);
}

.audit-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.audit-item-row {
  padding: var(--space-4);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.audit-item-row.completed {
  background: var(--success-50);
  border-color: var(--success-100);
}

.badge-critical {
  background: var(--badge-error-bg);
  color: var(--badge-error-fg);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  margin-left: var(--space-2);
}

.evidence-upload {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
}

/* Pagination container on list pages */
.pagination-container {
  margin-top: var(--space-6);
  display: flex;
  justify-content: center;
}

.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  color: var(--gray-500);
}

/* Auth reset page */
.auth-form-container {
  max-width: 28rem;
  margin: var(--space-8) auto;
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* Utility alignment helpers used in page templates */
.text-red-500 { color: var(--error-600); }

@media (max-width: 991.98px) {
  .dashboard-content > .dashboard-grid > .dashboard-card {
    flex: 1 1 100%;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .page-header .page-header-content {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .search-box {
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  .table-header {
    flex-direction: column;
    align-items: stretch;
  }

  .template-actions {
    justify-content: flex-start;
  }
}

/* Security settings — MFA & sessions */
.security-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.setting-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--gray-200);
}

.setting-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.setting-info h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--gray-900);
}

.setting-info p {
  margin: 0;
  color: var(--gray-600);
  font-size: var(--font-size-sm);
}

.setting-action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
}

.mfa-status-line {
  margin-top: var(--space-2) !important;
}

.mfa-badge {
  font-weight: 600;
}

.mfa-badge-on {
  color: var(--badge-success-fg);
}

.mfa-badge-off {
  color: var(--gray-500);
}

.mfa-setup .mfa-qr-wrap {
  display: flex;
  justify-content: center;
  margin: var(--space-4) 0;
}

.mfa-qr {
  width: 180px;
  height: 180px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.mfa-secret {
  text-align: center;
  word-break: break-all;
  margin-bottom: var(--space-4);
}

.mfa-recovery-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
}

.mfa-recovery-list li {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--font-size-sm);
  padding: var(--space-2);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  text-align: center;
}

.sessions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--gray-200);
}

.session-row:last-child {
  border-bottom: none;
}

.session-meta {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-top: var(--space-1);
}

.session-current {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--primary-700, #1d4ed8);
}

.activity-timeline-section {
  margin-top: var(--space-6);
}

.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.activity-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--gray-200);
}

.activity-row:last-child {
  border-bottom: none;
}

.activity-description {
  font-size: var(--font-size-sm);
  color: var(--gray-900);
}

.activity-meta {
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  margin-top: var(--space-1);
}

.activity-type {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  white-space: nowrap;
}

.empty-activity {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
}

.auth-mfa-hint {
  margin: 0 0 var(--space-4);
  color: var(--gray-600);
  font-size: var(--font-size-sm);
}

/* Roles & permissions matrix */
.roles-permissions-intro {
  margin: 0 0 var(--space-4);
  color: var(--gray-600);
  font-size: var(--font-size-sm);
}

.roles-permissions-scroll {
  overflow-x: auto;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

.roles-permissions-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.roles-permissions-table th,
.roles-permissions-table td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--gray-200);
  text-align: center;
  vertical-align: middle;
}

.roles-permissions-table thead th {
  background: var(--gray-50);
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}

.roles-permissions-table thead th:first-child,
.roles-permissions-table .role-perm-name {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
  min-width: 9.5rem;
}

.roles-permissions-table thead th:first-child {
  background: var(--gray-50);
  z-index: 2;
}

.roles-permissions-table tbody tr:last-child th,
.roles-permissions-table tbody tr:last-child td {
  border-bottom: none;
}

.role-perm-row.is-current-role th,
.role-perm-row.is-current-role td {
  background: var(--primary-50, #eff6ff);
}

.role-perm-row.is-current-role .role-perm-name {
  background: var(--primary-50, #eff6ff);
}

.role-perm-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.current-role-tag {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--primary-700, #1d4ed8);
  background: var(--primary-100, #dbeafe);
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
}

.perm-granted .perm-indicator {
  color: var(--success-700, #15803d);
  font-weight: 700;
}

.perm-denied .perm-indicator {
  color: var(--gray-400);
}

/* Report form — layperson options + optional technical JSON */
.report-option-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.report-option-group .checkbox-label {
  margin-top: var(--space-2);
}

.report-advanced-params {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--gray-50);
}

.report-advanced-params summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  user-select: none;
}

.report-advanced-params[open] summary {
  margin-bottom: var(--space-2);
}

.report-advanced-params .form-hint {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
}

.report-advanced-params textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--font-size-sm);
}

/* Billing */
.billing-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.billing-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
}

.billing-stat label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

.billing-status-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
  margin-left: var(--space-2);
}

.billing-status-pill.active,
.billing-status-pill.trialing {
  background: var(--badge-success-bg);
  color: var(--badge-success-fg);
}

.billing-status-pill.past_due,
.billing-status-pill.unpaid {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-fg);
}

.billing-status-pill.canceled {
  background: var(--badge-error-bg);
  color: var(--badge-error-fg);
}

.billing-features ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--gray-700);
}

.billing-plan-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.billing-hint,
.form-hint {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  margin-top: var(--space-2);
}

.school-billing-actions {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-200);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.school-billing-actions h3 {
  flex: 1 1 100%;
  margin: 0 0 var(--space-2);
}

.billing-school-picker {
  margin-bottom: var(--space-4);
}

/* SIS Integrations */
.integrations-intro {
  color: var(--gray-600);
  margin-bottom: var(--space-4);
  max-width: 52rem;
  line-height: 1.5;
}

.integrations-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sis-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
}

.sis-school-picker {
  margin-bottom: 0;
  min-width: min(100%, 320px);
}

.sis-overview {
  padding: var(--space-4);
  background: var(--gray-50, #f9fafb);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md, 6px);
}

.sis-overview-text {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.5;
}

.sis-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sis-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg, 8px);
  padding: var(--space-5);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sis-card.connected {
  border-color: var(--success-200, #a7f3d0);
}

.sis-card.error,
.sis-card.failed {
  border-color: var(--error-200, #fecaca);
}

.sis-card.is-syncing {
  box-shadow: 0 0 0 2px var(--warning-200, #fde68a);
}

.sis-card.is-busy {
  opacity: 0.72;
  pointer-events: none;
}

.sis-card-top {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.sis-provider-mark {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  background: linear-gradient(145deg, #1e3a5f 0%, #0f766e 100%);
  color: #fff;
}

.sis-card[data-provider="blackbaud"] .sis-provider-mark {
  background: linear-gradient(145deg, #1d4ed8 0%, #0369a1 100%);
}

.sis-card[data-provider="facts"] .sis-provider-mark {
  background: linear-gradient(145deg, #9a3412 0%, #b45309 100%);
}

.sis-card-titles {
  flex: 1;
  min-width: 0;
}

.sis-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.sis-card-header h3 {
  margin: 0;
  margin-right: auto;
  font-size: var(--font-size-lg);
}

.sis-blurb {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: 1.45;
}

.sis-card-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gray-100);
}

.sis-meta-label {
  display: block;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
  margin-bottom: 2px;
}

.sis-meta-value {
  font-size: var(--font-size-sm);
  color: var(--gray-800);
  font-weight: 500;
}

.sis-sync-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}

@media (max-width: 640px) {
  .sis-sync-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sis-stat {
  text-align: center;
  padding: var(--space-3);
  background: var(--gray-50, #f9fafb);
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--gray-100);
}

.sis-stat-value {
  display: block;
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
}

.sis-stat-label {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.sis-sync-placeholder {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  padding: var(--space-3);
  background: var(--gray-50);
  border-radius: var(--radius-md, 6px);
}

.sis-config {
  margin-top: var(--space-4);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md, 6px);
  padding: 0 var(--space-4) var(--space-4);
  background: var(--gray-50, #f9fafb);
}

.sis-config summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-size-sm);
  padding: var(--space-3) 0;
  list-style: none;
  color: var(--gray-800);
}

.sis-config summary::-webkit-details-marker {
  display: none;
}

.sis-config summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.15s ease;
}

.sis-config[open] summary::before {
  transform: rotate(90deg);
}

.sis-form {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sis-auto-sync {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.sis-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.sis-alert {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm);
}

.sis-alert strong {
  display: block;
  margin-bottom: var(--space-1);
}

.sis-alert p {
  margin: 0 0 var(--space-2);
}

.sis-alert-error {
  background: var(--error-50, #fef2f2);
  border: 1px solid var(--error-200, #fecaca);
  color: var(--error-800, #991b1b);
}

.sis-empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius-lg, 8px);
  color: var(--gray-600);
}

.sis-empty-state h3 {
  margin: 0 0 var(--space-2);
  color: var(--gray-900);
}

.sis-loading-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sis-skeleton-card {
  height: 140px;
  border-radius: var(--radius-lg, 8px);
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 37%, #f3f4f6 63%);
  background-size: 400% 100%;
  animation: sis-shimmer 1.2s ease-in-out infinite;
}

@keyframes sis-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Public inspector mode */
body.inspect-mode .navbar,
body.inspect-mode .breadcrumb,
body.inspect-mode #page-title {
  display: none !important;
}

body.inspect-mode .main-content {
  margin-top: 0;
  max-width: none;
  padding: 0;
}

body.inspect-mode .page-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.inspect-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  color: var(--gray-800);
}

.inspect-banner {
  padding: var(--space-6);
  border-radius: var(--radius-lg, 12px);
  background: linear-gradient(135deg, #0f766e 0%, #134e4a 100%);
  color: #f8fafc;
}

.inspect-eyebrow {
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  color: rgba(248, 250, 252, 0.85);
}

.inspect-banner h1 {
  margin: 0 0 var(--space-2);
  font-size: 1.75rem;
  color: #f8fafc;
}

.inspect-meta {
  margin: 0;
  color: rgba(248, 250, 252, 0.9);
}

.inspect-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 768px) {
  .inspect-layout {
    grid-template-columns: 1fr;
  }
}

.inspect-audit-list,
.inspect-detail {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4);
}

.inspect-audit-list h2,
.inspect-audit-detail h2,
.inspect-audit-detail h3 {
  margin-top: 0;
  color: var(--gray-900);
}

.inspect-audit-detail p,
.inspect-notes p {
  color: var(--gray-700);
}

.inspect-audits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.inspect-audit-btn {
  width: 100%;
  text-align: left;
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-800);
  border-radius: 8px;
  padding: var(--space-3);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.inspect-audit-btn.active,
.inspect-audit-btn:hover {
  border-color: #0f766e;
  background: color-mix(in srgb, #0f766e 14%, var(--gray-50));
}

.inspect-audit-title {
  display: block;
  font-weight: 600;
  color: var(--gray-900);
}

.inspect-audit-sub {
  display: block;
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-top: 0.25rem;
}

.inspect-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
  color: var(--gray-500);
  font-size: 0.9rem;
}

.inspect-notes {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: 8px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}

.inspect-notes strong {
  color: var(--gray-900);
}

.inspect-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.inspect-item {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: var(--space-3);
  background: var(--gray-50);
  color: var(--gray-800);
}

.inspect-item.is-critical {
  border-color: var(--error-500);
  background: color-mix(in srgb, var(--error-500) 8%, var(--gray-50));
}

.inspect-item-head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.inspect-item-head .lucide {
  color: var(--gray-500);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.inspect-item.is-complete .lucide {
  color: var(--success-600);
}

.inspect-item strong {
  color: var(--gray-900);
}

.inspect-item p {
  color: var(--gray-700);
  margin: 0.35rem 0 0;
}

.inspect-item-cat {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.8rem;
  color: var(--gray-500);
}

.inspect-evidence-notes {
  color: var(--gray-600) !important;
}

.inspect-evidence-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.inspect-evidence-links a {
  color: #0f766e;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.inspect-evidence-links a:hover {
  color: #115e59;
}

.inspect-error {
  padding: var(--space-8);
  text-align: center;
  color: var(--gray-800);
}

.inspect-error h1 {
  color: var(--gray-900);
  margin-bottom: var(--space-3);
}

.inspect-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--gray-500);
}

.inspector-link-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
  color: var(--gray-800);
}

.inspector-link-result .url-box {
  width: 100%;
  word-break: break-all;
  padding: var(--space-3);
  background: var(--gray-50);
  color: var(--gray-900);
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
}

.inspector-qr {
  width: 180px;
  height: 180px;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
  border: 1px solid var(--gray-200);
}

.inspector-links-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--gray-800);
}

.inspector-links-table th,
.inspector-links-table td {
  text-align: left;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.9rem;
}

.inspector-links-table th {
  color: var(--gray-900);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .inspect-audit-btn.active,
  .inspect-audit-btn:hover {
    border-color: #2dd4bf;
    background: color-mix(in srgb, #2dd4bf 18%, var(--gray-50));
  }

  .inspect-evidence-links a {
    color: #5eead4;
  }

  .inspect-evidence-links a:hover {
    color: #99f6e4;
  }

  .inspect-item.is-critical {
    border-color: #f87171;
    background: color-mix(in srgb, #f87171 12%, var(--gray-50));
  }

  .inspect-item.is-complete .lucide {
    color: #4ade80;
  }

  .inspect-banner {
    background: linear-gradient(135deg, #115e59 0%, #042f2e 100%);
  }
}

.billing-status-pill.connected,
.billing-status-pill.succeeded,
.billing-status-pill.idle {
  background: var(--badge-success-bg);
  color: var(--badge-success-fg);
}

.billing-status-pill.syncing {
  background: var(--badge-warning-bg);
  color: var(--badge-warning-fg);
}

.billing-status-pill.disconnected {
  background: var(--badge-neutral-bg);
  color: var(--badge-neutral-fg);
}

.billing-status-pill.error,
.billing-status-pill.failed {
  background: var(--badge-error-bg);
  color: var(--badge-error-fg);
}

.profile-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}