/* public/assets/css/app.css
 * Foundational (site-wide) UI primitives for Cashflow.
 *
 * SINGLE SOURCE OF TRUTH for:
 * - tokens, typography, layout/container, topbar, cards, tables, forms, nav
 * - dashboard base components (KPI tiles, summary tiles)
 *
 * dashboard.css must ONLY contain .cf-page-dashboard overrides (density/tightening).
 */

/* -----------------------
 * Design tokens
 * ---------------------- */
:root{
  /* =========================================================
   * Enterprise palette (finance-safe)
   * NOTE: Keep existing token names working (backward-compatible).
   * ========================================================= */

  --cf-text-primary: #0F172A;
  --cf-text-secondary: #334155;
  --cf-text-muted: #64748B;

  /* Base (existing names preserved) */
  --bg: #E7EDF4;
  --text: var(--cf-text-primary);
  --muted: var(--cf-text-muted);

  /* New semantic/brand tokens (additive) */
  --cf-primary: #1E40AF;
  --cf-primary-hover: #1D4ED8;
  --cf-primary-soft: #DBEAFE;

  --cf-success: #15803D;
  --cf-success-soft: #DCFCE7;

  --cf-warning: #B45309;
  --cf-warning-soft: #FEF3C7;

  --cf-danger: #B91C1C;
  --cf-danger-soft: #FEE2E2;

  /* Surfaces & borders */
  --cf-card: #FCFDFE;
  --cf-border: #E5E7EB;
  --cf-border-strong: rgba(15,23,42,.16);
  --cf-card-grad-top: rgba(252,253,255,.975);
  --cf-card-grad-bot: rgba(241,245,251,.965);
  --cf-card-gloss: rgba(255,255,255,.18);

  /* Preserve existing border tokens used throughout */
  --border: rgba(15,23,42,.12);
  --border-strong: rgba(15,23,42,.16);

  /* Radius */
  --radius: 18px;
  --radius-sm: 14px;

  /* Shadows */
  --shadow: 0 12px 28px rgba(16,24,40,.08);
  --shadow-sm: 0 8px 18px rgba(16,24,40,.06);

  /* Typography */
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* App-wide type scale (small tweaks = more enterprise) */
  --cf-base-fs: 15px;
  --cf-base-lh: 1.42;
  --cf-type-hero: 1.42rem;
  --cf-type-page: 1.14rem;
  --cf-type-section: .98rem;
  --cf-type-body: .90rem;
  --cf-type-meta: .78rem;

  /* Gradients (premium but controlled) */
  /* Keep existing gradient token names to avoid breaking UI */
  --g-blue:   linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
  --g-green:  linear-gradient(135deg, #0F766E 0%, #059669 100%);
  --g-purple: linear-gradient(135deg, #5B21B6 0%, #7C3AED 100%);
  --g-orange: linear-gradient(135deg, #B45309 0%, #EA580C 100%);

  /* Layout */
  --gutter: 26px;
  --container-max: 1480px;

  /* Sticky chrome */
  --sticky-top: 12px;

  /* Desktop shell layout */
  --cf-topbar-body-pad: 7px 11px;
  --cf-topbar-utility-offset: 5px;
  --cf-topbar-utility-gap: 5px;
  --cf-topbar-company-select-w: clamp(220px, 24vw, 420px);
  --cf-topbar-company-select-max: 420px;
  --cf-active-slot-w: clamp(210px, 23vw, 340px);
  --cf-active-slot-min: 210px;
  --cf-active-slot-max: 340px;
  --cf-right-pill-max: 260px;
  --cf-brand-title-fs: 1.34rem;
  --cf-utility-company-max: 360px;
  --cf-dash-nav-gap: 8px;

  /* Shared content surfaces */
  --cf-surface-pad: 16px;
  --cf-card-shadow-rest:
    0 5px 12px rgba(16,24,40,.045),
    0 1px 2px rgba(16,24,40,.02);
  --cf-card-shadow-hover:
    0 8px 18px rgba(16,24,40,.058),
    0 2px 5px rgba(16,24,40,.028);
  --cf-table-radius: 16px;
  --cf-table-shadow: 0 5px 12px rgba(16,24,40,.05);
  --cf-table-head-fs: .76rem;
  --cf-table-pad-y: .68rem;
  --cf-table-pad-x: .72rem;
  --cf-table-row-hover-bg: rgba(15,23,42,.032);
  --cf-tile-gap: 12px;
  --cf-tile-radius: 13px;
  --cf-tile-pad: 10px 11px;
  --cf-tile-shadow: 0 4px 10px rgba(16,24,40,.045);
  --cf-kpi-label-fs: .82rem;
  --cf-kpi-value-fs: 1.28rem;
  --cf-kpi-sub-fs: .84rem;
  --cf-mini-value-fs: 1.04rem;

  /* Compact header scale knobs */
  --topbar-pill-fs: .74rem;
  --topbar-pill-pad-y: .20rem;
  --topbar-pill-pad-x: .46rem;

  /* Nav rail scale knobs */
  --nav-rail-pad: 4px;
  --nav-pill-fs: .79rem;
  --nav-pill-pad-y: .24rem;
  --nav-pill-pad-x: .52rem;
  --nav-pill-minw: 82px;

  /* Unified control system */
  --cf-control-radius: 10px;
  --cf-btn-fs: .88rem;
  --cf-btn-fw: 760;
  --cf-btn-pad-y: .43rem;
  --cf-btn-pad-x: .82rem;
  --cf-btn-sm-fs: .79rem;
  --cf-btn-sm-fw: 760;
  --cf-btn-sm-pad-y: .36rem;
  --cf-btn-sm-pad-x: .72rem;
  --cf-control-h: 38px;
  --cf-control-sm-h: 32px;
  --cf-control-fs: .86rem;
  --cf-dd-radius: 10px;
  --cf-dd-item-radius: 8px;
  --cf-dd-item-fw: 650;
}

/* -----------------------
 * Global base
 * ---------------------- */
html, body{ height: 100%; }

/* Prevent tiny horizontal shift between pages with or without vertical scrollbar */
html{ scrollbar-gutter: stable; }
body{ overflow-y: scroll; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--cf-base-fs);
  line-height: var(--cf-base-lh);
  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  letter-spacing: -0.005em;
}

/* Hard enforce one font family across all UI elements */
*, *::before, *::after{
  font-family: inherit;
}

/* Subtle page background bloom (enterprise tuned) */
body::before{
  content:"";
  position: fixed;
  inset: -28% -24%;
  height: 120vh;
  background:
    radial-gradient(closest-side at 14% 20%, rgba(30,64,175,.038), transparent 58%),
    radial-gradient(closest-side at 82% 12%, rgba(14,165,233,.032), transparent 60%),
    radial-gradient(closest-side at 68% 72%, rgba(21,128,61,.024), transparent 60%);
  pointer-events:none;
  z-index: -1;
  filter: blur(10px);
  transform: translateZ(0);
}

/* Links */
a{ color: inherit; text-decoration: none; text-underline-offset: .14em; }
a:hover{ text-decoration: underline; }

/* Headings */
h1,h2,h3,h4,h5,h6{ margin: 0; letter-spacing: -.02em; }
p{ margin: 0; }

/* Typography polish (enterprise-modern) */
h1{ font-size: var(--cf-type-hero); font-weight: 850; line-height: 1.08; letter-spacing: -0.012em; }
h2{ font-size: var(--cf-type-page); font-weight: 820; line-height: 1.18; letter-spacing: -0.010em; }
h3{ font-size: var(--cf-type-section); font-weight: 820; line-height: 1.22; letter-spacing: -0.010em; }
.small, small{
  color: var(--muted);
  line-height: 1.35;
}

hr{
  border: 0;
  height: 1px;
  background: rgba(15,23,42,.08);
  margin: 14px 0;
}

/* Keep class for compatibility, but render same font for visual consistency */
.mono{ font-family: var(--font); }

/* -----------------------
 * Container & main spacing
 * ---------------------- */
.container-xl{
  max-width: var(--container-max);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

.container-xl.px-0{
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* Bootstrap gutter compat */
.container-xl > .row > [class*="col"]{
  padding-left: calc(var(--bs-gutter-x, 1.5rem) / 2);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) / 2);
}

.cf-main{
  padding-top: 12px;
  padding-bottom: 18px;
}

@media (max-width: 767.98px){
  :root{
    --gutter: 14px;
    --sticky-top: 8px;
    --radius: 16px;
    --radius-sm: 12px;
    --cf-base-fs: 14px;
    --cf-base-lh: 1.40;
    --cf-type-hero: 1.24rem;
    --cf-type-page: 1.04rem;
    --cf-type-section: .92rem;
    --cf-type-body: .86rem;
    --cf-type-meta: .74rem;
    --topbar-pill-fs: .69rem;
    --topbar-pill-pad-y: .16rem;
    --topbar-pill-pad-x: .38rem;
    --nav-pill-fs: .72rem;
    --nav-pill-pad-y: .20rem;
    --nav-pill-pad-x: .40rem;
    --nav-pill-minw: 72px;
    --cf-control-radius: 9px;
    --cf-btn-fs: .84rem;
    --cf-btn-pad-y: .38rem;
    --cf-btn-pad-x: .74rem;
    --cf-btn-sm-fs: .76rem;
    --cf-btn-sm-pad-y: .30rem;
    --cf-btn-sm-pad-x: .62rem;
    --cf-control-h: 36px;
    --cf-control-sm-h: 30px;
    --cf-control-fs: .83rem;
    --cf-dd-radius: 9px;
    --cf-dd-item-radius: 7px;
    --cf-mobile-utility-grid: minmax(108px, .92fr) minmax(0, 1.18fr);
    --cf-mobile-badge-height: 38px;
    --cf-mobile-badge-fs: .70rem;
    --cf-mobile-nav-height: 40px;
    --cf-mobile-nav-pad: .20rem .12rem;
    --cf-mobile-nav-label-fs: .72rem;
    --cf-mobile-account-menu-width: min(280px, calc(100vw - 24px));
    --cf-mobile-nav-menu-width: min(236px, calc(100vw - 24px));
    --cf-mobile-topbar-body-pad: 6px 8px 7px;
    --cf-topbar-body-pad: var(--cf-mobile-topbar-body-pad);
    --cf-dash-nav-gap: 6px 8px;
    --cf-surface-pad: 10px 11px;
    --cf-card-shadow-rest:
      0 5px 10px rgba(16,24,40,.042),
      0 1px 3px rgba(16,24,40,.024);
    --cf-card-shadow-hover:
      0 6px 12px rgba(16,24,40,.05),
      0 2px 4px rgba(16,24,40,.028);
    --cf-table-radius: 14px;
    --cf-table-shadow: 0 4px 10px rgba(16,24,40,.04);
    --cf-table-head-fs: .70rem;
    --cf-table-pad-y: .58rem;
    --cf-table-pad-x: .62rem;
    --cf-table-row-hover-bg: rgba(15,23,42,.024);
    --cf-tile-gap: 8px;
    --cf-tile-radius: 12px;
    --cf-tile-pad: 9px 10px;
    --cf-tile-shadow: 0 3px 8px rgba(16,24,40,.038);
    --cf-kpi-label-fs: .72rem;
    --cf-kpi-value-fs: 1.02rem;
    --cf-kpi-sub-fs: .76rem;
    --cf-mini-value-fs: .96rem;
  }

  h1{ font-size: 1.28rem; font-weight: 800; letter-spacing: -.010em; }
  h2{ font-size: 1.02rem; font-weight: 760; letter-spacing: -.008em; }
  h3{ font-size: .92rem; font-weight: 740; letter-spacing: -.006em; }
  body{ letter-spacing: -0.004em; }

  .cf-pwa-install-prompt{
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 2px);
    width: auto;
    max-width: none;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 14px;
  }

  .cf-pwa-install-actions{
    width: 100%;
  }

  .cf-pwa-install-actions .btn{
    flex: 1 1 0;
  }
}

/* -----------------------
 * Core components
 * ---------------------- */
.card-clean{
  background: linear-gradient(180deg, var(--cf-card-grad-top), var(--cf-card-grad-bot));
  border: 1px solid var(--border);
  border-top-color: rgba(255,255,255,.84);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;

  box-shadow: var(--cf-card-shadow-rest);

  transition: box-shadow .12s ease, border-color .12s ease;
}

.card-clean:not(.topbar)::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18%;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  pointer-events:none;
}
.card-clean.no-gloss::before{
  display: none;
}

