/* Shared component layer. Brand and semantic values come from theme.css tokens. */

.app-shell h1,
.app-shell h2,
.app-shell h3,
.app-shell h4,
.app-shell h5,
.app-shell h6 {
  color: var(--nvl-text);
}

.breadcrumb {
  background: transparent;
  margin-bottom: 1rem;
  padding: 0;
}

.breadcrumb-item,
.breadcrumb-item.active {
  color: var(--nvl-text);
  font-weight: 700;
}

.card,
.modal-content,
.toast {
  background: var(--nvl-surface);
  border: 1px solid var(--nvl-border);
  border-radius: var(--nvl-radius-lg);
  box-shadow: var(--nvl-shadow-sm);
  color: var(--nvl-text);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
  background: var(--nvl-surface-subtle);
  border-color: var(--nvl-border);
}

.btn {
  border-radius: var(--nvl-radius-sm);
  font-weight: 600;
  min-height: 38px;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn-primary,
.btn-success {
  background: var(--nvl-primary);
  border-color: var(--nvl-primary);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
  background: var(--nvl-primary-hover) !important;
  border-color: var(--nvl-primary-hover) !important;
  box-shadow: 0 0 0 .2rem var(--nvl-focus) !important;
  color: #fff !important;
}

.btn-secondary,
.btn-outline-secondary {
  background: var(--nvl-surface-subtle);
  border-color: var(--nvl-border-strong);
  color: var(--nvl-text-muted);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: var(--nvl-primary-soft);
  border-color: var(--nvl-blue-300);
  box-shadow: 0 0 0 .2rem var(--nvl-focus);
  color: var(--nvl-primary);
}

.btn-danger {
  background: var(--nvl-danger);
  border-color: var(--nvl-danger);
  color: #fff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background: var(--nvl-danger-hover) !important;
  border-color: var(--nvl-danger-hover) !important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nvl-danger) 24%, transparent) !important;
  color: #fff !important;
}

.btn:disabled,
.btn.disabled {
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: .58;
  transform: none !important;
}

.form-label,
.col-form-label,
label {
  color: var(--nvl-text);
  font-weight: 600;
}

.form-control,
.form-select,
select,
.input-group-text {
  background: var(--nvl-surface-subtle);
  border-color: var(--nvl-border-strong);
  color: var(--nvl-text);
}

.form-control,
.form-select,
select {
  border-radius: var(--nvl-radius-sm);
  min-height: 38px;
}

.form-control::placeholder {
  color: var(--nvl-text-soft);
  opacity: 1;
}

.form-control:hover,
.form-select:hover,
select:hover {
  border-color: var(--nvl-blue-300);
}

.form-control:focus,
.form-select:focus,
select:focus,
.filter-autocomplete:focus {
  background: var(--nvl-surface);
  border-color: var(--nvl-primary) !important;
  box-shadow: 0 0 0 .2rem var(--nvl-focus) !important;
  color: var(--nvl-text);
  outline: 0;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
select:disabled {
  background: var(--nvl-surface-subtle);
  color: var(--nvl-text-soft);
  cursor: not-allowed;
  opacity: .72;
}

.filter-autocomplete {
  border: 1px solid var(--nvl-border-strong) !important;
}

.input-group-text {
  border-radius: var(--nvl-radius-sm);
}

.autocomplete-clear {
  align-items: center;
  border-radius: var(--nvl-radius-sm);
  color: var(--nvl-text-soft);
  display: inline-flex;
  height: 26px;
  justify-content: center;
  text-decoration: none;
  width: 26px;
}

.autocomplete-clear:hover,
.autocomplete-clear:focus {
  background: var(--nvl-primary-soft);
  color: var(--nvl-primary);
  text-decoration: none;
}

.text-danger.field-validation-error,
.validation-summary-errors,
.invalid-feedback {
  color: var(--nvl-danger) !important;
}

.is-invalid,
.input-validation-error {
  border-color: var(--nvl-danger) !important;
}

.is-valid {
  border-color: var(--nvl-validation-success) !important;
}

.table-responsive,
div.dataTables_wrapper {
  color: var(--nvl-text);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--nvl-text);
  --bs-table-border-color: var(--nvl-border);
  --bs-table-hover-bg: var(--nvl-primary-soft);
  --bs-table-hover-color: var(--nvl-text);
  color: var(--nvl-text);
  margin-bottom: .75rem;
}

.table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--nvl-border);
  box-shadow: none;
  padding: .7rem .65rem;
  vertical-align: middle;
}

