/* !
 * DharmiERP — custom.css
 * Theme-specific overrides on top of AdminLTE v4.
 * Do NOT add HopeUI / iqonic rules here.
 */

/* ──────────────────────────────────────────
   Base
────────────────────────────────────────── */
:focus {
  outline: none;
}

/* Font smoothing — prevents blurry fonts on Retina/macOS */
body,
.app-sidebar,
.app-header,
.card,
.btn,
.form-control,
.form-select,
.table,
.badge,
.modal-content {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  line-height  : 1.5;
  /* Win7/Chrome fallback: Source Sans 3 (CDN) → Noto Sans (Chrome-internal) → Arial Unicode MS (Win7+Office) → Arial */
  font-family  : 'Source Sans 3', 'Noto Sans', 'Arial Unicode MS', Arial, sans-serif;
}

/* ──────────────────────────────────────────
   Sidebar brand icon alignment
────────────────────────────────────────── */
.sidebar-brand .brand-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ──────────────────────────────────────────
   Sidebar active link
────────────────────────────────────────── */
.sidebar-menu .nav-link.active,
.sidebar-menu .nav-link:not(.static-item).active {
  background-color: var(--bs-primary);
  color: #fff;
}

/* ──────────────────────────────────────────
   Buttons — remove Safari/Chrome native styling
────────────────────────────────────────── */
.btn,
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* ──────────────────────────────────────────
   Forms — consistent border/radius rendering
────────────────────────────────────────── */
input[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* ──────────────────────────────────────────
   Custom select arrow (consistent across browsers)
────────────────────────────────────────── */
.form-select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 0.75rem center;
  background-size:     12px;
  padding-right:       2.25rem;
}

/* ──────────────────────────────────────────
   Scrollbar (WebKit/macOS)
────────────────────────────────────────── */
::-webkit-scrollbar {
  width:  6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius:    3px;
}