.card-clean .card-body{ padding: var(--cf-surface-pad); }

/* -----------------------
 * Topbar (sticky + modern + centered width)
 * ---------------------- */
.topbar.card-clean{
  position: sticky;
  top: var(--sticky-top);
  z-index: 5000;
  isolation: isolate;

  /* enterprise glass */
  background:
    linear-gradient(180deg, rgba(255,255,255,.985), rgba(250,252,255,.95));

  border: 1px solid var(--border);
  border-top-color: rgba(255,255,255,.9);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  width: min(calc(100% - (var(--gutter) * 2)), var(--container-max));
  margin-left: auto;
  margin-right: auto;

  box-shadow:
    0 8px 20px rgba(16,24,40,.065),
    0 3px 8px rgba(16,24,40,.035);

  transition: box-shadow .16s ease, background .16s ease, border-color .16s ease;

  overflow: visible; /* allow dropdowns */
}

.topbar.card-clean::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(15,23,42,.03);
}

/* Visible enterprise glow behind topbar (controlled) */
.topbar.card-clean::after{
  display: none;
}

.topbar.card-clean .card-body{
  position: relative;
  padding: var(--cf-topbar-body-pad);
  overflow: visible;
  min-height: 0;
}

.cf-pwa-install-prompt{
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 4px);
  z-index: 1180;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 12px 14px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,251,255,.94));
  box-shadow: 0 16px 34px rgba(16,24,40,.14), 0 4px 10px rgba(16,24,40,.06);
}

