/* Custom styles for table ======================================================Table */
.grid-view {
  font-size: var(--font-size-body);
}
.grid-view .table > :not(caption) > * > * {
  padding: var(--space-3) var(--space-3);
}
.grid-view thead {
  background: linear-gradient(
    to bottom,
    var(--color-neutral-10) 0%,
    var(--color-neutral-20) 100%
  );
}

.grid-view .kv-panel-before {
  border-bottom: none !important;
}

.grid-view thead th > a,
.grid-view thead th {
  color: var(--color-neutral-90);
  font-weight: var(--bs-body-font-weight);
}

.grid-view th,
.filters td {
  position: relative;
  white-space: nowrap;
  border-right: none !important; /* Remove standard border */
}

.grid-view th:not(:last-child)::after,
.filters td:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%; /* Starts 20% from the top */
  height: 60%; /* Ends 20% from the bottom */
  width: 1px;
  background-color: var(--bs-border-color); /* Separator color */
}
.grid-view th a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.grid-view th a:not(.asc):not(.desc) .kv-sort-icon::before {
  content: "swap_vert";
  color: var(--color-neutral-50); /* Light gray */
  opacity: 0.5;
  font-variation-settings: "wght" 300;
}

.grid-view tbody > tr > td {
  background: var(--color-bg-canvas);
}

.grid-view .kv-sort-link .kv-sort-icon {
  display: flex;
}
.grid-view .kv-sort-link::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
}

.grid-view th a:not(.asc):not(.desc)::after {
  content: "▲\A▼";
  font-variation-settings: "FILL" 1;
  color: var(--bs-border-color);
  font-size: 10px;
  white-space: pre;
  line-height: 9px;
  display: inline-block;
  margin-left: 4px;
}
.grid-view a.asc .kv-sort-icon::before {
  content: "▲";
  font-variation-settings: "FILL" 1;
  color: var(--bs-border-color);
  font-size: 10px;
}

.grid-view a.desc .kv-sort-icon::before {
  content: "▼";
  font-variation-settings: "FILL" 1;
  color: var(--bs-border-color);
  font-size: 10px;
}

/* Custom styles for modal =================================================================== Modal */
.modal-header .btn-close {
  font-size: var(--font-size-small);
}
.modal-open .modal-backdrop {
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 1 !important;
}
.modal-content {
  border-radius: var(--radius-lg);
  background-color: var(--erp-bg);
  /* border: 1px solid var(--erp-modal-border); */
}
.modal-header {
  background-color: var(--erp-modal-header-bg);
  border-bottom-color: var(--erp-modal-border);
}

/* Custom styles for modal close here */

/* Custom styles for _nav */
.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
}
.material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
}

a,
a:hover {
  text-decoration: none;
}

.navbar-brand-custom {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--erp-navbar-fg);
}

.logo-box {
  background-color: var(--erp-logo-bg);
  color: var(--erp-logo-fg);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-3);
  font-weight: 700;
}

.header-icons {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  color: var(--erp-navbar-fg);
  gap: var(--space-2);
}

.erp-top-link {
  color: var(--erp-navbar-fg);
  text-decoration: none;
  font-size: var(--font-size-body);
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.erp-top-link:hover {
  color: var(--erp-navbar-fg);
  background: color-mix(in srgb, var(--erp-navbar-fg) 12%, transparent);
}

.header-icon-btn {
  background: none;
  border: 0;
  color: var(--erp-navbar-fg);
  padding: 0;
  margin-left: var(--space-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-6);
  height: var(--size-6);
  border-radius: 999px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.header-icon-btn:hover {
  color: var(--erp-navbar-fg);
  background: color-mix(in srgb, var(--erp-navbar-fg) 12%, transparent);
}
/* 
.profile-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--erp-profile-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--erp-navbar-fg) 20%, transparent);
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.profile-img:hover {
  background-color: color-mix(
    in srgb,
    var(--erp-profile-bg) 80%,
    var(--erp-navbar-fg) 20%
  );
  transform: translateY(-1px);
} */

/*** Custom styles for sidebar and icons ======================================================_icon_sidebar*/
.icon-sidebar-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.icon-item {
  padding: var(--space-3) 0;
  color: var(--color-secondary-60);
  cursor: pointer;
  width: calc(100% - var(--space-2));
  min-height: calc(var(--size-6) + var(--space-1));
  text-align: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  text-decoration: none;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-item:hover {
  background-color: var(--color-primary-10);
  color: var(--theme-dark);
}

.icon-item.active {
  background-color: var(--color-primary-10);
  color: var(--theme-dark);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--color-primary-60) 30%, transparent);
}

.icon-version {
  font-size: var(--font-size-small);
}

.nav-list {
  list-style: none;
  padding: var(--space-3) var(--space-2);
  margin: 0;
}

/* Custom styles for text sidebar links ======================================================_text_sidebar */
.nav-link-custom {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--bs-body-color);
  text-decoration: none;
  font-size: var(--font-size-body);
  border-radius: var(--radius-md);
  margin: var(--space-1) 0;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.nav-link-custom__content {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
}

.nav-link-custom__icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

/* REQ-526: long labels (e.g. 50-char material names) wrap instead of being
   clipped by the fixed-width sidebar; unbroken words break only if needed. */
.nav-link-custom__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.nav-link-custom:hover {
  background-color: var(--theme-hover);
  color: var(--theme-dark);
}

.nav-link-custom.active {
  background-color: color-mix(
    in srgb,
    var(--theme-active) 75%,
    var(--color-bg-elevated) 25%
  );
  font-weight: 500;
  color: var(--theme-dark);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--color-primary-60) 20%, transparent);
}

