html, body {
  font-family: var(--egatepass-font-family-base) !important;
  font-size: var(--egatepass-font-size-base);
  line-height: var(--egatepass-line-height-base);
  color: var(--egatepass-color-text);
  background-color: var(--egatepass-color-bg);
}

body input,
body textarea,
body select,
body button {
  font-family: inherit;
  color: inherit;
}

/* Page shell utilities */
.eg-shell {
  padding: var(--egatepass-space-lg);
  background-color: var(--egatepass-color-bg);
}

.eg-section {
  margin-bottom: var(--egatepass-space-lg);
  padding: var(--egatepass-space-lg);
  background: var(--egatepass-color-surface);
  border-radius: var(--egatepass-radius-md);
  border: var(--egatepass-border-weight) solid var(--egatepass-border-color-muted);
  box-shadow: var(--egatepass-shadow-sm);
}

.eg-section:last-child {
  margin-bottom: 0;
}

.eg-action-row {
  display: flex;
  gap: var(--egatepass-space-sm);
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--egatepass-space-md);
}

/* Status pill styling */
.eg-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--egatepass-space-sm);
  height: 30px;
  border-radius: var(--egatepass-radius-lg);
  font-size: 0.85rem;
  font-weight: var(--egatepass-font-weight-semibold);
  background: var(--egatepass-color-secondary);
  color: #fff;
}

.eg-pill-success {
  background: var(--egatepass-color-success);
}
.eg-pill-danger {
  background: var(--egatepass-color-danger);
}
.eg-pill-warning {
  background: var(--egatepass-color-warning);
}

/* Alerts */
.alert {
  border-radius: var(--egatepass-radius-md);
  border: var(--egatepass-border-weight) solid var(--egatepass-border-color-muted);
  padding: var(--egatepass-space-md);
  font-weight: var(--egatepass-font-weight-normal);
  box-shadow: var(--egatepass-shadow-sm);
}

.alert-primary {
  background: #e7f3ff;
  color: var(--egatepass-color-primary);
}
.alert-danger {
  background: #fdecea;
  color: var(--egatepass-color-danger);
}
.alert-success {
  background: #ecf7f0;
  color: var(--egatepass-color-success);
}

/* Focus helpers */
:focus-visible,
.eg-focus-visible,
.eg-focus-visible *,
.eg-focus-visible button,
.eg-focus-visible input,
.eg-focus-visible select,
.eg-focus-visible textarea,
.eg-focus-visible a,
.eg-focus-visible .btn,
.eg-focus-visible .menu-link,
.eg-focus-visible .dropdown-item {
  outline: var(--egatepass-focus-ring-width) solid var(--egatepass-focus-ring-color);
  outline-offset: var(--egatepass-focus-ring-offset);
}

/* Modal overrides */
.modal-content {
  border-radius: var(--egatepass-radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--egatepass-shadow-md);
}

.modal-header,
.modal-body,
.modal-footer {
  padding: var(--egatepass-space-lg);
}

.modal-header {
  border-bottom: var(--egatepass-border-weight) solid var(--egatepass-border-color-muted);
}

.modal-footer {
  border-top: var(--egatepass-border-weight) solid var(--egatepass-border-color-muted);
  display: flex;
  justify-content: flex-end;
  gap: var(--egatepass-space-xs);
}

.modal-footer .btn {
  min-width: 120px;
  border-radius: var(--egatepass-radius-sm);
}

.eg-modal {
  border-radius: var(--egatepass-radius-lg);
  overflow: hidden;
}

.eg-modal .modal-header {
  background: #ffffff;
  border-bottom: none;
  padding-bottom: var(--egatepass-space-sm);
}

.eg-modal .modal-body {
  padding-top: 0;
  color: var(--egatepass-color-text);
}

.eg-modal-footer {
  border-top: none;
  justify-content: flex-end;
  gap: var(--egatepass-space-xs);
}

.eg-modal-primary {
  min-width: 140px;
  font-weight: var(--egatepass-font-weight-semibold);
  box-shadow: var(--egatepass-shadow-sm);
}

.eg-modal-secondary {
  min-width: 110px;
  border-color: transparent;
  color: var(--egatepass-color-text);
}

