/* ============================================================
   AIbyTec ERP — base styles
   Bootstrap 5 does the heavy lifting; this file only adds the
   app shell (sidebar + topbar) and small polish.
   ------------------------------------------------------------
   UI REDESIGN (Phase A — design system). This file is now a
   token-based design system: every color/radius/shadow/spacing
   value used anywhere in the app is defined once below and
   referenced everywhere else via var() — no hard-coded hex in
   views. Bootstrap 5.3 exposes most of its components as CSS
   custom properties (--bs-btn-*, --bs-alert-*, --bs-pagination-*,
   ...); where a component's compiled CSS bakes in a literal
   color instead of consuming a var() (confirmed by inspecting
   the compiled bootstrap.min.css — e.g. .form-control:focus,
   .form-check-input:checked, .page-item.active, .dropdown-item.
   active all hardcode #0d6efd), we override that component's own
   custom property or, failing that, the class directly. Two
   Bootstrap 5.3 mechanics we lean on throughout:
     1) --bs-*-rgb triplets feed rgba(var(--bs-*-rgb), alpha) in
        utilities like .bg-primary/.text-bg-primary — these DO
        cascade automatically once we set the *-rgb tokens.
     2) --bs-success-bg-subtle/-border-subtle/-text-emphasis (and
        the primary/danger/warning equivalents) drive .alert-*
        and .list-group-item-* variants — overriding these once
        restyles alerts everywhere without touching alert markup.
   ============================================================ */

