@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap");


/* =========================================================================
   Bagaax Entertainment Center — theme tokens
   Drop this file in your static folder and load it before your own CSS.
   Light theme is the default; dark applies with <html data-theme="dark">,
   or automatically when the OS is in dark mode (unless data-theme="light").
   ========================================================================= */
:root {
  /* ---- Brand core ---------------------------------------------------- */
  --bx-navy:  #0D1E52;   /* Bagaax Navy  — primary, backgrounds, text   */
  --bx-lime:  #ABDB4B;   /* Bagaax Lime  — ring, CTAs on navy, focus    */
  --bx-teal:  #2EBFAE;   /* Sprint Teal  — runner gradient end, accents */
  --bx-white: #FFFFFF;
  --bx-gradient: linear-gradient(135deg, #B8E34F 0%, #8FD46A 45%, #22B8AA 100%);

  /* ---- Scales ---------------------------------------------------------- */
  --bx-navy-50:  #EEF2FB; --bx-navy-100: #D9E1F5; --bx-navy-200: #B3C2EA;
  --bx-navy-300: #8299D6; --bx-navy-400: #5672BE; --bx-navy-500: #3655A3;
  --bx-navy-600: #253F86; --bx-navy-700: #1A2F6C; --bx-navy-800: #13255E;
  --bx-navy-900: #0D1E52; --bx-navy-950: #08133A;

  --bx-lime-50:  #F6FBE8; --bx-lime-100: #EAF6CB; --bx-lime-200: #D6EE9C;
  --bx-lime-300: #C2E56E; --bx-lime-400: #ABDB4B; --bx-lime-500: #93C632;
  --bx-lime-600: #76A322; --bx-lime-700: #5A7E1B; --bx-lime-800: #46621A;
  --bx-lime-900: #3A5119;

  --bx-teal-50:  #E8FAF7; --bx-teal-100: #C5F2EB; --bx-teal-200: #8FE5D8;
  --bx-teal-300: #57D3C3; --bx-teal-400: #2EBFAE; --bx-teal-500: #22A797;
  --bx-teal-600: #187F74; --bx-teal-700: #186C63; --bx-teal-800: #165750;
  --bx-teal-900: #144843;

  /* ---- Type ----------------------------------------------------------- */
  --bx-font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --bx-font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --bx-text-xs: .75rem; --bx-text-sm: .875rem; --bx-text-base: 1rem;
  --bx-text-lg: 1.125rem; --bx-text-xl: 1.375rem; --bx-text-2xl: 1.75rem;
  --bx-text-3xl: 2.25rem; --bx-text-4xl: 3rem;

  /* ---- Shape & space -------------------------------------------------- */
  --bx-radius-sm: 6px; --bx-radius: 10px; --bx-radius-lg: 16px; --bx-radius-pill: 999px;
  --bx-space-1: 4px; --bx-space-2: 8px; --bx-space-3: 12px; --bx-space-4: 16px;
  --bx-space-5: 24px; --bx-space-6: 32px; --bx-space-7: 48px; --bx-space-8: 64px;
  --bx-shadow: 0 1px 2px rgba(8, 19, 58, .06), 0 4px 16px rgba(8, 19, 58, .08);

  /* ---- Semantic: LIGHT (default) -------------------------------------- */
  --bx-bg:            #F5F7FC;
  --bx-surface:       #FFFFFF;
  --bx-surface-2:     #EEF2FB;
  --bx-border:        #D9E1F5;
  --bx-text:          #0D1E52;
  --bx-text-muted:    #4A5785;
  --bx-primary:       #0D1E52;  --bx-on-primary: #FFFFFF;
  --bx-primary-hover: #1A2F6C;
  --bx-accent:        #ABDB4B;  --bx-on-accent:  #0D1E52;
  --bx-accent-hover:  #93C632;
  --bx-link:          #253F86;
  --bx-success:       #186C63;  --bx-success-bg: #E8FAF7;
  --bx-warning:       #B45309;  --bx-warning-bg: #FEF3C7;
  --bx-danger:        #B91C1C;  --bx-danger-bg:  #FEE2E2;
  --bx-focus-ring:    0 0 0 3px #ABDB4B, 0 0 0 5px #0D1E52;
  --bx-sidebar-bg:    #0D1E52;  --bx-sidebar-text: #D9E1F5; --bx-sidebar-active: #ABDB4B;
  color-scheme: light;
}
/* ---- Semantic: DARK ---------------------------------------------------- */
:root[data-theme="dark"] {
  --bx-bg: #08133A; --bx-surface: #0D1E52; --bx-surface-2: #13255E; --bx-border: #1E3170;
  --bx-text: #FFFFFF; --bx-text-muted: #A9B4D6;
  --bx-primary: #ABDB4B; --bx-on-primary: #0D1E52; --bx-primary-hover: #C2E56E;
  --bx-accent: #2EBFAE; --bx-on-accent: #0D1E52; --bx-accent-hover: #57D3C3;
  --bx-link: #C2E56E;
  --bx-success: #57D3C3; --bx-success-bg: #144843;
  --bx-warning: #FBBF24; --bx-warning-bg: #3F2A06;
  --bx-danger: #F87171;  --bx-danger-bg: #450A0A;
  --bx-focus-ring: 0 0 0 3px #ABDB4B, 0 0 0 5px #08133A;
  --bx-sidebar-bg: #08133A; --bx-sidebar-text: #A9B4D6; --bx-sidebar-active: #ABDB4B;
  --bx-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bx-bg: #08133A; --bx-surface: #0D1E52; --bx-surface-2: #13255E; --bx-border: #1E3170;
    --bx-text: #FFFFFF; --bx-text-muted: #A9B4D6;
    --bx-primary: #ABDB4B; --bx-on-primary: #0D1E52; --bx-primary-hover: #C2E56E;
    --bx-accent: #2EBFAE; --bx-on-accent: #0D1E52; --bx-accent-hover: #57D3C3;
    --bx-link: #C2E56E;
    --bx-success: #57D3C3; --bx-success-bg: #144843;
    --bx-warning: #FBBF24; --bx-warning-bg: #3F2A06;
    --bx-danger: #F87171;  --bx-danger-bg: #450A0A;
    --bx-focus-ring: 0 0 0 3px #ABDB4B, 0 0 0 5px #08133A;
    --bx-sidebar-bg: #08133A; --bx-sidebar-text: #A9B4D6; --bx-sidebar-active: #ABDB4B;
    --bx-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
/* ---- Base ------------------------------------------------------------- */
body { background: var(--bx-bg); color: var(--bx-text); font-family: var(--bx-font-body); }
h1, h2, h3, h4, .bx-display { font-family: var(--bx-font-display); font-weight: 700; letter-spacing: -.01em; }
a { color: var(--bx-link); }
:focus-visible { outline: none; box-shadow: var(--bx-focus-ring); }
/* ---- Optional ready-made components ------------------------------------ */
.bx-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--bx-radius); font: 600 var(--bx-text-base)/1 var(--bx-font-display);
  cursor: pointer; text-decoration: none; transition: background .15s; }
.bx-btn--primary { background: var(--bx-primary); color: var(--bx-on-primary); }
.bx-btn--primary:hover { background: var(--bx-primary-hover); }
.bx-btn--accent { background: var(--bx-accent); color: var(--bx-on-accent); }
.bx-btn--accent:hover { background: var(--bx-accent-hover); }
.bx-btn--ghost { background: transparent; color: var(--bx-text); box-shadow: inset 0 0 0 1.5px var(--bx-border); }
.bx-card { background: var(--bx-surface); border: 1px solid var(--bx-border); border-radius: var(--bx-radius-lg); box-shadow: var(--bx-shadow); }
.bx-badge { display: inline-block; padding: 2px 10px; border-radius: var(--bx-radius-pill); font: 500 var(--bx-text-xs)/1.6 var(--bx-font-body); }
.bx-badge--success { background: var(--bx-success-bg); color: var(--bx-success); }
.bx-badge--warning { background: var(--bx-warning-bg); color: var(--bx-warning); }
.bx-badge--danger  { background: var(--bx-danger-bg);  color: var(--bx-danger); }
.bx-sidebar { background: var(--bx-sidebar-bg); color: var(--bx-sidebar-text); }
.bx-sidebar a[aria-current="page"] { color: var(--bx-sidebar-active); }
/* ==========================================================================
   Bagaax ERP — theme system
   --------------------------------------------------------------------------
   Load after bagaax-theme.css (fonts + brand scales live there).

   Three switches, all on <html> (or any wrapper):
     data-theme="light" | "dark"            (no attribute = follow the OS)
     data-density="compact" | "default" | "touch"
         compact  → back office, accountants, long tables
         default  → everyday screens
         touch    → front desk / POS tablets (48px targets)
   Every component reads only the semantic --erp-* tokens below, so a theme
   or density change never needs a component change.
   ========================================================================== */
:root {
  /* ---- Neutrals (navy-tinted grey) ------------------------------------- */
  --erp-gray-0: #FFFFFF;  --erp-gray-25: #F8F9FC; --erp-gray-50: #F3F5FA;
  --erp-gray-100: #E8ECF4; --erp-gray-200: #D6DCE8; --erp-gray-300: #B8C1D4;
  --erp-gray-400: #858FAA; --erp-gray-500: #5F6A88; --erp-gray-600: #4A5573;
  --erp-gray-700: #353F5C; --erp-gray-800: #232C47; --erp-gray-900: #161D33;

  /* ---- Type ------------------------------------------------------------ */
  --erp-font-ui: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --erp-font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --erp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --erp-title: 600 22px/1.25 var(--erp-font-display);     /* page title   */
  --erp-heading: 600 16px/1.35 var(--erp-font-display);   /* card/section */
  --erp-label: 500 13px/1.3 var(--erp-font-ui);           /* field labels */
  --erp-caption: 400 12px/1.4 var(--erp-font-ui);

  /* ---- Shape, space, motion -------------------------------------------- */
  --erp-radius-xs: 4px; --erp-radius-sm: 6px; --erp-radius: 8px;
  --erp-radius-lg: 12px; --erp-radius-pill: 999px;
  --erp-space-1: 4px; --erp-space-2: 8px; --erp-space-3: 12px; --erp-space-4: 16px;
  --erp-space-5: 20px; --erp-space-6: 24px; --erp-space-8: 32px;
  --erp-sidebar-w: 248px; --erp-sidebar-w-collapsed: 64px; --erp-topbar-h: 56px;
  --erp-ease: cubic-bezier(.2, .7, .2, 1); --erp-dur: 140ms;

  /* ---- Density: DEFAULT ------------------------------------------------- */
  --erp-font-size: 14px;
  --erp-control-h: 36px;     /* buttons, inputs, selects */
  --erp-control-px: 12px;
  --erp-row-h: 40px;         /* table rows */
  --erp-cell-px: 12px;
  --erp-gap: 12px;
  --erp-card-p: 20px;
  --erp-icon: 18px;

  /* ---- LIGHT (default) -------------------------------------------------- */
  --erp-canvas: #F3F5FA;          /* app background behind cards        */
  --erp-surface: #FFFFFF;         /* cards, tables, forms               */
  --erp-surface-sunken: #F8F9FC;  /* table header, read-only fields     */
  --erp-surface-raised: #FFFFFF;  /* menus, popovers, modals (+shadow)  */
  --erp-surface-hover: #F3F5FA;
  --erp-surface-selected: #F6FBE8;
  --erp-selected-bar: #ABDB4B;
  --erp-scrim: rgba(8, 19, 58, .55);

  --erp-border: #D6DCE8;          /* card + table lines (decorative)    */
  --erp-divider: #E8ECF4;
  --erp-border-input: #858FAA;    /* 3:1 — field edges must be visible  */

  --erp-text: #0D1E52;
  --erp-text-2: #4A5573;          /* secondary, table meta              */
  --erp-text-muted: #5F6A88;      /* placeholders, captions             */
  --erp-text-disabled: #8E99B3;
  --erp-link: #253F86;

  --erp-primary: #0D1E52;  --erp-primary-hover: #1A2F6C;  --erp-on-primary: #FFFFFF;
  --erp-accent: #ABDB4B;   --erp-accent-hover: #93C632;   --erp-on-accent: #0D1E52;
  --erp-danger: #B91C1C;   --erp-danger-hover: #991B1B;   --erp-on-danger: #FFFFFF;
  --erp-negative: #B91C1C;        /* negative amounts                   */
  --erp-positive: #186C63;

  --erp-focus: 0 0 0 2px #0D1E52, 0 0 0 4px #ABDB4B;

  --erp-shell-bg: #0D1E52;        /* sidebar                            */
  --erp-shell-text: #B3C2EA;
  --erp-shell-heading: #8299D6;
  --erp-shell-hover: #13255E;
  --erp-shell-active-bg: #1A2F6C;
  --erp-shell-active-text: #ABDB4B;
  --erp-topbar-bg: #FFFFFF;

  --erp-shadow-1: 0 1px 2px rgba(13, 30, 82, .06);
  --erp-shadow-2: 0 4px 12px rgba(13, 30, 82, .10), 0 1px 2px rgba(13, 30, 82, .06);
  --erp-shadow-3: 0 16px 40px rgba(13, 30, 82, .20);

  /* ---- Document status (bg / text / dot) ------------------------------- */
  --erp-st-draft-bg: #E8ECF4;     --erp-st-draft-fg: #353F5C;     --erp-st-draft-dot: #858FAA;
  --erp-st-pending-bg: #FEF3C7;   --erp-st-pending-fg: #92400E;   --erp-st-pending-dot: #D97706;
  --erp-st-approved-bg: #E0E8FA;  --erp-st-approved-fg: #253F86;  --erp-st-approved-dot: #3655A3;
  --erp-st-paid-bg: #E8FAF7;      --erp-st-paid-fg: #186C63;      --erp-st-paid-dot: #1FA393;
  --erp-st-partial-bg: #EAF6CB;   --erp-st-partial-fg: #46621A;   --erp-st-partial-dot: #76A322;
  --erp-st-overdue-bg: #FEE2E2;   --erp-st-overdue-fg: #B91C1C;   --erp-st-overdue-dot: #DC2626;
  --erp-st-cancelled-bg: #F3F5FA; --erp-st-cancelled-fg: #5F6A88; --erp-st-cancelled-dot: #B8C1D4;
  --erp-st-hold-bg: #EFE9FB;      --erp-st-hold-fg: #5B3FA6;      --erp-st-hold-dot: #7C5CC4;

  /* ---- Alerts ---------------------------------------------------------- */
  --erp-info-bg: #E0E8FA;    --erp-info-fg: #253F86;    --erp-info-line: #3655A3;
  --erp-success-bg: #E8FAF7; --erp-success-fg: #186C63; --erp-success-line: #1FA393;
  --erp-warning-bg: #FEF3C7; --erp-warning-fg: #92400E; --erp-warning-line: #D97706;
  --erp-error-bg: #FEE2E2;   --erp-error-fg: #B91C1C;   --erp-error-line: #DC2626;

  /* ---- Modules + charts (one categorical order, validated for CVD) ----- */
  /* order: 1 Finance · 2 POS · 3 Inventory · 4 HR · 5 Bookings · 6 Members */
  --erp-cat-1: #3655A3; --erp-cat-2: #1FA393; --erp-cat-3: #E08A2C;
  --erp-cat-4: #7C5CC4; --erp-cat-5: #7FB12A; --erp-cat-6: #D9577A;
  --erp-mod-finance: var(--erp-cat-1);  --erp-mod-pos: var(--erp-cat-2);
  --erp-mod-inventory: var(--erp-cat-3); --erp-mod-hr: var(--erp-cat-4);
  --erp-mod-bookings: var(--erp-cat-5);  --erp-mod-members: var(--erp-cat-6);
  --erp-chart-grid: #E8ECF4; --erp-chart-axis: #5F6A88;
  --erp-seq-1: #E0E8FA; --erp-seq-2: #B3C2EA; --erp-seq-3: #8299D6; --erp-seq-4: #3655A3; --erp-seq-5: #0D1E52;

  color-scheme: light;
}
/* ---- Density ------------------------------------------------------------ */
[data-density="compact"] {
  --erp-font-size: 13px; --erp-control-h: 30px; --erp-control-px: 10px;
  --erp-row-h: 32px; --erp-cell-px: 10px; --erp-gap: 8px; --erp-card-p: 16px; --erp-icon: 16px;
}
[data-density="touch"] {
  --erp-font-size: 16px; --erp-control-h: 48px; --erp-control-px: 16px;
  --erp-row-h: 52px; --erp-cell-px: 16px; --erp-gap: 16px; --erp-card-p: 24px; --erp-icon: 22px;
}
/* ---- DARK --------------------------------------------------------------- */
:root[data-theme="dark"], [data-theme="dark"] {
  --erp-canvas: #08133A; --erp-surface: #0D1E52; --erp-surface-sunken: #0A1846;
  --erp-surface-raised: #13255E; --erp-surface-hover: #13255E;
  --erp-surface-selected: #203551; --erp-selected-bar: #ABDB4B; --erp-scrim: rgba(3, 8, 26, .7);
  --erp-border: #22336B; --erp-divider: #1A2A5E; --erp-border-input: #5E72B5;
  --erp-text: #E8ECF4; --erp-text-2: #A9B4D6; --erp-text-muted: #8C98C2; --erp-text-disabled: #5C6A99;
  --erp-link: #C2E56E;
  --erp-primary: #ABDB4B; --erp-primary-hover: #C2E56E; --erp-on-primary: #0D1E52;
  --erp-accent: #2EBFAE;  --erp-accent-hover: #57D3C3; --erp-on-accent: #0D1E52;
  --erp-danger: #F87171;  --erp-danger-hover: #FCA5A5; --erp-on-danger: #08133A;
  --erp-negative: #F87171; --erp-positive: #57D3C3;
  --erp-focus: 0 0 0 2px #08133A, 0 0 0 4px #ABDB4B;
  --erp-shell-bg: #060F30; --erp-shell-text: #A9B4D6; --erp-shell-heading: #6F80B8;
  --erp-shell-hover: #0D1E52; --erp-shell-active-bg: #13255E; --erp-shell-active-text: #ABDB4B;
  --erp-topbar-bg: #0D1E52;
  --erp-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --erp-shadow-2: 0 6px 16px rgba(0, 0, 0, .4);
  --erp-shadow-3: 0 20px 48px rgba(0, 0, 0, .55);
  --erp-st-draft-bg: #1E2B57;     --erp-st-draft-fg: #C9D1E8;     --erp-st-draft-dot: #8C98C2;
  --erp-st-pending-bg: #3F2A06;   --erp-st-pending-fg: #FBBF24;   --erp-st-pending-dot: #F59E0B;
  --erp-st-approved-bg: #1C2F6E;  --erp-st-approved-fg: #A9BEF5;  --erp-st-approved-dot: #6F8DE0;
  --erp-st-paid-bg: #0F3B3A;      --erp-st-paid-fg: #57D3C3;      --erp-st-paid-dot: #2EBFAE;
  --erp-st-partial-bg: #2A3A12;   --erp-st-partial-fg: #C2E56E;   --erp-st-partial-dot: #93C632;
  --erp-st-overdue-bg: #4A1220;   --erp-st-overdue-fg: #FCA5A5;   --erp-st-overdue-dot: #F87171;
  --erp-st-cancelled-bg: #172452; --erp-st-cancelled-fg: #8C98C2; --erp-st-cancelled-dot: #5C6A99;
  --erp-st-hold-bg: #2E2160;      --erp-st-hold-fg: #C4B5FD;      --erp-st-hold-dot: #9A7BE0;
  --erp-info-bg: #1C2F6E;    --erp-info-fg: #A9BEF5;    --erp-info-line: #6F8DE0;
  --erp-success-bg: #0F3B3A; --erp-success-fg: #57D3C3; --erp-success-line: #2EBFAE;
  --erp-warning-bg: #3F2A06; --erp-warning-fg: #FBBF24; --erp-warning-line: #F59E0B;
  --erp-error-bg: #4A1220;   --erp-error-fg: #FCA5A5;   --erp-error-line: #F87171;
  --erp-cat-1: #6F8DE0; --erp-cat-2: #1FA393; --erp-cat-3: #CF7A22;
  --erp-cat-4: #9A7BE0; --erp-cat-5: #74A325; --erp-cat-6: #E0648A;
  --erp-chart-grid: #1A2A5E; --erp-chart-axis: #8C98C2;
  --erp-seq-1: #1C2F6E; --erp-seq-2: #34488A; --erp-seq-3: #5672BE; --erp-seq-4: #8299D6; --erp-seq-5: #D9E1F5;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --erp-canvas: #08133A; --erp-surface: #0D1E52; --erp-surface-sunken: #0A1846;
    --erp-surface-raised: #13255E; --erp-surface-hover: #13255E;
    --erp-surface-selected: #203551; --erp-selected-bar: #ABDB4B; --erp-scrim: rgba(3, 8, 26, .7);
    --erp-border: #22336B; --erp-divider: #1A2A5E; --erp-border-input: #5E72B5;
    --erp-text: #E8ECF4; --erp-text-2: #A9B4D6; --erp-text-muted: #8C98C2; --erp-text-disabled: #5C6A99;
    --erp-link: #C2E56E;
    --erp-primary: #ABDB4B; --erp-primary-hover: #C2E56E; --erp-on-primary: #0D1E52;
    --erp-accent: #2EBFAE;  --erp-accent-hover: #57D3C3; --erp-on-accent: #0D1E52;
    --erp-danger: #F87171;  --erp-danger-hover: #FCA5A5; --erp-on-danger: #08133A;
    --erp-negative: #F87171; --erp-positive: #57D3C3;
    --erp-focus: 0 0 0 2px #08133A, 0 0 0 4px #ABDB4B;
    --erp-shell-bg: #060F30; --erp-shell-text: #A9B4D6; --erp-shell-heading: #6F80B8;
    --erp-shell-hover: #0D1E52; --erp-shell-active-bg: #13255E; --erp-shell-active-text: #ABDB4B;
    --erp-topbar-bg: #0D1E52;
    --erp-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --erp-shadow-2: 0 6px 16px rgba(0, 0, 0, .4);
    --erp-shadow-3: 0 20px 48px rgba(0, 0, 0, .55);
    --erp-st-draft-bg: #1E2B57;     --erp-st-draft-fg: #C9D1E8;     --erp-st-draft-dot: #8C98C2;
    --erp-st-pending-bg: #3F2A06;   --erp-st-pending-fg: #FBBF24;   --erp-st-pending-dot: #F59E0B;
    --erp-st-approved-bg: #1C2F6E;  --erp-st-approved-fg: #A9BEF5;  --erp-st-approved-dot: #6F8DE0;
    --erp-st-paid-bg: #0F3B3A;      --erp-st-paid-fg: #57D3C3;      --erp-st-paid-dot: #2EBFAE;
    --erp-st-partial-bg: #2A3A12;   --erp-st-partial-fg: #C2E56E;   --erp-st-partial-dot: #93C632;
    --erp-st-overdue-bg: #4A1220;   --erp-st-overdue-fg: #FCA5A5;   --erp-st-overdue-dot: #F87171;
    --erp-st-cancelled-bg: #172452; --erp-st-cancelled-fg: #8C98C2; --erp-st-cancelled-dot: #5C6A99;
    --erp-st-hold-bg: #2E2160;      --erp-st-hold-fg: #C4B5FD;      --erp-st-hold-dot: #9A7BE0;
    --erp-info-bg: #1C2F6E;    --erp-info-fg: #A9BEF5;    --erp-info-line: #6F8DE0;
    --erp-success-bg: #0F3B3A; --erp-success-fg: #57D3C3; --erp-success-line: #2EBFAE;
    --erp-warning-bg: #3F2A06; --erp-warning-fg: #FBBF24; --erp-warning-line: #F59E0B;
    --erp-error-bg: #4A1220;   --erp-error-fg: #FCA5A5;   --erp-error-line: #F87171;
    --erp-cat-1: #6F8DE0; --erp-cat-2: #1FA393; --erp-cat-3: #CF7A22;
    --erp-cat-4: #9A7BE0; --erp-cat-5: #74A325; --erp-cat-6: #E0648A;
    --erp-chart-grid: #1A2A5E; --erp-chart-axis: #8C98C2;
    --erp-seq-1: #1C2F6E; --erp-seq-2: #34488A; --erp-seq-3: #5672BE; --erp-seq-4: #8299D6; --erp-seq-5: #D9E1F5;
    color-scheme: dark;
  }
}
/* ==========================================================================
   Components
   ========================================================================== */