.erp-treeview .has-children > .nav-link-custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.erp-treeview .has-children > .nav-link-custom::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  transition: transform 0.2s ease;
}

.erp-treeview .has-children.is-open > .nav-link-custom::after {
  transform: rotate(180deg);
}

.erp-treeview__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.erp-treeview__submenu .nav-link-custom {
  padding-left: var(--space-8);
}

.nav-section-header {
  padding: var(--space-3) var(--space-1) var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary-color, var(--color-text-muted));
  border-top: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
  pointer-events: none;
  user-select: none;
}

.nav-section-header .nav-link-custom__content {
  gap: var(--space-2);
}

.nav-section-header .nav-link-custom__icon {
  font-size: 16px;
  opacity: 0.7;
}

.nav-list > .nav-section-header:first-child {
  border-top: 0;
  margin-top: 0;
}

/*** Custom styles for page header and actions ======================================================_page_header */
.erp-page-header__container {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

.erp-page-header__left {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.erp-page-header__back {
  border: 1px solid var(--bs-border-color);
  background: var(--color-bg-elevated);
}

.erp-page-header__title {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-heading);
}

.erp-page-header__subtitle {
  color: var(--color-secondary-60);
  margin: 0;
}

.erp-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/*** Custom styles for breadcrumb ======================================================_breadcrumb */
.erp-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.erp-breadcrumb__item {
  color: var(--color-secondary-60);
  font-size: var(--font-size-small);
}

.erp-breadcrumb__item:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-2);
}

.erp-breadcrumb__link {
  color: var(--bs-primary);
  text-decoration: none;
}

.erp-breadcrumb__text {
  color: var(--color-secondary-70);
}

/*** Custom styles for notifications and badges ======================================================_notifications */
.erp-notification-badge {
  position: absolute;
  top: calc(var(--space-1) * -1);
  right: calc(var(--space-2) * -1);
  background: var(--bs-danger);
  color: var(--color-neutral-10);
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
}
/* Custom styles for dropdowns ======================================================_dropdown */

/* Action dropdowns inside a grid's .table-responsive scroll container are
   positioned with Popper's `fixed` strategy (web/js/layout.js, BUG-538), so
   they escape the clipping wrapper without touching its overflow. The old
   `.kv-grid-container:has(.dropdown-menu.show) { overflow: visible }` rule
   reset a wide grid's horizontal scroll and threw the menu off-screen. */

/* Hide the dropdown arrow only where explicitly opted out via .no-caret.
   Default .dropdown-toggle elements (report nav, profile) keep their caret. */
.dropdown-toggle.no-caret::after,
.dropdown-toggle.no-caret::before {
  display: none;
}

/* Smooth transition for hover effects */
.dropdown-item {
  transition: background 0.2s ease;
}

/* Custom spacing for the dropdown menu */
.dropdown-menu {
  margin-top: 10px !important;
  border: 1px solid var(--bs-border-color);
  min-width: 220px;
  /* Items run full-width edge-to-edge: remove the menu's horizontal padding
     so item hover/active highlights span the whole menu, no left/right gap. */
  --bs-dropdown-padding-x: 0;
}

/* Active item: the active bg is a pale teal (--theme-active) in light mode,
   so white text is unreadable on it. Use dark text to match the sidebar's
   active state. Dark mode keeps white text on its dark-teal active bg. */
.dropdown-menu {
  --bs-dropdown-link-active-color: var(--theme-dark);
}

[data-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-link-active-color: #fff;
}

/* Speech-bubble arrow indicator pointing from the menu up to its toggle.
   Sits in the 10px margin-top gap; themed bg + border adapt to light/dark.
   (Only correct for menus that open downward — Popper drop-up not handled.) */