/* ---------- Web fonts (Phase A typography) ----------
   One display face for headings/titles, one body face for
   everything else. Loaded via @import so no view/layout file
   needs to change for Phase A — Phase B can add a <link
   rel=preconnect> in the layout head later as a perf polish. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --erp-sidebar-w: 250px;
  --erp-sidebar-w-collapsed: 76px;

  /* ---- Brand colors ----
     Navy = primary. Emerald = success/positive. Amber/red kept
     for warning/danger (amber already matched the old palette).
     Teal/purple are secondary decorative accents used only for
     multi-series contexts (KPI tint variety, chart series) —
     not part of the three "must derive everything from" hues. */
  --erp-navy:        #1e3a6e;
  --erp-navy-dark:   #14284d;
  --erp-navy-deep:   #0a1830;
  --erp-emerald:      #0f9d70;
  --erp-emerald-dark: #0b7a58;
  --erp-amber:  #d97706;
  --erp-red:    #dc3545;
  --erp-teal:   #0d9488;
  --erp-purple: #6610f2;

  /* Link color needs a lighter navy on dark backgrounds for
     contrast; solid fills (buttons/icons) stay the same navy in
     both themes since they always sit on white/near-white text. */
  --erp-link: var(--erp-navy);
  --erp-link-hover: var(--erp-navy-dark);
  --erp-shadow-rgb: 10, 24, 48;

  /* ---- Warm neutral scale (borders / muted text / surfaces) ----
     Same scale in both themes; light mode reads from the light
     end, dark mode re-points body/border roles at the dark end
     (see the [data-bs-theme="dark"] block below). */
  --erp-stone-50:  #faf9f7;
  --erp-stone-100: #f3f1ed;
  --erp-stone-200: #e6e2db;
  --erp-stone-300: #d3cdc0;
  --erp-stone-400: #a89f8f;
  --erp-stone-500: #7c7365;
  --erp-stone-600: #5c5648;
  --erp-stone-700: #423e34;
  --erp-stone-800: #2a2721;
  --erp-stone-900: #1a1815;

  /* ---- Radius scale ---- */
  --erp-radius-sm:   0.375rem;
  --erp-radius:      0.625rem;
  --erp-radius-lg:   0.9rem;
  --erp-radius-xl:   1.25rem;
  --erp-radius-pill: 999px;

  /* ---- Shadow scale (navy-tinted in light mode, plain black in
     dark mode via the redefined --erp-shadow-rgb above) ---- */
  --erp-shadow-sm: 0 1px 2px rgba(var(--erp-shadow-rgb), .06);
  --erp-shadow:    0 4px 14px rgba(var(--erp-shadow-rgb), .08);
  --erp-shadow-lg: 0 14px 34px rgba(var(--erp-shadow-rgb), .14);

  /* ---- Spacing scale ---- */
  --erp-space-1: 0.25rem;
  --erp-space-2: 0.5rem;
  --erp-space-3: 0.75rem;
  --erp-space-4: 1rem;
  --erp-space-5: 1.5rem;
  --erp-space-6: 2rem;
  --erp-space-8: 3rem;

  /* ---- Motion ---- */
  --erp-transition-fast: 150ms ease;
  --erp-transition:      200ms ease;

  /* ---- Typography ---- */
  --erp-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --erp-font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ============================================================
     Bootstrap variable bridge — light mode.
     Every value here is either a direct token or a *-rgb triplet
     computed from the same token (custom properties can't derive
     rgb components from a hex value, so triplets are restated).
     ============================================================ */
  --bs-body-font-family: var(--erp-font-body);
  --bs-body-bg:    var(--erp-stone-50);
  --bs-body-color: var(--erp-stone-800);
  --bs-emphasis-color:  var(--erp-stone-900);
  --bs-secondary-color: var(--erp-stone-500);
  --bs-tertiary-color:  var(--erp-stone-400);
  --bs-secondary-bg: var(--erp-stone-100);
  --bs-tertiary-bg:  var(--erp-stone-100);
  --bs-border-color: var(--erp-stone-200);
  --bs-border-color-translucent: rgba(30, 58, 110, .12);

  --bs-primary: var(--erp-navy);      --bs-primary-rgb: 30, 58, 110;
  --bs-success: var(--erp-emerald);   --bs-success-rgb: 15, 157, 112;
  --bs-danger:  var(--erp-red);       --bs-danger-rgb: 220, 53, 69;
  --bs-warning: var(--erp-amber);     --bs-warning-rgb: 217, 119, 6;

  --bs-link-color: var(--erp-link);         --bs-link-color-rgb: 30, 58, 110;
  --bs-link-hover-color: var(--erp-link-hover); --bs-link-hover-color-rgb: 20, 40, 77;

  /* .alert-*/.list-group-item-* variants read these, not
     --bs-success directly (confirmed in compiled Bootstrap CSS) —
     color-mix against body-bg makes them theme-aware for free. */
  --bs-primary-bg-subtle: color-mix(in srgb, var(--erp-navy) 12%, var(--bs-body-bg));
  --bs-primary-border-subtle: color-mix(in srgb, var(--erp-navy) 30%, transparent);
  --bs-primary-text-emphasis: var(--erp-navy-dark);
  --bs-success-bg-subtle: color-mix(in srgb, var(--erp-emerald) 14%, var(--bs-body-bg));
  --bs-success-border-subtle: color-mix(in srgb, var(--erp-emerald) 32%, transparent);
  --bs-success-text-emphasis: var(--erp-emerald-dark);
  --bs-danger-bg-subtle: color-mix(in srgb, var(--erp-red) 14%, var(--bs-body-bg));
  --bs-danger-border-subtle: color-mix(in srgb, var(--erp-red) 32%, transparent);
  --bs-danger-text-emphasis: var(--erp-red);
  --bs-warning-bg-subtle: color-mix(in srgb, var(--erp-amber) 16%, var(--bs-body-bg));
  --bs-warning-border-subtle: color-mix(in srgb, var(--erp-amber) 34%, transparent);
  --bs-warning-text-emphasis: var(--erp-amber);

  --bs-border-radius:      var(--erp-radius);
  --bs-border-radius-sm:   var(--erp-radius-sm);
  --bs-border-radius-lg:   var(--erp-radius-lg);
  --bs-border-radius-xl:   var(--erp-radius-xl);
  --bs-border-radius-xxl:  var(--erp-radius-xl);
  --bs-border-radius-pill: var(--erp-radius-pill);

  --bs-box-shadow:    var(--erp-shadow);
  --bs-box-shadow-sm: var(--erp-shadow-sm);
  --bs-box-shadow-lg: var(--erp-shadow-lg);
}

/* ---- Bootstrap variable bridge — dark mode ----
   Re-pointing the neutral scale + the tokens that genuinely need
   a different value in the dark (links, shadow tint, subtle-bg
   mixes recompute automatically since they reference
   var(--bs-body-bg), which is redefined right here). Solid fills
   (buttons, badges, icons) intentionally keep the same navy/
   emerald/amber/red — they read fine on white text either way. */
