@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700;800&display=swap');

/* ==============================================================
   ANEVEX DESIGN TOKENS  (merged from resources/css/anx-tokens.css)
   ============================================================== */

/*
 * ============================================================
 *  Anevex Design Tokens  —  Global Foundation Layer
 * ============================================================
 *
 *  PURPOSE
 *  Single source of truth for colours, typography, spacing,
 *  radii, shadows, and borders across the entire Anevex
 *  product suite (POS, Dashboard, future modules).
 *
 *  RULES
 *  1. Naming is generic:  --anx-{category}-{variant}
 *     Never reference a specific screen or module.
 *  2. Values reuse the existing stable systems where they
 *     exist (--theme-color-* dynamic set).
 *  3. This file defines the *canonical* tokens; Tailwind
 *     utilities map to these via tailwind.config.js.
 *  4. Do NOT add component-level styles here.
 *
 *  SECTIONS
 *  T1  Colour – Brand / Primary
 *  T2  Colour – Semantic (danger, success, warning, info)
 *  T3  Colour – Surface
 *  T4  Colour – Text
 *  T5  Colour – Border
 *  T6  Typography
 *  T7  Spacing
 *  T8  Border-Radius
 *  T9  Shadows
 *  T10 Focus & Interaction
 * ============================================================
 */

:root {

    /* ==========================================================
       T1 — Colour – Brand / Primary
       Delegates to the runtime --theme-color system so that
       preset switching works automatically.
       ========================================================== */
    --anx-color-primary:        var(--theme-color);
    --anx-color-primary-hover:  var(--theme-color-hover);
    --anx-color-primary-active: var(--theme-color-active);
    --anx-color-primary-dark:   var(--theme-color-dark);
    --anx-color-primary-light:  var(--theme-color-light);
    --anx-color-primary-rgb:    var(--theme-color-rgb);

    /* ==========================================================
       T2 — Colour – Semantic
       ========================================================== */
    /* Danger */
    --anx-color-danger:         #c2413b;    /* --anx-color-danger */
    --anx-color-danger-soft:    #fdf1f0;    /* --anx-color-danger-soft */
    --anx-color-danger-strong:  #a9332f;    /* --anx-color-danger-strong */
    --anx-color-danger-border:  #efcbc8;    /* --anx-color-danger-border */

    /* Success */
    --anx-color-success:        #16a34a;
    --anx-color-success-soft:   #f0fdf4;
    --anx-color-success-strong: #15803d;
    --anx-color-success-border: #bbf7d0;

    /* Warning */
    --anx-color-warning:        #d97706;
    --anx-color-warning-soft:   #fffbeb;
    --anx-color-warning-strong: #b45309;
    --anx-color-warning-border: #fde68a;

    /* Info */
    --anx-color-info:           #2563eb;
    --anx-color-info-soft:      #eff6ff;
    --anx-color-info-strong:    #1d4ed8;
    --anx-color-info-border:    #bfdbfe;

    /* ==========================================================
       T3 — Colour – Surface
       ========================================================== */
    --anx-color-surface:          #ffffff;  /* --anx-color-surface */
    --anx-color-surface-soft:     #f8fafc;  /* --anx-color-surface-soft */
    --anx-color-surface-disabled: #f4f6f8;  /* --anx-color-surface-disabled */
    --anx-color-surface-overlay:  rgba(0, 0, 0, 0.45);

    /* ==========================================================
       T4 — Colour – Text
       ========================================================== */
    --anx-color-text:       #182230;  /* --anx-color-text */
    --anx-color-text-soft:  #475467;  /* --anx-color-text-soft */
    --anx-color-text-muted: #667085;  /* --anx-color-text-muted */
    --anx-color-text-faint: #98a2b3;  /* --anx-color-text-faint */

    /* ==========================================================
       T5 — Colour – Border
       ========================================================== */
    --anx-color-border:         #dfe6ee;                    /* --anx-color-border */
    --anx-color-border-strong:  #cfd8e3;                    /* --anx-color-border-strong */
    --anx-color-border-primary: rgba(15, 118, 110, 0.18);   /* --anx-color-border-primary */

    /* ==========================================================
       T6 — Typography
       ========================================================== */
    --anx-font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Noto Sans", Arial, "Odoo Unicode Support Noto", sans-serif;
    --anx-font-xs:      0.6875rem;  /* 11px */
    --anx-font-sm:      0.75rem;    /* 12px */
    --anx-font-base:    14px;
    --anx-font-md:      14px;
    --anx-font-lg:      1rem;       /* 16px */
    --anx-font-xl:      1.125rem;   /* 18px */
    --anx-font-2xl:     1.25rem;    /* 20px */
    --anx-font-3xl:     1.5rem;     /* 24px */

    --anx-leading-tight:   1.25;
    --anx-leading-normal:  1.5;
    --anx-leading-relaxed: 1.625;

    --anx-weight-normal:   400;
    --anx-weight-medium:   500;
    --anx-weight-semibold: 600;
    --anx-weight-bold:     700;

    /* -- Semantic typography aliases -- */
    --anx-font-label:             14px;                    /* form labels */
    --anx-font-label-weight:      var(--anx-weight-medium);  /* 500 */

    --anx-font-section:           0.9375rem;              /* 15px */
    --anx-font-section-weight:    var(--anx-weight-semibold);

    --anx-font-card-title:        var(--anx-font-lg);     /* 16px */
    --anx-font-card-title-weight: var(--anx-weight-semibold);

    --anx-font-page-title:        var(--anx-font-xl);     /* 18px */
    --anx-font-page-title-weight: var(--anx-weight-bold);   /* 700 */

    --anx-font-button:            13px;                 /* original approved source: 13px */
    --anx-font-button-weight:     var(--anx-weight-medium);  /* original approved source: 500 */

    --anx-font-chip:              var(--anx-font-sm);     /* 13px */
    --anx-font-chip-weight:       var(--anx-weight-medium);

    --anx-font-table:             var(--anx-font-base);   /* 14px */
    --anx-font-table-weight:      var(--anx-weight-normal);  /* 400 */
    --anx-font-table-key-weight:  var(--anx-weight-medium);  /* 500 — first key column */
    --anx-font-table-header:      13px;                      /* slightly smaller than body */
    --anx-font-table-header-weight: var(--anx-weight-bold);     /* 700 */
    --anx-font-table-total-weight: var(--anx-weight-bold);   /* 700 — totals emphasis */
    --anx-color-table-text:       var(--anx-color-text);       /* #182230 */
    --anx-color-table-header:     var(--anx-color-text-soft);  /* #475467 */

    --anx-table-cell-padding-x:         0.75rem;              /* shared horizontal */
    --anx-table-cell-padding-y:         0.45rem;              /* body cell vertical */
    --anx-table-header-cell-padding-y:  0.5rem;               /* header cell vertical */
    --anx-table-line-height:            var(--anx-leading-normal); /* 1.5 */
    --anx-table-cell-indent:            10px;                 /* first-child left padding */

    --anx-font-modal-title:       var(--anx-font-lg);         /* 16px */
    --anx-font-modal-title-weight: var(--anx-weight-semibold);  /* 600 */

    /* ==========================================================
       T7 — Spacing  (4 px grid)
       ========================================================== */
    --anx-space-1:  0.25rem;  /*  4px */
    --anx-space-2:  0.5rem;   /*  8px */
    --anx-space-3:  0.75rem;  /* 12px */
    --anx-space-4:  1rem;     /* 16px */
    --anx-space-5:  1.25rem;  /* 20px */
    --anx-space-6:  1.5rem;   /* 24px */
    --anx-space-8:  2rem;     /* 32px */
    --anx-space-10: 2.5rem;   /* 40px */
    --anx-space-12: 3rem;     /* 48px */

    /* ==========================================================
       T8 — Border-Radius
       ========================================================== */
    --anx-radius-sm:   5px;
    --anx-radius-md:   5px;
    --anx-radius-lg:   5px;
    --anx-radius-xl:   5px;
    --anx-radius-pill:  999px;

    /* ==========================================================
       T9 — Shadows
       ========================================================== */
    --anx-shadow-sm:  0 1px 2px rgba(16, 24, 40, 0.05);          /* matches --anx-shadow-sm */
    --anx-shadow-md:  0 2px 6px rgba(16, 24, 40, 0.08);
    --anx-shadow-lg:  0 4px 12px rgba(16, 24, 40, 0.10);
    --anx-shadow-xl:  0 8px 24px rgba(16, 24, 40, 0.12);

    /* ==========================================================
       T10 — Interaction
       ========================================================== */
    --anx-transition:    150ms ease;
}


/* ==============================================================
   ANEVEX COMPONENT LIBRARY  (merged from resources/css/anx-components.css)
   ============================================================== */

/*
 * ============================================================
 *  Anevex Component Library  —  Global UI Components
 * ============================================================
 *
 *  PURPOSE
 *  Reusable component classes built on the anx token layer.
 *  Shared across POS, Dashboard, and all future modules.
 *
 *  RULES
 *  1. Every value must reference an --anx-* token.
 *     No hard-coded colours, sizes, or radii.
 *  2. Naming is global:  .anx-{component}-{variant}
 *     Never reference a specific screen or module.
 *  3. This file contains ONLY component CSS.
 *     Tokens live in anx-tokens.css.
 *  4. Components are opt-in — adding a class here does not
 *     change any existing UI until the class is applied.
 *
 *  SECTIONS
 *  C1  Button System
 *  C2  Input System
 *  C3  Field System (Labels + Helper Text + Error)
 *  C4  Card System
 *  C5  Button Activation Layer (specificity bridge)
 *  C6  PrimeVue Visual Authority Layer (token bridge)
 *  C7  POS Entry & Header Action Visual Refinement
 *  C8  Icon Utilities (Lucide inline SVG sizing)
 *  C9  Settings Layout System
 *  C10 Alert / Notice System
 *  C11 Choice Card System
 *  C12 UI Standardization (Typography, Buttons, Icons, Pagination, Tables)
 *  C13 Dual-Language Font System (Cairo + Inter)
 *  C15 Notification Card System
 *  C16 UI Contract Classes (Anevex-owned)
 *
 * ============================================================
 */


/* =============================================================
   C1 — BUTTON SYSTEM
   =============================================================
   Variants : primary, secondary, ghost, danger, icon
   Sizes    : sm, md (default), lg
   States   : default, hover, active, focus-visible, disabled
   ============================================================= */

/* ----- C1.1  Base ----- */

.anx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--anx-space-2);
    font-weight: var(--anx-font-button-weight);
    font-size: var(--anx-font-button);
    line-height: var(--anx-leading-tight);
    padding: var(--anx-space-2) var(--anx-space-4);
    border-radius: var(--anx-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    text-decoration: none;
    transition:
        background-color var(--anx-transition),
        border-color var(--anx-transition),
        color var(--anx-transition),
        box-shadow var(--anx-transition);
}

.anx-btn:focus-visible {
    outline: none;
}

.anx-btn:disabled,
.anx-btn[disabled],
.anx-btn.is-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* ----- C1.2  Variant: Primary ----- */

.anx-btn-primary {
    background-color: var(--anx-color-primary);
    color: #ffffff;
    border-color: var(--anx-color-primary);
}

.anx-btn-primary:hover {
    background-color: var(--anx-color-primary-hover);
    border-color: var(--anx-color-primary-hover);
}

.anx-btn-primary:active {
    background-color: var(--anx-color-primary-active);
    border-color: var(--anx-color-primary-active);
}

/* ----- C1.3  Variant: Secondary ----- */

.anx-btn-secondary {
    background-color: var(--anx-color-surface);
    color: var(--anx-color-text);
    border-color: var(--anx-color-border);
}

.anx-btn-secondary:hover {
    background-color: var(--anx-color-surface-soft);
    border-color: var(--anx-color-border-strong);
}

.anx-btn-secondary:active {
    background-color: var(--anx-color-surface-soft);
    border-color: var(--anx-color-border-strong);
    color: var(--anx-color-text);
}

/* ----- C1.4  Variant: Ghost ----- */

.anx-btn-ghost {
    background-color: transparent;
    color: var(--anx-color-text-soft);
    border-color: transparent;
}

.anx-btn-ghost:hover {
    background-color: var(--anx-color-surface-soft);
    color: var(--anx-color-text);
}

.anx-btn-ghost:active {
    background-color: var(--anx-color-surface-disabled);
    color: var(--anx-color-text);
}

/* ----- C1.5  Variant: Danger ----- */

.anx-btn-danger {
    background-color: var(--anx-color-danger);
    color: #ffffff;
    border-color: var(--anx-color-danger);
}

.anx-btn-danger:hover {
    background-color: var(--anx-color-danger-strong);
    border-color: var(--anx-color-danger-strong);
}

.anx-btn-danger:active {
    background-color: var(--anx-color-danger-strong);
    border-color: var(--anx-color-danger-strong);
}

/* ----- C1.7  Variant: Icon ----- */

.anx-btn-icon {
    padding: var(--anx-space-2);
    gap: 0;
}

.anx-btn-icon.anx-btn-sm {
    padding: var(--anx-space-1);
}

.anx-btn-icon.anx-btn-lg {
    padding: var(--anx-space-3);
}

/* ----- C1.8  Sizes ----- */

.anx-btn-sm {
    font-size: var(--anx-font-xs);
    padding: var(--anx-space-1) var(--anx-space-2);
    gap: var(--anx-space-1);
    border-radius: var(--anx-radius-sm);
}

.anx-btn-lg {
    font-size: var(--anx-font-md);
    padding: var(--anx-space-3) var(--anx-space-6);
    gap: var(--anx-space-2);
    border-radius: var(--anx-radius-lg);
}




/* =============================================================
   C2 — INPUT SYSTEM
   =============================================================
   Variants : input (text), input-search, textarea
   Sizes    : sm, md (default), lg
   States   : default, hover, focus-visible, disabled, invalid,
              readonly, placeholder
   ============================================================= */

/* ----- C2.1  Base Input ----- */

.anx-input {
    display: block;
    width: 100%;
    font-size: var(--anx-font-sm);
    font-weight: var(--anx-weight-normal);
    line-height: var(--anx-leading-normal);
    color: var(--anx-color-text);
    background-color: var(--anx-color-surface);
    padding: var(--anx-space-2) var(--anx-space-3);
    border: 1px solid var(--anx-color-border);
    border-radius: var(--anx-radius-md);
    outline: none;
    transition:
        border-color var(--anx-transition),
        box-shadow var(--anx-transition),
        background-color var(--anx-transition);
}

.anx-input::placeholder {
    color: var(--anx-color-text-faint);
    opacity: 1;
}

/* ----- C2.2  States ----- */

.anx-input:hover {
    border-color: var(--anx-color-border-strong);
}

.anx-input:focus-visible,
.anx-input:focus {
    border-color: var(--anx-color-primary);
}

.anx-input:disabled,
.anx-input[disabled],
.anx-input[readonly] {
    background-color: var(--anx-color-surface-disabled);
    color: var(--anx-color-text-muted);
    cursor: not-allowed;
    opacity: 1;
}

.anx-input[readonly] {
    cursor: default;
}

.anx-input.is-invalid,
.anx-input:invalid:not(:placeholder-shown) {
    border-color: var(--anx-color-danger);
}

.anx-input.is-invalid:focus-visible,
.anx-input.is-invalid:focus {
    border-color: var(--anx-color-danger);
    box-shadow: 0 0 0 3px var(--anx-color-danger-soft);
}

/* ----- C2.4  Variant: Search ----- */

.anx-input-search {
    position: relative;
    display: flex;
    align-items: center;
}

.anx-input-search .anx-input-search-icon {
    position: absolute;
    left: var(--anx-space-3);
    display: flex;
    align-items: center;
    pointer-events: none;
    color: var(--anx-color-text-faint);
    font-size: var(--anx-font-sm);
}

.anx-input-search .anx-input {
    padding-left: calc(var(--anx-space-3) + 1em + var(--anx-space-2));
}

/* ----- C2.6  Checkbox / Radio override ----- */

.form-check-input {
    border-color: var(--anx-color-border);
    border-radius: var(--anx-radius-sm);
}

.form-check-input:checked {
    background-color: var(--anx-color-primary);
    border-color: var(--anx-color-primary);
}

.form-check-input:focus {
    border-color: var(--anx-color-primary);
}


/* =============================================================
   C3 — FIELD SYSTEM  (Labels + Helper Text + Error)
   =============================================================
   Structure : .anx-field > label + input + help/error
   Classes   : anx-field, anx-label, anx-label-required,
               anx-help, anx-error, anx-field-inline
   ============================================================= */

/* ----- C3.1  Field container ----- */

.anx-field {
    display: flex;
    flex-direction: column;
    gap: var(--anx-space-1);
}

/* ----- C3.2  Label  (authoritative .anx-label contract) ----- */

.anx-label {
    display: block;
    font-size: var(--anx-font-label);
    font-weight: var(--anx-font-label-weight);
    line-height: var(--anx-leading-normal);
    color: var(--anx-color-text-soft);
    letter-spacing: 0.01em;
}

/* Disabled context — mute the label when the field is disabled */
.anx-field.is-disabled .anx-label {
    color: var(--anx-color-text-faint);
}


/* =============================================================
   C4 — CARD SYSTEM
   =============================================================
   Shell classes for consistent card surfaces across the
   product suite. Works alongside Bootstrap .card for layout
   utilities (card-flush, card-xl-stretch, grid columns).

   Classes : anx-card, anx-card-header, anx-card-title,
             anx-card-subtitle, anx-card-body
   ============================================================= */

/* ----- C4.1  Card shell ----- */

.anx-card {
    background-color: var(--anx-color-surface);
    border: 1px solid var(--anx-color-border);
    border-radius: var(--anx-radius-lg);
    box-shadow: var(--anx-shadow-sm);
    overflow: hidden;
}

/* ----- C4.2  Card header ----- */

.anx-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--anx-space-3) var(--anx-space-4);
    border-bottom: 1px solid var(--anx-color-border);
    min-height: 3rem;
}

/* ----- C4.3  Card title / subtitle ----- */

.anx-card-title {
    line-height: var(--anx-leading-tight);
    margin: 0;
}


/* =============================================================
   C5 — BUTTON ACTIVATION LAYER
   =============================================================
   PURPOSE
   Make the .anx-btn system visually override legacy Bootstrap /
   Metronic / project styles WITHOUT removing old classes.
   Only buttons carrying .anx-btn are affected.

   WHY AN "ACTIVATION LAYER"?
   C1 defines the Anevex button API (classes + tokens).
   But legacy CSS loads AFTER this file and uses !important:
     anx-components.css  →  style.bundle.css  →  style.custom.css
   C1 rules silently lose the cascade war.  C5 re-declares the
   same visual intent with enough specificity + !important to win.

   SPECIFICITY STRATEGY
   ┌──────────────────────────────────────────────────────┬────────┐
   │ Legacy selector (highest per group)                  │ Spec.  │
   ├──────────────────────────────────────────────────────┼────────┤
   │ .btn-primary  (!important, style.custom)             │ 0,1,0  │
   │ button.btn.btn-primary.ADD (!important)              │ 0,3,1  │
   │ button.btn.btn-primary.ADD:hover:not(:disabled)      │ 0,5,1  │
   │ .btn:not(…)×6.btn-sm  (!important on padding)       │ 0,8,0  │
   ├──────────────────────────────────────────────────────┼────────┤
   │ C5 base:    .btn.anx-btn:not(._)                    │ 0,3,0  │
   │ C5 variant: .btn.anx-btn.anx-btn-*:not(._)          │ 0,4,0  │
   │ C5 hover:   …:not(._):hover:not(:disabled)          │ 0,6,0  │
   │ C5 sm:      …:not(._)×6                             │ 0,9,0  │
   └──────────────────────────────────────────────────────┴────────┘

   RULES
   1. Every selector MUST include .anx-btn (opt-in only).
   2. Values reference --anx-* tokens — same as C1.
   3. !important guarantees override regardless of load order.
   4. background shorthand (not background-color) is used to
      reset legacy gradients from style.custom.css.
   5. This section is a TEMPORARY bridge.  Once legacy classes
      are removed from templates, C5 can be deleted entirely
      and C1 rules resume control.
   ============================================================= */


/* ----- C5.1  Base override ----- */

.btn.anx-btn:not(._) {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-weight: var(--anx-font-button-weight) !important;
    font-size: var(--anx-font-button) !important;
    line-height: var(--anx-leading-tight) !important;
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: var(--anx-radius-lg) !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    user-select: none !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition:
        background-color var(--anx-transition),
        border-color var(--anx-transition),
        color var(--anx-transition),
        box-shadow var(--anx-transition) !important;
}


/* ----- C5.2  Variant: Primary ----- */

.btn.anx-btn.anx-btn-primary:not(._) {
    background: var(--anx-color-primary) !important;
    color: #ffffff !important;
    border-color: var(--anx-color-primary) !important;
}

.btn.anx-btn.anx-btn-primary:not(._) i,
.btn.anx-btn.anx-btn-primary:not(._) .bi,
.btn.anx-btn.anx-btn-primary:not(._) svg {
    color: #ffffff !important;
}