.cf-pwa-install-copy{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--cf-text-secondary);
  line-height: 1.25;
}

.cf-pwa-install-copy strong{
  color: var(--cf-text-primary);
  font-size: .9rem;
  font-weight: 800;
}

.cf-pwa-install-copy span{
  font-size: .8rem;
}

.cf-pwa-install-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* -----------------------
 * Pills / chips
 * ---------------------- */
.pill-soft,
.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:.32rem;
  padding: var(--topbar-pill-pad-y) var(--topbar-pill-pad-x);
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(16,24,40,.035);
  font-size: var(--topbar-pill-fs);
  min-height: 30px;
  white-space: nowrap;
}

/* Topbar-specific enterprise tightening */
.topbar .pill-soft,
.topbar .badge-pill{
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(16,24,40,.03);
}

/* Make label/value feel consistent */
.badge-pill strong{ font-weight: 850; letter-spacing: -0.005em; }

.badge-pill{
  padding: .22rem .48rem;
  font-size: .76rem;
}

.cf-pill{
  display:inline-flex;
  align-items:center;
  gap:.40rem;
  padding:.32rem .60rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.80);
  box-shadow: 0 8px 18px rgba(16,24,40,.06);
  font-size: .84rem;
  font-weight: 850;
  color: rgba(15,23,42,.88);
  white-space: nowrap;
}

/* Semantic pill variants (additive; only applies if classes used) */
.pill-success{
  background: var(--cf-success-soft);
  border-color: rgba(21,128,61,.18);
  color: rgba(15,23,42,.92);
}
.pill-warning{
  background: var(--cf-warning-soft);
  border-color: rgba(180,83,9,.18);
  color: rgba(15,23,42,.92);
}
.pill-danger{
  background: var(--cf-danger-soft);
  border-color: rgba(185,28,28,.18);
  color: rgba(15,23,42,.92);
}
.pill-info{
  background: var(--cf-primary-soft);
  border-color: rgba(30,64,175,.18);
  color: rgba(15,23,42,.92);
}

/* Surface headings */
.cf-surface-title{
  font-weight: 900;
  font-size: var(--cf-type-page);
  line-height: 1.12;
  margin: 0;
}
.cf-surface-sub{
  margin-top: 2px;
  font-size: var(--cf-type-body);
  color: var(--muted);
}

/* Unified text utility palette across all pages */
.text-muted{ color: var(--cf-text-muted); }
.text-secondary,
.text-secondary-emphasis{ color: var(--cf-text-secondary); }

.text-success,
.text-success-emphasis{ color: var(--cf-success); }

.text-warning,
.text-warning-emphasis{ color: var(--cf-warning); }

.text-danger,
.text-danger-emphasis{ color: var(--cf-danger); }

.text-dark{ color: var(--cf-text-primary); }
.cf-muted{ color: var(--muted); font-size: .92rem; }
.cf-strong{ font-weight: 850; letter-spacing: -.01em; }

/* -----------------------
 * Cross-page visual rhythm
 * ---------------------- */
.cf-app .section-title{
  font-weight: 700;
  font-size: var(--cf-type-section);
  letter-spacing: -0.01em;
  line-height: 1.16;
}

.cf-app .section-sub{
  color: var(--muted);
  font-size: var(--cf-type-body);
  line-height: 1.32;
}

.cf-app .kpi-label{
  font-weight: 650;
  letter-spacing: .01em;
}

.cf-app .kpi-sub{
  color: var(--muted);
}

/* -----------------------
 * Topbar layout helpers
 * ---------------------- */
/* 3-zone topbar (flex): CENTER yields to RIGHT, so Logout never overlaps */
.dash-nav-3col{
  display:flex;
  align-items:center;
  gap: var(--cf-dash-nav-gap);
  min-height: 42px;
  flex-wrap: wrap;
  overflow: visible;
  position: relative;
  z-index: 4;
}

.cf-org-pill{
  min-width: 180px;
  min-height: 30px;
  justify-content: space-between;
  padding-inline: .48rem;
}

.cf-topbar-org-select{
  width: 172px;
  max-width: 172px;
}
.cf-topbar-company-select{
  width: var(--cf-topbar-company-select-w);
  max-width: var(--cf-topbar-company-select-max);
}
.cf-company-pill{
  min-width: 244px;
  min-height: 30px;
  justify-content: space-between;
  padding-inline: .48rem;
}

.cf-user-pill{
  min-width: 0;
  max-width: min(210px, 28vw);
  gap: .45rem;
  padding: .22rem .52rem;
  align-items: center;
  min-height: 30px;
  flex: 0 1 auto;
}

.cf-account-menu{
  min-width: 0;
}

.cf-account-menu .dropdown-toggle::after{
  margin-left: .4rem;
}

.cf-account-email{
  font-size: .74rem;
  color: rgba(15,23,42,.58);
  line-height: 1.2;
}

.cf-account-menu .dropdown-menu{
  min-width: 266px;
  padding: 8px;
}

.cf-account-mobile-nav{
  display: none;
}