[data-bs-theme="dark"] {
  --erp-link: #7ea0dd;
  --erp-link-hover: #a9c1e8;
  --erp-shadow-rgb: 0, 0, 0;

  --bs-body-bg:    var(--erp-stone-900);
  --bs-body-color: var(--erp-stone-100);
  --bs-emphasis-color:  var(--erp-stone-50);
  --bs-secondary-color: var(--erp-stone-400);
  --bs-tertiary-color:  var(--erp-stone-500);
  --bs-secondary-bg: var(--erp-stone-800);
  --bs-tertiary-bg:  #211e19;
  --bs-border-color: var(--erp-stone-700);
  --bs-border-color-translucent: rgba(126, 160, 221, .18);

  --bs-link-color-rgb: 126, 160, 221;
  --bs-link-hover-color-rgb: 169, 193, 232;

  --erp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --erp-shadow:    0 6px 18px rgba(0, 0, 0, .4);
  --erp-shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
}

body { min-height: 100vh; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6, .fw-display {
  font-family: var(--erp-font-display);
  font-weight: 700;
}
.text-page-title {
  font-family: var(--erp-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bs-emphasis-color);
  margin-bottom: .15rem;
}
.text-section-title {
  font-family: var(--erp-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
}
.text-card-title {
  font-family: var(--erp-font-display);
  font-size: .95rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
}
.text-caption {
  font-size: .8125rem;
  color: var(--bs-secondary-color);
}

/* ============================================================
   ACCESSIBILITY — visible keyboard focus + reduced motion
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--erp-navy);
  outline-offset: 2px;
}
[data-bs-theme="dark"] :focus-visible { outline-color: var(--erp-link); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   BOOTSTRAP COMPONENT OVERRIDES
   (component-scoped custom properties where Bootstrap exposes
   them; direct property overrides where it bakes in a literal
   color instead — each noted from the compiled source)
   ============================================================ */

/* ---- Buttons ---- */
.btn { font-weight: 500; }
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--erp-navy);
  --bs-btn-border-color: var(--erp-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--erp-navy-dark);
  --bs-btn-hover-border-color: var(--erp-navy-dark);
  --bs-btn-active-bg: var(--erp-navy-dark);
  --bs-btn-active-border-color: var(--erp-navy-dark);
  --bs-btn-disabled-bg: var(--erp-navy);
  --bs-btn-disabled-border-color: var(--erp-navy);
  --bs-btn-focus-shadow-rgb: 30, 58, 110;
}
.btn-outline-primary {
  --bs-btn-color: var(--erp-navy);
  --bs-btn-border-color: var(--erp-navy);
  --bs-btn-hover-bg: var(--erp-navy);
  --bs-btn-hover-border-color: var(--erp-navy);
  --bs-btn-active-bg: var(--erp-navy);
  --bs-btn-active-border-color: var(--erp-navy);
  --bs-btn-focus-shadow-rgb: 30, 58, 110;
}
.btn-success {
  --bs-btn-bg: var(--erp-emerald);
  --bs-btn-border-color: var(--erp-emerald);
  --bs-btn-hover-bg: var(--erp-emerald-dark);
  --bs-btn-hover-border-color: var(--erp-emerald-dark);
  --bs-btn-active-bg: var(--erp-emerald-dark);
  --bs-btn-active-border-color: var(--erp-emerald-dark);
  --bs-btn-focus-shadow-rgb: 15, 157, 112;
}
.btn-outline-success {
  --bs-btn-color: var(--erp-emerald);
  --bs-btn-border-color: var(--erp-emerald);
  --bs-btn-hover-bg: var(--erp-emerald);
  --bs-btn-hover-border-color: var(--erp-emerald);
}
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-focus-shadow-rgb: 126, 160, 221; }

/* ---- Forms ----
   .form-control:focus / .form-check-input:checked hardcode
   #0d6efd/#86b7fe in compiled Bootstrap — no var() to bridge. */
.form-control:focus,
.form-select:focus {
  border-color: var(--erp-navy);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.form-check-input:checked {
  background-color: var(--erp-navy);
  border-color: var(--erp-navy);
}
.form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); }
.form-label { font-weight: 500; font-size: .875rem; color: var(--bs-emphasis-color); }

/* ---- Pagination ----
   --bs-pagination-color already inherits --bs-link-color; only
   the hardcoded active state needs overriding. */
.pagination {
  --bs-pagination-active-bg: var(--erp-navy);
  --bs-pagination-active-border-color: var(--erp-navy);
}

/* ---- Dropdowns / nav-pills / list-group ----
   All three hardcode #0d6efd for their "active" state. */