.btn.anx-btn.anx-btn-primary:not(._):hover:not(:disabled),
.btn.anx-btn.anx-btn-primary:not(._):focus:not(:disabled) {
    background: var(--anx-color-primary-hover) !important;
    border-color: var(--anx-color-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn.anx-btn.anx-btn-primary:not(._):active:not(:disabled) {
    background: var(--anx-color-primary-active) !important;
    border-color: var(--anx-color-primary-active) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}


/* ----- C5.3  Variant: Secondary ----- */

.btn.anx-btn.anx-btn-secondary:not(._) {
    background: var(--anx-color-surface) !important;
    color: var(--anx-color-text) !important;
    border-color: var(--anx-color-border) !important;
}

.btn.anx-btn.anx-btn-secondary:not(._):hover:not(:disabled),
.btn.anx-btn.anx-btn-secondary:not(._):focus:not(:disabled) {
    background: var(--anx-color-surface-soft) !important;
    border-color: var(--anx-color-border-strong) !important;
    color: var(--anx-color-text) !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn.anx-btn.anx-btn-secondary:not(._):active:not(:disabled) {
    background: var(--anx-color-surface-soft) !important;
    border-color: var(--anx-color-border-strong) !important;
    color: var(--anx-color-text) !important;
    box-shadow: none !important;
    transform: none !important;
}


/* ----- C5.4  Variant: Ghost ----- */

.btn.anx-btn.anx-btn-ghost:not(._) {
    background: transparent !important;
    color: var(--anx-color-text-soft) !important;
    border-color: transparent !important;
}

.btn.anx-btn.anx-btn-ghost:not(._):hover:not(:disabled),
.btn.anx-btn.anx-btn-ghost:not(._):focus:not(:disabled) {
    background: var(--anx-color-surface-soft) !important;
    color: var(--anx-color-text) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn.anx-btn.anx-btn-ghost:not(._):active:not(:disabled) {
    background: var(--anx-color-surface-disabled) !important;
    color: var(--anx-color-text) !important;
    box-shadow: none !important;
    transform: none !important;
}


/* ----- C5.5  Variant: Danger ----- */

.btn.anx-btn.anx-btn-danger:not(._) {
    background: var(--anx-color-danger) !important;
    color: #ffffff !important;
    border-color: var(--anx-color-danger) !important;
}

.btn.anx-btn.anx-btn-danger:not(._):hover:not(:disabled),
.btn.anx-btn.anx-btn-danger:not(._):focus:not(:disabled) {
    background: var(--anx-color-danger-strong) !important;
    border-color: var(--anx-color-danger-strong) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn.anx-btn.anx-btn-danger:not(._):active:not(:disabled) {
    background: var(--anx-color-danger-strong) !important;
    border-color: var(--anx-color-danger-strong) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}


/* ----- C5.7  Modifier: Icon -----
   Overrides Metronic .btn.btn-icon fixed width/height (0,2,0). */

.btn.anx-btn.anx-btn-icon:not(._) {
    padding: var(--anx-space-2) !important;
    gap: 0 !important;
    width: auto !important;
    height: auto !important;
}

.btn.anx-btn.anx-btn-icon.anx-btn-sm:not(._) {
    padding: var(--anx-space-1) !important;
}

.btn.anx-btn.anx-btn-icon.anx-btn-lg:not(._) {
    padding: var(--anx-space-3) !important;
}


/* ----- C5.8  Sizes -----
   Default size is handled by C5.1 base.
   .anx-btn-sm must beat Metronic's (0,8,0) !important on padding,
   so we boost to (0,9,0) with repeated :not(._). */

.btn.anx-btn.anx-btn-sm:not(._):not(._):not(._):not(._):not(._):not(._) {
    font-size: var(--anx-font-xs) !important;
    padding: var(--anx-space-1) var(--anx-space-2) !important;
    gap: var(--anx-space-1) !important;
    border-radius: var(--anx-radius-sm) !important;
}

.btn.anx-btn.anx-btn-lg:not(._) {
    font-size: var(--anx-font-md) !important;
    padding: var(--anx-space-3) var(--anx-space-6) !important;
    gap: var(--anx-space-2) !important;
    border-radius: var(--anx-radius-lg) !important;
}


/* ----- C5.9  Disabled state ----- */

.btn.anx-btn:not(._):disabled,
.btn.anx-btn:not(._)[disabled],
.btn.anx-btn:not(._).is-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}


/* ----- C5.10  Focus-visible ring -----
   Must beat variant :hover/:focus rules at (0,6,0).
   Boosted to (0,7,0) so the ring always shows on keyboard nav. */

.btn.anx-btn:not(._):not(._):not(._):not(._):focus-visible {
    outline: none !important;
}


/* ----- C5.12  Active-light-primary (bundle uses !important) ----- */

.btn-check:checked + .btn.btn-active-light-primary,
.btn-check:active + .btn.btn-active-light-primary,
.btn.btn-active-light-primary:focus:not(.btn-active),
.btn.btn-active-light-primary:hover:not(.btn-active),
.btn.btn-active-light-primary:active:not(.btn-active),
.btn.btn-active-light-primary.active,
.btn.btn-active-light-primary.show,
.show > .btn.btn-active-light-primary {
    color: var(--anx-color-primary) !important;
    background-color: var(--anx-color-primary-soft, #e8f5e9) !important;
    border-color: transparent !important;
}

.btn-check:checked + .btn.btn-active-light-primary i,
.btn-check:checked + .btn.btn-active-light-primary .svg-icon,
.btn-check:active + .btn.btn-active-light-primary i,
.btn-check:active + .btn.btn-active-light-primary .svg-icon,
.btn.btn-active-light-primary:hover:not(.btn-active) i,
.btn.btn-active-light-primary:hover:not(.btn-active) .svg-icon {
    color: var(--anx-color-primary) !important;
}


/* =============================================================
   C6 — PRIMEVUE VISUAL AUTHORITY LAYER
   =============================================================
   PURPOSE
   Make PrimeVue-rendered components visually match the Anevex
   design system.  PrimeVue keeps ALL behaviour (events, states,
   accessibility, JS logic).  Anevex controls appearance only.

   HOW IT WORKS
   PrimeVue 4 (Lara preset) generates --p-* CSS custom properties
   on :root via runtime <style> tags, then component CSS like
       .p-inputtext { color: var(--p-inputtext-color) }
   references them.

   C6 redefines those --p-* variables so they resolve to --anx-*
   tokens.  A small set of class-level overrides handles
   properties PrimeVue hardcodes (font-size, font-family).

   SPECIFICITY STRATEGY
   PrimeVue runtime <style> tags load AFTER static CSS.
   • :root variable overrides use !important to win.
   • Class overrides use !important for the same reason.
   No :not(._) boosting needed — PrimeVue selectors are simple
   single-class (0,1,0) and do NOT use !important.

   SCOPING
   All selectors target PrimeVue class names (.p-*) which only
   exist on PrimeVue-rendered elements.  Zero side effects on
   legacy Bootstrap / Metronic / custom UI.

   MAPPING CONVENTION
   PrimeVue dt('component.property') → var(--p-component-property)
   e.g. dt('inputtext.border.color') → var(--p-inputtext-border-color)

   TEMPORARY
   Like C5, this layer exists while PrimeVue's own theme preset
   is not customised to emit Anevex tokens natively.  If the
   Lara preset is replaced by a custom Anevex preset in
   app-primevue.js, C6 can be deleted.

   SECTIONS
   C6.1   Token Bridge — Form Fields
   C6.2   Token Bridge — Buttons
   C6.3   Token Bridge — DataTable
   C6.4   Token Bridge — Overlay (Dialog, Menu, Toast)
   C6.5   Token Bridge — Minor (Checkbox, Divider, Paginator)
   C6.6   Class Overrides — Typography
   ============================================================= */


/* ----- C6.1  Token Bridge — Form Fields -----
   Affects: InputText, InputNumber (wraps InputText),
   Select, MultiSelect, DatePicker (input wrappers).
   Aligns borders, colours, focus rings, and radii
   from PrimeVue Lara defaults → Anevex tokens.          */

:root {
    /* -- InputText -- */
    --p-inputtext-background:           var(--anx-color-surface)          !important;
    --p-inputtext-border-color:         var(--anx-color-border)           !important;
    --p-inputtext-hover-border-color:   var(--anx-color-border-strong)    !important;
    --p-inputtext-focus-border-color:   var(--anx-color-primary)          !important;
    --p-inputtext-invalid-border-color: var(--anx-color-danger)           !important;
    --p-inputtext-color:                var(--anx-color-text)             !important;
    --p-inputtext-placeholder-color:    var(--anx-color-text-faint)       !important;
    --p-inputtext-disabled-background:  var(--anx-color-surface-disabled) !important;
    --p-inputtext-disabled-color:       var(--anx-color-text-muted)       !important;
    --p-inputtext-border-radius:        var(--anx-radius-md)              !important;
    --p-inputtext-padding-x:            var(--anx-space-3)                !important;
    --p-inputtext-padding-y:            var(--anx-space-2)                !important;
    --p-inputtext-shadow:               none                              !important;
    --p-inputtext-transition-duration:  var(--anx-transition)             !important;
    --p-inputtext-focus-ring-width:     0                                 !important;
    --p-inputtext-focus-ring-style:     none                              !important;
    --p-inputtext-focus-ring-color:     transparent                       !important;
    --p-inputtext-focus-ring-offset:    0                                 !important;

    /* -- Select -- */
    --p-select-background:              var(--anx-color-surface)          !important;
    --p-select-border-color:            var(--anx-color-border)           !important;
    --p-select-hover-border-color:      var(--anx-color-border-strong)    !important;
    --p-select-focus-border-color:      var(--anx-color-primary)          !important;
    --p-select-color:                   var(--anx-color-text)             !important;
    --p-select-placeholder-color:       var(--anx-color-text-faint)       !important;
    --p-select-disabled-background:     var(--anx-color-surface-disabled) !important;
    --p-select-disabled-color:          var(--anx-color-text-muted)       !important;
    --p-select-border-radius:           var(--anx-radius-md)              !important;
    --p-select-shadow:                  none                              !important;
    --p-select-transition-duration:     var(--anx-transition)             !important;
    --p-select-focus-ring-width:        0                                 !important;

    /* -- MultiSelect -- */
    --p-multiselect-background:           var(--anx-color-surface)          !important;
    --p-multiselect-border-color:         var(--anx-color-border)           !important;
    --p-multiselect-hover-border-color:   var(--anx-color-border-strong)    !important;
    --p-multiselect-focus-border-color:   var(--anx-color-primary)          !important;
    --p-multiselect-color:                var(--anx-color-text)             !important;
    --p-multiselect-placeholder-color:    var(--anx-color-text-faint)       !important;
    --p-multiselect-disabled-background:  var(--anx-color-surface-disabled) !important;
    --p-multiselect-disabled-color:       var(--anx-color-text-muted)       !important;
    --p-multiselect-border-radius:        var(--anx-radius-md)              !important;
    --p-multiselect-shadow:               none                              !important;
    --p-multiselect-transition-duration:  var(--anx-transition)             !important;
    --p-multiselect-focus-ring-width:     0                                 !important;
}


/* ----- C6.2  Token Bridge — Buttons -----
   Overrides PrimeVue button tokens for:
   • Shared base (radius, padding, gap, font-weight, focus ring)
   • Primary variant (focus ring only — colours already aligned
     via --p-primary-* → --theme-color-* in app-primevue.js)
   • Secondary variant (Anevex surface/border palette)
   • Outlined primary (neutral toolbar style)
   • Text primary (subtle action-menu style)                     */

:root {
    /* -- Shared base -- */
    --p-button-border-radius:       var(--anx-radius-lg)       !important;
    --p-button-padding-x:           var(--anx-space-4)         !important;
    --p-button-padding-y:           var(--anx-space-2)         !important;
    --p-button-gap:                 var(--anx-space-2)         !important;
    --p-button-label-font-weight:   var(--anx-font-button-weight) !important;
    --p-button-transition-duration: var(--anx-transition)      !important;
    --p-button-icon-only-width:     2.25rem                    !important;
    --p-button-focus-ring-width:    0                          !important;
    --p-button-focus-ring-style:    none                       !important;
    --p-button-focus-ring-offset:   0                          !important;

    /* -- Small button -- */
    --p-button-sm-font-size:        var(--anx-font-xs)         !important;
    --p-button-sm-padding-x:        var(--anx-space-2)         !important;
    --p-button-sm-padding-y:        var(--anx-space-1)         !important;
    --p-button-sm-icon-only-width:  1.75rem                    !important;

    /* -- Primary — focus ring only (colours via --p-primary-*) -- */
    --p-button-primary-focus-ring-color:  transparent                      !important;

    /* -- Secondary — align to Anevex surface palette -- */
    --p-button-secondary-background:          var(--anx-color-surface-soft)    !important;
    --p-button-secondary-border-color:        var(--anx-color-surface-soft)    !important;
    --p-button-secondary-color:               var(--anx-color-text-soft)       !important;
    --p-button-secondary-hover-background:    var(--anx-color-surface-disabled) !important;
    --p-button-secondary-hover-border-color:  var(--anx-color-surface-disabled) !important;
    --p-button-secondary-hover-color:         var(--anx-color-text)            !important;
    --p-button-secondary-active-background:   var(--anx-color-surface-disabled) !important;
    --p-button-secondary-active-border-color: var(--anx-color-surface-disabled) !important;
    --p-button-secondary-active-color:        var(--anx-color-text)            !important;
    --p-button-secondary-focus-ring-color:    transparent                      !important;

    /* -- Outlined primary — neutral toolbar icon style -- */
    --p-button-outlined-primary-border-color:    var(--anx-color-border)        !important;
    --p-button-outlined-primary-color:           var(--anx-color-text-soft)     !important;
    --p-button-outlined-primary-hover-background: var(--anx-color-surface-soft) !important;
    --p-button-outlined-primary-active-background: var(--anx-color-surface-disabled) !important;

    /* -- Outlined secondary — neutral utility style -- */
    --p-button-outlined-secondary-border-color:    var(--anx-color-border)        !important;
    --p-button-outlined-secondary-color:           var(--anx-color-text-soft)     !important;
    --p-button-outlined-secondary-hover-background: var(--anx-color-surface-soft) !important;
    --p-button-outlined-secondary-active-background: var(--anx-color-surface-disabled) !important;

    /* -- Text primary — subtle action-menu trigger -- */
    --p-button-text-primary-color:            var(--anx-color-text-muted)      !important;
    --p-button-text-primary-hover-background: var(--anx-color-surface-soft)    !important;
    --p-button-text-primary-active-background: var(--anx-color-surface-disabled) !important;

    /* -- Danger — align to Anevex danger palette -- */
    --p-button-danger-background:          var(--anx-color-danger)         !important;
    --p-button-danger-border-color:        var(--anx-color-danger)         !important;
    --p-button-danger-color:               #ffffff                         !important;
    --p-button-danger-hover-background:    var(--anx-color-danger-strong)  !important;
    --p-button-danger-hover-border-color:  var(--anx-color-danger-strong)  !important;
    --p-button-danger-hover-color:         #ffffff                         !important;
    --p-button-danger-active-background:   var(--anx-color-danger-strong)  !important;
    --p-button-danger-active-border-color: var(--anx-color-danger-strong)  !important;
    --p-button-danger-active-color:        #ffffff                         !important;
    --p-button-danger-focus-ring-color:    transparent                     !important;
    --p-button-danger-focus-ring-shadow:   0 0 0 3px var(--anx-color-danger-soft) !important;
}


/* ----- C6.3  Token Bridge — DataTable -----
   Aligns header, body, borders, row states, sort icons,
   and paginator separator to Anevex surface/border palette. */

:root {
    /* -- Header -- */
    --p-datatable-header-background:         var(--anx-color-surface)      !important;
    --p-datatable-header-border-color:       var(--anx-color-border)       !important;
    --p-datatable-header-color:              var(--anx-color-text)         !important;
    --p-datatable-header-cell-background:    var(--anx-color-surface-soft) !important;
    --p-datatable-header-cell-border-color:  var(--anx-color-border)       !important;
    --p-datatable-header-cell-color:         var(--anx-color-text-soft)    !important;
    --p-datatable-header-cell-font-weight:   var(--anx-weight-bold)        !important;

    /* -- Body -- */
    --p-datatable-body-cell-border-color:    var(--anx-color-border)       !important;
    --p-datatable-row-background:            var(--anx-color-surface)      !important;
    --p-datatable-row-color:                 var(--anx-color-text)         !important;
    --p-datatable-row-hover-background:      var(--anx-color-surface-soft) !important;
    --p-datatable-row-hover-color:           var(--anx-color-text)         !important;
    --p-datatable-row-striped-background:    var(--anx-color-surface-soft) !important;

    /* -- Sort icons -- */
    --p-datatable-sort-icon-color:           var(--anx-color-text-faint)   !important;
    --p-datatable-sort-icon-hover-color:     var(--anx-color-text-soft)    !important;

    /* -- Footer -- */
    --p-datatable-footer-background:         var(--anx-color-surface)      !important;
    --p-datatable-footer-border-color:       var(--anx-color-border)       !important;
    --p-datatable-footer-cell-background:    var(--anx-color-surface)      !important;
    --p-datatable-footer-cell-border-color:  var(--anx-color-border)       !important;

    /* -- Paginator border -- */
    --p-datatable-paginator-bottom-border-color: var(--anx-color-border)   !important;
    --p-datatable-paginator-top-border-color:    var(--anx-color-border)   !important;

    /* -- Transition -- */
    --p-datatable-transition-duration:       var(--anx-transition)         !important;
}

/* ----- C6.3b  PrimeVue DataTable Typography -----
   PrimeVue has no token for cell font-size.
   These overrides match jQuery DataTables via C12.  */

.p-datatable .p-datatable-thead > tr > th {
    font-size: var(--anx-font-table-header) !important;      /* 13px */
    font-weight: var(--anx-font-table-header-weight) !important; /* 700 */
    color: var(--anx-color-table-header) !important;         /* #475467 */
    padding: var(--anx-table-header-cell-padding-y) var(--anx-table-cell-padding-x) !important;
    line-height: var(--anx-table-line-height);
}

.p-datatable .p-datatable-column-title {
    font-size: var(--anx-font-base) !important;              /* 14px */
    font-weight: var(--anx-weight-semibold) !important;     /* 600 */
}

.p-datatable .p-datatable-tbody > tr > td {
    font-size: var(--anx-font-table) !important;             /* 14px */
    font-weight: var(--anx-font-table-weight) !important;    /* 400 */
    color: var(--anx-color-table-text) !important;           /* #182230 */
    padding: var(--anx-table-cell-padding-y) var(--anx-table-cell-padding-x) !important;
    line-height: var(--anx-table-line-height);
}

/* First key-column emphasis — PrimeVue */
.p-datatable .p-datatable-tbody > tr > td:first-child {
    font-weight: var(--anx-font-table-key-weight) !important; /* 500 */
}


/* ----- C6.4  Token Bridge — Overlay (Dialog, Menu, Toast) -----
   Align floating surfaces to Anevex surface/shadow tokens.      */

:root {
    /* -- Dialog -- */
    --p-dialog-background:        var(--anx-color-surface)      !important;
    --p-dialog-border-color:      var(--anx-color-border)       !important;
    --p-dialog-color:             var(--anx-color-text)         !important;
    --p-dialog-border-radius:     var(--anx-radius-xl)          !important;
    --p-dialog-shadow:            var(--anx-shadow-xl)          !important;
    --p-dialog-title-font-weight: var(--anx-font-modal-title-weight) !important;

    /* -- Menu (action menus) -- */
    --p-menu-background:          var(--anx-color-surface)      !important;
    --p-menu-border-color:        var(--anx-color-border)       !important;
    --p-menu-border-radius:       var(--anx-radius-lg)          !important;
    --p-menu-shadow:              var(--anx-shadow-lg)          !important;
    --p-menu-color:               var(--anx-color-text)         !important;
    --p-menu-separator-border-color: var(--anx-color-border)    !important;
    --p-menu-transition-duration: var(--anx-transition)         !important;

    /* -- Toast -- */
    --p-toast-border-radius:      var(--anx-radius-lg)          !important;
    --p-toast-shadow:             var(--anx-shadow-lg)          !important;
}


/* ----- C6.5  Token Bridge — Minor Components -----
   Checkbox, Divider, Paginator, SelectButton.               */

:root {
    /* -- Checkbox -- */
    --p-checkbox-background:                    var(--anx-color-surface)        !important;
    --p-checkbox-border-color:                  var(--anx-color-border)         !important;
    --p-checkbox-hover-border-color:            var(--anx-color-border-strong)  !important;
    --p-checkbox-checked-background:            var(--anx-color-primary)        !important;
    --p-checkbox-checked-border-color:          var(--anx-color-primary)        !important;
    --p-checkbox-checked-hover-background:      var(--anx-color-primary-hover)  !important;
    --p-checkbox-checked-hover-border-color:    var(--anx-color-primary-hover)  !important;
    --p-checkbox-border-radius:                 var(--anx-radius-sm)            !important;
    --p-checkbox-focus-ring-width:              0                               !important;
    --p-checkbox-transition-duration:           var(--anx-transition)           !important;

    /* -- Divider -- */
    --p-divider-border-color:     var(--anx-color-border)       !important;

    /* -- Paginator -- */
    --p-paginator-background:     var(--anx-color-surface)      !important;
    --p-paginator-color:          var(--anx-color-text-soft)    !important;
    --p-paginator-nav-button-width:  1.5rem                     !important;
    --p-paginator-nav-button-height: 1.5rem                     !important;
    --p-paginator-nav-button-border-radius: var(--anx-radius-sm) !important;

    /* -- SelectButton -- */
    --p-selectbutton-border-radius: var(--anx-radius-md)        !important;
}


/* ----- C6.6  Class Overrides — Typography -----
   PrimeVue hardcodes font-size: 1rem (16px) and
   font-family: inherit on components.
   Override to match Anevex's compact sizing.

   font-family is set on .p-component (the root marker
   PrimeVue adds to most rendered elements) so descendants
   that inherit will pick it up.

   font-size targets specific elements where PrimeVue
   sets an explicit 1rem that differs from the Anevex
   compact scale.                                             */

/* .p-component font-family removed — inherits from html, body */

.p-inputtext {
    font-size: var(--anx-font-sm) !important;
}

.p-button {
    font-size: var(--anx-font-button) !important;   /* 14px — match .btn */
}

.p-select-label,
.p-multiselect-label {
    font-size: var(--anx-font-sm) !important;
}

.p-paginator {
    font-size: var(--anx-font-base) !important;   /* 14px — readable pagination text */
}

.p-paginator .p-select-label {
    font-size: var(--anx-font-base) !important;   /* match paginator text */
}

.p-menu .p-menuitem-text {
    font-size: var(--anx-font-sm) !important;
}

.p-dialog .p-dialog-title {
    font-size: var(--anx-font-modal-title) !important;       /* 16px */
    font-weight: var(--anx-font-modal-title-weight) !important; /* 600 */
}

/* ---- Bootstrap modal title — match PrimeVue dialog ---- */
.modal-title {
    font-size: var(--anx-font-modal-title) !important;       /* 16px */
    font-weight: var(--anx-font-modal-title-weight) !important; /* 600 */
}

/* ---- Global modal header — shared across ALL modals ---- */
.modal-header {
    padding: 0.75rem 1.25rem;
    min-height: auto;
    border-bottom: 1px solid var(--anx-color-border);
    align-items: center;
}

.modal-header h2 {
    font-size: var(--anx-font-modal-title);       /* 16px */
    font-weight: var(--anx-font-modal-title-weight); /* 600 */
    color: var(--anx-color-text);
    margin: 0;
    line-height: 1.4;
}

/* Close icon — proportional to title, shared across ALL modals */
.modal-header .btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

/* ---- Modal footer — consistent button spacing ---- */
.modal-footer .btn {
    min-height: 36px;
    height: 36px;
}

.modal-header .btn-icon .svg-icon svg {
    width: 16px;
    height: 16px;
}

.modal-header .btn-icon:hover {
    background: var(--anx-color-surface-soft);
}

/* ----- C6.7  Focus-visible ring for p-button -----
   PrimeVue focus ring vars handle :focus-visible box-shadow
   via the token bridge.  This rule adds the Anevex outline
   reset so no double ring appears on keyboard focus.        */

.p-button:focus-visible {
    outline: none !important;
}

.p-inputtext:enabled:focus {
}


/* =============================================================
   C7 — POS ENTRY & HEADER ACTION VISUAL REFINEMENT
   =============================================================
   PURPOSE
   Unified visual treatment for:
   - Dashboard POS CTA card  (.anx-pos-entry-card)
   - Sidebar POS CTA button  (.anx-pos-sidebar-cta)
   - Header action buttons    (.anx-header-action)

   All values reference --anx-* tokens.  No hard-coded colours.
   ============================================================= */

/* ----- C7.1  Dashboard POS Entry Card ----- */

.anx-pos-entry-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--anx-space-4);
    padding: var(--anx-space-5) var(--anx-space-6);
    border-left: 3px solid var(--anx-color-primary);
}

.anx-pos-entry-card .anx-pos-entry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: var(--anx-radius-lg);
    background-color: rgba(var(--anx-color-primary-rgb), 0.08);
    color: var(--anx-color-primary);
    font-size: var(--anx-font-xl);
    transition: background-color var(--anx-transition);
}

.anx-pos-entry-card .anx-pos-entry-body {
    flex: 1;
    min-width: 0;
}

.anx-pos-entry-card .anx-pos-entry-title {
    font-size: var(--anx-font-lg);
    font-weight: var(--anx-weight-semibold);
    line-height: var(--anx-leading-tight);
    color: var(--anx-color-text);
    margin: 0;
}

.anx-pos-entry-card .anx-pos-entry-subtitle {
    font-size: var(--anx-font-sm);
    font-weight: var(--anx-weight-normal);
    color: var(--anx-color-text-muted);
    margin: var(--anx-space-1) 0 0;
}

/* Responsive: stack vertically on small screens */
@media (max-width: 575.98px) {
    .anx-pos-entry-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--anx-space-3);
    }

    .anx-pos-entry-card .btn {
        width: 100%;
    }
}

/* ----- C7.1b  Dashboard POS Session Card (green, prominent) ----- */

.anx-pos-session-card {
    background: linear-gradient(135deg, var(--anx-color-primary) 0%, var(--anx-color-primary-dark, #0a6b63) 100%);
    border: none;
    border-radius: var(--anx-radius-lg);
    color: #fff;
    transition: box-shadow var(--anx-transition), transform var(--anx-transition);
}

.anx-pos-session-card:hover {
    box-shadow: 0 6px 20px rgba(var(--anx-color-primary-rgb), 0.35);
    transform: translateY(-2px);
    color: #fff;
}

.anx-pos-session-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--anx-radius-md);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* ----- C7.2  Sidebar POS CTA ----- */

.anx-pos-sidebar-cta.anx-btn {
    font-size: var(--anx-font-sm) !important;
    font-weight: var(--anx-weight-semibold) !important;
    padding: var(--anx-space-2) var(--anx-space-3) !important;
    border-radius: var(--anx-radius-md) !important;
    gap: var(--anx-space-2);
    box-shadow: var(--anx-shadow-sm);
    transition:
        background-color var(--anx-transition),
        box-shadow var(--anx-transition),
        transform var(--anx-transition);
}

.anx-pos-sidebar-cta.anx-btn:hover {
    box-shadow: var(--anx-shadow-md);
    transform: translateY(-1px);
}

.anx-pos-sidebar-cta.anx-btn:active {
    box-shadow: var(--anx-shadow-sm);
    transform: translateY(0);
}

/* =============================================
   C7.2b  Unified POS Panel/Drawer Header
   Shared by: Orders, Customers, Close Session
   ============================================= */

.pos-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    min-height: 52px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
}

.pos-panel-header__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--theme-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 14px;
    font-weight: var(--anx-weight-semibold, 600);
    cursor: pointer;
    transition: background .15s ease;
}
.pos-panel-header__back:hover {
    background: var(--theme-color-darker, #047857);
    color: #fff;
}
.pos-panel-header__back:active { filter: brightness(0.92); }
.pos-panel-header__back svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pos-panel-header__title {
    font-size: 17px;
    font-weight: var(--anx-weight-bold, 700);
    color: var(--theme-color);
    margin: 0;
}

.pos-panel-header__close {
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e293b;
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
    transition: background .15s ease;
}
.pos-panel-header__close:hover { background: #f1f5f9; }
.pos-panel-header__close:active { background: #e2e8f0; }
.pos-panel-header__close svg {
    width: 20px;
    height: 20px;
}

/* ----- C7.3  Header Action Buttons ----- */

.anx-header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--anx-radius-md);
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--anx-color-text-muted);
    cursor: pointer;
    transition:
        background-color var(--anx-transition),
        border-color var(--anx-transition),
        color var(--anx-transition),
        box-shadow var(--anx-transition);
}

.anx-header-action:hover {
    background-color: var(--anx-color-surface-soft);
    border-color: var(--anx-color-border);
    color: var(--anx-color-text);
}

.anx-header-action:active {
    background-color: var(--anx-color-surface-disabled);
    border-color: var(--anx-color-border-strong);
}

.anx-header-action:focus-visible {
    outline: none;
}

/* Desktop size bump */
@media (min-width: 768px) {
    .anx-header-action {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Icon sizing inside header actions */
.anx-header-action .svg-icon,
.anx-header-action .ki-duotone,
.anx-header-action i {
    font-size: 1.125rem;
    line-height: 1;
}

/* Consistent spacing for header action group */
.anx-header-actions-group {
    display: flex;
    align-items: center;
    gap: var(--anx-space-1);
}

@media (min-width: 768px) {
    .anx-header-actions-group {
        gap: var(--anx-space-2);
    }
}

/* Zero per-wrapper margins — gap handles spacing */
#kt_header .anx-header-actions-group > .d-flex.ms-1.ms-lg-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Tighter header container padding */
#kt_header > .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
}


/* =============================================================
   C8 — ICON UTILITIES (Lucide inline SVG sizing)
   ============================================================= */

.anx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.anx-icon-sm { width: 16px; height: 16px; }
.anx-icon-md { width: 20px; height: 20px; }


/* =============================================================
   C9 — SETTINGS LAYOUT SYSTEM
   =============================================================
   Scoped height strategy for Settings pages only.
   Prevents page-level bottom scroll on laptop screens by
   constraining the sidebar + content row to the remaining
   viewport height below the header/toolbar area.

   Height offset: 65px header + 55px toolbar + 80px #singl_page
   margin-top (mt-20) = 200px total above the row.

   Activation:  automatic via :has(.setting-card) structural
   selector — targets only the row wrapping a settings sidebar.

   Does NOT affect: CRUD index pages, dashboard, POS, or any
   page that does not contain .setting-card.
   ============================================================= */

/* Flex chain height propagation — settings pages only.
   Metronic's .flex-column-fluid sets flex: 1 0 auto (flex-shrink: 0),
   which prevents the viewport height from propagating to the inner
   settings row.  Override flex-shrink and min-height on the ancestor
   chain so the .row inherits a definite height and .col-md-10 can
   scroll internally. */
@media (min-width: 768px) {
    body:has(.setting-card) .d-flex.flex-root {
        overflow: hidden;
    }

    body:has(.setting-card) .flex-column-fluid {
        min-height: 0 !important;
        overflow: hidden;
        flex-shrink: 1 !important;
    }

    body:has(.setting-card) #singl_page {
        min-height: 0 !important;
        overflow: hidden;
        flex-shrink: 1 !important;
    }

    body:has(.setting-card) #kt_content_container {
        height: 100%;
        overflow: hidden;
    }
}

/* Auto-activation for existing Settings pages via structural match */
@media (min-width: 768px) {
    #kt_content_container > .row:has(.setting-card) {
        min-height: 0;
        overflow: hidden;
        height: 100%;
    }

    #kt_content_container > .row:has(.setting-card) > .col-md-2 {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
    }

    #kt_content_container > .row:has(.setting-card) > .col-md-10 {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
    }
}

/* Neutralize the outer card-dark wrapper on the settings content column.
   Removes the shadow and border but preserves the background surface. */
@media (min-width: 768px) {
    .col-md-10 > .card.card-dark {
        box-shadow: none !important;
        border: none !important;
    }

    /* Remove the inner card-dark containers inside tab panes
       that create an unwanted boxed layout within settings content. */
    .col-md-10 > .card.card-dark .tab-pane > .card.card-dark {
        box-shadow: none !important;
        border: none !important;
        background-color: transparent !important;
    }
}


/* =============================================================
   C10 — ALERT / NOTICE SYSTEM
   =============================================================
   Reusable Anevex-styled alert pattern for warning, info,
   success, and danger notices. Token-based values only.

   Usage:
     <div class="anx-alert anx-alert-warning"> … </div>
     <div class="anx-alert anx-alert-info"> … </div>
     <div class="anx-alert anx-alert-success"> … </div>
     <div class="anx-alert anx-alert-danger"> … </div>
   ============================================================= */

.anx-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--anx-space-3);
    padding: var(--anx-space-3) var(--anx-space-4);
    border-radius: var(--anx-radius-lg);
    border: 1px solid;
    font-size: var(--anx-font-sm);
    line-height: 1.5;
    position: relative;
}

.anx-alert-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.anx-alert-content {
    flex: 1;
    min-width: 0;
}

.anx-alert-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--anx-space-1);
    border-radius: var(--anx-radius-sm);
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.anx-alert-close:hover {
    opacity: 1;
}

/* Warning variant */
.anx-alert-warning {
    background-color: var(--anx-color-warning-soft);
    border-color: var(--anx-color-warning-border);
    color: var(--anx-color-warning-strong);
}

.anx-alert-warning .anx-alert-close {
    color: var(--anx-color-warning-strong);
}



/* =============================================================
   C11 — CHOICE CARD SYSTEM
   =============================================================
   Unified dashed selectable-card pattern used for radio-like
   choices: cycle type, invoice policy, product form, approval
   status, layout selection, etc.

   Usage:
     <label class="anx-choice-card [active]">
       <span class="anx-choice-card__indicator">
         <input type="radio" …>
       </span>
       <span>
         <span class="anx-choice-card__title">…</span>
         <span class="anx-choice-card__description">…</span>
       </span>
     </label>
   ============================================================= */