/* Helper spacing utilities */
.spacing-xxs { margin-bottom: var(--egatepass-space-xxs); }
.spacing-xs { margin-bottom: var(--egatepass-space-xs); }
.spacing-sm { margin-bottom: var(--egatepass-space-sm); }
.spacing-md { margin-bottom: var(--egatepass-space-md); }
.spacing-lg { margin-bottom: var(--egatepass-space-lg); }
.spacing-xl { margin-bottom: var(--egatepass-space-xl); }

.gutter-lg {
  margin-left: -var(--egatepass-space-md);
  margin-right: -var(--egatepass-space-md);
}
.gutter-lg > * {
  padding-left: var(--egatepass-space-md);
  padding-right: var(--egatepass-space-md);
}

/* List/table baseline */
.table th,
.table td {
  border-top: var(--egatepass-border-weight) solid var(--egatepass-border-color-muted);
  padding: var(--egatepass-space-sm);
}

.table thead th {
  font-weight: var(--egatepass-font-weight-semibold);
}

/* Shared shell styling */
.eg-header {
  background: #ffffff;
  border-bottom: var(--egatepass-border-weight) solid var(--egatepass-border-color-muted);
  padding: var(--egatepass-space-xs) 0;
  box-shadow: var(--egatepass-shadow-sm);
  z-index: 10;
}

.eg-header-container {
  padding: 0 var(--egatepass-space-lg);
}

.eg-header-brand {
  gap: var(--egatepass-space-sm);
}

.eg-topbar {
  margin-right: var(--egatepass-space-sm);
}

.eg-topbar .btn {
  min-width: 150px;
  justify-content: flex-end;
}

.eg-header-mobile {
  border-bottom: var(--egatepass-border-weight) solid var(--egatepass-border-color-muted);
  background: #ffffff;
  padding: var(--egatepass-space-xs) var(--egatepass-space-md);
  box-shadow: var(--egatepass-shadow-sm);
}

.eg-header-mobile-left,
.eg-header-mobile-right {
  gap: var(--egatepass-space-sm);
}

.eg-logo-link {
  line-height: 0;
}

.eg-aside {
  background: #f7f9fc;
  border-right: var(--egatepass-border-weight) solid var(--egatepass-border-color-muted);
}

.eg-aside-wrapper {
  padding-top: var(--egatepass-space-lg);
}

.eg-aside-menu .menu-section,
.eg-aside-menu .menu-item {
  margin-bottom: var(--egatepass-space-xs);
}

.eg-menu .menu-link {
  padding: var(--egatepass-space-sm) var(--egatepass-space-md);
}

.eg-menu .menu-item-active > .menu-link {
  background: var(--egatepass-color-primary);
  color: #fff;
  border-radius: var(--egatepass-radius-sm);
  box-shadow: var(--egatepass-shadow-sm);
}

.eg-subheader {
  background: linear-gradient(180deg, rgba(0, 84, 179, 0.95), rgba(0, 84, 179, 0.7));
  padding: 0;
}

.eg-subheader-container {
  padding: var(--egatepass-space-lg) var(--egatepass-space-lg);
}

.eg-subheader-title {
  font-size: var(--egatepass-font-size-h2);
}

.eg-subheader-breadcrumbs .label {
  background: rgba(255, 255, 255, 0.9);
}

.eg-subheader-breadcrumbs a,
.eg-subheader-breadcrumbs span {
  color: #fff;
}

.eg-subheader-breadcrumbs span {
  opacity: 0.9;
}

.eg-subheader-toolbar {
  min-height: 62px;
}

.eg-content-shell {
  padding: var(--egatepass-space-lg);
  background: var(--egatepass-color-bg);
}

.eg-section-shell {
  margin: 0 auto;
  max-width: 1440px;
  padding: var(--egatepass-space-lg);
  background: var(--egatepass-color-surface);
  border-radius: var(--egatepass-radius-md);
  box-shadow: var(--egatepass-shadow-sm);
}

/* Phase 3 shared list/form patterns */
.eg-list-page .subheader,
.eg-form-page .subheader {
  border-radius: var(--egatepass-radius-md);
  margin-bottom: var(--egatepass-space-lg);
}

.eg-list-page .container,
.eg-form-page .container {
  max-width: 1320px;
}

.eg-list-toolbar .input-group {
  min-width: 220px;
}

.eg-list-toolbar .btn {
  border-radius: var(--egatepass-radius-sm);
}