/* ──────────────────────────────────────────
   GPU acceleration for animated elements
────────────────────────────────────────── */
.app-sidebar,
.nav-link,
.btn,
.card,
.dropdown-menu,
.modal-dialog {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

/* ──────────────────────────────────────────
   Utility icon sizes
────────────────────────────────────────── */
.icon-12 { width: 12px; height: 12px; }
.icon-14 { width: 14px; height: 14px; }
.icon-15 { width: 15px; height: 15px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }

/* ──────────────────────────────────────────
   Progress bar utility
────────────────────────────────────────── */
.progress-xs {
  height: 4px;
}

/* ──────────────────────────────────────────
   DataTables search fix (Safari oval pill)
────────────────────────────────────────── */
div.dataTables_wrapper input[type="search"] {
  -webkit-appearance: none;
  border-radius: 4px;
  border: 1px solid #ced4da;
  padding: 4px 8px;
}

/* ──────────────────────────────────────────
   Cards — subtle hover lift
────────────────────────────────────────── */
.card {
  transition: box-shadow 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ──────────────────────────────────────────
   Table — improved readability
────────────────────────────────────────── */
.table > :not(caption) > * > * {
  vertical-align: middle;
}

/* ──────────────────────────────────────────
   Toastr z-index (above BS5 modals = 1060)
────────────────────────────────────────── */
#toast-container {
  z-index: 1100;
}

:focus {
  outline: none;
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

/* ──────────────────────────────────────────
   Login page — validation error display
────────────────────────────────────────── */
.login-field-error {
  display    : block;
  font-size  : .78rem;
  color      : #e74c3c;
  margin-top : 5px;
  font-weight: 500;
  min-height : 1em;
}
.login-card-body .input-group.is-invalid-group .form-control {
  border-color: #e74c3c;
}

/* ──────────────────────────────────────────
   ERP Footer — match ERP design system
────────────────────────────────────────── */
.app-footer {
  background    : #fff;
  border-top    : 1px solid #e4e2de;
  padding       : 14px 24px;
  font-size     : .78rem;
  color         : #6b6860;
  display       : flex;
  align-items   : center;
  justify-content: space-between;
  gap           : 10px;
  flex-wrap     : wrap;
  font-family   : 'DM Sans', system-ui, sans-serif;
}
.app-footer strong {
  font-weight: 600;
  color      : #1a1917;
}
.app-footer a {
  color          : #1a1917;
  text-decoration: none;
  font-weight    : 500;
}
.app-footer a:hover {
  text-decoration: underline;
  color          : var(--bs-primary, #3a57e8);
}
.app-footer .footer-right {
  display    : flex;
  align-items: center;
  gap        : 6px;
  font-size  : .73rem;
  color      : #9b9890;
}
.app-footer .footer-version {
  background   : #f5f4f1;
  border       : 1px solid #e4e2de;
  border-radius: 20px;
  padding      : 2px 10px;
  font-size    : .71rem;
  font-weight  : 600;
  color        : #6b6860;
  letter-spacing: .03em;
}

/* ──────────────────────────────────────────
   Sidebar — replace big fat circle dots with
   inline SVG icons added via Walker
────────────────────────────────────────── */
.nav-icon.erp-nav-svg {
  width      : 16px;
  height     : 16px;
  flex-shrink: 0;
  opacity    : .75;
  transition : opacity .15s;
  vertical-align: middle;
}
.nav-link.active  .erp-nav-svg,
.nav-link:hover   .erp-nav-svg { opacity: 1; }
/* Hide the default AdminLTE bi-circle fallback when our SVG is present */
.nav-link .nav-icon.bi-circle-fill { display: none; }

/* ──────────────────────────────────────────
   Lock Screen — card-based redesign
────────────────────────────────────────── */
/* Avatar centered at top of card */
.lock-avatar-wrap {
  position  : relative;
  display   : inline-block;
}
.lock-avatar {
  width         : 90px;
  height        : 90px;
  border-radius : 50%;
  object-fit    : cover;
  border        : 3px solid var(--bs-border-color);
  box-shadow    : 0 4px 12px rgba(0,0,0,.12);
}
.lock-avatar-badge {
  position         : absolute;
  bottom           : 2px;
  right            : 2px;
  width            : 26px;
  height           : 26px;
  background       : var(--bs-primary);
  border-radius    : 50%;
  display          : flex;
  align-items      : center;
  justify-content  : center;
  color            : #fff;
  font-size        : .72rem;
  border           : 2px solid var(--bs-body-bg);
}
/* Validation error inside unlock form */
.lockscreen-field-error {
  display    : block;
  font-size  : .78rem;
  color      : #e74c3c;
  font-weight: 500;
  margin-top : 4px;
}
#unlock-error-wrap {
  min-height : 20px;
}
/* Red border on invalid field */
#unlock-password.is-invalid {
  border-color: #e74c3c;
  box-shadow  : 0 0 0 2px rgba(231,76,60,.15);
}

/* ============================================================
   Global Header Search  (gs-*)
   ============================================================ */
.gs-nav-item {
    position : relative;
}
.gs-wrap {
    position  : relative;
    width     : 320px;
}
.gs-bar {
    display       : flex;
    align-items   : center;
    height        : 34px;
    border        : 1.5px solid #dee2e6;
    border-radius : 8px;
    background    : #f8f9fa;
    overflow      : hidden;
    transition    : border-color .15s, box-shadow .15s, background .15s;
}
.gs-bar:focus-within {
    border-color : #86b7fe;
    background   : #fff;
    box-shadow   : 0 0 0 3px rgba(13,110,253,.12);
}
.gs-type-select {
    flex-shrink         : 0;
    width               : 100px;
    height              : 100%;
    padding             : 0 22px 0 10px;
    border              : none;
    border-right        : 1.5px solid #dee2e6;
    border-radius       : 0;
    background          : transparent;
    font-size           : .78rem;
    font-weight         : 500;
    color               : #495057;
    appearance          : none;
    background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236c757d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat   : no-repeat;
    background-position : right 7px center;
    cursor              : pointer;
    outline             : none;
}
.gs-inner {
    flex        : 1;
    display     : flex;
    align-items : center;
    height      : 100%;
    padding     : 0 10px;
}
.gs-icon {
    flex-shrink  : 0;
    color        : #adb5bd;
    margin-right : 7px;
}
.gs-input {
    flex       : 1;
    min-width  : 0;
    border     : none;
    background : transparent;
    font-size  : .875rem;
    color      : #212529;
    outline    : none;
    padding    : 0;
}
.gs-input::placeholder { color: #adb5bd; }
.gs-spinner {
    flex-shrink : 0;
    margin-left : 4px;
    color       : #adb5bd;
    display     : flex;
    align-items : center;
}
.gs-clear-btn {
    flex-shrink     : 0;
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 20px;
    height          : 20px;
    border          : none;
    border-radius   : 50%;
    background      : #dee2e6;
    color           : #495057;
    font-size       : .6rem;
    cursor          : pointer;
    margin-left     : 4px;
    line-height     : 1;
    padding         : 0;
    transition      : background .12s, color .12s;
}
.gs-clear-btn:hover { background: #adb5bd; color: #fff; }

/* ── Results dropdown ── */
.gs-dropdown {
    position      : absolute;
    top           : calc(100% + 6px);
    left          : 0;
    right         : 0;
    background    : #fff;
    border        : 1.5px solid #dee2e6;
    border-radius : 10px;
    box-shadow    : 0 8px 28px rgba(0,0,0,.13);
    z-index       : 9999;
    max-height    : 380px;
    overflow-y    : auto;
}
.gs-no-results {
    padding    : 18px 16px;
    color      : #6c757d;
    font-size  : .85rem;
    text-align : center;
}
.gs-item {
    display       : flex;
    align-items   : center;
    gap           : 12px;
    padding       : 10px 14px;
    cursor        : pointer;
    transition    : background .12s;
    border-bottom : 1px solid #f1f3f5;
}
.gs-item:last-child { border-bottom: none; }
.gs-item:hover,
.gs-item:focus { background: #f8f9fa; outline: none; }
.gs-item-icon {
    width           : 34px;
    height          : 34px;
    border-radius   : 50%;
    background      : #e9ecef;
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-shrink     : 0;
    font-size       : 1rem;
    color           : #495057;
}
.gs-item-info    { flex: 1; min-width: 0; }
.gs-item-name {
    font-size    : .875rem;
    font-weight  : 500;
    color        : #212529;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}
.gs-item-sub {
    font-size  : .78rem;
    color      : #6c757d;
    margin-top : 2px;
}
.gs-item-badge {
    flex-shrink    : 0;
    font-size      : .7rem;
    font-weight    : 600;
    padding        : 2px 9px;
    border-radius  : 20px;
    white-space    : nowrap;
}
.gs-item-badge.customer          { background: #e7f5ff; color: #1971c2; }
.gs-item-badge.status-processing { background: #edfaf3; color: #1e7e44; }
.gs-item-badge.status-completed  { background: #eaf4fb; color: #1a6a9a; }
.gs-item-badge.status-cancelled  { background: #f4f6f6; color: #6b7a7b; }
.gs-item-badge.status-pending    { background: #fef5ec; color: #b96318; }
.gs-item-badge.status-on-hold    { background: #f5eeff; color: #6c2d8e; }
.gs-item-badge.status-refunded   { background: #f4f6f6; color: #5d6b6c; }
.gs-item-badge.status-failed     { background: #fdf0ef; color: #962d22; }
.gs-item-badge.status-preparing  { background: #fff8ec; color: #92590a; border: 1px solid #f7c97e; }

/* ── Modal overlay ── */
.gs-modal-overlay {
    display         : flex;
    align-items     : center;
    justify-content : center;
    position        : fixed;
    inset           : 0;
    background      : rgba(0,0,0,.46);
    z-index         : 99999;
}
.gs-modal-box {
    position      : relative;
    background    : #fff;
    border-radius : 14px;
    box-shadow    : 0 20px 60px rgba(0,0,0,.2);
    width         : 540px;
    max-width     : calc(100vw - 32px);
    max-height    : 88vh;
    overflow-y    : auto;
    padding       : 26px 26px 22px;
}
.gs-modal-close {
    position    : absolute;
    top         : 14px;
    right       : 16px;
    background  : none;
    border      : none;
    font-size   : 1.5rem;
    line-height : 1;
    color       : #adb5bd;
    cursor      : pointer;
    padding     : 0 4px;
    transition  : color .12s;
}
.gs-modal-close:hover { color: #495057; }
.gs-modal-loading,
.gs-modal-error {
    padding    : 40px 16px;
    text-align : center;
    color      : #6c757d;
    font-size  : .875rem;
}
.gs-modal-error { color: #dc3545; }

/* ── Detail header ── */
.gs-detail-header {
    display        : flex;
    align-items    : center;
    gap            : 14px;
    padding-bottom : 16px;
    margin-bottom  : 18px;
    border-bottom  : 1.5px solid #f1f3f5;
}
.gs-detail-avatar {
    width           : 48px;
    height          : 48px;
    border-radius   : 50%;
    background      : #e9ecef;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1.5rem;
    color           : #495057;
    flex-shrink     : 0;
}
.gs-detail-avatar.order { background: #fff3bf; color: #9c6700; }
.gs-detail-title {
    font-size   : 1.05rem;
    font-weight : 600;
    color       : #212529;
    margin      : 0 0 5px;
}
.gs-detail-badge {
    font-size      : .72rem;
    font-weight    : 600;
    padding        : 3px 11px;
    border-radius  : 20px;
    text-transform : capitalize;
    display        : inline-block;
}
.gs-detail-badge.customer          { background: #e7f5ff; color: #1971c2; }
.gs-detail-badge.status-processing { background: #edfaf3; color: #1e7e44; }
.gs-detail-badge.status-completed  { background: #eaf4fb; color: #1a6a9a; }
.gs-detail-badge.status-cancelled  { background: #f4f6f6; color: #6b7a7b; }
.gs-detail-badge.status-pending    { background: #fef5ec; color: #b96318; }
.gs-detail-badge.status-on-hold    { background: #f5eeff; color: #6c2d8e; }
.gs-detail-badge.status-refunded   { background: #f4f6f6; color: #5d6b6c; }
.gs-detail-badge.status-failed     { background: #fdf0ef; color: #962d22; }
.gs-detail-badge.status-preparing  { background: #fff8ec; color: #92590a; border: 1px solid #f7c97e; }

/* ── Detail grid ── */
.gs-detail-grid {
    display        : flex;
    flex-direction : column;
    gap            : 10px;
    margin-bottom  : 20px;
}
.gs-detail-row   { display: flex; gap: 12px; }
.gs-detail-label {
    flex-shrink : 0;
    width       : 110px;
    font-size   : .8rem;
    font-weight : 500;
    color       : #6c757d;
    padding-top : 1px;
}
.gs-detail-value {
    flex       : 1;
    font-size  : .875rem;
    color      : #212529;
    word-break : break-word;
}
.gs-delivery-date {
    font-weight  : 600;
    color        : #1971c2;
}

/* ── Partial payment block ── */
.gs-partial-block {
    margin       : 0 0 14px 0;
    padding      : 12px 14px;
    background   : #fffbf0;
    border       : 1px solid #f7c97e;
    border-radius: 8px;
}
.gs-partial-title {
    font-size   : .78rem;
    font-weight : 700;
    color       : #92590a;
    margin-bottom: 8px;
}
.gs-partial-rows    { display: flex; flex-direction: column; gap: 4px; }
.gs-partial-row     { display: flex; justify-content: space-between; font-size: .82rem; }
.gs-partial-paid    { font-weight: 600; color: #1e7e44; }
.gs-partial-due     { font-weight: 600; color: #c0392b; }
.gs-partial-cleared { font-weight: 600; color: #1971c2; }

/* ── Order items table ── */
.gs-items-table {
    width           : 100%;
    border-collapse : collapse;
    font-size       : .82rem;
}
.gs-items-table th,
.gs-items-table td {
    padding       : 7px 10px;
    border-bottom : 1px solid #f1f3f5;
    color         : #495057;
}
.gs-items-table thead th {
    font-weight    : 600;
    font-size      : .73rem;
    color          : #6c757d;
    text-transform : uppercase;
    letter-spacing : .04em;
    background     : #f8f9fa;
}
.gs-items-table tfoot td  { border-top: 1.5px solid #dee2e6; border-bottom: none; }
.gs-total-row td           { font-size: .9rem; }
.gs-no-items               { padding: 12px; color: #adb5bd; font-size: .8rem; }

/* ── Date Range Picker ─────────────────────────────────────── */
.erp-dr-wrap {
    display          : inline-flex;
    align-items      : center;
    gap              : 6px;
    height           : 38px;
    padding          : 0 10px 0 12px;
    border           : 1.5px solid var(--erp-border, #dee2e6);
    border-radius    : 8px;
    background-color : #ffffff !important;
    cursor           : pointer;
    transition       : border-color .15s, box-shadow .15s;
    flex-shrink      : 1;
    min-width        : 0;
    box-sizing       : border-box;
}
.erp-dr-wrap:hover        { border-color: var(--erp-primary, #5a78ee); }
.erp-dr-wrap:focus-within { border-color: var(--erp-primary, #5a78ee); box-shadow: 0 0 0 3px rgba(90,120,238,.12); }

.erp-dr-icon {
    color       : var(--erp-text-muted, #adb5bd);
    font-size   : .85rem;
    flex-shrink : 0;
    pointer-events: none;
}

.erp-dr-input {
    border           : none !important;
    background-color : transparent !important;
    box-shadow       : none !important;
    outline          : none;
    font-size        : .8rem;
    width            : 160px;
    color            : var(--erp-text, #1a1917);
    cursor           : pointer;
    padding          : 0;
    line-height      : 1;
    white-space      : nowrap;
    overflow         : hidden;
    text-overflow    : ellipsis;
    flex-shrink      : 0;
}
.erp-dr-input::placeholder { color: var(--erp-text-muted, #adb5bd); }

/* Flatpickr range — style the selected range highlight */
.flatpickr-day.inRange    { background: rgba(26,25,23,.10) !important; border-color: transparent !important; box-shadow: none !important; }
.flatpickr-day.startRange,
.flatpickr-day.endRange   { background: #1a1917 !important; border-color: #1a1917 !important; color: #fff !important; }

/* ── Flatpickr: selected day & today indicator ───────────────────────────── */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background   : #1a1917 !important;
    border-color : #1a1917 !important;
    color        : #fff !important;
    font-weight  : 600;
}
.flatpickr-day.today:not(.selected) {
    border-bottom : 2px solid #1a1917 !important;
    font-weight   : 600;
    color         : inherit;
    background    : transparent !important;
}
.flatpickr-day:hover:not(.selected):not(.disabled):not(.prevMonthDay):not(.nextMonthDay) {
    background   : rgba(26,25,23,.08) !important;
    border-color : transparent !important;
}

/* ── Dashboard Activity Overview: top products + status ─────────────────── */
.dash-section-label {
    font-size    : .72rem;
    font-weight  : 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color        : var(--erp-text-muted, #6c757d);
    margin       : 0 0 8px;
}
.dash-top-products, .dash-status-list {
    list-style   : none;
    margin       : 0;
    padding      : 0;
    display      : flex;
    flex-direction: column;
    gap          : 6px;
}
.dash-top-product-item {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 8px;
    padding        : 6px 10px;
    border-radius  : 6px;
    background     : var(--bs-light, #f8f9fa);
    font-size      : .83rem;
}
.dark .dash-top-product-item { background: rgba(255,255,255,.05); }
.dash-top-product-name {
    flex         : 1;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
    font-weight  : 500;
}
.dash-top-product-stats { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dash-badge-qty {
    font-size   : .75rem;
    padding     : 2px 6px;
    border-radius: 20px;
    background  : rgba(90,120,238,.12);
    color       : var(--erp-primary, #5a78ee);
    white-space : nowrap;
}
.dash-top-product-val {
    font-weight : 600;
    font-size   : .83rem;
    white-space : nowrap;
}
.dash-status-item {
    display        : flex;
    align-items    : center;
    gap            : 8px;
    padding        : 5px 10px;
    border-radius  : 6px;
    background     : var(--bs-light, #f8f9fa);
    font-size      : .83rem;
}
.dark .dash-status-item { background: rgba(255,255,255,.05); }
.dash-status-count {
    flex       : 1;
    color      : var(--erp-text-muted, #6c757d);
    font-size  : .8rem;
}
.dash-status-total { font-weight: 600; font-size: .83rem; flex-shrink: 0; }

/* ── Salary calculation — month + year select row ───────────── */
.erp-month-year-wrap {
    display     : inline-flex;
    align-items : center;
    gap         : 8px;
}

/* circular × clear button */
.erp-dr-clear {
    width          : 20px;
    height         : 20px;
    border-radius  : 50%;
    border         : none;
    background     : #e9ecef;
    color          : #868e96;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    cursor         : pointer;
    font-size      : .9rem;
    flex-shrink    : 0;
    line-height    : 1;
    padding        : 0;
    transition     : background .15s, color .15s;
}
.erp-dr-clear:hover { background: #ffe3e3; color: #dc3545; }

/* ── ERP Pagination ─────────────────────────────────────────────────────── */
.erp-pagination {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 12px 16px;
    border-top     : 1px solid var(--bs-border-color, #e5e7eb);
    flex-wrap      : wrap;
    gap            : 8px;
    background     : #fff;
}
.erp-pagination-info { font-size: 13px; color: #6b7280; }
.erp-pagination-pages { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.erp-page-btn {
    min-width      : 34px;
    height         : 34px;
    padding        : 0 10px;
    border         : 1px solid var(--bs-border-color, #dee2e6);
    background     : #fff;
    color          : #374151;
    border-radius  : 6px;
    font-size      : 13px;
    font-weight    : 500;
    cursor         : pointer;
    transition     : background .15s, color .15s, border-color .15s;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    line-height    : 1;
}
.erp-page-btn:hover:not(:disabled):not(.active) { background: #f3f4f6; border-color: #adb5bd; }
.erp-page-btn.active,
.erp-page-btn.active:disabled {
    background  : #1a1917;
    color       : #fff;
    border-color: #1a1917;
    opacity     : 1;
    cursor      : default;
}
.erp-page-btn:disabled:not(.active) { opacity: .4; cursor: default; }
.erp-page-prev, .erp-page-next { font-size: 18px; line-height: 1; padding: 0 10px; }
.erp-page-ellipsis { padding: 0 4px; color: #9ca3af; font-size: .85rem; line-height: 34px; display: inline-flex; align-items: center; }
.erp-page-info { font-size: 13px; color: #6b7280; }
/* Dark mode */
.dark .erp-pagination { background: transparent; border-color: rgba(255,255,255,.1); }
.dark .erp-page-btn   { background: #1e293b; color: #cbd5e1; border-color: rgba(255,255,255,.12); }
.dark .erp-page-btn.active,
.dark .erp-page-btn.active:disabled {
    background  : #1a1917;
    color       : #fff;
    border-color: #1a1917;
    opacity     : 1;
}
.dark .erp-page-btn:hover:not(:disabled):not(.active) { background: #334155; }
.dark .erp-pagination-info { color: #94a3b8; }
.dark .erp-page-ellipsis { color: #64748b; }

/* ── FullCalendar day number hover — keep text readable */
.fc-day-number:hover,
a.fc-day-number:hover { color: #000 !important; }

/* ── Customer Purchase Analytics ─────────────────────────────────────────── */
.dash-cust-table-wrap { overflow-x: auto; }
.dash-cust-table-wrap .dash-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.dash-cust-table-wrap .dash-table thead tr { border-bottom: 1px solid var(--bs-border-color, #e5e7eb); }
.dash-cust-table-wrap .dash-table th { padding: 10px 14px; font-weight: 600; color: #6b7280; text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; white-space: nowrap; }
.dash-cust-table-wrap .dash-table td { padding: 10px 14px; border-bottom: 1px solid var(--bs-border-color, #f3f4f6); vertical-align: middle; }
.dash-cust-table-wrap .dash-table tbody tr:last-child td { border-bottom: none; }
.dash-cust-table-wrap .dash-table tbody tr:hover { background: rgba(59,91,219,.04); }
.dash-rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #f1f5f9; font-size: .78rem; font-weight: 700; color: #3b5bdb; }
.dash-spend-bar-bg { height: 6px; background: #e9ecef; border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
.dash-spend-bar-fill { height: 100%; background: linear-gradient(90deg, #3b5bdb, #4bc7d2); border-radius: 3px; transition: width .4s ease; }
/* Dark mode */
.dark .dash-cust-table-wrap .dash-table thead tr { border-color: rgba(255,255,255,.1); }
.dark .dash-cust-table-wrap .dash-table th { color: #94a3b8; }
.dark .dash-cust-table-wrap .dash-table td { border-color: rgba(255,255,255,.06); }
.dark .dash-cust-table-wrap .dash-table tbody tr:hover { background: rgba(255,255,255,.04); }
.dark .dash-rank-badge { background: #1e293b; color: #818cf8; }
.dark .dash-spend-bar-bg { background: #334155; }

/* ── User list: order count badge button ──────────────────────────────────── */
.erp-orders-count-btn {
    display       : inline-flex;
    align-items   : center;
    justify-content: center;
    min-width     : 28px;
    height        : 24px;
    padding       : 0 8px;
    border-radius : 20px;
    border        : none;
    background    : rgba(58,87,232,.10);
    color         : #3a57e8;
    font-size     : .8rem;
    font-weight   : 700;
    cursor        : pointer;
    transition    : background .15s, transform .1s;
    line-height   : 1;
}
.erp-orders-count-btn:hover {
    background    : rgba(58,87,232,.20);
    transform     : scale(1.08);
}
.dark .erp-orders-count-btn {
    background    : rgba(129,140,248,.15);
    color         : #818cf8;
}
.dark .erp-orders-count-btn:hover { background: rgba(129,140,248,.28); }

/* ── Loading spinner (shared: users popup, dashboard) ─────────────────────── */
@keyframes erp-spin {
    to { transform: rotate(360deg); }
}
.erp-spinner {
    display       : inline-block;
    width         : 32px;
    height        : 32px;
    border-radius : 50%;
    border        : 3px solid rgba(90,120,238,.15);
    border-top-color : #3a57e8;
    animation     : erp-spin .7s linear infinite;
    vertical-align: middle;
}
.dark .erp-spinner {
    border-color        : rgba(129,140,248,.15);
    border-top-color    : #818cf8;
}
/* ── intl-tel-input: Add User page ──────────────────────────────────────── */
.erp-iti-wrap { position: relative; }
.erp-iti-wrap .iti {
    display : block;
    width   : 100%;
}
.erp-iti-wrap .iti__flag-container { z-index: 20; }
.erp-iti-wrap input.erp-input {
    padding-left : 90px !important;  /* room for dial-code flag */
    width        : 100%;
}
.iti--separate-dial-code .iti__selected-flag {
    background    : transparent;
    border-right  : 1px solid var(--bs-border-color, #d0d7de);
    border-radius : var(--erp-radius, 6px) 0 0 var(--erp-radius, 6px);
}
.dark .iti--separate-dial-code .iti__selected-flag {
    border-right-color : rgba(255,255,255,.12);
}
.iti__country-list {
    z-index    : 1100;
    max-height : 220px;
    font-size  : .875rem;
}
.dark .iti__country-list {
    background : #1e2433;
    border     : 1px solid rgba(255,255,255,.1);
    color      : #e2e8f0;
}
.dark .iti__country-list .iti__country:hover,
.dark .iti__country-list .iti__country.iti__active {
    background : rgba(255,255,255,.07);
}

/* ── Daily Work List: grouped entry rows ─────────────────────────────────── */
.wage-parent-row            { cursor: pointer; user-select: none; }
.wage-expand-icon           { transition: transform .2s ease; display: inline-block; }
.wage-child-row             { display: none; }
.wage-child-row td          { background: #f7f6f4; font-size: .875rem; }
.erp-child-item-name        { padding-left: 20px !important; font-weight: 500; }
.erp-wage-row-actions       { display: flex; gap: 6px; align-items: center; }
/* Dark mode */
.dark .wage-child-row td    { background: rgba(255,255,255,.03); }

/* ── Profile Page ─────────────────────────────────────────────────────────── */

/* Avatar initials circle */
.prf-avatar-wrap  { flex-shrink: 0; }
.prf-avatar {
    width           : 56px;
    height          : 56px;
    border-radius   : 50%;
    background      : #1a1917;
    color           : #ffffff;
    font-size       : 1.375rem;
    font-weight     : 700;
    display         : flex;
    align-items     : center;
    justify-content : center;
    letter-spacing  : .02em;
}

/* Shield icon in password card header */
.prf-shield-icon {
    font-size : 2rem;
    color     : #1a1917;
    opacity   : .18;
}
.dark .prf-shield-icon { color: #fff; }

/* Skeleton loaders */
.prf-skeleton-row {
    height        : 14px;
    border-radius : 6px;
    background    : linear-gradient( 90deg, #eee 25%, #f5f5f5 50%, #eee 75% );
    background-size: 200% 100%;
    animation     : prf-shimmer 1.4s infinite;
    margin-bottom : 14px;
}
.prf-skeleton-row--half { width: 55%; }
@keyframes prf-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.dark .prf-skeleton-row {
    background: linear-gradient( 90deg, #2a2d35 25%, #363a44 50%, #2a2d35 75% );
    background-size: 200% 100%;
}

/* Password field with toggle button */
.prf-pw-wrap {
    position : relative;
    display  : flex;
    align-items: center;
}
.prf-pw-wrap .erp-input { padding-right: 40px; flex: 1; }
.prf-pw-toggle {
    position        : absolute;
    right           : 10px;
    background      : none;
    border          : none;
    cursor          : pointer;
    color           : #888;
    font-size       : 1rem;
    display         : flex;
    align-items     : center;
    padding         : 0;
    line-height     : 1;
}
.prf-pw-toggle:hover { color: #1a1917; }
.dark .prf-pw-toggle:hover { color: #e2e8f0; }

/* Strength bar */
.prf-strength-wrap {
    margin-top : 8px;
    display    : flex;
    align-items: center;
    gap        : 10px;
}
.prf-strength-bar {
    flex          : 1;
    height        : 5px;
    border-radius : 3px;
    background    : #e2e8f0;
    overflow      : hidden;
}
.prf-strength-fill {
    height          : 100%;
    border-radius   : 3px;
    width           : 0;
    transition      : width .35s ease, background .35s ease;
}
.prf-strength-label {
    font-size   : .75rem;
    font-weight : 600;
    white-space : nowrap;
    min-width   : 70px;
}

/* Match hint */
.prf-match-hint {
    font-size   : .78rem;
    font-weight : 600;
    margin-top  : 5px;
    display     : block;
}

/* Requirements checklist */
.prf-req-list {
    list-style  : none;
    padding     : 0;
    margin      : 14px 0 0;
    display     : flex;
    flex-wrap   : wrap;
    gap         : 8px 16px;
}
.prf-req {
    font-size : .78rem;
    color     : #9ca3af;
    display   : flex;
    align-items: center;
    gap       : 5px;
    transition: color .2s;
}
.prf-req .prf-req-icon { font-size: .85rem; }
.prf-req--met       { color: #38a169; }
.dark .prf-req      { color: #6b7280; }
.dark .prf-req--met { color: #48bb78; }

/* Section title separator */
.erp-section-title {
    font-size    : .7rem;
    font-weight  : 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color        : #9ca3af;
    margin-bottom: 14px;
}

/* ── ERP: Design upload drop zone ───────────────────────────────────── */
.erp-design-drop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1.5px dashed var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--bs-secondary, #6c757d);
    transition: border-color .2s, background .2s, color .2s;
    user-select: none;
    background: transparent;
}
.erp-design-drop:hover,
.erp-design-drop.erp-drag-over {
    border-color: var(--bs-primary, #0d6efd);
    background: var(--bs-primary-bg-subtle, #e8f0fe);
    color: var(--bs-primary, #0d6efd);
}

/* ── ERP: Shared image thumbnail grid ───────────────────────────────── */
.erp-img-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.erp-img-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: visible;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: #f0f2f5;
    flex-shrink: 0;
    cursor: pointer;
}
.erp-img-thumb > img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    border-radius: 7px;
}
/* uploading spinner overlay */
.erp-img-thumb-spinner {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.78);
    display: flex; align-items: center; justify-content: center;
    border-radius: 7px; pointer-events: none;
}
.erp-img-thumb-spinner-ring {
    width: 22px; height: 22px;
    border: 3px solid #dee2e6;
    border-top-color: var(--bs-primary, #0d6efd);
    border-radius: 50%;
    animation: erp-spin .7s linear infinite;
}
@keyframes erp-spin { to { transform: rotate(360deg); } }
/* error overlay */
.erp-img-thumb-err {
    position: absolute; inset: 0;
    background: rgba(220,53,69,.85);
    color: #fff; font-size: 10px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 4px; border-radius: 7px;
}
/* × remove badge */
.erp-img-thumb-x {
    position: absolute;
    top: -8px; right: -8px;
    width: 20px; height: 20px;
    background: #1e293b;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; line-height: 1;
    z-index: 3;
    padding: 0;
    transition: background .15s;
}
.erp-img-thumb-x:hover { background: #dc2626; }

/* ── ERP: Fullscreen lightbox ────────────────────────────────────────── */
.erp-lightbox {
    position: fixed; inset: 0;
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
}
.erp-lightbox-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(6px);
}
.erp-lightbox-inner {
    position: relative; z-index: 1;
    max-width: 92vw; max-height: 92vh;
    display: flex; flex-direction: column;
    align-items: center; gap: 16px;
}
.erp-lightbox-img {
    max-width: 88vw; max-height: 78vh;
    object-fit: contain; display: block;
    border-radius: 10px;
    box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.erp-lightbox-x {
    position: absolute; top: -16px; right: -16px;
    width: 34px; height: 34px;
    background: rgba(255,255,255,.15);
    border: none; border-radius: 50%;
    color: #fff; font-size: 20px;
    cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    line-height: 1; z-index: 2;
    transition: background .15s;
}
.erp-lightbox-x:hover { background: rgba(255,255,255,.28); }
.erp-lightbox-actions { display: flex; align-items: center; gap: 10px; }
.erp-lightbox-close,
.erp-lightbox-download {
    padding: 8px 20px; border-radius: 7px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; line-height: 1;
    display: inline-flex; align-items: center; gap: 6px;
}
.erp-lightbox-close { background: rgba(255,255,255,.14); color: #fff; }
.erp-lightbox-close:hover { background: rgba(255,255,255,.24); }
.erp-lightbox-download { background: #fff; color: #111; text-decoration: none; }
.erp-lightbox-download:hover { background: #f1f5f9; color: #111; }

/* ── Hide AdminLTE skip-links (injected by adminlte.min.js accessibility module) ── */
.skip-links { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   ERP Notifications Bell
   ══════════════════════════════════════════════════════════════ */

/* Bell button */
#erp-notif-btn {
    position: relative;
}
#erp-notif-btn .navbar-badge {
    position : absolute;
    top      : 4px;
    right    : 2px;
    font-size: .6rem;
    padding  : 2px 5px;
    min-width: 16px;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */
.erp-notif-panel {
    display       : none;
    flex-direction: column;
    position      : absolute;
    top           : calc(100% + 8px);
    right         : 0;
    width         : 360px;
    max-height    : 500px;
    background    : #fff;
    border        : 1px solid #e2e8f0;
    border-radius : 14px;
    box-shadow    : 0 10px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
    overflow      : hidden;
    z-index       : 1055;
}
.erp-notif-panel.erp-notif-open {
    display: flex;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.erp-notif-header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 14px 16px 12px;
    border-bottom  : 1px solid #f1f5f9;
    flex-shrink    : 0;
    background     : #fff;
}
.erp-notif-title {
    font-weight: 700;
    font-size  : .9rem;
    color      : #0f172a;
    display    : flex;
    align-items: center;
    gap        : 7px;
}
.erp-notif-title i {
    font-size: 1rem;
    color    : #6366f1;
}
.erp-notif-count-label {
    font-size    : .72rem;
    font-weight  : 700;
    color        : #fff;
    background   : #ef4444;
    border-radius: 999px;
    padding      : 2px 9px;
    line-height  : 1.5;
}

/* ── Scrollable body ──────────────────────────────────────────────────────── */
#erp-notif-body {
    flex      : 1;
    overflow-y: auto;
    padding   : 8px 0 4px;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.erp-notif-empty {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 6px;
    padding       : 28px 16px;
    color         : #94a3b8;
    font-size     : .82rem;
    text-align    : center;
}
.erp-notif-empty i {
    font-size: 1.8rem;
    color    : #10b981;
}
.erp-notif-empty span {
    font-weight: 500;
    color      : #64748b;
}

/* ── Section label ────────────────────────────────────────────────────────── */
.erp-notif-section-label {
    font-size     : .68rem;
    font-weight   : 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color         : #94a3b8;
    padding       : 8px 14px 4px;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.erp-notif-card {
    display        : flex;
    align-items    : center;
    gap            : 11px;
    padding        : 9px 14px;
    margin         : 3px 10px;
    text-decoration: none;
    color          : #1e293b;
    border-radius  : 9px;
    border         : 1px solid #f1f5f9;
    background     : #f8fafc;
    transition     : background .14s, box-shadow .14s, border-color .14s;
    cursor         : pointer;
}
.erp-notif-card:hover {
    background  : #fff;
    border-color: #e2e8f0;
    box-shadow  : 0 2px 12px rgba(0,0,0,.08);
    color       : #1e293b;
}
.erp-notif-card-icon {
    width          : 36px;
    height         : 36px;
    border-radius  : 10px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0;
    font-size      : .9rem;
}
.erp-notif-card-content {
    display       : flex;
    flex-direction: column;
    flex          : 1;
    min-width     : 0;
    gap           : 2px;
}
.erp-notif-card-title {
    font-size    : .8rem;
    font-weight  : 600;
    color        : #0f172a;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}
.erp-notif-card-sub {
    font-size    : .72rem;
    color        : #64748b;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}
.erp-notif-card-meta {
    font-size    : .7rem;
    font-weight  : 700;
    border-radius: 6px;
    padding      : 2px 7px;
    white-space  : nowrap;
    flex-shrink  : 0;
}

/* ── Card colour variants ─────────────────────────────────────────────────── */
.erp-notif-card--unpaid  .erp-notif-card-icon { background: #fee2e2; color: #dc2626; }
.erp-notif-card--unpaid  .erp-notif-card-meta { background: #fee2e2; color: #b91c1c; }
.erp-notif-card--partial .erp-notif-card-icon { background: #ffedd5; color: #c2410c; }
.erp-notif-card--partial .erp-notif-card-meta { background: #ffedd5; color: #9a3412; }
.erp-notif-card--salary  .erp-notif-card-icon { background: #ede9fe; color: #6d28d9; }
.erp-notif-card--salary  .erp-notif-card-meta { background: #ede9fe; color: #5b21b6; }
.erp-notif-card--job     .erp-notif-card-icon { background: #dbeafe; color: #2563eb; }

/* Section label with inline action (used for Job Card Alerts) */
.erp-notif-section-has-action {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}
.erp-notif-read-all-link {
    font-size      : .65rem;
    font-weight    : 600;
    text-transform : none;
    letter-spacing : 0;
    color          : #6366f1;
    text-decoration: none;
}
.erp-notif-read-all-link:hover {
    color          : #4338ca;
    text-decoration: underline;
}

/* Dismiss span on individual job-card alert */
.erp-notif-dismiss {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    align-self     : center;
    width          : 24px;
    height         : 24px;
    min-width      : 24px;
    padding        : 0;
    cursor         : pointer;
    color          : #94a3b8;
    border-radius  : 5px;
    flex-shrink    : 0;
    background     : transparent !important;
    border         : none;
    transition     : color .12s, background .12s !important;
    text-decoration: none;
    line-height    : 1;
}
.erp-notif-dismiss:hover {
    color      : #ef4444 !important;
    background : #fee2e2 !important;
}
.erp-notif-dismiss i {
    font-size     : .9rem;
    line-height   : 1;
    pointer-events: none;
    display       : block;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.erp-notif-footer {
    display    : flex;
    border-top : 1px solid #f1f5f9;
    flex-shrink: 0;
    background : #f8fafc;
}
.erp-notif-footer-link {
    flex           : 1;
    text-align     : center;
    padding        : 10px 8px;
    font-size      : .76rem;
    font-weight    : 600;
    color          : #6366f1;
    text-decoration: none;
    transition     : background .12s, color .12s;
}
.erp-notif-footer-link:hover {
    background: #eef2ff;
    color     : #4338ca;
}
.erp-notif-footer-link + .erp-notif-footer-link {
    border-left: 1px solid #e8edf5;
}

/* ── Salary Payment Status panel ──────────────────────────────────────────── */
#salary-payment-wrap .erp-card-header {
    display    : flex;
    align-items: center;
    gap        : 10px;
}
.sp-details-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap                  : 12px;
    margin-top           : 4px;
}
.sp-details-item {
    background   : #f8fafc;
    border       : 1px solid #e8edf5;
    border-radius: 8px;
    padding      : 10px 14px;
}
.sp-details-label {
    display      : block;
    font-size    : .7rem;
    font-weight  : 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color        : #94a3b8;
    margin-bottom: 4px;
}
.sp-details-value {
    display    : block;
    font-size  : .92rem;
    font-weight: 600;
    color      : #1e293b;
    word-break : break-all;
}
.erp-optional {
    font-size  : .75rem;
    font-weight: 400;
    color      : #94a3b8;
}

/* Already-paid wage-entry row highlight */
.erp-entry-paid > td                    { background: rgba(20,83,45,.04) !important; }
.dark .erp-entry-paid > td              { background: rgba(20,83,45,.10) !important; }

/* ─── Error Logs page ───────────────────────────────────────── */

/* Level badges — extends erp-badge with log-specific colours */
.erp-badge-fatal    { background: #fdf0ef; color: #7f1d1d; font-weight: 700; }
.erp-badge-critical { background: #fdf0ef; color: #7f1d1d; }
.erp-badge-notice   { background: #eff6ff; color: #1e3a8a; }
.erp-badge-debug    { background: #f4f6f6; color: #6b7a7b; }

/* Row highlight by severity */
.log-row-fatal,
.log-row-critical { background: rgba(220,38,38,.05) !important; }
.log-row-error    { background: rgba(234,88,12,.04) !important; }
.log-row-warning  { background: rgba(217,119,6,.04) !important; }

/* Log data expand button */
.log-data-btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 28px;
    height         : 28px;
    border-radius  : 6px;
    background     : var(--erp-surface);
    border         : 1px solid var(--erp-border);
    cursor         : pointer;
    color          : var(--erp-text-muted);
    transition     : background var(--erp-transition), color var(--erp-transition);
}
.log-data-btn:hover { background: #e8e7e3; color: var(--erp-text); }

/* Log detail pre block inside erp-modal-body */
.log-modal-pre {
    background   : var(--erp-surface);
    border       : 1px solid var(--erp-border);
    border-radius: 8px;
    padding      : 14px 16px;
    font-size    : .78rem;
    max-height   : 400px;
    overflow     : auto;
    white-space  : pre-wrap;
    word-break   : break-word;
    font-family  : ui-monospace, 'Cascadia Code', 'Fira Mono', monospace;
    color        : var(--erp-text);
}
/* Fix: .erp-modal standalone is display:flex (full-screen); inside overlay it must stack vertically */
.erp-modal-overlay .erp-modal {
    display        : flex;
    flex-direction : column;
    align-items    : stretch;
    justify-content: flex-start;
    padding        : 0;
}

/* ── Log detail modal redesign ──────────────────────────────── */
.log-detail-bar {
    height       : 4px;
    border-radius: var(--erp-radius) var(--erp-radius) 0 0;
    flex-shrink  : 0;
}
.log-detail-bar-fatal,
.log-detail-bar-critical { background: #dc2626; }
.log-detail-bar-error    { background: #ea580c; }
.log-detail-bar-warning  { background: #d97706; }
.log-detail-bar-notice   { background: #2563eb; }
.log-detail-bar-info     { background: #0891b2; }
.log-detail-bar-debug    { background: #94a3b8; }

.log-detail-title-wrap {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

/* Message banner */
.log-detail-msg {
    font-size    : .88rem;
    font-weight  : 500;
    line-height  : 1.55;
    padding      : 12px 14px;
    border-radius: 8px;
    border-left  : 3px solid transparent;
    margin-bottom: 16px;
    word-break   : break-word;
    color        : var(--erp-text);
}
.log-detail-msg-fatal,
.log-detail-msg-critical { background: #fef2f2; border-left-color: #dc2626; }
.log-detail-msg-error    { background: #fff7ed; border-left-color: #ea580c; }
.log-detail-msg-warning  { background: #fffbeb; border-left-color: #d97706; }
.log-detail-msg-notice   { background: #eff6ff; border-left-color: #2563eb; }
.log-detail-msg-info     { background: #ecfeff; border-left-color: #0891b2; }
.log-detail-msg-debug    { background: var(--erp-surface); border-left-color: #94a3b8; }

/* 2-column meta grid */
.log-detail-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 14px 20px;
    margin-bottom        : 16px;
}
.log-detail-cell {
    display       : flex;
    flex-direction: column;
    gap           : 4px;
}
.log-detail-cell-full { grid-column: 1 / -1; }
.log-detail-lbl {
    font-size     : .68rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color         : var(--erp-text-muted);
}
.log-detail-val {
    font-size : .85rem;
    color     : var(--erp-text);
    word-break: break-word;
}
.log-detail-mono {
    font-family: ui-monospace, 'Cascadia Code', monospace;
    font-size  : .8rem;
}
.log-detail-section {
    font-size     : .68rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color         : var(--erp-text-muted);
    margin        : 0 0 8px;
}

/* Dark overrides for message banner */
.dark .log-detail-msg-fatal,
.dark .log-detail-msg-critical { background: rgba(220,38,38,.12); }
.dark .log-detail-msg-error    { background: rgba(234,88,12,.10); }
.dark .log-detail-msg-warning  { background: rgba(217,119,6,.10); }
.dark .log-detail-msg-notice   { background: rgba(37,99,235,.10); }
.dark .log-detail-msg-info     { background: rgba(8,145,178,.10); }

/* Table column widths */
.log-col-id      { width: 52px; }
.log-col-time    { width: 146px; white-space: nowrap; }
.log-col-level   { width: 88px; }
.log-col-context { width: 96px; }
.log-col-user    { width: 128px; font-size: .75rem; word-break: break-all; }
.log-col-data    { width: 52px; text-align: center; }

/* Dark-mode overrides */
.dark .log-modal-pre {
    background  : #161b22;
    border-color: rgba(255,255,255,.1);
    color       : #c9d1d9;
}
.dark .log-row-fatal,
.dark .log-row-critical { background: rgba(248,113,113,.08) !important; }
.dark .log-row-error    { background: rgba(251,146,60,.07)  !important; }
.dark .log-row-warning  { background: rgba(251,191,36,.06)  !important; }

/* ══════════════════════════════════════════════════════════════
   Quotation Phase 1 — Line Item Power-Ups
══════════════════════════════════════════════════════════════ */

/* Per-line note sub-row */
.item-note-row td {
    padding-top    : 0 !important;
    border-top     : none !important;
    background     : transparent;
}
.item-note-row .item-note {
    font-size  : 0.82rem;
    line-height: 1.4;
    color      : var(--erp-text-muted, #6b7280);
}

/* Item number inputs — hide native spinners so typed value is always visible */
.item-qty::-webkit-outer-spin-button,
.item-qty::-webkit-inner-spin-button,
.item-disc::-webkit-outer-spin-button,
.item-disc::-webkit-inner-spin-button,
.item-price::-webkit-outer-spin-button,
.item-price::-webkit-inner-spin-button,
.item-total::-webkit-outer-spin-button,
.item-total::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.item-qty,
.item-disc,
.item-price,
.item-total { -moz-appearance: textfield; text-align: right; }
.item-qty   { text-align: center; }

/* Optional item row — muted appearance */
.item-row-optional .item-name,
.item-row-optional .item-uom,
.item-row-optional .item-qty,
.item-row-optional .item-price,
.item-row-optional .item-disc,
.item-row-optional .item-total {
    opacity    : 0.55;
    font-style : italic;
}

/* Row action icons group */
.erp-row-actions {
    display    : flex;
    align-items: center;
    gap        : 4px;
    flex-wrap  : nowrap;
}

/* Active state for toggle buttons (note / optional) */
.erp-btn-icon-active {
    background  : #e7f3ff;
    border-color: #3b82f6 !important;
    color       : #2563eb !important;
}

/* Discount type toggle (₹ / %) */
.erp-disc-toggle {
    display      : inline-flex;
    border       : 1px solid #d1d5db;
    border-radius: 5px;
    overflow     : hidden;
    vertical-align: middle;
}
.erp-disc-type-btn,
.erp-tax-type-btn {
    padding   : 1px 7px;
    background: transparent;
    border    : none;
    cursor    : pointer;
    font-size : 0.78rem;
    font-weight: 600;
    color     : #6b7280;
    line-height: 1.6;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.erp-disc-type-btn.active,
.erp-tax-type-btn.active {
    background: var(--bs-primary, #3b82f6);
    color     : #fff;
}
.erp-disc-type-btn:hover:not(.active),
.erp-tax-type-btn:hover:not(.active) {
    background: #f3f4f6;
    color     : #374151;
}

/* Optional badge in view modal */
.erp-optional-badge {
    display       : inline-block;
    font-size     : 0.68rem;
    padding       : 1px 6px;
    border-radius : 999px;
    background    : #f3f4f6;
    color         : #9ca3af;
    border        : 1px solid #e5e7eb;
    vertical-align: middle;
    margin-left   : 5px;
    font-weight   : 500;
}

/* Item note cell in view modal */
.erp-item-note-cell {
    padding-top   : 0 !important;
    border-top    : none !important;
    font-size     : 0.82rem;
    color         : var(--erp-text-muted, #6b7280);
    font-style    : italic;
    padding-bottom: 6px !important;
}

/* Dark mode overrides */
.dark .erp-btn-icon-active {
    background  : rgba(59,130,246,.18);
    border-color: #3b82f6 !important;
    color       : #93c5fd !important;
}
.dark .erp-disc-toggle       { border-color: rgba(255,255,255,.15); }
.dark .erp-disc-type-btn,
.dark .erp-tax-type-btn     { color: #9ca3af; }
.dark .erp-disc-type-btn:hover:not(.active),
.dark .erp-tax-type-btn:hover:not(.active) { background: rgba(255,255,255,.06); color: #e5e7eb; }
.dark .erp-optional-badge    { background: rgba(255,255,255,.07); color: #6b7280; border-color: rgba(255,255,255,.12); }
.dark .erp-item-note-cell    { color: #6b7280; }
.dark .item-note-row .item-note { color: #9ca3af; }

/* ── Phase 2: Tax Support ──────────────────────────────────────────────────── */
/* Tax-inclusive label */
.erp-tax-incl-label {
    display    : flex;
    align-items: center;
    gap        : 6px;
    font-size  : 0.85rem;
    color      : #374151;
    cursor     : pointer;
    margin     : 0;
}
.erp-tax-incl-label input[type="checkbox"] {
    width        : 15px;
    height       : 15px;
    cursor       : pointer;
    accent-color : var(--bs-primary, #3b82f6);
}
/* Tax value amounts in totals box */
.erp-tax-value {
    font-weight: 500;
    color      : #374151;
}
/* Tax rate select in items table */
.item-tax {
    padding-left : 4px;
    padding-right: 4px;
    min-width    : 58px;
    font-size    : 0.85rem;
}
/* Dark mode overrides for Phase 2 */
.dark .erp-tax-incl-label  { color: #9ca3af; }
.dark .erp-tax-value       { color: #e5e7eb; }
.dark .item-tax            { background: var(--erp-input-bg, #1f2937); color: #e5e7eb; border-color: rgba(255,255,255,.15); }


/* ── Phase 3 — PDF & Share ──────────────────────────────────────────────── */
.erp-qv-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e5e7eb; }
.erp-qv-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; margin: 0 0 8px; }
.erp-qv-terms-text { font-size: 13px; color: #374151; white-space: pre-wrap; line-height: 1.6; }
.erp-qv-internal { background: #fffbeb; border-radius: 6px; padding: 10px 12px; border: 1px solid #fde68a; }
.erp-qv-internal .erp-qv-section-title { color: #92400e; border: none; }
.erp-share-link-box { display: flex; flex-direction: column; gap: 8px; }
.erp-share-actions  { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.erp-share-actions .erp-btn { width: auto; flex: 0 0 auto; }
.erp-share-input    { font-size: 12px; font-family: monospace; background: #f8f9fa; }
.erp-btn-whatsapp   { background: #25d366; color: #fff !important; border: 1px solid #25d366; }
.erp-btn-whatsapp:hover { background: #1ebe5d; border-color: #1ebe5d; }

/* Dark mode — Phase 3 */
.dark .erp-qv-section        { border-top-color: rgba(255,255,255,.1); }
.dark .erp-qv-section-title  { color: #9ca3af; }
.dark .erp-qv-terms-text     { color: #e5e7eb; }
.dark .erp-qv-internal       { background: rgba(234,179,8,.08); border-color: rgba(234,179,8,.2); }
.dark .erp-qv-internal .erp-qv-section-title { color: #fbbf24; }
.dark .erp-share-input       { background: #1f2937; color: #e5e7eb; }

/* ── Public Quotation View Page ─────────────────────────────────────────── */
.erp-qv-page { max-width: 820px; margin: 32px auto; font-family: inherit; }
.erp-qv-header { background: linear-gradient(135deg,#3a57e8,#5b73f5); border-radius: 12px 12px 0 0; padding: 28px 32px; color: #fff; display: flex; justify-content: space-between; align-items: flex-start; }
.erp-qv-header-brand { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.erp-qv-header-sub { font-size: 12px; opacity: .75; margin-top: 2px; }
.erp-qv-header-num { text-align: right; }
.erp-qv-header-num .num { font-size: 20px; font-weight: 700; }
.erp-qv-header-num .lbl { font-size: 11px; opacity: .75; }
.erp-qv-meta { background: #eef2ff; border: 1px solid #c7d2fe; padding: 14px 32px; display: flex; gap: 32px; flex-wrap: wrap; }
.erp-qv-meta-item { min-width: 120px; }
.erp-qv-meta-item .lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #6366f1; letter-spacing: .4px; }
.erp-qv-meta-item .val { font-size: 14px; color: #1e293b; font-weight: 600; margin-top: 2px; }
.erp-qv-body { background: #fff; border: 1px solid #e5e7eb; border-top: none; padding: 24px 32px; border-radius: 0 0 12px 12px; }
.erp-qv-body table.erp-qv-items { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.erp-qv-items thead th { background: #3a57e8; color: #fff; font-size: 12px; font-weight: 600; padding: 9px 10px; text-align: left; }
.erp-qv-items tbody td { font-size: 13px; padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.erp-qv-items tbody tr:nth-child(even) td { background: #f8faff; }
.erp-qv-totals { float: right; min-width: 220px; margin-top: 16px; }
.erp-qv-totals table { width: 100%; border-collapse: collapse; }
.erp-qv-totals td { font-size: 13px; padding: 4px 6px; }
.erp-qv-totals td:last-child { text-align: right; font-weight: 600; }
.erp-qv-grand { background: #3a57e8; color: #fff; border-radius: 6px; }
.erp-qv-grand td { padding: 8px 10px !important; font-weight: 700 !important; font-size: 14px !important; }
.erp-qv-note, .erp-qv-terms { clear: both; margin-top: 24px; padding-top: 16px; border-top: 1px solid #e5e7eb; font-size: 13px; }
.erp-qv-section-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #6366f1; letter-spacing: .4px; margin-bottom: 6px; }
.erp-qv-footer { text-align: center; padding: 20px 0 8px; font-size: 12px; color: #9ca3af; }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 4 — Client Acceptance Flow
   ═══════════════════════════════════════════════════════════════════════════ */

/* Expiry warning badge on quotation list */
.erp-expiry-badge {
    font-size: 10px;
    padding: 2px 6px;
    vertical-align: middle;
    font-weight: 600;
    border-radius: 20px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
}
.dark .erp-expiry-badge { background: #451a03; border-color: #78350f; color: #fcd34d; }

/* Rejection section in view modal */
.erp-qv-rejection { border-top: 2px solid #fee2e2; }
.erp-qv-rejection-title { color: #dc2626 !important; }

/* ── Public Quote View: Action Bar ── */
.erp-qv-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 28px 24px 12px;
    border-top: 1px solid #e5e7eb;
    margin-top: 24px;
}
.erp-qv-accept-btn {
    background: #16a34a;
    color: #fff;
    border: none;
    padding: 11px 26px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .2s;
}
.erp-qv-accept-btn:hover:not(:disabled) { background: #15803d; }
.erp-qv-accept-btn:disabled { opacity: .65; cursor: not-allowed; }
.erp-qv-reject-btn {
    background: #fff;
    color: #dc2626;
    border: 2px solid #dc2626;
    padding: 11px 26px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .2s;
}
.erp-qv-reject-btn:hover:not(:disabled) { background: #fef2f2; }

/* Rejection form */
.erp-qv-reject-form {
    max-width: 520px;
    margin: 4px auto 16px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 20px;
}
.erp-qv-reject-form .erp-qv-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #dc2626;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.erp-qv-reject-field { margin-bottom: 12px; }
.erp-qv-reject-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}
.erp-qv-select, .erp-qv-textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #111827;
    background: #fff;
    transition: border-color .15s;
}
.erp-qv-select:focus, .erp-qv-textarea:focus { outline: none; border-color: #6366f1; }
.erp-qv-textarea { resize: vertical; }
.erp-qv-reject-actions { display: flex; gap: 10px; margin-top: 14px; }
.erp-qv-reject-confirm-btn {
    background: #dc2626;
    color: #fff;
    border: none;
    padding: 9px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .2s;
}
.erp-qv-reject-confirm-btn:hover:not(:disabled) { background: #b91c1c; }
.erp-qv-reject-confirm-btn:disabled { opacity: .65; cursor: not-allowed; }
.erp-qv-reject-cancel-btn {
    background: transparent;
    color: #6b7280;
    border: 1px solid #d1d5db;
    padding: 9px 20px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
}
.erp-qv-reject-cancel-btn:hover { background: #f9fafb; }

/* Status banners */
.erp-qv-status-banner {
    margin: 20px 24px;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.erp-qv-status-accepted { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; }
.erp-qv-status-rejected { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }
.erp-qv-status-expired  { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; }

/* Dark mode overrides */
.dark .erp-qv-reject-form  { background: #2d1515; border-color: #7f1d1d; }
.dark .erp-qv-reject-form .erp-qv-section-title { color: #fca5a5; }
.dark .erp-qv-reject-field label { color: #e5e7eb; }
.dark .erp-qv-select, .dark .erp-qv-textarea { background: #1f2937; border-color: #4b5563; color: #f9fafb; }
.dark .erp-qv-reject-cancel-btn { color: #d1d5db; border-color: #4b5563; }
.dark .erp-qv-reject-cancel-btn:hover { background: #374151; }
.dark .erp-qv-actions { border-color: #374151; }
.dark .erp-qv-reject-btn { background: #1f2937; border-color: #dc2626; }
.dark .erp-qv-status-accepted { background: #064e3b; border-color: #065f46; color: #6ee7b7; }
.dark .erp-qv-status-rejected { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }
.dark .erp-qv-status-expired  { background: #451a03; border-color: #78350f; color: #fcd34d; }

/* ════════════════════════════════════════════════════════════════
   Phase 5 — Operational Productivity
════════════════════════════════════════════════════════════════ */

/* Version badge next to quotation number */
.erp-version-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 20px;
    background: #e0e7ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 4px;
    line-height: 1.4;
}
.dark .erp-version-badge {
    background: #1e1b4b;
    border-color: #4338ca;
    color: #a5b4fc;
}

/* Pending Approval badge */
.erp-badge-orange {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}
.dark .erp-badge-orange {
    background: #431407;
    color: #fdba74;
    border-color: #9a3412;
}

/* Approve quick button in table */
.erp-btn-icon-success {
    color: #16a34a;
    border-color: #bbf7d0;
}
.erp-btn-icon-success:hover {
    background: #dcfce7;
    border-color: #86efac;
}
.dark .erp-btn-icon-success {
    color: #4ade80;
    border-color: #14532d;
}
.dark .erp-btn-icon-success:hover {
    background: #14532d;
    border-color: #16a34a;
}

/* Settings modal */
#quote-settings-modal .erp-form-group { margin-bottom: 16px; }
#prefix-preview { font-family: monospace; color: #4338ca; }
.dark #prefix-preview { color: #a5b4fc; }

/* ════════════════════════════════════════════════
   Phase 6 — Pricing Intelligence
════════════════════════════════════════════════ */

/* ── Tier badges ─────────────────────────────── */
.erp-tier-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 4px;
    font-size: .65rem; font-weight: 700;
    margin-left: 6px; letter-spacing: .04em;
    text-transform: uppercase; cursor: pointer;
    transition: opacity .15s;
    vertical-align: middle;
}
.erp-tier-badge:hover { opacity: .8; }
.erp-tier-retail    { background: rgba(59,130,246,.12); color: #2563eb; }
.erp-tier-wholesale { background: rgba(16,185,129,.12); color: #059669; }
.erp-tier-vip       { background: rgba(139,92,246,.12); color: #7c3aed; }
.dark .erp-tier-retail    { background: rgba(59,130,246,.22); color: #93c5fd; }
.dark .erp-tier-wholesale { background: rgba(16,185,129,.22); color: #6ee7b7; }
.dark .erp-tier-vip       { background: rgba(139,92,246,.22); color: #c4b5fd; }

/* ── Tier change dropdown ─────────────────────── */
.erp-tier-wrap { position: relative; display: inline-flex; align-items: center; }
.erp-tier-change-menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 1060;
    background: var(--erp-surface, #fff);
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.13);
    min-width: 130px; padding: 4px 0;
}
.erp-tier-change-opt {
    display: block; padding: 7px 14px; cursor: pointer;
    font-size: .82rem; color: var(--erp-text, #1e293b);
    white-space: nowrap;
}
.erp-tier-change-opt:hover { background: var(--erp-hover, #f1f5f9); }

/* ── Margin section (totals box) ─────────────── */
.erp-totals-cost-row { font-size: .84rem; opacity: .92; }
.erp-margin-positive { color: #059669 !important; }
.erp-margin-negative { color: #dc2626 !important; }

/* ── Cost price column ───────────────────────── */
.erp-cost-col { font-size: .75rem; color: var(--erp-muted, #64748b); white-space: nowrap; }
.erp-cost-lock { font-size: .65rem; opacity: .6; }
.item-cost-price { background: rgba(245,158,11,.07) !important; }
.dark .item-cost-price { background: rgba(245,158,11,.14) !important; }

/* ── Catalog autocomplete dropdown ───────────── */
.cat-autocomplete {
    background: var(--erp-surface, #fff);
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 7px; padding: 4px 0;
    max-height: 230px; overflow-y: auto;
    box-shadow: 0 6px 22px rgba(0,0,0,.14);
}
.cat-autocomplete .erp-dropdown-item { cursor: pointer; }
.cat-autocomplete .cat-result-item:hover { background: var(--erp-hover, #f1f5f9); }

/* ── Catalog modal ───────────────────────────── */
.erp-modal-lg .erp-modal-box { max-width: 820px; }
.erp-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 600px) { .erp-form-grid-2 { grid-template-columns: 1fr; } }
.erp-btn-xs {
    padding: 2px 8px; font-size: .74rem; border-radius: 4px;
    line-height: 1.6; height: auto;
}

/* ════════════════════════════════════════════════════════════════
   PHASE 7 — Quotation Analytics
   ════════════════════════════════════════════════════════════════ */

/* ── Back bar ─────────────────────────────────────────────────── */
.qan-back-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 16px;
    background: var(--erp-card-bg, #fff);
    border-radius: var(--erp-radius, 8px);
    border: 1px solid var(--erp-border, #ebebf0);
}
.qan-back-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--erp-text, #1a1917);
}

/* ── KPI grid ─────────────────────────────────────────────────── */
.qan-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 992px) { .qan-kpi-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px)  { .qan-kpi-grid { grid-template-columns: 1fr; } }

.qan-kpi-card {
    background: var(--erp-card-bg, #fff);
    border: 1px solid var(--erp-border, #ebebf0);
    border-radius: var(--erp-radius, 8px);
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: box-shadow .15s;
}
.qan-kpi-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }

.qan-kpi-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.qan-icon-total    { background: rgba(58,87,232,.12);  color: #3a57e8; }
.qan-icon-accepted { background: rgba(23,144,75,.12);  color: #17904b; }
.qan-icon-rate     { background: rgba(240,165,0,.12);  color: #f0a500; }
.qan-icon-value    { background: rgba(75,199,210,.12); color: #4bc7d2; }

.qan-kpi-body   { display: flex; flex-direction: column; gap: 2px; }
.qan-kpi-label  { font-size: 12px; color: var(--erp-text-muted, #888); font-weight: 500; }
.qan-kpi-value  { font-size: 22px; font-weight: 700; color: var(--erp-text, #1a1917); line-height: 1.2; }
.qan-kpi-sub    { font-size: 11px; color: var(--erp-text-muted, #aaa); }

/* Win-rate card colour states */
.qan-kpi-good .qan-kpi-value { color: #17904b; }
.qan-kpi-warn .qan-kpi-value { color: #f0a500; }
.qan-kpi-bad  .qan-kpi-value { color: #e64c6e; }

/* ── Legend ───────────────────────────────────────────────────── */
.qan-legend {
    display: flex; flex-direction: column; gap: 7px;
    margin-top: 12px;
}
.qan-legend-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--erp-text, #1a1917);
}
.qan-legend-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.qan-legend-label { flex: 1; }
.qan-legend-count { font-weight: 600; }

/* ── Win-rate badges in customer table ────────────────────────── */
.qan-win-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
}
.qan-win-high { background: rgba(23,144,75,.12);  color: #17904b; }
.qan-win-mid  { background: rgba(240,165,0,.12);  color: #b07600; }
.qan-win-low  { background: rgba(230,76,110,.12); color: #c0304f; }

/* ── Dark mode overrides ──────────────────────────────────────── */
.dark .qan-kpi-card  { background: var(--erp-card-bg-dark, #1e1e2d); border-color: var(--erp-border-dark, #2a2a3c); }
.dark .qan-back-bar  { background: var(--erp-card-bg-dark, #1e1e2d); border-color: var(--erp-border-dark, #2a2a3c); }
.dark .qan-kpi-value { color: #e0e0e0; }
.dark .qan-kpi-label,
.dark .qan-kpi-sub,
.dark .qan-legend-label { color: #8a8a9a; }