:root {
  --cream-50: #fffaf5;
  --cream-100: #fff3e7;
  --caramel-100: #f9dec3;
  --caramel-300: #eeb478;
  --caramel-500: #d97735;
  --cocoa-700: #5c3525;
  --cocoa-900: #2f1c15;
  --erp-sidebar-width: 272px;
  --erp-sidebar-compact-width: 76px;
  --erp-topbar-height: 56px;
  --sidebar-bg: #ffffff;
  --sidebar-page-bg: #f8fafc;
  --sidebar-brand: #4f46e5;
  --sidebar-brand-hover: #4338ca;
  --sidebar-text: #374151;
  --sidebar-text-strong: #111827;
  --sidebar-muted: #6b7280;
  --sidebar-disabled: #9ca3af;
  --sidebar-icon: #4b5563;
  --sidebar-hover: #f3f4f6;
  --sidebar-active: #eef2ff;
  --sidebar-border: #e5e7eb;
  --sidebar-input-bg: #f9fafb;
  --sidebar-input-border: #d1d5db;
  --sidebar-placeholder: #6b7280;
  --sidebar-focus-ring: rgba(79, 70, 229, .15);
  --sidebar-shadow: rgba(15, 23, 42, .08);
  --sidebar-highlight: #fef3c7;
}

/* li {
  list-style: none;
} */