.cf-account-menu .dropdown-header{
  padding: .48rem .62rem .18rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(15,23,42,.78);
}

.cf-account-menu .cf-account-email{
  padding-inline: .62rem;
  padding-bottom: .42rem;
  font-size: .83rem;
  line-height: 1.3;
  color: rgba(15,23,42,.60);
}

.cf-account-menu .dropdown-item{
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: .48rem .62rem;
  font-size: .95rem;
  font-weight: 780;
  letter-spacing: -.01em;
  color: rgba(15,23,42,.90);
}

.cf-account-menu .dropdown-item.active,
.cf-account-menu .dropdown-item:active{
  background: linear-gradient(180deg, rgba(229,238,255,.96), rgba(217,230,255,.94));
  color: #1e3a8a;
}

.cf-account-menu .dropdown-item:not(.text-danger):hover,
.cf-account-menu .dropdown-item:not(.text-danger):focus{
  background: rgba(241,245,249,.96);
  color: rgba(15,23,42,.94);
}

.cf-account-menu .dropdown-divider{
  margin: .34rem 0;
}

.cf-user-meta{
  min-width: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .08rem;
  line-height: 1.1;
}

.cf-avatar-sm,
.cf-avatar-fallback{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex: 0 0 22px;
}

.cf-avatar-sm{
  object-fit: cover;
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
}

.cf-avatar-fallback{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .67rem;
  font-weight: 900;
  color: #fff;
  background: var(--g-blue);
  border: 1px solid rgba(255,255,255,.26);
}

.dash-left{
  order: 1;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 240px;
  align-self: center;
}

.dash-center{
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  justify-content:center;
  align-items:center;
  align-self: center;
  overflow: visible;
  position: relative;
  z-index: 5200;
}
.dash-center .nav-pills-soft{
  margin: 0 auto;
}

.dash-right{
  order: 3;
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  max-width: min(42vw, 680px);

  display:flex;
  flex-direction: row;
  justify-content:flex-end;
  align-items:center;
  gap: 6px;
  min-height: 0;
}
.dash-right > *{ min-width: 0; }
.cf-right-row{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}
.cf-right-row-main{
  width: auto;
  min-height: 0;
  gap: 6px;
}

.dash-right .pill-soft:not(.cf-active-slot){ max-width: var(--cf-right-pill-max); }

/* Truncate long email gracefully */
.dash-right .pill-soft .mono{
  display:inline-block;
  max-width: 110px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.dash-right .cf-user-pill strong{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 145px;
  font-size: .88rem;
}

.dash-right .btn{
  flex: 0 0 auto;
}

.dash-right .cf-logout-btn{
  width: 34px;
  min-width: 34px;
  padding-inline: 0;
  justify-content: center;
}

.dash-right .cf-logout-btn .cf-btn-icon{
  font-size: .95rem;
  line-height: 1;
}

.cf-active-slot{
  width: var(--cf-active-slot-w);
  min-width: var(--cf-active-slot-min);
  max-width: var(--cf-active-slot-max);
  flex: 0 0 auto;
  justify-content: center;
  font-weight: 650;
  color: rgba(15,23,42,.86);
  border-color: rgba(15,23,42,.14);
  background: rgba(255,255,255,.84);
  font-size: .80rem;
}

.cf-active-slot strong{
  display: inline-block;
  max-width: calc(100% - 56px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-weight: 780;
  font-size: .88rem;
}

.cf-company-logo-tile{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,251,255,.90));
  box-shadow: 0 6px 14px rgba(16,24,40,.10);
  flex: 0 0 auto;
}

.cf-brand-company-logo{
  width: 36px;
  height: 36px;
  border-radius: 9px;
  box-shadow: 0 4px 10px rgba(16,24,40,.09);
}

