/* Shared visual language for the authenticated ERP. Keep module-specific
   layouts focused on their workflows and centralize common page chrome here. */
.erp-app {
  --erp-surface: #fff;
  --erp-surface-subtle: #f7f8fa;
  --erp-page-bg: #f3f4f7;
  --erp-border: #dfe3e8;
  --erp-border-strong: #cfd5dc;
  --erp-text: #2f3542;
  --erp-muted: #69707d;
  --erp-primary: var(--cui-primary, #5856d6);
  --erp-radius-sm: 0.375rem;
  --erp-radius: 0.625rem;
  --erp-shadow: 0 1px 2px rgba(44, 56, 74, 0.04);
  --erp-shadow-raised: 0 0.5rem 1.5rem rgba(44, 56, 74, 0.08);

  color: var(--erp-text);
  background: var(--erp-page-bg);
  font-size: 0.9375rem;
}

.erp-app .wrapper {
  background: var(--erp-page-bg) !important;
}

.erp-app .sidebar {
  --cui-sidebar-nav-link-padding-x: 0.875rem;
  --cui-sidebar-nav-link-padding-y: 0.65rem;
}

.erp-app .sidebar-header {
  align-items: center;
  display: flex !important;
  font-size: 0.875rem;
  font-weight: 600;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  text-align: center;
  width: 100%;
  overflow-wrap: anywhere;
}

.erp-app .sidebar-nav {
  padding: 0.5rem;
}

.erp-app .sidebar-nav .nav-link {
  border-radius: 0.5rem;
  margin-block: 0.125rem;
}

.erp-app .sidebar-nav .nav-group-items {
  padding-block: 0.125rem 0.375rem;
}

.erp-app .sidebar-nav .nav-group-items .nav-link {
  padding-left: 2.5rem;
}

.erp-app .sidebar-nav .nav-link.active {
  font-weight: 600;
}

.erp-app .header {
  border-bottom-color: var(--erp-border);
  box-shadow: 0 1px 2px rgba(44, 56, 74, 0.04);
}

.erp-app .header > .container-fluid:first-child {
  min-height: 3.5rem;
  padding-inline: 1rem !important;
}

.erp-app .header .header-toggler {
  align-items: center;
  border-radius: var(--erp-radius-sm);
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.erp-app .header .header-toggler:hover {
  background: var(--erp-surface-subtle);
}

.erp-app .header-divider {
  border-top-color: var(--erp-border);
}

.erp-app .header > .container-fluid:last-child {
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 1rem;
}

.erp-app .breadcrumb {
  align-items: center;
  color: var(--erp-muted);
  font-size: 0.875rem;
  min-height: 2.75rem;
}

.erp-app .breadcrumb-item + .breadcrumb-item::before {
  color: #9da5b1;
}

.erp-app:not(.page-conversations) #ui-view {
  padding-block: 1rem !important;
}

.erp-app:not(.page-conversations) #ui-view > .row {
  margin-bottom: 0;
}

.erp-app .page-header {
  padding: 1rem 0 0;
}

.erp-app .page-header h1 {
  color: var(--erp-text);
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.3;
  margin: 0;
}

.erp-app #ui-view .card {
  background: var(--erp-surface);
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius);
  box-shadow: var(--erp-shadow);
  margin-bottom: 1rem;
  min-width: 0;
  overflow: visible;
}

.erp-app #ui-view .card-header {
  align-items: center;
  background: var(--erp-surface);
  border-bottom: 1px solid var(--erp-border);
  border-radius: var(--erp-radius) var(--erp-radius) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
}

.erp-app #ui-view .card-header > strong:first-child {
  color: var(--erp-text);
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.35;
}

.erp-app #ui-view .card-header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  float: none !important;
  gap: 0.375rem;
  line-height: normal;
  margin-left: auto;
}

.erp-app #ui-view .card-header-actions > .dropdown {
  line-height: normal;
}

.erp-app #ui-view .card-body {
  min-width: 0;
  padding: 1rem;
}

.erp-app #ui-view .card-footer {
  background: var(--erp-surface);
  border-top: 1px solid var(--erp-border);
  border-radius: 0 0 var(--erp-radius) var(--erp-radius);
  padding: 0.75rem 1rem;
}

.erp-app #ui-view .card-footer:not(.text-center) {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1rem;
  justify-content: space-between;
}

.erp-app #ui-view .card-footer:not(.text-center) > .clearfix {
  min-width: 0;
}

.erp-app #ui-view .btn {
  align-items: center;
  border-radius: var(--erp-radius-sm);
  display: inline-flex;
  font-weight: 500;
  gap: 0.35rem;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
}

.erp-app #ui-view .btn-sm {
  min-height: 1.875rem;
  padding: 0.25rem 0.55rem;
}

.erp-app #ui-view .btn-group:not(.btn-group-vertical) > .btn {
  border-radius: 0;
  margin-left: -1px;
  position: relative;
}

