:root {
  --app-header-control-size: 2.9rem;
  --app-header-control-radius: 0.9rem;
  --app-header-control-border: #dbe3ee;
  --app-card-border: #edf1f7;
  --app-card-shadow: 0 0.5rem 1.35rem rgba(15, 23, 42, 0.06);
  /* Height of the fixed top navbar (.main-header). Used to offset sticky
     in-page headers so they park just below it instead of behind it. */
  --app-navbar-h: 73px;
}

/* KaiAdmin sets `.main-panel > .container { overflow: hidden }`, which makes it
   a scroll container and silently disables position:sticky for everything
   inside (the sticky header would just scroll away). Switch to overflow-x:clip
   — identical horizontal clipping (keeps wide tables contained) but it does NOT
   establish a scroll container, so descendant sticky works again. */
.main-panel > .container {
  overflow: visible;
  overflow-x: clip;
}

/* Document-form header: keep the title/status + Save/Post/Cancel actions
   reachable while scrolling a long form (no need to scroll back to the top).
   Sticks just below the fixed top navbar (z-index 1010), so sits under it. */
.erp-doc-header.erp-doc-header {
  position: sticky;
  top: var(--app-navbar-h, 73px);
  z-index: 1000;
  box-shadow: 0 0.35rem 0.8rem rgba(15, 23, 42, 0.06);
}

.app-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
}

.app-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.85rem;
  background: linear-gradient(180deg, #2a85ff, #1572e8);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 10px 18px rgba(21, 114, 232, 0.2);
}

.app-logo-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
}

.app-logo-title {
  color: #2a2f5b;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.app-logo-subtitle {
  display: none;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  font-weight: 500;
}

.card {
  border: 1px solid var(--app-card-border);
  border-radius: 1.15rem;
  box-shadow: var(--app-card-shadow);
}

.card.card-round {
  border-radius: 1.25rem;
}

.card .card-header {
  padding: 1rem 1.25rem;
  background: transparent;
  border-bottom: 1px solid #eef2f7;
}

.card .card-title {
  margin: 0;
  color: #2a2f5b;
  font-weight: 600;
}

.card .card-body {
  padding: 1.25rem;
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  min-width: 0;
}

.app-navbar-title-block,
.app-navbar-title .input-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  min-width: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.app-navbar-caption {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d8da6;
}

.app-navbar-heading {
  font-size: 1.18rem;
  font-weight: 600;
  color: #2a2f5b;
  line-height: 1.1;
  text-shadow: none;
}