.dropdown-menu {
  overflow: visible;
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: 1rem;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--bs-dropdown-bg);
  border-top: 1px solid var(--bs-border-color);
  border-left: 1px solid var(--bs-border-color);
  transform: rotate(45deg);
  pointer-events: none;
}

.dropdown-menu.dropdown-menu-end::before {
  left: auto;
  right: 1rem;
}

/* .card,
.erp-card {
  border: 1px solid var(--bs-border-color);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
} */

.card .card-header,
.erp-card .card-header {
  padding: var(--space-3) var(--space-4);
}

.erp-card__tools {
  display: flex;
  gap: var(--space-2);
}

.erp-card.is-collapsed .card-body,
.erp-card.is-collapsed .erp-card__body {
  display: none;
}

.erp-card.is-removed {
  display: none;
}

.erp-info-box {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--bs-border-color);
}

.erp-info-box__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.erp-info-box__label {
  color: var(--color-secondary-70);
  font-size: var(--font-size-small);
}

.erp-info-box__value {
  font-size: var(--font-size-h4);
  font-weight: 700;
  line-height: var(--line-height-heading);
}

.erp-info-box--primary .erp-info-box__icon {
  background: var(--color-primary-20);
  color: var(--color-primary-90);
}

.erp-info-box--success .erp-info-box__icon {
  background: var(--color-success-20);
  color: var(--color-success-90);
}

.erp-info-box--warning .erp-info-box__icon {
  background: var(--color-warning-20);
  color: var(--color-warning-90);
}

.erp-info-box--danger .erp-info-box__icon {
  background: var(--color-danger-20);
  color: var(--color-danger-90);
}

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

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

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

.erp-badge-status--danger {
  background-color: var(--erp-status-danger-bg);
  color: var(--erp-status-danger-fg);
}

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

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

.erp-badge-token {
  border: 1px solid transparent;
}

.erp-badge-token--success {
  background-color: var(--erp-status-success);
  color: var(--color-success-100);
}

.erp-badge-token--warning {
  background-color: var(--erp-status-warning);
  color: var(--color-warning-100);
}

.erp-badge-token--danger {
  background-color: var(--erp-status-danger);
  color: var(--color-danger-100);
}

.form-container {
  position: relative;
  padding-bottom: var(--space-8);
}

.form-container::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  bottom: 0;
  border-bottom: 1px solid var(--bs-border-color);
  pointer-events: none;
}

form div.required > label::after,
label.required::after {
  content: " *";
  color: red;
  /* margin-left: 0.25rem;  */
}

.form-control[readonly] {
  background-color: var(--bs-white); /* Bootstrap 5 */
  opacity: 1;
  /* cursor: not-allowed; */
  color: var(--bs-secondary-color);
}

.form-control,
.form-select {
  border-radius: var(--radius-md);
}

.select2-container--bootstrap5 .select2-selection {
  border-radius: var(--radius-md);
}

.select2-container--krajee-bs5
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary-10) !important;
  color: var(--color-primary-100) !important;
}

.select2-container--bootstrap .select2-search--inline .select2-search__field {
  width: 100% !important;
  min-width: 200px;
}

.is-invalid {
  border-color: var(--bs-danger);
}

.rupee-field .form-control {
  padding-left: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Ctext x='4' y='18' font-size='16' font-family='Arial'%3E₹%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.7rem center;
  background-size: 1.3rem;
}
.date-field .form-control {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.1rem;
  background-color: inherit !important;
  color: inherit !important;
}

/* 1. Remove validation icons and extra padding from inputs */
.form-control.is-valid,
.form-control.is-invalid {
  background-image: none !important;
  padding-right: 0.75rem !important; /* Reset to standard BS5 padding */
}

/* Keep the ₹ / calendar field icons visible in validation states. The reset
   above strips BS5's validation tick/cross (also a background-image), but it
   would otherwise also wipe the rupee/date icons once a value is entered and
   the field gets is-valid/is-invalid. Re-assert those background icons. */
.rupee-field .form-control.is-valid,
.rupee-field .form-control.is-invalid {
  padding-left: 2.2rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Ctext x='4' y='18' font-size='16' font-family='Arial'%3E₹%3C/text%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 0.7rem center !important;
  background-size: 1.3rem !important;
}
.date-field .form-control.is-valid,
.date-field .form-control.is-invalid {
  padding-right: 2.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1.1rem !important;
}