/* ---- Base card ---- */
.anx-choice-card {
    display: flex;
    align-items: flex-start;
    text-align: start;
    padding: var(--anx-space-6);
    border: 1px dashed var(--anx-color-border);
    border-radius: var(--anx-radius-lg);
    background-color: var(--anx-color-surface);
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* ---- Active state ---- */
.anx-choice-card.active {
    border-color: var(--anx-color-primary);
    background-color: var(--anx-color-primary-light);
}

/* ---- Indicator (radio circle wrapper) ---- */
.anx-choice-card__indicator {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    margin-top: var(--anx-space-1);
}

/* ---- Title ---- */
.anx-choice-card__title {
    display: block;
    font-size: var(--anx-font-lg);
    font-weight: var(--anx-weight-bold);
    color: var(--anx-color-text);
    margin-bottom: var(--anx-space-1);
    line-height: var(--anx-leading-tight);
}

/* ---- Description ---- */
.anx-choice-card__description {
    font-size: var(--anx-font-sm);
    font-weight: var(--anx-weight-medium);
    color: var(--anx-color-text-soft);
    line-height: var(--anx-leading-normal);
}


/* ==============================================================
   C12 — UI Standardization
   Typography · Buttons · Icons · Pagination · Table Headers
   ============================================================== */

/* ---- C12.1  Labels ---- */
/* .form-label/.col-form-label font-size/weight/color/line-height shadowed by Shared Form Control Polish with !important */
label {
    font-size: var(--anx-font-label);            /* 14px */
    font-weight: var(--anx-font-label-weight);   /* 500 */
    color: var(--anx-color-text-soft);           /* #475467 */
    line-height: var(--anx-leading-normal);      /* 1.5 */
    letter-spacing: 0.01em;
}
.form-label,
.col-form-label {
    letter-spacing: 0.01em;
}

/* ---- C12.2  Values / body text ---- */
/* .form-control, .form-select removed — shadowed by Shared Form Control Polish + Form Visual Tuning Pass */
.card-body,
.form-control-plaintext {
    font-size: var(--anx-font-base);              /* 14px */
    font-weight: var(--anx-weight-medium);        /* 500 */
    color: var(--anx-color-text);                 /* #182230 */
}

/* ---- C12.2b  Table body cells ---- */
.table td {
    font-size: var(--anx-font-table);             /* 14px */
    font-weight: var(--anx-font-table-weight);    /* 400 */
    line-height: var(--anx-table-line-height);    /* 1.5 */
}

/* ---- C12.2c  First key-column emphasis ---- */
.table td:first-child {
    font-weight: var(--anx-font-table-key-weight); /* 500 */
}

/* ---- C12.3  Page titles ---- */
.anx-page-title, /* C16 contract — primary */
h1, h2,
.card-title,
[data-kt-page-title] {
    font-size: var(--anx-font-page-title);        /* 18px */
    font-weight: var(--anx-font-page-title-weight);
}

/* ---- C12.4  Buttons (global) ---- */
.btn {
    font-size: var(--anx-font-button);            /* 13px */
    height: 36px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Override legacy .custom-size padding */
.btn.custom-size {
    font-size: var(--anx-font-button) !important;
    height: 36px !important;
    padding: 0 16px !important;
    border-radius: var(--anx-radius-lg) !important;
    display: inline-flex;
    align-items: center !important;
    gap: 6px;
}

/* ---- C12.4a  Selected-toolbar ----
   When rows are selected the "base" toolbar (flex-grow:1) hides and the
   "selected" toolbar shows. Give it the same flex-grow so it fills the
   toolbar row identically, and use gap for button spacing. */
[data-kt-docs-table-toolbar="selected"] {
    flex-grow: 1;
    gap: 8px;
}

/* ---- C12.4b  Neutralize .me-2 on icons inside buttons ----
   Templates add .me-2 on <i> elements inside buttons (e.g. <i class="bi fs-4 me-2">).
   Button gap (6px from C12.4 / C5.1) handles icon-to-label spacing.
   This removes the extra margin ONLY on icons inside .btn elements. */
.btn .me-2,
.btn.me-2 {
    margin-right: 0 !important;
}

/* ---- C12.4c  Neutralize oversized icon classes inside buttons ----
   Templates add .fs-4 (font-size:1.5rem !important) on icons inside buttons.
   This scopes icon sizing to match the button system (16px). */
.btn .fs-4,
.btn .fs-3,
.btn .fs-5 {
    font-size: inherit !important;
}

/* ---- C12.5  Icons (16×16 baseline) ---- */
.btn svg,
.btn i,
.toolbar svg,
.toolbar i,
.card-header svg,
.card-header i,
.table svg,
.table i {
    width: 16px;
    height: 16px;
    font-size: 16px;
    flex-shrink: 0;
}

/* ---- C12.6  Pagination ---- */
.page-link {
    font-size: var(--anx-font-base);              /* 14px */
    font-weight: var(--anx-weight-medium);        /* 500 */
    padding: 6px 10px;
    border-radius: var(--anx-radius-md);          /* 6px */
}

.page-item.active .page-link {
    border-radius: var(--anx-radius-md) !important; /* 6px — override legacy 2px */
}

/* ---- C12.6a  Pagination alignment (language-aware) ---- */
/* English → left,  Arabic → right */
html[lang="en"] .dataTables_paginate,
html[lang="en"] .p-paginator {
    justify-content: flex-start;
}

html[lang="ar"] .dataTables_paginate,
html[dir="rtl"] .dataTables_paginate,
html[lang="ar"] .p-paginator,
html[dir="rtl"] .p-paginator {
    justify-content: flex-end;
}

/* ---- C12.7  Table headers ---- */
.table th {
    font-size: var(--anx-font-table-header);      /* 13px */
    font-weight: var(--anx-font-table-header-weight); /* 700 */
    color: var(--anx-color-table-header);         /* #475467 */
    line-height: var(--anx-table-line-height);    /* 1.5 */
}

/* ---- C12.7a  Table hover / active state ownership ---- */
.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: var(--anx-color-surface-soft, #f5f7fa);
    --bs-table-hover-color: var(--anx-color-text, #1d2939);
}

.table-active {
    --bs-table-active-bg: var(--anx-color-primary-soft, #e8f5e9);
    --bs-table-active-color: var(--anx-color-text, #1d2939);
}

/* ---- C12.7b  Disabled pagination ownership ---- */
.page-item.disabled .page-link {
    color: var(--anx-color-text-muted, #98a2b3);
    background-color: transparent;
    border-color: transparent;
}


/* ==============================================================
   C13 — Dual-Language Font System
   Almarai (Arabic) · System UI (English)
   ============================================================== */

/* ---- C13.1  Language-aware font stacks ---- */
html[lang="ar"],
html[dir="rtl"] {
    --anx-font-family: "Almarai", sans-serif;
}

html[lang="en"] {
    --anx-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Noto Sans", Arial, "Odoo Unicode Support Noto", sans-serif;
}

/* ---- C13.2  Global font source (SINGLE SOURCE OF TRUTH) ---- */
html,
body {
    font-family: var(--anx-font-family);
}

/* Ensure form elements inherit (browsers reset these) */
input,
button,
select,
textarea {
    font-family: inherit;
}

/* ---- C13.3  Rendering quality ---- */
html {
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---- C13.4  Arabic perceived-size balance ---- */
html[lang="ar"],
html[dir="rtl"] {
    font-size: 15px;   /* Arabic (Almarai) needs +1px to optically match English at 14px */
    line-height: 1.6;
}


/* ==============================================================
   C15 — Notification Card System
   Card-based expandable layout for Notifications Settings.
   ============================================================== */

/* ---- C15.1  Card container ---- */
.anx-notification-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- C15.2  Card ---- */
.anx-notification-card {
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.anx-notification-card:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ---- C15.3  Header ---- */
.anx-notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
}

.anx-card-title, /* C16 contract — primary */
.anx-notification-title {
    font-size: var(--anx-font-card-title);         /* 16px */
    font-weight: var(--anx-font-card-title-weight);
    color: var(--anx-color-text);
}

.anx-notification-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.anx-notification-card .anx-notification-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 12px;
}

.anx-chevron {
    color: #9ca3af;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.anx-notification-card.open .anx-chevron {
    transform: rotate(180deg);
}

/* ---- C15.4  Body (collapsible) ---- */
.anx-notification-body {
    padding: 0 20px 20px;
    border-top: 1px solid #f3f4f6;
    display: none;
}

.anx-notification-card.open .anx-notification-body {
    display: block;
    padding-top: 16px;
}

/* ---- C15.5  Sections ---- */
.anx-section {
    margin-bottom: 16px;
}

.anx-section:last-child {
    margin-bottom: 0;
}

.anx-section-title, /* C16 contract — primary */
.anx-notification-card .anx-section-title {
    font-size: var(--anx-font-section);            /* 15px */
    font-weight: var(--anx-font-section-weight);
    letter-spacing: 0;
    color: var(--anx-color-text);
    text-transform: none;
}

.anx-notification-card .anx-section-title {
    margin-bottom: 8px;
}

/* ---- C15.6  Chip group (channels, permissions) ---- */
.anx-chip-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.anx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px !important;
    border: 1px solid #e5e7eb;
    border-radius: 5px !important;
    font-size: var(--anx-font-chip) !important;
    font-weight: var(--anx-font-chip-weight) !important;
    line-height: 1.2 !important;
    color: var(--anx-color-text-soft);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    background: #fff;
}

.anx-chip:hover {
    border-color: var(--anx-color-primary);
    color: var(--anx-color-primary);
}

.anx-chip:has(.anx-chip-input:checked) {
    background: var(--anx-color-primary-light);
    border-color: var(--anx-color-primary);
    color: var(--anx-color-primary);
}

.anx-chip-input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--anx-color-primary);
    cursor: pointer;
}

.anx-chip-label {
    cursor: pointer;
    line-height: 1;
}

/* ─── Anevex Status Badge Modifiers (color-semantic) ───
   Single source of truth for status pill colors.
   Use these modifiers on .anx-chip for ALL modules:
     --success  (green)  : Completed, Active, Posted, Approved, Paid, Yes
     --warning  (amber)  : Draft, Pending, Partially Paid
     --danger   (red)    : Canceled, Rejected, Not Paid, Inactive, Locked, No
     --primary  (blue)   : In Progress, Waiting, Closed, Approved
     --info     (cyan)   : In Transit, Information
     --neutral  (gray)   : Unknown, Unlocked, Secondary, Default
   ─────────────────────────────────────────────────── */
.anx-chip[class*="anx-chip--"] {
    cursor: default;
    transition: none;
}

.anx-chip[class*="anx-chip--"]:hover {
    border-color: inherit;
    color: inherit;
}

.anx-chip.anx-chip--success {
    background: var(--anx-color-success-soft) !important;
    border-color: var(--anx-color-success-border) !important;
    color: var(--anx-color-success-strong) !important;
}

.anx-chip.anx-chip--warning {
    background: var(--anx-color-warning-soft) !important;
    border-color: var(--anx-color-warning-border) !important;
    color: var(--anx-color-warning-strong) !important;
}

.anx-chip.anx-chip--danger {
    background: var(--anx-color-danger-soft) !important;
    border-color: var(--anx-color-danger-border) !important;
    color: var(--anx-color-danger-strong) !important;
}

.anx-chip.anx-chip--primary {
    background: #ebf5ff !important;
    border-color: #c8def8 !important;
    color: #0d5ea8 !important;
}

.anx-chip.anx-chip--neutral {
    background: #f4f6f8 !important;
    border-color: #dde3ea !important;
    color: #566273 !important;
}

/* ---- C15.7  Option rows ---- */
.anx-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: var(--anx-font-base);               /* 14px */
    color: var(--anx-color-text);
}

.anx-row + .anx-row {
    border-top: 1px solid #f9fafb;
}

/* ---- C15.8  Field groups (recipients) ---- */
.anx-field {
    margin-bottom: 12px;
}

.anx-field:last-child {
    margin-bottom: 0;
}

.anx-field > label {
    font-size: var(--anx-font-label);              /* 14px */
    margin-bottom: 6px;
    display: block;
}

/* ---- C15.9  Tooltip icon ---- */
.anx-info-tooltip {
    display: inline-flex;
    cursor: help;
}

/* ---- C15.10  Body text size ---- */
.anx-notification-card .anx-notification-body {
    font-size: var(--anx-font-base);               /* 14px */
    max-width: 520px;
}

.anx-notification-card .anx-notification-body > div {
    margin-bottom: 10px;
}

.anx-notification-card .anx-notification-body > div:last-child {
    margin-bottom: 0;
}

.anx-notification-card .anx-notification-body label,
.anx-notification-card .anx-notification-body .form-label {
    font-size: var(--anx-font-label);              /* 14px */
    font-weight: var(--anx-font-label-weight);     /* 500 */
    color: var(--anx-color-text);
}

/* ---- C15.11  Module badge color variations ---- */
.anx-notification-card .badge-cat-accounting  { background: #e8f0fe; color: #1a56db; }
.anx-notification-card .badge-cat-sales       { background: #e6f4ea; color: #137333; }
.anx-notification-card .badge-cat-purchases    { background: #fef3e2; color: #b45309; }
.anx-notification-card .badge-cat-ecommerce    { background: #f3e8ff; color: #7c3aed; }
.anx-notification-card .badge-cat-inventory    { background: #e0f2fe; color: #0369a1; }
.anx-notification-card .badge-cat-hr           { background: #fce7f3; color: #be185d; }

/* ---- C15.12  Switch checked visibility ---- */
.anx-notification-card .form-check-input:checked {
    background-color: var(--anx-color-primary);
    border-color: var(--anx-color-primary);
}

.anx-notification-card .form-check-input {
    cursor: pointer;
}


/* ==============================================================
   C16 — UI Contract Classes (Anevex-owned)
   ============================================================== */

/* ---- C16.1  Search input contract ---- */
.anx-search-input {
    font-size: var(--anx-font-base) !important;
    min-height: 40px;
    max-height: 40px;
}
.anx-search-input::placeholder {
    font-size: var(--anx-font-base) !important;
}

/* ---- C16.1a  Search variant — header (Metronic) ---- */
.anx-search--header {
    background-color: #ffffff !important;
    border: 1px solid #dde6ef !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
}
.anx-search--header::placeholder {
    color: #98a2b3;
}

/* ---- C16.1b  Search variant — datatable (PrimeVue) ---- */
input.p-inputtext.p-component.global-search-input {
    background-color: #ffffff !important;
    border: 1px solid #dde6ef !important;
    border-radius: 5px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
}
input.p-inputtext.p-component.global-search-input::placeholder {
    color: #98a2b3;
}

/* ---- C16.1c  Search panel — grouped results dropdown ---- */
.anx-search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1055;
    display: none;
    min-width: 100%;
    max-width: 480px;
    max-height: 420px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #dde6ef;
    border-radius: 5px;
    box-shadow: 0 4px 16px rgba(16, 24, 40, 0.12);
    padding: 0;
    margin-top: 4px;
}
.anx-search-panel.is-open {
    display: block;
}
.anx-search-panel__section {
    padding: 0;
}
.anx-search-panel__section + .anx-search-panel__section {
    border-top: 1px solid #f0f2f5;
}
.anx-search-panel__section-title {
    display: flex;
    align-items: center;
    padding: 10px 16px 4px;
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
    color: #667085;
}
.anx-search-panel__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    color: var(--anx-color-text, #1d2939);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.anx-search-panel__item:hover,
.anx-search-panel__item.is-active {
    background-color: #f5f7fa;
    color: var(--anx-color-text, #1d2939);
    text-decoration: none;
}
.anx-search-panel__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    background: #f5f7fa;
    flex-shrink: 0;
    color: #667085;
}
.anx-search-panel__item-icon img {
    width: 18px;
    height: 18px;
}
.anx-search-panel__item-icon .anx-search-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.anx-search-panel__item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.anx-search-panel__item-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #1d2939;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.anx-search-panel__item-sub {
    font-size: 11px;
    color: #98a2b3;
    font-weight: 400;
    line-height: 1.3;
}
.anx-search-panel__empty {
    padding: 32px 16px;
    text-align: center;
    color: #98a2b3;
    font-size: 13px;
}
.anx-search-panel__empty svg {
    opacity: 0.4;
    margin-bottom: 8px;
}
.anx-search-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 6px;
}
.anx-search-panel__header-title {
    font-size: 12px;
    font-weight: 600;
    color: #667085;
}
.anx-search-panel__header-action {
    font-size: 12px;
    font-weight: 500;
    color: var(--anx-color-primary, #3b82f6);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.anx-search-panel__header-action:hover {
    text-decoration: underline;
}
.anx-search-panel__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-top: 1px solid #f0f2f5;
}
.anx-search-panel__prefs-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #98a2b3;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
}
.anx-search-panel__prefs-btn:hover {
    color: #667085;
}
.anx-search-panel__prefs-btn svg {
    width: 14px;
    height: 14px;
}
.anx-search-panel__spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

/* ---- C16.2  Primary action contract ---- */
.anx-primary-action {
    font-size: var(--anx-font-button);
    font-weight: var(--anx-font-button-weight);
    line-height: 1.2;
}

/* ---- C16.3  Icon action contract ---- */
.anx-icon-action {
    font-size: var(--anx-font-button);
    font-weight: var(--anx-font-button-weight);
    line-height: 1.2;
}

/* ---- C16.4  Detail action button contract ---- */
.anx-detail-action-btn {
    font-size: var(--anx-font-button);
    font-weight: var(--anx-font-button-weight);
    line-height: 1.2;
    box-shadow: none !important;
}

/* ---- C16.4a  Detail action — danger variant ---- */
.anx-detail-action-btn.btn-danger {
    background: #fff !important;
    color: var(--anx-color-danger) !important;
    border-color: var(--anx-color-danger-border) !important;
}

.anx-detail-action-btn.btn-danger i,
.anx-detail-action-btn.btn-danger .bi,
.anx-detail-action-btn.btn-danger svg {
    color: var(--anx-color-danger) !important;
}

.anx-detail-action-btn.btn-danger:hover:not(:disabled),
.anx-detail-action-btn.btn-danger:focus:not(:disabled) {
    background: var(--anx-color-danger) !important;
    color: #fff !important;
    border-color: var(--anx-color-danger) !important;
    box-shadow: none !important;
}

.anx-detail-action-btn.btn-danger:hover:not(:disabled) i,
.anx-detail-action-btn.btn-danger:hover:not(:disabled) .bi,
.anx-detail-action-btn.btn-danger:hover:not(:disabled) svg,
.anx-detail-action-btn.btn-danger:focus:not(:disabled) i,
.anx-detail-action-btn.btn-danger:focus:not(:disabled) .bi,
.anx-detail-action-btn.btn-danger:focus:not(:disabled) svg {
    color: #fff !important;
}

.anx-detail-action-btn.btn-danger:active:not(:disabled) {
    background: var(--anx-color-danger-strong) !important;
    color: #fff !important;
    border-color: var(--anx-color-danger-strong) !important;
}

/* ---- C16.8  Page title contract ---- */
.anx-page-title {
    font-size: var(--anx-font-page-title);
    font-weight: var(--anx-font-page-title-weight);
    color: var(--anx-color-text);
}

/* ==============================================================
   ORIGINAL style.custom.css CONTENT BELOW
   ============================================================== */

        /* Smart Responsive Menu System - Auto-scales based on viewport */
        :root {
            /* Default: Desktop/Large screens */
            --menu-padding: calc(0.18vh + 0.08rem);
            --menu-icon-size: calc(1.7vh + 1.1rem);
            --menu-svg-size: calc(1.8vh + 14px);
            --logo-height: calc(6vh + 5px);
            --logo-padding-y: calc(0.9vh + 1rem);
        }

        /* Ultra wide 2560px+ - Reduce all sizes */
        @media (min-width: 2560px) {
            :root {
                --menu-padding: calc(0.14vh + 0.07rem);
                --menu-icon-size: calc(1.4vh + 1rem);
                --menu-svg-size: calc(1.5vh + 13px);
                --logo-height: calc(5.5vh + 5px);
                --logo-padding-y: calc(0.75vh + 0.95rem);
            }
        }

        /* Large 1920-2559px */
        @media (min-width: 1920px) and (max-width: 2559px) {
            :root {
                --menu-padding: calc(0.16vh + 0.075rem);
                --menu-icon-size: calc(1.55vh + 1.05rem);
                --menu-svg-size: calc(1.65vh + 13px);
                --logo-height: calc(5.8vh + 5px);
                --logo-padding-y: calc(0.85vh + 0.98rem);
            }
        }

        /* Laptop 1280-1919px - Critical optimization */
        @media (min-width: 1280px) and (max-width: 1919px) {
            :root {
                --menu-padding: calc(0.15vh + 0.03rem);
                --menu-icon-size: calc(1.75vh + 0.8rem);
                --menu-svg-size: calc(1.85vh + 10px);
                --logo-height: calc(5.5vh + 18px);
                --logo-padding-y: calc(0.8vh + 0.5rem);
            }
        }

        /* Tablet 1024-1279px */
        @media (min-width: 1024px) and (max-width: 1279px) {
            :root {
                --menu-padding: calc(0.28vh + 0.09rem);
                --menu-icon-size: calc(2.2vh + 1.15rem);
                --menu-svg-size: calc(2.3vh + 15px);
                --logo-height: calc(5.2vh + 10px);
                --logo-padding-y: calc(0.65vh + 0.65rem);
            }
        }

        /* Tablet portrait 768-1023px */
        @media (min-width: 768px) and (max-width: 1023px) {
            :root {
                --menu-padding: calc(0.35vh + 0.11rem);
                --menu-icon-size: calc(2.5vh + 1.25rem);
                --menu-svg-size: calc(2.6vh + 17px);
                --logo-height: calc(5.5vh + 8px);
                --logo-padding-y: calc(0.6vh + 0.6rem);
            }
        }

        /* Mobile landscape 640-767px */
        @media (min-width: 640px) and (max-width: 767px) {
            :root {
                --menu-padding: calc(0.42vh + 0.13rem);
                --menu-icon-size: calc(2.7vh + 1.3rem);
                --menu-svg-size: calc(2.8vh + 18px);
                --logo-height: calc(5.8vh + 6px);
                --logo-padding-y: calc(0.55vh + 0.55rem);
            }
        }

        /* Mobile portrait <640px */
        @media (max-width: 639px) {
            :root {
                --menu-padding: calc(0.48vh + 0.14rem);
                --menu-icon-size: calc(2.9vh + 1.35rem);
                --menu-svg-size: calc(3vh + 19px);
                --logo-height: calc(6vh + 4px);
                --logo-padding-y: calc(0.5vh + 0.5rem);
            }
        }

        /* =========================================
           ANEVEX TYPOGRAPHY NORMALIZATION
           Uses --anx-* tokens from the merged
           token block at the top of this file.
        ========================================= */

        /* --- Base typography --- */

        body {
            font-size: var(--anx-font-md);
            font-weight: 400;
            line-height: 1.45;
            overflow: overlay;
            background-color: #ffffff;
        }

        /* --- Normalize UI text to 14px / normal weight --- */
        /* .form-control, .form-select removed — Form Visual Tuning Pass corrective override wins */

        textarea,
        .menu-link,
        .menu-title,
        .modal-body,
        .modal-footer,
        .dropdown-item,
        .select2-results__option,
        .badge {
            font-size: var(--anx-font-md);
        }

        .form-control,
        .form-select,
        textarea,
        .menu-link,
        .menu-title,
        .modal-body,
        .dropdown-item {
            font-weight: 400;
        }

        /* .table td/th removed — C12.2b + C12.7 own table typography */

        /* --- Headings & titles — bold only --- */
        /* .modal-title removed — C6.6 owns modal title at 600 */

        .section-title,
        .accordion-header,
        .menu-section {
            font-weight: 700;
        }

        .aside-logo {
            padding-top: var(--logo-padding-y) !important;
            padding-bottom: var(--logo-padding-y) !important;
            transition: all 0.3s ease;
            min-height: 60px;
            border-bottom: 1px solid #edf2f7;
        }

        .anx-sidebar-version {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            max-width: 56px;
            padding: 10px 4px 12px;
            color: #8a94a6;
            font-size: 9px;
            line-height: 1.1;
            text-align: center;
            letter-spacing: 0.02em;
            user-select: none;
        }

        .anx-sidebar-version__name,
        .anx-sidebar-version__version {
            display: block;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .anx-sidebar-version__name {
            font-weight: 700;
        }

        .anx-sidebar-version__version {
            opacity: 0.75;
            font-size: 8px;
            white-space: nowrap;
        }

        .aside-nav {
            margin-top: 8px;
        }

        /* Enhanced Menu UX Improvements - Main menu only */
        
        /* Main menu items — static, no transitions */
        .aside-menu > .aside-nav > #kt_aside_menu > .menu-item > .menu-link {
            position: relative;
        }

        /* Active state — no green accent bar */
        #kt_aside_menu > .menu-item.here > .menu-link::before {
            display: none;
        }

        /* Opened menu — no side indicator */
        #kt_aside_menu > .menu-item.show:not(.here) > .menu-link::before {
            display: none;
        }

        /* Active page background highlight */
        #kt_aside_menu > .menu-item.here > .menu-link {
            background-color: #f5f7fa;
            border-radius: 5px;
            margin: 0 4px;
            padding-left: 4px;
            padding-right: 4px;
        }

        /* Opened menu subtle highlight */
        #kt_aside_menu > .menu-item.show:not(.here) > .menu-link {
            background-color: #f9fafb;
        }

        /* Hover state with subtle background - Main menu only (exclude active items) */
        .aside-menu > .aside-nav > #kt_aside_menu > .menu-item:not(.here) > .menu-link:hover {
            background-color: #f5f7fa;
            border-radius: 5px;
            margin: 0 4px;
            padding-left: 4px;
            padding-right: 4px;
        }

        /* Neutralize hover on active item — keep active state stable */
        .aside-menu > .aside-nav > #kt_aside_menu > .menu-item.here > .menu-link:hover {
            background-color: #f5f7fa;
            border-radius: 5px;
            margin: 0 4px;
            padding-left: 4px;
            padding-right: 4px;
        }

        /* Logo hover effect */
        .aside-logo:hover {
            transform: scale(1.02);
        }

        /* Scrollbar styling for aside menu */
        .aside-menu::-webkit-scrollbar {
            width: 6px;
        }

        .aside-menu::-webkit-scrollbar-track {
            background: #f5f7fa;
            border-radius: 5px;
        }

        .aside-menu::-webkit-scrollbar-thumb {
            background: #d0d5dd;
            border-radius: 5px;
            transition: background 0.3s ease;
        }

        .aside-menu::-webkit-scrollbar-thumb:hover {
            background: #98a2b3;
        }

        /* Focus states for accessibility - Main menu only */
        .aside-menu > .aside-nav > #kt_aside_menu > .menu-item > .menu-link:focus {
            outline: 2px solid rgba(15, 118, 110, 0.2);
            outline-offset: 2px;
            border-radius: 5px;
        }

        /* Sidebar icon color standardization */
        .aside .menu-icon svg,
        .aside .menu-icon i {
            color: #666666 !important;
        }
        .aside .menu-icon svg {
            stroke: #666666;
        }
        #kt_aside_menu > .menu-item.here > .menu-link .menu-icon svg,
        #kt_aside_menu > .menu-item.here > .menu-link:hover .menu-icon svg,
        #kt_aside_menu > .menu-item.here > .menu-link .menu-icon i,
        #kt_aside_menu > .menu-item.here > .menu-link:hover .menu-icon i {
            color: var(--theme-color) !important;
        }
        #kt_aside_menu > .menu-item.here > .menu-link .menu-icon svg,
        #kt_aside_menu > .menu-item.here > .menu-link:hover .menu-icon svg {
            stroke: var(--theme-color);
        }

        /* ================================ */
        /* Enhanced Submenu UX Improvements */
        /* ================================ */

        /* Submenu container — static, no animation */
        .menu-sub {
            padding: 0.5rem 0 !important;
        }

        /* Submenu items — static, no transitions */
        .menu-sub .menu-item .menu-link {
            position: relative;
            margin: 0.15rem 0.5rem;
            border-radius: 5px;
            padding: 0.65rem 1rem;
            display: flex;
            align-items: center;
            white-space: nowrap;
        }

        /* Submenu hover — simple background only, no accent, no motion */
        .menu-sub .menu-item:not(.here) .menu-link:hover {
            background-color: #f5f7fa;
        }

        /* Kill any ::before accent on hover */
        .menu-sub .menu-item .menu-link:hover::before {
            display: none !important;
        }

        /* Submenu active indicator — disabled (no green left bar) */
        .menu-sub .menu-item.here > .menu-link::before {
            display: none;
        }

        /* Submenu active background — flat, static */
        .menu-sub .menu-item.here > .menu-link,
        .menu-sub .menu-item.here > .menu-link:hover {
            background-color: #eef1f6 !important;
            transform: none !important;
        }

        /* Submenu text styling — no transition */
        .menu-sub .menu-item .menu-link .menu-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        /* Submenu hover text effect (exclude active items) */
        .menu-sub .menu-item:not(.here) .menu-link:hover .menu-title {
            color: #1d2939;
        }

        /* Submenu active text */
        .menu-sub .menu-item.here > .menu-link .menu-title {
            color: #1d2939;
        }

        /* Submenu bullet — no transition, no scale */
        .menu-sub .menu-item .menu-link .menu-bullet {
            transition: none;
        }

        /* Submenu active bullet */
        .menu-sub .menu-item.here > .menu-link .menu-bullet .bullet {
            background-color: var(--theme-color);
            box-shadow: 0 0 6px rgba(15, 118, 110, 0.25);
        }

        /* Submenu focus state for accessibility */
        .menu-sub .menu-item .menu-link:focus {
            outline: 2px solid rgba(15, 118, 110, 0.2);
            outline-offset: 2px;
            background-color: #f5f7fa;
        }

        /* Active icon glow effect - Only for current active page (here) */
        #kt_aside_menu > .menu-item.here > .menu-link .menu-icon i {
            filter: none;
        }

        /* Opened menu icon - subtle effect */
        #kt_aside_menu > .menu-item.show:not(.here) > .menu-link .menu-icon i {
            opacity: 0.85;
        }

        .menu-state-icon-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i {
            color: #ffffff;
        }

        .aside-menu .menu-item .menu-link {
            padding-top: var(--menu-padding);
            padding-bottom: var(--menu-padding);
        }

        @media (min-width:768px) and (max-width: 1280px) {
            .mac-5-col {
                flex: 0 0 auto;
                width: 20%;
            }
        }

        @media (max-width: 575px) {
            .mac-5-col {
                flex: 0 0 auto;
                width: 50%;
            }
        }

        @media (min-width: 992px) {
            #kt_header.more-page {
                left: 60px;
            }

            .aside .aside-menu {
                width: 60px !important;
                transition: width 0.3s ease;
            }

            .header-fixed.toolbar-fixed .wrapper {
                padding-top: 0px !important;
            }

            .content {
                padding: 0 !important;
            }

            .aside-enabled.aside-fixed.toolbar-fixed .toolbar {
                display: none;
            }

            .aside-enabled.aside-fixed .wrapper {
                padding-left: 60px !important;
            }

            .aside {
                width: 60px !important;
                transition: width 0.3s ease;
            }

            .aside .aside-logo {
                height: var(--logo-height);
            }

            .container,
            .container-fluid,
            .container-sm,
            .container-md,
            .container-lg,
            .container-xl,
            .container-xxl {
                max-width: 100%;
            }

            /* ANEVEX CONTAINER-XXL OVERRIDE — neutralizes centering for #kt_content_container */
            #kt_content_container.container-xxl {
                max-width: 100% !important;
                margin-left: 0px !important;
                margin-right: 0px !important;
                padding-left: 0px !important;
                padding-right: 0px !important;
            }
        }

        @media (max-width: 991.98px) {
            .header-tablet-and-mobile-fixed .wrapper {
                padding-top: 0px;
                padding-left: 0px !important;
            }

            .d-flex.align-items-center.gap-2.gap-lg-3 {
                padding: 5px 0px 5px;
                border: 0;
            }

            .flex-column-fluid {
                flex: auto;
            }

            .toolbar-enabled:not(.toolbar-tablet-and-mobile-fixed) .toolbar {
                margin-bottom: 0px;
            }

            .toolbar {
                background-color: #204185;
                padding: 0;
            }

            /* ── Header: full-width, no left offset ── */
            #kt_header.more-page {
                left: 0 !important;
            }

            /* ── Wrapper: remove sidebar offset ── */
            .aside-enabled.aside-fixed .wrapper {
                padding-left: 0 !important;
            }

            /* ── Container: full-width on mobile ── */
            .container-xxl {
                max-width: 100% !important;
                padding-left: 12px !important;
                padding-right: 12px !important;
            }
        }

        @media (max-width: 991.98px) {
            /* ══════════════════════════════════════════════════════════
               MOBILE SIDEBAR — Custom system, bypasses KTMenu entirely.
               JS intercepts clicks in capture phase, toggles .anx-sub-open.
               CSS transitions handle slide-in/out animation.
               ══════════════════════════════════════════════════════════ */

            /* ── Sidebar container ── */
            .aside {
                width: 250px;
                transform: translateX(-100%);
                z-index: 1060;
                overflow: hidden !important;
            }
            [dir="rtl"] .aside {
                transform: translateX(100%);
            }
            .aside.drawer-on {
                transform: translateX(0) !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
            }
            .aside .aside-menu,
            .aside .aside-menu .hover-scroll-y {
                overflow-x: hidden !important;
            }
            .aside-menu .menu .menu-item .menu-link {
                align-items: center !important;
            }
            .ic-menu-mob {
                align-items: center !important;
            }

            /* ── Override desktop column layout ── */
            .aside .menu-link-sub {
                flex-direction: row !important;
            }
            .aside .aside-menu .menu-item .menu-icon {
                justify-content: flex-start !important;
            }

            /* ── Parent menu items: icon + name side by side ── */
            .aside .menu > .menu-item > .menu-link {
                justify-content: flex-start !important;
                padding: 10px 16px !important;
                gap: 0;
            }
            .aside .menu > .menu-item > .menu-link > .menu-icon {
                margin-right: 12px !important;
                flex-shrink: 0;
            }
            .aside .menu > .menu-item > .menu-link > .menu-title {
                display: inline-flex !important;
                opacity: 1 !important;
                font-size: 14px;
                font-weight: 600;
                color: #3b3b3b;
                white-space: nowrap;
            }
            .aside .menu-title {
                display: inline-flex !important;
                opacity: 1 !important;
            }
            .aside .menu-link.menu-center {
                justify-content: flex-start !important;
            }
            .aside .menu-icon.menu-icon-pos {
                margin-right: 10px !important;
            }

            /* ── Submenu: hidden off-screen by default ── */
            .aside .menu-sub.menu-sub-dropdown {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: auto !important;
                bottom: auto !important;
                width: 250px !important;
                max-width: 250px !important;
                height: 100vh !important;
                height: 100dvh !important;
                background: #fff !important;
                transform: translateX(-100%) !important;
                transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
                z-index: 1062 !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch;
                padding: 16px 0 !important;
                flex-direction: column !important;
                display: flex !important;
                margin: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                animation: none !important;
                pointer-events: none;
            }

            /* ── Slide in when custom JS adds .anx-sub-open ── */
            .aside .menu-item.anx-sub-open > .menu-sub.menu-sub-dropdown {
                transform: translateX(0) !important;
                pointer-events: auto;
                box-shadow: 4px 0 12px rgba(0,0,0,0.08) !important;
            }

            /* ── Submenu header (module name + back button) ── */
            .aside .menu-sub.menu-sub-dropdown > .menu-item:first-child .menu-content {
                font-size: 18px;
                font-weight: 600;
                padding: 12px 20px 8px !important;
                color: #1a1a2e;
            }

            /* ── Submenu section headers ── */
            .aside .menu-sub.menu-sub-dropdown .menu-section {
                font-size: 12px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                color: var(--theme-color);
                padding: 12px 20px 4px !important;
            }

            /* ── Submenu items ── */
            .aside .menu-sub.menu-sub-dropdown .menu-link.custom-sub-menu {
                padding: 10px 20px !important;
                gap: 10px;
                flex-direction: row !important;
            }
            .aside .menu-sub.menu-sub-dropdown .menu-link.custom-sub-menu .menu-title {
                font-size: 14px;
                font-weight: 400;
                color: #444;
            }
            .aside .menu-sub.menu-sub-dropdown .menu-link.custom-sub-menu:hover .menu-title,
            .aside .menu-sub.menu-sub-dropdown .menu-item.show > .menu-link .menu-title {
                color: var(--theme-color);
            }

            /* ── Submenu separator ── */
            .aside .menu-sub.menu-sub-dropdown > .separator {
                margin: 8px 20px;
                opacity: 0.15;
            }

            /* ── RTL ── */
            [dir="rtl"] .aside .menu-sub.menu-sub-dropdown {
                left: auto !important;
                right: 0 !important;
                transform: translateX(100%) !important;
            }
            [dir="rtl"] .aside .menu-item.anx-sub-open > .menu-sub.menu-sub-dropdown {
                transform: translateX(0) !important;
                box-shadow: -4px 0 12px rgba(0,0,0,0.08) !important;
            }
            [dir="rtl"] .aside .menu > .menu-item > .menu-link > .menu-icon {
                margin-right: 0 !important;
                margin-left: 12px !important;
            }
            [dir="rtl"] .aside .menu-icon.menu-icon-pos {
                margin-right: 0 !important;
                margin-left: 10px !important;
            }
        }

        /* ── Desktop: hide parent menu titles (60px sidebar) ── */
        @media (min-width: 992px) {
            .aside .menu > .menu-item > .menu-link > .menu-title {
                display: none !important;
            }
        }

        @media (min-width: 500px) and (max-width: 768px) {
            table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control,
            table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control {
                padding-left: 0px;
            }
        }

        @media (min-width: 992px) {
            .container-xxl {
                max-width: 100%;
                padding-left: 70px !important;
                padding-right: 15px !important;
            }

            /* Dashboard-only: removes large left offset for #singl_page */
            #singl_page .container-xxl {
                padding-left: 8px !important;
                padding-right: 8px !important;
                padding-bottom: 8px !important;
            }
        }

        span.svg-icon.svg-icon-2.svg-icon-lg-1 i {
            font-size: var(--menu-svg-size);
        }

        @media (max-width: 1200px) {
            body {
                overflow: scroll !important;
            }

            .res-row {
                display: flex;
                margin-top: calc(-0.5 * var(--bs-gutter-y));
            }
        }

        @media (max-width: 991px) {
            .gy-5 {
                margin-top: calc(0 * var(--bs-gutter-y)) !important;
                --bs-gutter-y: 0rem;
            }

            .position-relative {
                margin-top: 0px;
            }

            .symbol.symbol-50px>img {
                width: 25px !important;
                height: 25px !important;
            }
        }\n\n        @media (max-width: 1300px) {
            .fs-1 {
                font-size: 1.5rem !important;
            }
        }

        @media (min-width: 1300px) and (max-width: 1450px) {
            .btn {
                font-size: 14px;
            }

            .fs-1 {
                font-size: 1.5rem !important;
            }
        }

        @media (max-width: 1280px) {
            li.nav-item.pe-3 {
                padding-right: 0 !important;
            }
        }

        @media (min-width: 1200px) and (max-width: 1280px) {
            .btn.btn-info i {
                display: none;
            }
        }

        .btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
            border-radius: var(--anx-radius-lg) !important;
            padding: calc(0.60rem + 1px) calc(1.5rem + 1px);
        }

        .aside {
            background-color: #ffffff !important;
            border-right: 1px solid #edf2f7;
        }

        .scroll.px-5.item-pos-600 {
            border: 0;
            margin-left: 5px;
        }

        .btn.btn-color-white {
            color: #20a6a6;
        }

        button.btn.btm-sm.btn-icon.btn-color-white.btn-active-color-primary.btn-active-light {
            margin-top: 10px;
        }

        .btn.btn-color-white .svg-icon {
            color: #ffffff !important;
        }

        p.descr {
            font-size: 12px;
            font-weight: 300;
        }

        p.discount {
            font-size: 12px;
            font-weight: 300;
        }

        /* Submenu icon hover color */
        .menu-sub .menu-item .menu-link:hover i.ki-duotone {
            color: var(--theme-color) !important;
            filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
        }

        /* Submenu active icon glow */
        .menu-sub .menu-item.here > .menu-link i.ki-duotone {
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
        }

        /* ============================= */
        /* Dropdown Submenu Enhancements */
        /* ============================= */

        /* Smooth dropdown appearance */
        .menu-sub-dropdown {
            animation: dropdownSlide 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
            border-radius: 5px;
            overflow: hidden;
        }

        @keyframes dropdownSlide {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Dropdown menu separator */
        .menu-sub-dropdown .menu-item + .menu-item {
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* Nested submenu indicator */
        .menu-sub .menu-item.menu-accordion .menu-link .menu-arrow {
            transition: transform 0.2s ease;
        }

        .menu-sub .menu-item.menu-accordion.show .menu-link .menu-arrow {
            transform: rotate(90deg);
        }

        i.bi.bi-power,
        i.bi.bi-lock-fill {
            color: #a1a5b7 !important;
        }

        .card .card-header {
            padding: 1.5rem 1.5rem;
        }

        /* Desktop only: position submenus 60px from left (right of icon sidebar) */
        @media (min-width: 992px) {
            .menu-sub.menu-sub-dropdown.w-225px.w-lg-250px.px-1.py-4.show {
                transform: translate(60px, 0px) !important;
                inset: 0 !important;
                overflow: overlay;
            }

            .menu-sub.menu-sub-dropdown.w-500px.w-lg-500px.px-1.py-4.show {
                transform: translate(60px, 0px) !important;
                inset: 0 !important;
                overflow: overlay;
            }
        }

        span.menu-icon.me-0 i {
            font-size: var(--menu-icon-size) !important;
        }

        .text-dark {
            color: #343434 !important;
            font-weight: 400 !important;
        }

        .shadow-sm {
            box-shadow: -0.25rem -0.25rem 0.9rem 0.1rem rgb(32 65 133 / 19%) !important;
        }

        .bg-light-primary {
            background-color: #f5f8fa !important;
        }

        .mb-6 {
            margin-bottom: 1px !important;
        }

        .ps-10 {
            padding-right: 2.5rem !important;
        }

        .accordion-header,
        .accordion {
            background-color: #FFF;
            box-shadow: inset 0 -1px 0 rgb(0 0 0 / 6%);
        }

        .accordion-header:not(.collapsed) {
            background-color: #ffffff7a;
        }

        .fs-6.ps-10.collapse-body {
            background-color: #f3f3f3;
        }

        .row.gy-5.g-xl-8.res-row.row-rtl {
            background-color: #FFF;
        }

        .scrolltop {
            width: 36px;
            height: 36px;
            bottom: 170px;
            right: 15px;
            background-color: var(--theme-color);
        }

        .scrolltop .svg-icon {
            color: #fff;
        }

        .scrolltop:hover {
            background-color: var(--theme-color-dark);
            color: #fff;
        }

        [data-kt-scrolltop=on] .scrolltop:hover {
            opacity: 0.8;
        }

        @media (min-width: 900.1px) and (max-width: 991.9px) {
            .card-mob {
                padding-right: calc(var(--bs-gutter-x) * 0.5);
                padding-left: calc(var(--bs-gutter-x) * 0.5);
                padding-top: calc(var(--bs-gutter-x) * 0.5);
            }

            .card-header:first-child {
                border-radius: 5px 5px 0 0;
            }

            .card-header-mob {
                padding-top: calc(var(--bs-gutter-x) * 0.5) !important;
            }

            .py-5 {
                padding-bottom: 0px !important;
            }
        }

        @media (max-width: 900px) {
            .card-mob {
                padding-top: calc(var(--bs-gutter-x) * 0.5);
                margin-left: 0px !important;
            }

            .card-header-mob {
                padding-top: calc(var(--bs-gutter-x) * 0.5) !important;
            }

            .card-header:first-child {
                border-radius: 5px 5px 0 0;
            }

            .py-5 {
                padding-bottom: 0px !important;
            }
        }

        div#kt_ecommerce_products_table_wrapper::-webkit-scrollbar-thumb {
            background-color: #20418538;
        }

        .menu.menu-sub.menu-sub-dropdown.menu-column.menu-rounded.menu-gray-800.menu-state-bg-light-primary.fw-bold.w-200px.w-275px.show {
            padding: 10px 10px 10px 10px;
            margin-right: -7px !important;
        }

        .menu-state-icon-primary .menu-item.show>.menu-link .menu-icon i {
            color: var(--theme-color) !important;
        }

        .menu-link-sub {
            flex-direction: column;
        }

        .menu-content {
            justify-content: start;
            display: grid;
        }

        .aside-menu .menu-item .menu-icon {
            justify-content: center;
        }

        .menu-icon-pos i {
            font-size: 1.7rem !important;
        }

        .btn-outline-dashed {
            outline: 1px dashed !important;
        }

        .nav-line-tabs .nav-item .nav-link.active,
        .nav-line-tabs .nav-item .nav-link:hover:not(.disabled),
        .nav-line-tabs .nav-item.show .nav-link {
            border-bottom: 1px solid var(--theme-color-hover) !important;
            color: var(--theme-color-hover);
            background-color: var(--theme-color-light);
            border-radius: 0;
            transition: color 0.2s ease, background-color 0.2s ease;
        }

        /* Shared utility compatibility migrated out of style.custom-copy.css. */
        .info-bg {
            --bs-table-bg: #f4f4f4;
        }

        .details-bg {
            background-color: #ebebec;
        }

        .b-t-1 {
            border-bottom: 1px solid #ededed;
        }

        .pading-custom-s {
            padding: 10px 20px !important;
        }

        .bg-total {
            background-color: #EDEDED;
        }

        .custom-bg-foot-tabel {
            background-color: #EDEDED !important;
        }

        .border-i-toggler {
            border: 1px solid #e6e6e6 !important;
        }

        .minh-50px {
            min-height: 50px !important;
        }

        .bb-5 {
            border-bottom: 1px solid #e6e6e6;
        }

        .alert-success-custom {
            color: #205237;
            background-color: #DFF8F1;
            border-color: #e6e6e6;
        }

        .align-center-custom-s {
            align-items: center !important;
        }

        .size-icons-custom-s {
            font-size: 2.4rem !important;
        }

        .size-icons-custom-s2 {
            font-size: 3rem !important;
            color: var(--theme-color) !important;
        }

        .style-total-custom {
            font-weight: var(--anx-font-table-total-weight) !important; /* 700 */
            font-size: var(--anx-font-table);                          /* 14px — follows table scale */
        }

        .bg-green-daken {
            background-color: #67809F;
        }

        .bg-color-custom-s-grren {
            background-color: var(--theme-color);
        }

        .bg-color-custom-s-gray {
            background-color: #71717e;
        }

        .shadow {
            box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px !important;
        }

        .aside-toggle {
            padding-left: 15px !important;
            padding-right: 15px !important;
        }

        .custom-table-hover tr:not(.group):hover td:not(.show-action-exclude) {
            cursor: pointer;
            background-color: var(--theme-color-light);
        }

        .show-list-item {
            border-radius: 5px;
            padding: 0.2rem 0.4rem;
            margin: 0.2rem 0.4rem 0.2rem 0;
            display: inline-flex;
            align-items: center;
            position: relative;
            background-color: #E4E6EF;
        }

        .pointer {
            cursor: pointer;
        }

        a.menu-link.menu-link-sub.custom-sub-menu {
            flex-direction: row;
        }

        .menu-state-primary .menu-item.here>.menu-link,
        .menu-state-primary .menu-item.show>.menu-link {
            background-color: var(--theme-color);
        }

        /* Override: aside sidebar active items use light bg, not green */
        .aside .menu-state-primary .menu-item.here > .menu-link,
        .aside .menu-state-primary .menu-item.show > .menu-link {
            background-color: #f5f7fa !important;
        }

        .menu-state-primary .menu-item.here .menu-item.show>.menu-link {
            background-color: var(--theme-color);
        }

        /* Override: aside nested submenu inside active parent uses light bg */
        .aside .menu-state-primary .menu-item.here .menu-item.show > .menu-link {
            background-color: #f5f7fa !important;
        }

        .aside .menu-state-primary .menu-item.here .menu-item.show > .menu-link > .menu-title {
            color: #1d2939 !important;
        }

        .menu-state-primary .menu-item.here .menu-item.show>.menu-link>.menu-title {
            color: #fff !important;
        }

        .view-collapse:not(.show) {
            flex-basis: 0;
            flex-grow: 0;
            width: 0;
        }

        .view-collapse {
            height: auto;
            transition: flex-basis .35s ease, flex-grow .35s ease, width .35s ease;
        }

        @media (prefers-reduced-motion: reduce) {
            .collapsing.collapse-horizontal {
                transition: none;
            }
        }

        /* ================================ */
        /* Transfer Modal Layout Cleanup   */
        /* ================================ */

        /* Compact modal header — inherits from global .modal-header */
        .transfer-modal-header {
            padding: 0.75rem 1.25rem !important;
        }

        /* ---- Bottom section: Notes + Attachments ---- */
        .transfer-bottom-section {
            border-top: 1px solid #edf2f7;
            padding-top: 0.75rem;
        }

        .transfer-bottom-tabs .nav-tabs {
            border-bottom: 1px solid #e4e6ef;
            gap: 0;
        }

        .transfer-bottom-tabs .nav-link {
            font-size: 0.82rem;
            font-weight: 500;
            color: #94a3b8;
            padding: 0.4rem 0.9rem;
            border: none;
            border-bottom: 2px solid transparent;
            background: none;
            transition: color 0.15s, border-color 0.15s;
        }

        .transfer-bottom-tabs .nav-link:hover {
            color: #475569;
        }

        .transfer-bottom-tabs .nav-link.active {
            color: var(--theme-color, #3b82f6);
            border-bottom-color: var(--theme-color, #3b82f6);
            background: none;
        }

        .transfer-bottom-tabs .tab-content {
            padding: 0.65rem 0 0 0;
        }

        /* general printing related css */

        @media screen {
            .print {
                visibility: hidden;
                height: 0;
                width: 0;
            }
        }

        @media print {

            .no-print:not(.content),
            .modal-backdrop,
            #kt_aside,
            #kt_header,
            #kt_footer,
            #toastr-container {
                display: none !important;
            }

            #kt_content {
                margin-top: 0 !important;
            }

            .modal-content {
                box-shadow: unset !important;
            }

            .modal-dialog {
                margin: unset !important;
                display: unset !important;
            }
        }

        .tafqet {
            text-align: right;
        }

        .svg-icon.svg-icon-1.cus-svg svg {
            height: 2rem !important;
            width: 2rem !important;
        }

        .item-frist-1 {
            --bs-table-bg: #ffffff;
            --bs-table-striped-bg: #f1f5f9;
            border-bottom: 1px solid #e2e8ef !important;
            border-left: 1px solid #e2e8ef !important;
            border-right: 1px solid #e2e8ef !important;
        }

        .border {
            border: 1px solid #E6E6E6 !important;
        }

        .menu-title-gray-600 .menu-item .menu-link .menu-title {
            color: #3b3b3b !important;
            font-size: 14px !important;
        }

        /* .btn removed — C12.4 owns button radius at 5px */
        /* .form-control, .form-select removed — Shared Form Control Polish wins with border-radius !important */
        .card,
        .image-input,
        .image-input-wrapper,
        .swal2-popup,
        .swal2-styled.swal2-cancel,
        .swal2-styled.swal2-confirm,
        .swal2-styled.swal2-deny,
        .symbol,
        .select2-container--bootstrap5,
        .select2-dropdown,
        .select2-search,
        .select2-search__field,
        .menu-sub-dropdown,
        .modal-content,
        .nav-group,
        .symbol>img {
            border-radius: 0 !important;
        }

        th.text-end.sorting_disabled {
            text-align: left !important;
            padding-left: 15px !important;
        }

        th.sorting>:not(:last-child)>:last-child>* {
            width: auto;
        }

        table.dataTable>thead .sorting_asc>:not(:last-child)>:last-child>*,
        table.dataTable>thead .sorting_desc>:not(:last-child)>:last-child>* {
            width: auto !important;
        }

        table.dataTable th>:not(:first-child) {
            width: auto !important;
        }

        .table>:not(:last-child)>:last-child>* {
            border-bottom-color: #e6e6e6 !important;
        }

        .table>thead {
            border-width: 1px !important;
            border-color: #e6e6e6 !important;
        }

        .table tbody tr:last-child,
        .table tfoot tr:last-child {
            border-bottom: 1px solid #e2e8ef !important;
        }

        #kt_content_container div.card .table-responsive {
            overflow-y: scroll;
            max-height: calc(100vh - 270px);
        }

        #kt_content_container div.card .table-responsive table thead {
            position: sticky;
            top: -0.2px;
        }

        /* style custom  */

        .radius-custom {
            border-radius: 5px !important;
        }

        /* style custom  */

        .btn.btn-icon.btn-sm,
        .btn-group-sm>.btn.btn-icon {
            height: calc(1.5em + 0rem + 2px);
            width: calc(1.5em + 1.1rem + 2px);
        }

        .btn-check:checked+.btn-primary:focus,
        .btn-check:active+.btn-primary:focus,
        .btn-primary:active:focus,
        .btn-primary.active:focus,
        .show>.btn-primary.dropdown-toggle:focus {
            box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.125), 0px 0px 0px 0rem rgba(var(--theme-color-rgb), 1);
        }

        .w-30 {
            width: 100% !important;
        }
        @media (min-width: 992px) {
            .w-30 {
                width: 30% !important;
            }
        }

        .btn-check:active+.btn.btn-outline.btn-outline-dashed.btn-outline-default,
        .btn-check:checked+.btn.btn-outline.btn-outline-dashed.btn-outline-default,
        .btn.btn-outline.btn-outline-dashed.btn-outline-default.active,
        .btn.btn-outline.btn-outline-dashed.btn-outline-default.show,
        .btn.btn-outline.btn-outline-dashed.btn-outline-default:active:not(.btn-active),
        .btn.btn-outline.btn-outline-dashed.btn-outline-default:focus:not(.btn-active),
        .btn.btn-outline.btn-outline-dashed.btn-outline-default:hover:not(.btn-active),
        .show>.btn.btn-outline.btn-outline-dashed.btn-outline-default {
            color: var(--theme-color) !important;
            border-color: var(--theme-color) !important;
            background-color: #f1faff !important;
        }

        .menu-item .menu-content {
            padding: 0.65rem 1rem;
            padding-right: 15px !important;
            padding-left: 15px !important;
        }

        #kt_header span.badge-header {
            border-radius: 50% !important;
        }

        /* Shared Semantic Badge Pills — BACKWARD COMPAT LAYER
           Restyles vendor badge-light-* classes to match .anx-chip system exactly.
           New code should use .anx-chip.anx-chip--{color} instead.
           See: "Anevex Status Badge Modifiers" section + anxStatusRender() / anxBoolRender() helpers.
           This block remains for the ~90 existing files still using badge-light-* classes. */
        :is(.badge-success, .badge-light-success, .badge-success-custom,
            .badge-warning, .badge-light-warning,
            .badge-danger, .badge-light-danger,
            .badge-primary, .badge-light-primary,
            .badge-secondary, .badge-light, .badge-light-dark,
            .badge-info, .badge-light-info,
            .badge-dark-custom, .badge-dark-primary-custom, .badge-dark-danger-custom):not(.badge-circle):not(.badge-num) {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 5px 12px !important;
            border: 1px solid transparent !important;
            border-radius: 5px !important;
            font-size: var(--anx-font-chip) !important;
            font-weight: var(--anx-font-chip-weight) !important;
            line-height: 1.2 !important;
            letter-spacing: 0.01em;
            box-shadow: none !important;
            white-space: nowrap;
        }

        :is(.badge-success, .badge-light-success, .badge-success-custom):not(.badge-circle):not(.badge-num) {
            background-color: var(--anx-color-success-soft) !important;
            border-color: var(--anx-color-success-border) !important;
            color: var(--anx-color-success-strong) !important;
        }

        :is(.badge-warning, .badge-light-warning):not(.badge-circle):not(.badge-num) {
            background-color: var(--anx-color-warning-soft) !important;
            border-color: var(--anx-color-warning-border) !important;
            color: var(--anx-color-warning-strong) !important;
        }

        :is(.badge-danger, .badge-light-danger, .badge-dark-danger-custom):not(.badge-circle):not(.badge-num) {
            background-color: var(--anx-color-danger-soft) !important;
            border-color: var(--anx-color-danger-border) !important;
            color: var(--anx-color-danger-strong) !important;
        }

        :is(.badge-primary, .badge-light-primary, .badge-dark-primary-custom):not(.badge-circle):not(.badge-num) {
            background-color: #ebf5ff !important;
            border-color: #c8def8 !important;
            color: #0d5ea8 !important;
        }

        :is(.badge-secondary, .badge-light, .badge-light-dark, .badge-dark-custom):not(.badge-circle):not(.badge-num) {
            background-color: #f4f6f8 !important;
            border-color: #dde3ea !important;
            color: #566273 !important;
        }

        :is(.badge-info, .badge-light-info):not(.badge-circle):not(.badge-num) {
            background-color: var(--anx-color-info-soft) !important;
            border-color: var(--anx-color-info-border) !important;
            color: var(--anx-color-info-strong) !important;
        }

        /* Shared Header Polish
           Central light/shared source of truth for header shell, actions, search, and notification dot. */
        #kt_header.box-shadow-custom {
            border-bottom: 1px solid #edf2f7;
        }

        #kt_header .page-title h1 {
            color: #162033 !important;
            font-size: 1rem !important;
            font-weight: 700 !important;
            letter-spacing: -0.01em;
        }

        #kt_header .size-icons-custom-s {
            font-size: 1.55rem !important;
        }

        #kt_header #kt_notifications_toggle,
        #kt_header #kt_helpdata_toggle,
        #kt_header #kt_user-menu_toggle {
            background-color: #ffffff !important;
            border: 1px solid #dde6ef !important;
            border-radius: 5px !important;
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
            color: #5e6a79 !important;
            transition: background-color var(--anx-transition), border-color var(--anx-transition), box-shadow var(--anx-transition), color var(--anx-transition);
        }

        #kt_header #kt_notifications_toggle,
        #kt_header #kt_user-menu_toggle {
            border-radius: 5px !important;
        }

        #kt_header #kt_notifications_toggle:hover,
        #kt_header #kt_notifications_toggle:focus,
        #kt_header #kt_helpdata_toggle:hover,
        #kt_header #kt_helpdata_toggle:focus,
        #kt_header #kt_user-menu_toggle:hover,
        #kt_header #kt_user-menu_toggle:focus {
            background-color: #f8fbfc !important;
            border-color: #c9d5e2 !important;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
            color: #0f766e !important;
        }

        #kt_header #kt_notifications_toggle .ki-duotone,
        #kt_header #kt_helpdata_toggle .ki-duotone,
        #kt_header #kt_user-menu_toggle .ki-duotone {
            color: currentColor !important;
        }

        #kt_header .user-aside-icon-img {
            height: 100%;
            width: 100%;
            display: flex !important;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
        }

        #kt_header .badge-header.badge-danger {
            width: 10px !important;
            height: 10px !important;
            min-height: 10px;
            padding: 0 !important;
            border: 2px solid #ffffff !important;
            border-radius: 999px !important;
            background-color: #e5484d !important;
            box-shadow: 0 0 0 2px rgba(229, 72, 77, 0.14) !important;
        }

        #kt_header .form-control.form-control-solid.ben-search-header {
            background-color: #ffffff !important;
            border: 1px solid #dde6ef !important;
            border-radius: 5px !important;
            color: #182230 !important;
            box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
            font-size: var(--anx-font-base);
            min-height: 40px;
        }

        #kt_header .form-control.form-control-solid.ben-search-header::placeholder {
            color: #98a2b3;
            font-size: var(--anx-font-base);
        }

        #kt_header .form-control.form-control-solid.ben-search-header:hover {
            border-color: #c9d5e2 !important;
            background-color: #ffffff !important;
        }

        #kt_header .dropdown.show > .form-control.form-control-solid.ben-search-header,
        #kt_header .form-control.form-control-solid.ben-search-header:active,
        #kt_header .form-control.form-control-solid.ben-search-header.active,
        #kt_header .form-control.form-control-solid.ben-search-header:focus,
        #kt_header .form-control.form-control-solid.ben-search-header.focus {
            background-color: #ffffff !important;
            border-color: #0f766e !important;
            color: #182230 !important;
        }

        /* Shared Form Control Polish
           Central light/shared source of truth for labels, help text, controls, Select2, and button hierarchy.
           Tokens unified — all rules now use canonical --anx-* tokens from :root (L1–201). */

        .form-label,
        .col-form-label {
            margin-bottom: 0.42rem !important;
            color: var(--anx-color-text-soft);
            font-size: var(--anx-font-md) !important;
            font-weight: 500 !important;
            line-height: 1.35;
        }

        .form-text,
        .text-muted,
        .text-gray-500 {
            color: var(--anx-color-text-muted) !important;
            font-size: 0.81rem;
            line-height: 1.4;
        }

        .invalid-feedback {
            margin-top: 0 !important;
        }

        .form-control,
        .form-select {
            border: 1px solid var(--anx-color-border) !important;
            border-radius: var(--anx-radius-lg) !important;
            background-color: var(--anx-color-surface) !important;
            color: var(--anx-color-text) !important;
            font-size: var(--anx-font-md) !important;
            box-shadow: none !important;
            transition: border-color var(--anx-transition), box-shadow var(--anx-transition), background-color var(--anx-transition), color var(--anx-transition);
        }

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

        .form-control:hover,
        .form-select:hover {
            border-color: var(--anx-color-border-strong) !important;
        }

        .form-control:focus,
        .form-select:focus,
        .select2-container--bootstrap5.select2-container--focus .select2-selection,
        .select2-container--bootstrap5.select2-container--open .select2-selection {
            border-color: var(--anx-color-primary) !important;
            background-color: var(--anx-color-surface) !important;
            color: var(--anx-color-text) !important;
        }

        .form-control:disabled,
        .form-select:disabled,
        .form-control[readonly] {
            background-color: var(--anx-color-surface-disabled) !important;
            border-color: var(--anx-color-border) !important;
            color: var(--anx-color-text-muted) !important;
            box-shadow: none !important;
        }

        .form-control.is-invalid,
        .was-validated .form-control:invalid,
        .form-select.is-invalid,
        .was-validated .form-select:invalid {
            padding-right: calc(0.5em + 0.5rem) !important;
            background-size: calc(0.55em + 0.55rem) calc(0.55em + 0.55rem) !important;
            border-color: var(--anx-color-danger) !important;
            box-shadow: 0 0 0 3px rgba(194, 65, 59, 0.1) !important;
        }

        .form-select-sm,
        .form-control-sm {
            font-size: var(--anx-font-sm);
            background-color: var(--anx-color-surface) !important;
            border: 1px solid var(--anx-color-border) !important;
        }

        select.form-select.form-select-sm.form-select-solid {
            padding-top: 0.25rem !important;
            padding-bottom: 0.25rem !important;
        }

        .select2-container--bootstrap5 .select2-selection {
            border: 1px solid var(--anx-color-border) !important;
            border-radius: var(--anx-radius-lg) !important;
            background-color: var(--anx-color-surface) !important;
            box-shadow: none !important;
            transition: border-color var(--anx-transition), box-shadow var(--anx-transition), background-color var(--anx-transition);
        }

        .select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered,
        .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered,
        .select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field,
        textarea.select2-search__field {
            color: var(--anx-color-text) !important;
        }

        .select2-container--bootstrap5 .select2-selection--single .select2-selection__placeholder,
        .select2-container--bootstrap5 .select2-selection--multiple .select2-search__field::placeholder,
        .select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field::placeholder,
        textarea.select2-search__field::placeholder {
            color: var(--anx-color-text-faint) !important;
            opacity: 1;
        }

        .select2-container--bootstrap5 .select2-selection--multiple .select2-search__field {
            border-color: var(--anx-color-border) !important;
            border-radius: var(--anx-radius-md) !important;
            box-shadow: none !important;
        }

        .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice {
            border: 1px solid var(--anx-color-border-primary) !important;
            border-radius: 999px !important;
            background: rgba(15, 118, 110, 0.08) !important;
            color: var(--anx-color-primary-dark) !important;
        }

        .btn {
            border-radius: var(--anx-radius-lg) !important;
            font-weight: 500;
            box-shadow: none;
            transition: border-color var(--anx-transition), background-color var(--anx-transition), color var(--anx-transition), box-shadow var(--anx-transition);
        }

        .btn i {
            font-size: 1.5rem;
        }

        .btn:focus,
        .btn:active:focus,
        .btn-check:focus + .btn {
        }

        .btn-primary,
        .btn-success,
        .btn.ADD,
        button.btn.btn-primary.ADD {
            color: #ffffff !important;
            border-color: transparent !important;
            background: linear-gradient(180deg, var(--anx-color-primary-hover) 0%, var(--anx-color-primary) 100%) !important;
            box-shadow: var(--anx-shadow-sm) !important;
        }

        /* --- Primary/Success button sizing — match .anx-btn compact size ---
             Targets: btn-primary, btn-success (without .anx-btn) in toolbars, modals, reports.
             Excludes: .btn-sm (already small), .btn-icon (icon-only), .anx-btn (has C5 sizing),
                       .btn-lg (intentionally large), .p-button (PrimeVue owns its sizing) --- */
        .btn-primary:not(.anx-btn):not(.btn-sm):not(.btn-icon):not(.btn-lg):not(.p-button),
        .btn-success:not(.anx-btn):not(.btn-sm):not(.btn-icon):not(.btn-lg):not(.p-button),
        .btn.ADD:not(.anx-btn):not(.btn-sm):not(.btn-icon):not(.btn-lg):not(.p-button) {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
            height: 36px !important;
            padding: 0 16px !important;
            font-size: var(--anx-font-button) !important;
            font-weight: var(--anx-font-button-weight) !important;
            line-height: var(--anx-leading-tight) !important;
            white-space: nowrap !important;
        }

        /* --- btn-info action buttons (non-sm, non-toggler) — same compact sizing --- */
        .btn.btn-info:not(.btn-sm):not(.border-i-toggler):not(.btn-icon):not(.btn-lg):not(.p-button) {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
            height: 36px !important;
            padding: 0 16px !important;
            font-size: var(--anx-font-button) !important;
            font-weight: var(--anx-font-button-weight) !important;
            line-height: var(--anx-leading-tight) !important;
            white-space: nowrap !important;
        }

        .btn-check:active + .btn.btn-primary,
        .btn-check:checked + .btn.btn-primary,
        .btn.btn-primary.active,
        .btn.btn-primary.show,
        .btn.btn-primary:active:not(.btn-active),
        .btn.btn-primary:focus:not(.btn-active),
        .btn.btn-primary:hover:not(.btn-active),
        .show > .btn.btn-primary,
        .btn-primary:hover:not(:disabled),
        .btn-primary:focus:not(:disabled),
        .btn-success:hover:not(:disabled),
        .btn-success:focus:not(:disabled),
        .btn.ADD:hover,
        .btn.ADD:focus,
        button.btn.btn-primary.ADD:hover:not(:disabled),
        button.btn.btn-primary.ADD:focus:not(:disabled) {
            color: #ffffff !important;
            border-color: transparent !important;
            background: linear-gradient(180deg, var(--anx-color-primary-hover) 0%, var(--anx-color-primary-dark) 100%) !important;
            box-shadow: 0 4px 10px rgba(15, 118, 110, 0.18) !important;
            transform: none !important;
        }

        .btn-primary:active:not(:disabled),
        .btn-primary.active,
        .btn-success:active:not(:disabled),
        .btn-success.active,
        button.btn.btn-primary.ADD:active:not(:disabled),
        button.btn.btn-primary.ADD.active {
            color: #ffffff !important;
            border-color: transparent !important;
            background: var(--anx-color-primary-dark) !important;
            box-shadow: none !important;
            transform: none !important;
        }

        .btn-light,
        .btn-white,
        .btn-info,
        .btn-outline-secondary,
        .btn.btn-light-primary,
        .btn.btn-light-custom {
            border-color: var(--anx-color-border) !important;
            background: var(--anx-color-surface) !important;
            color: var(--anx-color-text-soft) !important;
        }

        .btn-check:active + .btn.btn-light-primary,
        .btn-check:checked + .btn.btn-light-primary,
        .btn.btn-light-primary.active,
        .btn.btn-light-primary.show,
        .btn.btn-light-primary:active:not(.btn-active),
        .btn.btn-light-primary:focus:not(.btn-active),
        .btn.btn-light-primary:hover:not(.btn-active),
        .show > .btn.btn-light-primary,
        .btn-light:hover:not(:disabled),
        .btn-light:focus:not(:disabled),
        .btn-white:hover:not(:disabled),
        .btn-white:focus:not(:disabled),
        .btn-info:hover:not(:disabled),
        .btn-info:focus:not(:disabled),
        .btn-outline-secondary:hover:not(:disabled),
        .btn-outline-secondary:focus:not(:disabled),
        .btn.btn-light-primary:hover:not(:disabled),
        .btn.btn-light-primary:focus:not(:disabled),
        .btn.btn-light-custom:hover:not(:disabled),
        .btn.btn-light-custom:focus:not(:disabled) {
            border-color: var(--anx-color-border-strong) !important;
            background: var(--anx-color-surface-soft) !important;
            color: var(--anx-color-primary-dark) !important;
            box-shadow: var(--anx-shadow-sm) !important;
            transform: none !important;
        }

        /* --- btn-info action buttons → primary style
             Targets: Import, Export, Download Template
             Excludes: .btn-sm (Show links), .border-i-toggler (filter buttons) --- */
        .btn.btn-info:not(.btn-sm):not(.border-i-toggler) {
            color: #ffffff !important;
            border-color: transparent !important;
            background: linear-gradient(180deg, var(--anx-color-primary-hover) 0%, var(--anx-color-primary) 100%) !important;
            box-shadow: var(--anx-shadow-sm) !important;
        }

        .btn.btn-info:not(.btn-sm):not(.border-i-toggler):hover:not(:disabled),
        .btn.btn-info:not(.btn-sm):not(.border-i-toggler):focus:not(:disabled) {
            color: #ffffff !important;
            border-color: transparent !important;
            background: linear-gradient(180deg, var(--anx-color-primary-hover) 0%, var(--anx-color-primary-dark) 100%) !important;
            box-shadow: 0 4px 10px rgba(15, 118, 110, 0.18) !important;
            transform: none !important;
        }

        .btn.btn-info:not(.btn-sm):not(.border-i-toggler):active:not(:disabled) {
            color: #ffffff !important;
            border-color: transparent !important;
            background: var(--anx-color-primary-dark) !important;
            box-shadow: none !important;
            transform: none !important;
        }

        button.btn.btn-light-primary.me-3 {
            background-color: var(--theme-color-light, #D1F5EA) !important;
            color: var(--theme-color-darker, #24906D) !important;
            border-color: var(--theme-color-lighten, #A3EBD7) !important;
        }

        button.btn.btn-light-primary.me-3:hover {
            background-color: var(--theme-color-lighten, #A3EBD7) !important;
            color: var(--theme-color-darker, #24906D) !important;
            border-color: var(--theme-color, #36C49D) !important;
        }

        button.btn.btn-light-primary.ms-3 {
            background-color: #ffffff !important;
            color: #ffffff !important;
        }

        .btn.btn-light-primary .svg-icon,
        .btn.btn-light-primary i {
            color: currentColor !important;
        }

        .btn-danger,
        .btn-outline-danger,
        .btn.btn-light-danger,
        .btn.btn-light-cancel {
            border-color: var(--anx-color-danger-border) !important;
            background: var(--anx-color-surface) !important;
            color: var(--anx-color-danger) !important;
        }

        .btn-danger:hover:not(:disabled),
        .btn-danger:focus:not(:disabled),
        .btn-outline-danger:hover:not(:disabled),
        .btn-outline-danger:focus:not(:disabled),
        .btn.btn-light-danger:hover:not(:disabled),
        .btn.btn-light-danger:focus:not(:disabled),
        .btn.btn-light-cancel:hover:not(:disabled),
        .btn.btn-light-cancel:focus:not(:disabled) {
            border-color: var(--anx-color-danger) !important;
            background: var(--anx-color-danger-soft) !important;
            color: var(--anx-color-danger-strong) !important;
            box-shadow: none !important;
            transform: none !important;
        }

        .btn-group-sm > .btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon),
        .btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon).btn-sm {
            border: 1px solid transparent;
            padding: calc(0.25rem + 0px) calc(0.25rem + 5px) !important;
            font-size: var(--anx-font-button);
            font-weight: var(--anx-font-button-weight);
            margin: 0 0.1rem;
        }

        .btn-group-sm > .btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon),
        .btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon).custom-size {
            border: 1px solid transparent;
            padding: calc(0.25rem + 5px) calc(0.25rem + 5px) !important;
            font-size: var(--anx-font-button);
            font-weight: var(--anx-font-button-weight);
            margin: 0 0.1rem;
        }

        .custom-size {
            padding: calc(0.25rem + 5px) calc(0.25rem + 5px) !important;
        }

        button.btn.btn-sm.btn-icon.btn-active-color-primary.me-n5.p-5.filter_drawer_close,
        button.btn.btn-sm.btn-icon.btn-active-color-primary.me-n5.p-5.pos_orders_filter_drawer_close,
        button.btn.btn-sm.btn-icon.btn-active-color-primary.me-n5.p-5.pos_sessions_filter_drawer_close,
        button.btn.btn-sm.btn-icon.btn-active-color-primary.me-n5.p-5.pos_payments_filter_drawer_close {
            box-shadow: none !important;
        }

        .s2-to-tree.select2-container li.select2-results__option[aria-selected="true"] > span.item-label {
            background-color: transparent !important;
        }

        .s2-to-tree.select2-container .select2-results__option--highlighted[aria-selected] > span.item-label {
            color: var(--theme-color) !important;
        }

        .s2-to-tree li.select2-results__option.non-leaf .expand-collapse:before {
            right: 0.25em !important;
            top: 0.1em !important;
            font-size: 24px !important;
            color: var(--theme-color) !important;
        }

        .s2-to-tree .select2-results__option.l1 {
            margin-right: 0 !important;
        }

        .btn:disabled,
        .btn.disabled {
            opacity: 0.58;
            box-shadow: none !important;
        }

        @media (min-width: 992px) {
            textarea.select2-search__field {
                min-height: 20px !important;
            }
        }

        @media (max-width: 767.98px) {
            input.form-control.form-control-solid.w-250px.ps-15 {
                font-size: 10px;
            }
        }

        .btn-screen {
            background-color: #f3f3f3 !important;
        }

        label.btn.btn-outline.btn-outline-dashed.btn-outline-default.d-flex.text-start.p-6.h-100.active {
            background-color: #F3FFFB !important;
        }

        .btn.btn-outline.btn-outline-dashed.btn-outline-default:hover:not(.btn-active) {
            background-color: #F3FFFB !important;
        }

        .btn.btn-outline.btn-outline-dashed.btn-outline-default.active {
            background-color: #F3FFFB !important;
        }

        .card-head-setting {
            background-color: #EBEBEC;
            border-radius: 0;
        }

        .bg-gray-custom {
            background-color: #fafafa !important;
        }

        .btn-check:checked+.btn.bg-billing-active-custom {
            background-color: #DEF2EC !important;
        }

        .out-line-billing {
            outline: 1px dashed var(--theme-color) !important;
        }

        .btn-check:checked+.btn.btn-outline.btn-outline-dashed {
            border-color: #DEF2EC !important;
        }

        .btn.btn-outline.bg-billing-active-custom:hover:not(.btn-active) {
            border-color: #DEF2EC !important;
        }

        .plans-hover:hover {
            background-color: #DEF2EC !important;
        }

        .word-break {
            word-break: break-all;
        }

        .table-License-hover tbody tr:hover {
            background-color: #DEF2EC;
        }

        .border-bottom-2 {
            border-bottom: 2px;
        }

        .border-solid {
            border-style: solid !important;
        }

        .border-gray-custom {
            border-color: #f2efef !important;
        }

        /* End style billing  */

        .border-end {
            border-right: 1px solid #EAEAEA !important;
            border-left: 0 !important;
        }

        @media (min-width: 1200px) {
            .mr-5 {
                margin-left: 1.25rem;
                margin-right: 0rem;
            }
        }

        .bg-logout {
            background-color: #E55F5F !important;
        }

/* ==============================================================
   ANX-DRAWER — Shared drawer/panel component
   ============================================================== */

.anx-drawer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fff;
}

/* ── Header ── */
.anx-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #edf2f7;
    flex-shrink: 0;
}
.anx-drawer__header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.anx-drawer__title {
    font-size: 16px;
    font-weight: 700;
    color: #1d2939;
    margin: 0;
    letter-spacing: -0.01em;
}
.anx-drawer__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--theme-color, #0d9488);
    border-radius: 10px;
}
.anx-drawer__count[count="0"],
.anx-drawer__count:empty {
    display: none;
}
.anx-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: #98a2b3;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.anx-drawer__close:hover {
    background: #f4f6f9;
    color: #5e6a79;
}