.cf-brand-company-logo .cf-company-logo-tile-img{
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

.cf-company-logo-tile-img{
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
}

@media (max-width: 1100px){
  :root{
    --cf-topbar-company-select-w: clamp(180px, 34vw, 300px);
    --cf-topbar-company-select-max: 300px;
    --cf-active-slot-w: clamp(220px, 34vw, 360px);
    --cf-active-slot-min: 220px;
    --cf-active-slot-max: 360px;
    --cf-right-pill-max: 220px;
    --cf-utility-company-max: 230px;
  }

  .dash-nav-3col{
    flex-wrap: wrap;
  }
  .dash-center{
    flex: 1 1 100%;
    width: 100%;
    justify-content: flex-start;
  }
  .dash-right{
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%;
  }
  .cf-right-row-main{
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .cf-user-pill{
    max-width: 190px;
  }
  .cf-topbar-utility{
    flex-wrap: wrap;
  }
}

@media (max-width: 900px){
  :root{
    --cf-active-slot-w: auto;
    --cf-active-slot-min: 160px;
    --cf-active-slot-max: 100%;
  }

  .cf-right-row{
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .cf-active-slot{
    flex: 0 1 auto;
  }
}

@media (max-width: 1400px){
  .cf-url-pill{
    display: none;
  }
}

.cf-topbar-utility{
  order: 4;
  flex: 1 0 100%;
  margin-top: var(--cf-topbar-utility-offset);
  padding-top: var(--cf-topbar-utility-offset);
  border-top: 1px solid rgba(15,23,42,.10);
  display: flex;
  align-items: center;
  gap: var(--cf-topbar-utility-gap);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  font-size: .73rem;
  position: relative;
  z-index: 1;
}

.cf-topbar-utility::-webkit-scrollbar{ height: 0; }

.cf-topbar-utility > *{
  min-width: 0;
  max-width: 100%;
}

.cf-topbar-utility form{
  display: inline-flex;
  min-width: 0;
}

.cf-topbar-utility .badge-pill{
  max-width: 420px;
  min-height: 28px;
  padding: .18rem .44rem;
  font-size: .74rem;
}

.cf-topbar-utility .cf-pill-label{
  color: rgba(15,23,42,.56);
  font-weight: 600;
}

.cf-topbar-utility strong{
  color: rgba(15,23,42,.90);
  font-weight: 760;
}

.cf-topbar-utility :is(.cf-org-pill strong, .cf-company-pill strong){
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.cf-topbar-utility .cf-org-pill strong{
  max-width: 190px;
}

.cf-topbar-utility .cf-company-pill strong{
  max-width: var(--cf-utility-company-max);
}

@media (max-width: 1600px) and (min-width: 1024px){
  :root{
    --nav-pill-fs: .79rem;
    --nav-pill-pad-y: .24rem;
    --nav-pill-pad-x: .54rem;
    --nav-pill-minw: 78px;
    --nav-rail-pad: 3px;
    --topbar-pill-fs: .74rem;
    --topbar-pill-pad-y: .20rem;
    --topbar-pill-pad-x: .44rem;
    --cf-topbar-body-pad: 6px 10px;
    --cf-topbar-utility-offset: 4px;
    --cf-topbar-utility-gap: 4px;
    --cf-brand-title-fs: 1.24rem;
  }
}

/* Brand area */
.dash-brand{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  min-width: 0;
}

.cf-brand-logo{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  box-shadow: 0 4px 10px rgba(16,24,40,.10);
  flex: 0 0 34px;
}

.dash-brand .title{
  font-weight: 900;
  font-size: var(--cf-brand-title-fs);
  line-height: 1.06;
  white-space: nowrap;
}

.dash-brand .meta{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
  min-width: 0;
}

/* -----------------------
 * Buttons / segmented groups
 * ---------------------- */
.btn{
  border-radius: var(--cf-control-radius);
  padding: var(--cf-btn-pad-y) var(--cf-btn-pad-x);
  font-size: var(--cf-control-fs);
  font-weight: var(--cf-btn-fw);
  min-height: var(--cf-control-h);
  line-height: 1.15;
  letter-spacing: -0.003em;
  border: 1px solid rgba(15,23,42,.20);
  background: #fff;
  color: rgba(15,23,42,.92);
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}

.btn.btn-sm{
  border-radius: var(--cf-control-radius);
  font-size: var(--cf-btn-sm-fs);
  font-weight: var(--cf-btn-sm-fw);
  padding: var(--cf-btn-sm-pad-y) var(--cf-btn-sm-pad-x);
  min-height: var(--cf-control-sm-h);
  line-height: 1.1;
}

.btn:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(16,24,40,.08);
}

/* Optional enterprise button helpers (additive; no behavior change unless used) */
.btn-primary{
  background: linear-gradient(180deg, #284db6, var(--cf-primary));
  border-color: rgba(30,64,175,.4);
  color: #fff;
}
.btn-outline-primary{
  color: var(--cf-primary);
  border-color: rgba(30,64,175,.26);
  background: #fff;
}

.btn-outline-secondary{
  color: rgba(30,41,59,.92);
  border-color: rgba(71,85,105,.36);
  background: #fff;
}

.btn-outline-success{
  color: var(--cf-success);
  border-color: rgba(21,128,61,.38);
  background: #fff;
}

.topbar .btn-outline-danger{
  color: var(--cf-danger);
  border-color: rgba(185,28,28,.28);
  background: #fff;
}

/* -----------------------
 * Navigation (connected rail)
 * ---------------------- */
.nav-pills-soft{
  display:flex;
  align-items:center;
  gap: 3px;

  padding: var(--nav-rail-pad);
  border-radius: 14px;

  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,23,42,.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 3px 10px rgba(16,24,40,.04);
  min-height: 38px;

  flex-wrap: nowrap;

  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;

  min-width: 0;
  max-width: 100%;
}

.nav-pills-soft::-webkit-scrollbar{ height: 0; }
.nav-pills-soft{ scrollbar-width: none; }

@media (min-width: 992px){
  .nav-pills-soft{
    overflow: visible;
    position: relative;
    z-index: 5300;
  }
}

.nav-pills-soft :is(a, .nav-dd-toggle){
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: var(--nav-pill-pad-y) var(--nav-pill-pad-x);
  min-width: var(--nav-pill-minw);
  border-radius: 11px;

  border: 1px solid transparent;
  background: transparent;

  font-weight: 900;
  font-size: var(--nav-pill-fs);
  color: rgba(15,23,42,.78);

  white-space: nowrap;
  text-decoration: none;

  transition: background .14s ease, box-shadow .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}

.nav-pills-soft .nav-icon{
  display:none;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}

.nav-pills-soft .nav-icon-dashboard{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23172033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.25 10 3l6.5 5.25'/%3E%3Cpath d='M5.5 7.75V16h9V7.75'/%3E%3Cpath d='M8.25 16v-4.25h3.5V16'/%3E%3C/svg%3E");
}

.nav-pills-soft .nav-icon-receivables{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23172033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='13' height='12' rx='2'/%3E%3Cpath d='M6.5 8h7M6.5 11h7'/%3E%3C/svg%3E");
}

.nav-pills-soft .nav-icon-payables{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23172033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h12M4 10h12M4 13.5h8'/%3E%3C/svg%3E");
}

.nav-pills-soft .nav-icon-analysis{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23172033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.5 8 10.5l3 2.5 5-6'/%3E%3Cpath d='M4 4v11.5h12'/%3E%3C/svg%3E");
}

.nav-pills-soft .nav-icon-bookings{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23172033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.75' y='4.5' width='12.5' height='11.5' rx='2'/%3E%3Cpath d='M6.5 3.5v3M13.5 3.5v3M3.75 8.25h12.5M7 11h2.25M10.75 11h2.25M7 13.75h2.25'/%3E%3C/svg%3E");
}

.nav-pills-soft .nav-icon-integrations{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23172033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='2.25'/%3E%3Cpath d='M10 3.5v2.25M10 14.25v2.25M3.5 10h2.25M14.25 10h2.25M5.4 5.4l1.6 1.6M13 13l1.6 1.6M14.6 5.4 13 7M7 13 5.4 14.6'/%3E%3C/svg%3E");
}

.nav-pills-soft .nav-icon-more{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23172033'%3E%3Ccircle cx='10' cy='4.5' r='1.55'/%3E%3Ccircle cx='10' cy='10' r='1.55'/%3E%3Ccircle cx='10' cy='15.5' r='1.55'/%3E%3C/svg%3E");
}

.nav-pills-soft .nav-label{
  display:inline-block;
}

.nav-pills-soft .nav-label-mobile{
  display:none;
}

.nav-pills-soft a.active{
  background: var(--g-blue);
  color: #fff;
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 6px 12px rgba(30,64,175,.14),
    inset 0 1px 0 rgba(255,255,255,.20);
  transform: none;
}

.nav-pill-disabled{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: var(--nav-pill-pad-y) var(--nav-pill-pad-x);
  min-width: var(--nav-pill-minw);
  border-radius: 999px;

  border: 1px solid transparent;
  background: transparent;

  color: rgba(15,23,42,.38);
  font-weight: 900;
  font-size: var(--nav-pill-fs);

  white-space: nowrap;
  user-select: none;
  cursor: not-allowed;
}

/* -----------------------
 * Topbar nav dropdown (More)
 * ---------------------- */
.nav-pills-soft .nav-dd{
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 5301;
}

.nav-pills-soft .nav-dd-toggle{
  font-weight: 700;
}

.nav-pills-soft .nav-dd-toggle .nav-caret{
  display: inline-block;
  margin-left: .20rem;
  font-size: .72em;
  line-height: 1;
  transform: translateY(-.02em);
  opacity: .78;
}

.nav-pills-soft .nav-dd-toggle.active{
  background: var(--g-blue);
  color: #fff;
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 10px 18px rgba(30,64,175,.16),
    inset 0 1px 0 rgba(255,255,255,.20);
  transform: none;
}

.nav-pills-soft .nav-dd .dropdown-menu{
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: auto !important;
  margin-top: 0;
  transform: none !important;

  text-align: left;
  min-width: 280px;
  height: calc(100vh - 92px);
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;

  border-radius: var(--cf-dd-radius);
  padding: 8px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.985);

  box-shadow:
    0 16px 36px rgba(16,24,40,.14),
    0 6px 14px rgba(16,24,40,.09);

  z-index: 9000;
}

@media (hover: hover) and (pointer: fine){
  .card-clean:hover{
    box-shadow: var(--cf-card-shadow-hover);
  }

  .btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(16,24,40,.10);
  }

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

  .btn-outline-primary:hover{
    background: rgba(30,64,175,.08);
  }

  .btn-outline-secondary:hover{
    color: rgba(15,23,42,.96);
    border-color: rgba(71,85,105,.50);
    background: rgba(248,250,252,.95);
  }

  .btn-outline-success:hover{
    color: var(--cf-success);
    border-color: rgba(21,128,61,.52);
    background: rgba(220,252,231,.58);
  }

  .topbar .btn-outline-danger:hover{
    color: var(--cf-danger);
    border-color: rgba(185,28,28,.40);
    background: rgba(254,226,226,.48);
  }

  .nav-pills-soft a:hover{
    background: rgba(15,23,42,.05);
    transform: translateY(-1px);
  }

  .nav-pills-soft a.active:hover{
    background: var(--g-blue);
    color: #fff;
    border-color: rgba(255,255,255,.28);
    transform: none;
    text-decoration: none;
  }

  .nav-pills-soft .nav-dd-toggle:hover{
    background: rgba(15,23,42,.05);
    transform: translateY(-1px);
    text-decoration: none;
  }

  .nav-pills-soft .nav-dd-toggle.active:hover{
    background: var(--g-blue);
    color: #fff;
    border-color: rgba(255,255,255,.28);
    transform: none;
    text-decoration: none;
  }

  .nav-pills-soft .dropdown-item:hover{
    background: rgba(15,23,42,.06);
    text-decoration: none;
  }

  .table tbody tr:hover{
    background: var(--cf-table-row-hover-bg);
  }

  .dropdown-item:hover{
    background: rgba(15,23,42,.07);
  }
}

@media (max-width: 991.98px) and (min-width: 768px){
  :root{
    --cf-topbar-body-pad: 6px 8px;
    --cf-dash-nav-gap: 6px;
  }

  .nav-pills-soft{
    overflow: visible !important;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
  }

  .nav-pills-soft a,
  .nav-pills-soft .nav-dd-toggle{
    min-width: auto;
    min-height: 34px;
    padding: .30rem .58rem;
    font-size: .84rem;
  }

  .dash-center{
    position: relative;
    z-index: 2600;
    overflow: visible;
  }

  .nav-pills-soft .nav-dd{
    z-index: 2601;
  }

  .nav-pills-soft .nav-dd.show{
    width: 100%;
  }

  .nav-pills-soft .nav-dd .dropdown-menu{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: 52vh;
    margin-top: 6px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 3001;
  }
}

@media (max-width: 767.98px){
  .cf-app{
    padding-bottom: 16px;
  }

  .topbar.card-clean{
    position: relative;
    top: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,255,.95));
    border-color: rgba(15,23,42,.07);
    box-shadow: 0 6px 14px rgba(16,24,40,.045);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    z-index: 6200;
  }

  .topbar.card-clean::before,
  .topbar.card-clean::after{
    display: none;
  }

  .dash-nav-3col{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand account"
      "utility utility"
      "nav nav";
    align-items: center;
    overflow: visible;
    z-index: 6201;
  }

  .dash-left{
    grid-area: brand;
    order: 1;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .dash-brand{
    gap: 8px;
    align-items: center;
    min-height: 36px;
  }

  .dash-brand .title{
    font-size: 1.04rem;
    font-weight: 820;
    line-height: 1.04;
    letter-spacing: -.015em;
  }

  .cf-brand-company-logo{
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .cf-brand-company-logo .cf-company-logo-tile-img{
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  .dash-right{
    grid-area: account;
    order: 2;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    justify-content: flex-end;
    align-items: center;
    margin-left: 0;
  }

  .cf-right-row-main{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
    width: auto;
  }

  .cf-active-slot,
  .dash-right .cf-logout-btn{
    display: none;
  }

  .cf-account-menu{
    min-width: 40px;
    max-width: 40px;
  }

  .cf-user-pill{
    min-width: 40px;
    max-width: 40px;
    min-height: 40px;
    padding: .18rem;
    justify-content: center;
    gap: 0;
    border-radius: 999px;
    border-color: rgba(15,23,42,.09);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,252,.96));
    box-shadow: 0 4px 12px rgba(16,24,40,.06);
  }

  .cf-user-pill .cf-user-meta,
  .cf-account-menu .dropdown-toggle::after{
    display: none;
  }

  .cf-user-pill .cf-avatar-sm,
  .cf-user-pill .cf-avatar-fallback{
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }

  .cf-account-menu .dropdown-menu{
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: var(--cf-mobile-account-menu-width);
    min-width: 0;
    margin-top: 0;
    border-radius: 14px;
    padding: 7px;
    z-index: 5001;
    box-shadow: 0 16px 32px rgba(16,24,40,.14);
  }

  .cf-account-mobile-nav{
    display: block;
  }

  .cf-account-mobile-nav .dropdown-header{
    padding: 8px 6px 6px;
  }

  .cf-account-mobile-nav .dropdown-item{
    min-height: 36px;
    padding: 8px 11px;
    font-size: .84rem;
  }

  .cf-topbar-utility{
    grid-area: utility;
    order: 3;
    margin: 0;
    padding: 0;
    border-top: 0;
    display: grid;
    grid-template-columns: var(--cf-mobile-utility-grid);
    gap: 6px;
    overflow: visible;
  }

  .cf-topbar-utility > *,
  .cf-topbar-utility form{
    width: 100%;
    min-width: 0;
  }

  .cf-topbar-utility form{
    display: block;
  }

  .cf-topbar-utility .badge-pill{
    width: 100%;
    min-height: var(--cf-mobile-badge-height);
    padding: .22rem .34rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .34rem;
    font-size: var(--cf-mobile-badge-fs);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,249,255,.95));
    border-color: rgba(15,23,42,.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.90);
  }

  .cf-topbar-utility .badge-pill:not(.cf-org-pill):not(.cf-company-pill){
    display: none;
  }

  .cf-topbar-utility .cf-pill-label{
    min-width: 2.1rem;
    font-size: .66rem;
    font-weight: 780;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(15,23,42,.60);
  }

  .cf-topbar-org-select,
  .cf-topbar-company-select{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 29px;
    border-radius: 9px;
    font-size: .79rem;
    font-weight: 700;
    color: #0f172a;
  }

  .dash-center{
    grid-area: nav;
    order: 4;
    display: none;
  }

  .dash-center .nav-pills-soft{
    width: 100%;
    margin: 0;
    padding: 2px;
    gap: 1px;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    overflow: visible;
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,255,.95));
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 4px 10px rgba(15,23,42,.035);
    isolation: isolate;
  }

  .dash-center .nav-pills-soft > a,
  .dash-center .nav-pills-soft > .nav-dd{
    flex: 1 1 0;
    min-width: 0;
  }

  .dash-center .nav-pills-soft a,
  .dash-center .nav-pills-soft .nav-dd-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: var(--cf-mobile-nav-height);
    padding: var(--cf-mobile-nav-pad);
    border: 0;
    border-radius: 9px;
    flex-direction: column;
    gap: 1px;
    font-size: .76rem;
    font-weight: 780;
    line-height: 1.02;
  }

  .dash-center .nav-pills-soft .nav-dd-toggle{
    appearance: none;
    -webkit-appearance: none;
  }

  .dash-center .nav-pills-soft .nav-icon{
    width: 19px;
    height: 19px;
    background-size: 19px 19px;
    opacity: .88;
  }

  .dash-center .nav-pills-soft .nav-label{
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--cf-mobile-nav-label-fs);
    font-weight: 760;
    letter-spacing: .015em;
    line-height: 1.04;
    text-align: center;
  }

  .dash-center .nav-pills-soft .nav-label-desktop{
    display:none;
  }

  .dash-center .nav-pills-soft .nav-label-mobile{
    display:block;
  }

  .dash-center .nav-pills-soft .nav-dd{
    z-index: 4001;
  }

  .dash-center .nav-pills-soft .nav-dd-toggle .nav-caret{
    display: none;
  }

  .dash-center .nav-pills-soft .nav-dd .dropdown-menu{
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: var(--cf-mobile-nav-menu-width) !important;
    min-width: 200px;
    max-width: calc(100vw - 24px);
    height: auto;
    max-height: 56vh;
    margin-top: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border-radius: 14px;
    z-index: 6000;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.99);
    box-shadow: 0 16px 32px rgba(15,23,42,.13);
  }

  .dash-center .nav-pills-soft .dropdown-header{
    padding: 6px 6px 8px;
  }

  .dash-center .nav-pills-soft .dropdown-item{
    padding: 9px 11px;
    font-size: .84rem;
  }

  .card-clean:not(.topbar){
    outline-color: rgba(255,255,255,.34);
    box-shadow:
      0 5px 12px rgba(16,24,40,.045),
      0 1px 3px rgba(16,24,40,.03);
  }

  .card-clean:not(.topbar)::before,
  .table-wrap::before,
  .kpi-tile::before,
  .mini-tile::before{
    display: none;
  }

  .card-clean .card-body{
    padding: 10px 11px;
  }

  .cf-surface-title{
    font-size: 1.18rem;
    font-weight: 820;
    line-height: 1.08;
  }

  .cf-surface-sub{
    font-size: .90rem;
    line-height: 1.26;
  }

  .form-control,
  .form-select{
    padding: .50rem .80rem;
  }

  .form-select{
    padding-right: 2rem;
  }

  .pill-soft,
  .badge-pill{
    font-size: .70rem;
  }
}