.dropdown-menu { box-shadow: var(--erp-shadow); border-radius: var(--erp-radius); }
.dropdown-menu, .nav-pills, .list-group {
  --bs-dropdown-link-active-bg: var(--erp-navy);
  --bs-nav-pills-link-active-bg: var(--erp-navy);
  --bs-list-group-active-bg: var(--erp-navy);
  --bs-list-group-active-border-color: var(--erp-navy);
}

/* ---- Cards / modals ---- */
.card  { border-radius: var(--erp-radius-lg); }
.modal-content { border-radius: var(--erp-radius-lg); box-shadow: var(--erp-shadow-lg); }

/* ---- Tables ---- */
.table thead th { font-weight: 600; }

/* ============================================================
   REUSABLE PATTERNS (Phase A) — used across every module view
   ============================================================ */
.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--erp-space-3);
  margin-bottom: var(--erp-space-5);
}
.page-header .page-header-actions { display: flex; gap: var(--erp-space-2); flex-wrap: wrap; }

.empty-state {
  text-align: center;
  padding: var(--erp-space-8) var(--erp-space-4);
  color: var(--bs-secondary-color);
}
.empty-state i { font-size: 2.5rem; color: var(--bs-tertiary-color); margin-bottom: var(--erp-space-3); display: block; }
.empty-state .empty-state-title { font-family: var(--erp-font-display); font-weight: 600; color: var(--bs-emphasis-color); margin-bottom: .25rem; }

.table-card {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--erp-radius-lg);
  box-shadow: var(--erp-shadow-sm);
  overflow: hidden;
}
.table-card .table { margin-bottom: 0; }
.table-card .table thead th {
  text-transform: uppercase; font-size: .72rem; letter-spacing: .04em;
  font-weight: 600; color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.table-card .table tbody tr { transition: background-color var(--erp-transition-fast); }
.table-card .table tbody tr:hover { background: var(--bs-tertiary-bg); }

/* ---------- Shell layout ---------- */
.erp-shell   { display: flex; min-height: 100vh; }
.erp-main    { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.erp-content { padding: 1.5rem; flex: 1; }

/* ---------- Sidebar ----------
   Signature element (Phase B): a navy gradient panel that stays the
   same in both light and dark app themes (a deliberate brand-constant
   surface, like most premium admin shells) — everything else in the
   app follows the light/dark toggle; the sidebar doesn't need to. */
.erp-sidebar {
  width: var(--erp-sidebar-w);
  flex-shrink: 0;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  background: linear-gradient(180deg, var(--erp-navy-deep), var(--erp-navy-dark) 60%, var(--erp-navy));
  padding: 1rem .75rem;
  transition: width var(--erp-transition);
}
.erp-sidebar .brand {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.15rem; padding: .5rem .75rem 1.25rem;
  font-family: var(--erp-font-display); font-weight: 700;
  color: #fff; white-space: nowrap; overflow: hidden;
}
.brand-logo {
  height: 32px; width: 32px; object-fit: cover; flex-shrink: 0;
  border-radius: .4rem; background: #000;
  border: 1px solid rgba(255,255,255,.2);
}
.brand-logo-lg {
  height: 64px; width: 64px; object-fit: cover;
  border-radius: .6rem; background: #000;
  border: 1px solid rgba(255,255,255,.2);
}
.erp-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  /* Bootstrap's .nav defaults to flex-wrap:wrap; combined with the
     bounded-height scroll container above, that wraps overflow into
     a second column instead of scrolling — force single-column. */
  flex-wrap: nowrap;
}
/* Without this, flexbox shrinks every nav-link/section-label to fit
   the container's bounded height instead of letting it scroll —
   section labels in particular got compressed to a few px tall,
   clipping their text to nothing. Keep every item at natural size. */
.erp-nav > * { flex-shrink: 0; }
.nav-section-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
  padding: .9rem .75rem .3rem; white-space: nowrap; overflow: hidden;
}
.erp-sidebar .nav-link {
  display: flex; align-items: center; gap: .75rem;
  color: rgba(255,255,255,.78);
  border-radius: .65rem;
  padding: .55rem .75rem;
  margin-bottom: .15rem;
  white-space: nowrap; overflow: hidden;
  transition: background-color var(--erp-transition-fast), color var(--erp-transition-fast);
}
.erp-sidebar .nav-link:hover  { background: rgba(255,255,255,.08); color: #fff; }
.erp-sidebar .nav-link.active { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 3px 0 0 var(--erp-emerald); }
.erp-sidebar .nav-link.disabled { opacity: .5; }
.erp-sidebar .nav-link i      { width: 1.1rem; text-align: center; flex-shrink: 0; }
.erp-sidebar .nav-link .nav-label { overflow: hidden; text-overflow: ellipsis; }

/* Collapse-to-icons (desktop) */
.erp-sidebar-collapse-btn {
  align-items: center; justify-content: center;
  align-self: center;
  width: 30px; height: 30px; margin-top: .5rem;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
  transition: background-color var(--erp-transition-fast);
}
.erp-sidebar-collapse-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.erp-sidebar.collapsed { width: var(--erp-sidebar-w-collapsed); }
.erp-sidebar.collapsed .brand-text,
.erp-sidebar.collapsed .nav-section-label,
.erp-sidebar.collapsed .nav-label { display: none; }
.erp-sidebar.collapsed .nav-link { justify-content: center; }
.erp-sidebar.collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }

/* Off-canvas on small screens (below this width the sidebar always
   behaves like the mobile drawer, collapse-to-icons is desktop-only) */
@media (max-width: 991px) {
  .erp-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 1041;
    width: var(--erp-sidebar-w) !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .erp-sidebar.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .erp-sidebar.collapsed .brand-text,
  .erp-sidebar.collapsed .nav-section-label,
  .erp-sidebar.collapsed .nav-label { display: block; }
  .erp-sidebar.collapsed .nav-link { justify-content: flex-start; }
  .erp-sidebar-collapse-btn { display: none; }
}
.erp-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity var(--erp-transition);
}
@media (max-width: 991px) {
  .erp-backdrop.show { display: block; opacity: 1; }
}

/* ---------- Topbar ---------- */
.erp-topbar {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.5rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  position: sticky; top: 0; z-index: 10;
}
.erp-search { position: relative; width: min(320px, 32vw); }
.erp-search i {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--bs-tertiary-color); font-size: .8rem; pointer-events: none;
}
.erp-search .form-control { padding-left: 2rem; border-radius: var(--erp-radius-pill); background: var(--bs-tertiary-bg); }
.erp-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-grid; place-items: center; flex-shrink: 0;
  background: var(--erp-navy); color: #fff;
  font-size: .72rem; font-weight: 700;
}
.erp-notif-menu { min-width: 260px; max-height: 320px; overflow-y: auto; }

/* SweetAlert2 flash toasts — match the app's radius/font instead of
   the library default look. */
.swal2-popup.swal2-toast {
  border-radius: var(--erp-radius) !important;
  font-family: var(--erp-font-body) !important;
  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  box-shadow: var(--erp-shadow-lg) !important;
}

/* ---------- Cards / stat widgets ---------- */
.stat-card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--erp-radius-lg);
  box-shadow: var(--erp-shadow-sm);
  transition: box-shadow var(--erp-transition), transform var(--erp-transition);
}
.stat-card:hover { box-shadow: var(--erp-shadow); transform: translateY(-1px); }
.stat-card .icon {
  width: 46px; height: 46px; border-radius: .6rem;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--erp-navy) 12%, transparent);
  color: var(--erp-navy); font-size: 1.2rem;
}

/* ---------- KPI cards (dashboard redesign) ----------
   Soft tinted backgrounds, not gradients — each card gets one accent color
   used consistently for its icon badge, top border and trend-up text. */