.erp-app, .erp-app * { box-sizing: border-box; }
.erp-app {
  min-height: 100vh; display: flex; flex-wrap: wrap;
  background: var(--erp-canvas); color: var(--erp-text);
  font: 400 var(--erp-font-size)/1.45 var(--erp-font-ui);
}
.erp-app :focus-visible { outline: none; box-shadow: var(--erp-focus); }
.erp-num, .erp-table td.erp-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.erp-neg { color: var(--erp-negative); }
/* ---- Shell: sidebar + topbar ------------------------------------------- */
.erp-sidebar {
  flex: 1 1 var(--erp-sidebar-w); max-width: var(--erp-sidebar-w);
  background: var(--erp-shell-bg); color: var(--erp-shell-text);
  display: flex; flex-direction: column; gap: var(--erp-space-5); padding: var(--erp-space-5) var(--erp-space-3);
}
.erp-sidebar__logo { height: 36px; width: auto; align-self: flex-start; margin-left: var(--erp-space-2); }
.erp-nav { display: flex; flex-direction: column; gap: 2px; }
.erp-nav__heading { font: 600 11px/1 var(--erp-font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--erp-shell-heading); padding: var(--erp-space-4) var(--erp-space-3) var(--erp-space-2); }
.erp-nav__item { display: flex; align-items: center; gap: var(--erp-space-3); min-height: var(--erp-control-h);
  padding: 0 var(--erp-space-3); border-radius: var(--erp-radius); color: inherit; text-decoration: none; }
.erp-nav__item:hover { background: var(--erp-shell-hover); color: #FFFFFF; }
.erp-nav__item[aria-current="page"] { background: var(--erp-shell-active-bg); color: var(--erp-shell-active-text); font-weight: 700; }
.erp-nav__dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
/* module colour */
.erp-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.erp-topbar { height: var(--erp-topbar-h); background: var(--erp-topbar-bg); border-bottom: 1px solid var(--erp-border);
  display: flex; align-items: center; gap: var(--erp-space-4); padding: 0 var(--erp-space-6); }
.erp-content { padding: var(--erp-space-6); display: flex; flex-direction: column; gap: var(--erp-space-5); }
.erp-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font: var(--erp-caption); color: var(--erp-text-muted); }
.erp-breadcrumb a { color: var(--erp-text-2); text-decoration: none; }
.erp-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--erp-space-4); }
.erp-title { font: var(--erp-title); margin: 0; }
/* ---- Buttons ------------------------------------------------------------ */
.erp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--erp-space-2);
  height: var(--erp-control-h); padding: 0 calc(var(--erp-control-px) + 4px);
  border: 0; border-radius: var(--erp-radius); cursor: pointer; white-space: nowrap;
  font: 600 var(--erp-font-size)/1 var(--erp-font-ui); text-decoration: none;
  transition: background var(--erp-dur) var(--erp-ease); }
.erp-btn--primary { background: var(--erp-primary); color: var(--erp-on-primary); }
.erp-btn--primary:hover { background: var(--erp-primary-hover); }
.erp-btn--accent { background: var(--erp-accent); color: var(--erp-on-accent); }
.erp-btn--accent:hover { background: var(--erp-accent-hover); }
.erp-btn--secondary { background: var(--erp-surface); color: var(--erp-text); box-shadow: inset 0 0 0 1px var(--erp-border-input); }
.erp-btn--secondary:hover { background: var(--erp-surface-hover); }
.erp-btn--ghost { background: transparent; color: var(--erp-text-2); }
.erp-btn--ghost:hover { background: var(--erp-surface-hover); color: var(--erp-text); }
.erp-btn--ghost[aria-pressed="true"] { background: var(--erp-surface-selected); color: var(--erp-text); box-shadow: inset 0 0 0 1px var(--erp-selected-bar); }
.erp-btn--danger { background: var(--erp-danger); color: var(--erp-on-danger); }
.erp-btn--danger:hover { background: var(--erp-danger-hover); }
.erp-btn--icon { width: var(--erp-control-h); padding: 0; }
.erp-btn:disabled, .erp-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* ---- Fields ------------------------------------------------------------- */
.erp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.erp-label { font: var(--erp-label); color: var(--erp-text-2); }
.erp-label .req { color: var(--erp-danger); }
.erp-input, .erp-select, .erp-textarea {
  height: var(--erp-control-h); padding: 0 var(--erp-control-px); width: 100%;
  background: var(--erp-surface); color: var(--erp-text);
  border: 1px solid var(--erp-border-input); border-radius: var(--erp-radius);
  font: 400 var(--erp-font-size)/1.2 var(--erp-font-ui); }
.erp-textarea { height: auto; min-height: calc(var(--erp-control-h) * 2.4); padding: 8px var(--erp-control-px); }
.erp-input::-moz-placeholder { color: var(--erp-text-muted); }
.erp-input::placeholder { color: var(--erp-text-muted); }
.erp-input:focus, .erp-select:focus, .erp-textarea:focus { outline: none; border-color: var(--erp-text); box-shadow: var(--erp-focus); }
.erp-input[aria-invalid="true"] { border-color: var(--erp-error-line); box-shadow: inset 0 0 0 1px var(--erp-error-line); }
.erp-input[readonly] { background: var(--erp-surface-sunken); border-style: dashed; }
.erp-input:disabled { background: var(--erp-surface-sunken); color: var(--erp-text-disabled); border-color: var(--erp-border); }
.erp-help { font: var(--erp-caption); color: var(--erp-text-muted); }
.erp-error { font: var(--erp-caption); color: var(--erp-error-fg); font-weight: 500; }
.erp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--erp-gap) var(--erp-space-5); }
/* ---- Cards, toolbars, filters ------------------------------------------ */
.erp-card { background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); box-shadow: var(--erp-shadow-1); }
.erp-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--erp-space-3);
  padding: var(--erp-space-4) var(--erp-card-p); border-bottom: 1px solid var(--erp-divider); font: var(--erp-heading); }
.erp-card__body { padding: var(--erp-card-p); }
.erp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--erp-space-2); padding: var(--erp-space-3) var(--erp-card-p); border-bottom: 1px solid var(--erp-divider); }
.erp-chip { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: calc(var(--erp-control-h) - 6px); padding: 0 10px;
  border-radius: var(--erp-radius-pill); background: var(--erp-surface-sunken); color: var(--erp-text-2);
  box-shadow: inset 0 0 0 1px var(--erp-border); font: 500 12px/1 var(--erp-font-ui); }
.erp-chip[aria-pressed="true"] { background: var(--erp-surface-selected); color: var(--erp-text); box-shadow: inset 0 0 0 1px var(--erp-selected-bar); }
/* ---- KPI tile ----------------------------------------------------------- */
.erp-kpi { padding: var(--erp-card-p); display: flex; flex-direction: column; gap: 6px; }
.erp-kpi__label { font: var(--erp-label); color: var(--erp-text-2); }
.erp-kpi__value { font: 600 28px/1.1 var(--erp-font-display); font-variant-numeric: tabular-nums; }
.erp-kpi__delta { font: 500 12px/1 var(--erp-font-ui); color: var(--erp-text-muted); }
/* ---- Tables ------------------------------------------------------------- */
.erp-table-wrap { overflow-x: auto; }
.erp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--erp-font-size); }
.erp-table th { position: sticky; top: 0; z-index: 1; height: calc(var(--erp-row-h) - 4px);
  padding: 0 var(--erp-cell-px); text-align: left; white-space: nowrap;
  background: var(--erp-surface-sunken); color: var(--erp-text-2); font: 600 12px/1 var(--erp-font-ui);
  letter-spacing: .02em; border-bottom: 1px solid var(--erp-border); }
.erp-table th.erp-num { text-align: right; }
.erp-table td { height: var(--erp-row-h); padding: 0 var(--erp-cell-px); border-bottom: 1px solid var(--erp-divider); white-space: nowrap; }
.erp-table tbody tr:hover td { background: var(--erp-surface-hover); }
.erp-table tbody tr[aria-selected="true"] td { background: var(--erp-surface-selected); }
.erp-table tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--erp-selected-bar); }
.erp-table tfoot td { font-weight: 700; background: var(--erp-surface-sunken); border-top: 1px solid var(--erp-border); }
.erp-table .erp-doc { color: var(--erp-link); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
/* ---- Status pills (always text + dot, never colour alone) --------------- */
.erp-status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px;
  border-radius: var(--erp-radius-pill); font: 600 12px/1 var(--erp-font-ui); white-space: nowrap; }
.erp-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.erp-status--draft     { background: var(--erp-st-draft-bg);     color: var(--erp-st-draft-fg); }
.erp-status--pending   { background: var(--erp-st-pending-bg);   color: var(--erp-st-pending-fg); }
.erp-status--approved  { background: var(--erp-st-approved-bg);  color: var(--erp-st-approved-fg); }
.erp-status--paid      { background: var(--erp-st-paid-bg);      color: var(--erp-st-paid-fg); }
.erp-status--partial   { background: var(--erp-st-partial-bg);   color: var(--erp-st-partial-fg); }
.erp-status--overdue   { background: var(--erp-st-overdue-bg);   color: var(--erp-st-overdue-fg); }
.erp-status--cancelled { background: var(--erp-st-cancelled-bg); color: var(--erp-st-cancelled-fg); text-decoration: line-through; }
.erp-status--hold      { background: var(--erp-st-hold-bg);      color: var(--erp-st-hold-fg); }
.erp-status--draft::before { background: var(--erp-st-draft-dot); }
.erp-status--pending::before { background: var(--erp-st-pending-dot); }
.erp-status--approved::before { background: var(--erp-st-approved-dot); }
.erp-status--paid::before { background: var(--erp-st-paid-dot); }
.erp-status--partial::before { background: var(--erp-st-partial-dot); }
.erp-status--overdue::before { background: var(--erp-st-overdue-dot); }
.erp-status--cancelled::before { background: var(--erp-st-cancelled-dot); }
.erp-status--hold::before { background: var(--erp-st-hold-dot); }
/* ---- Tabs, pagination --------------------------------------------------- */
.erp-tabs { display: flex; gap: var(--erp-space-1); border-bottom: 1px solid var(--erp-border); overflow-x: auto; }
.erp-tab { height: var(--erp-control-h); padding: 0 var(--erp-control-px); border: 0; background: none; cursor: pointer;
  color: var(--erp-text-2); font: 500 var(--erp-font-size)/1 var(--erp-font-ui); box-shadow: inset 0 -2px 0 transparent; white-space: nowrap; }
.erp-tab[aria-selected="true"] { color: var(--erp-text); font-weight: 700; box-shadow: inset 0 -3px 0 var(--erp-selected-bar); }
.erp-count { display: inline-block; min-width: 20px; padding: 2px 6px; margin-left: 6px; border-radius: var(--erp-radius-pill);
  background: var(--erp-surface-sunken); color: var(--erp-text-2); font: 600 11px/1.2 var(--erp-font-ui); text-align: center; }
.erp-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--erp-space-3);
  padding: var(--erp-space-3) var(--erp-card-p); color: var(--erp-text-2); font: var(--erp-caption); }
/* ---- Alerts & toasts ---------------------------------------------------- */
.erp-alert { display: flex; gap: var(--erp-space-3); align-items: flex-start; padding: var(--erp-space-3) var(--erp-space-4);
  border-radius: var(--erp-radius); border: 1px solid; font-size: var(--erp-font-size); }
.erp-alert--info    { background: var(--erp-info-bg);    color: var(--erp-info-fg);    border-color: var(--erp-info-line); }
.erp-alert--success { background: var(--erp-success-bg); color: var(--erp-success-fg); border-color: var(--erp-success-line); }
.erp-alert--warning { background: var(--erp-warning-bg); color: var(--erp-warning-fg); border-color: var(--erp-warning-line); }
.erp-alert--error   { background: var(--erp-error-bg);   color: var(--erp-error-fg);   border-color: var(--erp-error-line); }
.erp-toast { display: flex; gap: var(--erp-space-3); align-items: center; min-width: 300px; max-width: 420px;
  padding: var(--erp-space-3) var(--erp-space-4); border-radius: var(--erp-radius); background: var(--erp-gray-900); color: #FFFFFF;
  box-shadow: var(--erp-shadow-3); font-size: 14px; }