@media (max-width: 360px){
  :root{
    --cf-mobile-utility-grid: 1fr;
    --cf-mobile-badge-height: 40px;
    --cf-mobile-badge-fs: .72rem;
    --cf-mobile-nav-height: 38px;
    --cf-mobile-nav-pad: .24rem .14rem;
    --cf-mobile-nav-label-fs: .69rem;
    --cf-mobile-account-menu-width: min(260px, calc(100vw - 20px));
    --cf-mobile-nav-menu-width: min(214px, calc(100vw - 20px));
    --cf-mobile-topbar-body-pad: 8px;
    --cf-topbar-body-pad: var(--cf-mobile-topbar-body-pad);
  }
}

.nav-pills-soft .dropdown-header{
  font-weight: 900;
  color: rgba(15,23,42,.60);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .70rem;
  padding: 8px 10px 6px;
}

.nav-pills-soft .dropdown-divider{
  margin: 6px 0;
  opacity: .35;
}

.nav-pills-soft .dropdown-item{
  padding: 8px 10px;
  font-size: .88rem;
  color: rgba(15,23,42,.86);
}

.nav-pills-soft .dropdown-item.active{
  background: rgba(30,64,175,.12);
  color: rgba(15,23,42,.92);
}

.nav-pills-soft .dropdown-item.disabled,
.nav-pills-soft .dropdown-item:disabled{
  opacity: .55;
}