.kpi-card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--erp-radius-lg);
  border-top: 3px solid var(--kpi-color);
  background: color-mix(in srgb, var(--kpi-color) 7%, var(--bs-body-bg));
  box-shadow: var(--erp-shadow-sm);
  transition: box-shadow var(--erp-transition), transform var(--erp-transition);
}
.kpi-card:hover { box-shadow: var(--erp-shadow); transform: translateY(-1px); }
.kpi-card .icon {
  width: 48px; height: 48px; border-radius: .65rem;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--kpi-color) 18%, transparent);
  color: var(--kpi-color); font-size: 1.25rem; flex-shrink: 0;
}
.kpi-card .kpi-value { font-family: var(--erp-font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.kpi-card .kpi-trend.text-up   { color: var(--erp-emerald); }
.kpi-card .kpi-trend.text-down { color: var(--erp-red); }
.kpi-card.tint-teal   { --kpi-color: var(--erp-teal); }
.kpi-card.tint-blue   { --kpi-color: var(--erp-navy); }
.kpi-card.tint-purple { --kpi-color: var(--erp-purple); }
.kpi-card.tint-amber  { --kpi-color: var(--erp-amber); }

/* ---------- Alert pills strip ---------- */
.alert-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: var(--erp-radius-pill);
  font-size: .82rem; font-weight: 500; text-decoration: none;
  border: 1px solid transparent;
  transition: filter var(--erp-transition-fast);
}
.alert-pill.pill-danger  { background: color-mix(in srgb, var(--erp-red) 14%, transparent); color: var(--erp-red); border-color: color-mix(in srgb, var(--erp-red) 25%, transparent); }
.alert-pill.pill-warning { background: color-mix(in srgb, var(--erp-amber) 14%, transparent); color: var(--erp-amber); border-color: color-mix(in srgb, var(--erp-amber) 25%, transparent); }
.alert-pill:hover { filter: brightness(0.95); text-decoration: none; }

/* ---------- Activity feed: colored circular icons per event type ---------- */
.activity-icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: .85rem;
}
.activity-icon.act-success { background: color-mix(in srgb, var(--erp-emerald) 16%, transparent); color: var(--erp-emerald); }
.activity-icon.act-info    { background: color-mix(in srgb, var(--erp-navy) 16%, transparent); color: var(--erp-navy); }
.activity-icon.act-purple  { background: color-mix(in srgb, var(--erp-purple) 16%, transparent); color: var(--erp-purple); }
.activity-icon.act-warning { background: color-mix(in srgb, var(--erp-amber) 16%, transparent); color: var(--erp-amber); }
.activity-icon.act-muted   { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }

/* Recent-activity feed as a clean timeline (Phase C): icons connected by a
   thin vertical line, replacing the plain list-group look. */
.activity-timeline { padding: var(--erp-space-4); }
.activity-timeline-item { position: relative; display: flex; align-items: flex-start; gap: var(--erp-space-3); padding-bottom: var(--erp-space-4); }
.activity-timeline-item:last-child { padding-bottom: 0; }
.activity-timeline-item:not(:last-child)::after {
  content: ''; position: absolute; left: 16px; top: 34px; bottom: -.25rem;
  width: 2px; background: var(--bs-border-color);
}
.activity-timeline-content { flex: 1; min-width: 0; }
.activity-timeline-time { flex-shrink: 0; white-space: nowrap; }

/* ============================================================
   PHASE D — shared view patterns (index/form/detail pages)
   Established on the Customers module first, then reused as every
   other module folder is swept.
   ============================================================ */

/* ---------- Status badges (consistent app-wide) ----------
   draft=gray, confirmed=navy, paid=emerald, cancelled=red. Apply as
   e.g. <span class="badge badge-status-paid">Paid</span>. */
.badge-status-draft     { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); }
.badge-status-confirmed { background: color-mix(in srgb, var(--erp-navy) 15%, transparent); color: var(--erp-navy); }
.badge-status-paid      { background: color-mix(in srgb, var(--erp-emerald) 15%, transparent); color: var(--erp-emerald); }
.badge-status-cancelled { background: color-mix(in srgb, var(--erp-red) 15%, transparent); color: var(--erp-red); }
.badge-status-pending   { background: color-mix(in srgb, var(--erp-amber) 15%, transparent); color: var(--erp-amber); }
[data-bs-theme="dark"] .badge-status-confirmed { color: var(--erp-link); }

/* ---------- Floating-label forms ---------- */
.form-floating > label { color: var(--bs-secondary-color); }
.form-section-title {
  font-family: var(--erp-font-display); font-weight: 600; font-size: .95rem;
  color: var(--bs-emphasis-color);
  padding-bottom: var(--erp-space-2); margin-bottom: var(--erp-space-3);
  border-bottom: 1px solid var(--bs-border-color);
}
.invalid-feedback { font-weight: 500; }

/* ---------- Searchable combobox (public/assets/js/combobox.js) ---------- */
.combobox { position: relative; }
.combobox-select { display: none; }
.combobox-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 1055;
  max-height: 220px; overflow-y: auto; margin-top: .25rem;
  padding: .25rem; list-style: none;
}
.combobox-menu.show { display: block; }
.combobox-item { padding: .45rem .75rem; border-radius: var(--erp-radius-sm); cursor: pointer; font-size: .9rem; }
.combobox-item:hover, .combobox-item.active { background: var(--bs-tertiary-bg); }
.combobox-empty { padding: .45rem .75rem; color: var(--bs-secondary-color); font-size: .85rem; }