.table thead th,
.table tfoot th {
  background: var(--nvl-surface-subtle);
  color: var(--nvl-text-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .015em;
}

.table tbody tr {
  transition: background-color .14s ease, box-shadow .14s ease;
}

.table tbody tr:hover > * {
  background: var(--nvl-primary-soft);
}

.table tbody tr.selected > * {
  background: var(--nvl-primary-soft-hover);
  color: var(--nvl-text);
}

.table input[type="checkbox"] {
  accent-color: var(--nvl-primary);
}

.invoice-row-status > * {
  color: var(--nvl-text) !important;
}

.invoice-row-status--pending {
  box-shadow: inset 3px 0 var(--nvl-status-5);
}

.invoice-row-status--pending > * {
  background: color-mix(in srgb, var(--nvl-status-2) 16%, transparent) !important;
}

.invoice-row-status--sent {
  box-shadow: inset 3px 0 var(--nvl-status-4);
}

.invoice-row-status--sent > * {
  background: color-mix(in srgb, var(--nvl-status-2) 10%, transparent) !important;
}

.invoice-row-status--paid-pending-transfer {
  box-shadow: inset 3px 0 var(--nvl-status-3);
}

.invoice-row-status--paid-pending-transfer > * {
  background: color-mix(in srgb, var(--nvl-status-1) 9%, transparent) !important;
}

.invoice-row-status--paid {
  box-shadow: inset 3px 0 var(--nvl-status-2);
}

.invoice-row-status--paid > * {
  background: color-mix(in srgb, var(--nvl-status-1) 5%, transparent) !important;
}

.nvl-status-badge {
  background: var(--nvl-primary-soft);
  border: 1px solid var(--nvl-blue-200);
  border-radius: 999px;
  color: var(--nvl-blue-800);
  display: inline-flex;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  padding: .36rem .55rem;
  white-space: nowrap;
}

.nvl-status-badge--pending {
  background: color-mix(in srgb, var(--nvl-status-2) 22%, var(--nvl-surface));
  border-color: var(--nvl-status-pending-border);
  color: var(--nvl-blue-800);
}

.nvl-status-badge--sent,
.nvl-status-badge--processed {
  background: color-mix(in srgb, var(--nvl-status-3) 20%, var(--nvl-surface));
  border-color: var(--nvl-status-4);
  color: var(--nvl-blue-800);
}

.nvl-status-badge--paid,
.nvl-status-badge--transferred {
  background: color-mix(in srgb, var(--nvl-status-4) 18%, var(--nvl-surface));
  border-color: var(--nvl-status-5);
  color: var(--nvl-blue-900);
}

.nvl-status-badge--neutral {
  background: var(--nvl-surface-subtle);
  border-color: var(--nvl-border-strong);
  color: var(--nvl-text-muted);
}

.nvl-action-icon {
  align-items: center;
  background: var(--nvl-primary-soft);
  border: 1px solid transparent;
  border-radius: var(--nvl-radius-sm);
  color: var(--nvl-primary);
  display: inline-flex;
  font-size: .9rem;
  height: 30px;
  justify-content: center;
  text-decoration: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
  width: 30px;
}

.nvl-action-icon:hover,
.nvl-action-icon:focus {
  background: var(--nvl-primary);
  border-color: var(--nvl-primary);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.nvl-action-icon--danger {
  background: var(--nvl-danger-soft);
  color: var(--nvl-danger);
}

.nvl-action-icon--danger:hover,
.nvl-action-icon--danger:focus {
  background: var(--nvl-danger);
  border-color: var(--nvl-danger);
  color: #fff;
}

.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
  color: var(--nvl-text-muted) !important;
}

.dataTables_wrapper .form-select,
.dataTables_wrapper .form-control {
  min-height: 34px;
}

.dt-buttons .btn,
.dataTables_wrapper .dt-button {
  background: var(--nvl-surface-subtle) !important;
  border-color: var(--nvl-border-strong) !important;
  color: var(--nvl-text-muted) !important;
  min-height: 34px;
}

.dt-buttons .btn:hover,
.dt-buttons .btn:focus,
.dataTables_wrapper .dt-button:hover,
.dataTables_wrapper .dt-button:focus {
  background: var(--nvl-primary-soft) !important;
  border-color: var(--nvl-blue-300) !important;
  color: var(--nvl-primary) !important;
}

.pagination .page-link,
.dataTables_wrapper .paginate_button .page-link {
  background: var(--nvl-surface);
  border-color: var(--nvl-border);
  color: var(--nvl-text-muted);
}

.pagination .page-link:hover,
.pagination .page-link:focus,
.dataTables_wrapper .paginate_button .page-link:hover,
.dataTables_wrapper .paginate_button .page-link:focus {
  background: var(--nvl-primary-soft);
  border-color: var(--nvl-blue-300);
  box-shadow: none;
  color: var(--nvl-primary);
}

.pagination .active .page-link,
.dataTables_wrapper .paginate_button.active .page-link {
  background: var(--nvl-primary);
  border-color: var(--nvl-primary);
  color: #fff;
}

.pagination .disabled .page-link,
.dataTables_wrapper .paginate_button.disabled .page-link {
  background: var(--nvl-surface-subtle);
  border-color: var(--nvl-border);
  color: var(--nvl-text-soft);
  opacity: .65;
}

.modal-backdrop.show {
  opacity: .58;
}

.modal-title {
  color: var(--nvl-text);
  font-weight: 700;
}

.alert {
  border-radius: var(--nvl-radius);
}

.alert-info,
.alert-primary,
.alert-success,
.alert-warning {
  background: var(--nvl-primary-soft);
  border-color: var(--nvl-blue-200);
  color: var(--nvl-blue-800);
}

.alert-danger {
  background: var(--nvl-danger-soft);
  border-color: color-mix(in srgb, var(--nvl-danger) 32%, transparent);
  color: var(--nvl-danger);
}

.toast.text-bg-primary {
  background: var(--nvl-primary) !important;
  color: #fff !important;
}

.ui-autocomplete,
.select2-dropdown,
.select2-results,
.select2-container--bootstrap4 .select2-selection {
  background: var(--nvl-surface-raised) !important;
  border-color: var(--nvl-border-strong) !important;
  color: var(--nvl-text) !important;
}

.ui-menu-item-wrapper.ui-state-active,
.select2-results__option--highlighted[aria-selected] {
  background: var(--nvl-primary) !important;
  border-color: var(--nvl-primary) !important;
  color: #fff !important;
}

.front-account-action {
  background: var(--nvl-primary-soft);
  border-color: var(--nvl-blue-200);
  color: var(--nvl-primary);
}

.front-account-action:hover,
.front-account-action:focus {
  background: var(--nvl-primary);
  border-color: var(--nvl-primary);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--nvl-primary) 24%, transparent);
  color: #fff;
}