/* ── Body (scrollable) ── */
.anx-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    min-height: 0;
}
.anx-drawer__body .tab-content,
.anx-drawer__body .tab-content > .tab-pane.active {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.anx-drawer__scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
}

/* ── Footer ── */
.anx-drawer__footer {
    flex-shrink: 0;
    padding: 12px 20px;
    border-top: 1px solid #edf2f7;
    text-align: center;
}
.anx-drawer__footer-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-color, #0d9488);
    text-decoration: none;
    transition: opacity 0.15s;
}
.anx-drawer__footer-link:hover {
    opacity: 0.8;
    color: var(--theme-color, #0d9488);
    text-decoration: none;
}
[dir="rtl"] .anx-drawer__footer-link svg {
    transform: scaleX(-1);
}

/* ── Tabs (Notifications) ── */
.anx-drawer__tabs {
    padding: 0 20px;
    border-bottom: 1px solid #edf2f7;
    flex-shrink: 0;
}
.anx-drawer__tabs .nav {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.anx-drawer__tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #98a2b3;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}
.anx-drawer__tab:hover {
    color: #5e6a79;
    text-decoration: none;
}
.anx-drawer__tab.active {
    color: var(--theme-color, #0d9488);
    border-bottom-color: var(--theme-color, #0d9488);
}

/* ── Menu items (User-menu) ── */
.anx-drawer__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #344054;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
a.anx-drawer__item:hover {
    background: #f5f7fa;
    color: #344054;
    text-decoration: none;
}
.anx-drawer__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f5f7fa;
    color: #667085;
    flex-shrink: 0;
}
a.anx-drawer__item:hover .anx-drawer__item-icon {
    background: #edf2f7;
    color: var(--theme-color, #0d9488);
}
.anx-drawer__item-label {
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    min-width: 0;
}
.anx-drawer__item-arrow {
    color: #d0d5dd;
    flex-shrink: 0;
    transition: color 0.15s;
}
[dir="rtl"] .anx-drawer__item-arrow {
    transform: scaleX(-1);
}
a.anx-drawer__item:hover .anx-drawer__item-arrow {
    color: #98a2b3;
}
.anx-drawer__item-end {
    margin-inline-start: auto;
    flex-shrink: 0;
}

/* ── Separator ── */
.anx-drawer__sep {
    height: 1px;
    background: #f0f2f5;
    margin: 6px 0;
}

/* ── Section (Language) ── */
.anx-drawer__section {
    margin: 0;
}
.anx-drawer__lang-list {
    padding: 4px 0 4px 48px;
}
[dir="rtl"] .anx-drawer__lang-list {
    padding: 4px 48px 4px 0;
}
.anx-drawer__lang {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: #344054;
    text-decoration: none;
    transition: background 0.15s;
}
.anx-drawer__lang:hover {
    background: #f5f7fa;
    color: #344054;
    text-decoration: none;
}
.anx-drawer__lang--active {
    background: rgba(var(--anx-color-primary-rgb, 13, 148, 136), 0.06);
    color: var(--theme-color, #0d9488);
    font-weight: 600;
}
.anx-drawer__lang-flag {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
}
.anx-drawer__lang-name {
    flex: 1;
}
.anx-drawer__lang-check {
    color: var(--theme-color, #0d9488);
    flex-shrink: 0;
}

/* ── Sign Out ── */
.anx-drawer__signout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: #fef3f2;
    color: #d92d20;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0;
    transition: background 0.15s;
}
.anx-drawer__signout:hover {
    background: #fee4e2;
    color: #d92d20;
    text-decoration: none;
}

/* ── Notification items (injected via AJAX) ── */
.anx-drawer .notification-list .d-flex.flex-stack {
    padding: 10px 0;
    border-bottom: 1px solid #f5f7fa;
}
.anx-drawer .notification-list .d-flex.flex-stack:last-child {
    border-bottom: none;
}
.anx-drawer .not-found-notification {
    min-width: auto !important;
    padding: 40px 0;
}

        .tbody-report {
            background-color: rgb(234, 234, 234) !important;
        }

        tr:nth-child(even) {
            background-color: #F7F7F7;
        }

        .table.table-beno tr:nth-child(even) {
            background-color: #ffffff;
        }

        @media print {
            tr:nth-child(odd) {
                background-color: transparent;
            }

            tr:nth-child(even) {
                background-color: transparent;
            }
        }

        .custom-table-hover :not(thead) tr:not(.group):hover {
            cursor: pointer;
            background-color: var(--theme-color-light);
            border-color: var(--theme-color-lighten);
        }

        .s2-to-tree li.select2-results__option.non-leaf .expand-collapse:before {
            right: auto !important;
            left: 0.25em !important;
        }

        .stepper.stepper-pills .stepper-item.current .stepper-icon {
            transition: color .2s ease, background-color .2s ease;
            background-color: var(--theme-color);
        }

        .stepper.stepper-pills .stepper-item .stepper-icon .stepper-number {
            font-weight: 600;
            color: var(--theme-color) !important;
            font-size: 1.25rem;
        }

        .stepper.stepper-pills .stepper-item.completed .stepper-icon .stepper-check {
            color: var(--theme-color) !important;
            display: inline-block;
        }

        .stepper.stepper-pills .stepper-item.current:last-child .stepper-icon .stepper-check {
            color: var(--theme-color) !important;
            display: inline-block;
        }

        .daterangepicker .calendar-table thead tr:nth-child(2) {
            display: none !important;
        }

        .selected-plan {
            background-color: #DEF2EC !important;
            border-radius: 5px;
            padding: 10px;
        }

        /* Final shared light form-control owner
           Consolidated — includes softened visual tuning (hardcoded hex values). */
        body input.form-control:not(.ben-search-header),
        body input.form-control.form-control-solid:not(.ben-search-header),
        body textarea.form-control,
        body textarea.form-control.form-control-solid,
        body select.form-select,
        body select.form-select.form-select-solid,
        body select.form-control {
            background-color: #ffffff !important;
            border: 1px solid var(--anx-color-border) !important;
            color: var(--anx-color-text) !important;
            box-shadow: none !important;
            border-radius: var(--anx-radius-lg) !important;
        }

        body input.form-control:not(.ben-search-header)::placeholder,
        body input.form-control.form-control-solid:not(.ben-search-header)::placeholder,
        body textarea.form-control::placeholder,
        body textarea.form-control.form-control-solid::placeholder {
            color: var(--anx-color-text-faint) !important;
        }

        body input.form-control:not(.ben-search-header):hover,
        body input.form-control.form-control-solid:not(.ben-search-header):hover,
        body textarea.form-control:hover,
        body textarea.form-control.form-control-solid:hover,
        body select.form-select:hover,
        body select.form-select.form-select-solid:hover,
        body select.form-control:hover {
            border-color: var(--anx-color-border-strong) !important;
        }

        body .dropdown.show > input.form-control.form-control-solid:not(.ben-search-header),
        body .dropdown.show > select.form-select.form-select-solid,
        body input.form-control:not(.ben-search-header):focus,
        body input.form-control.form-control-solid:not(.ben-search-header):active,
        body input.form-control.form-control-solid:not(.ben-search-header).active,
        body input.form-control.form-control-solid:not(.ben-search-header):focus,
        body input.form-control.form-control-solid:not(.ben-search-header).focus,
        body textarea.form-control:focus,
        body textarea.form-control.form-control-solid:active,
        body textarea.form-control.form-control-solid.active,
        body textarea.form-control.form-control-solid:focus,
        body textarea.form-control.form-control-solid.focus,
        body select.form-select:focus,
        body select.form-select.form-select-solid:active,
        body select.form-select.form-select-solid.active,
        body select.form-select.form-select-solid:focus,
        body select.form-select.form-select-solid.focus,
        body select.form-control:focus {
            background-color: #ffffff !important;
            border-color: var(--anx-color-border-strong) !important;
            color: var(--anx-color-text) !important;
        }

        body input.form-control[type="datetime-local"],
        body input.form-control.form-control-solid[type="datetime-local"] {
            color-scheme: light;
        }

        body input.form-control[type="datetime-local"]::-webkit-datetime-edit,
        body input.form-control.form-control-solid[type="datetime-local"]::-webkit-datetime-edit {
            color: var(--anx-color-text);
            padding: 0;
        }

        body input.form-control[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
        body input.form-control.form-control-solid[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
            padding: 0;
        }

        body input.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator,
        body input.form-control.form-control-solid[type="datetime-local"]::-webkit-calendar-picker-indicator {
            opacity: 0.58;
            cursor: pointer;
            transition: opacity var(--anx-transition);
        }

        body input.form-control[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
        body input.form-control.form-control-solid[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
        body input.form-control[type="datetime-local"]:focus::-webkit-calendar-picker-indicator,
        body input.form-control.form-control-solid[type="datetime-local"]:focus::-webkit-calendar-picker-indicator {
            opacity: 0.82;
        }

        body input.form-control[type="file"],
        body input.form-control.form-control-solid[type="file"] {
            color: var(--anx-color-text-soft) !important;
        }

        body input.form-control[type="file"]::file-selector-button,
        body input.form-control.form-control-solid[type="file"]::file-selector-button {
            background-color: #fbfcfd !important;
            border-inline-end: 1px solid var(--anx-color-border) !important;
            color: var(--anx-color-text-soft) !important;
            font-weight: 500 !important;
            box-shadow: none !important;
        }

        body input.form-control[type="file"]:hover::file-selector-button,
        body input.form-control.form-control-solid[type="file"]:hover::file-selector-button {
            background-color: #f6f8fb !important;
            color: var(--anx-color-text-soft) !important;
        }

        body .input-group.input-group-solid > .input-group-text,
        body .input-group.input-group-solid > input.form-control,
        body .input-group.input-group-solid > input.form-control.form-control-solid,
        body .input-group.input-group-solid > textarea.form-control,
        body .input-group.input-group-solid > textarea.form-control.form-control-solid,
        body .input-group.input-group-solid > select.form-select,
        body .input-group.input-group-solid > select.form-select.form-select-solid,
        body .input-group.input-group-solid > select.form-control {
            background-color: var(--anx-color-surface) !important;
            border-color: var(--anx-color-border) !important;
            color: var(--anx-color-text) !important;
            box-shadow: none !important;
        }

        body input.form-control:disabled,
        body input.form-control[readonly],
        body input.form-control.form-control-solid:disabled,
        body input.form-control.form-control-solid[readonly],
        body textarea.form-control:disabled,
        body textarea.form-control[readonly],
        body textarea.form-control.form-control-solid:disabled,
        body textarea.form-control.form-control-solid[readonly],
        body select.form-select:disabled,
        body select.form-select.form-select-solid:disabled,
        body select.form-control:disabled,
        body input.form-control[type="file"]:disabled,
        body input.form-control[type="file"][readonly],
        body input.form-control.form-control-solid[type="file"]:disabled,
        body input.form-control.form-control-solid[type="file"][readonly] {
            background-color: var(--anx-color-surface-disabled) !important;
            border-color: var(--anx-color-border) !important;
            color: var(--anx-color-text-muted) !important;
            box-shadow: none !important;
        }

        body input.form-control.is-invalid,
        body .was-validated input.form-control:invalid,
        body textarea.form-control.is-invalid,
        body .was-validated textarea.form-control:invalid,
        body select.form-select.is-invalid,
        body .was-validated select.form-select:invalid,
        body select.form-control.is-invalid,
        body .was-validated select.form-control:invalid {
            border-color: var(--anx-color-danger) !important;
            box-shadow: 0 0 0 3px rgba(194, 65, 59, 0.1) !important;
        }

        .select2-container--default .select2-selection--single,
        .select2-container--default .select2-selection--multiple {
            border-color: var(--anx-color-border) !important;
            background-color: #ffffff !important;
            border-radius: var(--anx-radius-lg) !important;
            box-shadow: none !important;
            transition: border-color var(--anx-transition), box-shadow var(--anx-transition), background-color var(--anx-transition);
        }

        .select2-container--default.select2-container--focus .select2-selection--single,
        .select2-container--default.select2-container--focus .select2-selection--multiple,
        .select2-container--default.select2-container--open .select2-selection--single,
        .select2-container--default.select2-container--open .select2-selection--multiple {
            border-color: var(--anx-color-border-strong) !important;
            background-color: #ffffff !important;
        }

        .select2-container--default .select2-search__field {
            border-color: var(--anx-color-border) !important;
            background-color: #ffffff !important;
            border-radius: var(--anx-radius-md) !important;
            color: var(--anx-color-text) !important;
            box-shadow: none !important;
        }

        .select2-container--default .select2-selection__rendered {
            color: var(--anx-color-text) !important;
        }

        .select2-container--default .select2-selection__placeholder {
            color: var(--anx-color-text-faint) !important;
        }

        /* =========================================
           UTILITY BUTTON COMPONENTS
           Unique button patterns not covered by
           the C1/C5 token system:
           – anx-btn-inline  (compact text-link)
           – anx-btn-line-add (dashed repeater add)
           – anx-btn-add-new  (select2 add-new)
        ========================================= */

        /* --- Shared foundation for utility buttons --- */
        .anx-btn-line-add,
        .anx-btn-add-new {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            height: 36px;
            padding: 0 16px;
            font-size: 13px;
            font-weight: 500;
            line-height: 1;
            border-radius: 5px;
            border: 1px solid transparent;
            cursor: pointer;
            text-decoration: none;
            white-space: nowrap;
            transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
            outline: none;
            user-select: none;
        }

        .anx-btn-line-add:focus,
        .anx-btn-add-new:focus {
            outline: none;
        }

        /* --- .anx-btn-line-add — Add Line / Add Item / Add Expense / Add New Row --- */
        /* The ONE shared pattern for all repeater/line-item add actions.           */
        .anx-btn-line-add {
            height: 32px;
            padding: 0 12px;
            border-radius: 5px;
            background-color: transparent;
            border: 1px dashed #c8d6e5;
            color: #5a7a9a;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.01em;
        }
        .anx-btn-line-add:hover {
            background-color: #f0f6ff;
            border-color: var(--theme-color);
            color: var(--theme-color);
        }
        .anx-btn-line-add:active {
            background-color: #ffffff;
            border-color: var(--theme-color);
            color: var(--theme-color);
        }
        /* --- .anx-btn-add-new — Add New entity inside select2 dropdowns / pickers --- */
        /* The ONE shared pattern for all select2 "+ Add New" inline actions.            */
        .anx-btn-add-new {
            width: 100%;
            height: 40px;
            padding: 0 12px;
            border-radius: 0;
            background-color: var(--anx-color-surface-soft, #f8fafc);
            border: none;
            border-bottom: 1px solid var(--anx-color-border, #dfe6ee);
            color: var(--theme-color, var(--anx-color-primary));
            font-size: 13px;
            font-weight: 500;
            justify-content: flex-start;
            gap: 6px;
        }
        .anx-btn-add-new:hover {
            background-color: rgba(15, 118, 110, 0.07);
            color: var(--anx-color-primary-dark, var(--theme-color));
            text-decoration: none;
        }
        .anx-btn-add-new:active {
            background-color: rgba(15, 118, 110, 0.12);
            color: var(--anx-color-primary-dark, var(--theme-color));
        }

        /* ============================================================
         * ANEVEX SELECT2 SEARCHABLE DROPDOWN SYSTEM
         * Unified visual language for all searchable dropdowns
         * with "+ Add New" support. Covers both Select2 themes:
         *   • select2-container--bootstrap5  (form_maker, most modals)
         *   • select2-container--default     (products, POS, hr, payroll)
         * Spec: container-radius 10px | search-height 36px |
         *       option-height 40px  | h-padding 12px
         * ============================================================ */

        /* --- Dropdown panel --- */
        .select2-container--bootstrap5 .select2-dropdown,
        .select2-container--default .select2-dropdown {
            border-radius: 5px !important;
            border: 1px solid var(--anx-color-border, #dfe6ee) !important;
            box-shadow: 0 8px 24px rgba(16, 24, 40, 0.10) !important;
            overflow: hidden;
        }

        /* --- Search area padding --- */
        .select2-container--bootstrap5 .select2-dropdown .select2-search,
        .select2-container--default .select2-search--dropdown {
            padding: 8px 8px 4px !important;
        }

        /* --- Search input --- */
        .select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field,
        .select2-container--default .select2-search--dropdown .select2-search__field {
            height: 36px !important;
            padding: 0 12px !important;
            border-radius: var(--anx-radius-md) !important;
            border: 1px solid var(--anx-color-border, #dfe6ee) !important;
            background-color: var(--anx-color-surface, #ffffff) !important;
            color: var(--anx-color-text, #1a2332) !important;
            font-size: 13px !important;
            box-shadow: none !important;
            outline: none;
        }
        .select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field:focus,
        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            border-color: var(--anx-color-primary, #0f766e) !important;
        }

        /* --- Results list --- */
        .select2-container--bootstrap5 .select2-dropdown .select2-results__options,
        .select2-container--default .select2-results__options {
            padding: 4px 0 !important;
            max-height: 260px;
        }

        /* --- Individual option rows --- */
        .select2-container--bootstrap5 .select2-dropdown .select2-results__option,
        .select2-container--default .select2-results__option {
            min-height: 40px !important;
            padding: 0 12px !important;
            display: flex !important;
            align-items: center !important;
            font-size: 13px !important;
            line-height: 1.4;
            cursor: pointer;
        }

        /* --- Hover state --- */
        .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted:not(.select2-results__option--selected),
        .select2-container--default .select2-results__option--highlighted[aria-selected]:not([aria-selected="true"]),
        .select2-container--default .select2-results__option--highlighted[data-selected]:not([data-selected="true"]) {
            background-color: rgba(15, 118, 110, 0.08) !important;
            color: var(--anx-color-primary-dark, #0b5d57) !important;
        }

        /* --- Selected state --- */
        .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected,
        .select2-container--default .select2-results__option[aria-selected="true"],
        .select2-container--default .select2-results__option[data-selected="true"] {
            background-color: var(--anx-color-primary, #0f766e) !important;
            color: #ffffff !important;
        }

        /* ========================================
         * Shared UI Utilities
         * Migrated from style.custom-copy.css
         * ======================================== */

        ::-webkit-scrollbar {
            width: 5px !important;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #d9d9d9 !important;
            color: blanchedalmond !important;
        }

        ::-webkit-scrollbar-track {
            background-color: #ffffff !important;
        }

        .alert {
            border-radius: 0 !important;
        }

        /* ========================================
         * Migrated Utility Overrides
         * From style.custom-copy.css
         * ======================================== */

        svg.bi.bi-exclamation-triangle-fill.flex-shrink-0.me-2 {
            margin-right: 0 !important;
        }

        .w-125px {
            width: 125px;
        }

        .w-120px {
            width: 120px;
        }

        .w-110px {
            width: 110px;
        }

        .animation-blink {
            animation: none;
        }

        i.fa.fa-cogs {
            color: var(--theme-color);
        }

        div:is(.bg-green-daken) {
            margin-bottom: -50px;
        }

        /* ========================================
         * Migrated Cards & Accordion
         * From style.custom-copy.css
         * ======================================== */

        .accordion-item {
            border-radius: 0 !important;
        }

        .accordion-button:not(.collapsed) {
            color: #204185;
        }

        .accordion.accordion-icon-toggle .accordion-icon i,
        .accordion.accordion-icon-toggle .accordion-icon .svg-icon {
            color: var(--theme-color);
        }

        /* ========================================
         * Migrated Buttons & Actions
         * From style.custom-copy.css
         * ======================================== */

        .swal2-styled.swal2-confirm {
            background-color: var(--theme-color, #36C49D) !important;
            border-color: var(--theme-color, #36C49D) !important;
            color: #ffffff;
            transition: all 0.2s ease;
        }

        .swal2-styled.swal2-confirm:hover,
        .swal2-styled.swal2-confirm:focus {
            background-color: var(--theme-color-dark, #2DAF85) !important;
            border-color: var(--theme-color-dark, #2DAF85) !important;
        }

        div[data-kt-docs-table-toolbar="base"] button:not(button[data-kt-menu-placement="bottom-end"]) {
            padding: calc(0.55rem + 1px) calc(1.5rem + 1px) !important;
            font-size: var(--anx-font-button);
            font-weight: var(--anx-font-button-weight);
        }

        .accordion-item button:not(button[data-kt-menu-placement="bottom-end"]) {
            padding: calc(0.55rem + 1px) calc(1.5rem + 1px) !important;
        }

        .actions>button:first-child {
            background-color: #343446;
            color: #ffffff;
        }

        .actions .dt-dark a:first-child {
            background-color: #343446 !important;
            color: #ffffff;
        }

        .actions button#PRINT {
            padding: calc(0.25rem + 5px) calc(0.25rem + 5px) !important;
        }

        .actions>a:last-child {
            background-color: #F1416C !important;
            color: #ffffff !important;
        }

        /* Datatable card search input */
        .card-header input.ben-search,
        .anx-card-header input.ben-search,
        input[data-kt-docs-table-filter="search"] {
            font-size: var(--anx-font-base);
            min-height: 40px;
        }

        .card-header input.ben-search::placeholder,
        .anx-card-header input.ben-search::placeholder,
        input[data-kt-docs-table-filter="search"]::placeholder {
            font-size: var(--anx-font-base);
        }

        /* Global search input (PrimeVue) */
        input.p-inputtext.p-component.global-search-input {
            font-size: var(--anx-font-base) !important;
            min-height: 40px;
        }

        input.p-inputtext.p-component.global-search-input::placeholder {
            font-size: var(--anx-font-base) !important;
        }

        /* Datatable header primary button */
        button.btn.ADD.p-button.p-component.anx-btn.anx-btn-primary,
        div[data-kt-docs-table-toolbar] .p-button.anx-btn,
        div[data-kt-docs-table-toolbar] .btn.ADD.p-button.p-component {
            font-size: var(--anx-font-button) !important;
            font-weight: var(--anx-font-button-weight) !important;
            line-height: 1.2;
        }

        /* Datatable header icon buttons */
        div[data-kt-docs-table-toolbar] .p-button.p-component.p-button-outlined.p-button-icon-only,
        div[data-kt-docs-table-toolbar] .SETTINGS_BUTTON,
        div[data-kt-docs-table-toolbar] .filter_drawer_toggle {
            font-size: var(--anx-font-button) !important;
            font-weight: var(--anx-font-button-weight) !important;
        }

        /* Detail page action buttons */
        .show-toolbar .actions .btn.custom-size,
        .show-toolbar .actions .btn.btn-sm.custom-size,
        .show-toolbar .actions .btn.btn-sm.border.border-secondary.custom-size {
            font-size: var(--anx-font-button) !important;
            font-weight: var(--anx-font-button-weight) !important;
            line-height: 1.2;
        }

        /* ========================================
         * Migrated Datepicker & Flatpickr
         * From style.custom-copy.css
         * ======================================== */

        .flatpickr-day.endRange,
        .flatpickr-day.endRange.inRange,
        .flatpickr-day.endRange.nextMonthDay,
        .flatpickr-day.endRange.prevMonthDay,
        .flatpickr-day.endRange:focus,
        .flatpickr-day.endRange:hover,
        .flatpickr-day.selected,
        .flatpickr-day.selected.inRange,
        .flatpickr-day.selected.nextMonthDay,
        .flatpickr-day.selected.prevMonthDay,
        .flatpickr-day.selected:focus,
        .flatpickr-day.selected:hover,
        .flatpickr-day.startRange,
        .flatpickr-day.startRange.inRange,
        .flatpickr-day.startRange.nextMonthDay,
        .flatpickr-day.startRange.prevMonthDay,
        .flatpickr-day.startRange:focus,
        .flatpickr-day.startRange:hover {
            background-color: var(--theme-color) !important;
            color: #092f46 !important;
        }

        .flatpickr-day.inRange,
        .flatpickr-day.nextMonthDay.inRange,
        .flatpickr-day.nextMonthDay.today.inRange,
        .flatpickr-day.nextMonthDay:focus,
        .flatpickr-day.nextMonthDay:hover,
        .flatpickr-day.prevMonthDay.inRange,
        .flatpickr-day.prevMonthDay.today.inRange,
        .flatpickr-day.prevMonthDay:focus,
        .flatpickr-day.prevMonthDay:hover,
        .flatpickr-day.today.inRange,
        .flatpickr-day:focus,
        .flatpickr-day:hover {
            background-color: var(--theme-color) !important;
            color: #FFF !important;
        }

        .daterangepicker .ranges li.active {
            color: var(--theme-color) !important;
            background-color: #F1FAFF !important;
        }

        .daterangepicker .ranges li:hover {
            color: var(--theme-color) !important;
        }

        .daterangepicker .drp-calendar td.active {
            background-color: var(--theme-color) !important;
        }

        .daterangepicker .drp-calendar td.in-range.available:not(.active):not(.off):not(.today) {
            color: var(--theme-color) !important;
        }

        .daterangepicker .drp-calendar td.today,
        .daterangepicker .drp-calendar td.today.active {
            color: var(--theme-color) !important;
        }

        .daterangepicker .drp-calendar td.available:hover,
        .daterangepicker .drp-calendar th.available:hover {
            color: var(--theme-color) !important;
        }

        .daterangepicker td.active,
        .daterangepicker td.active:hover {
            background-color: var(--theme-color) !important;
            border-color: transparent;
            color: #fff;
        }

        /* =========================================
           ANEVEX TYPOGRAPHY COVERAGE ENFORCER
           Targeted overrides for selectors that
           escape the baseline typography rules.
        ========================================= */

        /* 1) Nav links — breakpoint rules set 1rem, enforce 14px */
        a.nav-link {
            font-size: var(--anx-font-md) !important;
        }

        /* 2) Submenu item title — 0.95rem set upstream, enforce 14px */
        .menu-sub .menu-item .menu-link .menu-title {
            font-size: var(--anx-font-md);
            font-weight: 400;
        }

        /* 3) Submenu hover & active title — 600 weight is too heavy for nav */
        .menu-sub .menu-item .menu-link:hover .menu-title,
        .menu-sub .menu-item.here > .menu-link .menu-title {
            font-weight: 500;
        }

        /* 6) Select2 rendered text — anx-lite sets 1rem; enforce 14px */
        .select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered,
        .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered,
        .select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field,
        textarea.select2-search__field {
            font-size: var(--anx-font-md) !important;
        }

        /* =========================================
           ANEVEX TABLES / DATATABLES
           Migrated from style.custom-copy.css
        ========================================= */

        tr.text-start.text-gray-900.fw-bolder.fs-5.gs-0 {
            background-color: #EBEBEC;
            color: #3b3b3b !important;
            border-color: #e6e6e6;
            border: 1px solid #f2f2f2;
        }

        tr.text-start.text-gray-900.fw-bolder.fs-6.text-uppercase.gs-0 {
            background-color: #f5f8fa;
            color: #3b3b3b !important;
            border-color: #e6e6e6;
            border: 1px solid #e6e6e6;
            text-transform: none!important;
        }

        .table.table-row-dashed tr {
            border-width: 1px !important;
            border-style: solid !important;
            border-color: #f2f2f2 !important;
        }

        .table-bordered>thead>tr>th,
        .table-bordered>tbody>tr>th,
        .table-bordered>tfoot>tr>th,
        .table-bordered>thead>tr>td,
        .table-bordered>tbody>tr>td,
        .table-bordered>tfoot>tr>td {
            border: 1px solid #e6e6e6 !important;
        }

        table.dataTable {
            border: 1px solid #e6e6e6 !important;
        }

        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
        }

        .table.gy-2 td, .table.gy-2 th {
            padding-top: var(--anx-space-2);
            padding-bottom: var(--anx-space-2);
        }

        tr.odd {
            border-left: 1px solid #f8f8f8 !important;
            border-collapse: separate !important;
            background-color: #FCFCFC;
        }

        tr.even {
            border-left: 1px solid #f8f8f8 !important;
            border-collapse: separate !important;
        }

        .table td,
        .table th,
        .table tr {
            color: var(--anx-color-table-text) !important;
        }

        .table.gy-5 td,
        .table.gy-5 th {
            padding-top: var(--anx-space-3);
            padding-bottom: var(--anx-space-3);
        }

        .table tr:first-child,
        .table th:first-child,
        .table td:first-child {
            padding-left: var(--anx-table-cell-indent);
        }

        td.dtr-control:first-child {
            border-left: 0 !important;
        }

        .table-striped>tbody>tr:nth-of-type(odd)>* {
            --bs-table-accent-bg: #fff;
        }

        .table-beno>tbody>tr:nth-of-type(odd)>* {
            --bs-table-accent-bg: #ebebec;
        }

        .table-beno>tbody {
            border: 1px solid #ededed;
        }

        .table-beno>:not(caption)>*>* {
            padding: 0.8rem 0.75rem !important;
        }

        .table tr:last-child,
        .table th:last-child,
        .table td:last-child {
            vertical-align: middle;
        }

        thead.t-b-invoices {
            background-color: #ebebec;
            border: 1px solid #e6e6e6;
        }

        tbody.fw-bold.text-black {
            border-width: thin;
            border-color: #e9edf3;
            border-style: solid;
        }

        th.min-w-10px.text-end {
            text-align: center !important;
        }

        th.min-w-100px.text-start {
            padding-left: 10px !important;
        }

        /* th font-weight hacks removed — C12.7 owns header weight globally */

        .table-greey {
            background-color: #f5f8fa;
        }

        thead.h-table-c {
            --bs-table-bg: #f1f5f9;
            border: 1px solid #e2e8ef;
        }

        .table-d-bg,
        .table-t-bg {
            border-bottom: 1px solid #e7ecf2 !important;
            border-top: 1px solid #e7ecf2 !important;
        }

        tr.table-t-bg {
            border-bottom: 1px solid rgb(231, 236, 242)!important;
        }

        tr#item-z {
            background-color: #f1f5f9;
        }

        .table>tbody.table-group-divider {
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
        }

        .table>:not(:first-child) {
            border-color: #e6e6e6 !important;
            border-width: 1px !important;
            border-style: solid !important;
        }

        tbody,
        td,
        tfoot,
        th,
        thead,
        tr {
            border-color: inherit;
            border-style: solid;
            text-wrap: nowrap;
        }

        /* --- DataTable Plugin Overrides --- */

        td.dataTables_empty {
            text-align: center;
        }

        div#kt_datatable_info {
            width: auto !important;
        }

        table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
        table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
            background-color: var(--theme-color) !important;
        }

        table.dataTable > thead .sorting:after, table.dataTable > thead .sorting_asc:after, table.dataTable > thead .sorting_desc:after, table.dataTable > thead .sorting_asc_disabled:after, table.dataTable > thead .sorting_desc_disabled:after {
            content: ""!important;
        }

        table.dataTable > thead .sorting:before, table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_desc:before, table.dataTable > thead .sorting_asc_disabled:before, table.dataTable > thead .sorting_desc_disabled:before {
            content: "" !important;
        }

        /* =========================================
           ANEVEX LAYOUT & RESPONSIVE OVERRIDES
           Migrated from style.custom-copy.css (Pass 2)
           Values unchanged — exact copy.
        ========================================= */

        .footer {
            background-color: #ffffff;
            padding-left: 70px;
        }

        #view-area {
            overflow: hidden;
        }

        .svg-icon.svg-icon-1 svg {
            height: 2.75rem !important;
            width: 2.75rem !important;
        }

        @media (max-width: 992px) {
            .svg-icon.svg-icon-1 svg {
                height: 1.75rem !important;
                width: 1.75rem !important;
            }
        }

        @media (min-width: 992px) {
            .header-fixed.toolbar-fixed .wrapper {
                background-color: #f4f4f4;
            }

            .py-lg-15 {
                padding-top: 3.75rem !important;
                padding-bottom: 3.75rem !important;
            }
        }

        @media (max-width: 767.98px) {
            .w-250px {
                width: 150px !important;
            }
            span.svg-icon.svg-icon-1.position-absolute.ms-6 {
                margin-left: 0.5rem !important;
            }
            .table tr:first-child {
                padding-left: 25px;
                font-weight: 700 !important;
            }
            .footer {
                padding-left: 0px;
            }
        }

        @media (max-width: 768px) {
            .respo-mobile {
                display: flex !important;
                flex-direction: column;
            }
            .mobile-content {
                width: calc(100vw - 24px);
                margin: 12px !important;
            }
            .flex-60-mobile {
                flex-basis: auto;
            }
            .flex-40 {
                flex-grow: initial;
                flex-basis: auto;
            }

            /* ── Split View: detail panel as full-screen overlay on mobile ── */
            #view-area.flex-60 {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1050;
                background: #fff;
                overflow-y: auto;
                flex-basis: auto;
                padding: 0 !important;
                margin: 0;
                transform: translateX(100%);
                transition: transform 0.25s ease;
            }
            #view-area.flex-60:not(.view-collapse) {
                transform: translateX(0);
            }
            [dir="rtl"] #view-area.flex-60 {
                transform: translateX(-100%);
            }
            [dir="rtl"] #view-area.flex-60:not(.view-collapse) {
                transform: translateX(0);
            }
            #view-area .view-content {
                width: 100% !important;
                min-height: 100vh;
                border: none !important;
                border-radius: 0 !important;
            }
        }

        .aside-menu .menu .menu-item .menu-link {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .card-body .menu-item>.active {
            background-color: #f4f4f4;
            color: #000;
            font-weight: 600;
        }

        a.d-flex.py-3:hover {
            background-color: #f8faf8;
            color: var(--theme-color);
        }

        /* ========================================
         * ANEVEX SPLIT-LAYOUT VIEW-CONTENT WIDTH
         * Migrated from style.custom-copy.css.
         * Applies to settings and management screens
         * that show a list panel + detail panel side-by-side.
         * The 57.2vw accounts for the 60px fixed sidebar +
         * remaining space for the list panel on the left.
         * @media screen prevents this from leaking into print.
         * ======================================== */

        @media screen {
            .view-content {
                width: calc(57.2vw);
            }
        }

        @media (min-width: 992px) and (max-width: 1280px) {
            .view-content {
                width: calc(56.2vw);
            }
        }

        /* ========================================
         * ANEVEX SIDEBAR HOVER-SCROLL OVERRIDES
         * Migrated from style.custom-copy.css.
         * Purpose: remove the Metronic 0.4rem border
         * placeholder that the theme uses as a scrollbar
         * width offset, and use auto scroll instead of
         * the deprecated overlay value (removed Chrome 112).
         * The 992–1280px block also constrains the collapsed
         * sidebar scroll area to its actual pixel dimensions.
         * ======================================== */

        @media (min-width: 992px) and (max-width: 1280px) {
            .hover-scroll-y:hover {
                height: 440px;
                width: 60px;
            }
        }

        @media (min-width: 992px) {
            .hover-scroll-y {
                border-right: 0;
            }
            .hover-scroll-y:hover {
                overflow-y: auto;
            }
        }

/* ========================================
 * ANEVEX FILE INPUT — UNIFIED SYSTEM-WIDE STYLE
 * Targets EVERY <input type="file"> regardless of class, so
 * any attachment field across the system gets the same polished
 * look without each blade needing to opt in via .form-control.
 * Uses logical properties so it mirrors correctly in RTL.
 * ======================================== */
input[type="file"] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 0;
    line-height: normal;
    color: var(--anx-color-text, #1e2129);
    background-color: var(--anx-color-surface, #ffffff);
    border: 1px solid var(--anx-color-border, #e4e6ef);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
input[type="file"]:hover {
    border-color: #cbd5e1;
}
input[type="file"]:focus,
input[type="file"]:focus-visible {
    outline: none;
    border-color: var(--anx-color-primary, #22c55e);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
input[type="file"]:disabled {
    background-color: #f5f8fa;
    opacity: 0.6;
    cursor: not-allowed;
}
input[type="file"]::file-selector-button {
    height: 100%;
    min-height: 42px;
    padding: 0 18px;
    margin-inline-end: 12px;
    margin-inline-start: 0;
    border: none;
    border-inline-end: 1px solid var(--anx-color-border, #e4e6ef);
    background-color: #f1f5f9;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
}
input[type="file"]::file-selector-button:hover {
    background-color: #e2e8f0;
    color: #1e293b;
}
input[type="file"]:disabled::file-selector-button {
    cursor: not-allowed;
}
/* Small variant — match form-control-sm scaling when explicitly requested */
input[type="file"].form-control-sm {
    min-height: 36px;
    font-size: 12px;
}
input[type="file"].form-control-sm::file-selector-button {
    min-height: 36px;
    padding: 0 14px;
}

/* ============================================================
 * ANEVEX DASHBOARD SYSTEM
 * Centralizes all dashboard & quick-links visual styles.
 * Migrated from inline <style> blocks in:
 *   - tenant/dashboard.blade.php
 *   - tenant/quick-links.blade.php
 * Normalized to the shared ANEVEX style language.
 * ============================================================ */

/* --- Dashboard drag/drop states --- */
.dragging {
    transform: scale(.8);
}
.draggable-placeholder {
    border: 2px dashed #c8d6e5;
    background-color: #f0f6ff;
    height: 50px;
}
[v-cloak] {
    display: none;
}

/* --- Dashboard widget/card states --- */
.cardForCustom {
    border: 2px solid var(--theme-color) !important;
}
.card-bg {
    background-color: transparent !important;
}

@media (max-width: 767.98px) {
    /* Dashboard action bar: full-width stacked */
    .anx-dash-actions {
        flex-direction: column;
        align-items: stretch !important;
    }
    .anx-dash-actions > .anx-btn {
        width: 100%;
        justify-content: center;
    }
    .anx-dash-filters {
        flex-direction: column;
        margin-inline-start: 0;
        width: 100%;
        border-inline-start: none;
        padding-inline-start: 0;
        border-top: 1px solid #e4e6ef;
        padding-top: 8px;
    }
    .anx-dash-field--date,
    .anx-dash-field--branch {
        width: 100%;
    }
    /* Dashboard tabs: horizontal scroll */
    .nav.nav-tabs.nav-line-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav.nav-tabs.nav-line-tabs .nav-item {
        flex-shrink: 0;
    }
}

/* --- Dashboard tab navigation --- */
/* .btn-tabs: the per-module tab in the main dashboard tab strip         */
.btn-tabs {
    font-size: 13px;
    font-weight: 500;
    color: #5e6278;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 18px;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.btn-tabs:hover,
.btn-tabs:focus {
    color: var(--theme-color);
    border-bottom-color: var(--theme-color);
    background: transparent;
    outline: none;
}
.btn-tabs.active {
    color: var(--theme-color);
    border-bottom-color: var(--theme-color);
    font-weight: 600;
}

/* --- Dashboard toolbar date-range input (styled as action button) --- */
#date_range {
    height: 38px;
    font-size: 13px;
    font-weight: 500;
    background-color: #f5f8fa;
    border: 1px solid #e4e6ef;
    border-radius: 5px;
    color: #3d4a5c;
    cursor: pointer;
    text-align: start;
    padding: 0 12px;
}
#date_range:hover {
    background-color: #eef0f8;
    border-color: #c9d0d9;
}

/* --- Dashboard Action Bar — layout & unified heights --- */
.anx-dash-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.anx-dash-actions .anx-btn {
    min-height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 38px;
}

.anx-dash-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    padding-inline-start: 8px;
    border-inline-start: 1px solid #e4e6ef;
}

.anx-dash-field {
    position: relative;
    flex: 0 0 auto;
}

.anx-dash-field--date {
    display: flex;
    align-items: center;
    width: 220px;
}

.anx-dash-field--branch {
    width: 280px;
}

.anx-dash-field__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}
[dir="rtl"] .anx-dash-field__icon {
    left: auto;
    right: 10px;
}

.anx-dash-field__input#date_range {
    width: 100%;
    padding-inline-start: 32px;
}

.anx-dash-field--branch .select2-container {
    width: 100% !important;
}

.anx-dash-field--branch .select2-container .select2-selection--multiple,
.anx-dash-field--branch .select2-container .select2-selection--single {
    min-height: 38px !important;
    border: 1px solid #e4e6ef;
    border-radius: 5px;
    background-color: #f5f8fa;
    display: flex;
    align-items: center;
    padding: 2px 8px;
}

.anx-dash-field--branch .select2-container .select2-selection--multiple:hover,
.anx-dash-field--branch .select2-container .select2-selection--single:hover {
    background-color: #eef0f8;
    border-color: #c9d0d9;
}

/* ============================================================
 * ANEVEX QUICK LINKS SYSTEM
 * Migrated from inline <style> blocks in quick-links.blade.php
 * ============================================================ */

/* --- Settings (cog) button in quick-links header --- */
.settings-dropdown .dropdown-toggle::after {
    display: none;
}

/* --- Quick link card tile --- */
.quick-link-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e4e6ef;
    border-radius: 5px;
    background: #fff;
    height: 100%;
    min-height: 100px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.quick-link-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--theme-color);
}
.quick-link-card:active {
    transform: translateY(0);
    box-shadow: none;
}
.quick-link-card .card-body {
    padding: 0.6rem !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}
.quick-link-card-disabled {
    background: rgba(225, 225, 225, 0.64) !important;
    opacity: 0.7;
    pointer-events: none;
    cursor: not-allowed;
}

/* --- Quick link tile text & icon --- */
.quick-link-title {
    font-size: 14px;
    margin-top: 0.25rem;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.3;
}
.quick-link-subtitle {
    font-size: 12px;
    color: #a1acbc;
    line-height: 1.2;
    margin-top: 0.1rem;
}
.quick-link-card:hover .quick-link-title {
    color: var(--theme-color);
}
.quick-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    margin-bottom: 0.15rem;
}
.quick-link-icon i {
    font-size: 1.5rem;
}

/* Icon color variations (all use theme color for system consistency) */
/* Migrated to Tailwind: text-[var(--theme-color)] */

/* --- Quick link remove (X) button on hover --- */
.quick-link-remove-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.quick-link-card:hover .quick-link-remove-btn {
    opacity: 1;
    pointer-events: auto;
}

/* --- Quick link "Add" button in the customize modal --- */
.add-quick-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid var(--theme-color);
    background-color: transparent;
    color: var(--theme-color);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.add-quick-link-btn:hover:not(:disabled) {
    background-color: var(--theme-color);
    color: #fff;
}
.add-quick-link-btn:disabled {
    opacity: 0.55;
    pointer-events: none;
    border-color: #c9d0d9;
    color: #9aa2ae;
}

/* --- Quick links sortable area & modal (migrated to Tailwind) --- */

/* --- Category section in quick-links customize modal --- */
.category-section {
    margin-bottom: 0.5rem;
    border: 1px solid #e4e6ef;
    border-radius: 5px;
    background: #fff;
}
.category-header {
    padding: 0.875rem 1rem;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.category-header:hover {
    background-color: #f5f8fa;
}
.category-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #3d4a5c;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.category-toggle {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
    color: #7a8699;
}
.category-toggle.collapsed {
    transform: rotate(-90deg);
}
.category-content {
    padding: 1rem 1.25rem 1.25rem;
}
.category-content.collapse:not(.show) {
    display: none;
}
/* category-icon migrated to Tailwind: me-2 text-base text-[var(--theme-color)] */

/* Vue transition for remove button fade */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.15s ease;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   REPORTS — Shared Layout
   Migrated from main-report.css. Single source of truth for all report UI.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Report Signatures ── */

.signature-position {
    width: 25%;
    text-align: center;
}

.signature-line {
    display: inline-block;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    padding-top: 25px;
    width: 150px;
    text-align: center;
    font-weight: 600;
}

/* ── Report Filters ── */

.filters-section {
    margin-bottom: 16px;
    padding: 10px 12px 4px;
    background: #fafafa;
    border-radius: 5px;
    border: 1px solid #e5e5e5;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 16px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
}

.filter-label {
    color: #555;
    font-weight: 500;
}

.filter-input,
.filter-select {
    border-radius: 5px;
    border: 1px solid #d0d0d0;
    padding: 6px 8px;
    font-size: 13px;
}

/* ── Report Summary Card ── */

.summary-card {
    margin: 14px 0 16px;
    padding: 10px 14px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    background: #fcfcfc;
    font-size: 13px;
}

.summary-item-label {
    color: #777;
    font-weight: 500;
    margin-left: 4px;
}

.summary-item-value {
    color: #333;
    font-weight: 600;
}

/* ── Report Table Wrapper ── */

.table-wrapper {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: visible;
    background: #fff;
    position: relative;
}

.search-row {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.search-input {
    flex: 0 0 260px;
    border-radius: 5px;
    border: 1px solid #d0d0d0;
    padding: 6px 8px;
    font-size: 12px;
}

.table-header {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-header span {
    white-space: nowrap;
}

.totals-row {
    font-weight: 700;
    background: rgb(234, 234, 234) !important;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

#allTables {
    width: 98.5%;
    margin: auto;
}

/* ── Report Column Controls ── */

.column-controls {
    margin-inline-start: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
}

[dir="ltr"] .column-controls {
    margin-left: auto;
    margin-right: 0;
}

[dir="rtl"] .column-controls {
    margin-right: auto;
    margin-left: 0;
}

.column-controls .dropdown-menu {
    z-index: 1050 !important;
    max-height: 400px;
    overflow-y: auto;
}

[dir="ltr"] .column-controls .dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

.hidden-col {
    display: none !important;
}

/* ── Report Action Buttons ── */

.report-action-btn {
    height: 32px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
    display: inline-flex;
    align-items: center;
}

/* ── Report Section Title Bar ── */

.section-title-bar {
    background: #e1f3ed;
    border-radius: 5px;
    border: 1px solid #cce4dc;
    padding: 8px 12px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 700;
    color: var(--theme-color);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   REPORTS — Accounting Drawers
   Expandable account rows, drawer panels, pills, details tables.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Drawer Content ── */

.details-content {
    background: #ffffff;
    padding: 10px 14px 12px;
}

.drawer-main {
    background-color: #ffffff !important;
}

.drawer {
    border-top: 1px solid #e0e0e0;
    background: #fcfcfc;
}

/* ── Drawer Header & Summary ── */

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fcfcfc !important;
    border-radius: 5px;
    border: 1px solid #efefef;
}

.drawer-header--compact {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
}

.drawer-header--compact .drawer-summary {
    margin: 0;
    flex: 1 1 auto;
}

.drawer-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-color);
    margin-bottom: 4px;
}

.drawer-meta {
    font-size: 12px;
    color: #4f6b62;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.drawer-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 12px;
    margin: 4px 0 10px;
}

/* ── Drawer Pills ── */

.drawer-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 5px;
    background: #fdfdfd;
    border: 1px solid #e0e0e0;
}

.drawer-pill-label {
    font-weight: 500;
}

.drawer-pill-value {
    font-weight: 600;
}

.drawer-pill.current-balance {
    background: var(--theme-color);
    border-color: var(--theme-color);
}

.drawer-pill.current-balance .drawer-pill-label,
.drawer-pill.current-balance .drawer-pill-value {
    color: #fff;
}

.drawer-pill:hover {
    background-color: #fdfdfd !important;
}

.drawer-pill.current-balance:hover {
    background-color: var(--theme-color) !important;
}

/* ── Drawer Details Table ── */

.details-table-wrapper {
    border: none;
    border-radius: 0;
    overflow: visible;
    background: #fff;
    margin-top: 6px;
    position: relative;
}

.details-table-wrapper:hover {
    background-color: #fff !important;
}

.details-header-bar {
    background: #f2f2f2;
    padding: 6px 10px;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
}

.details-header-bar:hover {
    background-color: #f2f2f2 !important;
}

.details-table-scroll {
    overflow-x: auto;
    overflow-y: visible;
}

.details-table-scroll {
    text-align: center;
    padding: 30px;
    color: #666;
    cursor: default !important;
}

.drawer-loading img {
    max-width: 40px;
    margin-bottom: 10px;
}

.drawer-loading:hover {
    background-color: transparent !important;
}

/* ── Expandable Account Rows ── */

.icon-cell {
    width: 20px;
    text-align: center;
    cursor: pointer;
}

.accordion-icon {
    display: inline-block;
    transition: transform 0.3s;
    font-size: 12px;
    color: #555;
}

.accordion-icon.open {
    transform: rotate(90deg);
}

.account-row {
    cursor: pointer;
    background: #ffffff !important;
}

.account-row:hover {
    background: rgb(238, 238, 238) !important;
}

.account-row.active {
    background: rgba(var(--theme-color-rgb), 0.10) !important;
    box-shadow: inset 3px 0 0 var(--theme-color);
}

.account-row.active td {
    font-weight: 600;
    color: #1a1a1a;
}

.table-striped > tbody > tr:nth-child(even) {
    background-color: #fbfafa;
}

/* ── Details Row (expand/collapse) ── */

.details-row {
    display: none;
    background: #ffffff !important;
}

.details-row.open {
    display: table-row;
    background: #ffffff !important;
}

.details-row.open:hover {
    background-color: #ffffff !important;
}

/* ── Opening Balance Row ── */

.table-striped>tbody>tr.opening-row,
.table-striped tbody tr.opening-row,
.table>tbody>tr.opening-row,
.table tbody tr.opening-row,
tbody tr.opening-row,
tr.opening-row {
    background-color: rgb(245 245 245) !important;
    background: rgb(245 245 245) !important;
    font-weight: 600;
}

.table-striped>tbody>tr.opening-row:hover,
.table-striped tbody tr.opening-row:hover,
.table>tbody>tr.opening-row:hover,
.table tbody tr.opening-row:hover,
tbody tr.opening-row:hover,
tr.opening-row:hover {
    background-color: rgb(245 245 245) !important;
    background: rgb(245 245 245) !important;
}

.table-striped>tbody>tr.opening-row>td,
.table-striped>tbody>tr.opening-row>th,
.opening-row td,
.opening-row th {
    background: rgb(245 245 245) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   REPORTS — Tax & P&L
   Type rows, grand totals, subtotals, VAT boxes.
   ═══════════════════════════════════════════════════════════════════════════════ */

.table .type-row th {
    font-weight: 700 !important;
    background: #e6f5f1 !important;
    color: var(--theme-color) !important;
}

.table .grand-total th {
    background: var(--theme-color) !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    border: none !important;
}

.table .subtotal {
    font-weight: 800 !important;
    color: var(--theme-color) !important;
}

.table .tax-box-header {
    background: #e1f3ed;
    border-bottom: 1px solid #cce4dc;
    padding: 8px 12px;
    font-weight: 700;
    color: var(--theme-color) !important;
    text-align: center;
}

.table .tax-box-header th {
    color: var(--theme-color) !important;
}

.table .total-amount td {
    color: var(--theme-color) !important;
}

.table .grand-total-tax th {
    background: var(--theme-color) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border: none !important;
}

.vat-net-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-color);
    margin-bottom: 6px;
}

.vat-net-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--theme-color);
}

.vat-net-box {
    border: 1px solid #cce4dc;
    background: #e1f3ed;
    text-align: center;
}

/* ============================= */
/* Settings Page Styles          */
/* ============================= */

/* Settings Card Styling */
.setting-card {
    margin-bottom: 0.75rem;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.setting-card .card-header {
    background: #ffffff;
    border-bottom: 1px solid #E4E6EF;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.setting-card .card-header.search-header {
    background: #F9F9F9;
    border-bottom: 2px solid var(--theme-color);
    padding: 0.5rem 1rem;
    display: none;
    transition: all 0.3s ease;
}

.setting-card .card-header.search-header.show {
    display: block;
}

.search-toggle-btn {
    cursor: pointer;
    color: var(--theme-color);
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.search-toggle-btn:hover {
    color: var(--bs-primary-dark);
    transform: scale(1.1);
}

.setting-title {
    color: #2c3e50;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.setting-title i {
    color: var(--theme-color);
    font-size: 1.1rem;
}

.setting-card .card-body {
    padding: 0.5rem;
}

.setting-card .card-body .nav.nav-pills.flex-column {
    padding-inline-start: 0;
    margin: 0;
}

/* Scrollbar for card body */
.setting-card .card-body::-webkit-scrollbar {
    width: 4px;
}

.setting-card .card-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.setting-card .card-body::-webkit-scrollbar-thumb {
    background: var(--theme-color);
    border-radius: 5px;
}

.setting-card .card-body::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary-dark);
}

/* Settings Link Styling */
.setting-link {
    color: #5E6278 !important;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.25rem;
    border-radius: 5px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--anx-font-md) !important;
    font-weight: 400 !important;
}

.setting-link .anx-icon {
    flex-shrink: 0;
}

.setting-link:hover {
    color: var(--theme-color) !important;
    background-color: #F3F6F9 !important;
}

.setting-link.active {
    color: #FFFFFF !important;
    background-color: var(--theme-color) !important;
    box-shadow: 0 2px 4px rgba(var(--theme-color-rgb), 0.3);
}

/* Settings Menu Scrollbar */
.menu-settings::-webkit-scrollbar {
    width: 5px;
}

.menu-settings::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.menu-settings::-webkit-scrollbar-thumb {
    background: var(--theme-color);
    border-radius: 5px;
}

.menu-settings::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary-dark);
}

/* --- Settings: Mobile Layout --- */
@media (max-width: 767.98px) {
    /* Settings sidebar: horizontal scrollable bar on mobile */
    #kt_content_container > .row:has(.setting-card) > .col-md-2 {
        max-height: none;
        overflow: visible;
    }
    .setting-card {
        margin-bottom: 0;
    }
    .setting-card .card-header {
        display: none;
    }
    .setting-card .card-body {
        padding: 0;
    }
    .setting-card .card-body .nav.nav-pills.flex-column {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        padding: 8px 4px;
        background: #fff;
        border-bottom: 1px solid #edf2f7;
    }
    .setting-link {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 8px 14px !important;
        font-size: 13px !important;
        border-radius: 20px;
    }
}

/* Search Component Styles */
.search-header-search {
    position: relative;
}

.search-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-menu-dropdown.show {
    display: block;
}

/* search-scroll-y, search-mh-200px, search-mh-lg-350px migrated to Tailwind */

.search-header {
    min-height: 0px !important;
}

/* ============================================================
 * ANEVEX RESPONSIVE SYSTEM — Phase 1 Foundation
 * Odoo 19-inspired responsive patterns for tablet and mobile.
 * Covers: Header, Toolbar, DataTables, Modals, Forms, Dashboard
 * Breakpoints:
 *   - Tablet:  768px – 991px
 *   - Mobile:  ≤ 767px
 *   - Small:   ≤ 575px
 * ============================================================ */

/* ──────────────────────────────────────────────────────────
   R1. HEADER — Custom Build (no Metronic .row/.col)
   ────────────────────────────────────────────────────────── */

/* ── Base layout ── */
.anx-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #edf2f7;
    height: 60px;
}
.aside-enabled.aside-fixed .anx-header {
    left: 60px;
    transition: left 0.3s ease;
}
.aside-enabled.aside-fixed[data-kt-aside-minimize=on] .anx-header {
    left: 60px;
}