.erp-app #ui-view .btn-group:not(.btn-group-vertical) > .btn:first-child {
  border-bottom-left-radius: var(--erp-radius-sm);
  border-top-left-radius: var(--erp-radius-sm);
  margin-left: 0;
}

.erp-app #ui-view .btn-group:not(.btn-group-vertical) > .btn:last-child {
  border-bottom-right-radius: var(--erp-radius-sm);
  border-top-right-radius: var(--erp-radius-sm);
}

.erp-app #ui-view .btn-group:not(.btn-group-vertical) > .btn:focus,
.erp-app #ui-view .btn-group:not(.btn-group-vertical) > .btn:hover {
  z-index: 1;
}

.erp-app #ui-view .card-header-actions .btn-link {
  background: var(--erp-surface-subtle);
  border: 1px solid var(--erp-border);
  color: var(--erp-primary);
  text-decoration: none;
}

.erp-app #ui-view .card-header-actions .btn-link:hover,
.erp-app #ui-view .card-header-actions .btn-link:focus {
  background: #eef0f5;
  border-color: var(--erp-border-strong);
  color: var(--erp-primary);
}

.erp-app #ui-view .dropdown-menu {
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius);
  box-shadow: var(--erp-shadow-raised);
  padding: 0.375rem;
}

.erp-app #ui-view .dropdown-item {
  border-radius: var(--erp-radius-sm);
  padding: 0.5rem 0.75rem;
}

.erp-app #ui-view .collapse[id$="Form"].show,
.erp-app #ui-view .collapse#searchForm.show {
  background: var(--erp-surface-subtle);
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius);
  margin-bottom: 1rem;
  padding: 1rem;
}

.erp-app #ui-view label:not(.form-check-label),
.erp-app #ui-view .form-label {
  color: #454b57;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.erp-app #ui-view .form-control,
.erp-app #ui-view .form-select,
.erp-app #ui-view .input-group-text,
.erp-app #ui-view .select2-container .select2-selection {
  border-color: var(--erp-border-strong);
  border-radius: var(--erp-radius-sm);
  min-height: 2.375rem;
}

.erp-app #ui-view .form-control:focus,
.erp-app #ui-view .form-select:focus,
.erp-app #ui-view .select2-container--focus .select2-selection {
  border-color: rgba(88, 86, 214, 0.7);
  box-shadow: 0 0 0 0.2rem rgba(88, 86, 214, 0.12);
}

.erp-app #ui-view .form-control:disabled,
.erp-app #ui-view .form-control[readonly],
.erp-app #ui-view .form-select:disabled {
  background-color: #f1f3f5;
  color: #5f6672;
}

.erp-app #ui-view [data-controller~="dropdown-field"] .input-group > .dropdown-input {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.erp-app #ui-view [data-controller~="dropdown-field"] .dropdown-field-actions {
  display: flex;
  margin-left: -1px;
}

.erp-app #ui-view [data-controller~="dropdown-field"] .dropdown-field-actions > .btn {
  border-radius: 0;
  margin-left: -1px;
  min-width: 2.75rem;
}

.erp-app #ui-view [data-controller~="dropdown-field"] .dropdown-field-actions > .btn:first-child {
  margin-left: 0;
}

.erp-app #ui-view [data-controller~="dropdown-field"] .dropdown-field-actions > .btn:last-child {
  border-bottom-right-radius: var(--erp-radius-sm);
  border-top-right-radius: var(--erp-radius-sm);
}

.erp-app #ui-view [data-controller~="dropdown-field"] .dropdown-input:focus {
  position: relative;
  z-index: 3;
}

.erp-app #ui-view .form-check-input {
  border-color: var(--erp-border-strong);
  height: 1.125rem;
  width: 1.125rem;
}

.erp-app #ui-view .table-responsive {
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius);
  scrollbar-color: #b7bec8 transparent;
}

.erp-app #ui-view .table {
  border-color: var(--erp-border);
  margin-bottom: 0;
}

.erp-app #ui-view .table > :not(caption) > * > * {
  border-bottom-color: var(--erp-border);
  padding: 0.7rem 0.75rem;
}

.erp-app #ui-view .table thead th {
  background: var(--erp-surface-subtle);
  color: #454b57;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  vertical-align: middle;
}

.erp-app #ui-view .table tbody td {
  color: var(--erp-text);
}

.erp-app #ui-view .table-hover > tbody > tr:hover > * {
  background-color: rgba(88, 86, 214, 0.045);
}

.erp-app #ui-view .table tbody tr:last-child > td {
  border-bottom-width: 0;
}

.erp-app #ui-view .badge {
  border-radius: 0.375rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.35em 0.55em;
}

.erp-app #ui-view .alert {
  border: 1px solid transparent;
  border-radius: var(--erp-radius);
  box-shadow: none;
}

.erp-app #ui-view .list-group {
  border-radius: var(--erp-radius);
}

.erp-app #ui-view .list-group-item {
  border-color: var(--erp-border);
  padding: 0.75rem 1rem;
}