.front-account-action:focus-visible {
  box-shadow: 0 0 0 .2rem var(--nvl-focus);
}

html[data-theme="dark"] .nvl-status-badge {
  color: var(--nvl-blue-100);
}

html[data-theme="dark"] .nvl-status-badge--pending,
html[data-theme="dark"] .nvl-status-badge--sent,
html[data-theme="dark"] .nvl-status-badge--processed,
html[data-theme="dark"] .nvl-status-badge--paid,
html[data-theme="dark"] .nvl-status-badge--transferred {
  color: var(--nvl-blue-100);
}

.identity-page {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  min-height: min(680px, calc(100vh - 190px));
  padding: clamp(1rem, 4vw, 3.5rem) 0;
}

.identity-card {
  background: var(--nvl-surface);
  border: 1px solid var(--nvl-border);
  border-radius: var(--nvl-radius-lg);
  box-shadow: var(--nvl-shadow-md);
  max-width: 480px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  width: 100%;
}

.identity-card--wide {
  max-width: 560px;
}

.identity-brand {
  display: inline-flex;
  margin-bottom: 2rem;
  text-decoration: none;
}

.identity-brand .brand-logo {
  width: 190px;
}

.identity-eyebrow {
  color: var(--nvl-primary);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  margin-bottom: .65rem;
  text-transform: uppercase;
}

.identity-card h1 {
  color: var(--nvl-text);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 750;
  letter-spacing: -.03em;
  margin-bottom: .75rem;
}

.identity-intro {
  color: var(--nvl-text-muted);
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

.identity-divider {
  align-items: center;
  color: var(--nvl-text-soft);
  display: flex;
  font-size: .8rem;
  gap: .75rem;
  margin: 1.25rem 0;
}

.identity-divider::before,
.identity-divider::after {
  background: var(--nvl-border);
  content: "";
  flex: 1;
  height: 1px;
}

@media (max-width: 767.98px) {
  .card-body {
    padding: 1rem;
  }

  .dt-buttons {
    float: none;
    margin-bottom: .75rem;
  }

  .dataTables_length,
  .dataTables_filter {
    float: none;
    margin-bottom: .75rem;
    text-align: left !important;
  }

  .identity-page {
    padding-top: .5rem;
  }

  .identity-card {
    border-radius: var(--nvl-radius);
    padding: 1.35rem;
  }
}