[data-theme="dark"] .erp-toast { background: #E8ECF4; color: #0D1E52; }
/* ---- Modal -------------------------------------------------------------- */
.erp-scrim { position: fixed; inset: 0; background: var(--erp-scrim); display: grid; place-items: center; padding: var(--erp-space-4); }
.erp-modal { width: min(560px, 100%); background: var(--erp-surface-raised); border-radius: var(--erp-radius-lg); box-shadow: var(--erp-shadow-3); }
.erp-modal__foot { display: flex; justify-content: flex-end; gap: var(--erp-space-2); padding: var(--erp-space-4) var(--erp-card-p); border-top: 1px solid var(--erp-divider); }
/* ---- Document (invoice / order) layout ---------------------------------- */
.erp-doc-layout { display: flex; flex-wrap: wrap; gap: var(--erp-space-5); align-items: flex-start; }
.erp-doc-layout > .erp-doc-main { flex: 999 1 560px; min-width: 0; }
.erp-doc-layout > .erp-doc-side { flex: 1 1 280px; }
.erp-totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; font-variant-numeric: tabular-nums; }
.erp-totals dt { color: var(--erp-text-2); }
.erp-totals dd { margin: 0; text-align: right; }
.erp-totals .grand { font: 700 18px/1.3 var(--erp-font-display); color: var(--erp-text); padding-top: 8px; border-top: 1px solid var(--erp-border); }
/* ---- Small screens: sidebar becomes a top strip ------------------------ */
@media (max-width: 760px) {
  .erp-sidebar { max-width: none; flex-basis: 100%; padding: var(--erp-space-3); gap: var(--erp-space-3); }
  .erp-nav { flex-direction: row; overflow-x: auto; }
  .erp-nav__heading { display: none; }
  .erp-nav__item { flex: none; }
  .erp-topbar { height: auto; flex-wrap: wrap; padding: var(--erp-space-2) var(--erp-space-4); }
  .erp-content { padding: var(--erp-space-4); }
}
/* ---- Print: invoices, receipts ------------------------------------------ */
@media print {
  .erp-sidebar, .erp-topbar, .erp-toolbar, .erp-btn { display: none !important; }
  .erp-app { background: #FFFFFF; color: #000000; }
  .erp-card { box-shadow: none; border-color: #B8C1D4; }
}
*, ::before, ::after{
  --tw-border-spacing-x:  0;
  --tw-border-spacing-y:  0;
  --tw-translate-x:  0;
  --tw-translate-y:  0;
  --tw-rotate:  0;
  --tw-skew-x:  0;
  --tw-skew-y:  0;
  --tw-scale-x:  1;
  --tw-scale-y:  1;
  --tw-pan-x:   ;
  --tw-pan-y:   ;
  --tw-pinch-zoom:   ;
  --tw-scroll-snap-strictness:  proximity;
  --tw-gradient-from-position:   ;
  --tw-gradient-via-position:   ;
  --tw-gradient-to-position:   ;
  --tw-ordinal:   ;
  --tw-slashed-zero:   ;
  --tw-numeric-figure:   ;
  --tw-numeric-spacing:   ;
  --tw-numeric-fraction:   ;
  --tw-ring-inset:   ;
  --tw-ring-offset-width:  0px;
  --tw-ring-offset-color:  #fff;
  --tw-ring-color:  rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:  0 0 #0000;
  --tw-ring-shadow:  0 0 #0000;
  --tw-shadow:  0 0 #0000;
  --tw-shadow-colored:  0 0 #0000;
  --tw-blur:   ;
  --tw-brightness:   ;
  --tw-contrast:   ;
  --tw-grayscale:   ;
  --tw-hue-rotate:   ;
  --tw-invert:   ;
  --tw-saturate:   ;
  --tw-sepia:   ;
  --tw-drop-shadow:   ;
  --tw-backdrop-blur:   ;
  --tw-backdrop-brightness:   ;
  --tw-backdrop-contrast:   ;
  --tw-backdrop-grayscale:   ;
  --tw-backdrop-hue-rotate:   ;
  --tw-backdrop-invert:   ;
  --tw-backdrop-opacity:   ;
  --tw-backdrop-saturate:   ;
  --tw-backdrop-sepia:   ;
  --tw-contain-size:   ;
  --tw-contain-layout:   ;
  --tw-contain-paint:   ;
  --tw-contain-style:   ;
}
::backdrop{
  --tw-border-spacing-x:  0;
  --tw-border-spacing-y:  0;
  --tw-translate-x:  0;
  --tw-translate-y:  0;
  --tw-rotate:  0;
  --tw-skew-x:  0;
  --tw-skew-y:  0;
  --tw-scale-x:  1;
  --tw-scale-y:  1;
  --tw-pan-x:   ;
  --tw-pan-y:   ;
  --tw-pinch-zoom:   ;
  --tw-scroll-snap-strictness:  proximity;
  --tw-gradient-from-position:   ;
  --tw-gradient-via-position:   ;
  --tw-gradient-to-position:   ;
  --tw-ordinal:   ;
  --tw-slashed-zero:   ;
  --tw-numeric-figure:   ;
  --tw-numeric-spacing:   ;
  --tw-numeric-fraction:   ;
  --tw-ring-inset:   ;
  --tw-ring-offset-width:  0px;
  --tw-ring-offset-color:  #fff;
  --tw-ring-color:  rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:  0 0 #0000;
  --tw-ring-shadow:  0 0 #0000;
  --tw-shadow:  0 0 #0000;
  --tw-shadow-colored:  0 0 #0000;
  --tw-blur:   ;
  --tw-brightness:   ;
  --tw-contrast:   ;
  --tw-grayscale:   ;
  --tw-hue-rotate:   ;
  --tw-invert:   ;
  --tw-saturate:   ;
  --tw-sepia:   ;
  --tw-drop-shadow:   ;
  --tw-backdrop-blur:   ;
  --tw-backdrop-brightness:   ;
  --tw-backdrop-contrast:   ;
  --tw-backdrop-grayscale:   ;
  --tw-backdrop-hue-rotate:   ;
  --tw-backdrop-invert:   ;
  --tw-backdrop-opacity:   ;
  --tw-backdrop-saturate:   ;
  --tw-backdrop-sepia:   ;
  --tw-contain-size:   ;
  --tw-contain-layout:   ;
  --tw-contain-paint:   ;
  --tw-contain-style:   ;
}
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: DM Sans, Segoe UI, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container{
  width:  100%;
}
@media (min-width: 640px){
  .container{
    max-width:  640px;
  }
}
@media (min-width: 768px){
  .container{
    max-width:  768px;
  }
}
@media (min-width: 1024px){
  .container{
    max-width:  1024px;
  }
}
@media (min-width: 1280px){
  .container{
    max-width:  1280px;
  }
}
@media (min-width: 1536px){
  .container{
    max-width:  1536px;
  }
}
.sr-only{
  position:  absolute;
  width:  1px;
  height:  1px;
  padding:  0;
  margin:  -1px;
  overflow:  hidden;
  clip:  rect(0, 0, 0, 0);
  white-space:  nowrap;
  border-width:  0;
}
.pointer-events-none{
  pointer-events:  none;
}
.visible{
  visibility:  visible;
}
.invisible{
  visibility:  hidden;
}
.collapse{
  visibility:  collapse;
}
.static{
  position:  static;
}
.fixed{
  position:  fixed;
}
.absolute{
  position:  absolute;
}
.relative{
  position:  relative;
}
.sticky{
  position:  sticky;
}
.inset-0{
  inset:  0px;
}
.inset-x-0{
  left:  0px;
  right:  0px;
}
.inset-y-2{
  top:  0.5rem;
  bottom:  0.5rem;
}
.-left-\[21px\]{
  left:  -21px;
}
.bottom-0{
  bottom:  0px;
}
.bottom-6{
  bottom:  1.5rem;
}
.left-0{
  left:  0px;
}
.left-2\.5{
  left:  0.625rem;
}
.left-4{
  left:  1rem;
}
.right-0{
  right:  0px;
}
.right-1{
  right:  0.25rem;
}
.right-2{
  right:  0.5rem;
}
.right-2\.5{
  right:  0.625rem;
}
.right-3{
  right:  0.75rem;
}
.right-6{
  right:  1.5rem;
}
.top-0{
  top:  0px;
}
.top-1\.5{
  top:  0.375rem;
}
.top-1\/2{
  top:  50%;
}
.top-2{
  top:  0.5rem;
}
.top-3{
  top:  0.75rem;
}
.top-full{
  top:  100%;
}
.z-10{
  z-index:  10;
}
.z-20{
  z-index:  20;
}
.z-30{
  z-index:  30;
}
.z-40{
  z-index:  40;
}
.z-50{
  z-index:  50;
}
.z-\[60\]{
  z-index:  60;
}
.order-11{
  order:  11;
}
.col-span-2{
  grid-column:  span 2 / span 2;
}
.m-3{
  margin:  0.75rem;
}
.m-4{
  margin:  1rem;
}
.-mx-1{
  margin-left:  -0.25rem;
  margin-right:  -0.25rem;
}
.-mx-2{
  margin-left:  -0.5rem;
  margin-right:  -0.5rem;
}
.mx-4{
  margin-left:  1rem;
  margin-right:  1rem;
}
.mx-\[var\(--erp-card-p\)\]{
  margin-left:  var(--erp-card-p);
  margin-right:  var(--erp-card-p);
}
.mx-auto{
  margin-left:  auto;
  margin-right:  auto;
}
.my-1{
  margin-top:  0.25rem;
  margin-bottom:  0.25rem;
}
.-mb-px{
  margin-bottom:  -1px;
}
.-ml-3\.5{
  margin-left:  -0.875rem;
}
.-mr-0\.5{
  margin-right:  -0.125rem;
}
.-mr-1{
  margin-right:  -0.25rem;
}
.-mt-1{
  margin-top:  -0.25rem;
}
.-mt-3\.5{
  margin-top:  -0.875rem;
}
.-mt-8{
  margin-top:  -2rem;
}
.mb-1{
  margin-bottom:  0.25rem;
}
.mb-1\.5{
  margin-bottom:  0.375rem;
}
.mb-2{
  margin-bottom:  0.5rem;
}
.mb-2\.5{
  margin-bottom:  0.625rem;
}
.mb-3{
  margin-bottom:  0.75rem;
}
.mb-3\.5{
  margin-bottom:  0.875rem;
}
.mb-4{
  margin-bottom:  1rem;
}
.mb-5{
  margin-bottom:  1.25rem;
}
.mb-6{
  margin-bottom:  1.5rem;
}
.mb-8{
  margin-bottom:  2rem;
}
.mb-\[var\(--erp-card-p\)\]{
  margin-bottom:  var(--erp-card-p);
}
.ml-1{
  margin-left:  0.25rem;
}
.ml-1\.5{
  margin-left:  0.375rem;
}
.ml-12{
  margin-left:  3rem;
}
.ml-2{
  margin-left:  0.5rem;
}
.ml-3{
  margin-left:  0.75rem;
}
.ml-5{
  margin-left:  1.25rem;
}
.ml-auto{
  margin-left:  auto;
}
.mr-1{
  margin-right:  0.25rem;
}
.mr-1\.5{
  margin-right:  0.375rem;
}
.mt-0\.5{
  margin-top:  0.125rem;
}
.mt-1{
  margin-top:  0.25rem;
}
.mt-1\.5{
  margin-top:  0.375rem;
}
.mt-12{
  margin-top:  3rem;
}
.mt-2{
  margin-top:  0.5rem;
}
.mt-2\.5{
  margin-top:  0.625rem;
}
.mt-3{
  margin-top:  0.75rem;
}
.mt-3\.5{
  margin-top:  0.875rem;
}
.mt-4{
  margin-top:  1rem;
}
.mt-5{
  margin-top:  1.25rem;
}
.mt-6{
  margin-top:  1.5rem;
}
.mt-\[18px\]{
  margin-top:  18px;
}
.mt-\[3px\]{
  margin-top:  3px;
}
.mt-auto{
  margin-top:  auto;
}
.mt-px{
  margin-top:  1px;
}
.\!block{
  display:  block !important;
}
.block{
  display:  block;
}
.inline-block{
  display:  inline-block;
}
.inline{
  display:  inline;
}
.flex{
  display:  flex;
}
.inline-flex{
  display:  inline-flex;
}
.table{
  display:  table;
}
.grid{
  display:  grid;
}
.contents{
  display:  contents;
}
.hidden{
  display:  none;
}
.aspect-\[3\/2\]{
  aspect-ratio:  3/2;
}
.\!h-11{
  height:  2.75rem !important;
}
.\!h-5{
  height:  1.25rem !important;
}
.\!h-7{
  height:  1.75rem !important;
}
.h-1\.5{
  height:  0.375rem;
}
.h-10{
  height:  2.5rem;
}
.h-11{
  height:  2.75rem;
}
.h-12{
  height:  3rem;
}
.h-14{
  height:  3.5rem;
}
.h-16{
  height:  4rem;
}
.h-2{
  height:  0.5rem;
}
.h-2\.5{
  height:  0.625rem;
}
.h-20{
  height:  5rem;
}
.h-24{
  height:  6rem;
}
.h-28{
  height:  7rem;
}
.h-3{
  height:  0.75rem;
}
.h-3\.5{
  height:  0.875rem;
}
.h-4{
  height:  1rem;
}
.h-5{
  height:  1.25rem;
}
.h-6{
  height:  1.5rem;
}
.h-7{
  height:  1.75rem;
}
.h-8{
  height:  2rem;
}
.h-9{
  height:  2.25rem;
}
.h-\[118px\]{
  height:  118px;
}
.h-\[11px\]{
  height:  11px;
}
.h-\[130px\]{
  height:  130px;
}
.h-\[132px\]{
  height:  132px;
}
.h-\[13px\]{
  height:  13px;
}
.h-\[14px\]{
  height:  14px;
}
.h-\[15px\]{
  height:  15px;
}
.h-\[18px\]{
  height:  18px;
}
.h-\[22px\]{
  height:  22px;
}
.h-\[23px\]{
  height:  23px;
}
.h-\[26px\]{
  height:  26px;
}
.h-\[30px\]{
  height:  30px;
}
.h-\[31px\]{
  height:  31px;
}
.h-\[34px\]{
  height:  34px;
}
.h-\[52px\]{
  height:  52px;
}
.h-\[5px\]{
  height:  5px;
}
.h-\[64px\]{
  height:  64px;
}
.h-\[86px\]{
  height:  86px;
}
.h-\[9px\]{
  height:  9px;
}
.h-\[calc\(100vh-3\.5rem\)\]{
  height:  calc(100vh - 3.5rem);
}
.h-\[calc\(var\(--erp-row-h\)-4px\)\]{
  height:  calc(var(--erp-row-h) - 4px);
}
.h-\[max\(2\.25rem\2c var\(--erp-control-h\)\)\]{
  height:  max(2.25rem, var(--erp-control-h));
}
.h-\[var\(--erp-control-h\)\]{
  height:  var(--erp-control-h);
}
.h-\[var\(--erp-row-h\)\]{
  height:  var(--erp-row-h);
}
.h-fit{
  height:  -moz-fit-content;
  height:  fit-content;
}
.h-full{
  height:  100%;
}
.h-screen{
  height:  100vh;
}
.max-h-56{
  max-height:  14rem;
}
.max-h-64{
  max-height:  16rem;
}
.max-h-\[250px\]{
  max-height:  250px;
}
.max-h-\[28rem\]{
  max-height:  28rem;
}
.max-h-\[400px\]{
  max-height:  400px;
}
.max-h-\[50px\]{
  max-height:  50px;
}
.max-h-\[88vh\]{
  max-height:  88vh;
}
.max-h-\[90vh\]{
  max-height:  90vh;
}
.max-h-full{
  max-height:  100%;
}
.min-h-0{
  min-height:  0px;
}
.min-h-10{
  min-height:  2.5rem;
}
.min-h-11{
  min-height:  2.75rem;
}
.min-h-12{
  min-height:  3rem;
}
.min-h-14{
  min-height:  3.5rem;
}
.min-h-16{
  min-height:  4rem;
}
.min-h-9{
  min-height:  2.25rem;
}
.min-h-\[12rem\]{
  min-height:  12rem;
}
.min-h-\[3rem\]{
  min-height:  3rem;
}
.min-h-\[4\.25rem\]{
  min-height:  4.25rem;
}
.min-h-\[48px\]{
  min-height:  48px;
}
.min-h-\[5\.5rem\]{
  min-height:  5.5rem;
}
.min-h-\[52px\]{
  min-height:  52px;
}
.min-h-\[60vh\]{
  min-height:  60vh;
}
.min-h-\[7\.5rem\]{
  min-height:  7.5rem;
}
.min-h-\[var\(--erp-control-h\)\]{
  min-height:  var(--erp-control-h);
}
.min-h-screen{
  min-height:  100vh;
}
.\!w-\[min\(28rem\2c 100\%\)\]{
  width:  min(28rem, 100%) !important;
}
.\!w-\[min\(42rem\2c 100\%\)\]{
  width:  min(42rem, 100%) !important;
}
.\!w-\[min\(512px\2c 100\%\)\]{
  width:  min(512px, 100%) !important;
}
.w-0\.5{
  width:  0.125rem;
}
.w-1{
  width:  0.25rem;
}
.w-1\.5{
  width:  0.375rem;
}
.w-1\/2{
  width:  50%;
}
.w-1\/3{
  width:  33.333333%;
}
.w-10{
  width:  2.5rem;
}
.w-11{
  width:  2.75rem;
}
.w-12{
  width:  3rem;
}
.w-14{
  width:  3.5rem;
}
.w-16{
  width:  4rem;
}
.w-2{
  width:  0.5rem;
}
.w-2\.5{
  width:  0.625rem;
}
.w-2\/3{
  width:  66.666667%;
}
.w-20{
  width:  5rem;
}
.w-24{
  width:  6rem;
}
.w-28{
  width:  7rem;
}
.w-3{
  width:  0.75rem;
}
.w-3\.5{
  width:  0.875rem;
}
.w-3\/4{
  width:  75%;
}
.w-3\/5{
  width:  60%;
}
.w-32{
  width:  8rem;
}
.w-4{
  width:  1rem;
}
.w-40{
  width:  10rem;
}
.w-44{
  width:  11rem;
}
.w-5{
  width:  1.25rem;
}
.w-56{
  width:  14rem;
}
.w-6{
  width:  1.5rem;
}
.w-64{
  width:  16rem;
}
.w-7{
  width:  1.75rem;
}
.w-72{
  width:  18rem;
}
.w-8{
  width:  2rem;
}
.w-80{
  width:  20rem;
}
.w-9{
  width:  2.25rem;
}
.w-\[11px\]{
  width:  11px;
}
.w-\[132px\]{
  width:  132px;
}
.w-\[13px\]{
  width:  13px;
}
.w-\[14px\]{
  width:  14px;
}
.w-\[15px\]{
  width:  15px;
}
.w-\[168px\]{
  width:  168px;
}
.w-\[18px\]{
  width:  18px;
}
.w-\[190px\]{
  width:  190px;
}
.w-\[200\%\]{
  width:  200%;
}
.w-\[220px\]{
  width:  220px;
}
.w-\[22px\]{
  width:  22px;
}
.w-\[40px\]{
  width:  40px;
}
.w-\[440px\]{
  width:  440px;
}
.w-\[460px\]{
  width:  460px;
}
.w-\[560px\]{
  width:  560px;
}
.w-\[640px\]{
  width:  640px;
}
.w-\[64px\]{
  width:  64px;
}
.w-\[9px\]{
  width:  9px;
}
.w-\[calc\(100\%\+1\.75rem\)\]{
  width:  calc(100% + 1.75rem);
}
.w-auto{
  width:  auto;
}
.w-full{
  width:  100%;
}
.w-px{
  width:  1px;
}
.min-w-0{
  min-width:  0px;
}
.min-w-\[10rem\]{
  min-width:  10rem;
}
.min-w-\[140px\]{
  min-width:  140px;
}
.min-w-\[160px\]{
  min-width:  160px;
}
.min-w-\[200px\]{
  min-width:  200px;
}
.min-w-\[30px\]{
  min-width:  30px;
}
.min-w-\[38px\]{
  min-width:  38px;
}
.min-w-\[600px\]{
  min-width:  600px;
}
.min-w-\[60px\]{
  min-width:  60px;
}
.min-w-\[720px\]{
  min-width:  720px;
}
.min-w-\[820px\]{
  min-width:  820px;
}
.min-w-max{
  min-width:  -moz-max-content;
  min-width:  max-content;
}
.max-w-2xl{
  max-width:  42rem;
}
.max-w-4xl{
  max-width:  56rem;
}
.max-w-6xl{
  max-width:  72rem;
}
.max-w-7xl{
  max-width:  80rem;
}
.max-w-\[100px\]{
  max-width:  100px;
}
.max-w-\[13rem\]{
  max-width:  13rem;
}
.max-w-\[1440px\]{
  max-width:  1440px;
}
.max-w-\[14rem\]{
  max-width:  14rem;
}
.max-w-\[260px\]{
  max-width:  260px;
}
.max-w-\[320px\]{
  max-width:  320px;
}
.max-w-full{
  max-width:  100%;
}
.max-w-lg{
  max-width:  32rem;
}
.max-w-md{
  max-width:  28rem;
}
.max-w-sm{
  max-width:  24rem;
}
.max-w-xs{
  max-width:  20rem;
}
.flex-1{
  flex:  1 1 0%;
}
.flex-none{
  flex:  none;
}
.flex-shrink-0{
  flex-shrink:  0;
}
.shrink{
  flex-shrink:  1;
}
.shrink-0{
  flex-shrink:  0;
}
.grow{
  flex-grow:  1;
}
.table-fixed{
  table-layout:  fixed;
}
.border-collapse{
  border-collapse:  collapse;
}
.border-separate{
  border-collapse:  separate;
}
.border-spacing-1{
  --tw-border-spacing-x:  0.25rem;
  --tw-border-spacing-y:  0.25rem;
  border-spacing:  var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.-translate-y-1\/2{
  --tw-translate-y:  -50%;
  transform:  translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180{
  --tw-rotate:  180deg;
  transform:  translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45{
  --tw-rotate:  45deg;
  transform:  translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90{
  --tw-rotate:  90deg;
  transform:  translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform:  translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes ping{
  75%, 100%{
    transform:  scale(2);
    opacity:  0;
  }
}
.animate-ping{
  animation:  ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse{
  50%{
    opacity:  .5;
  }
}
.animate-pulse{
  animation:  pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{
  to{
    transform:  rotate(360deg);
  }
}
.animate-spin{
  animation:  spin 1s linear infinite;
}
.cursor-help{
  cursor:  help;
}
.cursor-not-allowed{
  cursor:  not-allowed;
}
.cursor-pointer{
  cursor:  pointer;
}
.select-none{
  -webkit-user-select:  none;
     -moz-user-select:  none;
          user-select:  none;
}
.select-all{
  -webkit-user-select:  all;
     -moz-user-select:  all;
          user-select:  all;
}
.resize-none{
  resize:  none;
}
.resize{
  resize:  both;
}
.scroll-mt-4{
  scroll-margin-top:  1rem;
}
.appearance-none{
  -webkit-appearance:  none;
     -moz-appearance:  none;
          appearance:  none;
}
.grid-cols-1{
  grid-template-columns:  repeat(1, minmax(0, 1fr));
}
.grid-cols-12{
  grid-template-columns:  repeat(12, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns:  repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
  grid-template-columns:  repeat(3, minmax(0, 1fr));
}
.grid-cols-4{
  grid-template-columns:  repeat(4, minmax(0, 1fr));
}
.grid-cols-6{
  grid-template-columns:  repeat(6, minmax(0, 1fr));
}
.grid-cols-7{
  grid-template-columns:  repeat(7, minmax(0, 1fr));
}
.grid-cols-\[1fr_auto_auto_auto\]{
  grid-template-columns:  1fr auto auto auto;
}
.\!flex-col{
  flex-direction:  column !important;
}
.flex-col{
  flex-direction:  column;
}
.flex-wrap{
  flex-wrap:  wrap;
}
.place-items-center{
  place-items:  center;
}
.\!items-start{
  align-items:  flex-start !important;
}
.items-start{
  align-items:  flex-start;
}
.\!items-end{
  align-items:  flex-end !important;
}
.items-end{
  align-items:  flex-end;
}
.\!items-center{
  align-items:  center !important;
}
.items-center{
  align-items:  center;
}
.items-baseline{
  align-items:  baseline;
}
.\!justify-end{
  justify-content:  flex-end !important;
}
.justify-end{
  justify-content:  flex-end;
}
.justify-center{
  justify-content:  center;
}
.justify-between{
  justify-content:  space-between;
}
.\!gap-0{
  gap:  0px !important;
}
.\!gap-1{
  gap:  0.25rem !important;
}
.gap-0\.5{
  gap:  0.125rem;
}
.gap-1{
  gap:  0.25rem;
}
.gap-1\.5{
  gap:  0.375rem;
}
.gap-2{
  gap:  0.5rem;
}
.gap-2\.5{
  gap:  0.625rem;
}
.gap-3{
  gap:  0.75rem;
}
.gap-3\.5{
  gap:  0.875rem;
}
.gap-4{
  gap:  1rem;
}
.gap-5{
  gap:  1.25rem;
}
.gap-6{
  gap:  1.5rem;
}
.gap-8{
  gap:  2rem;
}
.gap-\[2px\]{
  gap:  2px;
}
.gap-\[3px\]{
  gap:  3px;
}
.gap-\[var\(--erp-gap\)\]{
  gap:  var(--erp-gap);
}
.gap-px{
  gap:  1px;
}
.gap-x-2\.5{
  -moz-column-gap:  0.625rem;
       column-gap:  0.625rem;
}
.gap-x-3{
  -moz-column-gap:  0.75rem;
       column-gap:  0.75rem;
}
.gap-x-4{
  -moz-column-gap:  1rem;
       column-gap:  1rem;
}
.gap-x-8{
  -moz-column-gap:  2rem;
       column-gap:  2rem;
}
.gap-y-1{
  row-gap:  0.25rem;
}
.gap-y-2{
  row-gap:  0.5rem;
}
.gap-y-3{
  row-gap:  0.75rem;
}
.gap-y-4{
  row-gap:  1rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:  0;
  margin-right:  calc(0.25rem * var(--tw-space-x-reverse));
  margin-left:  calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:  0;
  margin-top:  calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:  calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:  0;
  margin-top:  calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:  calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:  0;
  margin-top:  calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:  calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:  0;
  margin-top:  calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:  calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:  0;
  margin-top:  calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:  calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:  0;
  margin-top:  calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:  calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:  0;
  margin-top:  calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:  calc(0.875rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:  0;
  margin-top:  calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:  calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:  0;
  margin-top:  calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:  calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:  0;
  margin-top:  calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:  calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse:  0;
  border-top-width:  calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:  calc(1px * var(--tw-divide-y-reverse));
}
.divide-\[color\:var\(--erp-divider\)\] > :not([hidden]) ~ :not([hidden]){
  border-color:  var(--erp-divider);
}
.divide-\[var\(--erp-divider\)\] > :not([hidden]) ~ :not([hidden]){
  border-color:  var(--erp-divider);
}
.divide-ccp-hairline > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:  1;
  border-color:  rgb(240 242 245 / var(--tw-divide-opacity, 1));
}
.divide-slate-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:  1;
  border-color:  rgb(241 245 249 / var(--tw-divide-opacity, 1));
}
.divide-surface-50 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:  1;
  border-color:  rgb(255 255 255 / var(--tw-divide-opacity, 1));
}
.overflow-auto{
  overflow:  auto;
}
.overflow-hidden{
  overflow:  hidden;
}
.overflow-x-auto{
  overflow-x:  auto;
}
.overflow-y-auto{
  overflow-y:  auto;
}
.truncate{
  overflow:  hidden;
  text-overflow:  ellipsis;
  white-space:  nowrap;
}
.whitespace-nowrap{
  white-space:  nowrap;
}
.break-all{
  word-break:  break-all;
}
.\!rounded-\[5px\]{
  border-radius:  5px !important;
}
.rounded{
  border-radius:  0.25rem;
}
.rounded-2xl{
  border-radius:  1rem;
}
.rounded-3xl{
  border-radius:  1.5rem;
}
.rounded-\[1\.75rem\]{
  border-radius:  1.75rem;
}
.rounded-\[10px\]{
  border-radius:  10px;
}
.rounded-\[2rem\]{
  border-radius:  2rem;
}
.rounded-\[3px\]{
  border-radius:  3px;
}
.rounded-\[5px\]{
  border-radius:  5px;
}
.rounded-\[6px\]{
  border-radius:  6px;
}
.rounded-\[7px\]{
  border-radius:  7px;
}
.rounded-\[9px\]{
  border-radius:  9px;
}
.rounded-\[var\(--erp-radius\)\]{
  border-radius:  var(--erp-radius);
}
.rounded-\[var\(--erp-radius-lg\)\]{
  border-radius:  var(--erp-radius-lg);
}
.rounded-full{
  border-radius:  9999px;
}
.rounded-lg{
  border-radius:  0.5rem;
}
.rounded-md{
  border-radius:  0.375rem;
}
.rounded-sm{
  border-radius:  0.125rem;
}
.rounded-xl{
  border-radius:  0.75rem;
}
.rounded-t-2xl{
  border-top-left-radius:  1rem;
  border-top-right-radius:  1rem;
}
.rounded-t-\[3px\]{
  border-top-left-radius:  3px;
  border-top-right-radius:  3px;
}
.rounded-t-md{
  border-top-left-radius:  0.375rem;
  border-top-right-radius:  0.375rem;
}
.rounded-t-xl{
  border-top-left-radius:  0.75rem;
  border-top-right-radius:  0.75rem;
}
.border{
  border-width:  1px;
}
.border-2{
  border-width:  2px;
}
.border-\[1\.5px\]{
  border-width:  1.5px;
}
.border-y{
  border-top-width:  1px;
  border-bottom-width:  1px;
}
.\!border-b-0{
  border-bottom-width:  0px !important;
}
.\!border-t{
  border-top-width:  1px !important;
}
.border-b{
  border-bottom-width:  1px;
}
.border-b-2{
  border-bottom-width:  2px;
}
.border-b-4{
  border-bottom-width:  4px;
}
.border-l{
  border-left-width:  1px;
}
.border-l-4{
  border-left-width:  4px;
}
.border-l-\[3px\]{
  border-left-width:  3px;
}
.border-r{
  border-right-width:  1px;
}
.border-t{
  border-top-width:  1px;
}
.border-t-2{
  border-top-width:  2px;
}
.border-t-4{
  border-top-width:  4px;
}
.border-t-\[6px\]{
  border-top-width:  6px;
}
.border-dashed{
  border-style:  dashed;
}
.\!border-\[color\:var\(--erp-divider\)\]{
  border-color:  var(--erp-divider) !important;
}
.border-\[color\:var\(--erp-border\)\]{
  border-color:  var(--erp-border);
}
.border-\[color\:var\(--erp-divider\)\]{
  border-color:  var(--erp-divider);
}
.border-\[color\:var\(--erp-st-overdue-dot\)\]{
  border-color:  var(--erp-st-overdue-dot);
}
.border-\[color\:var\(--erp-st-paid-dot\)\]{
  border-color:  var(--erp-st-paid-dot);
}
.border-\[color\:var\(--erp-st-pending-dot\)\]{
  border-color:  var(--erp-st-pending-dot);
}
.border-\[color\:var\(--erp-text\)\]{
  border-color:  var(--erp-text);
}
.border-\[var\(--bx-border\)\]{
  border-color:  var(--bx-border);
}
.border-\[var\(--erp-border\)\]{
  border-color:  var(--erp-border);
}
.border-\[var\(--erp-border-input\)\]{
  border-color:  var(--erp-border-input);
}
.border-\[var\(--erp-divider\)\]{
  border-color:  var(--erp-divider);
}
.border-\[var\(--erp-selected-bar\)\]{
  border-color:  var(--erp-selected-bar);
}
.border-\[var\(--erp-success-line\)\]{
  border-color:  var(--erp-success-line);
}
.border-\[var\(--erp-warning-line\)\]{
  border-color:  var(--erp-warning-line);
}
.border-amber-200{
  --tw-border-opacity:  1;
  border-color:  rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-400\/40{
  border-color:  rgb(251 191 36 / 0.4);
}
.border-black{
  --tw-border-opacity:  1;
  border-color:  rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.border-blue-200{
  --tw-border-opacity:  1;
  border-color:  rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-ccp-alert-bd{
  --tw-border-opacity:  1;
  border-color:  rgb(246 210 204 / var(--tw-border-opacity, 1));
}
.border-ccp-border{
  --tw-border-opacity:  1;
  border-color:  rgb(228 231 236 / var(--tw-border-opacity, 1));
}
.border-ccp-good-bd{
  --tw-border-opacity:  1;
  border-color:  rgb(201 238 220 / var(--tw-border-opacity, 1));
}
.border-ccp-hairline{
  --tw-border-opacity:  1;
  border-color:  rgb(240 242 245 / var(--tw-border-opacity, 1));
}
.border-ccp-hairline-soft{
  --tw-border-opacity:  1;
  border-color:  rgb(247 248 250 / var(--tw-border-opacity, 1));
}
.border-ccp-info-bd{
  --tw-border-opacity:  1;
  border-color:  rgb(216 227 240 / var(--tw-border-opacity, 1));
}
.border-ccp-navy{
  --tw-border-opacity:  1;
  border-color:  rgb(13 30 82 / var(--tw-border-opacity, 1));
}
.border-ccp-session-bd{
  --tw-border-opacity:  1;
  border-color:  rgb(224 216 249 / var(--tw-border-opacity, 1));
}
.border-ccp-warn-bd{
  --tw-border-opacity:  1;
  border-color:  rgb(247 226 182 / var(--tw-border-opacity, 1));
}
.border-emerald-200{
  --tw-border-opacity:  1;
  border-color:  rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-400{
  --tw-border-opacity:  1;
  border-color:  rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.border-emerald-500{
  --tw-border-opacity:  1;
  border-color:  rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.border-gray-700{
  --tw-border-opacity:  1;
  border-color:  rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-green-300{
  --tw-border-opacity:  1;
  border-color:  rgb(134 239 172 / var(--tw-border-opacity, 1));
}
.border-lime-400{
  --tw-border-opacity:  1;
  border-color:  rgb(171 219 75 / var(--tw-border-opacity, 1));
}
.border-navy-100{
  --tw-border-opacity:  1;
  border-color:  rgb(217 225 245 / var(--tw-border-opacity, 1));
}
.border-navy-200{
  --tw-border-opacity:  1;
  border-color:  rgb(179 194 234 / var(--tw-border-opacity, 1));
}
.border-navy-300{
  --tw-border-opacity:  1;
  border-color:  rgb(130 153 214 / var(--tw-border-opacity, 1));
}
.border-navy-800{
  --tw-border-opacity:  1;
  border-color:  rgb(19 37 94 / var(--tw-border-opacity, 1));
}
.border-red-200{
  --tw-border-opacity:  1;
  border-color:  rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300\/60{
  border-color:  rgb(252 165 165 / 0.6);
}
.border-rose-200{
  --tw-border-opacity:  1;
  border-color:  rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-slate-200{
  --tw-border-opacity:  1;
  border-color:  rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-300{
  --tw-border-opacity:  1;
  border-color:  rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-surface-100{
  --tw-border-opacity:  1;
  border-color:  rgb(241 242 242 / var(--tw-border-opacity, 1));
}
.border-surface-200{
  --tw-border-opacity:  1;
  border-color:  rgb(228 230 231 / var(--tw-border-opacity, 1));
}
.border-surface-300{
  --tw-border-opacity:  1;
  border-color:  rgb(201 204 204 / var(--tw-border-opacity, 1));
}
.border-surface-50{
  --tw-border-opacity:  1;
  border-color:  rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-teal-200{
  --tw-border-opacity:  1;
  border-color:  rgb(143 229 216 / var(--tw-border-opacity, 1));
}
.border-teal-400{
  --tw-border-opacity:  1;
  border-color:  rgb(46 191 174 / var(--tw-border-opacity, 1));
}
.border-transparent{
  border-color:  transparent;
}
.border-white\/10{
  border-color:  rgb(255 255 255 / 0.1);
}
.border-white\/15{
  border-color:  rgb(255 255 255 / 0.15);
}
.border-white\/20{
  border-color:  rgb(255 255 255 / 0.2);
}
.border-white\/25{
  border-color:  rgb(255 255 255 / 0.25);
}
.border-white\/30{
  border-color:  rgb(255 255 255 / 0.3);
}
.border-white\/\[0\.07\]{
  border-color:  rgb(255 255 255 / 0.07);
}
.border-white\/\[0\.15\]{
  border-color:  rgb(255 255 255 / 0.15);
}
.border-l-\[var\(--erp-cat-1\)\]{
  border-left-color:  var(--erp-cat-1);
}
.border-l-\[var\(--erp-cat-2\)\]{
  border-left-color:  var(--erp-cat-2);
}
.border-l-\[var\(--erp-cat-3\)\]{
  border-left-color:  var(--erp-cat-3);
}
.border-l-teal-400{
  --tw-border-opacity:  1;
  border-left-color:  rgb(46 191 174 / var(--tw-border-opacity, 1));
}
.border-t-lime-400{
  --tw-border-opacity:  1;
  border-top-color:  rgb(171 219 75 / var(--tw-border-opacity, 1));
}
.border-t-teal-400{
  --tw-border-opacity:  1;
  border-top-color:  rgb(46 191 174 / var(--tw-border-opacity, 1));
}
.bg-\[color-mix\(in_srgb\2c var\(--erp-cat-1\)_18\%\2c transparent\)\]{
  background-color:  color-mix(in srgb,var(--erp-cat-1) 18%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--erp-cat-1\)_28\%\2c transparent\)\]{
  background-color:  color-mix(in srgb,var(--erp-cat-1) 28%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--erp-cat-1\)_42\%\2c transparent\)\]{
  background-color:  color-mix(in srgb,var(--erp-cat-1) 42%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--erp-cat-1\)_58\%\2c transparent\)\]{
  background-color:  color-mix(in srgb,var(--erp-cat-1) 58%,transparent);
}
.bg-\[color-mix\(in_srgb\2c var\(--erp-cat-1\)_78\%\2c transparent\)\]{
  background-color:  color-mix(in srgb,var(--erp-cat-1) 78%,transparent);
}
.bg-\[color\:var\(--erp-error-bg\)\]{
  background-color:  var(--erp-error-bg);
}
.bg-\[color\:var\(--erp-info-bg\)\]{
  background-color:  var(--erp-info-bg);
}
.bg-\[color\:var\(--erp-primary\)\]{
  background-color:  var(--erp-primary);
}
.bg-\[color\:var\(--erp-success-bg\)\]{
  background-color:  var(--erp-success-bg);
}
.bg-\[color\:var\(--erp-surface\)\]{
  background-color:  var(--erp-surface);
}
.bg-\[color\:var\(--erp-surface-raised\)\]{
  background-color:  var(--erp-surface-raised);
}
.bg-\[color\:var\(--erp-surface-selected\)\]{
  background-color:  var(--erp-surface-selected);
}
.bg-\[color\:var\(--erp-surface-sunken\)\]{
  background-color:  var(--erp-surface-sunken);
}
.bg-\[color\:var\(--erp-warning-bg\)\]{
  background-color:  var(--erp-warning-bg);
}
.bg-\[var\(--bx-bg\)\]{
  background-color:  var(--bx-bg);
}
.bg-\[var\(--erp-canvas\)\]{
  background-color:  var(--erp-canvas);
}
.bg-\[var\(--erp-cat-1\)\]{
  background-color:  var(--erp-cat-1);
}
.bg-\[var\(--erp-cat-2\)\]{
  background-color:  var(--erp-cat-2);
}
.bg-\[var\(--erp-divider\)\]{
  background-color:  var(--erp-divider);
}
.bg-\[var\(--erp-error-bg\)\]{
  background-color:  var(--erp-error-bg);
}
.bg-\[var\(--erp-primary\)\]{
  background-color:  var(--erp-primary);
}
.bg-\[var\(--erp-scrim\)\]{
  background-color:  var(--erp-scrim);
}
.bg-\[var\(--erp-shell-active-bg\)\]{
  background-color:  var(--erp-shell-active-bg);
}
.bg-\[var\(--erp-shell-bg\)\]{
  background-color:  var(--erp-shell-bg);
}
.bg-\[var\(--erp-st-hold-dot\)\]{
  background-color:  var(--erp-st-hold-dot);
}
.bg-\[var\(--erp-st-overdue-dot\)\]{
  background-color:  var(--erp-st-overdue-dot);
}
.bg-\[var\(--erp-st-paid-dot\)\]{
  background-color:  var(--erp-st-paid-dot);
}
.bg-\[var\(--erp-st-pending-dot\)\]{
  background-color:  var(--erp-st-pending-dot);
}
.bg-\[var\(--erp-success-bg\)\]{
  background-color:  var(--erp-success-bg);
}
.bg-\[var\(--erp-surface\)\]{
  background-color:  var(--erp-surface);
}
.bg-\[var\(--erp-surface-raised\)\]{
  background-color:  var(--erp-surface-raised);
}
.bg-\[var\(--erp-surface-selected\)\]{
  background-color:  var(--erp-surface-selected);
}
.bg-\[var\(--erp-surface-sunken\)\]{
  background-color:  var(--erp-surface-sunken);
}
.bg-\[var\(--erp-text-disabled\)\]{
  background-color:  var(--erp-text-disabled);
}
.bg-\[var\(--erp-topbar-bg\)\]{
  background-color:  var(--erp-topbar-bg);
}
.bg-\[var\(--erp-warning-bg\)\]{
  background-color:  var(--erp-warning-bg);
}
.bg-amber-100{
  --tw-bg-opacity:  1;
  background-color:  rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-400{
  --tw-bg-opacity:  1;
  background-color:  rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-400\/20{
  background-color:  rgb(251 191 36 / 0.2);
}
.bg-amber-400\/25{
  background-color:  rgb(251 191 36 / 0.25);
}
.bg-amber-50{
  --tw-bg-opacity:  1;
  background-color:  rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-500{
  --tw-bg-opacity:  1;
  background-color:  rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-700{
  --tw-bg-opacity:  1;
  background-color:  rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.bg-amber-700\/80{
  background-color:  rgb(180 83 9 / 0.8);
}
.bg-black\/50{
  background-color:  rgb(0 0 0 / 0.5);
}
.bg-black\/70{
  background-color:  rgb(0 0 0 / 0.7);
}
.bg-blue-400{
  --tw-bg-opacity:  1;
  background-color:  rgb(96 165 250 / var(--tw-bg-opacity, 1));
}
.bg-blue-50{
  --tw-bg-opacity:  1;
  background-color:  rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500{
  --tw-bg-opacity:  1;
  background-color:  rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-brand-900{
  --tw-bg-opacity:  1;
  background-color:  rgb(13 30 82 / var(--tw-bg-opacity, 1));
}
.bg-brand-950{
  --tw-bg-opacity:  1;
  background-color:  rgb(8 19 58 / var(--tw-bg-opacity, 1));
}
.bg-ccp-absent{
  --tw-bg-opacity:  1;
  background-color:  rgb(208 213 221 / var(--tw-bg-opacity, 1));
}
.bg-ccp-alert-bg{
  --tw-bg-opacity:  1;
  background-color:  rgb(254 241 239 / var(--tw-bg-opacity, 1));
}
.bg-ccp-alert-row{
  --tw-bg-opacity:  1;
  background-color:  rgb(253 247 246 / var(--tw-bg-opacity, 1));
}
.bg-ccp-amber{
  --tw-bg-opacity:  1;
  background-color:  rgb(235 159 7 / var(--tw-bg-opacity, 1));
}
.bg-ccp-canvas{
  --tw-bg-opacity:  1;
  background-color:  rgb(246 247 249 / var(--tw-bg-opacity, 1));
}
.bg-ccp-card{
  --tw-bg-opacity:  1;
  background-color:  rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-ccp-emerald{
  --tw-bg-opacity:  1;
  background-color:  rgb(34 165 106 / var(--tw-bg-opacity, 1));
}
.bg-ccp-fg\/40{
  background-color:  rgb(16 24 40 / 0.4);
}
.bg-ccp-good-bg{
  --tw-bg-opacity:  1;
  background-color:  rgb(236 250 242 / var(--tw-bg-opacity, 1));
}
.bg-ccp-hairline{
  --tw-bg-opacity:  1;
  background-color:  rgb(240 242 245 / var(--tw-bg-opacity, 1));
}
.bg-ccp-info-bg{
  --tw-bg-opacity:  1;
  background-color:  rgb(238 243 249 / var(--tw-bg-opacity, 1));
}
.bg-ccp-navy{
  --tw-bg-opacity:  1;
  background-color:  rgb(13 30 82 / var(--tw-bg-opacity, 1));
}
.bg-ccp-selected{
  --tw-bg-opacity:  1;
  background-color:  rgb(247 249 252 / var(--tw-bg-opacity, 1));
}
.bg-ccp-session-bg{
  --tw-bg-opacity:  1;
  background-color:  rgb(244 241 253 / var(--tw-bg-opacity, 1));
}
.bg-ccp-skeleton{
  --tw-bg-opacity:  1;
  background-color:  rgb(237 239 243 / var(--tw-bg-opacity, 1));
}
.bg-ccp-subtle{
  --tw-bg-opacity:  1;
  background-color:  rgb(242 244 247 / var(--tw-bg-opacity, 1));
}
.bg-ccp-warn-bg{
  --tw-bg-opacity:  1;
  background-color:  rgb(254 246 231 / var(--tw-bg-opacity, 1));
}
.bg-ccp-warn-row{
  --tw-bg-opacity:  1;
  background-color:  rgb(253 252 247 / var(--tw-bg-opacity, 1));
}
.bg-emerald-100{
  --tw-bg-opacity:  1;
  background-color:  rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-300{
  --tw-bg-opacity:  1;
  background-color:  rgb(110 231 183 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400{
  --tw-bg-opacity:  1;
  background-color:  rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400\/20{
  background-color:  rgb(52 211 153 / 0.2);
}
.bg-emerald-50{
  --tw-bg-opacity:  1;
  background-color:  rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50\/40{
  background-color:  rgb(236 253 245 / 0.4);
}
.bg-emerald-500{
  --tw-bg-opacity:  1;
  background-color:  rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/15{
  background-color:  rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/95{
  background-color:  rgb(16 185 129 / 0.95);
}
.bg-emerald-600{
  --tw-bg-opacity:  1;
  background-color:  rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-gray-800{
  --tw-bg-opacity:  1;
  background-color:  rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-green-50{
  --tw-bg-opacity:  1;
  background-color:  rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500{
  --tw-bg-opacity:  1;
  background-color:  rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-lime-400{
  --tw-bg-opacity:  1;
  background-color:  rgb(171 219 75 / var(--tw-bg-opacity, 1));
}
.bg-lime-50{
  --tw-bg-opacity:  1;
  background-color:  rgb(246 251 232 / var(--tw-bg-opacity, 1));
}
.bg-navy-100{
  --tw-bg-opacity:  1;
  background-color:  rgb(217 225 245 / var(--tw-bg-opacity, 1));
}
.bg-navy-100\/60{
  background-color:  rgb(217 225 245 / 0.6);
}
.bg-navy-200{
  --tw-bg-opacity:  1;
  background-color:  rgb(179 194 234 / var(--tw-bg-opacity, 1));
}
.bg-navy-300{
  --tw-bg-opacity:  1;
  background-color:  rgb(130 153 214 / var(--tw-bg-opacity, 1));
}
.bg-navy-400{
  --tw-bg-opacity:  1;
  background-color:  rgb(86 114 190 / var(--tw-bg-opacity, 1));
}
.bg-navy-50{
  --tw-bg-opacity:  1;
  background-color:  rgb(238 242 251 / var(--tw-bg-opacity, 1));
}
.bg-navy-900{
  --tw-bg-opacity:  1;
  background-color:  rgb(13 30 82 / var(--tw-bg-opacity, 1));
}
.bg-navy-900\/20{
  background-color:  rgb(13 30 82 / 0.2);
}
.bg-navy-900\/80{
  background-color:  rgb(13 30 82 / 0.8);
}
.bg-red-100{
  --tw-bg-opacity:  1;
  background-color:  rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-300{
  --tw-bg-opacity:  1;
  background-color:  rgb(252 165 165 / var(--tw-bg-opacity, 1));
}
.bg-red-400{
  --tw-bg-opacity:  1;
  background-color:  rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-400\/20{
  background-color:  rgb(248 113 113 / 0.2);
}
.bg-red-50{
  --tw-bg-opacity:  1;
  background-color:  rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500{
  --tw-bg-opacity:  1;
  background-color:  rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/25{
  background-color:  rgb(239 68 68 / 0.25);
}
.bg-red-600{
  --tw-bg-opacity:  1;
  background-color:  rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-rose-100{
  --tw-bg-opacity:  1;
  background-color:  rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-rose-50{
  --tw-bg-opacity:  1;
  background-color:  rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-rose-600{
  --tw-bg-opacity:  1;
  background-color:  rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.bg-sky-500{
  --tw-bg-opacity:  1;
  background-color:  rgb(14 165 233 / var(--tw-bg-opacity, 1));
}
.bg-sky-500\/95{
  background-color:  rgb(14 165 233 / 0.95);
}
.bg-slate-50{
  --tw-bg-opacity:  1;
  background-color:  rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-surface-100{
  --tw-bg-opacity:  1;
  background-color:  rgb(241 242 242 / var(--tw-bg-opacity, 1));
}
.bg-surface-300{
  --tw-bg-opacity:  1;
  background-color:  rgb(201 204 204 / var(--tw-bg-opacity, 1));
}
.bg-surface-50{
  --tw-bg-opacity:  1;
  background-color:  rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-surface-50\/60{
  background-color:  rgb(255 255 255 / 0.6);
}
.bg-surface-50\/70{
  background-color:  rgb(255 255 255 / 0.7);
}
.bg-teal-300{
  --tw-bg-opacity:  1;
  background-color:  rgb(87 211 195 / var(--tw-bg-opacity, 1));
}
.bg-teal-400{
  --tw-bg-opacity:  1;
  background-color:  rgb(46 191 174 / var(--tw-bg-opacity, 1));
}
.bg-teal-400\/20{
  background-color:  rgb(46 191 174 / 0.2);
}
.bg-teal-50{
  --tw-bg-opacity:  1;
  background-color:  rgb(232 250 247 / var(--tw-bg-opacity, 1));
}
.bg-teal-500{
  --tw-bg-opacity:  1;
  background-color:  rgb(34 167 151 / var(--tw-bg-opacity, 1));
}
.bg-white{
  --tw-bg-opacity:  1;
  background-color:  rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10{
  background-color:  rgb(255 255 255 / 0.1);
}
.bg-white\/25{
  background-color:  rgb(255 255 255 / 0.25);
}
.bg-white\/70{
  background-color:  rgb(255 255 255 / 0.7);
}
.bg-white\/\[0\.05\]{
  background-color:  rgb(255 255 255 / 0.05);
}
.bg-white\/\[0\.06\]{
  background-color:  rgb(255 255 255 / 0.06);
}
.bg-white\/\[0\.07\]{
  background-color:  rgb(255 255 255 / 0.07);
}
.bg-white\/\[0\.08\]{
  background-color:  rgb(255 255 255 / 0.08);
}
.bg-yellow-500{
  --tw-bg-opacity:  1;
  background-color:  rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-\[linear-gradient\(180deg\2c oklch\(22\%_0\.09_160\)\2c oklch\(15\%_0\.065_160\)\)\]{
  background-image:  linear-gradient(180deg,oklch(22% 0.09 160),oklch(15% 0.065 160));
}
.bg-bx-gradient{
  background-image:  linear-gradient(135deg, #B8E34F 0%, #8FD46A 45%, #22B8AA 100%);
}
.bg-gradient-to-br{
  background-image:  linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.from-emerald-950{
  --tw-gradient-from:  #022c22 var(--tw-gradient-from-position);
  --tw-gradient-to:  rgb(2 44 34 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:  var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-emerald-900{
  --tw-gradient-to:  rgb(6 78 59 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops:  var(--tw-gradient-from), #064e3b var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-teal-900{
  --tw-gradient-to:  #144843 var(--tw-gradient-to-position);
}
.object-contain{
  -o-object-fit:  contain;
     object-fit:  contain;
}
.object-cover{
  -o-object-fit:  cover;
     object-fit:  cover;
}
.p-0{
  padding:  0px;
}
.p-0\.5{
  padding:  0.125rem;
}
.p-1{
  padding:  0.25rem;
}
.p-1\.5{
  padding:  0.375rem;
}
.p-10{
  padding:  2.5rem;
}
.p-16{
  padding:  4rem;
}
.p-2{
  padding:  0.5rem;
}
.p-2\.5{
  padding:  0.625rem;
}
.p-3{
  padding:  0.75rem;
}
.p-3\.5{
  padding:  0.875rem;
}
.p-4{
  padding:  1rem;
}
.p-5{
  padding:  1.25rem;
}
.p-6{
  padding:  1.5rem;
}
.p-8{
  padding:  2rem;
}
.p-\[18px\]{
  padding:  18px;
}
.p-\[3px\]{
  padding:  3px;
}
.p-\[var\(--erp-card-p\)\]{
  padding:  var(--erp-card-p);
}
.\!px-2\.5{
  padding-left:  0.625rem !important;
  padding-right:  0.625rem !important;
}
.\!py-3\.5{
  padding-top:  0.875rem !important;
  padding-bottom:  0.875rem !important;
}
.px-1{
  padding-left:  0.25rem;
  padding-right:  0.25rem;
}
.px-1\.5{
  padding-left:  0.375rem;
  padding-right:  0.375rem;
}
.px-2{
  padding-left:  0.5rem;
  padding-right:  0.5rem;
}
.px-2\.5{
  padding-left:  0.625rem;
  padding-right:  0.625rem;
}
.px-3{
  padding-left:  0.75rem;
  padding-right:  0.75rem;
}
.px-3\.5{
  padding-left:  0.875rem;
  padding-right:  0.875rem;
}
.px-4{
  padding-left:  1rem;
  padding-right:  1rem;
}
.px-5{
  padding-left:  1.25rem;
  padding-right:  1.25rem;
}
.px-6{
  padding-left:  1.5rem;
  padding-right:  1.5rem;
}
.px-7{
  padding-left:  1.75rem;
  padding-right:  1.75rem;
}
.px-8{
  padding-left:  2rem;
  padding-right:  2rem;
}
.px-\[11px\]{
  padding-left:  11px;
  padding-right:  11px;
}
.px-\[15px\]{
  padding-left:  15px;
  padding-right:  15px;
}
.px-\[18px\]{
  padding-left:  18px;
  padding-right:  18px;
}
.px-\[7px\]{
  padding-left:  7px;
  padding-right:  7px;
}
.px-\[var\(--erp-card-p\)\]{
  padding-left:  var(--erp-card-p);
  padding-right:  var(--erp-card-p);
}
.px-\[var\(--erp-cell-px\)\]{
  padding-left:  var(--erp-cell-px);
  padding-right:  var(--erp-cell-px);
}
.py-0{
  padding-top:  0px;
  padding-bottom:  0px;
}
.py-0\.5{
  padding-top:  0.125rem;
  padding-bottom:  0.125rem;
}
.py-1{
  padding-top:  0.25rem;
  padding-bottom:  0.25rem;
}
.py-1\.5{
  padding-top:  0.375rem;
  padding-bottom:  0.375rem;
}
.py-10{
  padding-top:  2.5rem;
  padding-bottom:  2.5rem;
}
.py-12{
  padding-top:  3rem;
  padding-bottom:  3rem;
}
.py-14{
  padding-top:  3.5rem;
  padding-bottom:  3.5rem;
}
.py-16{
  padding-top:  4rem;
  padding-bottom:  4rem;
}
.py-2{
  padding-top:  0.5rem;
  padding-bottom:  0.5rem;
}
.py-2\.5{
  padding-top:  0.625rem;
  padding-bottom:  0.625rem;
}
.py-20{
  padding-top:  5rem;
  padding-bottom:  5rem;
}
.py-3{
  padding-top:  0.75rem;
  padding-bottom:  0.75rem;
}
.py-3\.5{
  padding-top:  0.875rem;
  padding-bottom:  0.875rem;
}
.py-4{
  padding-top:  1rem;
  padding-bottom:  1rem;
}
.py-5{
  padding-top:  1.25rem;
  padding-bottom:  1.25rem;
}
.py-6{
  padding-top:  1.5rem;
  padding-bottom:  1.5rem;
}
.py-8{
  padding-top:  2rem;
  padding-bottom:  2rem;
}
.py-\[11px\]{
  padding-top:  11px;
  padding-bottom:  11px;
}
.py-\[13px\]{
  padding-top:  13px;
  padding-bottom:  13px;
}
.py-\[18px\]{
  padding-top:  18px;
  padding-bottom:  18px;
}
.py-\[3px\]{
  padding-top:  3px;
  padding-bottom:  3px;
}
.py-\[7px\]{
  padding-top:  7px;
  padding-bottom:  7px;
}
.\!pt-0{
  padding-top:  0px !important;
}
.pb-0{
  padding-bottom:  0px;
}
.pb-0\.5{
  padding-bottom:  0.125rem;
}
.pb-1{
  padding-bottom:  0.25rem;
}
.pb-1\.5{
  padding-bottom:  0.375rem;
}
.pb-14{
  padding-bottom:  3.5rem;
}
.pb-2{
  padding-bottom:  0.5rem;
}
.pb-2\.5{
  padding-bottom:  0.625rem;
}
.pb-3{
  padding-bottom:  0.75rem;
}
.pb-3\.5{
  padding-bottom:  0.875rem;
}
.pb-4{
  padding-bottom:  1rem;
}
.pb-5{
  padding-bottom:  1.25rem;
}
.pb-6{
  padding-bottom:  1.5rem;
}
.pb-7{
  padding-bottom:  1.75rem;
}
.pb-8{
  padding-bottom:  2rem;
}
.pb-\[18px\]{
  padding-bottom:  18px;
}
.pb-\[var\(--erp-card-p\)\]{
  padding-bottom:  var(--erp-card-p);
}
.pl-12{
  padding-left:  3rem;
}
.pl-2{
  padding-left:  0.5rem;
}
.pl-3{
  padding-left:  0.75rem;
}
.pl-3\.5{
  padding-left:  0.875rem;
}
.pl-4{
  padding-left:  1rem;
}
.pl-8{
  padding-left:  2rem;
}
.pr-2{
  padding-right:  0.5rem;
}
.pr-3\.5{
  padding-right:  0.875rem;
}
.pr-4{
  padding-right:  1rem;
}
.pr-6{
  padding-right:  1.5rem;
}
.pr-8{
  padding-right:  2rem;
}
.pr-9{
  padding-right:  2.25rem;
}
.pt-1{
  padding-top:  0.25rem;
}
.pt-1\.5{
  padding-top:  0.375rem;
}
.pt-10{
  padding-top:  2.5rem;
}
.pt-2{
  padding-top:  0.5rem;
}
.pt-2\.5{
  padding-top:  0.625rem;
}
.pt-3{
  padding-top:  0.75rem;
}
.pt-3\.5{
  padding-top:  0.875rem;
}
.pt-4{
  padding-top:  1rem;
}
.pt-5{
  padding-top:  1.25rem;
}
.pt-6{
  padding-top:  1.5rem;
}
.pt-8{
  padding-top:  2rem;
}
.pt-px{
  padding-top:  1px;
}
.text-left{
  text-align:  left;
}
.text-center{
  text-align:  center;
}
.text-right{
  text-align:  right;
}
.align-middle{
  vertical-align:  middle;
}
.font-display{
  font-family:  Poppins, Segoe UI, system-ui, sans-serif;
}
.font-mono{
  font-family:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.\!text-\[11px\]{
  font-size:  11px !important;
}
.\!text-\[12px\]{
  font-size:  12px !important;
}
.text-2xl{
  font-size:  1.5rem;
  line-height:  2rem;
}
.text-3xl{
  font-size:  1.875rem;
  line-height:  2.25rem;
}
.text-4xl{
  font-size:  2.25rem;
  line-height:  2.5rem;
}
.text-\[10\.5px\]{
  font-size:  10.5px;
}
.text-\[10px\]{
  font-size:  10px;
}
.text-\[11\.5px\]{
  font-size:  11.5px;
}
.text-\[11px\]{
  font-size:  11px;
}
.text-\[12\.5px\]{
  font-size:  12.5px;
}
.text-\[12px\]{
  font-size:  12px;
}
.text-\[13\.5px\]{
  font-size:  13.5px;
}
.text-\[13px\]{
  font-size:  13px;
}
.text-\[14px\]{
  font-size:  14px;
}
.text-\[15px\]{
  font-size:  15px;
}
.text-\[16px\]{
  font-size:  16px;
}
.text-\[17px\]{
  font-size:  17px;
}
.text-\[18px\]{
  font-size:  18px;
}
.text-\[19px\]{
  font-size:  19px;
}
.text-\[20px\]{
  font-size:  20px;
}
.text-\[22px\]{
  font-size:  22px;
}
.text-\[24px\]{
  font-size:  24px;
}
.text-\[26px\]{
  font-size:  26px;
}
.text-\[30px\]{
  font-size:  30px;
}
.text-\[40px\]{
  font-size:  40px;
}
.text-\[44px\]{
  font-size:  44px;
}
.text-\[8px\]{
  font-size:  8px;
}
.text-\[9\.5px\]{
  font-size:  9.5px;
}
.text-\[length\:var\(--erp-font-size\)\]{
  font-size:  var(--erp-font-size);
}
.text-base{
  font-size:  1rem;
  line-height:  1.5rem;
}
.text-lg{
  font-size:  1.125rem;
  line-height:  1.75rem;
}
.text-sm{
  font-size:  0.875rem;
  line-height:  1.25rem;
}
.text-xl{
  font-size:  1.25rem;
  line-height:  1.75rem;
}
.text-xs{
  font-size:  0.75rem;
  line-height:  1rem;
}
.\!font-bold{
  font-weight:  700 !important;
}
.\!font-normal{
  font-weight:  400 !important;
}
.font-black{
  font-weight:  900;
}
.font-bold{
  font-weight:  700;
}
.font-medium{
  font-weight:  500;
}
.font-normal{
  font-weight:  400;
}
.font-semibold{
  font-weight:  600;
}
.uppercase{
  text-transform:  uppercase;
}
.capitalize{
  text-transform:  capitalize;
}
.italic{
  font-style:  italic;
}
.not-italic{
  font-style:  normal;
}
.tabular-nums{
  --tw-numeric-spacing:  tabular-nums;
  font-variant-numeric:  var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.08\]{
  line-height:  1.08;
}
.leading-\[1\.55\]{
  line-height:  1.55;
}
.leading-\[1\.5\]{
  line-height:  1.5;
}
.leading-\[3rem\]{
  line-height:  3rem;
}
.leading-none{
  line-height:  1;
}
.leading-relaxed{
  line-height:  1.625;
}
.leading-snug{
  line-height:  1.375;
}
.leading-tight{
  line-height:  1.25;
}
.tracking-\[0\.02em\]{
  letter-spacing:  0.02em;
}
.tracking-\[0\.06em\]{
  letter-spacing:  0.06em;
}
.tracking-\[0\.08em\]{
  letter-spacing:  0.08em;
}
.tracking-\[0\.09em\]{
  letter-spacing:  0.09em;
}
.tracking-\[0\.12em\]{
  letter-spacing:  0.12em;
}
.tracking-\[0\.15em\]{
  letter-spacing:  0.15em;
}
.tracking-\[0\.18em\]{
  letter-spacing:  0.18em;
}
.tracking-\[0\.22em\]{
  letter-spacing:  0.22em;
}
.tracking-\[0\.28em\]{
  letter-spacing:  0.28em;
}
.tracking-\[0\.2em\]{
  letter-spacing:  0.2em;
}
.tracking-\[0\.3em\]{
  letter-spacing:  0.3em;
}
.tracking-\[2px\]{
  letter-spacing:  2px;
}
.tracking-tight{
  letter-spacing:  -0.025em;
}
.tracking-wide{
  letter-spacing:  0.025em;
}
.tracking-wider{
  letter-spacing:  0.05em;
}
.tracking-widest{
  letter-spacing:  0.1em;
}
.\!text-\[color\:var\(--erp-st-pending-fg\)\]{
  color:  var(--erp-st-pending-fg) !important;
}
.\!text-\[color\:var\(--erp-text\)\]{
  color:  var(--erp-text) !important;
}
.\!text-\[var\(--erp-danger\)\]{
  color:  var(--erp-danger) !important;
}
.\!text-\[var\(--erp-error-fg\)\]{
  color:  var(--erp-error-fg) !important;
}
.text-\[color\:var\(--erp-border-input\)\]{
  color:  var(--erp-border-input);
}
.text-\[color\:var\(--erp-negative\)\]{
  color:  var(--erp-negative);
}
.text-\[color\:var\(--erp-on-primary\)\]{
  color:  var(--erp-on-primary);
}
.text-\[color\:var\(--erp-positive\)\]{
  color:  var(--erp-positive);
}
.text-\[color\:var\(--erp-st-pending-fg\)\]{
  color:  var(--erp-st-pending-fg);
}
.text-\[color\:var\(--erp-text\)\]{
  color:  var(--erp-text);
}
.text-\[color\:var\(--erp-text-2\)\]{
  color:  var(--erp-text-2);
}
.text-\[color\:var\(--erp-text-disabled\)\]{
  color:  var(--erp-text-disabled);
}
.text-\[color\:var\(--erp-text-muted\)\]{
  color:  var(--erp-text-muted);
}
.text-\[var\(--bx-text\)\]{
  color:  var(--bx-text);
}
.text-\[var\(--bx-warning\)\]{
  color:  var(--bx-warning);
}
.text-\[var\(--erp-danger\)\]{
  color:  var(--erp-danger);
}
.text-\[var\(--erp-error-fg\)\]{
  color:  var(--erp-error-fg);
}
.text-\[var\(--erp-info-fg\)\]{
  color:  var(--erp-info-fg);
}
.text-\[var\(--erp-on-primary\)\]{
  color:  var(--erp-on-primary);
}
.text-\[var\(--erp-shell-active-text\)\]{
  color:  var(--erp-shell-active-text);
}
.text-\[var\(--erp-shell-heading\)\]{
  color:  var(--erp-shell-heading);
}
.text-\[var\(--erp-shell-text\)\]{
  color:  var(--erp-shell-text);
}
.text-\[var\(--erp-success-fg\)\]{
  color:  var(--erp-success-fg);
}
.text-\[var\(--erp-text\)\]{
  color:  var(--erp-text);
}
.text-\[var\(--erp-text-2\)\]{
  color:  var(--erp-text-2);
}
.text-\[var\(--erp-text-disabled\)\]{
  color:  var(--erp-text-disabled);
}
.text-\[var\(--erp-text-muted\)\]{
  color:  var(--erp-text-muted);
}
.text-\[var\(--erp-warning-fg\)\]{
  color:  var(--erp-warning-fg);
}
.text-amber-200{
  --tw-text-opacity:  1;
  color:  rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-300{
  --tw-text-opacity:  1;
  color:  rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-600{
  --tw-text-opacity:  1;
  color:  rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700{
  --tw-text-opacity:  1;
  color:  rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800{
  --tw-text-opacity:  1;
  color:  rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-950{
  --tw-text-opacity:  1;
  color:  rgb(69 26 3 / var(--tw-text-opacity, 1));
}
.text-blue-700{
  --tw-text-opacity:  1;
  color:  rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-brand-100{
  --tw-text-opacity:  1;
  color:  rgb(217 225 245 / var(--tw-text-opacity, 1));
}
.text-brand-200{
  --tw-text-opacity:  1;
  color:  rgb(179 194 234 / var(--tw-text-opacity, 1));
}
.text-brand-900{
  --tw-text-opacity:  1;
  color:  rgb(13 30 82 / var(--tw-text-opacity, 1));
}
.text-brand-950{
  --tw-text-opacity:  1;
  color:  rgb(8 19 58 / var(--tw-text-opacity, 1));
}
.text-ccp-absent{
  --tw-text-opacity:  1;
  color:  rgb(208 213 221 / var(--tw-text-opacity, 1));
}
.text-ccp-alert-fg{
  --tw-text-opacity:  1;
  color:  rgb(178 59 46 / var(--tw-text-opacity, 1));
}
.text-ccp-body{
  --tw-text-opacity:  1;
  color:  rgb(52 64 84 / var(--tw-text-opacity, 1));
}
.text-ccp-coral{
  --tw-text-opacity:  1;
  color:  rgb(229 86 71 / var(--tw-text-opacity, 1));
}
.text-ccp-faint{
  --tw-text-opacity:  1;
  color:  rgb(152 162 179 / var(--tw-text-opacity, 1));
}
.text-ccp-fg{
  --tw-text-opacity:  1;
  color:  rgb(16 24 40 / var(--tw-text-opacity, 1));
}
.text-ccp-field-fg{
  --tw-text-opacity:  1;
  color:  rgb(27 92 143 / var(--tw-text-opacity, 1));
}
.text-ccp-good-fg{
  --tw-text-opacity:  1;
  color:  rgb(20 114 74 / var(--tw-text-opacity, 1));
}
.text-ccp-info{
  --tw-text-opacity:  1;
  color:  rgb(13 127 212 / var(--tw-text-opacity, 1));
}
.text-ccp-info-fg{
  --tw-text-opacity:  1;
  color:  rgb(31 63 107 / var(--tw-text-opacity, 1));
}
.text-ccp-muted{
  --tw-text-opacity:  1;
  color:  rgb(102 112 133 / var(--tw-text-opacity, 1));
}
.text-ccp-navy{
  --tw-text-opacity:  1;
  color:  rgb(13 30 82 / var(--tw-text-opacity, 1));
}
.text-ccp-session-fg{
  --tw-text-opacity:  1;
  color:  rgb(91 63 191 / var(--tw-text-opacity, 1));
}
.text-ccp-warn-fg{
  --tw-text-opacity:  1;
  color:  rgb(154 106 5 / var(--tw-text-opacity, 1));
}
.text-emerald-200{
  --tw-text-opacity:  1;
  color:  rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.text-emerald-200\/60{
  color:  rgb(167 243 208 / 0.6);
}
.text-emerald-200\/70{
  color:  rgb(167 243 208 / 0.7);
}
.text-emerald-300{
  --tw-text-opacity:  1;
  color:  rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-emerald-600{
  --tw-text-opacity:  1;
  color:  rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700{
  --tw-text-opacity:  1;
  color:  rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800{
  --tw-text-opacity:  1;
  color:  rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-emerald-950{
  --tw-text-opacity:  1;
  color:  rgb(2 44 34 / var(--tw-text-opacity, 1));
}
.text-gray-200{
  --tw-text-opacity:  1;
  color:  rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.text-gray-300{
  --tw-text-opacity:  1;
  color:  rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400{
  --tw-text-opacity:  1;
  color:  rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500{
  --tw-text-opacity:  1;
  color:  rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600{
  --tw-text-opacity:  1;
  color:  rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-lime-300{
  --tw-text-opacity:  1;
  color:  rgb(194 229 110 / var(--tw-text-opacity, 1));
}
.text-lime-400{
  --tw-text-opacity:  1;
  color:  rgb(171 219 75 / var(--tw-text-opacity, 1));
}
.text-lime-700{
  --tw-text-opacity:  1;
  color:  rgb(90 126 27 / var(--tw-text-opacity, 1));
}
.text-navy-100{
  --tw-text-opacity:  1;
  color:  rgb(217 225 245 / var(--tw-text-opacity, 1));
}
.text-navy-200{
  --tw-text-opacity:  1;
  color:  rgb(179 194 234 / var(--tw-text-opacity, 1));
}
.text-navy-300{
  --tw-text-opacity:  1;
  color:  rgb(130 153 214 / var(--tw-text-opacity, 1));
}
.text-navy-500{
  --tw-text-opacity:  1;
  color:  rgb(54 85 163 / var(--tw-text-opacity, 1));
}
.text-navy-600{
  --tw-text-opacity:  1;
  color:  rgb(37 63 134 / var(--tw-text-opacity, 1));
}
.text-navy-700{
  --tw-text-opacity:  1;
  color:  rgb(26 47 108 / var(--tw-text-opacity, 1));
}
.text-navy-800{
  --tw-text-opacity:  1;
  color:  rgb(19 37 94 / var(--tw-text-opacity, 1));
}
.text-navy-900{
  --tw-text-opacity:  1;
  color:  rgb(13 30 82 / var(--tw-text-opacity, 1));
}
.text-red-200{
  --tw-text-opacity:  1;
  color:  rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.text-red-300{
  --tw-text-opacity:  1;
  color:  rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-500{
  --tw-text-opacity:  1;
  color:  rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity:  1;
  color:  rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700{
  --tw-text-opacity:  1;
  color:  rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-rose-500{
  --tw-text-opacity:  1;
  color:  rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-rose-600{
  --tw-text-opacity:  1;
  color:  rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-700{
  --tw-text-opacity:  1;
  color:  rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-sky-300{
  --tw-text-opacity:  1;
  color:  rgb(125 211 252 / var(--tw-text-opacity, 1));
}
.text-slate-400{
  --tw-text-opacity:  1;
  color:  rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500{
  --tw-text-opacity:  1;
  color:  rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600{
  --tw-text-opacity:  1;
  color:  rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700{
  --tw-text-opacity:  1;
  color:  rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800{
  --tw-text-opacity:  1;
  color:  rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-slate-900{
  --tw-text-opacity:  1;
  color:  rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-surface-300{
  --tw-text-opacity:  1;
  color:  rgb(201 204 204 / var(--tw-text-opacity, 1));
}
.text-surface-400{
  --tw-text-opacity:  1;
  color:  rgb(168 171 174 / var(--tw-text-opacity, 1));
}
.text-surface-500{
  --tw-text-opacity:  1;
  color:  rgb(135 139 143 / var(--tw-text-opacity, 1));
}
.text-surface-600{
  --tw-text-opacity:  1;
  color:  rgb(107 111 115 / var(--tw-text-opacity, 1));
}
.text-teal-200{
  --tw-text-opacity:  1;
  color:  rgb(143 229 216 / var(--tw-text-opacity, 1));
}
.text-teal-200\/60{
  color:  rgb(143 229 216 / 0.6);
}
.text-teal-300{
  --tw-text-opacity:  1;
  color:  rgb(87 211 195 / var(--tw-text-opacity, 1));
}
.text-teal-700{
  --tw-text-opacity:  1;
  color:  rgb(24 108 99 / var(--tw-text-opacity, 1));
}
.text-violet-300{
  --tw-text-opacity:  1;
  color:  rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity:  1;
  color:  rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/40{
  color:  rgb(255 255 255 / 0.4);
}
.text-white\/50{
  color:  rgb(255 255 255 / 0.5);
}
.text-white\/60{
  color:  rgb(255 255 255 / 0.6);
}
.text-white\/70{
  color:  rgb(255 255 255 / 0.7);
}
.text-white\/80{
  color:  rgb(255 255 255 / 0.8);
}
.underline{
  text-decoration-line:  underline;
}
.line-through{
  text-decoration-line:  line-through;
}
.decoration-\[color\:var\(--erp-text-disabled\)\]{
  text-decoration-color:  var(--erp-text-disabled);
}
.decoration-ccp-hairline{
  text-decoration-color:  #F0F2F5;
}
.decoration-dotted{
  text-decoration-style:  dotted;
}
.underline-offset-2{
  text-underline-offset:  2px;
}
.placeholder-navy-300::-moz-placeholder{
  --tw-placeholder-opacity:  1;
  color:  rgb(130 153 214 / var(--tw-placeholder-opacity, 1));
}
.placeholder-navy-300::placeholder{
  --tw-placeholder-opacity:  1;
  color:  rgb(130 153 214 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-400::-moz-placeholder{
  --tw-placeholder-opacity:  1;
  color:  rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}
.placeholder-slate-400::placeholder{
  --tw-placeholder-opacity:  1;
  color:  rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
}
.placeholder-surface-400::-moz-placeholder{
  --tw-placeholder-opacity:  1;
  color:  rgb(168 171 174 / var(--tw-placeholder-opacity, 1));
}
.placeholder-surface-400::placeholder{
  --tw-placeholder-opacity:  1;
  color:  rgb(168 171 174 / var(--tw-placeholder-opacity, 1));
}
.placeholder-white\/40::-moz-placeholder{
  color:  rgb(255 255 255 / 0.4);
}
.placeholder-white\/40::placeholder{
  color:  rgb(255 255 255 / 0.4);
}
.accent-\[color\:var\(--erp-primary\)\]{
  accent-color:  var(--erp-primary);
}
.accent-\[var\(--erp-primary\)\]{
  accent-color:  var(--erp-primary);
}
.accent-ccp-navy{
  accent-color:  #0D1E52;
}
.accent-navy-900{
  accent-color:  #0D1E52;
}
.opacity-0{
  opacity:  0;
}
.opacity-25{
  opacity:  0.25;
}
.opacity-40{
  opacity:  0.4;
}
.opacity-50{
  opacity:  0.5;
}
.opacity-60{
  opacity:  0.6;
}
.opacity-75{
  opacity:  0.75;
}
.\!shadow-\[inset_0_-3px_0_var\(--erp-selected-bar\)\]{
  --tw-shadow:  inset 0 -3px 0 var(--erp-selected-bar) !important;
  --tw-shadow-colored:  inset 0 -3px 0 var(--tw-shadow-color) !important;
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow{
  --tw-shadow:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:  0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl{
  --tw-shadow:  0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored:  0 25px 50px -12px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_-2px_8px_rgba\(13\2c 30\2c 82\2c 0\.06\)\]{
  --tw-shadow:  0 -2px 8px rgba(13,30,82,0.06);
  --tw-shadow-colored:  0 -2px 8px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_60px_rgba\(0\2c 0\2c 0\2c 0\.2\)\]{
  --tw-shadow:  0 20px 60px rgba(0,0,0,0.2);
  --tw-shadow-colored:  0 20px 60px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_60px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]{
  --tw-shadow:  0 20px 60px rgba(0,0,0,0.5);
  --tw-shadow-colored:  0 20px 60px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c 0\.12\)\]{
  --tw-shadow:  0 4px 16px rgba(0,0,0,0.12);
  --tw-shadow-colored:  0 4px 16px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_4px_16px_rgba\(0\2c 0\2c 0\2c 0\.2\)\]{
  --tw-shadow:  0 4px 16px rgba(0,0,0,0.2);
  --tw-shadow-colored:  0 4px 16px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[20px_0_50px_rgba\(0\2c 0\2c 0\2c 0\.18\)\]{
  --tw-shadow:  20px 0 50px rgba(0,0,0,0.18);
  --tw-shadow-colored:  20px 0 50px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_-2px_0_var\(--erp-selected-bar\)\]{
  --tw-shadow:  inset 0 -2px 0 var(--erp-selected-bar);
  --tw-shadow-colored:  inset 0 -2px 0 var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_-4px_0_var\(--erp-accent\)\]{
  --tw-shadow:  inset 0 -4px 0 var(--erp-accent);
  --tw-shadow-colored:  inset 0 -4px 0 var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-brand{
  --tw-shadow:  0 1px 3px rgba(13, 30, 82, 0.08), 0 1px 2px rgba(13, 30, 82, 0.06);
  --tw-shadow-colored:  0 1px 3px var(--tw-shadow-color), 0 1px 2px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-brand-lg{
  --tw-shadow:  0 10px 15px rgba(13, 30, 82, 0.08), 0 4px 6px rgba(13, 30, 82, 0.04);
  --tw-shadow-colored:  0 10px 15px var(--tw-shadow-color), 0 4px 6px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-brand-xl{
  --tw-shadow:  0 20px 25px rgba(13, 30, 82, 0.1), 0 8px 10px rgba(13, 30, 82, 0.04);
  --tw-shadow-colored:  0 20px 25px var(--tw-shadow-color), 0 8px 10px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-ccp-modal{
  --tw-shadow:  0 24px 60px -20px rgba(16, 24, 40, 0.35), 0 2px 6px rgba(16, 24, 40, 0.08);
  --tw-shadow-colored:  0 24px 60px -20px var(--tw-shadow-color), 0 2px 6px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-ccp-seg{
  --tw-shadow:  0 1px 2px rgba(16, 24, 40, 0.06);
  --tw-shadow-colored:  0 1px 2px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-command-soft{
  --tw-shadow:  0 16px 45px rgba(13, 30, 82, 0.10);
  --tw-shadow-colored:  0 16px 45px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:  0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored:  0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.\!shadow-\[var\(--erp-shadow-3\)\]{
  --tw-shadow-color:  var(--erp-shadow-3) !important;
  --tw-shadow:  var(--tw-shadow-colored) !important;
}
.shadow-\[var\(--bx-shadow\)\]{
  --tw-shadow-color:  var(--bx-shadow);
  --tw-shadow:  var(--tw-shadow-colored);
}
.shadow-\[var\(--erp-shadow-1\)\]{
  --tw-shadow-color:  var(--erp-shadow-1);
  --tw-shadow:  var(--tw-shadow-colored);
}
.shadow-\[var\(--erp-shadow-2\)\]{
  --tw-shadow-color:  var(--erp-shadow-2);
  --tw-shadow:  var(--tw-shadow-colored);
}
.shadow-\[var\(--erp-shadow-3\)\]{
  --tw-shadow-color:  var(--erp-shadow-3);
  --tw-shadow:  var(--tw-shadow-colored);
}
.shadow-brand{
  --tw-shadow-color:  #0D1E52;
  --tw-shadow:  var(--tw-shadow-colored);
}
.outline-none{
  outline:  2px solid transparent;
  outline-offset:  2px;
}
.ring{
  --tw-ring-offset-shadow:  var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:  var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:  var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1{
  --tw-ring-offset-shadow:  var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:  var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:  var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2{
  --tw-ring-offset-shadow:  var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:  var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:  var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-\[var\(--erp-error-line\)\]{
  --tw-ring-color:  var(--erp-error-line);
}
.ring-\[var\(--erp-selected-bar\)\]{
  --tw-ring-color:  var(--erp-selected-bar);
}
.ring-ccp-amber{
  --tw-ring-opacity:  1;
  --tw-ring-color:  rgb(235 159 7 / var(--tw-ring-opacity, 1));
}
.ring-emerald-400\/20{
  --tw-ring-color:  rgb(52 211 153 / 0.2);
}
.ring-lime-400\/40{
  --tw-ring-color:  rgb(171 219 75 / 0.4);
}
.ring-navy-200{
  --tw-ring-opacity:  1;
  --tw-ring-color:  rgb(179 194 234 / var(--tw-ring-opacity, 1));
}
.ring-white\/10{
  --tw-ring-color:  rgb(255 255 255 / 0.1);
}
.ring-white\/15{
  --tw-ring-color:  rgb(255 255 255 / 0.15);
}
.ring-white\/20{
  --tw-ring-color:  rgb(255 255 255 / 0.2);
}
.blur{
  --tw-blur:  blur(8px);
  filter:  var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale{
  --tw-grayscale:  grayscale(100%);
  filter:  var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter:  var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm{
  --tw-backdrop-blur:  blur(4px);
  backdrop-filter:  var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
  transition-property:  color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function:  cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:  150ms;
}
.transition-\[height\]{
  transition-property:  height;
  transition-timing-function:  cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:  150ms;
}
.transition-\[width\]{
  transition-property:  width;
  transition-timing-function:  cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:  150ms;
}
.transition-all{
  transition-property:  all;
  transition-timing-function:  cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:  150ms;
}
.transition-colors{
  transition-property:  color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:  cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:  150ms;
}
.transition-transform{
  transition-property:  transform;
  transition-timing-function:  cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:  150ms;
}
.duration-200{
  transition-duration:  200ms;
}
.duration-500{
  transition-duration:  500ms;
}
.duration-700{
  transition-duration:  700ms;
}
.duration-\[260ms\]{
  transition-duration:  260ms;
}
.ease-\[cubic-bezier\(\.32\2c \.72\2c 0\2c 1\)\]{
  transition-timing-function:  cubic-bezier(.32,.72,0,1);
}
.ease-out{
  transition-timing-function:  cubic-bezier(0, 0, 0.2, 1);
}
:root {
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
  --brand: var(--bx-navy, #0D1E52);
  --brand-light: #EEF2FB;
  --surface: #F1F2F2;
  --white: #FFFFFF;
  --ccp-navy: oklch(23% 0.09 258);
  --ccp-ink: oklch(20% 0.045 258);
  --ccp-muted: oklch(49% 0.035 258);
  --ccp-panel: oklch(99% 0.006 85);
  --ccp-canvas: oklch(96% 0.018 88);
  --ccp-blue: oklch(58% 0.16 250);
  --ccp-amber: oklch(76% 0.16 74);
  --ccp-emerald: oklch(64% 0.14 158);
  --ccp-coral: oklch(64% 0.18 29);
  --ccp-shadow: 0 24px 70px rgba(13, 30, 82, 0.14);
  --ccp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#root {
  min-height: 100vh;
}
.ccp-command-bg {
  background: oklch(97.5% 0.008 250);
}
.ccp-display {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: -0.035em;
}
.ccp-panel {
  background: color-mix(in oklch, var(--ccp-panel) 92%, transparent);
  box-shadow: var(--ccp-shadow);
}
.ccp-reveal {
  animation: ccp-reveal 520ms var(--ccp-ease) both;
}
@keyframes ccp-reveal {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ccp-reveal {
    animation: none;
  }
}
/* Thermal print styles */
@media print {
  @page {
    margin: 0;
    size: auto;
  }

  body {
    margin: 0;
    padding: 0;
  }

  .no-print {
    display: none !important;
  }

  .print-80mm {
    width: 80mm;
    padding: 4mm;
    font-size: 12px;
  }

  .print-58mm {
    width: 58mm;
    padding: 3mm;
    font-size: 11px;
  }
}
/* Loading spinner */
.spinner {
  border: 3px solid var(--bx-navy-100);
  border-top: 3px solid var(--bx-navy);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* PIN pad -------------------------------------------------------------
   Calculator keys: a thin face sitting on a hard bottom edge. Pressing
   collapses the edge and drops the face onto it. The press is instant and
   the release eases back -- that asymmetry is what reads as crisp but
   smooth. See components/PinPad.tsx for the interaction side. */
.pinpad {
  --key-face: #ffffff;
  --key-face-down: var(--bx-navy-100);
  --key-edge: var(--bx-navy-200);
  --key-ink: var(--bx-navy);
  --key-accent: var(--brand);
  --key-shadow: rgba(13, 30, 82, 0.14);
  /* Backspace sits a shade back from the digits. Spelled out rather than
     derived with color-mix(), which these POS terminals' browser may predate. */
  --key-face-util: var(--bx-navy-50);
  --key-ink-util: var(--bx-navy-500);
  --key-face-hover: var(--bx-navy-50);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.pinpad--dark {
  --key-face: #21252b;
  --key-face-down: #2c3138;
  --key-edge: #0d0f12;
  --key-ink: #e6e9ed;
  --key-accent: #ffffff;
  --key-shadow: rgba(0, 0, 0, 0.45);
  --key-face-util: #1a1e23;
  --key-ink-util: #98a0a9;
  --key-face-hover: #272c33;
}
.pinkey {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem; /* 72px: well past the 48px touch floor */
  min-height: 3rem;
  border-radius: 14px;
  background: var(--key-face);
  color: var(--key-ink);
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  box-shadow:
    0 3px 0 var(--key-edge),
    0 5px 10px var(--key-shadow);
  /* Release: gentle. The press overrides this to 0ms below. */
  transition:
    transform 170ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 170ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 170ms ease,
    color 170ms ease;
}
.pinkey--util {
  background: var(--key-face-util);
  color: var(--key-ink-util);
}
/* Hover only where a real pointer exists. On the touch terminals hover was
   sticking on after a tap and pointing at the wrong key. */
@media (hover: hover) and (pointer: fine) {
  .pinkey:not(:disabled):hover {
    background: var(--key-face-hover);
  }
}
.pinkey[data-down] {
  background: var(--key-face-down);
  color: var(--key-accent);
  transform: translateY(3px);
  box-shadow:
    0 0 0 var(--key-edge),
    0 1px 3px var(--key-shadow);
  transition-duration: 0ms;
}
.pinkey:disabled {
  opacity: 0.45;
}
.pinkey:focus-visible {
  outline: none;
  box-shadow:
    0 3px 0 var(--key-edge),
    var(--bx-focus-ring);
}
.pinkey__label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Guarantees a visible blink even when the same digit is hammered repeatedly
   and the key never gets a chance to rise between presses. */
.pinkey__flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--key-accent);
  pointer-events: none;
  animation: pinkey-flash 240ms ease-out forwards;
}
@keyframes pinkey-flash {
  from { opacity: 0.18; }
  to { opacity: 0; }
}
/* Pressable surfaces (menu cards, quantity steppers) share the pad's motion
   language: the press lands instantly, the release eases back. Unlike a key
   these sit in scrolling panels, so they commit on release -- see
   usePressFeedback. */
.pressable {
  position: relative;
  /* Makes this a stacking context, so the flash below can sit at z-index -1:
     painted over the button's own background but under its content. */
  isolation: isolate;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 170ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 170ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 170ms ease,
    border-color 170ms ease;
}
.pressable[data-pressed] {
  transform: translateY(2px) scale(0.985);
  transition-duration: 0ms;
}
.press-flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  pointer-events: none;
  /* Behind the content, in front of the background. Lifting the children with
     position:relative instead would silently break any absolutely-positioned
     child a caller puts inside -- the quantity badges do exactly that. */
  z-index: -1;
  animation: press-flash 240ms ease-out forwards;
}
@keyframes press-flash {
  from { opacity: 0.12; }
  to { opacity: 0; }
}
.pindots {
  --dot-empty: var(--bx-navy-100);
  --dot-fill: var(--bx-navy);
  --key-accent: var(--bx-navy);
}
.pindots--dark {
  --dot-empty: #2c3138;
}
.pindot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 9999px;
  background: var(--dot-empty);
}
.pindot--on {
  background: var(--key-accent, var(--dot-fill));
  animation: pindot-pop 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pindot-pop {
  0% { transform: scale(0.35); }
  55% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.pin-shake {
  animation: pin-shake 0.4s ease-in-out;
}
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
/* Motion is decoration here; the colour change is the actual signal, so it
   survives. */
@media (prefers-reduced-motion: reduce) {
  .pinkey {
    transition: background-color 90ms ease, color 90ms ease;
  }

  .pinkey[data-down] {
    transform: none;
    box-shadow:
      0 3px 0 var(--key-edge),
      0 5px 10px var(--key-shadow);
  }

  .pinkey__flash,
  .pindot--on,
  .pin-shake {
    animation: none;
  }

  .pressable {
    transition: background-color 90ms ease, border-color 90ms ease;
  }

  .pressable[data-pressed] {
    transform: none;
  }

  /* The transform is gone, so the tint becomes the whole signal. Hold it
     steady rather than animating it away. */
  .press-flash {
    animation: none;
    opacity: 0.12;
  }
}
/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  /* Horizontal rails (category pills, featured strip) need the height too, or
     they fall back to the chunky default bar. */
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--bx-navy-200);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bx-navy-300);
}
/* Legacy buttons, Bagaax-styled. Navy primary, 48px touch floor, lime+navy
   focus ring. One primary per screen is a layout rule, not enforced here. */
.btn-primary,
.btn-success,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.25rem;
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  border-radius: 0.75rem;
  touch-action: manipulation;
  transition: background-color 150ms ease, transform 150ms var(--ccp-ease);
}
.btn-primary { background: var(--bx-navy); color: #fff; }
.btn-primary:hover { background: var(--bx-navy-700); }
/* "Success" confirms a payment/settlement: lime fill with navy text (lime is
   a fill, never text on white). */
.btn-success { background: var(--bx-lime); color: var(--bx-navy); }
.btn-success:hover { background: var(--bx-lime-300); }
.btn-ghost { background: transparent; color: var(--bx-navy); font-weight: 500; }
.btn-ghost:hover { background: var(--bx-navy-50); }
.btn-primary:active,
.btn-success:active { transform: scale(0.98); }
.btn-primary:focus-visible,
.btn-success:focus-visible,
.btn-ghost:focus-visible,
.pressable:focus-visible {
  outline: none;
  box-shadow: var(--bx-focus-ring);
}
.btn-primary:disabled,
.btn-success:disabled,
.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:active,
  .btn-success:active { transform: none; }
}
/* Card base */
.card {
  background: var(--bx-surface, #fff);
  border-radius: 1rem;
  box-shadow: var(--bx-shadow, 0 1px 2px rgba(13, 30, 82, .06), 0 6px 20px rgba(13, 30, 82, .08));
}
.file\:mr-2::file-selector-button{
  margin-right:  0.5rem;
}
.file\:rounded-lg::file-selector-button{
  border-radius:  0.5rem;
}
.file\:border::file-selector-button{
  border-width:  1px;
}
.file\:border-\[color\:var\(--erp-border\)\]::file-selector-button{
  border-color:  var(--erp-border);
}
.file\:bg-\[color\:var\(--erp-surface\)\]::file-selector-button{
  background-color:  var(--erp-surface);
}
.file\:px-2\.5::file-selector-button{
  padding-left:  0.625rem;
  padding-right:  0.625rem;
}
.file\:py-1::file-selector-button{
  padding-top:  0.25rem;
  padding-bottom:  0.25rem;
}
.file\:text-\[11\.5px\]::file-selector-button{
  font-size:  11.5px;
}
.file\:text-\[color\:var\(--erp-text\)\]::file-selector-button{
  color:  var(--erp-text);
}
.placeholder\:text-\[color\:var\(--erp-text-muted\)\]::-moz-placeholder{
  color:  var(--erp-text-muted);
}
.placeholder\:text-\[color\:var\(--erp-text-muted\)\]::placeholder{
  color:  var(--erp-text-muted);
}
.placeholder\:text-ccp-faint::-moz-placeholder{
  --tw-text-opacity:  1;
  color:  rgb(152 162 179 / var(--tw-text-opacity, 1));
}
.placeholder\:text-ccp-faint::placeholder{
  --tw-text-opacity:  1;
  color:  rgb(152 162 179 / var(--tw-text-opacity, 1));
}
.first\:mt-0:first-child{
  margin-top:  0px;
}
.first\:border-t-0:first-child{
  border-top-width:  0px;
}
.first\:pt-0:first-child{
  padding-top:  0px;
}
.last\:mb-0:last-child{
  margin-bottom:  0px;
}
.last\:border-0:last-child{
  border-width:  0px;
}
.hover\:border-\[color\:var\(--erp-st-overdue-dot\)\]:hover{
  border-color:  var(--erp-st-overdue-dot);
}
.hover\:border-emerald-200:hover{
  --tw-border-opacity:  1;
  border-color:  rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.hover\:border-navy-300:hover{
  --tw-border-opacity:  1;
  border-color:  rgb(130 153 214 / var(--tw-border-opacity, 1));
}
.hover\:border-navy-400:hover{
  --tw-border-opacity:  1;
  border-color:  rgb(86 114 190 / var(--tw-border-opacity, 1));
}
.hover\:border-teal-400:hover{
  --tw-border-opacity:  1;
  border-color:  rgb(46 191 174 / var(--tw-border-opacity, 1));
}
.hover\:\!bg-\[var\(--erp-surface-hover\)\]:hover{
  background-color:  var(--erp-surface-hover) !important;
}
.hover\:bg-\[color\:var\(--erp-error-bg\)\]:hover{
  background-color:  var(--erp-error-bg);
}
.hover\:bg-\[color\:var\(--erp-surface-hover\)\]:hover{
  background-color:  var(--erp-surface-hover);
}
.hover\:bg-\[var\(--erp-primary-hover\)\]:hover{
  background-color:  var(--erp-primary-hover);
}
.hover\:bg-\[var\(--erp-shell-hover\)\]:hover{
  background-color:  var(--erp-shell-hover);
}
.hover\:bg-\[var\(--erp-surface-hover\)\]:hover{
  background-color:  var(--erp-surface-hover);
}
.hover\:bg-amber-100:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-50:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-600:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-800:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(146 64 14 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-800:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(19 37 94 / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-900:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(13 30 82 / var(--tw-bg-opacity, 1));
}
.hover\:bg-ccp-alert-bg:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(254 241 239 / var(--tw-bg-opacity, 1));
}
.hover\:bg-ccp-hairline:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(240 242 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-ccp-hover:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-ccp-subtle:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(242 244 247 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-50:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-50\/30:hover{
  background-color:  rgb(236 253 245 / 0.3);
}
.hover\:bg-emerald-50\/40:hover{
  background-color:  rgb(236 253 245 / 0.4);
}
.hover\:bg-emerald-50\/50:hover{
  background-color:  rgb(236 253 245 / 0.5);
}
.hover\:bg-emerald-50\/70:hover{
  background-color:  rgb(236 253 245 / 0.7);
}
.hover\:bg-emerald-500:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.hover\:bg-lime-100:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(234 246 203 / var(--tw-bg-opacity, 1));
}
.hover\:bg-navy-100:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(217 225 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-navy-200:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(179 194 234 / var(--tw-bg-opacity, 1));
}
.hover\:bg-navy-50:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(238 242 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-navy-700:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(26 47 108 / var(--tw-bg-opacity, 1));
}
.hover\:bg-navy-800:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(19 37 94 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-100:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-200:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-50:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-500\/20:hover{
  background-color:  rgb(239 68 68 / 0.2);
}
.hover\:bg-red-500\/35:hover{
  background-color:  rgb(239 68 68 / 0.35);
}
.hover\:bg-red-700:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-50:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-500:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.hover\:bg-sky-600:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-50:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-surface-50:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-surface-50\/60:hover{
  background-color:  rgb(255 255 255 / 0.6);
}
.hover\:bg-surface-50\/70:hover{
  background-color:  rgb(255 255 255 / 0.7);
}
.hover\:bg-teal-100:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(197 242 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-teal-50:hover{
  --tw-bg-opacity:  1;
  background-color:  rgb(232 250 247 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/10:hover{
  background-color:  rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/15:hover{
  background-color:  rgb(255 255 255 / 0.15);
}
.hover\:bg-white\/20:hover{
  background-color:  rgb(255 255 255 / 0.2);
}
.hover\:bg-white\/\[0\.06\]:hover{
  background-color:  rgb(255 255 255 / 0.06);
}
.hover\:bg-white\/\[0\.08\]:hover{
  background-color:  rgb(255 255 255 / 0.08);
}
.hover\:bg-white\/\[0\.1\]:hover{
  background-color:  rgb(255 255 255 / 0.1);
}
.hover\:text-\[color\:var\(--erp-negative\)\]:hover{
  color:  var(--erp-negative);
}
.hover\:text-\[color\:var\(--erp-st-pending-fg\)\]:hover{
  color:  var(--erp-st-pending-fg);
}
.hover\:text-\[color\:var\(--erp-text\)\]:hover{
  color:  var(--erp-text);
}
.hover\:text-\[var\(--erp-text\)\]:hover{
  color:  var(--erp-text);
}
.hover\:text-ccp-body:hover{
  --tw-text-opacity:  1;
  color:  rgb(52 64 84 / var(--tw-text-opacity, 1));
}
.hover\:text-ccp-info:hover{
  --tw-text-opacity:  1;
  color:  rgb(13 127 212 / var(--tw-text-opacity, 1));
}
.hover\:text-ccp-muted:hover{
  --tw-text-opacity:  1;
  color:  rgb(102 112 133 / var(--tw-text-opacity, 1));
}
.hover\:text-ccp-navy:hover{
  --tw-text-opacity:  1;
  color:  rgb(13 30 82 / var(--tw-text-opacity, 1));
}
.hover\:text-navy-800:hover{
  --tw-text-opacity:  1;
  color:  rgb(19 37 94 / var(--tw-text-opacity, 1));
}
.hover\:text-navy-900:hover{
  --tw-text-opacity:  1;
  color:  rgb(13 30 82 / var(--tw-text-opacity, 1));
}
.hover\:text-red-600:hover{
  --tw-text-opacity:  1;
  color:  rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:text-red-800:hover{
  --tw-text-opacity:  1;
  color:  rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-600:hover{
  --tw-text-opacity:  1;
  color:  rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-700:hover{
  --tw-text-opacity:  1;
  color:  rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-800:hover{
  --tw-text-opacity:  1;
  color:  rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.hover\:text-teal-800:hover{
  --tw-text-opacity:  1;
  color:  rgb(22 87 80 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover{
  --tw-text-opacity:  1;
  color:  rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-white\/80:hover{
  color:  rgb(255 255 255 / 0.8);
}
.hover\:underline:hover{
  text-decoration-line:  underline;
}
.hover\:decoration-solid:hover{
  text-decoration-style:  solid;
}
.hover\:opacity-70:hover{
  opacity:  0.7;
}
.hover\:brightness-125:hover{
  --tw-brightness:  brightness(1.25);
  filter:  var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.hover\:brightness-95:hover{
  --tw-brightness:  brightness(.95);
  filter:  var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.focus\:border-ccp-navy:focus{
  --tw-border-opacity:  1;
  border-color:  rgb(13 30 82 / var(--tw-border-opacity, 1));
}
.focus\:border-emerald-400:focus{
  --tw-border-opacity:  1;
  border-color:  rgb(52 211 153 / var(--tw-border-opacity, 1));
}
.focus\:border-emerald-400\/50:focus{
  border-color:  rgb(52 211 153 / 0.5);
}
.focus\:border-lime-400:focus{
  --tw-border-opacity:  1;
  border-color:  rgb(171 219 75 / var(--tw-border-opacity, 1));
}
.focus\:border-navy-900:focus{
  --tw-border-opacity:  1;
  border-color:  rgb(13 30 82 / var(--tw-border-opacity, 1));
}
.focus\:bg-white:focus{
  --tw-bg-opacity:  1;
  background-color:  rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.focus\:shadow-ccp-ring:focus{
  --tw-shadow:  0 0 0 3px rgba(13, 30, 82, 0.08);
  --tw-shadow-colored:  0 0 0 3px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:outline-none:focus{
  outline:  2px solid transparent;
  outline-offset:  2px;
}
.focus\:ring-2:focus{
  --tw-ring-offset-shadow:  var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:  var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:  var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-4:focus{
  --tw-ring-offset-shadow:  var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:  var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:  var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-brand-200:focus{
  --tw-ring-opacity:  1;
  --tw-ring-color:  rgb(179 194 234 / var(--tw-ring-opacity, 1));
}
.focus\:ring-emerald-100:focus{
  --tw-ring-opacity:  1;
  --tw-ring-color:  rgb(209 250 229 / var(--tw-ring-opacity, 1));
}
.focus\:ring-emerald-400\/20:focus{
  --tw-ring-color:  rgb(52 211 153 / 0.2);
}
.focus\:ring-emerald-500:focus{
  --tw-ring-opacity:  1;
  --tw-ring-color:  rgb(16 185 129 / var(--tw-ring-opacity, 1));
}
.focus\:ring-lime-400:focus{
  --tw-ring-opacity:  1;
  --tw-ring-color:  rgb(171 219 75 / var(--tw-ring-opacity, 1));
}
.focus\:ring-lime-400\/40:focus{
  --tw-ring-color:  rgb(171 219 75 / 0.4);
}
.focus-visible\:border-\[color\:var\(--erp-text\)\]:focus-visible{
  border-color:  var(--erp-text);
}
.focus-visible\:border-ccp-navy:focus-visible{
  --tw-border-opacity:  1;
  border-color:  rgb(13 30 82 / var(--tw-border-opacity, 1));
}
.focus-visible\:border-emerald-500:focus-visible{
  --tw-border-opacity:  1;
  border-color:  rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.focus-visible\:bg-\[color\:var\(--erp-surface-hover\)\]:focus-visible{
  background-color:  var(--erp-surface-hover);
}
.focus-visible\:bg-\[color\:var\(--erp-surface-selected\)\]:focus-visible{
  background-color:  var(--erp-surface-selected);
}
.focus-visible\:bg-ccp-hover:focus-visible{
  --tw-bg-opacity:  1;
  background-color:  rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.focus-visible\:text-\[color\:var\(--erp-text\)\]:focus-visible{
  color:  var(--erp-text);
}
.focus-visible\:text-ccp-navy:focus-visible{
  --tw-text-opacity:  1;
  color:  rgb(13 30 82 / var(--tw-text-opacity, 1));
}
.focus-visible\:shadow-ccp-ring:focus-visible{
  --tw-shadow:  0 0 0 3px rgba(13, 30, 82, 0.08);
  --tw-shadow-colored:  0 0 0 3px var(--tw-shadow-color);
  box-shadow:  var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus-visible\:shadow-\[var\(--bx-focus-ring\)\]:focus-visible{
  --tw-shadow-color:  var(--bx-focus-ring);
  --tw-shadow:  var(--tw-shadow-colored);
}
.focus-visible\:shadow-\[var\(--erp-focus\)\]:focus-visible{
  --tw-shadow-color:  var(--erp-focus);
  --tw-shadow:  var(--tw-shadow-colored);
}
.active\:scale-\[0\.98\]:active{
  --tw-scale-x:  0.98;
  --tw-scale-y:  0.98;
  transform:  translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.99\]:active{
  --tw-scale-x:  0.99;
  --tw-scale-y:  0.99;
  transform:  translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:bg-\[color\:var\(--erp-surface-sunken\)\]:active{
  background-color:  var(--erp-surface-sunken);
}
.disabled\:cursor-default:disabled{
  cursor:  default;
}
.disabled\:cursor-not-allowed:disabled{
  cursor:  not-allowed;
}
.disabled\:bg-\[color\:var\(--erp-surface-sunken\)\]:disabled{
  background-color:  var(--erp-surface-sunken);
}
.disabled\:bg-ccp-subtle:disabled{
  --tw-bg-opacity:  1;
  background-color:  rgb(242 244 247 / var(--tw-bg-opacity, 1));
}
.disabled\:text-ccp-faint:disabled{
  --tw-text-opacity:  1;
  color:  rgb(152 162 179 / var(--tw-text-opacity, 1));
}
.disabled\:opacity-30:disabled{
  opacity:  0.3;
}
.disabled\:opacity-35:disabled{
  opacity:  0.35;
}
.disabled\:opacity-40:disabled{
  opacity:  0.4;
}
.disabled\:opacity-50:disabled{
  opacity:  0.5;
}
.disabled\:opacity-60:disabled{
  opacity:  0.6;
}
.group:hover .group-hover\:translate-x-0\.5{
  --tw-translate-x:  0.125rem;
  transform:  translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:bg-white\/\[0\.12\]{
  background-color:  rgb(255 255 255 / 0.12);
}
.group:hover .group-hover\:text-emerald-500{
  --tw-text-opacity:  1;
  color:  rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-teal-700{
  --tw-text-opacity:  1;
  color:  rgb(24 108 99 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white{
  --tw-text-opacity:  1;
  color:  rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white\/70{
  color:  rgb(255 255 255 / 0.7);
}
.group:hover .group-hover\:opacity-100{
  opacity:  1;
}
.has-\[\:disabled\]\:cursor-default:has(:disabled){
  cursor:  default;
}
.has-\[\:disabled\]\:opacity-60:has(:disabled){
  opacity:  0.6;
}
@media (prefers-reduced-motion: reduce){
  .motion-reduce\:transition-none{
    transition-property:  none;
  }
}
@media (min-width: 640px){
  .sm\:col-span-2{
    grid-column:  span 2 / span 2;
  }
  .sm\:mt-16{
    margin-top:  4rem;
  }
  .sm\:block{
    display:  block;
  }
  .sm\:inline{
    display:  inline;
  }
  .sm\:inline-flex{
    display:  inline-flex;
  }
  .sm\:hidden{
    display:  none;
  }
  .sm\:h-12{
    height:  3rem;
  }
  .sm\:w-\[240px\]{
    width:  240px;
  }
  .sm\:grid-cols-2{
    grid-template-columns:  repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3{
    grid-template-columns:  repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4{
    grid-template-columns:  repeat(4, minmax(0, 1fr));
  }
  .sm\:grid-cols-5{
    grid-template-columns:  repeat(5, minmax(0, 1fr));
  }
  .sm\:flex-row{
    flex-direction:  row;
  }
  .sm\:flex-wrap{
    flex-wrap:  wrap;
  }
  .sm\:items-center{
    align-items:  center;
  }
  .sm\:justify-between{
    justify-content:  space-between;
  }
  .sm\:gap-2\.5{
    gap:  0.625rem;
  }
  .sm\:gap-3{
    gap:  0.75rem;
  }
  .sm\:border-l{
    border-left-width:  1px;
  }
  .sm\:border-t-0{
    border-top-width:  0px;
  }
  .sm\:p-7{
    padding:  1.75rem;
  }
  .sm\:p-8{
    padding:  2rem;
  }
  .sm\:px-10{
    padding-left:  2.5rem;
    padding-right:  2.5rem;
  }
  .sm\:px-3\.5{
    padding-left:  0.875rem;
    padding-right:  0.875rem;
  }
  .sm\:px-5{
    padding-left:  1.25rem;
    padding-right:  1.25rem;
  }
  .sm\:px-6{
    padding-left:  1.5rem;
    padding-right:  1.5rem;
  }
  .sm\:pt-0{
    padding-top:  0px;
  }
  .sm\:text-5xl{
    font-size:  3rem;
    line-height:  1;
  }
}
@media (min-width: 768px){
  .md\:flex{
    display:  flex;
  }
  .md\:w-80{
    width:  20rem;
  }
  .md\:grid-cols-2{
    grid-template-columns:  repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3{
    grid-template-columns:  repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-6{
    grid-template-columns:  repeat(6, minmax(0, 1fr));
  }
}
@media (min-width: 1024px){
  .lg\:sticky{
    position:  sticky;
  }
  .lg\:top-0{
    top:  0px;
  }
  .lg\:mb-0\.5{
    margin-bottom:  0.125rem;
  }
  .lg\:block{
    display:  block;
  }
  .lg\:flex{
    display:  flex;
  }
  .lg\:hidden{
    display:  none;
  }
  .lg\:h-screen{
    height:  100vh;
  }
  .lg\:min-h-0{
    min-height:  0px;
  }
  .lg\:w-72{
    width:  18rem;
  }
  .lg\:w-96{
    width:  24rem;
  }
  .lg\:w-\[var\(--erp-sidebar-w-collapsed\)\]{
    width:  var(--erp-sidebar-w-collapsed);
  }
  .lg\:min-w-0{
    min-width:  0px;
  }
  .lg\:grid-cols-2{
    grid-template-columns:  repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3{
    grid-template-columns:  repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4{
    grid-template-columns:  repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-5{
    grid-template-columns:  repeat(5, minmax(0, 1fr));
  }
  .lg\:grid-cols-\[1\.4fr_1fr\]{
    grid-template-columns:  1.4fr 1fr;
  }
  .lg\:grid-cols-\[1fr_1\.1fr\]{
    grid-template-columns:  1fr 1.1fr;
  }
  .lg\:grid-cols-\[200px_minmax\(0\2c 1fr\)\]{
    grid-template-columns:  200px minmax(0,1fr);
  }
  .lg\:grid-cols-\[3fr_2fr\]{
    grid-template-columns:  3fr 2fr;
  }
  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_280px\]{
    grid-template-columns:  minmax(0,1fr) 280px;
  }
  .lg\:flex-col{
    flex-direction:  column;
  }
  .lg\:justify-center{
    justify-content:  center;
  }
  .lg\:gap-0{
    gap:  0px;
  }
  .lg\:space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse:  0;
    margin-top:  calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom:  calc(0.125rem * var(--tw-space-y-reverse));
  }
  .lg\:overflow-y-auto{
    overflow-y:  auto;
  }
  .lg\:overflow-x-visible{
    overflow-x:  visible;
  }
  .lg\:px-3{
    padding-left:  0.75rem;
    padding-right:  0.75rem;
  }
  .lg\:px-8{
    padding-left:  2rem;
    padding-right:  2rem;
  }
  .lg\:py-7{
    padding-top:  1.75rem;
    padding-bottom:  1.75rem;
  }
  .lg\:pb-6{
    padding-bottom:  1.5rem;
  }
}
@media (min-width: 1280px){
  .xl\:block{
    display:  block;
  }
  .xl\:inline{
    display:  inline;
  }
  .xl\:hidden{
    display:  none;
  }
  .xl\:w-\[26rem\]{
    width:  26rem;
  }
  .xl\:w-\[var\(--erp-sidebar-w\)\]{
    width:  var(--erp-sidebar-w);
  }
  .xl\:grid-cols-2{
    grid-template-columns:  repeat(2, minmax(0, 1fr));
  }
  .xl\:grid-cols-3{
    grid-template-columns:  repeat(3, minmax(0, 1fr));
  }
  .xl\:grid-cols-4{
    grid-template-columns:  repeat(4, minmax(0, 1fr));
  }
  .xl\:grid-cols-6{
    grid-template-columns:  repeat(6, minmax(0, 1fr));
  }
  .xl\:grid-cols-\[minmax\(0\2c 1fr\)_340px\]{
    grid-template-columns:  minmax(0,1fr) 340px;
  }
  .xl\:justify-start{
    justify-content:  flex-start;
  }
  .xl\:gap-3{
    gap:  0.75rem;
  }
  .xl\:p-4{
    padding:  1rem;
  }
  .xl\:px-2\.5{
    padding-left:  0.625rem;
    padding-right:  0.625rem;
  }
  .xl\:px-4{
    padding-left:  1rem;
    padding-right:  1rem;
  }
}
@media (min-width: 1536px){
  .\32xl\:grid-cols-4{
    grid-template-columns:  repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1900px){
  .min-\[1900px\]\:flex{
    display:  flex;
  }
}
/* GENERATED by the Bagaax CCP re-skin: maps the legacy `ccp-*` Tailwind colour utilities onto the
   --erp-* tokens so every CCP screen follows the light/dark theme. Scoped to html.ccp-portal (set by CCPLayout). */
html.ccp-portal .bg-ccp-canvas{background-color:var(--erp-canvas)}
html.ccp-portal .hover\:bg-ccp-canvas:hover{background-color:var(--erp-canvas)}
html.ccp-portal .text-ccp-canvas{color:var(--erp-canvas)}
html.ccp-portal .hover\:text-ccp-canvas:hover{color:var(--erp-canvas)}
html.ccp-portal .border-ccp-canvas{border-color:var(--erp-canvas)}
html.ccp-portal .hover\:border-ccp-canvas:hover{border-color:var(--erp-canvas)}
html.ccp-portal .bg-ccp-card{background-color:var(--erp-surface)}
html.ccp-portal .hover\:bg-ccp-card:hover{background-color:var(--erp-surface)}
html.ccp-portal .text-ccp-card{color:var(--erp-surface)}
html.ccp-portal .hover\:text-ccp-card:hover{color:var(--erp-surface)}
html.ccp-portal .border-ccp-card{border-color:var(--erp-surface)}
html.ccp-portal .hover\:border-ccp-card:hover{border-color:var(--erp-surface)}
html.ccp-portal .bg-ccp-border{background-color:var(--erp-border)}
html.ccp-portal .hover\:bg-ccp-border:hover{background-color:var(--erp-border)}
html.ccp-portal .text-ccp-border{color:var(--erp-border)}
html.ccp-portal .hover\:text-ccp-border:hover{color:var(--erp-border)}
html.ccp-portal .border-ccp-border{border-color:var(--erp-border)}
html.ccp-portal .hover\:border-ccp-border:hover{border-color:var(--erp-border)}
html.ccp-portal .bg-ccp-hairline{background-color:var(--erp-divider)}
html.ccp-portal .hover\:bg-ccp-hairline:hover{background-color:var(--erp-divider)}
html.ccp-portal .text-ccp-hairline{color:var(--erp-divider)}
html.ccp-portal .hover\:text-ccp-hairline:hover{color:var(--erp-divider)}
html.ccp-portal .border-ccp-hairline{border-color:var(--erp-divider)}
html.ccp-portal .hover\:border-ccp-hairline:hover{border-color:var(--erp-divider)}
html.ccp-portal .decoration-ccp-hairline{text-decoration-color:var(--erp-divider)}
html.ccp-portal .bg-ccp-hairline-soft{background-color:var(--erp-divider)}
html.ccp-portal .hover\:bg-ccp-hairline-soft:hover{background-color:var(--erp-divider)}
html.ccp-portal .text-ccp-hairline-soft{color:var(--erp-divider)}
html.ccp-portal .hover\:text-ccp-hairline-soft:hover{color:var(--erp-divider)}
html.ccp-portal .border-ccp-hairline-soft{border-color:var(--erp-divider)}
html.ccp-portal .hover\:border-ccp-hairline-soft:hover{border-color:var(--erp-divider)}
html.ccp-portal .bg-ccp-subtle{background-color:var(--erp-surface-sunken)}
html.ccp-portal .hover\:bg-ccp-subtle:hover{background-color:var(--erp-surface-sunken)}
html.ccp-portal .disabled\:bg-ccp-subtle:disabled{background-color:var(--erp-surface-sunken)}
html.ccp-portal .text-ccp-subtle{color:var(--erp-surface-sunken)}
html.ccp-portal .hover\:text-ccp-subtle:hover{color:var(--erp-surface-sunken)}
html.ccp-portal .border-ccp-subtle{border-color:var(--erp-surface-sunken)}
html.ccp-portal .hover\:border-ccp-subtle:hover{border-color:var(--erp-surface-sunken)}
html.ccp-portal .bg-ccp-hover{background-color:var(--erp-surface-hover)}
html.ccp-portal .hover\:bg-ccp-hover:hover{background-color:var(--erp-surface-hover)}
html.ccp-portal .focus-visible\:bg-ccp-hover:focus-visible{background-color:var(--erp-surface-hover)}
html.ccp-portal .text-ccp-hover{color:var(--erp-surface-hover)}
html.ccp-portal .hover\:text-ccp-hover:hover{color:var(--erp-surface-hover)}
html.ccp-portal .border-ccp-hover{border-color:var(--erp-surface-hover)}
html.ccp-portal .hover\:border-ccp-hover:hover{border-color:var(--erp-surface-hover)}
html.ccp-portal .bg-ccp-selected{background-color:var(--erp-surface-selected)}
html.ccp-portal .hover\:bg-ccp-selected:hover{background-color:var(--erp-surface-selected)}
html.ccp-portal .focus-visible\:bg-ccp-selected:focus-visible{background-color:var(--erp-surface-selected)}
html.ccp-portal .text-ccp-selected{color:var(--erp-surface-selected)}
html.ccp-portal .hover\:text-ccp-selected:hover{color:var(--erp-surface-selected)}
html.ccp-portal .border-ccp-selected{border-color:var(--erp-surface-selected)}
html.ccp-portal .hover\:border-ccp-selected:hover{border-color:var(--erp-surface-selected)}
html.ccp-portal .bg-ccp-fg{background-color:var(--erp-text)}
html.ccp-portal .hover\:bg-ccp-fg:hover{background-color:var(--erp-text)}
html.ccp-portal .text-ccp-fg{color:var(--erp-text)}
html.ccp-portal .hover\:text-ccp-fg:hover{color:var(--erp-text)}
html.ccp-portal .border-ccp-fg{border-color:var(--erp-text)}
html.ccp-portal .hover\:border-ccp-fg:hover{border-color:var(--erp-text)}
html.ccp-portal .bg-ccp-body{background-color:var(--erp-text-2)}
html.ccp-portal .hover\:bg-ccp-body:hover{background-color:var(--erp-text-2)}
html.ccp-portal .text-ccp-body{color:var(--erp-text-2)}
html.ccp-portal .hover\:text-ccp-body:hover{color:var(--erp-text-2)}
html.ccp-portal .border-ccp-body{border-color:var(--erp-text-2)}
html.ccp-portal .hover\:border-ccp-body:hover{border-color:var(--erp-text-2)}
html.ccp-portal .bg-ccp-muted{background-color:var(--erp-text-muted)}
html.ccp-portal .hover\:bg-ccp-muted:hover{background-color:var(--erp-text-muted)}
html.ccp-portal .text-ccp-muted{color:var(--erp-text-muted)}
html.ccp-portal .hover\:text-ccp-muted:hover{color:var(--erp-text-muted)}
html.ccp-portal .border-ccp-muted{border-color:var(--erp-text-muted)}
html.ccp-portal .hover\:border-ccp-muted:hover{border-color:var(--erp-text-muted)}
html.ccp-portal .bg-ccp-faint{background-color:var(--erp-text-muted)}
html.ccp-portal .hover\:bg-ccp-faint:hover{background-color:var(--erp-text-muted)}
html.ccp-portal .text-ccp-faint{color:var(--erp-text-muted)}
html.ccp-portal .hover\:text-ccp-faint:hover{color:var(--erp-text-muted)}
html.ccp-portal .disabled\:text-ccp-faint:disabled{color:var(--erp-text-muted)}
html.ccp-portal .border-ccp-faint{border-color:var(--erp-text-muted)}
html.ccp-portal .hover\:border-ccp-faint:hover{border-color:var(--erp-text-muted)}
html.ccp-portal .decoration-ccp-faint{text-decoration-color:var(--erp-text-muted)}
html.ccp-portal .bg-ccp-absent{background-color:var(--erp-text-disabled)}
html.ccp-portal .hover\:bg-ccp-absent:hover{background-color:var(--erp-text-disabled)}
html.ccp-portal .text-ccp-absent{color:var(--erp-text-disabled)}
html.ccp-portal .hover\:text-ccp-absent:hover{color:var(--erp-text-disabled)}
html.ccp-portal .border-ccp-absent{border-color:var(--erp-text-disabled)}
html.ccp-portal .hover\:border-ccp-absent:hover{border-color:var(--erp-text-disabled)}
html.ccp-portal .bg-ccp-navy{background-color:var(--erp-primary)}
html.ccp-portal .hover\:bg-ccp-navy:hover{background-color:var(--erp-primary)}
html.ccp-portal .text-ccp-navy{color:var(--erp-primary)}
html.ccp-portal .hover\:text-ccp-navy:hover{color:var(--erp-primary)}
html.ccp-portal .focus-visible\:text-ccp-navy:focus-visible{color:var(--erp-primary)}
html.ccp-portal .border-ccp-navy{border-color:var(--erp-primary)}
html.ccp-portal .hover\:border-ccp-navy:hover{border-color:var(--erp-primary)}
html.ccp-portal .focus\:border-ccp-navy:focus{border-color:var(--erp-primary)}
html.ccp-portal .focus-visible\:border-ccp-navy:focus-visible{border-color:var(--erp-primary)}
html.ccp-portal .accent-ccp-navy{accent-color:var(--erp-primary)}
html.ccp-portal .bg-ccp-ink{background-color:var(--erp-shell-bg)}
html.ccp-portal .hover\:bg-ccp-ink:hover{background-color:var(--erp-shell-bg)}
html.ccp-portal .text-ccp-ink{color:var(--erp-shell-bg)}
html.ccp-portal .hover\:text-ccp-ink:hover{color:var(--erp-shell-bg)}
html.ccp-portal .border-ccp-ink{border-color:var(--erp-shell-bg)}
html.ccp-portal .hover\:border-ccp-ink:hover{border-color:var(--erp-shell-bg)}
html.ccp-portal .bg-ccp-alert-bg{background-color:var(--erp-error-bg)}
html.ccp-portal .hover\:bg-ccp-alert-bg:hover{background-color:var(--erp-error-bg)}
html.ccp-portal .text-ccp-alert-bg{color:var(--erp-error-bg)}
html.ccp-portal .hover\:text-ccp-alert-bg:hover{color:var(--erp-error-bg)}
html.ccp-portal .border-ccp-alert-bg{border-color:var(--erp-error-bg)}
html.ccp-portal .hover\:border-ccp-alert-bg:hover{border-color:var(--erp-error-bg)}
html.ccp-portal .bg-ccp-alert-bd{background-color:var(--erp-error-line)}
html.ccp-portal .hover\:bg-ccp-alert-bd:hover{background-color:var(--erp-error-line)}
html.ccp-portal .text-ccp-alert-bd{color:var(--erp-error-line)}
html.ccp-portal .hover\:text-ccp-alert-bd:hover{color:var(--erp-error-line)}
html.ccp-portal .border-ccp-alert-bd{border-color:var(--erp-error-line)}
html.ccp-portal .hover\:border-ccp-alert-bd:hover{border-color:var(--erp-error-line)}
html.ccp-portal .bg-ccp-alert-fg{background-color:var(--erp-error-fg)}
html.ccp-portal .hover\:bg-ccp-alert-fg:hover{background-color:var(--erp-error-fg)}
html.ccp-portal .text-ccp-alert-fg{color:var(--erp-error-fg)}
html.ccp-portal .hover\:text-ccp-alert-fg:hover{color:var(--erp-error-fg)}
html.ccp-portal .border-ccp-alert-fg{border-color:var(--erp-error-fg)}
html.ccp-portal .hover\:border-ccp-alert-fg:hover{border-color:var(--erp-error-fg)}
html.ccp-portal .bg-ccp-alert-row{background-color:color-mix(in srgb, var(--erp-error-bg) 45%, transparent)}
html.ccp-portal .hover\:bg-ccp-alert-row:hover{background-color:color-mix(in srgb, var(--erp-error-bg) 45%, transparent)}
html.ccp-portal .text-ccp-alert-row{color:color-mix(in srgb, var(--erp-error-bg) 45%, transparent)}
html.ccp-portal .hover\:text-ccp-alert-row:hover{color:color-mix(in srgb, var(--erp-error-bg) 45%, transparent)}
html.ccp-portal .border-ccp-alert-row{border-color:color-mix(in srgb, var(--erp-error-bg) 45%, transparent)}
html.ccp-portal .hover\:border-ccp-alert-row:hover{border-color:color-mix(in srgb, var(--erp-error-bg) 45%, transparent)}
html.ccp-portal .bg-ccp-alert-soft{background-color:var(--erp-error-bg)}
html.ccp-portal .hover\:bg-ccp-alert-soft:hover{background-color:var(--erp-error-bg)}
html.ccp-portal .text-ccp-alert-soft{color:var(--erp-error-bg)}
html.ccp-portal .hover\:text-ccp-alert-soft:hover{color:var(--erp-error-bg)}
html.ccp-portal .border-ccp-alert-soft{border-color:var(--erp-error-bg)}
html.ccp-portal .hover\:border-ccp-alert-soft:hover{border-color:var(--erp-error-bg)}
html.ccp-portal .bg-ccp-alert-border{background-color:var(--erp-error-line)}
html.ccp-portal .hover\:bg-ccp-alert-border:hover{background-color:var(--erp-error-line)}
html.ccp-portal .text-ccp-alert-border{color:var(--erp-error-line)}
html.ccp-portal .hover\:text-ccp-alert-border:hover{color:var(--erp-error-line)}
html.ccp-portal .border-ccp-alert-border{border-color:var(--erp-error-line)}
html.ccp-portal .hover\:border-ccp-alert-border:hover{border-color:var(--erp-error-line)}
html.ccp-portal .bg-ccp-warn-bg{background-color:var(--erp-warning-bg)}
html.ccp-portal .hover\:bg-ccp-warn-bg:hover{background-color:var(--erp-warning-bg)}
html.ccp-portal .text-ccp-warn-bg{color:var(--erp-warning-bg)}
html.ccp-portal .hover\:text-ccp-warn-bg:hover{color:var(--erp-warning-bg)}
html.ccp-portal .border-ccp-warn-bg{border-color:var(--erp-warning-bg)}
html.ccp-portal .hover\:border-ccp-warn-bg:hover{border-color:var(--erp-warning-bg)}
html.ccp-portal .bg-ccp-warn-bd{background-color:var(--erp-warning-line)}
html.ccp-portal .hover\:bg-ccp-warn-bd:hover{background-color:var(--erp-warning-line)}
html.ccp-portal .text-ccp-warn-bd{color:var(--erp-warning-line)}
html.ccp-portal .hover\:text-ccp-warn-bd:hover{color:var(--erp-warning-line)}
html.ccp-portal .border-ccp-warn-bd{border-color:var(--erp-warning-line)}
html.ccp-portal .hover\:border-ccp-warn-bd:hover{border-color:var(--erp-warning-line)}
html.ccp-portal .bg-ccp-warn-fg{background-color:var(--erp-warning-fg)}
html.ccp-portal .hover\:bg-ccp-warn-fg:hover{background-color:var(--erp-warning-fg)}
html.ccp-portal .text-ccp-warn-fg{color:var(--erp-warning-fg)}
html.ccp-portal .hover\:text-ccp-warn-fg:hover{color:var(--erp-warning-fg)}
html.ccp-portal .border-ccp-warn-fg{border-color:var(--erp-warning-fg)}
html.ccp-portal .hover\:border-ccp-warn-fg:hover{border-color:var(--erp-warning-fg)}
html.ccp-portal .bg-ccp-warn-row{background-color:color-mix(in srgb, var(--erp-warning-bg) 45%, transparent)}
html.ccp-portal .hover\:bg-ccp-warn-row:hover{background-color:color-mix(in srgb, var(--erp-warning-bg) 45%, transparent)}
html.ccp-portal .text-ccp-warn-row{color:color-mix(in srgb, var(--erp-warning-bg) 45%, transparent)}
html.ccp-portal .hover\:text-ccp-warn-row:hover{color:color-mix(in srgb, var(--erp-warning-bg) 45%, transparent)}
html.ccp-portal .border-ccp-warn-row{border-color:color-mix(in srgb, var(--erp-warning-bg) 45%, transparent)}
html.ccp-portal .hover\:border-ccp-warn-row:hover{border-color:color-mix(in srgb, var(--erp-warning-bg) 45%, transparent)}
html.ccp-portal .bg-ccp-warn-soft{background-color:var(--erp-warning-bg)}
html.ccp-portal .hover\:bg-ccp-warn-soft:hover{background-color:var(--erp-warning-bg)}
html.ccp-portal .text-ccp-warn-soft{color:var(--erp-warning-bg)}
html.ccp-portal .hover\:text-ccp-warn-soft:hover{color:var(--erp-warning-bg)}
html.ccp-portal .border-ccp-warn-soft{border-color:var(--erp-warning-bg)}
html.ccp-portal .hover\:border-ccp-warn-soft:hover{border-color:var(--erp-warning-bg)}
html.ccp-portal .bg-ccp-warn{background-color:var(--erp-warning-line)}
html.ccp-portal .hover\:bg-ccp-warn:hover{background-color:var(--erp-warning-line)}
html.ccp-portal .text-ccp-warn{color:var(--erp-warning-line)}
html.ccp-portal .hover\:text-ccp-warn:hover{color:var(--erp-warning-line)}
html.ccp-portal .border-ccp-warn{border-color:var(--erp-warning-line)}
html.ccp-portal .hover\:border-ccp-warn:hover{border-color:var(--erp-warning-line)}
html.ccp-portal .bg-ccp-good-bg{background-color:var(--erp-success-bg)}
html.ccp-portal .hover\:bg-ccp-good-bg:hover{background-color:var(--erp-success-bg)}
html.ccp-portal .text-ccp-good-bg{color:var(--erp-success-bg)}
html.ccp-portal .hover\:text-ccp-good-bg:hover{color:var(--erp-success-bg)}
html.ccp-portal .border-ccp-good-bg{border-color:var(--erp-success-bg)}
html.ccp-portal .hover\:border-ccp-good-bg:hover{border-color:var(--erp-success-bg)}
html.ccp-portal .bg-ccp-good-bd{background-color:var(--erp-success-line)}
html.ccp-portal .hover\:bg-ccp-good-bd:hover{background-color:var(--erp-success-line)}
html.ccp-portal .text-ccp-good-bd{color:var(--erp-success-line)}
html.ccp-portal .hover\:text-ccp-good-bd:hover{color:var(--erp-success-line)}
html.ccp-portal .border-ccp-good-bd{border-color:var(--erp-success-line)}
html.ccp-portal .hover\:border-ccp-good-bd:hover{border-color:var(--erp-success-line)}
html.ccp-portal .bg-ccp-good-fg{background-color:var(--erp-success-fg)}
html.ccp-portal .hover\:bg-ccp-good-fg:hover{background-color:var(--erp-success-fg)}
html.ccp-portal .text-ccp-good-fg{color:var(--erp-success-fg)}
html.ccp-portal .hover\:text-ccp-good-fg:hover{color:var(--erp-success-fg)}
html.ccp-portal .border-ccp-good-fg{border-color:var(--erp-success-fg)}
html.ccp-portal .hover\:border-ccp-good-fg:hover{border-color:var(--erp-success-fg)}
html.ccp-portal .bg-ccp-neutral-fg{background-color:var(--erp-text-2)}
html.ccp-portal .hover\:bg-ccp-neutral-fg:hover{background-color:var(--erp-text-2)}
html.ccp-portal .text-ccp-neutral-fg{color:var(--erp-text-2)}
html.ccp-portal .hover\:text-ccp-neutral-fg:hover{color:var(--erp-text-2)}
html.ccp-portal .border-ccp-neutral-fg{border-color:var(--erp-text-2)}
html.ccp-portal .hover\:border-ccp-neutral-fg:hover{border-color:var(--erp-text-2)}
html.ccp-portal .bg-ccp-info-bg{background-color:var(--erp-info-bg)}
html.ccp-portal .hover\:bg-ccp-info-bg:hover{background-color:var(--erp-info-bg)}
html.ccp-portal .text-ccp-info-bg{color:var(--erp-info-bg)}
html.ccp-portal .hover\:text-ccp-info-bg:hover{color:var(--erp-info-bg)}
html.ccp-portal .border-ccp-info-bg{border-color:var(--erp-info-bg)}
html.ccp-portal .hover\:border-ccp-info-bg:hover{border-color:var(--erp-info-bg)}
html.ccp-portal .bg-ccp-info-bd{background-color:var(--erp-info-line)}
html.ccp-portal .hover\:bg-ccp-info-bd:hover{background-color:var(--erp-info-line)}
html.ccp-portal .text-ccp-info-bd{color:var(--erp-info-line)}
html.ccp-portal .hover\:text-ccp-info-bd:hover{color:var(--erp-info-line)}
html.ccp-portal .border-ccp-info-bd{border-color:var(--erp-info-line)}
html.ccp-portal .hover\:border-ccp-info-bd:hover{border-color:var(--erp-info-line)}
html.ccp-portal .bg-ccp-info-fg{background-color:var(--erp-info-fg)}
html.ccp-portal .hover\:bg-ccp-info-fg:hover{background-color:var(--erp-info-fg)}
html.ccp-portal .text-ccp-info-fg{color:var(--erp-info-fg)}
html.ccp-portal .hover\:text-ccp-info-fg:hover{color:var(--erp-info-fg)}
html.ccp-portal .border-ccp-info-fg{border-color:var(--erp-info-fg)}
html.ccp-portal .hover\:border-ccp-info-fg:hover{border-color:var(--erp-info-fg)}
html.ccp-portal .bg-ccp-session-bg{background-color:var(--erp-st-hold-bg)}
html.ccp-portal .hover\:bg-ccp-session-bg:hover{background-color:var(--erp-st-hold-bg)}
html.ccp-portal .text-ccp-session-bg{color:var(--erp-st-hold-bg)}
html.ccp-portal .hover\:text-ccp-session-bg:hover{color:var(--erp-st-hold-bg)}
html.ccp-portal .border-ccp-session-bg{border-color:var(--erp-st-hold-bg)}
html.ccp-portal .hover\:border-ccp-session-bg:hover{border-color:var(--erp-st-hold-bg)}
html.ccp-portal .bg-ccp-session-bd{background-color:var(--erp-st-hold-dot)}
html.ccp-portal .hover\:bg-ccp-session-bd:hover{background-color:var(--erp-st-hold-dot)}
html.ccp-portal .text-ccp-session-bd{color:var(--erp-st-hold-dot)}
html.ccp-portal .hover\:text-ccp-session-bd:hover{color:var(--erp-st-hold-dot)}
html.ccp-portal .border-ccp-session-bd{border-color:var(--erp-st-hold-dot)}
html.ccp-portal .hover\:border-ccp-session-bd:hover{border-color:var(--erp-st-hold-dot)}
html.ccp-portal .bg-ccp-session-fg{background-color:var(--erp-st-hold-fg)}
html.ccp-portal .hover\:bg-ccp-session-fg:hover{background-color:var(--erp-st-hold-fg)}
html.ccp-portal .text-ccp-session-fg{color:var(--erp-st-hold-fg)}
html.ccp-portal .hover\:text-ccp-session-fg:hover{color:var(--erp-st-hold-fg)}
html.ccp-portal .border-ccp-session-fg{border-color:var(--erp-st-hold-fg)}
html.ccp-portal .hover\:border-ccp-session-fg:hover{border-color:var(--erp-st-hold-fg)}
html.ccp-portal .bg-ccp-field-bg{background-color:var(--erp-info-bg)}
html.ccp-portal .hover\:bg-ccp-field-bg:hover{background-color:var(--erp-info-bg)}
html.ccp-portal .text-ccp-field-bg{color:var(--erp-info-bg)}
html.ccp-portal .hover\:text-ccp-field-bg:hover{color:var(--erp-info-bg)}
html.ccp-portal .border-ccp-field-bg{border-color:var(--erp-info-bg)}
html.ccp-portal .hover\:border-ccp-field-bg:hover{border-color:var(--erp-info-bg)}
html.ccp-portal .bg-ccp-field-bd{background-color:var(--erp-info-line)}
html.ccp-portal .hover\:bg-ccp-field-bd:hover{background-color:var(--erp-info-line)}
html.ccp-portal .text-ccp-field-bd{color:var(--erp-info-line)}
html.ccp-portal .hover\:text-ccp-field-bd:hover{color:var(--erp-info-line)}
html.ccp-portal .border-ccp-field-bd{border-color:var(--erp-info-line)}
html.ccp-portal .hover\:border-ccp-field-bd:hover{border-color:var(--erp-info-line)}
html.ccp-portal .bg-ccp-field-fg{background-color:var(--erp-info-fg)}
html.ccp-portal .hover\:bg-ccp-field-fg:hover{background-color:var(--erp-info-fg)}
html.ccp-portal .text-ccp-field-fg{color:var(--erp-info-fg)}
html.ccp-portal .hover\:text-ccp-field-fg:hover{color:var(--erp-info-fg)}
html.ccp-portal .border-ccp-field-fg{border-color:var(--erp-info-fg)}
html.ccp-portal .hover\:border-ccp-field-fg:hover{border-color:var(--erp-info-fg)}
html.ccp-portal .bg-ccp-skeleton{background-color:var(--erp-border)}
html.ccp-portal .hover\:bg-ccp-skeleton:hover{background-color:var(--erp-border)}
html.ccp-portal .text-ccp-skeleton{color:var(--erp-border)}
html.ccp-portal .hover\:text-ccp-skeleton:hover{color:var(--erp-border)}
html.ccp-portal .border-ccp-skeleton{border-color:var(--erp-border)}
html.ccp-portal .hover\:border-ccp-skeleton:hover{border-color:var(--erp-border)}
html.ccp-portal .bg-ccp-panel{background-color:var(--erp-surface)}
html.ccp-portal .hover\:bg-ccp-panel:hover{background-color:var(--erp-surface)}
html.ccp-portal .text-ccp-panel{color:var(--erp-surface)}
html.ccp-portal .hover\:text-ccp-panel:hover{color:var(--erp-surface)}
html.ccp-portal .border-ccp-panel{border-color:var(--erp-surface)}
html.ccp-portal .hover\:border-ccp-panel:hover{border-color:var(--erp-surface)}
html.ccp-portal .bg-ccp-amber{background-color:var(--erp-st-pending-dot)}
html.ccp-portal .hover\:bg-ccp-amber:hover{background-color:var(--erp-st-pending-dot)}
html.ccp-portal .text-ccp-amber{color:var(--erp-st-pending-dot)}
html.ccp-portal .hover\:text-ccp-amber:hover{color:var(--erp-st-pending-dot)}
html.ccp-portal .border-ccp-amber{border-color:var(--erp-st-pending-dot)}
html.ccp-portal .hover\:border-ccp-amber:hover{border-color:var(--erp-st-pending-dot)}
html.ccp-portal .ring-ccp-amber{--tw-ring-color:var(--erp-st-pending-dot)}
html.ccp-portal .bg-ccp-emerald{background-color:var(--erp-st-paid-dot)}
html.ccp-portal .hover\:bg-ccp-emerald:hover{background-color:var(--erp-st-paid-dot)}
html.ccp-portal .text-ccp-emerald{color:var(--erp-st-paid-dot)}
html.ccp-portal .hover\:text-ccp-emerald:hover{color:var(--erp-st-paid-dot)}
html.ccp-portal .border-ccp-emerald{border-color:var(--erp-st-paid-dot)}
html.ccp-portal .hover\:border-ccp-emerald:hover{border-color:var(--erp-st-paid-dot)}
html.ccp-portal .bg-ccp-coral{background-color:var(--erp-st-overdue-dot)}
html.ccp-portal .hover\:bg-ccp-coral:hover{background-color:var(--erp-st-overdue-dot)}
html.ccp-portal .text-ccp-coral{color:var(--erp-st-overdue-dot)}
html.ccp-portal .hover\:text-ccp-coral:hover{color:var(--erp-st-overdue-dot)}
html.ccp-portal .border-ccp-coral{border-color:var(--erp-st-overdue-dot)}
html.ccp-portal .hover\:border-ccp-coral:hover{border-color:var(--erp-st-overdue-dot)}
html.ccp-portal .bg-ccp-info{background-color:var(--erp-info-line)}
html.ccp-portal .hover\:bg-ccp-info:hover{background-color:var(--erp-info-line)}
html.ccp-portal .text-ccp-info{color:var(--erp-info-line)}
html.ccp-portal .hover\:text-ccp-info:hover{color:var(--erp-info-line)}
html.ccp-portal .border-ccp-info{border-color:var(--erp-info-line)}
html.ccp-portal .hover\:border-ccp-info:hover{border-color:var(--erp-info-line)}
html.ccp-portal .placeholder\:text-ccp-faint::-moz-placeholder{color:var(--erp-text-muted)}
html.ccp-portal .placeholder\:text-ccp-faint::placeholder{color:var(--erp-text-muted)}
html.ccp-portal .divide-ccp-hairline>:not([hidden])~:not([hidden]){border-color:var(--erp-divider)}
html.ccp-portal .divide-ccp-border>:not([hidden])~:not([hidden]){border-color:var(--erp-border)}
html.ccp-portal .bg-ccp-fg\/40{background-color:var(--erp-scrim)}
html.ccp-portal .shadow-ccp-card{box-shadow:var(--erp-shadow-1)}
html.ccp-portal .shadow-ccp-seg{box-shadow:var(--erp-shadow-1)}
html.ccp-portal .shadow-ccp-modal{box-shadow:var(--erp-shadow-3)}
html.ccp-portal .shadow-ccp-ring,html.ccp-portal .focus-visible\:shadow-ccp-ring:focus-visible,html.ccp-portal .focus\:shadow-ccp-ring:focus{box-shadow:var(--erp-focus)}
/* A navy fill carries white text: when navy flips to lime in dark mode the text must flip with it. */
html.ccp-portal .bg-ccp-navy.text-white,html.ccp-portal .bg-ccp-navy .text-white{color:var(--erp-on-primary)}
html.ccp-portal .bg-ccp-navy:hover{background-color:var(--erp-primary-hover)}
html.ccp-portal{background-color:var(--erp-canvas)}

/* Dark mode: generic palette classes still used by screens that predate the tokens. */
html.ccp-portal[data-theme="dark"] .bg-white{background-color:var(--erp-surface)}
html.ccp-portal[data-theme="dark"] .bg-surface-50,html.ccp-portal[data-theme="dark"] .bg-gray-100{background-color:var(--erp-surface-sunken)}
html.ccp-portal[data-theme="dark"] .border-surface-100,html.ccp-portal[data-theme="dark"] .border-surface-200,html.ccp-portal[data-theme="dark"] .border-gray-200{border-color:var(--erp-border)}
html.ccp-portal[data-theme="dark"] .divide-surface-50>:not([hidden])~:not([hidden]){border-color:var(--erp-divider)}
html.ccp-portal[data-theme="dark"] :is(.text-surface-700,.text-surface-600,.text-gray-600,.text-gray-500,.text-slate-800,.text-slate-900,.text-brand-900,.text-brand-950,.text-brand-700){color:var(--erp-text)}
html.ccp-portal[data-theme="dark"] :is(.text-surface-500,.text-surface-400,.text-surface-300,.text-gray-400,.text-gray-300){color:var(--erp-text-muted)}
html.ccp-portal[data-theme="dark"] :is(.text-red-600,.text-red-800,.text-red-300){color:var(--erp-error-fg)}
html.ccp-portal[data-theme="dark"] :is(.bg-red-50,.bg-red-50\/50,.bg-red-50\/40){background-color:var(--erp-error-bg)}
html.ccp-portal[data-theme="dark"] :is(.border-red-200,.border-red-400){border-color:var(--erp-error-line)}

/* Badges that carry their own marker (e.g. the Delta arrow) drop the status dot. */
html.ccp-portal .erp-status--nodot::before{display:none}
.erp-status--nodot{padding-left:9px}
/* poppins-devanagari-500-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/poppins-devanagari-500-normal-BIdkeU1p.woff2) format('woff2'), url(/assets/poppins-devanagari-500-normal-DMPDjHtT.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* poppins-latin-ext-500-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/poppins-latin-ext-500-normal-CK-6C4Hw.woff2) format('woff2'), url(/assets/poppins-latin-ext-500-normal-CgAe2rWW.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* poppins-latin-500-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/poppins-latin-500-normal-C8OXljZJ.woff2) format('woff2'), url(/assets/poppins-latin-500-normal-DGXqpDMm.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* poppins-devanagari-600-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/poppins-devanagari-600-normal-STEjXBNN.woff2) format('woff2'), url(/assets/poppins-devanagari-600-normal-ClASKHrr.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* poppins-latin-ext-600-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/poppins-latin-ext-600-normal-CAhIAdZj.woff2) format('woff2'), url(/assets/poppins-latin-ext-600-normal-Df5ffKXP.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* poppins-latin-600-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/poppins-latin-600-normal-zEkxB9Mr.woff2) format('woff2'), url(/assets/poppins-latin-600-normal-BJdTmd5m.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* poppins-devanagari-700-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/poppins-devanagari-700-normal-O-jipLrW.woff2) format('woff2'), url(/assets/poppins-devanagari-700-normal-fHs-vx92.woff) format('woff');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
}

/* poppins-latin-ext-700-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/poppins-latin-ext-700-normal-cby-RkWa.woff2) format('woff2'), url(/assets/poppins-latin-ext-700-normal-DctTR6Tg.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* poppins-latin-700-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/poppins-latin-700-normal-Qrb0O0WB.woff2) format('woff2'), url(/assets/poppins-latin-700-normal-BVuQR_eA.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* dm-sans-latin-ext-400-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/dm-sans-latin-ext-400-normal-BtiwyxMk.woff2) format('woff2'), url(/assets/dm-sans-latin-ext-400-normal-BjWJ59Pq.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* dm-sans-latin-400-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/dm-sans-latin-400-normal-CW0RaeGs.woff2) format('woff2'), url(/assets/dm-sans-latin-400-normal-BwCSEQnW.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* dm-sans-latin-ext-500-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/dm-sans-latin-ext-500-normal-BJfUCQsA.woff2) format('woff2'), url(/assets/dm-sans-latin-ext-500-normal-DR84L5F-.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* dm-sans-latin-500-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/dm-sans-latin-500-normal-B9HHJjqV.woff2) format('woff2'), url(/assets/dm-sans-latin-500-normal-Dr3UlScf.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* dm-sans-latin-ext-700-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/dm-sans-latin-ext-700-normal-CJIcxD6K.woff2) format('woff2'), url(/assets/dm-sans-latin-ext-700-normal-BLI3TTWz.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* dm-sans-latin-700-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/dm-sans-latin-700-normal-DvUfVpUG.woff2) format('woff2'), url(/assets/dm-sans-latin-700-normal-CUSSCpQX.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/*
 * Public QR menu — Bagaax Entertainment Center.
 *
 * Colours are the Bagaax brand tokens (src/styles/brand/bagaax-theme.css), set out below as
 * a LIGHT set (default) and a DARK set. The page follows the visitor's phone ONLY
 * (prefers-color-scheme): it ignores `data-theme`, because that is the staff app's saved
 * choice and a customer scanning a QR code on a shared device must not inherit it.
 *
 * Brand rules this file keeps:
 *  - lime and teal are FILLS. Never lime text on a light surface; accent text there is lime-700.
 *  - the runner gradient appears once, as a thin rail under the header.
 *  - status is never colour alone: the live pill and the sold-out tag carry a word.
 */

.pm-root {
  /* light (default) */
  --ground: #F5F7FC;
  --surface: #FFFFFF;
  --surface-2: #EEF2FB;
  --line: #D9E1F5;
  --line-2: #B3C2EA;
  --text: #0D1E52;
  --muted: #4A5785;
  --dim: #66719C;
  --price: #0D1E52;
  --accent-text: #5A7E1B;      /* lime-700: lime itself fails contrast as text on light */
  --link: #253F86;
  --dot-on: #0D1E52;
  --chips-bg: rgba(245, 247, 252, .94);
  --page: #D9E1F5;             /* behind the card on tablet and desktop */
  --card-shadow: 0 1px 2px rgba(8, 19, 58, .06), 0 24px 60px rgba(8, 19, 58, .18);
  --focus-ring: 0 0 0 3px #ABDB4B, 0 0 0 5px #0D1E52;

  /* the same in both themes: header band, house special, drinks band, lime fills */
  --navy: #0D1E52;
  --navy-hi: #1A2F6C;
  --navy-line: #3655A3;
  --on-navy: #FFFFFF;
  --on-navy-muted: #B3C2EA;
  --lime: #ABDB4B;
  --on-lime: #0D1E52;
  --live: #57D3C3;
  --gradient: linear-gradient(135deg, #B8E34F 0%, #8FD46A 45%, #22B8AA 100%);
  --display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  .pm-root {
    --ground: #08133A;
    --surface: #0D1E52;
    --surface-2: #13255E;
    --line: #1E3170;
    --line-2: #2A4388;
    --text: #FFFFFF;
    --muted: #A9B4D6;
    --dim: #8793BD;
    --price: #ABDB4B;
    --accent-text: #ABDB4B;
    --link: #C2E56E;
    --dot-on: #ABDB4B;
    --chips-bg: rgba(8, 19, 58, .94);
    --page: #050C29;
    --card-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    --focus-ring: 0 0 0 3px #ABDB4B, 0 0 0 5px #08133A;
  }
}

.pm-root *, .pm-root *::before, .pm-root *::after { box-sizing: border-box; }
html:has(.pm-root) { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html:has(.pm-root) { scroll-behavior: auto; } }
.pm-root {
  margin: 0;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  color-scheme: light dark;
  display: flow-root;
}
/* The original `a` rule had the lowest specificity; keep it that way so .pm-chip can win. */
:where(.pm-root) a { color: var(--link); }
.pm-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pm-menu { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--ground); }
@media (min-width: 600px) {
  .pm-root { background: var(--page); }
  .pm-menu { margin: 32px auto; min-height: auto; border-radius: 20px; overflow: hidden; box-shadow: var(--card-shadow); }
}
/* The card's 32px margin must stay INSIDE the page wrapper (flow-root above), and the html
   background keeps the right ground visible when a phone overscrolls past either end. */
html:has(.pm-root) { background: #F5F7FC; }
@media (prefers-color-scheme: dark) { html:has(.pm-root) { background: #08133A; } }
@media (min-width: 600px) { html:has(.pm-root) { background: #D9E1F5; } }
@media (min-width: 600px) and (prefers-color-scheme: dark) { html:has(.pm-root) { background: #050C29; } }

/* ---- Header: always the Bagaax navy band --------------------------------------------- */
.pm-hero { position: relative; padding: 28px 24px 36px; background: var(--navy); color: var(--on-navy); }
.pm-hero__rail { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gradient); }
.pm-hero__inner { display: flex; flex-direction: column; gap: 14px; }
.pm-hero__logo { display: block; width: 170px; max-width: 60%; height: auto; margin-bottom: 18px; }
.pm-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .22em; color: var(--lime); }
.pm-eyebrow::before { content: ""; width: 24px; height: 3px; border-radius: 2px; background: var(--lime); }
.pm-root .pm-hero h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 9.4vw, 42px); line-height: 1.08; letter-spacing: -.01em; color: var(--on-navy); }
.pm-hero__sub { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: .02em; color: var(--on-navy-muted); }
.pm-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pm-pill { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.pm-pill--live { background: var(--navy-hi); color: var(--on-navy); }
.pm-pill--live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(87, 211, 195, .25); }
.pm-pill--outline { border: 1px solid var(--navy-line); color: var(--on-navy-muted); }
.pm-pill--live.pm-is-stale::before { background: var(--on-navy-muted); box-shadow: none; }

/* ---- Section chips ---------------------------------------------------------------- */
.pm-chips { position: sticky; top: 0; z-index: 10; padding: 12px 0 2px; background: var(--chips-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.pm-chips__row { display: flex; gap: 8px; overflow-x: auto; padding: 0 24px 10px; scrollbar-width: none; }
.pm-chips__row::-webkit-scrollbar { display: none; }
.pm-chip { flex-shrink: 0; display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-family: var(--display); font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.pm-chip:hover { border-color: var(--text); color: var(--text); }
.pm-chip.pm-is-active { background: var(--lime); border-color: var(--lime); color: var(--on-lime); font-weight: 600; }

/* ---- Search ---------------------------------------------------------------------- */
.pm-search { padding: 18px 24px 4px; }
.pm-search__box { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); color: var(--muted); }
.pm-search__box:focus-within { border-color: var(--text); box-shadow: var(--focus-ring); }
.pm-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font-family: var(--body); font-size: 16px; }
.pm-search input::-moz-placeholder { color: var(--muted); }
.pm-search input::placeholder { color: var(--muted); }
.pm-empty { display: none; padding: 40px 24px 0; text-align: center; color: var(--muted); font-size: 15px; }
.pm-empty.pm-is-visible { display: block; }

/* ---- House special: a navy card with a lime edge in both themes ------------------------ */
.pm-featured { padding: 22px 24px 4px; }
.pm-featured__card { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 16px; background: var(--navy); color: var(--on-navy); border: 1px solid var(--lime); }
.pm-featured__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pm-featured__label { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .16em; color: var(--lime); }
.pm-featured__name { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -.01em; }
.pm-featured__meta { font-size: 14px; color: var(--on-navy-muted); }
.pm-featured__price { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: var(--lime); color: var(--on-lime); font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; }

/* ---- Categories ------------------------------------------------------------------- */
.pm-cat { padding: 36px 24px 0; }
.pm-cat__head { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 3px solid var(--lime); }
.pm-cat__titles { flex: 1; min-width: 0; }
.pm-cat__num { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .18em; color: var(--accent-text); }
.pm-root .pm-cat h2 { margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; color: var(--text); }
.pm-cat__meta { margin-top: 6px; font-size: 14px; color: var(--muted); }
/* Category photos are cut-outs on a transparent background: show them whole on a soft circle. */
.pm-cat__img { flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%; -o-object-fit: contain; object-fit: contain; padding: 6px; background: var(--surface-2); border: 3px solid var(--line); }
.pm-items { list-style: none; margin: 0; padding: 0; }
.pm-item { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.pm-item:last-child { border-bottom: 0; }
.pm-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pm-item__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-item__name { font-size: 17px; font-weight: 700; color: var(--text); }
.pm-item__desc { font-size: 14px; color: var(--muted); }
.pm-item__price { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--price); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.pm-tag--special { background: var(--lime); color: var(--on-lime); }
.pm-tag--soldout { border: 1px solid var(--line-2); color: var(--muted); }
.pm-item.pm-is-soldout .pm-item__name, .pm-item.pm-is-soldout .pm-item__price { color: var(--dim); }
.pm-item.pm-is-soldout .pm-item__price { text-decoration: line-through; }

.pm-band { margin-top: 44px; display: flex; align-items: center; gap: 12px; padding: 18px 24px; background: var(--navy); color: var(--on-navy); font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: .14em; }
.pm-band + .pm-cat { padding-top: 28px; }

/* ---- Footer ------------------------------------------------------------------------ */
.pm-foot { margin-top: auto; padding: 56px 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pm-foot__mark { display: block; width: 56px; height: auto; margin-bottom: 4px; }
.pm-foot__name { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .02em; color: var(--text); }
.pm-foot__note { font-size: 13px; color: var(--muted); }
.pm-foot__by { font-size: 12px; color: var(--muted); }
.pm-root [hidden] { display: none !important; }

/* ---- Carousel mechanics: native scroll-snap, so a swipe just works; the timer only moves it
   along when nobody is touching it. ----------------------------------------------------- */
.pm-featured__scroller { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; overscroll-behavior-x: contain; }
.pm-featured__scroller::-webkit-scrollbar { display: none; }
.pm-featured__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; }
.pm-featured__slide .pm-featured__card { height: 100%; }
.pm-featured__ctrl { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px 0; }
.pm-dots { display: flex; align-items: center; }
.pm-dot { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pm-dot__bar { position: relative; display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; transition: width .3s cubic-bezier(.25, 1, .5, 1), background .3s; }
.pm-dot.pm-is-on .pm-dot__bar { width: 30px; }
.pm-dot.pm-is-on .pm-dot__bar::after { content: ""; position: absolute; inset: 0; background: var(--dot-on); transform-origin: left center; }
.pm-featured--playing .pm-dot.pm-is-on .pm-dot__bar::after { animation: pm-fill var(--pm-interval, 5000ms) linear forwards; }
.pm-pause { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; }
.pm-pause:hover { border-color: var(--text); color: var(--text); }
.pm-root button:focus-visible, .pm-root a:focus-visible, .pm-root input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@keyframes pm-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pm-pop { 0% { transform: scale(.82) rotate(-6deg); opacity: .4; } 60% { transform: scale(1.06) rotate(1deg); opacity: 1; } 100% { transform: none; } }
@keyframes pm-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .pm-featured__slide.pm-is-current .pm-featured__price { animation: pm-pop .6s cubic-bezier(.25, 1, .5, 1) both; }
  .pm-featured__slide.pm-is-current .pm-featured__name,
  .pm-featured__slide.pm-is-current .pm-featured__meta { animation: pm-rise .5s cubic-bezier(.25, 1, .5, 1) both; }
  .pm-featured__slide.pm-is-current .pm-featured__meta { animation-delay: .06s; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-dot.pm-is-on .pm-dot__bar::after { animation: none !important; }
  .pm-dot__bar { transition: none; }
}

/* ---- States ------------------------------------------------------------------------ */
.pm-root.pm-center { display: grid; place-items: center; padding: 24px; text-align: center; }
.pm-note { color: var(--muted); font-size: 15px; margin: 0; }
.pm-unavailable { margin: 0 0 12px; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.1; color: var(--text); }

/* Labels are written in normal case and shown in capitals, so a screen reader reads words. */
.pm-tag, .pm-featured__label, .pm-band, .pm-eyebrow, .pm-cat__num { text-transform: uppercase; }