.anx-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 16px;
    gap: 12px;
}

/* ── Left section: toggle + logo/company ── */
.anx-header__start {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.anx-header__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    color: #5e6a79;
    transition: background 0.15s, color 0.15s;
}
.anx-header__toggle:hover {
    background: #f4f6f9;
    color: var(--theme-color);
}

.anx-header__logo img,
.anx-header__logo svg {
    height: 28px;
    width: auto;
}

.anx-header__company {
    display: flex;
    align-items: center;
    gap: 10px;
}
.anx-header__company-logo {
    height: 30px;
    width: auto;
}
.anx-header__company-name {
    font-size: 15px;
    font-weight: 700;
    color: #162033;
    margin: 0;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ── Search area: inline on desktop, dropdown on mobile ── */
.anx-header__search {
    flex: 1;
    max-width: 580px;
    min-width: 0;
    display: flex;
    align-items: center;
}
.anx-header__search .d-flex.align-items-stretch {
    width: 100%;
    margin: 0 !important;
}
.anx-header__search #anx_search_wrapper {
    width: 100% !important;  /* Override Metronic w-lg-400px !important */
}
.anx-header__search #anx_search_form {
    display: block !important;
    width: 100%;
    margin: 0 !important;
}
.anx-header__search #anx_search_mobile_toggle {
    display: none !important;
}