/* -----------------------
 * Tables / wrappers
 * ---------------------- */
.table-wrap{
  border-radius: var(--cf-table-radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(251,252,255,.965));
  box-shadow: var(--cf-table-shadow);
  position: relative;
}

/* Keep horizontal scrolling available on narrow screens for dense tables */
.table-wrap.table-responsive{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.table-wrap::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18%;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
}

.table{ margin: 0; }

.table.sticky-head thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(248,250,252,.97);
}

.table thead th{
  font-size: var(--cf-table-head-fs);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 820;
  color: rgba(15,23,42,.82);
  background: rgba(249,251,253,.98);
  border-bottom: 1px solid rgba(15,23,42,.12);
  padding: var(--cf-table-pad-y) var(--cf-table-pad-x);
  vertical-align: middle;
  line-height: 1.15;
}

.table tbody td{
  padding: var(--cf-table-pad-y) var(--cf-table-pad-x);
  font-size: .89rem;
  color: rgba(15,23,42,.86);
  border-top: 1px solid rgba(15,23,42,.07);
  vertical-align: middle;
  line-height: 1.3;
}

.table td.mono, .table th.mono{ font-family: var(--font); }

/* -----------------------
 * Forms
 * ---------------------- */
.form-control, .form-select{
  border-radius: var(--cf-control-radius);
  padding: .56rem .88rem;
  border: 1px solid rgba(15,23,42,.14);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  min-height: var(--cf-control-h);
  font-size: var(--cf-control-fs);
  line-height: 1.15;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.form-check-input{
  border: 1px solid rgba(51,65,85,.42);
  background-color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}

.form-check-input:focus{
  border-color: rgba(30,64,175,.62);
  box-shadow: 0 0 0 .2rem rgba(30,64,175,.14);
}

.form-check-input:checked{
  background-color: #1e40af;
  border-color: #1e40af;
}

.form-select{
  padding-right: 2.1rem;
  font-weight: 650;
}

.form-control-sm, .form-select-sm{
  min-height: var(--cf-control-sm-h);
  font-size: var(--cf-btn-sm-fs);
  padding: .24rem .68rem;
  line-height: 1.1;
}

.form-control::placeholder{
  color: rgba(15,23,42,.42);
  font-weight: 600;
}

.form-control:focus, .form-select:focus{
  border-color: rgba(30,64,175,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 0 0 .2rem rgba(30,64,175,.08);
}

.dropdown-menu{
  border-radius: var(--cf-dd-radius);
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
  padding: 6px;
  box-shadow: 0 10px 22px rgba(16,24,40,.13);
}

.dropdown.cf-dropdown-open,
.dropup.cf-dropdown-open,
.dropend.cf-dropdown-open,
.dropstart.cf-dropdown-open{
  position: relative;
  z-index: 9000;
}

:is(.cf-topbar-utility, .nav-pills-soft, .table-responsive, .table-wrap).cf-dropdown-open{
  overflow: visible;
}

.dropdown-item{
  border-radius: var(--cf-dd-item-radius);
  font-weight: var(--cf-dd-item-fw);
}

.dropdown-item:focus{
  background: rgba(15,23,42,.07);
}

/* Alerts */
.alert{
  border-radius: var(--radius-sm);
  border-color: rgba(15,23,42,.10);
}

/* Utility */
.min-width-0{ min-width: 0; }
.text-clip{
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shared micro-utilities for view templates */
.cf-form-zero{ margin: 0; }
.cf-gap-45{ gap: .45rem; }
.cf-link-strong{
  font-weight: 850;
  text-decoration: none;
}
.cf-link-strong:hover{ text-decoration: underline; }
.cf-col-w-200{ width: 200px; }
.cf-col-w-260{ width: 260px; }

/* KPI tiles */
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--cf-tile-gap);
}
.kpi-grid > .kpi-tile{ grid-column: span 4; }
@media (max-width: 991.98px){ .kpi-grid > .kpi-tile{ grid-column: span 6; } }
@media (max-width: 575.98px){ .kpi-grid > .kpi-tile{ grid-column: span 12; } }

.kpi-tile,
.mini-tile{
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(249,251,255,.93));
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--cf-tile-radius);
  padding: var(--cf-tile-pad);
  box-shadow: var(--cf-tile-shadow);
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.kpi-tile::before,
.mini-tile::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
}
.kpi-label{ font-size: var(--cf-kpi-label-fs); color: rgba(15,23,42,.70); font-weight: 820; }
.kpi-value{ font-size: var(--cf-kpi-value-fs); font-weight: 880; letter-spacing: -.01em; }
.kpi-sub{ margin-top: 5px; font-size: var(--cf-kpi-sub-fs); color: rgba(15,23,42,.66); }