.erp-app #ui-view .nav-tabs {
  border-bottom-color: var(--erp-border);
  gap: 0.25rem;
}

.erp-app #ui-view .nav-tabs .nav-link {
  border-radius: var(--erp-radius-sm) var(--erp-radius-sm) 0 0;
  color: var(--erp-muted);
  font-weight: 500;
  padding: 0.625rem 0.875rem;
}

.erp-app #ui-view .nav-tabs .nav-link.active {
  color: var(--erp-primary);
  font-weight: 600;
}

.erp-app #ui-view .pagination {
  flex-wrap: wrap;
  gap: 0.25rem;
}

.erp-app #ui-view .page-link {
  align-items: center;
  border-color: var(--erp-border);
  border-radius: var(--erp-radius-sm) !important;
  display: inline-flex;
  justify-content: center;
  min-height: 2.25rem;
  min-width: 2.25rem;
}

.erp-app #ui-view .pagy-info,
.erp-app #ui-view .pagy-items-selector {
  color: var(--erp-muted);
  display: inline-flex;
  margin-top: 0;
  padding: 0.375rem 0;
}

.erp-app #ui-view .empty-table-row td {
  background: var(--erp-surface);
}

.erp-app #ui-view .table-hover > tbody > .empty-table-row:hover > td {
  background: var(--erp-surface-subtle);
}

.erp-app #ui-view .sticky-search-bar {
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius);
  box-shadow: var(--erp-shadow);
  padding: 0.75rem;
  top: 6.75rem;
}

@media (max-width: 991.98px) {
  .erp-app .header > .container-fluid:first-child {
    padding-inline: 0.75rem !important;
  }

  .erp-app:not(.page-conversations) #ui-view {
    padding-block: 0.75rem !important;
  }

  .erp-app #ui-view .card-header-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
  }
}

@media (max-width: 767.98px) {
  .erp-app {
    font-size: 0.9rem;
  }

  .erp-app .header > .container-fluid:first-child {
    min-height: 3.25rem;
  }

  .erp-app .header > .container-fluid:last-child {
    min-height: 2.5rem;
    overflow-x: auto;
    padding-inline: 0.75rem;
  }

  .erp-app .breadcrumb {
    min-height: 2.5rem;
    white-space: nowrap;
  }

  .erp-app:not(.page-conversations) #ui-view {
    padding-block: 0.5rem !important;
  }

  .erp-app #ui-view .card {
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .erp-app #ui-view .card-header {
    align-items: flex-start;
    min-height: auto;
    padding: 0.75rem;
  }

  .erp-app #ui-view .card-header > strong:first-child {
    font-size: 1rem;
    padding-block: 0.35rem;
  }

  .erp-app #ui-view .card-header-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-left: 0;
    width: 100%;
  }

  .erp-app #ui-view .card-body {
    padding: 0.75rem;
  }

  .erp-app #ui-view .card-footer {
    padding: 0.75rem;
  }

  .erp-app #ui-view .card-footer:not(.text-center) {
    align-items: stretch;
    flex-direction: column;
  }

  .erp-app #ui-view .table-responsive .table th,
  .erp-app #ui-view .table-responsive .table td {
    padding: 0.625rem;
    white-space: nowrap;
  }

  .erp-app #ui-view .collapse[id$="Form"].show,
  .erp-app #ui-view .collapse#searchForm.show {
    padding: 0.75rem;
  }

  .erp-app #ui-view .card-footer.text-center {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
  }

  .erp-app #ui-view .card-footer.text-center .btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .erp-app *,
  .erp-app *::before,
  .erp-app *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.erp-auth {
  --erp-auth-primary: var(--cui-primary, #5856d6);
  color: #2f3542;
}

.erp-auth-shell {
  background:
    radial-gradient(circle at 15% 10%, rgba(88, 86, 214, 0.12), transparent 32rem),
    linear-gradient(145deg, #f7f8fb 0%, #eef0f5 100%);
  padding-block: 2rem;
}

.erp-auth .card {
  border: 1px solid #dfe3e8;
  border-radius: 0.75rem;
  box-shadow: 0 1rem 3rem rgba(44, 56, 74, 0.12);
  margin-inline: auto;
  max-width: 30rem;
  overflow: hidden;
}

.erp-auth .card-body {
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.erp-auth h1 {
  font-size: 1.75rem;
  font-weight: 650;
  margin-bottom: 1.5rem;
}

.erp-auth label:not(.form-check-label) {
  color: #454b57;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.erp-auth .form-control {
  border-color: #cfd5dc;
  border-radius: 0.375rem;
  min-height: 2.5rem;
}

.erp-auth .form-control:focus {
  border-color: rgba(88, 86, 214, 0.7);
  box-shadow: 0 0 0 0.2rem rgba(88, 86, 214, 0.12);
}

.erp-auth .btn {
  border-radius: 0.375rem;
  font-weight: 600;
  min-height: 2.5rem;
}