/* 2. Fix for form-select (Dropdowns) */
/* We keep the default arrow but remove the validation icon overlay */
.form-select.is-valid,
.form-select.is-invalid {
  /* BS5 combines the arrow and icon in one background-image property. 
       This resets it back to only the default dropdown arrow. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.25rem !important; /* Keep space for the arrow only */
}

.erp-overlay {
  position: absolute;
  inset: 0;
  background: var(--erp-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.erp-elevation-sm {
  box-shadow: var(--shadow-sm);
}

.erp-bg-surface {
  background: var(--color-bg-surface);
}

.theme-space-box {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--bs-border-color);
  background: var(--color-bg-surface);
}

.theme-utility-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.erp-text-muted {
  color: var(--color-neutral-60);
}

.company-setting-border-end {
  border-right: 1px solid var(--color-secondary-20);
}

.company-setting-logo-circle {
  background-color: var(--color-bg-surface);
  border: 2px dashed var(--color-neutral-30);
  width: 11.25rem;
  height: 11.25rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.company-setting-logo-circle:hover {
  background-color: var(--color-secondary-10);
  border-color: var(--color-neutral-50);
}

.company-setting-logo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-setting-logo-icon {
  font-size: 3rem;
}

.company-setting-logo-upload-icon {
  font-size: 2.5rem;
}

.company-setting-info-label {
  font-size: var(--font-size-small);
  text-transform: capitalize;
  letter-spacing: 0.5px;
  color: var(--color-secondary-60);
  font-weight: 700;
  min-width: 11.25rem;
  display: flex;
  align-items: center;
}

.company-setting-info-value {
  font-weight: 500;
  color: var(--bs-body-color);
  flex: 1;
}

.company-setting-detail-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--bs-border-color);
  width: 100%;
}

.company-setting-detail-row:last-child {
  border-bottom: 0;
}

.company-setting-section-separator {
  font-size: var(--font-size-small);
  font-weight: 800;
  color: var(--bs-primary);
  text-transform: capitalize;
  letter-spacing: 1.2px;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--bs-border-color);
  display: block;
}

.company-setting-form-title {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--bs-border-color);
}

@media (max-width: 991.98px) {
  .erp-top-link {
    display: none;
  }

  .erp-page-header__container {
    align-items: flex-start;
  }

  .company-setting-border-end {
    border-right: 0;
  }
}

/* Chip */
.chip-primary {
  background-color: var(--color-primary-10);
  border: 1px solid var(--color-primary-40);
  color: var(--color-primary-80);
}
.chip-secondary {
  background-color: var(--color-secondary-10);
  border: 1px solid var(--color-secondary-40);
  color: var(--color-secondary-80);
}
.chip-success {
  background-color: var(--color-success-10);
  border: 1px solid var(--color-success-40);
  color: var(--color-success-80);
}
.chip-warning {
  background-color: var(--color-warning-10);
  border: 1px solid var(--color-warning-40);
  color: var(--color-warning-80);
}
.chip-danger {
  background-color: var(--color-danger-10);
  border: 1px solid var(--color-danger-40);
  color: var(--color-danger-80);
}

/* Attendance sheet day-cell status picker: a compact <select> in a ~52px column.
   Bootstrap's .form-select reserves ~2rem on the right for the caret background,
   which overlaps the single status code (P/HD/WO…) in such a narrow cell. Drop the
   caret and its padding so the code stays centred and fully visible; the native
   dropdown still opens on click. */
.attendance-cell-select {
  background-image: none !important;
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
  text-align: center;
  text-align-last: center;
}

/* Detail-page header card. A faint brand wash rather than a flat white panel:
   the tint anchors the card as the page's identity block without turning it
   into a coloured banner — the client rejected the previous header for reading
   as decoration, so the gradient stays subtle enough that body text keeps its
   normal contrast and the status chips remain the only saturated colour.
   135deg puts the strongest tint at the top-left, behind the project name. */
.erp-detail-header {
  background-image: linear-gradient(
    135deg,
    var(--color-primary-10) 0%,
    var(--color-primary-10) 18%,
    var(--erp-bg) 62%
  );
  border-color: var(--color-primary-30) !important;
}

/* Dark theme: --color-primary-10 is a near-white tint that would glare against
   the dark canvas, so the wash is mixed from the mid teal into the elevated
   surface instead, keeping the same top-left-to-bottom-right direction. */
[data-theme="dark"] .erp-detail-header {
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary-60) 22%, var(--color-bg-elevated)) 0%,
    color-mix(in srgb, var(--color-primary-60) 22%, var(--color-bg-elevated)) 18%,
    var(--color-bg-surface) 62%
  );
  border-color: color-mix(
    in srgb,
    var(--color-primary-60) 35%,
    var(--color-neutral-40)
  ) !important;
}