/* ── Search input styling ── */
.anx-header__search .anx-search--header {
    border-radius: 10px !important;
    border: 1px solid #dde6ef !important;
    background: #f8fafc !important;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    font-size: 13.5px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.anx-header__search .anx-search--header:hover {
    border-color: #c5cfd9 !important;
    background: #fff !important;
}
.anx-header__search .anx-search--header:focus {
    border-color: var(--theme-color, #0d9488) !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1) !important;
    background: #fff !important;
    outline: none;
}

/* ── Search input wrapper (positioned context for icons) ── */
.anx-search-input-wrap {
    position: relative;
}

/* ── Search drawer topbar (hidden on desktop) ── */
.anx-header__search-topbar {
    display: none;
}

/* ── Right section: action buttons ── */
.anx-header__end {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.anx-header__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #dde6ef;
    border-radius: 8px;
    background: #fff;
    color: #5e6a79;
    cursor: pointer;
    position: relative;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    padding: 0;
}
.anx-header__action:hover {
    background: #f4f6f9;
    border-color: #c5cfd9;
    color: var(--theme-color);
}
.anx-header__action:active {
    transform: scale(0.96);
}

/* Notification badge */
.anx-header__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f1416c;
    border: 2px solid #fff;
    animation: anx-blink 1.5s infinite;
}
[dir="rtl"] .anx-header__badge {
    right: auto;
    left: -2px;
}