.eg-list-card,
.eg-form-card {
  border: var(--egatepass-border-weight) solid var(--egatepass-border-color-muted);
  border-radius: var(--egatepass-radius-md);
  box-shadow: var(--egatepass-shadow-sm);
  position: relative;
  overflow: hidden;
}

.eg-state-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--egatepass-space-lg);
  font-weight: var(--egatepass-font-weight-semibold);
  line-height: 1.4;
  z-index: 5;
  background: rgba(255, 255, 255, 0.9);
  color: var(--egatepass-color-text-muted);
  border: var(--egatepass-border-weight) dashed var(--egatepass-border-color-muted);
  border-radius: var(--egatepass-radius-md);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.eg-state-layer.eg-state-empty {
  color: var(--egatepass-color-text-muted);
  background: rgba(244, 246, 251, 0.95);
}

.eg-state-layer.eg-state-error {
  color: var(--egatepass-color-danger);
  background: rgba(245, 216, 221, 0.95);
  border-color: rgba(213, 34, 59, 0.4);
}

.eg-state-layer.eg-state-loading {
  color: var(--egatepass-color-info);
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(15, 143, 224, 0.4);
}

.eg-list-card .card-body,
.eg-form-card .card-body {
  padding: var(--egatepass-space-lg);
}

.eg-list-datatable {
  min-height: 260px;
}

.eg-filter-panel {
  border: var(--egatepass-border-weight) solid var(--egatepass-border-color-muted);
  border-radius: var(--egatepass-radius-md);
  background: var(--egatepass-color-surface);
}

.eg-filter-panel .card-header {
  border-bottom: var(--egatepass-border-weight) solid var(--egatepass-border-color-muted);
}

.eg-form-section + .eg-form-section {
  margin-top: var(--egatepass-space-lg);
  padding-top: var(--egatepass-space-lg);
  border-top: 1px dashed var(--egatepass-border-color-muted);
}

.eg-form-section-title {
  font-weight: var(--egatepass-font-weight-semibold);
  margin-bottom: var(--egatepass-space-md);
}

.eg-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--egatepass-space-xs);
  align-items: center;
}

.eg-auth-page {
  min-height: 100vh;
  background-image: url('/media/bg/bg-3.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--egatepass-space-lg);
}

.eg-auth-card {
  width: 100%;
  max-width: 560px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.eg-auth-header {
  text-align: center;
  margin-bottom: var(--egatepass-space-lg);
}

.eg-auth-title {
  font-size: var(--egatepass-font-size-h2);
  font-weight: var(--egatepass-font-weight-semibold);
  margin-bottom: var(--egatepass-space-xs);
}

.eg-auth-subtitle {
  color: var(--egatepass-color-text-muted);
  font-size: 0.95rem;
}

.eg-auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--egatepass-space-md);
}

.eg-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--egatepass-space-sm);
  margin-top: var(--egatepass-space-sm);
  justify-content: center;
}

.eg-auth-card .login,
.eg-auth-card .login-form {
  width: 100%;
  max-width: 100%;
}

.eg-auth-card .text-danger,
.eg-auth-card .validation-summary-errors {
  text-align: left;
}

.eg-auth-page a,
.eg-status-page a,
.eg-auth-page .btn,
.eg-status-page .btn {
  transition: color var(--egatepass-transition-fast), background-color var(--egatepass-transition-fast), border-color var(--egatepass-transition-fast), box-shadow var(--egatepass-transition-fast);
}

.eg-auth-page a:hover,
.eg-auth-page a:focus,
.eg-status-page a:hover,
.eg-status-page a:focus,
.eg-auth-page .text-hover-primary:hover,
.eg-auth-page .text-muted:hover {
  color: #f64e60 !important;
}

.eg-auth-page .btn:not(.btn-primary):not(.btn-light-primary):hover,
.eg-auth-page .btn:not(.btn-primary):not(.btn-light-primary):focus,
.eg-status-page .btn:not(.btn-primary):not(.btn-light-primary):hover,
.eg-status-page .btn:not(.btn-primary):not(.btn-light-primary):focus {
  color: #f64e60;
  border-color: rgba(246, 78, 96, 0.38);
  background-color: rgba(246, 78, 96, 0.12);
}

.eg-auth-page .btn.btn-primary,
.eg-status-page .btn.btn-primary {
  background-color: #f64e60 !important;
  border-color: #f64e60 !important;
  color: #ffffff !important;
}