/* Summary tiles */
.mini-tiles{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--cf-tile-gap);
}
.mini-tiles > .mini-tile{
  grid-column: span 4;
  min-width: 0;
}
@media (max-width: 991.98px){ .mini-tiles > .mini-tile{ grid-column: span 6; } }
@media (max-width: 575.98px){ .mini-tiles > .mini-tile{ grid-column: span 12; } }

.mini-label{ font-size: var(--cf-kpi-label-fs); color: rgba(15,23,42,.66); font-weight: 820; }
.mini-value{ font-size: var(--cf-mini-value-fs); font-weight: 880; }

@supports (content-visibility: auto){
  .card-clean:not(.topbar),
  .table-wrap{
    content-visibility: auto;
    contain: layout paint style;
  }

  .card-clean:not(.topbar){
    contain-intrinsic-size: 240px;
  }

  .table-wrap{
    contain-intrinsic-size: 420px;
  }

  .kpi-grid > .kpi-tile,
  .mini-tiles > .mini-tile{
    content-visibility: auto;
    contain: layout paint style;
    contain-intrinsic-size: 112px;
  }
}

@media (display-mode: standalone){
  body{
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .topbar.card-clean{
    top: max(8px, env(safe-area-inset-top));
  }

  .cf-main{
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
}

.kpi-value.positive, .mini-value.positive, .dash-number.positive{ color: #15803d; }
.kpi-value.neutral,  .mini-value.neutral,  .dash-number.neutral{ color: #b45309; }
.kpi-value.negative, .mini-value.negative, .dash-number.negative{ color: #b91c1c; }

/* Reduce jitter for motion-sensitive users */
@media (prefers-reduced-motion: reduce){
  .btn, .nav-pills-soft a, .card-clean{ transition: none !important; }
  .btn:hover, .nav-pills-soft a:hover{ transform: none !important; }
}