.app-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--app-header-control-size);
  height: var(--app-header-control-size);
  padding: 0 !important;
  border: 1px solid var(--app-header-control-border) !important;
  border-radius: var(--app-header-control-radius) !important;
  background: var(--g-bg-card, #fff) !important;
  color: var(--g-text-secondary, #526074) !important;
  box-shadow: none !important;
}

.app-menu-toggle i {
  font-size: 1rem;
  line-height: 1;
}

/* First-run base-currency setup modal */
.g-base-setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.g-base-setup-card {
  width: min(420px, 100%);
  padding: 1.7rem;
  text-align: center;
  background: var(--g-bg-card, #fff);
  border: 1px solid var(--g-border, #e7e5e4);
  border-radius: var(--g-radius-lg, 0.9rem);
  box-shadow: var(--g-shadow-lg, 0 1.25rem 3rem rgba(0, 0, 0, 0.25));
}
.g-base-setup-icon {
  font-size: 2.2rem;
  line-height: 1;
  color: var(--g-primary, #0f766e);
  margin-bottom: 0.6rem;
}
.g-base-setup-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--g-text-primary, #1c1917);
}
.g-base-setup-card p {
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--g-text-secondary, #57534e);
}
.g-base-setup-options {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}
.g-base-setup-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--g-border, #e7e5e4);
  border-radius: var(--g-radius, 0.65rem);
  background: var(--g-bg-card, #fff);
  color: var(--g-text-primary, #1c1917);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--g-transition, 0.15s ease);
}
.g-base-setup-option:hover {
  border-color: var(--g-gray-300, #cfd8e4);
  background: var(--g-gray-50, #fafaf9);
}
.g-base-setup-option .g-base-setup-cur {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.g-base-setup-option .g-base-setup-sym {
  color: var(--g-text-tertiary, #8d9498);
  font-weight: 500;
}
.g-base-setup-option .g-base-setup-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--g-text-tertiary, #8d9498);
}
.g-base-setup-option .g-base-setup-check {
  margin-left: auto;
  opacity: 0;
  color: var(--g-primary, #0f766e);
}
.g-base-setup-option.is-selected {
  border-color: var(--g-primary, #0f766e);
  background: var(--g-primary-50, #f0fdfa);
}
.g-base-setup-option.is-selected .g-base-setup-check {
  opacity: 1;
}
.g-base-setup-create {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 auto 1rem;
  padding: 0.35rem 0.6rem;
  border: 1px dashed var(--g-border, #e7e5e4);
  border-radius: var(--g-radius-sm, 0.5rem);
  background: transparent;
  color: var(--g-primary, #0f766e);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.g-base-setup-create:hover {
  background: var(--g-primary-50, #f0fdfa);
}

.app-toolbar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 3.2rem;
  min-height: 2.7rem;
  padding: 0.62rem 0.95rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.9rem;
  background: #fff;
  color: #49566b;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
}

.topbar-nav {
  gap: 0.65rem;
}

.topbar-nav .nav-item {
  display: inline-flex;
  align-items: center;
}

.topbar-nav .app-toolbar-chip {
  gap: 0;
  width: var(--app-header-control-size);
  height: var(--app-header-control-size);
  min-width: var(--app-header-control-size);
  min-height: var(--app-header-control-size);
  padding: 0 !important;
  border: 1px solid var(--app-header-control-border) !important;
  border-radius: var(--app-header-control-radius) !important;
  background: #fff !important;
}

/* Top-bar "＋ Create" quick-action button — primary teal, aligned to the chips. */
.topbar-nav .app-quick-create {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: var(--app-header-control-size, 2.9rem);
  padding: 0 1.05rem;
  border-radius: var(--app-header-control-radius, 0.9rem);
  font-weight: 600;
  white-space: nowrap;
}
.topbar-nav .app-quick-create.dropdown-toggle::after {
  display: none;
}
.topbar-nav .app-quick-create .bi {
  font-size: 1rem;
}

.topbar-nav .app-toolbar-chip span[data-lang-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  color: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1;
}

/* Display-currency chip: auto-width (fits the code), a bit larger/bolder than the
   icon-only chips so it reads as a real control. */
.topbar-nav [data-currency-switch-wrap] .app-toolbar-chip {
  width: auto;
  min-width: var(--app-header-control-size);
  padding: 0 1rem !important;
  gap: 0.45rem;
}
.topbar-nav [data-currency-switch-wrap] .app-toolbar-chip .bi {
  font-size: 1.15rem;
}
.topbar-nav [data-currency-switch-label] {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.app-toolbar-chip:hover,
.app-toolbar-chip:focus,
.app-toolbar-chip:active {
  background: #f7f9fc !important;
  border-color: #cfd8e4 !important;
  color: #243349 !important;
}

.app-toolbar-chip.dropdown-toggle::after {
  display: none !important;
}

.app-theme-toggle i {
  font-size: 0.98rem;
}

.app-toolbar-menu {
  min-width: 8rem;
  padding: 0.45rem;
  border: 1px solid #e4eaf2;
  border-radius: 0.9rem;
  box-shadow: 0 0.65rem 1.4rem rgba(15, 23, 42, 0.08);
}

.app-toolbar-menu .dropdown-item {
  border-radius: 0.7rem;
  padding: 0.56rem 0.8rem;
  color: #4b5768;
  font-weight: 500;
}

.app-toolbar-menu .dropdown-item.active,
.app-toolbar-menu .dropdown-item:active {
  background: #6861ce;
  color: #fff;
}

.topbar-user .profile-pic {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
}

.topbar-user .profile-username {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

.topbar-user .profile-username .op-7 {
  color: #7d8da6;
}

.topbar-user .profile-username .fw-bold {
  color: #2a2f5b;
}

.topbar-user .avatar-title {
  font-weight: 700;
}

.topbar-user .avatar-sm,
.topbar-user .avatar-sm .avatar-title {
  width: 2.55rem;
  height: 2.55rem;
  font-size: 1rem;
}

.mobile-user-meta {
  min-width: 0;
}

.mobile-user-name {
  color: #2a2f5b;
  font-size: 0.92rem;
  font-weight: 600;
}

.mobile-user-role {
  color: #7d8da6;
  font-size: 0.78rem;
}

.app-sidebar .nav-link .nav-icon {
  width: 1.15rem;
  margin-right: 0.78rem;
  font-size: 0.98rem;
  opacity: 0.84;
  text-align: center;
}

.app-sidebar .nav-link:hover .nav-icon,
.app-sidebar .nav-link.active .nav-icon,
.app-sidebar .nav-item.menu-open > .nav-link .nav-icon {
  opacity: 1;
}

.app-header {
  background: #fff;
}

.main-header {
  min-height: 73px;
}

.app-sidebar .logo-header {
  border-bottom: 1px solid var(--g-border, #f0f1f3);
}

.app-sidebar .nav > .nav-item.submenu {
  background: transparent !important;
}

.app-sidebar .nav > .nav-item > a {
  width: auto;
  margin: 0 12px 3px;
  padding: 8px 14px;
  border-radius: 12px;
}

.app-sidebar .nav > .nav-item > .nav-treeview {
  margin-bottom: 0.35rem;
  overflow-x: hidden;
}

.app-sidebar .nav > .nav-item > .nav-treeview a {
  width: auto;
  margin: 0 12px 3px;
  padding: 7px 14px 7px 42px;
  border-radius: 10px;
}

.app-sidebar[data-background-color="white"] .nav > .nav-item > a:hover,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a:hover {
  background: #f5f7fd;
}

.app-sidebar[data-background-color="white"] .nav > .nav-item.active > a,
.app-sidebar[data-background-color="white"] .nav > .nav-item > a.active,
.app-sidebar[data-background-color="white"] .nav > .nav-item.menu-open > a.active {
  background: rgba(0, 0, 0, 0.04) !important;
}

.app-sidebar[data-background-color="white"] .nav > .nav-item > a,
.app-sidebar[data-background-color="white"] .nav > .nav-item > a p,
.app-sidebar[data-background-color="white"] .nav > .nav-item > a .nav-icon,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a p,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a .nav-icon,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a span {
  color: #5b6474 !important;
}

[data-theme="light"] .badge.bg-success-subtle,
[data-theme="light"] .badge.text-bg-success-subtle {
  color: #198754 !important;
  background: #e8f7ee !important;
  border-color: #bfe8cf !important;
}

[data-theme="light"] .badge.bg-secondary-subtle,
[data-theme="light"] .badge.text-bg-secondary,
[data-theme="light"] .badge.text-bg-secondary-subtle {
  color: #6c757d !important;
  background: #eef1f4 !important;
  border-color: #d8dee6 !important;
}

[data-theme="light"] .badge.bg-light,
[data-theme="light"] .badge.text-bg-light {
  color: #5b6474 !important;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .badge.bg-primary-subtle,
[data-theme="light"] .badge.text-bg-primary-subtle {
  color: #0d6efd !important;
  background: #e9f2ff !important;
  border-color: #cfe2ff !important;
}

.page-category:empty {
  display: none;
}

#view {
  display: grid;
  gap: 1rem;
}

.app-page-header {
  margin-bottom: 0.35rem;
}

.app-page-header + .page-category {
  margin-top: -0.35rem;
}

.footer .copyright,
.footer .container-fluid > div {
  font-size: 0.88rem;
}

.mobile-sidebar-controls {
  margin-top: auto;
  padding: 1rem 1.5rem 0;
}

.mobile-controls-title {
  margin-bottom: 0.45rem;
  color: #7d8da6;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mobile-controls-section + .mobile-controls-section {
  margin-top: 0.5rem;
}

.mobile-controls-user {
  margin-top: 0.6rem;
}

[data-theme="light"] .dropdown-menu,
[data-theme="light"] .dropdown-user,
[data-theme="light"] .user-box,
[data-theme="light"] .u-text,
[data-theme="light"] .u-text h4,
[data-theme="light"] .u-text p,
[data-theme="light"] .u-text .small,
[data-theme="light"] .mobile-user-name,
[data-theme="light"] .mobile-user-role {
  color: #4b5768 !important;
}

[data-theme="light"] .card,
[data-theme="light"] .card .card-body,
[data-theme="light"] .card .card-header,
[data-theme="light"] .card .card-text,
[data-theme="light"] .card label,
[data-theme="light"] .table,
[data-theme="light"] .table td,
[data-theme="light"] .table th {
  color: #4b5768;
}

[data-theme="light"] .card .card-title,
[data-theme="light"] .table thead th,
[data-theme="light"] .app-data-table thead th,
[data-theme="light"] .app-navbar-heading,
[data-theme="light"] .page-title {
  color: #2a2f5b !important;
}

[data-theme="light"] .dropdown-menu {
  background: #fff !important;
}

[data-theme="light"] .app-sidebar .nav > .nav-item > .nav-treeview {
  background: transparent;
}

[data-theme="light"] .app-sidebar .nav > .nav-item > .nav-treeview a,
[data-theme="light"] .app-sidebar .nav > .nav-item > .nav-treeview a .sub-item,
[data-theme="light"] .app-sidebar .nav > .nav-item > .nav-treeview a span,
[data-theme="light"] .app-sidebar .nav > .nav-item > .nav-treeview a p {
  color: #5b6474 !important;
}

.table-wrap {
  overflow: auto;
}

.form-control,
.form-select {
  min-height: 2.8rem;
  border-color: #dbe3ee;
  border-radius: 0.8rem;
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: #9cb9ff;
  box-shadow: 0 0 0 0.22rem rgba(21, 114, 232, 0.12);
}

.app-navline-card .card-body {
  padding: 1.2rem 1.25rem;
}

.app-navline-title {
  margin-bottom: 0.85rem;
  color: #7d8da6;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-nav-line {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid #e8edf5;
}

.app-nav-line-tab {
  position: relative;
  padding: 0.15rem 0 0.8rem;
  border: 0;
  background: transparent;
  color: #5b6474;
  font-size: 0.98rem;
  font-weight: 500;
}

.app-nav-line-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transition: background 0.16s ease;
}

.app-nav-line-tab:hover {
  color: #3d4f67;
}

.app-nav-line-tab.is-active {
  color: var(--g-primary-dark, #0f766e);
}

.app-nav-line-tab.is-active::after {
  background: var(--g-primary, #0f766e);
}

.app-data-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.app-data-table thead th {
  position: relative;
  padding: 1rem 1rem;
  border-bottom: 1px solid #e8edf5;
  color: #2a2f5b;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-data-table tbody td {
  padding: 1rem 1rem;
  border-top: 1px solid #edf1f7;
  color: #49566b;
  vertical-align: middle;
}

.app-data-table tbody tr:hover td {
  background: #fbfcff;
}

.app-toast-stack {
  position: fixed;
  z-index: 1095;
  display: grid;
  gap: 0.75rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.app-toast-stack.is-top-right {
  top: 1.15rem;
  right: 1rem;
}

.app-toast-stack.is-bottom-right {
  right: 1rem;
  bottom: 1rem;
}

.app-toast {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.95rem 1rem;
  border: 1px solid #e6ebf3;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0.85rem 2rem rgba(15, 23, 42, 0.12);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: auto;
  cursor: pointer;
}

.app-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.app-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.85rem;
  font-size: 1rem;
}

.app-toast-body {
  min-width: 0;
}

.app-toast-title {
  color: #1f2a3d;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
}

.app-toast-text {
  margin-top: 0.2rem;
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.4;
}

.app-toast.is-info .app-toast-icon {
  color: #1572e8;
  background: #edf5ff;
}

.app-toast.is-success .app-toast-icon {
  color: #31ce36;
  background: #edf9ee;
}

.app-toast.is-warning .app-toast-icon {
  color: #ffad46;
  background: #fff7e8;
}

.app-toast.is-danger .app-toast-icon {
  color: #f25961;
  background: #fff0f1;
}

.swal-modal {
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.18);
}

.swal-title {
  color: #1f2a3d;
  font-size: 1.55rem;
  font-weight: 700;
}

.swal-text {
  color: #64748b;
  font-size: 0.98rem;
  line-height: 1.55;
}

.swal-button {
  border-radius: 0.8rem;
  font-weight: 600;
}

.small-box {
  position: relative;
  overflow: hidden;
  min-height: 148px;
  padding: 1.25rem;
  border: 1px solid var(--app-card-border);
  border-radius: 1.15rem;
  box-shadow: var(--app-card-shadow);
  background: #fff;
}

.small-box .inner h3 {
  margin-bottom: 0.2rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.small-box .inner p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.small-box .small-box-icon {
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  font-size: 2.9rem;
  opacity: 0.18;
}

.app-widget-stat {
  height: 100%;
}

.app-widget-stat .card-body {
  padding: 1.1rem 1.2rem;
}

.app-widget-stat-grid {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.app-widget-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 1rem;
  font-size: 1.28rem;
  box-shadow: 0 0.55rem 1.2rem rgba(104, 97, 206, 0.16);
}

.app-widget-stat-icon.is-primary {
  color: #1572e8;
  background: #eef5ff;
}

.app-widget-stat-icon.is-danger {
  color: #f25961;
  background: #fff0f1;
}

.app-widget-stat-icon.is-info {
  color: #48abf7;
  background: #eef8ff;
}

.app-widget-stat-icon.is-success {
  color: #31ce36;
  background: #edf9ee;
}

.app-widget-stat-icon.is-warning {
  color: #ffad46;
  background: #fff7e8;
}

.app-widget-stat-copy {
  min-width: 0;
  display: grid;
  gap: 0.22rem;
}

.app-widget-stat-label {
  margin: 0;
  color: #7d8da6;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-widget-stat-value {
  margin: 0;
  color: #2a2f5b;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.app-widget-stat-note {
  margin: 0;
  color: #6b7b93;
  font-size: 0.85rem;
  line-height: 1.35;
}

.entity-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.entity-page-header h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
}

.form-label.is-required::after {
  content: " *";
  color: var(--bs-danger, #dc3545);
  font-weight: 600;
}

.form-section-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border: none;
  background: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--bs-body-color);
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.form-section-toggle::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s;
}

.form-section-toggle.collapsed::before {
  transform: rotate(45deg);
}

.form-section-body {
  padding-bottom: 0.5rem;
}

.form-section-body.collapsed {
  display: none;
}

.form-section + .form-section {
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.select-with-create {
  display: flex;
  gap: 0.4rem;
  align-items: start;
}

.select-with-create select {
  flex: 1;
}

.select-with-create .btn-create-inline {
  padding: 0.375rem 0.6rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.checkbox-list {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  overflow-y: auto;
  padding: 0.25rem 0;
  background: var(--bs-body-bg, #fff);
}

.checkbox-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 0.1s;
}

.checkbox-list-item:hover {
  background: var(--bs-tertiary-bg, #f8f9fa);
}

.checkbox-list-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--bs-primary, #0d6efd);
}

.checkbox-list-empty {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
}

/* Brand all checkboxes / switches teal (Bootstrap defaults to blue). */
.form-check-input:checked {
  background-color: var(--g-primary, #0f766e);
  border-color: var(--g-primary, #0f766e);
}
.form-check-input:focus {
  border-color: var(--g-primary-light, #14b8a6);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--g-primary, #0f766e) 25%, transparent);
}

/* Toggle switch (boolSwitch): label to the right of the track, full control
   over layout so it centers cleanly inside form rows. */
.g-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
  min-height: 3rem;
  margin-bottom: 0;
}
.g-switch .form-check-input {
  float: none;
  width: 3em;
  height: 1.6em;
  margin: 0;
  cursor: pointer;
}
.g-switch .form-check-input:disabled {
  opacity: 0.5;
}
.g-switch .form-check-label {
  margin: 0 0 0 0.7rem;
  cursor: pointer;
  font-size: 1rem;
}

/* Tom Select multi-select chips → brand teal (CDN default is grey/blue). */
.ts-wrapper.multi .ts-control > .item {
  background: var(--g-primary-50, #f0fdfa);
  color: var(--g-primary-dark, #0f766e);
  border: 1px solid var(--g-primary-light, #14b8a6);
  border-radius: 0.5rem;
  font-weight: 500;
}
.ts-wrapper.multi .ts-control > .item.active {
  background: var(--g-primary-100, #ccfbf1);
  color: var(--g-primary-dark, #0f766e);
  border-color: var(--g-primary, #0f766e);
}
.ts-wrapper.multi.plugin-remove_button .item .remove {
  border-left-color: var(--g-primary-light, #14b8a6);
  color: var(--g-primary-dark, #0f766e);
}
.ts-wrapper.multi.plugin-remove_button .item .remove:hover {
  background: var(--g-primary-100, #ccfbf1);
  color: var(--g-primary-dark, #0f766e);
}
/* Dropdown highlighted option → brand teal (default is light blue). */
.ts-dropdown .active {
  background: var(--g-primary-50, #f0fdfa);
  color: var(--g-primary-dark, #0f766e);
}

.select-with-create .btn-create-inline[href] {
  text-decoration: none;
  font-size: 0.85rem;
}

.entity-toolbar-card .card-body,
.erp-toolbar-card .card-body,
.erp-summary-card .card-body,
.erp-section-card .card-body,
.price-doc-hero .card-body,
.price-doc-lines-card .card-body {
  padding: 1.25rem;
}

.entity-toolbar-shell {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.entity-toolbar-main {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.85rem;
}

.entity-toolbar-item {
  display: grid;
  gap: 0.35rem;
  grid-column: span 3;
}

.entity-toolbar-search {
  grid-column: span 5;
}

.entity-toolbar-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.entity-toolbar-btn {
  min-width: 9rem;
}

.entity-mobile-card {
  border-radius: 0.9rem;
}

.category-tree-card .card-body {
  padding: 0;
}

.category-tree {
  display: grid;
}

.category-tree-head,
.category-tree-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid #ebecec;
}

.category-tree-head {
  color: #8d9498;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #fafbfd;
}

.category-tree-name {
  min-width: 0;
  padding-left: calc(var(--tree-depth, 0) * 1.25rem);
}

.category-tree-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-weight: 600;
}

.category-tree-actions {
  display: flex;
  justify-content: flex-end;
}

.price-doc-page {
  display: grid;
  gap: 1rem;
}

.price-doc-page-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.price-doc-lines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.price-doc-lines-empty {
  padding: 1rem 1.1rem;
  border: 1px dashed #dfe3ea;
  border-radius: 0.75rem;
  color: #8d9498;
  background: #fafbfd;
}

.price-doc-matrix-wrap {
  overflow: auto;
  border: 1px solid #ebecec;
  border-radius: 0.75rem;
}

.price-doc-matrix-table {
  min-width: 980px;
}

.price-doc-target-col,
.price-doc-target-cell {
  min-width: 240px;
}

.price-doc-value-cell {
  min-width: 140px;
}

.price-doc-delta-cell {
  min-width: 120px;
}

.price-doc-target-static,
.price-doc-value-static {
  display: flex;
  align-items: center;
  min-height: 2.85rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid #ebecec;
  border-radius: 0.65rem;
  background: #f8fafc;
  font-weight: 600;
}

.price-doc-delta {
  text-align: right;
  font-weight: 600;
}

.price-doc-remove-col,
.price-doc-remove-cell {
  width: 68px;
  text-align: center;
}

.price-doc-remove-btn {
  min-width: 2.4rem;
  padding-left: 0;
  padding-right: 0;
}

/* Inline save error: only takes space when it actually has a message. */
.price-doc-save-error {
  margin-top: 0.5rem;
}
.price-doc-save-error:empty {
  display: none;
}

.erp-page {
  display: grid;
  gap: 1rem;
}

.erp-breadcrumbs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: #8d9498;
  font-size: 0.9rem;
  font-weight: 500;
}

.erp-breadcrumbs a {
  color: #8d9498;
}

.erp-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.erp-title {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #2a2f5b;
}

.erp-title-muted {
  color: #8d9498;
  font-weight: 400;
}

.erp-title-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.erp-status-pill,
.erp-doc-badge,
.erp-pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.erp-status-pill.is-posted,
.erp-doc-badge.is-posted,
.erp-pay-badge.is-paid {
  color: #31ce36;
  background: rgba(49, 206, 54, 0.12);
}

.erp-status-pill.is-draft,
.erp-doc-badge.is-draft,
.erp-pay-badge.is-empty {
  color: #8d9498;
  background: rgba(141, 148, 152, 0.14);
}

/* Two-step transfers: in transit / received-with-discrepancy states. */
.erp-status-pill.is-pending {
  color: #ffad46;
  background: rgba(255, 173, 70, 0.14);
}

.erp-status-pill.is-warning {
  color: #f25961;
  background: rgba(242, 89, 97, 0.12);
}

.erp-pay-badge.is-partial {
  color: #ffad46;
  background: rgba(255, 173, 70, 0.14);
}

.erp-pay-badge.is-unpaid {
  color: #f25961;
  background: rgba(242, 89, 97, 0.14);
}

.erp-doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(220px, 0.62fr);
  gap: 1rem;
  align-items: stretch;
}

.erp-doc-grid > .d-grid {
  display: contents !important;
}

.erp-doc-grid > .d-grid > .card.erp-section-card:first-child {
  grid-column: 1;
  grid-row: 1;
  /* Fill the row so the products card and the summary card are the same
     height (their grid row stretches to the taller of the two). */
  height: 100%;
  /* Allow the card to be narrower than the (min-width'd) lines table so the
     table scrolls inside it instead of blowing out the whole grid column. */
  min-width: 0;
}

.erp-doc-grid > .d-grid > .card.erp-section-card:nth-child(n+2) {
  grid-column: 1 / -1;
  min-width: 0;
}

.erp-doc-grid > .erp-doc-summary {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.erp-summary-card {
  position: sticky;
  top: 90px;
  height: 100%;
}

/* Fill the (stretched) height by distributing the blocks evenly rather than
   leaving one big gap above the button: the label rows spread to take up the
   slack, then the total + button anchor the bottom. */
.erp-summary-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.erp-summary-card .erp-summary-stack {
  flex: 1 1 auto;
  /* Keep the label rows tight at the top (not spread down the panel); the total
     block anchors the bottom via the flex fill. */
  align-content: start;
}

.erp-summary-card .erp-summary-total {
  margin-top: 0;
}

[data-doc-tab-panel="payment"] .erp-summary-card {
  position: static;
  top: auto;
}

.erp-summary-stack {
  display: grid;
  gap: 0.8rem;
}

.erp-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #686f76;
}

.erp-summary-row strong {
  color: #2a2f5b;
}

.erp-summary-total {
  padding-top: 1rem;
  border-top: 1px solid #ebecec;
}

.erp-summary-total strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
  color: #1572e8;
  letter-spacing: -0.04em;
}

.erp-section-title {
  margin-bottom: 1rem;
  font-size: 1.03rem;
  font-weight: 700;
  color: #2a2f5b;
}

/* Fixed 4-column grid (not auto-fit): the full-width "Sale type" control spans
   every track, which would stop auto-fit from collapsing the surplus tracks and
   leave the four meta fields squeezed at their min width. Four fixed columns
   spread them across the whole card instead. */
.erp-doc-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem 1rem;
  align-items: start;
}

/* Focused, compact form: three columns filling the card width so the fields
   read as a balanced grid instead of bunching to the left (used by the cash
   document form). */
.erp-doc-fields--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.erp-doc-field {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

/* The grid display above overrides the [hidden] attribute, so conditionally
   hidden fields (transfer/conversion-only inputs) stayed visible. Restore it. */
.erp-doc-field[hidden] {
  display: none;
}

/* Plain controls that sit directly in the field (e.g. the date input, the
   bare supplier select) fill the field cell. NB: this must NOT cascade onto
   the input inside a lookup's .input-group — forcing that input to 100% breaks
   the input-group flex and wraps the magnifier / ＋ buttons onto a second line,
   so we only target the field's *direct* control. */
.erp-doc-field > .form-control,
.erp-doc-field > .form-select,
.erp-doc-field > .ts-wrapper {
  width: 100%;
}

/* Search/lookup fields keep the input + buttons (+ the ↗ create link) on one
   line: the wrapper fills the field, the lookup (or Tom Select) grows beside
   the link, and its input-group fills the available width. */
.erp-doc-field .select-with-create {
  width: 100%;
}

.erp-doc-field .select-with-create > .erp-lookup,
.erp-doc-field .select-with-create > .ts-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

/* Bare lookup (no create link, e.g. supplier) fills its field cell. */
.erp-doc-field > .erp-lookup {
  width: 100%;
}

.erp-doc-field .erp-lookup .input-group {
  width: 100%;
}

.erp-doc-field.is-span-2 {
  grid-column: span 2;
}

.erp-doc-field.is-span-full {
  grid-column: 1 / -1;
}

/* Sale-type segmented control — minimal, single brand accent, theme-aware.
   Neutral track; the selected segment fills with the brand teal. All colors
   come from theme tokens so it adapts to dark mode automatically. */
.erp-sale-type {
  border: 1px solid var(--g-border, #e7e5e4);
  border-radius: var(--g-radius, 8px);
  background: var(--g-bg-card, #fff);
  overflow: hidden;
}

.erp-sale-type .btn {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--g-gray-100, #f5f5f4);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--g-primary, #0f766e);
  --bs-btn-active-border-color: var(--g-primary, #0f766e);
  /* KaiAdmin sets `label { color: #495057 !important }`, so the text color
     must be forced here with !important — a custom property can't win. */
  color: var(--g-text-secondary, #57534e) !important;
  border-radius: 0 !important;
  font-weight: 600;
}

.erp-sale-type .btn:hover {
  color: var(--g-text-primary, #1c1917) !important;
}

.erp-sale-type label.btn:not(:first-of-type) {
  border-left: 1px solid var(--g-border, #e7e5e4);
}

.erp-sale-type .btn-check:checked + .btn {
  color: var(--g-text-on-primary, #fff) !important;
  border-left-color: transparent;
}

/* Sale-type badges in the list — soft tinted pills, on-brand, theme-aware */
.erp-type-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
}

.erp-type-badge.is-installment {
  color: var(--g-primary-light, #14b8a6);
  background: rgba(20, 184, 166, 0.13);
}

.erp-type-badge.is-intermediary {
  color: var(--g-warning, #d97706);
  background: rgba(217, 119, 6, 0.14);
}

/* Installment preview (sale form): hint when empty, compact summary, schedule table. */
.erp-installment-hint {
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  border: 1px dashed var(--g-border, #e7e5e4);
  border-radius: var(--g-radius, 8px);
  background: var(--g-gray-50, #fafaf9);
  color: var(--g-text-secondary, #57534e);
  font-size: 0.85rem;
}

.erp-installment-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 0.85rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--g-border, #e7e5e4);
  border-radius: var(--g-radius, 8px);
  background: var(--g-gray-50, #fafaf9);
}

.erp-installment-summary > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.erp-installment-summary strong {
  font-size: 1.05rem;
  color: var(--g-text-primary, #1c1917);
}

.erp-installment-schedule th {
  font-size: 0.72rem;
}

/* ---- Custom date picker (replaces the native OS calendar) ---- */
.g-date-input {
  cursor: pointer;
}

.g-datepicker {
  position: fixed;
  z-index: 1090;
  width: 280px;
  padding: 0.6rem;
  background: var(--g-bg-card, #fff);
  border: 1px solid var(--g-border, #e7e5e4);
  border-radius: var(--g-radius, 8px);
  box-shadow: var(--g-shadow, 0 10px 30px rgba(0, 0, 0, 0.12));
  color: var(--g-text-primary, #1c1917);
  user-select: none;
}

.g-dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.g-dp-title {
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: capitalize;
}

.g-dp-nav {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--g-border, #e7e5e4);
  border-radius: var(--g-radius-sm, 6px);
  background: var(--g-bg-card, #fff);
  color: var(--g-text-secondary, #57534e);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: all var(--g-transition, 0.15s ease);
}

.g-dp-nav:hover {
  background: var(--g-gray-100, #f5f5f4);
  color: var(--g-primary, #0f766e);
}

.g-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.g-dp-weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--g-text-tertiary, #a8a29e);
}

.g-dp-day {
  height: 2.1rem;
  border: 0;
  border-radius: var(--g-radius-sm, 6px);
  background: transparent;
  color: var(--g-text-primary, #1c1917);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--g-transition, 0.15s ease), color var(--g-transition, 0.15s ease);
}

.g-dp-day:hover:not(:disabled) {
  background: var(--g-primary-50, #f0fdfa);
  color: var(--g-primary, #0f766e);
}

.g-dp-day.is-out {
  color: var(--g-text-tertiary, #a8a29e);
  opacity: 0.55;
}

.g-dp-day.is-today {
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--g-primary, #0f766e);
}

.g-dp-day.is-selected {
  background: var(--g-primary, #0f766e);
  color: #fff;
  font-weight: 700;
}

.g-dp-day:disabled {
  opacity: 0.3;
  cursor: default;
}

.g-dp-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--g-border-light, #f0efee);
}

.g-dp-link {
  border: 0;
  background: transparent;
  color: var(--g-primary, #0f766e);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: var(--g-radius-sm, 6px);
}

.g-dp-link:hover {
  background: var(--g-gray-100, #f5f5f4);
}

/* Stock badges for product search (picker modal + inline lookup). Token-based for dark mode. */
.erp-stock-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.erp-stock-badge.is-in {
  color: var(--g-success, #15803d);
  background: rgba(21, 128, 61, 0.12);
}

.erp-stock-badge.is-elsewhere {
  color: var(--g-warning, #b45309);
  background: rgba(180, 83, 9, 0.14);
}

.erp-stock-badge.is-out {
  color: var(--g-text-tertiary, #a8a29e);
  background: var(--g-gray-100, #f5f5f4);
}

.erp-stock-badge.is-service {
  color: var(--g-info, #2563eb);
  background: rgba(37, 99, 235, 0.1);
}

/* Rows for products with no stock in the selected warehouse: visible but de-emphasized. */
tr.is-unavailable > td {
  opacity: 0.62;
}

tr.is-unavailable.table-primary > td {
  opacity: 1;
}

.erp-doc-label {
  color: #8d9498;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.erp-doc-static {
  display: flex;
  align-items: center;
  min-height: 2.95rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #ebecec;
  border-radius: 0.65rem;
  background: #f8fafc;
  font-weight: 600;
}

/* Small derived/secondary note under a field (e.g. payment method under cashbox). */
.erp-doc-hint {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--g-text-tertiary, #8d9498);
}

.erp-doc-hint i {
  font-size: 0.85rem;
  opacity: 0.8;
}

.erp-native-hidden {
  display: none !important;
}

.erp-lookup {
  position: relative;
}

.erp-lookup .input-group > .form-control.erp-lookup-display {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.erp-lookup .erp-lookup-toggle,
.erp-lookup .erp-lookup-plus {
  min-width: 2.6rem;
}

.erp-lookup .erp-lookup-plus {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* The menu is portaled to <body> when open, so these rules must NOT require the .erp-lookup
   ancestor — otherwise the visible (portaled) menu gets no background/border/layout. Positioning
   stays split: .erp-lookup .erp-lookup-menu (absolute, when docked) vs .erp-lookup-menu.is-portal (fixed). */
.erp-lookup-menu {
  padding: 0.5rem;
  border: 1px solid var(--g-border, #dfe6f1);
  border-radius: 0.8rem;
  background: var(--g-bg-card, #fff);
  box-shadow: var(--g-shadow-lg, 0 0.65rem 1.4rem rgba(15, 23, 42, 0.12));
}

.erp-lookup .erp-lookup-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 20;
}

.erp-lookup-search {
  margin-bottom: 0.45rem;
}

.erp-lookup-options {
  display: grid;
  gap: 0.2rem;
  max-height: 240px;
  overflow-y: auto;
}

.erp-lookup-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 0.48rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--g-text-primary, #344054);
  text-align: left;
  cursor: pointer;
}

.erp-lookup-option:hover,
.erp-lookup-option:focus {
  border-color: var(--g-primary-light, #14b8a6);
  background: var(--g-primary-50, #f0fdfa);
  color: var(--g-primary-dark, #0f766e);
}

.erp-lookup-option.is-active {
  border-color: var(--g-primary, #0f766e);
  background: var(--g-primary-100, #ccfbf1);
  color: var(--g-primary-dark, #0f766e);
}

/* Keyboard highlight (arrow keys) — mirrors :hover so mouse and keyboard read the same. */
.erp-lookup-option.is-kb {
  border-color: var(--g-primary-light, #14b8a6);
  background: var(--g-primary-50, #f0fdfa);
  color: var(--g-primary-dark, #0f766e);
}

.erp-lookup-option-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.erp-lookup-option-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.erp-lookup-option-meta,
.erp-lookup-option-unit {
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.erp-lookup-option-meta {
  color: var(--g-text-tertiary, #98a2b3);
}

.erp-lookup-option-unit {
  color: var(--g-info, #2563eb);
}

.erp-lookup-option.is-unavailable .erp-lookup-option-name {
  opacity: 0.6;
}

/* Matched-substring highlight in product search results (dropdown + modal). */
.erp-lookup-hl {
  background: color-mix(in srgb, var(--g-primary, #0f766e) 22%, transparent);
  color: inherit;
  padding: 0 0.05em;
  border-radius: 3px;
}

.erp-lookup-empty {
  padding: 0.5rem 0.25rem;
  color: var(--g-text-tertiary, #7c8798);
  font-size: 0.87rem;
}

.erp-lines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.erp-lines-table th,
.erp-lines-table td {
  white-space: nowrap;
}

/* Unify header column separators with the body. table-bordered/KaiAdmin leaves the header th
   vertical borders a lighter, mismatched color (very visible in dark mode); match the body td. */
.erp-lines-table thead th {
  border-left-color: var(--g-border-light) !important;
  border-right-color: var(--g-border-light) !important;
}

.erp-lines-table {
  width: 100%;
  /* Keep the columns at a comfortable size instead of squeezing them; the
     .table-responsive wrapper scrolls horizontally when they don't all fit. */
  min-width: 70rem;
}

.erp-doc-grid > .d-grid > .card.erp-section-card.erp-sale-products .card-body {
  display: grid;
  gap: 1rem;
  /* grid items default to min-width:auto; keep the body (and its lines host)
     shrinkable so the lines table scrolls instead of stretching the card. */
  min-width: 0;
}

.erp-doc-grid > .d-grid > .card.erp-section-card.erp-sale-products .card-body > * {
  min-width: 0;
}

.erp-doc-grid > .d-grid > .card.erp-section-card.erp-sale-products [data-doc-tab-panel],
.erp-doc-grid > .d-grid > .card.erp-section-card.erp-sale-products [data-lines-host] {
  min-width: 0;
}

.erp-doc-grid > .d-grid > .card.erp-section-card.erp-sale-products [data-lines-host] .table-wrap {
  min-height: 16rem;
}

/* Top-align cells so every control lines up on the first row. The product
   cell's stock hint then sits directly under its <select> as a helper line
   (see below) instead of being floated to the bottom of a tall row. */
.erp-lines-table tbody td {
  /* !important: the table carries Bootstrap's .align-middle, which cells inherit
     with !important. Middle-aligning makes the taller product cell (input + hint)
     ride ~9px higher than the single-input cells, so force top. */
  vertical-align: top !important;
}

/* Plain-text cells (#, unit, amount) carry no input, so nudge their text down
   to sit on the same line as the inputs' text. Input-bearing cells get NO
   extra padding — their controls stay flush at the cell top so every input
   (product select, qty, price, …) lines up on one horizontal row. */
.erp-lines-table tbody td:first-child,
.erp-lines-table tbody td[data-line-unit],
.erp-lines-table tbody td[data-line-amount] {
  padding-top: 0.55rem;
}

/* Per-line stock hint: a compact helper line tucked right under the product
   select. Flows in normal layout so it stays attached to the input on any row
   height, and wraps instead of being clipped. Scoped to the .form-text hint
   div — some pages put [data-line-stock] on a plain <td> column instead. */
.erp-lines-table .form-text[data-line-stock] {
  margin: 0.3rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.25;
}

/* Column widths are driven by the input widths (reliable in auto table-layout;
   plain `width` on a <td> collapses to min-content once the input is 100%).
   Narrow #, unit and quantity; give the freed space to price, amount, comment. */

/* # */
.erp-lines-table th:nth-child(1),
.erp-lines-table td:nth-child(1) {
  width: 2.5rem;
  text-align: center;
  white-space: normal;
}

/* Product — the widest column: long names (e.g. "iPhone 15 Pro Max 256GB …")
   must be readable in full. The read-only cell wraps; the edit <select> can't
   wrap, so it needs enough width to show a typical full name before ellipsis.
   The .table-responsive wrapper scrolls horizontally if the row overflows. */
.erp-lines-table th:nth-child(2),
.erp-lines-table td:nth-child(2) {
  min-width: 340px;
  white-space: normal;
}

.erp-lines-table td:nth-child(2) > .form-select,
.erp-lines-table td:nth-child(2) [data-line-product] {
  width: 100%;
}

.erp-lines-table .erp-lookup-host {
  min-width: 320px;
}

/* Per-line currency picker: themed like every other dropdown via
   enhanceSelectWithLookup (renders an .erp-lookup widget). Give the cell room so
   the chosen code (e.g. "USD") is readable; the widget fills the cell. */
.erp-lines-table .erp-currency-cell {
  min-width: 10.5rem;
}
.erp-lines-table .erp-currency-cell .erp-lookup {
  width: 100%;
}
/* Keep the display field + dropdown toggle on one line (don't wrap the toggle
   below the input in the narrow currency cell). */
.erp-lines-table .erp-currency-cell .erp-lookup .input-group {
  flex-wrap: nowrap;
}

/* Unit — narrow, centered */
.erp-lines-table th:nth-child(3),
.erp-lines-table td:nth-child(3) {
  width: 4rem;
  text-align: center;
}

/* Amount — give it presence (it's plain text, no input) */
.erp-lines-table .erp-amount-cell {
  min-width: 8rem;
}

/* Quantity — narrow input */
.erp-lines-table [data-line-qty] {
  width: 5rem;
}

/* Sale price + buy price — wide enough for a full price */
.erp-lines-table [data-line-price],
.erp-lines-table [data-line-source-price] {
  width: 9rem;
}

/* Comment — wide */
.erp-lines-table [data-line-comment] {
  width: 11rem;
}

/* Discount cell: value input + a small %/amount toggle. */
.erp-disc-cell {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
}

.erp-disc-cell [data-line-disc] {
  width: 4.5rem;
}

.erp-disc-toggle {
  flex: 0 0 auto;
  min-width: 2.4rem;
  padding: 0 0.4rem;
  border: 1px solid var(--g-border, #e7e5e4);
  border-radius: var(--g-radius-sm, 6px);
  background: var(--g-gray-100, #f5f5f4);
  color: var(--g-text-secondary, #57534e);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.erp-disc-toggle:hover {
  background: var(--g-gray-200, #e7e5e4);
  color: var(--g-primary, #0f766e);
}

/* Whole-doc discount control inside the summary row. */
.erp-summary-disc {
  align-items: center;
}

.erp-disc-cell-doc {
  flex: 0 0 auto;
  max-width: 11rem;
}

.erp-disc-cell-doc [data-doc-disc] {
  width: 6rem;
}

/* Add-product button sits below the cart lines. */
.erp-lines-add {
  display: flex;
}

.erp-total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #ebecec;
  /* Stay visible while a long line list scrolls: the running total (and any
     save error) pins to the viewport bottom until the card ends. */
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--g-bg-card, #fff);
  padding-bottom: 0.5rem;
}

.erp-total-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #1572e8;
}

.erp-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}

.erp-search-field {
  display: grid;
  gap: 0.35rem;
  flex: 2 1 250px;
}

.erp-filter-field {
  display: grid;
  gap: 0.35rem;
  flex: 1 1 150px;
}

.erp-inline-tabs {
  display: inline-flex;
  gap: 1.2rem;
  padding: 0.15rem 0;
  border-bottom: 1px solid #ebecec;
}

.erp-inline-tab {
  position: relative;
  padding: 0.7rem 0.05rem;
  border: 0;
  background: transparent;
  color: #686f76;
  font-weight: 600;
}

.erp-inline-tab.is-active {
  color: var(--g-primary-dark, #0f766e);
}

.erp-inline-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2rem;
  height: 0.16rem;
  border-radius: 999px;
  background: var(--g-primary, #0f766e);
}

.erp-tab-count {
  margin-left: 0.35rem;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  background: var(--g-primary-50, #f0fdfa);
  color: var(--g-primary-dark, #0f766e);
  font-size: 0.74rem;
}

.erp-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid #ebecec;
  border-radius: 0.9rem;
  background: #fff;
}

.erp-stat-item {
  display: grid;
  gap: 0.25rem;
}

.erp-stat-item + .erp-stat-item {
  padding-left: 1rem;
  border-left: 1px solid #ebecec;
}

.erp-stat-label {
  color: #8d9498;
  font-size: 0.88rem;
}

.erp-stat-value strong {
  font-size: 1.7rem;
  font-weight: 700;
  color: #2a2f5b;
}

.erp-stat-value.is-danger strong {
  color: #f25961;
}

.erp-list-card .card-body {
  padding: 0;
}

.erp-doc-link {
  font-weight: 700;
}

.erp-table-actions {
  display: flex;
  justify-content: flex-end;
}

.erp-kebab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: #8d9498;
}

.erp-kebab-btn:hover {
  background: #f5f7fd;
  color: #1572e8;
}

.erp-flow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.erp-flow-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: nowrap;
}

.erp-flow-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.erp-flow-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 0.65rem;
  white-space: nowrap;
}

.erp-flow-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  padding: 0.1rem 0.34rem;
  border-radius: 999px;
  background: #edf5ff;
  color: #1572e8;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
}

.erp-flow-kebab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.62rem;
}

.erp-flow-title-menu {
  display: inline-flex;
  align-items: center;
}

.erp-title-actions .erp-flow-title-menu .erp-kebab-btn {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.8rem;
  color: #526074;
}

.erp-title-actions .erp-flow-title-menu .erp-kebab-btn:hover {
  border-color: #cfd8e4;
  background: #f7f9fc;
  color: #243349;
}

.erp-flow-menu {
  min-width: 17.5rem;
  border: 1px solid #e5ebf5;
  border-radius: 0.9rem;
  box-shadow: 0 0.75rem 1.7rem rgba(15, 23, 42, 0.12);
}

.erp-flow-menu .dropdown-header {
  color: #7d8da6;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.erp-flow-menu .dropdown-item {
  border-radius: 0.6rem;
  font-size: 0.92rem;
}

.erp-flow-panel {
  height: 100%;
  padding: 0.95rem;
  border: 1px solid #ebecec;
  border-radius: 0.8rem;
  background: #fff;
}

.erp-flow-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.82rem;
  border: 1px solid #e6ebf3;
  border-radius: 0.75rem;
  background: #fff;
}

.erp-flow-item-main {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.erp-flow-item-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.erp-flow-modal .modal-dialog {
  width: min(980px, calc(100vw - 1.5rem));
  max-width: min(980px, calc(100vw - 1.5rem));
}

.erp-flow-modal .modal-content {
  border: 1px solid #e5ebf5;
  border-radius: 1rem;
  box-shadow: 0 1rem 2.6rem rgba(15, 23, 42, 0.2);
}

.erp-flow-modal .modal-header {
  border-bottom-color: #ebf0f8;
}

.erp-flow-modal .modal-body {
  max-height: min(74vh, 780px);
}

.erp-lookup-menu.is-portal {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  width: min(560px, calc(100vw - 1rem));
  z-index: 1090;
}

.erp-lookup-menu.is-portal .erp-lookup-options {
  max-height: min(320px, 52vh);
}

@media (max-width: 991.98px) {
  .erp-doc-grid > .d-grid {
    display: grid !important;
    gap: 1rem;
  }

  .erp-doc-grid > .d-grid > .card.erp-section-card:first-child,
  .erp-doc-grid > .d-grid > .card.erp-section-card:nth-child(n+2),
  .erp-doc-grid > .erp-doc-summary {
    grid-column: auto;
    grid-row: auto;
  }

  .erp-flow-toolbar {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .erp-flow-buttons {
    justify-content: flex-start;
  }

  .erp-flow-btn {
    max-width: 100%;
  }

  .erp-flow-modal .modal-dialog {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    margin: 0.5rem auto;
  }
}

.erp-pager-row,
.erp-doc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

[data-theme="dark"] .app-navbar-caption {
  color: var(--g-text-tertiary);
}

[data-theme="dark"] .app-header,
[data-theme="dark"] .main-header,
[data-theme="dark"] .footer {
  background: var(--g-bg-card) !important;
}

[data-theme="dark"] .app-header,
[data-theme="dark"] .footer {
  border-color: var(--g-border) !important;
}

[data-theme="dark"] .app-logo-title,
[data-theme="dark"] .app-navbar-heading,
[data-theme="dark"] .erp-title,
[data-theme="dark"] .erp-summary-row strong,
[data-theme="dark"] .erp-stat-value strong {
  color: #fff;
  text-shadow: none;
}

[data-theme="dark"] .app-toolbar-chip,
[data-theme="dark"] .app-toolbar-menu {
  border-color: var(--g-border);
  background: var(--g-bg-card) !important;
  color: var(--g-text-secondary) !important;
}

[data-theme="dark"] .app-toolbar-chip:hover,
[data-theme="dark"] .app-toolbar-chip:focus,
[data-theme="dark"] .app-toolbar-chip:active {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--g-border) !important;
  color: #fff !important;
}

[data-theme="dark"] .app-toolbar-menu .dropdown-item {
  color: var(--g-text-secondary);
}

[data-theme="dark"] .app-toolbar-menu .dropdown-item:hover,
[data-theme="dark"] .app-toolbar-menu .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

[data-theme="dark"] .erp-flow-panel,
[data-theme="dark"] .erp-flow-item,
[data-theme="dark"] .erp-flow-modal .modal-content,
[data-theme="dark"] .erp-flow-menu {
  border-color: var(--g-border);
  background: var(--g-bg-card);
}

[data-theme="dark"] .erp-flow-menu .dropdown-item,
[data-theme="dark"] .erp-flow-item .small,
[data-theme="dark"] .erp-flow-panel .small {
  color: var(--g-text-secondary);
}

[data-theme="dark"] .erp-flow-menu .dropdown-item:hover,
[data-theme="dark"] .erp-flow-menu .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

[data-theme="dark"] .erp-title-actions .erp-flow-title-menu .erp-kebab-btn {
  border-color: var(--g-border);
  color: var(--g-text-secondary);
  background: var(--g-bg-card);
}

[data-theme="dark"] .erp-title-actions .erp-flow-title-menu .erp-kebab-btn:hover {
  border-color: var(--g-border);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .erp-flow-count {
  background: rgba(21, 114, 232, 0.22);
  color: #9bc0ff;
}

[data-theme="dark"] .erp-flow-modal .modal-header {
  border-bottom-color: var(--g-border);
}

[data-theme="dark"] .app-navbar-title-block {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .app-menu-toggle {
  border-color: var(--g-border) !important;
  color: var(--g-text-primary, #fff) !important;
}

[data-theme="dark"] .card {
  border-color: var(--g-border);
  box-shadow: 0 0.5rem 1.35rem rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .app-widget-stat-icon.is-primary {
  color: #7fb4ff;
  background: rgba(21, 114, 232, 0.16);
}

[data-theme="dark"] .app-widget-stat-icon.is-danger {
  color: #ff9aa3;
  background: rgba(242, 89, 97, 0.16);
}

[data-theme="dark"] .app-widget-stat-icon.is-info {
  color: #91d4ff;
  background: rgba(72, 171, 247, 0.16);
}

[data-theme="dark"] .app-widget-stat-icon.is-success {
  color: #93f09a;
  background: rgba(49, 206, 54, 0.16);
}

[data-theme="dark"] .app-widget-stat-icon.is-warning {
  color: #ffd08f;
  background: rgba(255, 173, 70, 0.16);
}

[data-theme="dark"] .topbar-nav .profile-username .op-7 {
  color: var(--g-text-tertiary) !important;
}

[data-theme="dark"] .topbar-nav .profile-username .fw-bold,
[data-theme="dark"] .topbar-nav > li > a,
[data-theme="dark"] .mobile-user-name,
[data-theme="dark"] .page-title {
  color: #fff !important;
}

[data-theme="dark"] .page-category {
  color: var(--g-text-tertiary) !important;
}

[data-theme="dark"] .mobile-user-role,
[data-theme="dark"] .dropdown-user .u-text p,
[data-theme="dark"] .dropdown-user .u-text .small {
  color: var(--g-text-tertiary) !important;
}

[data-theme="dark"] .app-nav-line {
  border-color: var(--g-border);
}

[data-theme="dark"] .app-navline-title,
[data-theme="dark"] .app-nav-line-tab,
[data-theme="dark"] .app-data-table tbody td,
[data-theme="dark"] .app-toast-text {
  color: var(--g-text-secondary);
}

[data-theme="dark"] .app-nav-line-tab.is-active,
[data-theme="dark"] .app-data-table thead th,
[data-theme="dark"] .app-toast-title {
  color: #fff;
}

[data-theme="dark"] .app-data-table thead th,
[data-theme="dark"] .app-data-table tbody td {
  border-color: var(--g-border);
}

[data-theme="dark"] .app-data-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .app-toast {
  border-color: var(--g-border);
  background: rgba(30, 30, 30, 0.98);
  box-shadow: 0 0.85rem 2rem rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .app-toast.is-info .app-toast-icon {
  background: rgba(21, 114, 232, 0.16);
}

[data-theme="dark"] .app-toast.is-success .app-toast-icon {
  background: rgba(49, 206, 54, 0.16);
}

[data-theme="dark"] .app-toast.is-warning .app-toast-icon {
  background: rgba(255, 173, 70, 0.16);
}

[data-theme="dark"] .app-toast.is-danger .app-toast-icon {
  background: rgba(242, 89, 97, 0.16);
}

[data-theme="dark"] .swal-modal {
  background: var(--g-bg-card);
}

[data-theme="dark"] .swal-title {
  color: #fff;
}

[data-theme="dark"] .swal-text {
  color: var(--g-text-secondary);
}

[data-theme="dark"] .app-sidebar .nav > .nav-item > a {
  margin: 0 12px 3px;
  padding: 8px 14px;
  border-radius: 12px;
}

[data-theme="dark"] .app-sidebar .nav > .nav-item > .nav-treeview a {
  margin: 0 12px 3px;
  padding: 7px 14px 7px 42px;
  border-radius: 10px;
}

[data-theme="dark"] .app-sidebar .nav > .nav-item > a:hover,
[data-theme="dark"] .app-sidebar .nav > .nav-item > .nav-treeview a:hover {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .app-sidebar .nav > .nav-item.active > a,
[data-theme="dark"] .app-sidebar .nav > .nav-item > a.active,
[data-theme="dark"] .app-sidebar .nav > .nav-item.menu-open > a.active {
  background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .category-tree-head,
[data-theme="dark"] .price-doc-lines-empty,
[data-theme="dark"] .price-doc-target-static,
[data-theme="dark"] .price-doc-value-static,
[data-theme="dark"] .erp-doc-static,
[data-theme="dark"] .erp-stats-strip {
  background: var(--g-bg-card);
}

[data-theme="dark"] .category-tree-head,
[data-theme="dark"] .category-tree-row,
[data-theme="dark"] .price-doc-lines-empty,
[data-theme="dark"] .price-doc-matrix-wrap,
[data-theme="dark"] .price-doc-target-static,
[data-theme="dark"] .price-doc-value-static,
[data-theme="dark"] .erp-doc-static,
[data-theme="dark"] .erp-summary-total,
[data-theme="dark"] .erp-total-bar,
[data-theme="dark"] .erp-stats-strip,
[data-theme="dark"] .erp-stat-item + .erp-stat-item {
  border-color: var(--g-border);
}

[data-theme="dark"] .category-tree-label,
[data-theme="dark"] .price-doc-target-static,
[data-theme="dark"] .price-doc-value-static,
[data-theme="dark"] .erp-doc-static,
[data-theme="dark"] .erp-total-value {
  color: #fff;
}

[data-theme="dark"] .erp-doc-label,
[data-theme="dark"] .erp-breadcrumbs,
[data-theme="dark"] .erp-breadcrumbs a,
[data-theme="dark"] .erp-title-muted,
[data-theme="dark"] .erp-stat-label,
[data-theme="dark"] .erp-summary-row,
[data-theme="dark"] .mobile-controls-title {
  color: var(--g-text-tertiary);
}

@media (min-width: 992px) {
  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar:hover {
    width: 75px !important;
  }

  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar:hover .logo-header {
    width: 75px !important;
  }

  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar:hover .sidebar-wrapper {
    width: 75px !important;
  }

  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar:hover .nav .nav-section .text-section,
  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar:hover #menu > .nav-item > a p,
  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar:hover #menu > .nav-item > a .caret {
    opacity: 0;
    visibility: hidden;
  }

  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item {
    position: relative;
  }

  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview {
    display: block !important;
    position: fixed;
    top: var(--flyout-top, 92px);
    left: var(--flyout-left, 86px);
    z-index: 1060;
    min-width: 260px;
    max-width: var(--flyout-max-width, 360px);
    max-height: var(--flyout-max-height, 70vh);
    overflow-y: auto;
    overflow-x: hidden !important;
    padding: 0.35rem 0;
    margin: 0;
    border: 1px solid #ebecec;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.4rem 1rem rgba(69, 65, 78, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(0.35rem);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  }

  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview::-webkit-scrollbar:horizontal {
    height: 0 !important;
  }

  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item.menu-open > .nav-treeview {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }

  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
    padding: 0.72rem 1rem !important;
  }

  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link p,
  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link .sub-item,
  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link .nav-icon,
  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link span,
  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link .badge,
  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link .caret {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    position: static !important;
    white-space: normal !important;
    word-break: break-word;
    text-indent: 0 !important;
    clip: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #5b6474 !important;
  }

  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link .nav-icon,
  body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link i {
    flex: 0 0 1.1rem;
    margin-right: 0 !important;
    text-align: center;
  }

  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview {
    border-color: var(--g-border);
    background: var(--g-bg-card);
    box-shadow: 0 0.65rem 1.4rem rgba(0, 0, 0, 0.28);
  }

  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link:hover,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link:focus,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link.active {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link p,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link .sub-item,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link .nav-icon,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link span,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link i {
    color: var(--g-text-secondary) !important;
  }

  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link:hover p,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link:hover .sub-item,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link:hover .nav-icon,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link:hover span,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link.active p,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link.active .sub-item,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link.active .nav-icon,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link.active span,
  [data-theme="dark"] body.sidebar-mini.sidebar-collapse .wrapper.sidebar_minimize .sidebar .nav .nav-item > .nav-treeview .nav-link.active i {
    color: #ffffff !important;
  }
}

@media (max-width: 991.98px) {
  .entity-toolbar-main,
  .erp-doc-grid,
  .erp-doc-fields,
  .erp-stats-strip {
    grid-template-columns: 1fr;
  }

  .erp-filter-row > .erp-search-field {
    flex-basis: 100%;
  }

  .erp-filter-row > .erp-filter-field {
    flex-basis: calc(50% - 0.375rem);
  }

  .entity-toolbar-item,
  .entity-toolbar-search {
    grid-column: auto;
  }

  .erp-summary-card {
    position: static;
  }

  .erp-stat-item + .erp-stat-item {
    padding-left: 0;
    border-left: 0;
    padding-top: 0.75rem;
    border-top: 1px solid #ebecec;
  }

  .category-tree-head,
  .category-tree-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .erp-title {
    font-size: 1.85rem;
  }

  .entity-toolbar-shell,
  .price-doc-lines-head,
  .erp-title-actions,
  .erp-lines-head,
  .erp-total-bar,
  .erp-pager-row,
  .erp-doc-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------------
   Numeric columns: tabular figures so amounts line up digit-for-digit when
   scanning down a list (applies wherever a data table right-aligns a cell). */
.app-data-table td.text-end,
.app-data-table th.text-end,
.erp-lines-table td.text-end,
.erp-lines-table .form-control.text-end {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Inline-grid editing: inputs inside the lines table read as plain cell text
   until the row is hovered or the field focused — the grid stays calm instead
   of rendering a wall of boxes. Focus/invalid states keep their borders. */
/* !important throughout: gekto-theme.css themes .form-control/.form-select with
   `border/background … !important` (its KaiAdmin counter-measures), so these
   higher-specificity rules must also be !important to take effect. */
.erp-lines-table .form-control:not(.is-invalid),
.erp-lines-table .form-select,
.erp-lines-table .erp-lookup-display:not(.is-invalid) {
  border-color: transparent !important;
  background: transparent !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.erp-lines-table tbody tr:hover .form-control:not(.is-invalid),
.erp-lines-table tbody tr:hover .form-select,
.erp-lines-table tbody tr:hover .erp-lookup-display:not(.is-invalid) {
  border-color: var(--g-border, #dfe6f1) !important;
  background: var(--g-bg-card, #fff) !important;
}
.erp-lines-table .form-control:focus,
.erp-lines-table .form-select:focus,
.erp-lines-table .erp-lookup-display:focus {
  border-color: var(--g-primary, #0f766e) !important;
  background: var(--g-bg-card, #fff) !important;
}
/* The lookup "+" button follows the same quiet-until-hover rhythm. */
.erp-lines-table .erp-lookup-plus {
  border-color: transparent;
  background-color: transparent;
}
.erp-lines-table tbody tr:hover .erp-lookup-plus,
.erp-lines-table .erp-lookup-plus:focus,
.erp-lines-table .erp-lookup-plus:hover {
  border-color: var(--g-primary-light, #14b8a6);
}

/* Roomier numeric/comment columns — the freed magnifier width goes to values
   that were getting clipped. */
.erp-lines-table [data-line-price],
.erp-lines-table [data-line-source-price] {
  width: 10rem;
}
.erp-lines-table .erp-amount-cell {
  min-width: 9rem;
}
.erp-lines-table [data-line-comment] {
  width: 13rem;
}

/* Document view "hero": the header card carries the at-a-glance facts —
   status + payment chips, counterparty/date/warehouse line, big total. */
.erp-doc-facts { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; }
.erp-doc-facts .erp-fact-sep { color: var(--g-text-tertiary, #9aa4b2); }
.erp-doc-hero-total { min-width: 10rem; }
.erp-doc-hero-total .erp-total-value { line-height: 1.1; }

/* Batch-entry grids on small screens: the wide table stays (it's a power
   tool), but the row-number column pins during horizontal scroll so the user
   never loses which row they're editing, and inputs keep a usable width. */
.erp-batch-table th,
.erp-batch-table td {
  min-width: 7rem;
}
.erp-batch-table th:first-child,
.erp-batch-table td:first-child {
  min-width: 2.5rem;
}
@media (max-width: 991.98px) {
  .erp-batch-table th:first-child,
  .erp-batch-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--g-bg-card, #fff);
  }
}


/* ---- Topbar notification bell ---------------------------------------- */
.app-notif-bell { position: relative; }

.app-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #f25961;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}

.app-notif-menu {
  width: 380px;
  max-width: 94vw;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--g-border, #e7e5e4);
  border-radius: var(--g-radius-lg, 0.9rem);
  box-shadow: var(--g-shadow-lg, 0 1.25rem 3rem rgba(0, 0, 0, 0.18));
}

.app-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.05rem;
  border-bottom: 1px solid var(--g-border, rgba(0, 0, 0, 0.08));
}

.app-notif-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--g-text-primary, #1c1917);
}

.app-notif-action {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--g-primary, #0f766e);
  cursor: pointer;
}

.app-notif-action:hover { color: var(--g-primary-dark, #0f5d57); text-decoration: underline; }

.app-notif-list {
  max-height: 400px;
  overflow-y: auto;
}

.app-notif-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.7rem;
  row-gap: 0.1rem;
  width: 100%;
  padding: 0.7rem 2.1rem 0.7rem 1.05rem;
  border: 0;
  border-bottom: 1px solid var(--g-border, rgba(0, 0, 0, 0.06));
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.app-notif-item:last-child { border-bottom: 0; }

.app-notif-item:hover { background: var(--g-surface-hover, rgba(0, 0, 0, 0.035)); }

/* Type icon badge */
.app-notif-icon {
  grid-row: 1 / span 2;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  font-size: 0.95rem;
  background: var(--g-primary-50, #f0fdfa);
  color: var(--g-primary, #0f766e);
}

.app-notif-item[data-kind="warning"] .app-notif-icon { background: color-mix(in srgb, #e08a00 14%, transparent); color: #b56b00; }
.app-notif-item[data-kind="danger"] .app-notif-icon { background: color-mix(in srgb, #f25961 15%, transparent); color: #d63b43; }
.app-notif-item[data-kind="success"] .app-notif-icon { background: color-mix(in srgb, #1e9e5a 14%, transparent); color: #178a4d; }

.app-notif-text { font-size: 0.83rem; line-height: 1.4; color: var(--g-text-primary, #1c1917); }

.app-notif-time {
  grid-column: 2;
  font-size: 0.7rem;
  color: var(--g-text-tertiary, #8d9498);
}

/* Unread: subtle tint + primary dot on the icon */
.app-notif-item.is-unread { background: color-mix(in srgb, var(--g-primary, #0f766e) 6%, transparent); }
.app-notif-item.is-unread .app-notif-text { font-weight: 600; }
.app-notif-item.is-unread .app-notif-icon::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 2.35rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--g-primary, #0f766e);
  box-shadow: 0 0 0 2px var(--g-bg-card, #fff);
}

/* Per-item dismiss (×) — revealed on hover/focus */
.app-notif-dismiss {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--g-text-tertiary, #8d9498);
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}

.app-notif-item:hover .app-notif-dismiss,
.app-notif-dismiss:focus-visible { opacity: 1; }

.app-notif-dismiss:hover {
  background: color-mix(in srgb, #f25961 15%, transparent);
  color: #d63b43;
}

.app-notif-empty {
  padding: 2rem 1rem;
  font-size: 0.83rem;
  text-align: center;
  color: var(--g-text-tertiary, #8d9498);
}

.app-notif-foot {
  padding: 0.55rem 1.05rem;
  border-top: 1px solid var(--g-border, rgba(0, 0, 0, 0.08));
  text-align: center;
}

.app-notif-clear {
  border: 0;
  background: transparent;
  padding: 0.25rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--g-text-secondary, #57534e);
  cursor: pointer;
  border-radius: var(--g-radius-sm, 0.5rem);
}

.app-notif-clear:hover { color: #d63b43; background: color-mix(in srgb, #f25961 10%, transparent); }

[data-theme="dark"] .app-notif-item.is-unread { background: color-mix(in srgb, var(--g-primary, #177d76) 14%, transparent); }
[data-theme="dark"] .app-notif-item.is-unread .app-notif-icon::after { box-shadow: 0 0 0 2px var(--g-bg-card, #1a2027); }
[data-theme="dark"] .app-notif-icon { background: color-mix(in srgb, var(--g-primary, #177d76) 20%, transparent); }