/* ---------- DataTables restyle (customers/vendors/invoices/etc index pages)
   Overrides dataTables.bootstrap5's own CSS with design-system tokens
   instead of duplicating the table markup in every view. ---------- */
.dataTables_wrapper { font-size: .9rem; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--erp-radius-sm); border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg); color: var(--bs-body-color);
  padding: .3rem .6rem; margin-left: .4rem;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter label { color: var(--bs-secondary-color); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--erp-radius-sm) !important; border: 1px solid transparent !important;
  color: var(--bs-body-color) !important; padding: .3rem .65rem !important; margin-left: .2rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--erp-navy) !important; border-color: var(--erp-navy) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
  background: var(--bs-tertiary-bg) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--bs-tertiary-color) !important; }
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc:after {
  color: var(--bs-tertiary-color) !important; opacity: 1 !important;
}
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before { color: var(--erp-navy) !important; }
.dataTables_empty { padding: var(--erp-space-8) var(--erp-space-4) !important; color: var(--bs-secondary-color); }

/* ---------- Kanban board (Leads) ---------- */
.kanban-dropzone { background: var(--bs-tertiary-bg); }
.kanban-card { cursor: grab; transition: box-shadow var(--erp-transition), transform var(--erp-transition); }
.kanban-card:hover { box-shadow: var(--erp-shadow); transform: translateY(-1px); }
.kanban-card:active { cursor: grabbing; }

/* ---------- Nav tabs (Settings) ---------- */
.nav-tabs { border-bottom-color: var(--bs-border-color); }
.nav-tabs .nav-link {
  border: none; color: var(--bs-secondary-color); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--erp-transition-fast), border-color var(--erp-transition-fast);
}
.nav-tabs .nav-link:hover { border-color: transparent; color: var(--erp-navy); }
.nav-tabs .nav-link.active { color: var(--erp-navy); background: transparent; border-color: transparent transparent var(--erp-navy); font-weight: 600; }

/* ---------- Skeleton loading shimmer (Phase E) ----------
   Reusable placeholder for content that loads after the initial page
   render. Apply .skeleton (plus a size modifier) to any block to turn
   it into a shimmering placeholder shape while real data is fetched. */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--bs-tertiary-bg);
  border-radius: var(--erp-radius-sm);
  color: transparent !important;
  pointer-events: none;
}
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bs-body-bg) 65%, transparent), transparent);
  animation: erp-shimmer 1.4s infinite;
}
@keyframes erp-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skeleton-text { height: .85em; margin-bottom: .5em; width: 100%; display: block; }
.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-60 { width: 60%; }
.skeleton-text.w-40 { width: 40%; }
.skeleton-card { height: 90px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--erp-navy-deep), var(--erp-navy));
}
.auth-card { width: min(420px, 92vw); border-radius: var(--erp-radius-xl); }

/* ---------- Split-panel auth pages (login/forgot/reset/portal login) ----------
   Signature brand panel on the left (desktop only), form on the right. */
.auth-split { display: flex; min-height: 100vh; }
.auth-split-brand {
  flex: 1; display: none; flex-direction: column; justify-content: center;
  padding: 4rem; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--erp-navy-deep), var(--erp-navy) 75%);
}
.auth-split-brand::before {
  content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: rgba(255,255,255,.05); top: -140px; right: -140px;
}
.auth-split-brand::after {
  content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255,255,255,.04); bottom: -100px; left: -80px;
}
.auth-split-brand .brand-logo-lg { margin-bottom: 1.5rem; position: relative; }
.auth-split-brand h1 { font-family: var(--erp-font-display); font-weight: 800; font-size: 2rem; margin-bottom: .75rem; position: relative; }
.auth-split-brand p { color: rgba(255,255,255,.75); max-width: 360px; line-height: 1.6; position: relative; }
.auth-split-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--bs-body-bg); }
.auth-split-form-inner { width: min(380px, 100%); }
@media (min-width: 992px) { .auth-split-brand { display: flex; } }

/* ---------- Print (reports / dashboards "Print" button -> browser print-to-PDF) ---------- */
@media print {
  .erp-sidebar, .erp-topbar, .no-print, .ai-fab, .ai-panel { display: none !important; }
  .erp-content { padding: 0 !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; }
}