@keyframes anx-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Tablet & Mobile: search becomes full-screen drawer ── */
@media (max-width: 991.98px) {
    .anx-header {
        height: 52px;
        left: 0 !important;
    }
    .anx-header__inner {
        padding: 0 10px;
        gap: 8px;
    }

    /* ── Full-screen search drawer ── */
    .anx-header__search {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        max-width: none;
        background: #fff;
        padding: 0;
        display: none;
        flex-direction: column;
    }
    .anx-header__search.anx-open {
        display: flex;
        animation: anx-search-drawer-in 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }

    /* Topbar: back arrow + title */
    .anx-header__search-topbar {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        gap: 8px;
        border-bottom: none;
        flex-shrink: 0;
        background: #fff;
    }
    .anx-header__search-back {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: none;
        background: none;
        color: #5e6a79;
        cursor: pointer;
        border-radius: 8px;
        flex-shrink: 0;
        padding: 0;
        transition: background 0.15s, color 0.15s;
    }
    .anx-header__search-back:hover {
        background: #f4f6f9;
        color: #1d2939;
    }
    .anx-header__search-topbar-title {
        font-size: 16px;
        font-weight: 600;
        color: #1d2939;
    }

    /* Search form area (between topbar and results) */
    .anx-header__search > .d-flex.align-items-stretch {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        padding: 0 16px;
        margin: 0 !important;
    }
    .anx-header__search .anx-search--header {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        font-size: 15px !important;
        padding-inline-start: 3rem !important;
    }
    .anx-header__search .anx-search-input-wrap > svg:first-of-type {
        inset-inline-start: 0.9rem !important;
    }
    .anx-header__search #anx_search_wrapper {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        width: 100% !important;
    }
    .anx-header__search #anx_search_form {
        display: flex !important;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    .anx-header__search .anx-search-input-wrap {
        flex-shrink: 0;
    }

    /* Force search panel visible in drawer & fill remaining space */
    .anx-header__search.anx-open .anx-search-panel {
        display: block !important;
        position: static !important;
        flex: 1;
        max-height: none;
        max-width: none;
        overflow-y: auto;
        border: none;
        box-shadow: none;
        border-radius: 0;
        margin-top: 12px;
        border-top: 1px solid #edf2f7;
    }

    .anx-header__action {
        width: 36px;
        height: 36px;
    }
    .anx-header__toggle {
        width: 36px;
        height: 36px;
    }
    .anx-header__logo img,
    .anx-header__logo svg {
        height: 24px;
    }
}

@keyframes anx-search-drawer-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ── Small mobile ── */
@media (max-width: 575.98px) {
    .anx-header {
        height: 48px;
    }
    .anx-header__inner {
        padding: 0 8px;
    }
}

/* ── Wrapper offset for fixed header ── */
.anx-header ~ .wrapper,
.anx-header + .wrapper {
    padding-top: 0 !important;
}

/* ── Print: hide header ── */
@media print {
    .anx-header { display: none !important; }
}

/* ──────────────────────────────────────────────────────────
   R2. TOOLBAR & BREADCRUMB — Stack on Mobile
   ────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    /* Toolbar: stack breadcrumb + actions vertically */
    .d-flex.flex-wrap.flex-stack.justify-content-end.pt-2.no-print.container-xxl {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px;
        padding: 8px 12px !important;
    }
    /* Page title */
    .page-title.d-flex {
        flex-wrap: wrap;
        margin-bottom: 0 !important;
    }
    .anx-page-title {
        font-size: 16px !important;
    }
    /* Toolbar actions row: horizontal scroll */
    [data-kt-docs-table-toolbar="base"] {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        gap: 6px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    /* Primary action button: compact */
    .anx-primary-action {
        white-space: nowrap;
        font-size: 13px !important;
        padding: 6px 12px !important;
    }
}

@media (max-width: 575.98px) {
    .anx-page-title {
        font-size: 14px !important;
    }
    /* Filter button: icon-only on small screens */
    .anx-primary-action .bi {
        margin: 0 !important;
    }
    /* View toggler: hide on mobile (split view not needed) */
    .view-toggler {
        display: none !important;
    }
}

/* ──────────────────────────────────────────────────────────
   R3. DATA TABLES — Responsive Scroll & Cards
   ────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    /* Card header: stack search + toolbar */
    .anx-card-header.card-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 6px;
        padding: 8px !important;
    }
    .anx-card-header .card-title {
        width: 100%;
    }
    /* Search input: full width */
    .anx-card-header .anx-input-search {
        width: 100%;
    }
    .anx-card-header .anx-search-input {
        width: 100% !important;
    }
    /* Table: force horizontal scroll (scoped to datatable containers only) */
    .card-body:has(.dataTables_wrapper),
    .card-body:has(.table-responsive),
    .card-body:has(#kt_datatable) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #kt_datatable {
        min-width: 700px;
    }
    /* Table cells: compact */
    .table td, .table th {
        padding: 8px 6px !important;
        font-size: 13px;
    }
    /* Datatable length/info: stack */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100%;
        text-align: start !important;
    }
    /* Pagination: touch-friendly */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 36px;
        min-height: 36px;
        padding: 6px 10px !important;
    }
}

@media (max-width: 575.98px) {
    /* More compact on phones */
    .table td, .table th {
        padding: 6px 4px !important;
        font-size: 12px;
    }
    #kt_datatable {
        min-width: 600px;
    }
    /* Checkbox column: narrower */
    .table th:first-child,
    .table td:first-child {
        width: 32px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* ──────────────────────────────────────────────────────────
   R4. MODALS — Full Screen on Mobile
   ────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    /* All modals: full-screen on mobile */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        min-height: 100vh;
    }
    .modal-content {
        border-radius: 0 !important;
        min-height: 100vh;
        border: none !important;
    }
    /* Modal header: sticky */
    .modal-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
        border-radius: 0 !important;
    }
    /* Modal body: scrollable */
    .modal-body {
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Modal footer: sticky bottom */
    .modal-footer {
        position: sticky;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #eee;
        z-index: 10;
        padding: 12px 16px;
    }
    /* Modal close button: larger touch target */
    .modal-header .btn-close,
    .modal-header [data-bs-dismiss="modal"] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ──────────────────────────────────────────────────────────
   R5. FORMS — Full Width & Touch Optimized
   ────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    /* Form rows: stack vertically */
    .modal-body .row,
    .custom-inputs-row,
    .form-group .row,
    #kt_content .row:not(.respo-mobile) {
        flex-direction: column;
    }
    .modal-body .row > [class*="col-"],
    .custom-inputs-row > [class*="col-"],
    .form-group .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0;
        padding-right: 0;
    }
    /* Form controls: touch-friendly height */
    .form-control,
    .form-control-solid,
    .form-select,
    .form-select-solid {
        min-height: 44px !important;
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
    /* Select2: touch-friendly */
    .select2-container .select2-selection--single {
        min-height: 44px !important;
    }
    .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 42px !important;
    }
    .select2-container .select2-selection--single .select2-selection__arrow {
        height: 42px !important;
    }
    /* Labels: full width */
    label.form-label,
    label.col-form-label {
        width: 100% !important;
        text-align: start !important;
        padding-bottom: 4px !important;
    }
    /* Checkbox/Radio: larger touch targets */
    .form-check-input {
        min-width: 20px;
        min-height: 20px;
    }
    /* Form actions: sticky bottom */
    .modal-footer .btn,
    .form-actions .btn {
        min-height: 44px;
        font-size: 14px;
    }
}

/* ──────────────────────────────────────────────────────────
   R6. SHOW/DETAIL VIEW — Mobile Optimization
   ────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    /* Nav tabs in show view: horizontal scroll */
    .nav.nav-tabs.nav-line-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }
    .nav.nav-tabs.nav-line-tabs .nav-item {
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    .nav.nav-tabs.nav-line-tabs .nav-link {
        white-space: nowrap;
        padding: 10px 14px !important;
        font-size: 13px;
        min-height: 44px;
    }
    /* Detail toolbar: stack */
    .show-toolbar.row {
        flex-direction: column;
    }
    .show-toolbar .actions {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        gap: 6px;
        padding: 8px 0 !important;
    }
    .anx-detail-action-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
    /* Detail fields: full width */
    .show-toolbar + .row {
        flex-direction: column;
    }
    .show-toolbar + .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ──────────────────────────────────────────────────────────
   R7. DRAWERS — Full Screen on Mobile
   ────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    /* All KT drawers: full-width on mobile */
    .drawer.drawer-start,
    .drawer.drawer-end {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* ──────────────────────────────────────────────────────────
   R8. DASHBOARD — Responsive Fixes
   ────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    /* Dashboard tabs: horizontal scroll */
    .btn-tabs {
        padding: 8px 14px;
        font-size: 12px;
    }
    /* Dashboard action bar: wrap */
    .anx-dash-actions {
        gap: 6px !important;
    }
    /* Date range + branch filter: responsive width */
    .anx-dash-field--date {
        width: 200px;
    }
    .anx-dash-field--branch {
        width: 200px;
    }
    #date_range {
        min-width: auto !important;
        max-width: 100% !important;
        width: auto;
    }
}

@media (max-width: 767.98px) {
    /* Dashboard stat cards: full-width stack */
    .custom-font-size {
        font-size: 22px;
    }
    /* Tab strip: scrollable row */
    .nav-tabs-dashboard,
    .d-flex.overflow-auto.gap-2 {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    /* Charts: auto height, remove fixed inline heights */
    canvas[height] {
        max-height: 300px !important;
        height: auto !important;
    }
    /* Invoices summary card: fix margin */
    .h-275px {
        height: auto !important;
        min-height: 200px;
    }
    /* Dashboard action buttons: icon only */
    .btn-tabs {
        padding: 8px 10px;
        font-size: 11px;
    }
}

@media (max-width: 575.98px) {
    .custom-font-size {
        font-size: 18px;
    }
    /* Very small screens: tighter spacing (scoped to datatable/list cards) */
    .card-body:has(.dataTables_wrapper),
    .card-body:has(.table-responsive) {
        padding: 8px !important;
    }
    /* Quick links grid: 3 per row */
    .quick-link-item {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
}

/* ──────────────────────────────────────────────────────────
   R9. SIDEBAR OVERLAY BACKDROP & SUBMENU BACK BUTTON
   ────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .drawer-overlay::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1059;
        pointer-events: auto;
    }

    /* Submenu back button */
    .anx-submenu-back {
        width: 32px;
        height: 32px;
        padding: 4px;
        border: none;
        background: transparent;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        transition: background 0.15s, color 0.15s;
        cursor: pointer;
    }
    .anx-submenu-back:hover {
        background: #f0f0f0;
        color: var(--theme-color);
    }

    /* RTL: flip the back arrow */
    [dir="rtl"] .anx-submenu-back svg {
        transform: scaleX(-1);
    }
    [dir="rtl"] .anx-submenu-back {
        margin-right: 0;
        margin-left: 8px;
    }
}

/* ──────────────────────────────────────────────────────────
   R10. UTILITY CLASSES — Responsive Helpers
   ────────────────────────────────────────────────────────── */

/* Smooth transition for sidebar overlay */
.aside {
    transition: transform 0.25s ease;
}

/* Prevent body scroll when sidebar overlay is open */
@media (max-width: 991.98px) {
    body.aside-minimize {
        overflow: hidden;
    }
}

/* ──────────────────────────────────────────────────────────
   R11. TABLET-SPECIFIC (768–991px)
   ────────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 991.98px) {
    /* Forms: 2-column on tablet */
    .modal-body .row > [class*="col-md-6"],
    .modal-body .row > [class*="col-lg-6"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    /* Tables: slightly larger min-width */
    #kt_datatable {
        min-width: 750px;
    }
    /* Split view: 40/60 still works */
    #view-area.flex-60 {
        position: relative !important;
        transform: none !important;
    }
    #view-area .view-content {
        width: calc(100%) !important;
    }
    /* Cards: 2-column grid on tablet */
    .row > .col-xl-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ==============================================================
   ASIDE PANEL — Icon Rail + Flyout Panel (Layout-14 pattern)
   Overlay mode: panel floats over content, no push.
   ============================================================== */

/* ── Suppress Metronic dropdown submenus on desktop ── */
@media (min-width: 992px) {
    #kt_aside .menu-sub.menu-sub-dropdown {
        display: none !important;
    }
    /* Active rail indicator */
    #kt_aside .menu-item.anx-rail-active > .menu-link {
        background: rgba(var(--anx-color-primary-rgb, 13, 148, 136), 0.08);
        color: var(--theme-color, #0d9488);
        border-radius: 8px;
    }
    #kt_aside .menu-item.anx-rail-active > .menu-link .menu-icon {
        color: var(--theme-color, #0d9488);
    }
}

/* ── Overlay backdrop (desktop only) ── */
.anx-aside-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.06);
}
body.anx-panel-open .anx-aside-panel-overlay {
    display: block;
}
@media (max-width: 991.98px) {
    .anx-aside-panel-overlay { display: none !important; }
}

/* ── Panel container ── */
.anx-aside-panel {
    position: fixed;
    top: 0;
    left: 60px;
    bottom: 0;
    width: 260px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid #edf2f7;
    z-index: 101;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.06);
    transform: translateX(-100%);
    visibility: hidden;
    opacity: 0;
    transition: transform 0.25s ease, visibility 0.25s, opacity 0.25s;
}
body.anx-panel-open .anx-aside-panel {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
}

/* ── Mobile: full-screen panel ── */
@media (max-width: 991.98px) {
    .anx-aside-panel {
        left: 0;
        width: 100%;
        z-index: 112;
        border-right: none;
        box-shadow: none;
        transform: translateX(-100%);
    }
}

/* ── Panel header ── */
.anx-aside-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    flex-shrink: 0;
}
.anx-aside-panel__title {
    font-size: 16px;
    font-weight: 700;
    color: #1d2939;
    margin: 0;
}
.anx-aside-panel__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: #98a2b3;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.anx-aside-panel__close:hover {
    background: #f4f6f9;
    color: #5e6a79;
}

/* ── Panel search ── */
.anx-aside-panel__search {
    position: relative;
    padding: 0 16px 12px;
    flex-shrink: 0;
}
.anx-aside-panel__search-icon {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(calc(-50% - 6px));
    color: #98a2b3;
    pointer-events: none;
}
[dir="rtl"] .anx-aside-panel__search-icon {
    left: auto;
    right: 28px;
}
.anx-aside-panel__search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 36px;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    font-size: 13px;
    color: #344054;
    background: #f9fafb;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
[dir="rtl"] .anx-aside-panel__search-input {
    padding: 0 36px 0 12px;
}
.anx-aside-panel__search-input:focus {
    border-color: var(--theme-color, #0d9488);
    box-shadow: 0 0 0 3px rgba(var(--anx-color-primary-rgb, 13, 148, 136), 0.1);
    background: #fff;
}
.anx-aside-panel__search-input::placeholder {
    color: #98a2b3;
}

/* ── Panel body (scrollable) ── */
.anx-aside-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 16px;
    min-height: 0;
}

/* ── Panel section headers ── */
.anx-aside-panel__section {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #344054;
    padding: 12px 8px 6px;
    margin: 0;
}
.anx-aside-panel__section[data-anx-collapse] {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    border-radius: 4px;
    transition: background 0.15s;
}
.anx-aside-panel__section[data-anx-collapse]:hover {
    background: #f5f7fa;
}
.anx-aside-panel__section-arrow {
    transition: transform 0.2s ease;
    color: #667085;
    flex-shrink: 0;
}