.eg-auth-page .btn.btn-primary:hover,
.eg-auth-page .btn.btn-primary:focus,
.eg-auth-page .btn.btn-primary.focus,
.eg-auth-page .btn.btn-primary:active,
.eg-auth-page .btn.btn-primary.active,
.eg-auth-page .show > .btn.btn-primary.dropdown-toggle,
.eg-status-page .btn.btn-primary:hover,
.eg-status-page .btn.btn-primary:focus,
.eg-status-page .btn.btn-primary.focus,
.eg-status-page .btn.btn-primary:active,
.eg-status-page .btn.btn-primary.active,
.eg-status-page .show > .btn.btn-primary.dropdown-toggle {
  background-color: #ea4053 !important;
  border-color: #ea4053 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(246, 78, 96, 0.25) !important;
}

.eg-auth-page .btn.btn-light-primary,
.eg-status-page .btn.btn-light-primary {
  background-color: rgba(246, 78, 96, 0.14) !important;
  border-color: rgba(246, 78, 96, 0.28) !important;
  color: #c93a4d !important;
}

.eg-auth-page .btn.btn-light-primary:hover,
.eg-auth-page .btn.btn-light-primary:focus,
.eg-auth-page .btn.btn-light-primary.focus,
.eg-auth-page .btn.btn-light-primary:active,
.eg-auth-page .btn.btn-light-primary.active,
.eg-auth-page .show > .btn.btn-light-primary.dropdown-toggle,
.eg-status-page .btn.btn-light-primary:hover,
.eg-status-page .btn.btn-light-primary:focus,
.eg-status-page .btn.btn-light-primary.focus,
.eg-status-page .btn.btn-light-primary:active {
  background-color: rgba(246, 78, 96, 0.28) !important;
  border-color: #f64e60 !important;
  color: #9f2537 !important;
  box-shadow: 0 0 0 0.18rem rgba(246, 78, 96, 0.2) !important;
}

.eg-status-page {
  min-height: 100vh;
  background: radial-gradient(circle at top, rgba(0, 84, 179, 0.15), transparent 45%), #f4f6fb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--egatepass-space-lg);
}

.eg-status-card {
  width: 100%;
  max-width: 520px;
  text-align: center;
  background: var(--egatepass-color-surface);
  border-radius: var(--egatepass-radius-lg);
  padding: var(--egatepass-space-lg);
  border: var(--egatepass-border-weight) solid var(--egatepass-border-color-muted);
  box-shadow: var(--egatepass-shadow-md);
}

.eg-status-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--egatepass-space-md);
  font-size: 1.5rem;
}

.eg-status-title {
  font-size: var(--egatepass-font-size-h3);
  font-weight: var(--egatepass-font-weight-semibold);
  margin-bottom: var(--egatepass-space-xs);
}

.eg-status-message {
  color: var(--egatepass-color-text-muted);
  margin-bottom: var(--egatepass-space-md);
}

.eg-status-actions {
  display: flex;
  flex-direction: column;
  gap: var(--egatepass-space-sm);
}

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

.eg-dense-table th,
.eg-dense-table td {
  vertical-align: middle;
}

.eg-role-list {
  max-height: 280px;
  overflow: auto;
  padding: var(--egatepass-space-sm);
  border: var(--egatepass-border-weight) solid var(--egatepass-border-color-muted);
  border-radius: var(--egatepass-radius-sm);
}

@media (max-width: 991px) {
  .eg-header-container,
  .eg-content-shell,
  .eg-section-shell {
    padding: var(--egatepass-space-md);
  }

  .eg-header {
    padding: var(--egatepass-space-xs) var(--egatepass-space-md);
  }

  .eg-header-mobile-left,
  .eg-header-mobile-right {
    gap: var(--egatepass-space-sm);
  }

  .eg-menu .menu-link {
    padding: var(--egatepass-space-sm) var(--egatepass-space-md);
  }

  .eg-list-toolbar .input-group {
    min-width: 0;
    width: 100%;
  }

  .eg-list-page .container,
  .eg-form-page .container {
    padding-left: var(--egatepass-space-sm);
    padding-right: var(--egatepass-space-sm);
  }

  .eg-auth-page,
  .eg-status-page {
    padding: var(--egatepass-space-md);
  }
}