body {
  background: var(--cream-50);
  color: var(--cocoa-900);
  font-family: "Nunito Sans", sans-serif;
  font-size: .95rem;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .sidebar-brand {
  font-family: "Poppins", sans-serif;
}

a { color: var(--caramel-500); }
a:hover { color: #b95720; }

.app-content { background: var(--cream-50); }

.app-topbar {
  background: rgba(255, 250, 245, .95) !important;
  border-bottom: 1px solid #f1dfcf;
  box-shadow: 0 2px 12px rgba(92, 53, 37, .06);
  backdrop-filter: blur(12px);
}

.app-topbar .text-white, .app-topbar .navbar-brand { color: var(--cocoa-900) !important; }
.app-topbar .navbar-brand { letter-spacing: -.03em; }
.app-topbar .btn-link { color: var(--caramel-500) !important; }
.app-topbar .btn-outline-light { color: var(--cocoa-700); border-color: #e8cdb5; }
.app-topbar .btn-outline-light:hover { color: #fff; border-color: var(--caramel-500); background: var(--caramel-500); }

.card {
  border: 1px solid #f0dfd0;
  border-radius: 18px;
  box-shadow: 0 5px 20px rgba(92, 53, 37, .055);
}

.card-header {
  padding: 1rem 1.25rem;
  color: var(--cocoa-700);
  background: transparent;
  border-bottom-color: #f2e4d8;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

.btn { border-radius: 8px; font-weight: 600; }
/* Consistent action sizing. Heading rows must not stretch their buttons. */
.app-content .btn {
  --bs-btn-font-size: .875rem;
  --bs-btn-padding-y: .375rem;
  --bs-btn-padding-x: .8rem;
  --bs-btn-line-height: 1.4;
  min-height: 36px;
}
.app-content .btn-sm { --bs-btn-font-size: .8rem; --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .6rem; min-height: 30px; }
.app-content .btn-lg { --bs-btn-font-size: .95rem; --bs-btn-padding-y: .6rem; --bs-btn-padding-x: 1rem; min-height: 44px; }
.app-content .d-flex > .btn { align-self: center; flex-shrink: 0; }
.app-content .card-body > .btn:not(.w-100) { align-self: flex-start; }
@media (pointer: coarse) {
  .app-content .btn, .app-content .btn-sm { min-height: 44px; }
}
.btn-primary { --bs-btn-bg: var(--caramel-500); --bs-btn-border-color: var(--caramel-500); --bs-btn-hover-bg: #bd5f29; --bs-btn-hover-border-color: #bd5f29; --bs-btn-active-bg: #a74f20; --bs-btn-active-border-color: #a74f20; }
.btn-outline-primary { --bs-btn-color: var(--caramel-500); --bs-btn-border-color: var(--caramel-300); --bs-btn-hover-bg: var(--caramel-500); --bs-btn-hover-border-color: var(--caramel-500); }
.form-control, .form-select { min-height: 43px; border-color: #e9d6c5; border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: var(--caramel-300); box-shadow: 0 0 0 .22rem rgba(217, 119, 53, .14); }
textarea.form-control { min-height: 68px; height: 68px; resize: vertical; }
.compact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.compact-form-grid > div, .compact-form-grid > label { grid-column: 1 / -1; min-width: 0; }
.compact-form-grid input, .compact-form-grid select, .compact-form-grid textarea { max-width: 100%; }
/* Multi-choice workflows are checkbox groups, not oversized text inputs. */
.compact-form-grid > .package-roles { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.package-roles legend { float: none; width: auto; margin: 0 0 .35rem; font-size: .95rem; font-weight: 600; }
.package-roles .helptext { margin-top: .25rem; color: #84756c; font-size: .82rem; }
div.checkbox-options { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; width: 100%; }
.checkbox-options > div { flex: 0 0 auto; }
.checkbox-options label { display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; margin: 0; font-size: .9rem; font-weight: 400; cursor: pointer; }
input.checkbox-options[type="checkbox"] { width: 1rem; height: 1rem; min-height: 0; margin: 0; padding: 0; flex: 0 0 1rem; accent-color: var(--caramel-500); cursor: pointer; }
input.checkbox-options[type="checkbox"]:focus-visible { outline: 2px solid var(--caramel-500); outline-offset: 3px; }
@media (pointer: coarse) { .checkbox-options label { min-height: 44px; } }
.app-content form .row > [class*="col-"]:has(> textarea) { width: 100%; }
@media (min-width: 1200px) { .compact-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.compact-form-grid > p { min-width: 0; margin: 0; }
.compact-form-grid > p:has(textarea), .compact-form-grid > .alert, .compact-form-grid > .errorlist { grid-column: 1 / -1; }
.compact-form-grid > p > label { display: block; margin-bottom: .5rem; font-weight: 600; }
.compact-form-grid > p > input:not([type="checkbox"]):not([type="radio"]), .compact-form-grid > p > select, .compact-form-grid > p > textarea { width: 100%; }
.compact-form-grid > p > .helptext { display: block; margin-top: .25rem; color: #84756c; font-size: .82rem; }
.compact-form-grid > p > .errorlist { margin: .3rem 0 0; padding-left: 1.15rem; color: var(--bs-danger); font-size: .82rem; }
@media (max-width: 767.98px) { .compact-form-grid { grid-template-columns: 1fr; }.compact-form-grid > p:has(textarea) { grid-column: auto; } }
.app-select { position: relative; width: 100%; }
.app-select__native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.app-select__trigger { display: flex; width: 100%; min-height: 43px; align-items: center; justify-content: space-between; gap: .7rem; padding: .52rem .8rem; color: #866b5d; text-align: left; border: 1px solid #e9d6c5; border-radius: 10px; background: #fff; }
.app-select__trigger:hover { border-color: var(--caramel-300); }
.app-select__trigger:focus, .app-select.is-open .app-select__trigger { border-color: var(--caramel-300); outline: 0; box-shadow: 0 0 0 .22rem rgba(217, 119, 53, .14); }
.app-select__trigger:disabled { color: #9c9691; background: #f2efec; cursor: not-allowed; }
.app-select__trigger i { flex: 0 0 auto; transition: transform .18s ease; }
.app-select.is-open .app-select__trigger i { transform: rotate(180deg); }
.app-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-select__value.has-value { color: var(--cocoa-900); font-weight: 600; }
.app-select__menu { position: absolute; z-index: 1060; top: calc(100% + .4rem); right: 0; left: 0; min-width: min(310px, 88vw); padding: .5rem; border: 1px solid #ead8c7; border-radius: 13px; background: #fff; box-shadow: 0 16px 38px rgba(77, 47, 31, .17); }
.app-select__search-wrap { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; padding: 0 .65rem; color: #aa8069; border: 1px solid #ead8c7; border-radius: 9px; background: #fffaf3; }
.app-select__search { width: 100%; min-height: 39px; padding: 0; color: var(--cocoa-900); border: 0; outline: 0; background: transparent; }
.app-select__options { display: grid; max-height: 245px; overflow-y: auto; overscroll-behavior: contain; }
.app-select__option { padding: .6rem .7rem; overflow: hidden; color: var(--cocoa-900); text-align: left; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: 8px; background: transparent; }
.app-select__option:hover, .app-select__option:focus { outline: 0; background: #fff4e5; }
.app-select__option.is-selected { color: #7f421b; background: #ffedd5; font-weight: 700; }
.app-select__option:disabled { color: #aaa19a; cursor: not-allowed; }
.app-select__empty { padding: 1rem .7rem; color: #947462; text-align: center; font-size: .84rem; }
.global-search-page { max-width: 920px; margin: 0 auto; }
.global-search-box { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem .55rem 1rem; border: 1px solid #e5d5c7; border-radius: 14px; background: #fff; box-shadow: 0 8px 28px rgba(77,47,31,.07); }
.global-search-box > i { color: #a77455; }
.global-search-box input { width: 100%; min-height: 40px; border: 0; outline: 0; background: transparent; }
.global-search-result { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; }
.global-search-result__icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: #a25728; border-radius: 10px; background: #fff1df; }
.global-search-result small, .global-search-result strong, .global-search-result span { display: block; }
.global-search-result small { color: #9b7b68; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.global-search-result strong { color: var(--cocoa-900); }
.global-search-result span span { color: #846e62; font-size: .82rem; }
@media (max-width: 575.98px) { .global-search-box { align-items: stretch; flex-wrap: wrap; }.global-search-box input { width: calc(100% - 2rem); }.global-search-box .btn { width: 100%; } }
.approval-actions { display: flex; align-items: center; gap: .45rem; }
.approval-actions form { margin: 0; }
.approval-actions .form-control { width: 165px; min-height: 31px; }
@media (max-width: 767.98px) { .approval-actions { align-items: stretch; flex-direction: column; }.approval-actions .form-control { width: 100%; } }
.table { --bs-table-bg: transparent; --bs-table-border-color: #f2e4d8; }
.table > :not(caption) > * > * { padding: .85rem .9rem; }
.table thead th { color: #8a6250; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.app-topbar {
  min-height: var(--erp-topbar-height);
  box-shadow: 0 1px 8px rgba(22, 32, 51, .14);
  position: relative;
  z-index: 1035;
}

.app-shell {
  display: flex;
  min-height: calc(100vh - var(--erp-topbar-height));
}

.app-shell-public {
  display: block;
}

.app-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: hidden;
}

.avatar {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
}

.table-actions {
  white-space: nowrap;
}

.erp-sidebar {
  --bs-offcanvas-width: var(--erp-sidebar-width);
  flex: 0 0 var(--erp-sidebar-width);
  width: var(--erp-sidebar-width);
  color: var(--sidebar-text);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: 3px 0 16px var(--sidebar-shadow);
  transition: width .2s ease, flex-basis .2s ease;
}

.erp-sidebar .offcanvas-header {
  min-height: 64px;
  padding: .75rem 1rem;
  border-color: var(--sidebar-border) !important;
}

.erp-sidebar .offcanvas-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-input-border) transparent;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  color: var(--sidebar-text-strong);
  font-weight: 700;
  letter-spacing: -.01em;
}

.sidebar-brand:hover {
  color: var(--sidebar-brand);
}

.sidebar-brand-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, var(--sidebar-brand), var(--sidebar-brand-hover));
  box-shadow: 0 5px 14px var(--sidebar-focus-ring);
}

.sidebar-search-wrap {
  position: relative;
  margin: .85rem .75rem .6rem;
}

.sidebar-search {
  min-height: 42px;
  padding-left: 2.35rem;
  color: var(--sidebar-text-strong);
  background: var(--sidebar-input-bg);
  border-color: var(--sidebar-input-border);
  border-radius: 10px;
  font-size: .9375rem;
  font-weight: 500;
}

.sidebar-search::placeholder {
  color: var(--sidebar-placeholder);
  opacity: 1;
}

.sidebar-search:focus {
  color: var(--sidebar-text-strong);
  background: var(--sidebar-bg);
  border-color: var(--sidebar-brand);
  box-shadow: 0 0 0 .2rem var(--sidebar-focus-ring);
}

.sidebar-search-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: .8rem;
  color: var(--sidebar-icon);
  transform: translateY(-50%);
}

.sidebar-nav {
  padding: .35rem .75rem 1rem;
  overflow: visible;
}

.sidebar-section {
  position: relative;
  margin: .35rem 0;
  padding-top: .15rem;
}

.sidebar-section+.sidebar-section {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-section-toggle,
.sidebar-profile {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  gap: .75rem;
  padding: .58rem .7rem;
  color: var(--sidebar-text);
  background: transparent;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 10px;
  text-align: left;
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.sidebar-section-toggle:hover,
.sidebar-section-toggle:focus-visible,
.sidebar-profile:hover {
  color: var(--sidebar-text-strong);
  background: var(--sidebar-hover);
}

.sidebar-section-toggle:focus-visible,
.sidebar-item:focus-visible,
.sidebar-profile:focus-visible,
.sidebar-search:focus-visible {
  outline: 2px solid var(--sidebar-brand);
  outline-offset: 2px;
}

.sidebar-section-toggle.active {
  color: var(--sidebar-brand);
  background: var(--sidebar-active);
  border-left-color: var(--sidebar-brand);
  font-weight: 600;
}

.sidebar-section.is-active>.sidebar-section-toggle {
  color: var(--sidebar-brand);
  background: var(--sidebar-active);
  border-left-color: var(--sidebar-brand);
  font-weight: 600;
}

.sidebar-icon {
  flex: 0 0 24px;
  width: 24px;
  color: var(--sidebar-icon);
  text-align: center;
  font-size: 1.15rem;
  transition: color .2s ease;
}

.sidebar-section-toggle:hover .sidebar-icon,
.sidebar-section-toggle:focus-visible .sidebar-icon,
.sidebar-section-toggle.active .sidebar-icon,
.sidebar-section.is-active>.sidebar-section-toggle .sidebar-icon {
  color: var(--sidebar-brand);
}

.sidebar-chevron {
  margin-left: auto;
  font-size: .72rem;
  transition: transform .2s ease;
}

.sidebar-section-toggle[aria-expanded="true"] .sidebar-chevron {
  transform: rotate(180deg);
}

.sidebar-submenu {
  margin: .2rem 0 .45rem 1.08rem;
  padding: .25rem 0 .25rem .65rem;
  border-left: 1px solid var(--sidebar-border);
}

.sidebar-floating-title {
  display: none;
}

.sidebar-item {
  display: flex;
  align-items: center;
  min-height: 42px;
  gap: .35rem;
  margin: .12rem 0;
  padding: .5rem .65rem;
  color: var(--sidebar-text);
  background: transparent;
  border-left: 4px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.sidebar-item:hover {
  color: var(--sidebar-text-strong);
  background: var(--sidebar-hover);
  transform: translateX(2px);
}

.sidebar-item.active {
  color: var(--sidebar-brand);
  background: var(--sidebar-active);
  border-left-color: var(--sidebar-brand);
  font-weight: 600;
}

.sidebar-item-icon {
  color: var(--sidebar-icon);
  font-size: 1rem;
  transition: color .2s ease;
}
.sidebar-attention-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.45rem; margin-left: auto; padding: 0 .38rem; border-radius: 999px; color: #fff; background: #dc3545; font-size: .72rem; font-weight: 700; line-height: 1; }
.sidebar-item.active .sidebar-attention-badge, .sidebar-section-toggle.active .sidebar-attention-badge { color: #8a1c1c; background: #fff; }

.sidebar-item:hover .sidebar-item-icon,
.sidebar-item:focus-visible .sidebar-item-icon,
.sidebar-item.active .sidebar-item-icon {
  color: var(--sidebar-brand);
}

.sidebar-section-toggle:disabled,
.sidebar-item[aria-disabled="true"] {
  color: var(--sidebar-disabled);
  cursor: not-allowed;
}

.sidebar-section-toggle:disabled .sidebar-icon,
.sidebar-item[aria-disabled="true"] .sidebar-item-icon {
  color: var(--sidebar-disabled);
}

.sidebar-footer {
  padding: .75rem;
  border-color: var(--sidebar-border) !important;
}

.sidebar-profile {
  min-height: 48px;
}

.sidebar-profile .sidebar-label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  font-size: .8rem;
}

.sidebar-profile small {
  color: var(--sidebar-muted);
}

.sidebar-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: var(--sidebar-brand);
  font-weight: 700;
}

.sidebar-no-results {
  padding: 1rem;
  color: var(--sidebar-muted);
  text-align: center;
  font-size: .875rem;
  font-weight: 500;
}

.sidebar-text mark,
.sidebar-item-text mark {
  padding: 0 .08rem;
  color: inherit;
  background: var(--sidebar-highlight);
  border-radius: 2px;
}

.topbar-notifications {
  position: relative;
  padding: .25rem;
  font-size: 1.15rem;
}

.notification-dot {
  position: absolute;
  top: -.2rem;
  right: -.45rem;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid var(--bs-primary);
  border-radius: 9px;
  color: #fff;
  background: #dc3545;
  font-size: .62rem;
  line-height: 13px;
  text-align: center;
}

@media (min-width: 768px) {
  .erp-sidebar {
    position: sticky;
    top: 0;
    height: calc(100vh - var(--erp-topbar-height));
    z-index: 1025;
  }

  .erp-sidebar .offcanvas-header {
    display: flex;
  }

  .erp-sidebar .btn-close {
    display: none;
  }

  body.sidebar-collapsed .erp-sidebar {
    --bs-offcanvas-width: var(--erp-sidebar-compact-width);
    flex-basis: var(--erp-sidebar-compact-width);
    width: var(--erp-sidebar-compact-width);
  }

  body.sidebar-collapsed .erp-sidebar .sidebar-label,
  body.sidebar-collapsed .erp-sidebar .sidebar-search {
    display: none !important;
  }

  body.sidebar-collapsed .erp-sidebar .offcanvas-header {
    justify-content: center;
    padding-inline: .5rem;
  }

  body.sidebar-collapsed .erp-sidebar .sidebar-brand {
    gap: 0;
  }

  body.sidebar-collapsed .sidebar-search-wrap {
    height: 42px;
    margin-inline: .25rem;
    border: 1px solid var(--sidebar-input-border);
    border-radius: 10px;
    background: var(--sidebar-input-bg);
  }

  body.sidebar-collapsed .sidebar-search-icon {
    left: 50%;
    transform: translate(-50%, -50%);
  }

  body.sidebar-collapsed .sidebar-section-toggle {
    justify-content: center;
    padding-inline: .45rem;
  }

  body.sidebar-collapsed .sidebar-section-toggle .sidebar-icon {
    flex-basis: 28px;
    font-size: 1.25rem;
  }

  body.sidebar-collapsed .sidebar-profile {
    justify-content: center;
    padding-inline: .4rem;
  }

  body.sidebar-collapsed .sidebar-section .nav-collapse {
    position: absolute;
    z-index: 1080;
    top: 0;
    left: calc(100% + .55rem);
    width: 230px;
    height: auto !important;
    overflow: visible;
    border: 1px solid var(--sidebar-border);
    border-radius: 12px;
    background: var(--sidebar-bg);
    box-shadow: 0 12px 32px var(--sidebar-shadow);
  }

  body.sidebar-collapsed .sidebar-section .nav-collapse.collapsing {
    transition: opacity .12s ease;
    opacity: 0;
  }

  body.sidebar-collapsed .sidebar-submenu {
    margin: 0;
    padding: .45rem;
    border: 0;
  }

  body.sidebar-collapsed .sidebar-floating-title {
    display: block;
    padding: .65rem .65rem .45rem;
    color: var(--sidebar-muted);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  body.sidebar-collapsed .sidebar-item {
    padding: .46rem .55rem;
  }
}

@media (max-width: 767.98px) {
  .erp-sidebar {
    --bs-offcanvas-width: min(88vw, 310px);
    width: var(--bs-offcanvas-width);
  }

  .erp-sidebar .offcanvas-body {
    overflow-y: auto;
  }

  .sidebar-nav {
    overflow: visible;
  }

  .app-content {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .erp-sidebar,
  .sidebar-chevron,
  .sidebar-section-toggle,
  .sidebar-item {
    transition: none !important;
  }
}

/* Bakery-inspired application theme. These overrides intentionally affect only presentation. */
:root {
  --sidebar-bg: #43251b;
  --sidebar-page-bg: var(--cream-50);
  --sidebar-brand: var(--caramel-500);
  --sidebar-brand-hover: #bd5f29;
  --sidebar-text: #f9e8da;
  --sidebar-text-strong: #fffaf5;
  --sidebar-muted: #d8b49b;
  --sidebar-icon: #efb987;
  --sidebar-hover: #5b3426;
  --sidebar-active: #6e3c26;
  --sidebar-border: rgba(255, 235, 215, .12);
  --sidebar-input-bg: #583224;
  --sidebar-input-border: #754936;
  --sidebar-focus-ring: rgba(217, 119, 53, .16);
  --sidebar-shadow: rgba(92, 53, 37, .06);
}

.app-topbar {
  background: rgba(255, 250, 245, .95) !important;
  box-shadow: 0 2px 12px rgba(92, 53, 37, .06);
}

.erp-sidebar { box-shadow: 2px 0 18px rgba(66, 35, 23, .16); }
.sidebar-brand-mark { background: linear-gradient(145deg, #eb9854, var(--caramel-500)); box-shadow: 0 5px 14px rgba(217, 119, 53, .22); }
.sidebar-section-toggle, .sidebar-profile, .sidebar-item { border-radius: 12px; }
.sidebar-section-toggle.active, .sidebar-section.is-active > .sidebar-section-toggle, .sidebar-item.active { color: #fff9f3; }
.sidebar-section-toggle:hover, .sidebar-section-toggle:focus-visible, .sidebar-profile:hover, .sidebar-item:hover { color: #fffaf5; }
.sidebar-section-toggle:hover .sidebar-icon, .sidebar-section-toggle:focus-visible .sidebar-icon, .sidebar-section-toggle.active .sidebar-icon, .sidebar-section.is-active > .sidebar-section-toggle .sidebar-icon, .sidebar-item:hover .sidebar-item-icon, .sidebar-item:focus-visible .sidebar-item-icon, .sidebar-item.active .sidebar-item-icon { color: #ffc488; }
.sidebar-search { color: #fffaf5; }
.sidebar-search::placeholder { color: #d9b9a3; }
.sidebar-search:focus { color: #fffaf5; background: #653b2b; }
.sidebar-submenu { border-left-color: rgba(255, 223, 196, .2); }
.notification-dot { border-color: var(--cream-50); background: var(--caramel-500); }

.dashboard-heading { margin: .2rem 0 1.5rem; }
.dashboard-heading h1 { color: var(--cocoa-900); font-size: clamp(1.45rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -.035em; }
.dashboard-heading .text-muted { color: #9a7562 !important; }
.dashboard-filters { border-radius: 16px; background: linear-gradient(135deg, #fffdf9, #fff5ea); }
.dashboard-metrics .metric-card { min-height: 132px; padding: 1.15rem 1.2rem; overflow: hidden; position: relative; background: #fffdf9; }
.dashboard-metrics .metric-card::after { position: absolute; top: 0; left: 0; width: 100%; height: 4px; content: ""; background: linear-gradient(90deg, var(--caramel-500), #f2bd8a); }
.dashboard-metrics .metric-card small { color: #99735f !important; font-weight: 700; }
.dashboard-metrics .metric-card strong { display: block; margin-top: .45rem; color: var(--cocoa-900); font-family: "Poppins", sans-serif; font-size: 1.38rem !important; font-weight: 700; letter-spacing: -.035em; }
.dashboard-panel { background: #fffdf9; }
.dashboard-panel h2 { color: var(--cocoa-700); font-size: 1rem; font-weight: 700; }
.dashboard-panel canvas { max-height: 270px; }
.list-group-item { border-color: #f2e4d8; background: transparent; }

@media (max-width: 575.98px) {
  .app-content { padding: 1.1rem !important; }
  .dashboard-metrics .metric-card { min-height: 112px; padding: 1rem; }
  .dashboard-metrics .metric-card strong { font-size: 1.15rem !important; }
}

/* 2026 interface refresh: calm data density, strong hierarchy and reusable
   surfaces. These rules are presentation-only and intentionally leave all
   controls, permissions and workflow markup untouched. */
:root {
  --ui-page: #f5f6fa;
  --ui-surface: #ffffff;
  --ui-border: #e7e9f1;
  --ui-ink: #252944;
  --ui-muted: #7a8199;
  --ui-indigo: #4f557f;
  --ui-mint: #42b897;
  --ui-coral: #ef765f;
  --ui-sky: #56b8cf;
  --ui-shadow: 0 8px 28px rgba(39, 45, 78, .055);
}

.app-content {
  padding-top: 1.65rem !important;
  background:
    radial-gradient(circle at 100% 0, rgba(217,119,53,.055), transparent 28rem),
    var(--ui-page);
}

.app-content > h1,
.app-content > .d-flex:first-child h1 {
  color: var(--ui-ink);
  font-weight: 700;
  letter-spacing: -.035em;
}

.app-content > h1::after,
.app-content > .d-flex:first-child h1::after {
  display: block;
  width: 34px;
  height: 3px;
  margin-top: .55rem;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--caramel-500), #efaa70);
  content: "";
}

.card {
  overflow: hidden;
  border-color: var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.card:hover { border-color: #dddfea; }
.card-body { padding: 1.25rem 1.35rem; }
.card-header {
  padding: 1rem 1.35rem;
  color: var(--ui-ink);
  border-bottom-color: var(--ui-border);
}
.card-header h2, .card-body > h2 { color: var(--ui-ink); font-weight: 650; letter-spacing: -.02em; }
.text-muted { color: var(--ui-muted) !important; }

.dashboard-page .app-content { padding: 1.75rem clamp(1rem, 2vw, 2rem) 2.5rem !important; }
.dashboard-page .app-content > .row { --bs-gutter-x: 1.15rem; --bs-gutter-y: 1.15rem; }
.dashboard-page .app-content > h1 { margin-bottom: 1.35rem !important; }
.dashboard-page .card { height: 100%; }
.dashboard-page .card canvas { max-height: 310px; }

/* Shared module overview language. Keep every operational dashboard visually
   consistent while leaving its server-side metrics and links independent. */
.overview-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.overview-header h1 { margin-bottom: .25rem; color: var(--ui-ink); font-weight: 750; letter-spacing: -.04em; }
.overview-header p { margin: 0; color: var(--ui-muted); }
.overview-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.overview-section-title { margin: 0 0 1rem; color: var(--ui-ink); font-size: 1.18rem; font-weight: 700; }
.overview-metrics { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; margin-bottom: 1.5rem; }
.overview-metric {
  --metric-accent: var(--ui-indigo);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 1rem;
  align-content: center;
  min-height: 142px;
  padding: 1.2rem 1.35rem;
  border-top: 3px solid var(--metric-accent);
  background: linear-gradient(145deg, #fff 58%, #fafbfe);
}
.overview-metric--mint { --metric-accent: var(--ui-mint); }
.overview-metric--coral { --metric-accent: var(--ui-coral); }
.overview-metric--sky { --metric-accent: var(--ui-sky); }
.overview-metric--amber { --metric-accent: #e9ad2f; }
.overview-metric--violet { --metric-accent: #7b6daf; }
.overview-metric .dashboard-metric-icon { grid-row: 1 / 4; align-self: center; width: 48px; height: 48px; font-size: 1.08rem; }
.overview-metric-label { color: var(--ui-muted); font-size: .9rem; font-weight: 550; }
.overview-metric-value { margin-top: .2rem; color: var(--ui-ink); font-size: clamp(1.45rem, 2vw, 1.9rem); font-weight: 750; line-height: 1.15; letter-spacing: -.04em; }
.overview-metric-note { margin-top: .4rem; color: var(--ui-muted); font-size: .78rem; }
.overview-panel { height: 100%; }
.overview-panel .card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; }
.overview-panel .card-header h2, .overview-panel.card-body > h2 { margin: 0; font-size: 1.05rem; }
.overview-list-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--ui-border); }
.overview-list-row:last-child { border-bottom: 0; }
.overview-chart { min-height: 330px; }

@media (max-width: 767.98px) {
  .overview-header { margin-bottom: 1.4rem; }
  .overview-metric { min-height: 118px; padding: 1rem; grid-template-columns: 42px minmax(0, 1fr); }
  .overview-metric .dashboard-metric-icon { width: 42px; height: 42px; }
}

/* Metric tiles: automatically styles compact dashboard cards while allowing
   large report panels and tables to retain their normal layout. */
.dashboard-page .row.mb-4 > [class*="col-"] > .card.card-body,
.dashboard-page .row.my-3 > [class*="col-"] > .card.card-body,
.dashboard-page .row.mb-4 > [class*="col-"] > .card.shadow-sm {
  position: relative;
  min-height: 128px;
  padding: 1.15rem 1.2rem 1.1rem 1.35rem;
  justify-content: center;
  border-top: 3px solid transparent;
  background: linear-gradient(145deg, #fff 56%, #fafbfe);
}

.dashboard-page .row.mb-4 > [class*="col-"]:nth-child(4n+1) > .card,
.dashboard-page .row.my-3 > [class*="col-"]:nth-child(4n+1) > .card { border-top-color: var(--ui-indigo); }
.dashboard-page .row.mb-4 > [class*="col-"]:nth-child(4n+2) > .card,
.dashboard-page .row.my-3 > [class*="col-"]:nth-child(4n+2) > .card { border-top-color: var(--ui-mint); }
.dashboard-page .row.mb-4 > [class*="col-"]:nth-child(4n+3) > .card,
.dashboard-page .row.my-3 > [class*="col-"]:nth-child(4n+3) > .card { border-top-color: var(--ui-coral); }
.dashboard-page .row.mb-4 > [class*="col-"]:nth-child(4n+4) > .card,
.dashboard-page .row.my-3 > [class*="col-"]:nth-child(4n+4) > .card { border-top-color: var(--ui-sky); }

.dashboard-page .row.mb-4 .card strong,
.dashboard-page .row.my-3 .card strong {
  display: block;
  margin-top: .28rem;
  color: var(--ui-ink);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 750;
  letter-spacing: -.035em;
}

.dashboard-page .row.mb-4 .card small,
.dashboard-page .row.my-3 .card small { margin-top: .25rem; color: var(--ui-muted); }

.dashboard-metric-body {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: .9rem;
  align-content: center;
}

.dashboard-metric-body > .dashboard-metric-icon {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
}

.dashboard-metric-body > :not(.dashboard-metric-icon) { grid-column: 2; }

.dashboard-metric-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 1.05rem;
  transform: rotate(3deg);
}

.dashboard-metric-icon i { transform: rotate(-3deg); }
.dashboard-metric-icon--indigo { color: #525986; background: #f0f1fa; border-color: #e1e3f2; }
.dashboard-metric-icon--mint { color: #218b70; background: #eaf8f3; border-color: #d4f0e6; }
.dashboard-metric-icon--coral { color: #ca5c4c; background: #fff0ed; border-color: #f9ded8; }
.dashboard-metric-icon--sky { color: #288ca5; background: #eaf7fa; border-color: #d5edf2; }
.dashboard-metric-icon--amber { color: #b3771e; background: #fff7e5; border-color: #f5e8c8; }

/* Production dashboard KPI cards */
.production-dashboard-page .app-content > .row.mb-4 {
  --bs-gutter-x: 1rem;
  align-items: stretch;
}
.production-dashboard-page .app-content > .row.mb-4 > [class*="col-"] > .card {
  min-height: 112px;
  padding: 1rem 1.1rem;
  border: 1px solid #e5e7ef;
  border-top: 0;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff 0%, #fbfbfd 100%);
  box-shadow: 0 10px 28px rgba(39, 47, 84, .07);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.production-dashboard-page .app-content > .row.mb-4 > [class*="col-"] > .card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 18px 18px 0 0;
  content: "";
  background: var(--metric-accent, var(--ui-indigo));
}
.production-dashboard-page .app-content > .row.mb-4 > [class*="col-"] > .card:hover {
  z-index: 1;
  transform: translateY(-3px);
  border-color: #d9dce8;
  box-shadow: 0 16px 34px rgba(39, 47, 84, .12);
}
.production-dashboard-page .app-content > .row.mb-4 > [class*="col-"]:nth-child(2) > .card,
.production-dashboard-page .app-content > .row.mb-4 > [class*="col-"]:nth-child(6) > .card { --metric-accent: var(--ui-mint); }
.production-dashboard-page .app-content > .row.mb-4 > [class*="col-"]:nth-child(3) > .card { --metric-accent: var(--ui-coral); }
.production-dashboard-page .app-content > .row.mb-4 > [class*="col-"]:nth-child(4) > .card { --metric-accent: var(--ui-sky); }
.production-dashboard-page .app-content > .row.mb-4 > [class*="col-"]:nth-child(5) > .card { --metric-accent: #7b6daf; }
.production-dashboard-page .dashboard-metric-body {
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: .85rem;
  align-content: center;
}
.production-dashboard-page .dashboard-metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: .95rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.production-dashboard-page .row.mb-4 .card span.text-muted {
  margin: 0;
  color: #747b98 !important;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
}
.production-dashboard-page .row.mb-4 .card strong {
  margin-top: .4rem;
  color: #18244b;
  font-size: clamp(1.35rem, 1.65vw, 1.75rem) !important;
  line-height: 1.15;
  overflow-wrap: normal;
  word-break: normal;
}
.production-dashboard-page .overview-metrics .overview-metric {
  min-height: 132px;
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 1.15rem 1.35rem;
}
.production-dashboard-page .overview-metrics .overview-metric-value {
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}
.overview-metrics .overview-metric-value {
  overflow-wrap: normal;
  word-break: keep-all;
}
@media (max-width: 767.98px) {
  .production-dashboard-page .app-content > .row.mb-4 > [class*="col-"] > .card { min-height: 104px; }
}
.dashboard-page .list-group-item { padding: .9rem 1.25rem; border-color: var(--ui-border); }
.dashboard-page .list-group-item-action:hover { color: var(--ui-ink); background: #f8f9fc; }

.table-responsive { border-radius: 10px; }
.table { margin-bottom: 0; color: var(--ui-ink); }
.table thead th {
  padding-top: .78rem;
  padding-bottom: .78rem;
  color: #666d86;
  background: #f8f9fc;
  border-bottom-width: 1px;
  font-size: .71rem;
  letter-spacing: .075em;
}
.table tbody tr { transition: background-color .15s ease; }
.table tbody tr:hover { --bs-table-hover-bg: #faf7f4; }
.table tbody td { vertical-align: middle; }

.badge { padding: .42em .68em; border-radius: 7px; font-weight: 700; letter-spacing: .01em; }
.alert { border-width: 1px; border-radius: 12px; box-shadow: 0 4px 18px rgba(39,45,78,.035); }
.pagination .page-link { color: var(--ui-indigo); border-color: var(--ui-border); }
.pagination .active .page-link { color: #fff; background: var(--ui-indigo); border-color: var(--ui-indigo); }

@media (max-width: 767.98px) {
  .app-content { padding: 1.1rem !important; }
  .dashboard-page .app-content { padding: 1.1rem !important; }
  .dashboard-page .row.mb-4 > [class*="col-"] > .card.card-body,
  .dashboard-page .row.my-3 > [class*="col-"] > .card.card-body { min-height: 108px; }
  .card-body { padding: 1.05rem; }
}

/* Product catalogue */
.products-page { max-width: 1180px; }
.products-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.45rem; }
.products-heading h1 { margin: 0; color: var(--cocoa-900); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.06em; }
.products-heading p { margin: .2rem 0 0; color: #987564; }
.product-add { min-width: 0; padding: .375rem .8rem; }
.product-toolbar { display: flex; gap: .65rem; align-items: center; margin-bottom: 1.75rem; }
.product-search { display: flex; flex: 1 1 380px; align-items: center; gap: .7rem; min-height: 52px; padding: 0 .95rem; border: 1px solid #e7d9cb; border-radius: 10px; background: #fffdf9; color: #6d4430; }
.product-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--cocoa-900); }
.product-toolbar select { min-height: 52px; min-width: 175px; padding: 0 .9rem; border: 1px solid #e7d9cb; border-radius: 10px; background: #fffdf9; color: #6d4430; }
.product-toolbar .btn { min-height: 38px; }
.product-table-wrap { overflow: hidden; border: 1px solid #e5ddd2; border-radius: 14px; background: #fffdf9; }
.product-table thead th { padding: 1.15rem .9rem; color: #1e1511; font-size: .89rem; letter-spacing: 0; text-transform: none; }
.product-table td { padding: .78rem .9rem; vertical-align: middle; }
.product-thumb { display: inline-grid; width: 56px; height: 48px; place-items: center; object-fit: contain; border-radius: 9px; background: #fff8ed; }
.product-thumb-placeholder { color: #9e5d36; font-family: Poppins, sans-serif; font-weight: 800; font-size: 1.1rem; }
.product-name { display: block; color: #211713; font-weight: 700; text-decoration: none; }
.product-name:hover { color: var(--caramel-500); }
.product-sku { display: block; margin-top: .15rem; color: #9a7562; font-size: .76rem; }
.product-price { color: #1f1713; font-weight: 800; }
.stock-count { color: #275d3c; font-weight: 700; }
.stock-low { color: #aa7022; }.stock-empty { color: #b5472f; }
.product-edit { color: #9a5b21; background: #fff4df; border-color: #fff4df; }.product-edit:hover { color: #754316; background: #ffe9c3; }
.product-detail-image { display: block; width: 100%; max-height: 260px; object-fit: contain; border: 1px solid #f0dfd0; border-radius: 18px; background: #fffdf9; }
.product-image-card { min-height: 385px; }
.image-upload-area { display: grid; width: 100%; min-height: 255px; place-items: center; overflow: hidden; border: 2px dashed #e9c8a9; border-radius: 14px; background: #fff9f0; cursor: pointer; }
.image-upload-area:hover { border-color: var(--caramel-500); background: #fff4e5; }
.image-upload-area img { width: 100%; height: 255px; object-fit: contain; }
.image-upload-area span { display: grid; gap: .4rem; place-items: center; color: #9b694c; text-align: center; }
.image-upload-area i { color: var(--caramel-500); font-size: 2.2rem; }.image-upload-area strong { color: var(--cocoa-700); }.image-upload-area small { color: #aa8069; }
.pos-page { max-width: 1180px; }.pos-checkout { position: sticky; top: 1rem; }.pos-page .form-check-input { margin-top: .25rem; }
.daily-product-sales { min-height: 310px; overflow: hidden; }
.daily-product-sales__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.daily-product-sales__header h2 { margin-bottom: .15rem; text-transform: uppercase; letter-spacing: .035em; }
.daily-product-sales__header small { color: #8a7280; }
.daily-product-sales__filter { display: grid; justify-items: end; gap: .25rem; }
.daily-product-sales__filter label { color: #755565; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.daily-product-sales__filter input { max-width: 142px; padding: .38rem .5rem; color: #3c3154; border: 1px solid #e1d7e8; border-radius: 8px; background: #faf7fc; font-size: .78rem; }
.daily-product-sales__rows { display: grid; gap: .72rem; }
.daily-product-sales__row { display: grid; grid-template-columns: minmax(105px, 1fr) minmax(130px, 1.45fr) 38px; align-items: center; gap: .65rem; }
.daily-product-sales__name { overflow: hidden; color: #38263d; font-size: .82rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.daily-product-sales__track { position: relative; height: 20px; overflow: hidden; border-radius: 4px; background: #f2eaf4; }
.daily-product-sales__bar { position: absolute; inset: 0 auto 0 0; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, #a7519c, #bd6daf); }
.daily-product-sales__track strong { position: relative; z-index: 1; display: flex; height: 100%; align-items: center; padding: 0 .45rem; color: #fff; font-size: .68rem; }
.daily-product-sales__unit { color: #8a7280; font-size: .7rem; }
.daily-product-sales__pos { align-self: end; margin-top: auto; padding-top: 1.15rem; color: #8c437f; font-size: .78rem; font-weight: 700; text-decoration: none; }
.daily-product-sales__pos:hover { color: #63305b; }
@media (max-width: 575.98px) { .daily-product-sales__header { align-items: stretch; flex-direction: column; }.daily-product-sales__filter { justify-items: start; }.daily-product-sales__row { grid-template-columns: 95px minmax(110px, 1fr) 34px; } }
.barcode-scan { border-color: var(--caramel-300); background: #fffaf3; }
.pos-product-picker { position: relative; }
.pos-product-picker__trigger { display: flex; width: 100%; min-height: 43px; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .8rem; color: #866b5d; text-align: left; border: 1px solid #e9d6c5; border-radius: 10px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.pos-product-picker__trigger:hover { border-color: var(--caramel-300); }
.pos-product-picker__trigger:focus, .pos-product-picker.is-open .pos-product-picker__trigger { border-color: var(--caramel-300); outline: 0; box-shadow: 0 0 0 .22rem rgba(217, 119, 53, .14); }
.pos-product-picker__trigger i { flex: 0 0 auto; transition: transform .18s ease; }
.pos-product-picker.is-open .pos-product-picker__trigger i { transform: rotate(180deg); }
.pos-product-picker__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-product-picker__value.has-value { color: var(--cocoa-900); font-weight: 650; }
.pos-product-picker__menu { position: absolute; z-index: 1050; top: calc(100% + .45rem); right: 0; left: 0; min-width: 285px; padding: .5rem; border: 1px solid #ead8c7; border-radius: 13px; background: #fff; box-shadow: 0 16px 38px rgba(77, 47, 31, .17); }
.pos-product-picker__search-wrap { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; padding: 0 .7rem; color: #aa8069; border: 1px solid #ead8c7; border-radius: 9px; background: #fffaf3; }
.pos-product-picker__search { width: 100%; min-height: 39px; padding: 0; color: var(--cocoa-900); border: 0; outline: 0; background: transparent; }
.pos-product-picker__options { display: grid; max-height: 250px; overflow-y: auto; overscroll-behavior: contain; }
.pos-product-picker__option { display: grid; gap: .12rem; padding: .62rem .7rem; text-align: left; border: 0; border-radius: 8px; background: transparent; }
.pos-product-picker__option:hover, .pos-product-picker__option:focus { outline: 0; background: #fff4e5; }
.pos-product-picker__option.is-selected { background: #ffedd5; }
.pos-product-picker__option-name { color: var(--cocoa-900); font-weight: 700; }
.pos-product-picker__option-meta { color: #947462; font-size: .76rem; }
.pos-product-picker__empty { padding: 1rem .7rem; color: #947462; text-align: center; font-size: .84rem; }
.pos-totals { display: grid; gap: .55rem; padding: .9rem; border-radius: 12px; background: #fff8ee; }.pos-totals > div { display: flex; justify-content: space-between; gap: 1rem; color: #735442; }.pos-totals strong { color: var(--cocoa-900); }.pos-total-due { padding-top: .65rem; border-top: 1px solid #ead5c1; font-size: 1.06rem; }.pos-change { color: #25633f !important; font-weight: 700; }.pos-change strong { color: #25633f; }
.list-filter { padding: .8rem; border: 1px solid #eadfd5; border-radius: 14px; background: #fffdf9; }
.table-responsive thead th { position: sticky; z-index: 1; top: 0; background: #fffaf4; }
.form-label { font-weight: 600; }
.requiredField::after, label.required::after { margin-left: .2rem; color: #b5472f; content: "*"; font-weight: 800; }
.pos-adjustments summary { cursor: pointer; color: var(--cocoa-700); }
.pos-checkout #complete-sale:disabled { cursor: not-allowed; opacity: .55; }
.pos-product-combobox { position: relative; z-index: 1060; }
.pos-product-combobox .form-control { padding-right: 2.25rem; background-image: linear-gradient(45deg, transparent 50%, #6c5143 50%), linear-gradient(135deg, #6c5143 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; }
.pos-product-options { position: absolute; z-index: 1070; top: calc(100% + .4rem); right: auto; left: 0; width: max(100%, 480px); max-width: min(680px, calc(100vw - 3rem)); max-height: 340px; overflow-x: hidden; overflow-y: auto; border: 1px solid #ddcbbd; border-radius: 12px; background: #fffdf9; box-shadow: 0 16px 36px rgba(69, 42, 28, .2); }
.pos-product-option { display: grid; width: 100%; padding: .75rem .9rem; border: 0; border-bottom: 1px solid #f1e5da; background: transparent; color: var(--cocoa-900); text-align: left; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; }
.pos-product-option:last-child { border-bottom: 0; }
.pos-product-option:hover, .pos-product-option.active { background: #fff0df; }
.pos-product-identity, .pos-product-facts { display: flex; flex-direction: column; }
.pos-product-identity { min-width: 0; }
.pos-product-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-product-option small { color: #846554; }
.pos-product-facts { align-items: flex-end; white-space: nowrap; }
.pos-product-stock { margin-top: .18rem; padding: .15rem .45rem; border-radius: 999px; background: #e9f6ed; color: #25633f; font-size: .76rem; font-weight: 700; }
.pos-product-empty { padding: 1rem; color: #846554; text-align: center; }
@media (max-width: 767.98px) { .pos-product-options { right: 0; width: 100%; max-width: none; }.pos-product-option { grid-template-columns: 1fr; }.pos-product-facts { align-items: flex-start; } }
@media (max-width: 575.98px) { .products-heading, .product-toolbar { align-items: stretch; flex-direction: column; }.product-add { width: 100%; }.product-toolbar select { width: 100%; } }
@media (max-width: 575.98px) {
  /* In a column toolbar, the desktop flex-basis becomes height, not width. */
  .product-toolbar .product-search {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding: 0 .75rem;
  }
  .product-toolbar .product-search input { min-width: 0; font-size: 16px; }
  .product-toolbar { margin-bottom: 1rem; }
}

/* Independent application scroll regions */
html:has(body.erp-authenticated), body.erp-authenticated { height: 100%; overflow: hidden; }
body.erp-authenticated { display: flex; min-height: 100dvh; flex-direction: column; }
body.erp-authenticated .app-shell { width: 100%; height: 100dvh; min-height: 0; flex: 1 1 auto; overflow: hidden; }
.app-workspace { display: flex; min-width: 0; min-height: 0; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
.app-workspace .app-topbar { flex: 0 0 var(--erp-topbar-height); }
body.erp-authenticated .app-content { height: auto; min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.app-shell-public .app-workspace { width: 100%; min-height: 100vh; overflow: visible; }
body.erp-authenticated .app-content::-webkit-scrollbar { width: 8px; }
body.erp-authenticated .app-content::-webkit-scrollbar-thumb { border-radius: 999px; background: #d8c5b7; }