/* ── Collapsible group ── */
.anx-aside-panel__group {
    margin-bottom: 2px;
}
.anx-aside-panel__group-items {
    overflow: hidden;
    max-height: 2000px;
    transition: max-height 0.25s ease;
}
.anx-aside-panel__group.anx-collapsed .anx-aside-panel__section-arrow {
    transform: rotate(-90deg);
}
.anx-aside-panel__group.anx-collapsed .anx-aside-panel__group-items {
    max-height: 0;
}
.anx-aside-panel__group.anx-hidden {
    display: none;
}

/* ── Panel menu links ── */
.anx-aside-panel__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    border-radius: 6px;
    color: #344054;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.anx-aside-panel__link:hover {
    background: #f5f7fa;
    color: #344054;
    text-decoration: none;
}
.anx-aside-panel__link.active {
    background: rgba(var(--anx-color-primary-rgb, 13, 148, 136), 0.06);
    color: var(--theme-color, #0d9488);
}
.anx-aside-panel__link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f5f7fa;
    color: #667085;
    flex-shrink: 0;
}
.anx-aside-panel__link:hover .anx-aside-panel__link-icon,
.anx-aside-panel__link.active .anx-aside-panel__link-icon {
    background: rgba(var(--anx-color-primary-rgb, 13, 148, 136), 0.08);
    color: var(--theme-color, #0d9488);
}

/* ── Panel CTA button (e.g. Open POS) ── */
.anx-aside-panel__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--theme-color, #0d9488);
    text-decoration: none;
    transition: opacity 0.15s;
}
.anx-aside-panel__cta:hover {
    opacity: 0.9;
    color: #fff;
    text-decoration: none;
}

/* ── Panel separator ── */
.anx-aside-panel__sep {
    height: 1px;
    background: #f0f2f5;
    margin: 6px 8px;
}

/* ── Hidden by search filter ── */
.anx-aside-panel__link.anx-hidden,
.anx-aside-panel__cta.anx-hidden,
.anx-aside-panel__sep.anx-hidden {
    display: none;
}

/* ── Favorite star button ── */
.anx-fav-star {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 4px;
    border: none;
    background: none;
    color: #d0d5dd;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
}
.anx-aside-panel__link:hover .anx-fav-star,
.anx-fav-star.anx-fav-starred {
    opacity: 1;
}
.anx-fav-star:hover {
    color: #f59e0b;
}
.anx-fav-star.anx-fav-starred {
    color: #f59e0b;
}

/* ── Favorites badge on rail ── */
.anx-fav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #f59e0b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
#anx_favorites_rail .menu-link {
    position: relative;
}

/* ── Favorites empty state ── */
.anx-aside-panel__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    color: #98a2b3;
}
.anx-aside-panel__empty svg {
    margin-bottom: 12px;
    color: #d0d5dd;
}
.anx-aside-panel__empty p {
    font-size: 14px;
    font-weight: 600;
    color: #667085;
    margin: 0 0 4px;
}
.anx-aside-panel__empty span {
    font-size: 12px;
}

/* ──────────────────────────────────────────────────────────
   R12. PRINT — Always full width
   ────────────────────────────────────────────────────────── */

@media print {
    .aside, .anx-aside-panel, #kt_header, .no-print, .footer,
    .view-toggler, .anx-header-actions-group {
        display: none !important;
    }
    .wrapper {
        padding-left: 0 !important;
    }
    .container-xxl {
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* ──────────────────────────────────────────────────────────
   R12b. DIRECT SCOPED DOCUMENT PRINT — invoices, bills, and returns
   ──────────────────────────────────────────────────────────
   Active ONLY while the matching body classes are present. Those classes
   are added by the document-specific direct print functions
   immediately before window.print(), and removed on afterprint. This
   guarantees the rules apply only for these direct-print flows and
   can never leak into POS or any other module. No global
   #view-area / #kt_content / #kt_post rules and no global `.print *`.
   ────────────────────────────────────────────────────────────── */
@media print {
    body.document-printing.sales-invoice-printing .print,
    body.document-printing.purchase-bill-printing .print,
    body.document-printing.sales-return-printing .print,
    body.document-printing.purchase-return-printing .print {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        background: #fff !important;
        color: #000 !important;
    }

    body.document-printing.sales-invoice-printing .print *,
    body.document-printing.purchase-bill-printing .print *,
    body.document-printing.sales-return-printing .print *,
    body.document-printing.purchase-return-printing .print * {
        visibility: visible !important;
    }

    body.document-printing.sales-invoice-printing #view-area,
    body.document-printing.sales-invoice-printing #view-area.show,
    body.document-printing.sales-invoice-printing #view-area .view-content,
    body.document-printing.purchase-bill-printing #view-area,
    body.document-printing.purchase-bill-printing #view-area.show,
    body.document-printing.purchase-bill-printing #view-area .view-content,
    body.document-printing.sales-return-printing #view-area,
    body.document-printing.sales-return-printing #view-area.show,
    body.document-printing.sales-return-printing #view-area .view-content,
    body.document-printing.purchase-return-printing #view-area,
    body.document-printing.purchase-return-printing #view-area.show,
    body.document-printing.purchase-return-printing #view-area .view-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* The print canvas is about 718px wide, narrower than the 768px
       mobile breakpoint, so the mobile master-detail overlay rule
       matches during print: it turns the detail panel into a fixed,
       translated off-canvas overlay, shoving the invoice one page-width
       to the side and leaving the printed page blank. Reset that
       positioning here, scoped to the document-print mode only. */
    body.document-printing.sales-invoice-printing #view-area,
    body.document-printing.sales-invoice-printing #view-area.flex-60,
    body.document-printing.sales-invoice-printing #view-area.show,
    body.document-printing.purchase-bill-printing #view-area,
    body.document-printing.purchase-bill-printing #view-area.flex-60,
    body.document-printing.purchase-bill-printing #view-area.show,
    body.document-printing.sales-return-printing #view-area,
    body.document-printing.sales-return-printing #view-area.flex-60,
    body.document-printing.sales-return-printing #view-area.show,
    body.document-printing.purchase-return-printing #view-area,
    body.document-printing.purchase-return-printing #view-area.flex-60,
    body.document-printing.purchase-return-printing #view-area.show {
        position: static !important;
        transform: none !important;
        inset: auto !important;
        z-index: auto !important;
    }

    body.document-printing.sales-invoice-printing .no-print,
    body.document-printing.purchase-bill-printing .no-print,
    body.document-printing.sales-return-printing .no-print,
    body.document-printing.purchase-return-printing .no-print,
    body.document-printing.sales-invoice-printing .aside,
    body.document-printing.purchase-bill-printing .aside,
    body.document-printing.sales-return-printing .aside,
    body.document-printing.purchase-return-printing .aside,
    body.document-printing.sales-invoice-printing .anx-header,
    body.document-printing.purchase-bill-printing .anx-header,
    body.document-printing.sales-return-printing .anx-header,
    body.document-printing.purchase-return-printing .anx-header {
        display: none !important;
    }

    /* A mobile rule sets flex-direction:column on rows inside
       #kt_content at max-width 767.98px. The print canvas is about
       719px wide, so that rule fires during print and stacks the
       invoice header/body columns vertically. Restore horizontal rows
       inside the printed document, scoped to the document-print mode. */
    body.document-printing.sales-invoice-printing .print .row,
    body.document-printing.purchase-bill-printing .print .row,
    body.document-printing.sales-return-printing .print .row,
    body.document-printing.purchase-return-printing .print .row {
        flex-direction: row !important;
    }
}

/* ──────────────────────────────────────────────────────────
   R12c. DIRECT SCOPED A4 DOCUMENT PRINT — non-invoice documents
   ──────────────────────────────────────────────────────────
   These documents use the same hidden .print preview contract as invoices,
   but opt in only while their document-specific body class is active. */
@media print {
    body.document-printing.a4-document-printing:is(
        .transfer-printing,
        .sales-quotation-printing,
        .sales-order-printing,
        .purchase-order-printing,
        .purchase-rfq-printing,
        .payslip-printing
    ) .print {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        background: #fff !important;
        color: #000 !important;
    }

    body.document-printing.a4-document-printing:is(
        .transfer-printing,
        .sales-quotation-printing,
        .sales-order-printing,
        .purchase-order-printing,
        .purchase-rfq-printing,
        .payslip-printing
    ) .print * {
        visibility: visible !important;
    }

    body.document-printing.a4-document-printing:is(
        .transfer-printing,
        .sales-quotation-printing,
        .sales-order-printing,
        .purchase-order-printing,
        .purchase-rfq-printing,
        .payslip-printing
    ) #view-area,
    body.document-printing.a4-document-printing:is(
        .transfer-printing,
        .sales-quotation-printing,
        .sales-order-printing,
        .purchase-order-printing,
        .purchase-rfq-printing,
        .payslip-printing
    ) #view-area.show,
    body.document-printing.a4-document-printing:is(
        .transfer-printing,
        .sales-quotation-printing,
        .sales-order-printing,
        .purchase-order-printing,
        .purchase-rfq-printing,
        .payslip-printing
    ) #view-area .view-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.document-printing.a4-document-printing:is(
        .transfer-printing,
        .sales-quotation-printing,
        .sales-order-printing,
        .purchase-order-printing,
        .purchase-rfq-printing,
        .payslip-printing
    ) #view-area,
    body.document-printing.a4-document-printing:is(
        .transfer-printing,
        .sales-quotation-printing,
        .sales-order-printing,
        .purchase-order-printing,
        .purchase-rfq-printing,
        .payslip-printing
    ) #view-area.flex-60,
    body.document-printing.a4-document-printing:is(
        .transfer-printing,
        .sales-quotation-printing,
        .sales-order-printing,
        .purchase-order-printing,
        .purchase-rfq-printing,
        .payslip-printing
    ) #view-area.show {
        position: static !important;
        transform: none !important;
        inset: auto !important;
        z-index: auto !important;
    }

    body.document-printing.a4-document-printing:is(
        .transfer-printing,
        .sales-quotation-printing,
        .sales-order-printing,
        .purchase-order-printing,
        .purchase-rfq-printing,
        .payslip-printing
    ) .no-print,
    body.document-printing.a4-document-printing:is(
        .transfer-printing,
        .sales-quotation-printing,
        .sales-order-printing,
        .purchase-order-printing,
        .purchase-rfq-printing,
        .payslip-printing
    ) .aside,
    body.document-printing.a4-document-printing:is(
        .transfer-printing,
        .sales-quotation-printing,
        .sales-order-printing,
        .purchase-order-printing,
        .purchase-rfq-printing,
        .payslip-printing
    ) .anx-header {
        display: none !important;
    }

    body.document-printing.a4-document-printing:is(
        .transfer-printing,
        .sales-quotation-printing,
        .sales-order-printing,
        .purchase-order-printing,
        .purchase-rfq-printing,
        .payslip-printing
    ) .print .row {
        flex-direction: row !important;
    }
}


/* ════════════════════════════════════════════════════════════════
   ANEVEX FILTER DRAWER — UNIFIED WIDTH (system-wide)
   ────────────────────────────────────────────────────────────────
   Some filter blade files set data-kt-drawer-width and others
   don't, so the same filter drawer renders at different widths
   across pages. Force one consistent width here regardless of the
   per-page data attribute, so every "Filter Options" drawer looks
   the same. Inline width from Keen-drawer JS is overridden via
   `!important`. Mobile = full width.
   ════════════════════════════════════════════════════════════════ */
.drawer[data-kt-drawer-name="filter"] {
    width: 100% !important;
}
@media (min-width: 992px) {
    .drawer[data-kt-drawer-name="filter"] {
        width: 380px !important;
        max-width: 28vw !important;
        min-width: 320px !important;
    }
}

#filter_drawer #kt-toolbar-filter,
#filter_drawer #filter_drawer_body,
#filter_drawer #filter_drawer_scroll,
#filter_drawer form,
#filter_drawer .mb-10,
#filter_drawer .row,
#filter_drawer [class*="col-"] {
    width: 100%;
    max-width: 100%;
}

#filter_drawer .form-control,
#filter_drawer .form-select,
#filter_drawer .anx-input,
#filter_drawer .input-group,
#filter_drawer .select2,
#filter_drawer .select2-container,
#filter_drawer .select2-container--bootstrap5 {
    width: 100% !important;
    max-width: 100%;
}

#filter_drawer #filter_drawer_scroll {
    padding-right: 0 !important;
    padding-inline-end: 0 !important;
}

/* ==============================================================
   ANEVEX — Theme Mode toggle (Light / Dark / Auto)
   Sits in the user-menu drawer next to the colour picker.
   ============================================================== */
.anx-theme-mode {
    flex-wrap: wrap;
    row-gap: 8px;
}
.anx-theme-mode__segmented {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    background: var(--anx-color-surface-soft);
    border: 1px solid var(--anx-color-border);
    border-radius: 999px;
    margin-inline-start: auto;
}
.anx-theme-mode__seg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: none;
    background: transparent;
    color: var(--anx-color-text-soft);
    font-size: 12px;
    font-weight: var(--anx-weight-medium);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.anx-theme-mode__seg:hover {
    color: var(--anx-color-text);
}
.anx-theme-mode__seg.is-active {
    background: var(--anx-color-surface);
    color: var(--anx-color-primary);
    box-shadow: var(--anx-shadow-sm);
}
.anx-theme-mode__seg:focus-visible {
    outline: 2px solid var(--anx-color-primary);
    outline-offset: 1px;
}

/* Dark-mode tweak for the segmented track — uses .surface-soft which
   already flips via the token override in anx-dark-mode.css, but we
   give the active pill a slightly stronger background so it reads
   well against the recessed track. */
html[data-theme="dark"] .anx-theme-mode__seg.is-active {
    background: rgba(var(--anx-color-primary-rgb), 0.18);
    color: var(--anx-color-primary);
}

/* ============================================================
 * SALES INVOICE MODAL
 * Scoped Odoo-like organization for invoice metadata and lines.
 * The generic CRUD modal and shared SalesItems component remain
 * unchanged for other modules.
 * ============================================================ */

.sales-invoice-modal .sales-invoice-field {
    margin-bottom: 12px !important;
}

.sales-invoice-modal .sales-invoice-field .form-label {
    margin-bottom: 6px;
    color: var(--anx-color-text-soft);
    font-size: 12px;
    font-weight: 600;
}

.sales-invoice-modal .sales-invoice-field--payment-term {
    position: relative;
}

.sales-invoice-modal .sales-invoice-payment-or {
    position: absolute;
    inset-inline-start: -7px;
    top: 33px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding-inline: 5px;
    border: 1px solid var(--anx-color-border);
    border-radius: 999px;
    background: var(--anx-color-surface);
    color: var(--anx-color-text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.sales-invoice-form {
    margin-top: 2px;
    border-top: 1px solid var(--anx-color-border);
}

.sales-invoice-lines-section {
    padding: 14px;
}

.sales-invoice-lines-card {
    border: 0;
    background: var(--anx-color-surface);
}

.sales-invoice-section-header {
    display: flex;
    align-items: center;
    min-height: 26px;
    margin-bottom: 8px;
}

.sales-invoice-section-title {
    margin: 0;
    color: var(--anx-color-text);
    font-size: 14px;
    font-weight: 700;
}

.sales-invoice-form .sales-invoice-lines-toolbar {
    margin-inline: 0;
}

.sales-invoice-form .sales-invoice-lines-toolbar > .col-12 {
    padding-inline: 0;
}

.sales-invoice-form .barcode-search-form {
    max-width: 460px;
    margin-bottom: 10px !important;
}

.sales-invoice-form .products-search {
    min-height: 38px;
    border-color: var(--anx-color-border);
    background-color: var(--anx-color-surface);
    color: var(--anx-color-text);
}

.sales-invoice-form .sales-invoice-lines-table-wrap {
    border: 0;
    overflow: auto;
}

.sales-invoice-form .sales-invoice-lines-table {
    min-width: 980px;
    margin-bottom: 0;
}

.sales-invoice-form .sales-invoice-lines-table thead th {
    padding: 9px 8px;
    color: var(--anx-color-text-soft);
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.sales-invoice-form .sales-invoice-lines-table tbody td {
    padding: 5px !important;
    vertical-align: middle;
}

.sales-invoice-form .sales-invoice-lines-table .form-control,
.sales-invoice-form .sales-invoice-lines-table .form-select,
.sales-invoice-form .sales-invoice-lines-table .select2-selection {
    min-height: 36px;
    border-color: var(--anx-color-border);
}

.sales-invoice-form .sales-item-col--product {
    min-width: 230px;
}

.sales-invoice-form .sales-item-col--barcode {
    min-width: 145px;
}

.sales-invoice-form .sales-item-col--quantity,
.sales-invoice-form .sales-item-col--price,
.sales-invoice-form .sales-item-col--discount {
    min-width: 95px;
}

.sales-invoice-form .sales-item-col--uom,
.sales-invoice-form .sales-item-col--subtotal,
.sales-invoice-form .sales-item-col--total {
    min-width: 110px;
}

.sales-invoice-form .sales-item-col--actions {
    min-width: 48px;
}

.sales-invoice-form .sales-items-column-settings,
.sales-invoice-form .sales-items-delete-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sales-invoice-form .sales-items-column-settings {
    color: var(--anx-color-text-muted);
}

.sales-invoice-form .sales-items-column-settings:hover {
    border-color: var(--anx-color-border);
    background: var(--anx-color-surface-soft);
    color: var(--anx-color-primary);
}

.sales-invoice-form .sales-items-delete-line {
    color: var(--anx-color-danger);
}

.sales-invoice-form .sales-items-delete-line:hover {
    border-color: var(--anx-color-danger-border);
    background: var(--anx-color-danger-soft);
    color: var(--anx-color-danger-strong);
}

.sales-invoice-form .sales-items-add-row td {
    padding: 9px 7px;
    border-top: 1px solid var(--anx-color-border);
}

.sales-invoice-form .sales-items-summary-row > * {
    border-color: var(--anx-color-border) !important;
}

.sales-invoice-form .sales-items-summary-row > :first-child {
    color: var(--anx-color-text-soft);
    font-weight: 600;
    text-align: end;
}

.sales-invoice-form .sales-items-summary-row > :last-child {
    color: var(--anx-color-text);
    font-weight: 600;
}

.sales-invoice-form .sales-items-summary-row--total > * {
    background: var(--anx-color-surface-soft);
    color: var(--anx-color-text);
    font-size: 15px;
    font-weight: 700;
}

.sales-invoice-footer-section,
.document-lines-footer-section {
    margin-top: 14px;
    border-top: 1px solid var(--anx-color-border);
}

.sales-invoice-footer-tabs,
.document-lines-footer-tabs {
    padding-inline: 0;
    border-bottom-color: var(--anx-color-border);
}

.sales-invoice-footer-tabs .nav-link,
.document-lines-footer-tabs .nav-link {
    padding: 10px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--anx-color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.sales-invoice-footer-tabs .nav-link:hover,
.sales-invoice-footer-tabs .nav-link:focus,
.document-lines-footer-tabs .nav-link:hover,
.document-lines-footer-tabs .nav-link:focus {
    color: var(--anx-color-text);
}

.sales-invoice-footer-tabs .nav-link.active,
.document-lines-footer-tabs .nav-link.active {
    border-bottom-color: var(--anx-color-primary);
    background: transparent;
    color: var(--anx-color-primary);
}

.sales-invoice-footer-content,
.document-lines-footer-content {
    padding-top: 12px;
}

.sales-invoice-footer-content textarea,
.document-lines-footer-content textarea {
    min-height: 64px;
    resize: vertical;
}

.sales-invoice-attachments-slot .sales-invoice-field--attachments,
.document-lines-attachments-slot .document-lines-field--attachments {
    width: 100%;
    margin-bottom: 0 !important;
}

.sales-invoice-modal .modal-footer {
    justify-content: flex-end !important;
}

/* ============================================================
 * PURCHASE BILL MODAL
 * Matches the approved invoice header rhythm while preserving
 * purchase-only fields and form contracts.
 * ============================================================ */

.purchase-bill-modal .purchase-bill-field {
    margin-bottom: 12px !important;
}

.purchase-bill-modal .purchase-bill-field .form-label {
    margin-bottom: 6px;
    color: var(--anx-color-text-soft);
    font-size: 12px;
    font-weight: 600;
}

.purchase-bill-modal .purchase-bill-field--payment-term {
    position: relative;
}

.purchase-bill-modal .purchase-bill-payment-or {
    position: absolute;
    inset-inline-start: -7px;
    top: 33px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding-inline: 5px;
    border: 1px solid var(--anx-color-border);
    border-radius: 999px;
    background: var(--anx-color-surface);
    color: var(--anx-color-text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.purchase-bill-modal .modal-footer {
    justify-content: center !important;
}

/* ============================================================
 * DOCUMENT LINES STANDARD
 * Shared visual contract for the opt-in SalesItems/PurchasesItems
 * wrappers. Business columns and input names stay component-owned.
 * ============================================================ */

.document-lines-form {
    margin-top: 2px;
    border-top: 1px solid var(--anx-color-border);
}

.document-lines-section {
    padding: 14px;
}

.document-lines-card {
    border: 0;
    background: var(--anx-color-surface);
}

.document-lines-section-header {
    display: flex;
    align-items: center;
    min-height: 26px;
    margin-bottom: 8px;
}

.document-lines-section-title {
    margin: 0;
    color: var(--anx-color-text);
    font-size: 14px;
    font-weight: 700;
}

.document-lines-form .document-lines-toolbar {
    margin-inline: 0;
}

.document-lines-form .document-lines-toolbar > .col-12 {
    padding-inline: 0;
}

.document-lines-form .barcode-search-form {
    max-width: 460px;
    margin-bottom: 10px !important;
}

.document-lines-form .products-search {
    min-height: 38px;
    border-color: var(--anx-color-border);
    background-color: var(--anx-color-surface);
    color: var(--anx-color-text);
}

.document-lines-form .document-lines-table-wrap {
    border: 0;
    border-radius: 0;
    overflow: auto;
}

.document-lines-form .document-lines-table {
    min-width: 980px;
    margin-bottom: 0;
}

.document-lines-form .document-lines-table thead th {
    padding: 9px 8px;
    color: var(--anx-color-text-soft);
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.document-lines-form .document-lines-table tbody td {
    padding: 5px !important;
    vertical-align: middle;
}

.document-lines-form .document-lines-table .form-control,
.document-lines-form .document-lines-table .form-select,
.document-lines-form .document-lines-table .select2-selection {
    min-height: 36px;
    border-color: var(--anx-color-border);
}

.document-lines-form .sales-item-col--product,
.document-lines-form .document-line-col--product {
    min-width: 230px;
}

.document-lines-form .sales-item-col--barcode {
    min-width: 145px;
}

.document-lines-form .sales-item-col--quantity,
.document-lines-form .sales-item-col--price,
.document-lines-form .sales-item-col--discount,
.document-lines-form .document-line-col--quantity,
.document-lines-form .document-line-col--price {
    width: 84px;
    min-width: 84px;
}

.document-lines-form .sales-item-col--uom,
.document-lines-form .sales-item-col--subtotal,
.document-lines-form .sales-item-col--total,
.document-lines-form .document-line-col--uom,
.document-lines-form .document-line-col--total {
    width: 100px;
    min-width: 100px;
}

.document-lines-form .sales-item-col--taxes,
.document-lines-form .document-line-col--taxes,
.document-lines-form .document-lines-tax-cell {
    min-width: 118px;
    max-width: 145px;
}

.document-lines-form .sales-item-col--actions,
.document-lines-form .document-line-col--actions,
.document-lines-form .document-lines-actions-cell,
.document-lines-repeater-form .document-lines-actions-cell {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    padding-inline: 4px !important;
    text-align: center;
    vertical-align: middle;
}

.document-lines-repeater-form .document-lines-table-wrap {
    overflow: auto;
}

.document-lines-repeater-form .document-lines-table {
    margin-bottom: 0;
}

.document-lines-repeater-form .document-lines-table thead th,
.document-lines-repeater-form .document-lines-table tbody td {
    vertical-align: middle;
}

.document-lines-repeater-form .document-lines-table tbody td {
    padding: 5px;
}

.document-lines-repeater-form .document-lines-table .form-control,
.document-lines-repeater-form .document-lines-table .form-select,
.document-lines-repeater-form .document-lines-table .select2-selection {
    min-height: 36px;
    border-color: var(--anx-color-border);
}

.document-lines-repeater-form .document-line-col--product {
    min-width: 220px;
}

.document-lines-repeater-form .document-line-col--description {
    min-width: 160px;
}

.document-lines-repeater-form .document-line-col--quantity,
.document-lines-repeater-form .document-line-col--amount {
    width: 88px;
    min-width: 88px;
}

.document-lines-repeater-form .document-line-col--uom {
    width: 112px;
    min-width: 112px;
}

.document-lines-form .document-lines-tax-cell .select2-container {
    width: 100% !important;
    min-width: 0;
}

.document-lines-form .document-lines-tax-cell .select2-selection--multiple {
    display: flex;
    align-items: center;
    min-height: 36px !important;
    max-height: 36px;
    overflow: hidden;
}

.document-lines-form .document-lines-tax-cell .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 3px;
    max-width: 100%;
    overflow: hidden;
}

.document-lines-form .document-lines-tax-cell .select2-selection--multiple .select2-selection__choice {
    flex: 0 1 auto;
    max-width: calc(100% - 4px);
    margin: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-lines-form .document-lines-column-settings,
.document-lines-form .document-lines-delete-line,
.document-lines-repeater-form .document-lines-delete-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.document-lines-form .document-lines-column-settings {
    color: var(--anx-color-text-muted);
}

.document-lines-form .document-lines-column-settings:hover {
    border-color: var(--anx-color-border);
    background: var(--anx-color-surface-soft);
    color: var(--anx-color-primary);
}

.document-lines-form .document-lines-delete-line {
    color: var(--anx-color-danger);
}

.document-lines-repeater-form .document-lines-delete-line {
    color: var(--anx-color-danger);
}

.document-lines-form .document-lines-delete-line:hover,
.document-lines-repeater-form .document-lines-delete-line:hover {
    border-color: var(--anx-color-danger-border);
    background: var(--anx-color-danger-soft);
    color: var(--anx-color-danger-strong);
}

.document-lines-form .document-lines-add-row td {
    padding: 9px 7px;
    border-top: 1px solid var(--anx-color-border);
}

.document-lines-form .document-lines-summary-row > * {
    border-color: var(--anx-color-border) !important;
    background: var(--anx-color-surface-soft);
}

.document-lines-form .document-lines-summary-row > :first-child {
    color: var(--anx-color-text-soft);
    font-weight: 600;
    text-align: end;
}

.document-lines-form .document-lines-summary-row > :last-child {
    color: var(--anx-color-text);
    font-weight: 600;
}

.document-lines-form .document-lines-summary-row--total > * {
    background: var(--anx-color-info-soft);
    color: var(--anx-color-text);
    font-size: 15px;
    font-weight: 700;
}

.document-lines-footer-section--attachments-only .document-lines-footer-content {
    padding-top: 10px;
}

.anx-attachment-uploader {
    position: relative;
    width: 100%;
}

.anx-attachment-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
}

.anx-attachment-dropzone {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 76px;
    padding: 14px 16px;
    border: 1px dashed var(--anx-color-border-strong);
    border-radius: 8px;
    background: var(--anx-color-surface-soft);
    color: var(--anx-color-text);
    text-align: start;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.anx-attachment-dropzone:hover,
.anx-attachment-dropzone:focus,
.anx-attachment-dropzone--dragover {
    border-color: var(--anx-color-primary);
    background: var(--anx-color-primary-light);
    box-shadow: 0 0 0 3px rgba(var(--anx-color-primary-rgb), 0.12);
    outline: 0;
}

.anx-attachment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(var(--anx-color-primary-rgb), 0.12);
    color: var(--anx-color-primary);
}

.anx-attachment-copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.anx-attachment-title {
    color: var(--anx-color-text);
    font-size: 13px;
    font-weight: 700;
}

.anx-attachment-helper {
    color: var(--anx-color-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.anx-attachment-browse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--anx-color-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.anx-attachment-file-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.anx-attachment-empty,
.anx-attachment-file-list-title {
    color: var(--anx-color-text-muted);
    font-size: 12px;
}

.anx-attachment-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--anx-color-border);
    border-radius: 6px;
    background: var(--anx-color-surface);
}

.anx-attachment-file-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.anx-attachment-file-name {
    overflow: hidden;
    color: var(--anx-color-text);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anx-attachment-file-size {
    color: var(--anx-color-text-muted);
    font-size: 11px;
}

.anx-attachment-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--anx-color-danger-border);
    border-radius: 6px;
    background: var(--anx-color-danger-soft);
    color: var(--anx-color-danger);
    font-size: 18px;
    line-height: 1;
}

.anx-attachment-remove:hover,
.anx-attachment-remove:focus {
    background: var(--anx-color-danger);
    color: #fff;
    outline: 0;
}

.anx-attachment-uploader--compact .anx-attachment-dropzone {
    min-height: 42px;
    padding: 8px;
    gap: 8px;
}

.anx-attachment-uploader--compact .anx-attachment-icon,
.anx-attachment-uploader--compact .anx-attachment-helper {
    display: none;
}

.anx-attachment-uploader--compact .anx-attachment-title {
    font-size: 12px;
}

.anx-attachment-uploader--compact .anx-attachment-browse {
    min-height: 28px;
    padding: 5px 8px;
}

@media (max-width: 991.98px) {
    .sales-invoice-modal .sales-invoice-payment-or {
        position: static;
        margin: -2px auto 6px;
    }
}