/* ==========================================================================
   Crizant One — Official Brand Identity & Design System Tokens
   Adheres strictly to Crizant Brand Guidelines v1.0:
   - Primary: Navy 900 (#0A2240)
   - Secondary Panels/Hover: Navy 700 (#12386B)
   - Action / Links / Icon fills: Blue 600 (#0057D9)
   - Midtone / Gradient: Blue 500 (#0080F0)
   - Eyebrows / Accents: Cyan 400 (#00A9EF)
   - Muted text (dark) / Chart fills: Ice 200 (#B9E4FA)
   - Accent background: Ice 050 (#EAF6FE)
   - Muted body text: Slate 600 (#5A6675)
   - Borders & Dividers: Slate 300 (#C7D0DA)
   - Light page tint: Mist 100 (#F3F6F9)
   - Base surface / cards: White (#FFFFFF)
   - Status: Green (#1A7F50 on light, #2BB673 on dark), Amber (#F0A032), Red (#C62F35 on light, #F0555A on dark)
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Official Crizant Identity Palette -------------------------------- */
  --crizant-navy-900: #0A2240; /* Main brand colour: wordmark, dark surfaces */
  --crizant-navy-700: #12386B; /* Secondary panels and hover states */
  --crizant-blue-600: #0057D9; /* Buttons, links and icon fills */
  --crizant-blue-500: #0080F0; /* Gradient middle, hover states, secondary lines */
  --crizant-cyan-400: #00A9EF; /* Accent eyebrows, highlights, data callouts */
  --crizant-ice-200:  #B9E4FA; /* Muted text on dark, light chart fills */
  --crizant-ice-050:  #EAF6FE; /* Light accent background */
  --crizant-slate-600:#5A6675; /* Muted body text on light */
  --crizant-slate-300:#C7D0DA; /* Borders and dividers */
  --crizant-mist-100: #F3F6F9; /* Light page tint */
  --crizant-white:    #FFFFFF; /* Base card surface */
  --crizant-gradient: linear-gradient(135deg, #0057D9 0%, #0080F0 50%, #00A9EF 100%);

  /* ---- Functional Application Tokens (Modern, Pure White & Minimalist) - */
  --brand: var(--crizant-blue-600);          /* #0057D9 */
  --brand-hover: var(--crizant-blue-500);    /* #0080F0 */
  --brand-active: var(--crizant-navy-700);   /* #12386B */
  --brand-ink: var(--crizant-blue-600);
  --brand-soft: #EBF3FF;                     /* Exact light blue pill tint from design */
  --brand-soft-2: #D8E7FE;
  --brand-ring: rgba(0, 87, 217, 0.16);
  --brand-2: var(--crizant-cyan-400);        /* #00A9EF */
  --brand-glow: var(--brand-ring);

  /* ---- Neutrals (Pure Clean White Canvas) ------------------------------ */
  --bg: #FFFFFF;                             /* Pure clean white background requested */
  --bg-subtle: #F8FAFC;                      /* Subtle section / well tint */
  --surface: #FFFFFF;                        /* Clean white cards */
  --surface-2: #FAFBFC;                      /* Very subtle off-white */
  --line: #E5E7EB;                           /* Crisp hairline divider */
  --line-strong: #D1D5DB;                    /* Input borders */
  --ink: #0F172A;                            /* Primary text */
  --ink-2: #64748B;                          /* Secondary text */
  --ink-3: #94A3B8;                          /* Placeholder / tertiary */

  /* ---- Status Colours (Explicit Brand Ratios) -------------------------- */
  /* On white (product UI): */
  --ok: #1A7F50;         --ok-soft: #E8F7EE;   --ok-ink: #1A7F50;
  --warn: #F0A032;       --warn-soft: #FDF4E6; --warn-ink: #92400E;
  --bad: #C62F35;        --bad-soft: #FDECEC;  --bad-ink: #C62F35;
  --info: var(--brand);  --info-soft: var(--brand-soft); --info-ink: var(--brand-ink);

  /* Campaign accents */
  --accent-yellow: #F5C542;
  --accent-violet: #6D4AE0;
  --accent-teal: #1FC3B4;

  /* ---- Shape Scale ----------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 9999px;
  --r: var(--r-md);

  /* ---- Spacing Scale (4pt grid) ---------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* ---- Elevation & Shadows (Modern, Soft & Minimal) ------------------- */
  --shadow-xs: 0 1px 2px rgba(10, 34, 64, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 34, 64, 0.05), 0 1px 2px rgba(10, 34, 64, 0.02);
  --shadow-1: 0 4px 12px -2px rgba(10, 34, 64, 0.06), 0 2px 4px -1px rgba(10, 34, 64, 0.03);
  --shadow-2: 0 12px 28px -6px rgba(10, 34, 64, 0.09), 0 4px 10px rgba(10, 34, 64, 0.03);
  --shadow-lg: 0 20px 40px -10px rgba(10, 34, 64, 0.14), 0 6px 16px rgba(10, 34, 64, 0.04);

  /* ---- Typography (Clean Modern Sans) ---------------------------------- */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --head: var(--sans);
  --heading: var(--sans);
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --fs-xs: 11.5px;
  --fs-sm: 13px;
  --fs-md: 14.5px;
  --fs-lg: 16px;
  --fs-xl: 19px;
  --fs-2xl: 23px;
  --fs-3xl: 28px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 150ms;

  /* ---- Layout Dimensions ----------------------------------------------- */
  --side-w: 252px;
  --side-w-rail: 68px;
  --top-h: 58px;

  /* ---- Backward Compatibility Aliases for MFEs ------------------------- */
  --text: var(--ink-2);
  --text-h: var(--ink);
  --border: var(--line);
  --side: var(--surface);
  --side-2: var(--bg-subtle);
  --side-hover: var(--crizant-mist-100);

  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

[data-theme='dark'] {
  color-scheme: dark;

  /* On dark (navy) surfaces: */
  --bg: #07172A;
  --bg-subtle: #0B223D;
  --surface: #0A2240;             /* Navy 900 */
  --surface-2: #0E294B;
  --line: #18375F;
  --line-strong: var(--crizant-navy-700); /* #12386B */
  --ink: #FFFFFF;
  --ink-2: var(--crizant-ice-200);        /* #B9E4FA */
  --ink-3: #759BBA;

  /* Status on navy (passes 4.5+:1 contrast bar) */
  --ok: #2BB673;       --ok-soft: rgba(43, 182, 115, 0.16);  --ok-ink: #2BB673;
  --warn: #F0A032;     --warn-soft: rgba(240, 160, 50, 0.18); --warn-ink: #F0A032;
  --bad: #F0555A;      --bad-soft: rgba(240, 85, 90, 0.16);   --bad-ink: #F0555A;

  --brand: #2E82FE;
  --brand-hover: #5BA0FE;
  --brand-ink: #8DB5FF;
  --brand-soft: #0E3460;
  --brand-soft-2: #16467E;
  --brand-ring: rgba(46, 130, 254, 0.28);
  --accent-violet: #9B7BFF;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 12px 28px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.65);
}

* { box-sizing: border-box; }
html, body, #root {
  margin: 0;
  height: 100%;
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}
html { overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: 1.55;
  font-family: var(--sans);
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5 {
  font-family: var(--head);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.25;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }
button {
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  border-radius: var(--r-md);
  touch-action: manipulation;
}
input, select, textarea { accent-color: var(--brand); }

::selection { background: var(--crizant-ice-050); color: var(--crizant-blue-600); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Tabular figures for numbers in finance, tables & KPIs */
.num, .mono, td, .kpi strong, .metric-value { font-variant-numeric: tabular-nums; }

/* Refined, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--crizant-slate-300) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--crizant-slate-300); border-radius: 9999px; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-contrast: more) {
  :root { --line: #A0B2C6; --line-strong: #75869B; --ink-2: #334155; }
  [data-theme='dark'] { --line: #2B4E7A; --line-strong: #456D9F; --ink-2: #E2E8F0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ==========================================================================
   Crizant One — Host Application Shell Styles
   Modern, Light, Minimalist & Responsive
   ========================================================================== */

#root {
  max-width: 100vw !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  border: 0 !important;
  border-inline: none !important;
  overflow-x: hidden !important;
}

/* Shell Layout Grid */
.shell {
  display: grid !important;
  grid-template-columns: var(--side-w) 1fr !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: grid-template-columns 0.2s var(--ease) !important;
  background: var(--bg) !important;
}

.shell.sidebar-collapsed {
  grid-template-columns: var(--side-w-rail) 1fr !important;
}

/* -------------------------------------------------------------------------- */
/* Navigation Sidebar (Modern, Light, Clean)                                   */
/* -------------------------------------------------------------------------- */
.side {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  width: var(--side-w);
  height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  z-index: 30;
  user-select: none;
  box-shadow: var(--shadow-xs);
  transition: width 0.2s var(--ease), transform 0.24s var(--ease);
}

.side.collapsed {
  width: var(--side-w-rail);
}

/* Sidebar Brand Row */
.brandrow {
  height: var(--top-h);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.brand {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-align: left;
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #0057D9 0%, #0080F0 60%, #00A9EF 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 87, 217, 0.28);
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--crizant-navy-900, #0A2240);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.brand-sub {
  font-size: 11px;
  color: var(--ink-2, #64748B);
  line-height: 1.2;
  margin-top: 2px;
}

.side.collapsed .brand {
  width: 100%;
  justify-content: center;
}

/* Workspace Selector */
.ws {
  margin: 10px 12px 6px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.ws:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}

.ws select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.ws-ic {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ws-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ws-txt strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.ws-txt small {
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-chev {
  color: var(--ink-3);
  flex-shrink: 0;
}

.side.collapsed .ws {
  margin: 8px;
  padding: 8px;
  justify-content: center;
}

.side.collapsed .ws-txt,
.side.collapsed .ws-chev {
  display: none;
}

/* Navigation Group List */
.nav-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px 16px;
}

.nav-group {
  margin-bottom: 14px;
}

.gl {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 10px 4px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gl-chev {
  color: var(--ink-3);
  opacity: 0.7;
}

.side.collapsed .gl {
  font-size: 0;
  height: 1px;
  background: var(--line);
  margin: 8px 4px;
  padding: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  min-height: 36px;
  cursor: pointer;
  position: relative;
  transition: all var(--dur) var(--ease);
}

.nav:hover {
  background: var(--bg);
  color: var(--ink);
}

.nav.on {
  background: #EBF3FF;
  color: #0057D9;
  font-weight: 600;
  border-radius: 10px;
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-2);
}

.nav.on .nav-icon {
  color: #0057D9;
}

.nav-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav .tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.side.collapsed .nav {
  justify-content: center;
  padding: 8px 0;
}

.side.collapsed .nav-title,
.side.collapsed .nav .tag,
.side.collapsed .nav-kbd {
  display: none;
}

/* Tooltip on collapsed rail hover */
.side.collapsed .nav[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: fixed;
  left: 76px;
  background: var(--crizant-navy-900);
  color: #FFFFFF;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  box-shadow: var(--shadow-2);
}

/* Sidebar Footer & Quick Actions */
.side-foot {
  padding: 10px;
  border-top: 1px solid var(--line);
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.side-quick-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.side-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  color: var(--ink);
  border-radius: 9999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  position: relative;
}

.side-action-pill:hover {
  border-color: #0057D9;
  background: #EBF3FF;
  color: #0057D9;
}

.side-action-pill.ws-pill select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.collapse-btn {
  color: var(--ink-3);
  font-size: 12.5px;
}

.collapse-btn:hover {
  color: var(--ink);
}

.nav-kbd {
  margin-left: auto;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--ink-3);
  border: 1px solid var(--line);
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--surface-2);
}

/* -------------------------------------------------------------------------- */
/* Main Content Area & Sticky Topbar                                          */
/* -------------------------------------------------------------------------- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--bg);
  overflow: hidden;
}

.top {
  height: var(--top-h);
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
}

[data-theme='dark'] .top {
  background: rgba(10, 34, 64, 0.94);
}

.top-title {
  min-width: 0;
}

.top-org-name {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--crizant-navy-900, #0A2240);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.top-role-sub {
  font-size: 11.5px;
  color: var(--ink-2, #64748B);
  margin: 2px 0 0;
  font-weight: 400;
  line-height: 1;
}

.sp {
  flex: 1;
}

.top-right-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pill Search Input */
.search-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line, #E5E7EB);
  background: #FFFFFF;
  color: var(--ink-2, #64748B);
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12.5px;
  width: 230px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.search-pill:hover {
  border-color: var(--brand, #0057D9);
  color: var(--ink, #0F172A);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.search-pill-icon {
  color: var(--ink-3, #94A3B8);
  flex-shrink: 0;
}

.search-pill-text {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-pill-kbd {
  font-size: 10px;
  font-family: var(--mono, monospace);
  border: 1px solid var(--line, #E5E7EB);
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-subtle, #F8FAFC);
  color: var(--ink-2, #64748B);
}

/* Utility Circle Icon Buttons */
.icon-btn-round {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line, #E5E7EB);
  background: #FFFFFF;
  color: var(--ink-2, #64748B);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  position: relative;
  flex-shrink: 0;
}

.icon-btn-round:hover {
  border-color: var(--line-strong, #D1D5DB);
  color: var(--ink, #0F172A);
  background: var(--bg-subtle, #F8FAFC);
}

.mobile-search-btn {
  display: none;
}

.notif-badge-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C62F35;
  box-shadow: 0 0 0 1.5px #FFFFFF;
}

.top-sep {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 2px;
}

/* User Menu & Dropdown */
.umenu {
  position: relative;
}

.umenu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 4px;
  border-radius: 9999px;
  border: 1px solid var(--line, #E5E7EB);
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.umenu-trigger:hover {
  border-color: var(--brand, #0057D9);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--crizant-navy-900, #0A2240);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.av.lg {
  width: 36px;
  height: 36px;
  font-size: 13px;
  border-radius: 50%;
}

.umenu-meta {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.umenu-meta strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.umenu-meta small {
  font-size: 10.5px;
  color: var(--ink-3);
  line-height: 1;
}

.umenu-chev {
  color: var(--ink-3);
}

.umenu-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 6px;
  z-index: 60;
  animation: popIn 0.16s var(--ease);
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.umenu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

.umenu-head strong {
  font-size: 13px;
  color: var(--ink);
  display: block;
}

.umenu-head small {
  font-size: 11.5px;
  color: var(--ink-2);
}

.umenu-status {
  font-size: 11.5px;
  color: var(--ok);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 8px;
  font-weight: 500;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.dot.ok {
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--ok-soft);
}

.umenu-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur) var(--ease);
}

.menu-row:hover {
  background: var(--bg);
}

.menu-row.danger {
  color: var(--bad);
}

.menu-row.danger:hover {
  background: var(--bad-soft);
}

/* -------------------------------------------------------------------------- */
/* Scrollable Canvas Content Layout                                           */
/* -------------------------------------------------------------------------- */
.content {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 28px;
  width: 100%;
}

.canvas {
  background: transparent;
  min-height: 400px;
  animation: fadeIn 0.2s var(--ease);
  width: 100%;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.max-container {
  max-width: 100%;
  margin: 0;
  width: 100%;
}

/* Skeleton Loaders */
.shell-skel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shell-skel-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.shell-skel-card {
  height: 100px;
  border-radius: var(--r-md);
}

.skel {
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--line) 50%, var(--bg-subtle) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* Empty / State Card */
.state-card {
  text-align: center;
  padding: 56px 24px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  max-width: 520px;
  margin: 40px auto;
}

.state-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.state-icon.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.state-card h3 {
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--ink);
}

.state-card p {
  color: var(--ink-2);
  font-size: 13.5px;
  margin: 0 0 20px;
  line-height: 1.5;
}

.state-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
}

/* -------------------------------------------------------------------------- */
/* Command Palette (Cmd+K)                                                    */
/* -------------------------------------------------------------------------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 34, 64, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  animation: fadeIn 0.15s var(--ease);
}

.scrim-top {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14vh;
}

.pal {
  width: min(580px, calc(100vw - 32px));
  background: var(--surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: popIn 0.2s var(--ease);
}

.pal-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
}

.pal-search input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 15px;
  background: transparent;
  color: var(--ink);
}

.pal-search input::placeholder {
  color: var(--ink-3);
}

.pal-search kbd {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--ink-3);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 4px;
}

.pal ul {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 360px;
  overflow-y: auto;
}

.pal li button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.pal li button.hl,
.pal li button:hover {
  background: var(--bg);
}

.pal-ic {
  color: var(--brand);
  display: inline-flex;
}

.pal-txt {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.pal-txt span {
  font-weight: 500;
  color: var(--ink);
}

.pal-txt small {
  font-size: 11.5px;
  color: var(--ink-2);
}

.pal-grp {
  font-size: 11px;
  color: var(--ink-3);
  background: var(--bg-subtle);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-weight: 500;
}

.pal-empty {
  padding: 24px 18px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13.5px;
}

.pal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-3);
  background: var(--surface-2);
}

.pal-foot kbd {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 10px;
  margin: 0 2px;
}

/* -------------------------------------------------------------------------- */
/* Persona Picker (Login & Role Simulator Modal)                              */
/* -------------------------------------------------------------------------- */
.pick {
  min-height: 100vh;
  background: var(--bg);
  padding: 40px 24px;
  display: flex;
  justify-content: center;
  overflow-y: auto;
}

.pick-inner {
  width: 100%;
  max-width: 1080px;
}

.pick-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.pick-logo {
  height: 32px;
  width: auto;
}

.pick-intro {
  margin-bottom: 32px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crizant-cyan-400);
  margin-bottom: 8px;
}

.pick h1 {
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.pick .lead {
  color: var(--ink-2);
  font-size: 14.5px;
  max-width: 620px;
  margin: 0;
  line-height: 1.5;
}

.pick-group {
  margin-bottom: 28px;
}

.pick-group h2 {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin: 0 0 12px;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  gap: 12px;
}

.pcard {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  text-align: left;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.pcard:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-1);
  transform: translateY(-2px);
}

.pcard.on {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.pcard-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pcard-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pcard .nm {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

.pcard .ds {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 3px;
  line-height: 1.4;
}

.pcard .us {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* -------------------------------------------------------------------------- */
/* Modal, Tour & Bottom Sheets                                               */
/* -------------------------------------------------------------------------- */
.modal {
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  max-width: 520px;
  border-radius: var(--r-xl);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  animation: popIn 0.2s var(--ease);
  position: relative;
}

.modal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.modal-top h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.modal-close:hover {
  background: var(--bg);
  color: var(--ink);
}

/* Tour Sheet */
.tour-sheet {
  max-width: 440px;
  text-align: center;
  padding: 28px 24px 20px;
}

.tour-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

.tour-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.tour-body h3 {
  font-size: 20px;
  margin: 4px 0 8px;
}

.tour-body p {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 20px;
}

.tour-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}

.tour-dots span {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line);
  transition: all 0.2s;
}

.tour-dots span.on {
  width: 22px;
  background: var(--brand);
}

.tour-actions {
  display: flex;
  gap: 10px;
}

.tour-actions button {
  flex: 1;
  justify-content: center;
  min-height: 40px;
}

/* Toast Notifications */
.toasts {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
  pointer-events: none;
}

.toast {
  background: var(--crizant-navy-900);
  color: #FFFFFF;
  padding: 10px 16px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  animation: slideUpToast 0.25s var(--ease);
}

@keyframes slideUpToast {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------- */
/* Responsive Matrix: Mobile & Tablet Rules                                   */
/* -------------------------------------------------------------------------- */
.bnav { display: none; }
.drawer-scrim { display: none; }

@media (max-width: 1023px) {
  .shell,
  .shell.sidebar-collapsed,
  .shell.is-mobile {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .main {
    flex: 1 1 0% !important;
    height: 100% !important;
  }

  /* Drawer Off-canvas Navigation */
  .side,
  .side.collapsed {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(300px, 84vw) !important;
    height: 100dvh !important;
    z-index: 100 !important;
    transform: translateX(-100%) !important;
    box-shadow: none !important;
    transition: transform 0.26s var(--ease) !important;
  }

  .side.drawer-open {
    transform: translateX(0) !important;
    box-shadow: var(--shadow-lg) !important;
  }

  .drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 34, 64, 0.45);
    backdrop-filter: blur(4px);
    z-index: 90;
  }

  .hide-sm {
    display: none !important;
  }

  .top {
    height: 52px !important;
    padding: 0 10px !important;
    gap: 8px !important;
  }

  .top-title {
    max-width: calc(100vw - 165px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .top-org-name {
    font-size: 14.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .top-role-sub {
    display: none !important;
  }

  .search-pill {
    display: none !important;
  }

  .mobile-search-btn {
    display: inline-flex !important;
  }

  .umenu-meta,
  .umenu-chev {
    display: none !important;
  }

  .umenu-trigger {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .top-right-group {
    gap: 6px !important;
  }

  .top-sep {
    display: none !important;
  }

  .search {
    width: 140px;
  }

  .content {
    padding: 14px 10px calc(64px + env(safe-area-inset-bottom)) 10px !important;
  }

  /* Native Mobile Bottom Nav Bar */
  .bnav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(54px + env(safe-area-inset-bottom)) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid var(--line) !important;
    z-index: 40 !important;
    padding: 3px 4px max(3px, env(safe-area-inset-bottom)) 4px !important;
    box-shadow: 0 -2px 10px rgba(10, 34, 64, 0.04) !important;
  }

  [data-theme='dark'] .bnav {
    background: rgba(10, 34, 64, 0.94) !important;
  }

  .bnav button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ink-2) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    min-height: 44px !important;
    padding: 3px 2px !important;
  }

  .bnav button span {
    max-width: 66px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }

  .bnav button.on {
    color: var(--brand) !important;
    font-weight: 600 !important;
  }

  /* Bottom sheet modal styling for mobile */
  .scrim {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  .modal.bottom-sheet {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 86dvh !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    border-bottom: 0 !important;
  }

  .sheet-handle-bar {
    display: flex;
    justify-content: center;
    padding-bottom: 12px;
  }

  .sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--line-strong);
    display: block;
  }

  /* More sheet grid */
  .more-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
  }

  .more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    min-height: 44px;
    text-align: left;
  }

  .more-item.on {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
  }

  .more-actions {
    border-top: 1px solid var(--line);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
}

/* Auth Session Notification Banner */
.auth-session-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  color: #92400E;
  padding: 10px 16px;
  border-radius: var(--r-md, 8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  font-size: 13px;
  font-weight: 500;
  max-width: 90vw;
  animation: slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDown {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.auth-session-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

.auth-session-close {
  background: transparent;
  border: none;
  color: #92400E;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}

.auth-session-close:hover {
  background: rgba(146, 64, 14, 0.12);
}

/* --------------------------------------------------------------------------
   Touch targets
   The top-bar controls are 34px circles and the avatar 28px, which is fine for
   a mouse but below the 44px minimum both Apple's HIG and Material recommend
   for a finger. Grow them on touch-first widths rather than everywhere, so the
   desktop density is preserved.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .icon-btn-round,
  .mobile-search-btn,
  .nav-toggle,
  .drawer-close,
  .topbar-avatar,
  .avatar {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Keep the visual circle its original size while the hit area grows. */
  .icon-btn-round {
    width: 44px !important;
    height: 44px !important;
  }

  /* Any remaining icon-only control in the shell chrome. */
  .topbar button,
  .top-bar button,
  header button {
    min-height: 44px;
  }
}
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { border: 1px solid var(--line); border-radius: var(--r-md, 8px); padding: 14px 18px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--crizant-blue-600, #0057D9), var(--crizant-cyan-400, #00A9EF)); opacity: 0; transition: opacity 0.2s; }
.kpi:hover::before { opacity: 1; }
.kpi small { color: var(--ink-2); display: block; font-weight: 600; margin-bottom: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--mono, monospace); }
.kpi strong { font-family: var(--head, inherit); font-size: 26px; font-weight: 700; color: var(--ink); }
.kpi em { font-style: normal; font-size: 11.5px; font-weight: 600; margin-left: 8px; padding: 2px 7px; border-radius: var(--r-xs, 4px); background: var(--bg); font-family: var(--mono, monospace); }
.bdg { font-family: var(--mono, monospace); font-size: 11.5px; padding: 2px 8px; border-radius: var(--r-pill, 9999px); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; letter-spacing: 0.02em; }
.bdg.ok { background: var(--ok-soft, #E8F7EE); color: var(--ok, #1A7F50); border-color: rgba(26, 127, 80, 0.22); } 
.bdg.warn { background: var(--warn-soft, #FDF4E6); color: var(--warn-ink, #92400E); border-color: rgba(240, 160, 50, 0.28); }
.bdg.bad { background: var(--bad-soft, #FDECEC); color: var(--bad, #C62F35); border-color: rgba(198, 47, 53, 0.22); } 
.bdg.info { background: var(--brand-soft, #EAF6FE); color: var(--brand, #0057D9); border-color: rgba(0, 87, 217, 0.22); } 
.bdg.mute { background: var(--bg-subtle, #EDF2F7); color: var(--ink-2, #5A6675); border-color: var(--line, #E2E8F0); }
.kpi em.ok{color:var(--ok, #1A7F50); background: var(--ok-soft, #E8F7EE); } .kpi em.bad{color:var(--bad, #C62F35); background: var(--bad-soft, #FDECEC); } .kpi em.warn{color:var(--warn-ink, #92400E); background: var(--warn-soft, #FDF4E6); }

.tbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.tbar .sp { flex: 1; }
.inp { border: 1px solid var(--line-strong, #C7D0DA); background: var(--surface, #FFFFFF); color: var(--ink, #0A2240); border-radius: var(--r-md, 8px); padding: 8px 12px; min-width: 180px; flex-shrink: 1; font-size: 13.5px; transition: border-color 0.15s, box-shadow 0.15s; font-family: var(--sans, inherit); }
.inp:focus { border-color: var(--brand, #0057D9); box-shadow: 0 0 0 3px var(--brand-ring, rgba(0, 87, 217, 0.16)); outline: none; }
.seg { display: inline-flex; border: 1px solid var(--line, #E2E8F0); border-radius: var(--r-md, 8px); overflow: hidden; background: var(--surface-2, #FAFCFE); padding: 2px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--ink-2, #5A6675); padding: 6px 14px; font-weight: 500; border-radius: var(--r-sm, 6px); transition: all 0.15s; font-size: 13px; }
.seg button:hover:not(.on) { background: var(--bg, #F3F6F9); color: var(--ink, #0A2240); }
.seg button.on { background: var(--surface, #FFFFFF); color: var(--brand, #0057D9); font-weight: 600; box-shadow: var(--shadow-xs); }
.btn { border: 1px solid var(--line-strong, #C7D0DA); background: var(--surface, #FFFFFF); color: var(--ink, #0A2240); border-radius: var(--r-md, 8px); padding: 8px 16px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: all 0.15s; box-shadow: var(--shadow-xs); font-size: 13.5px; font-family: var(--sans, inherit); }
.btn:hover { border-color: var(--ink-3); background: var(--bg, #F3F6F9); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.pri { background: var(--brand, #0057D9); color: #fff; border: 1px solid transparent; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 87, 217, 0.2); }
.btn.pri:hover { background: var(--brand-hover, #0080F0); box-shadow: 0 2px 6px rgba(0, 87, 217, 0.28); }
.btn.ok { background: var(--ok, #1A7F50); color: #fff; border: 0; box-shadow: 0 1px 2px rgba(26, 127, 80, 0.2); }

.acts { display: flex; gap: 8px; }
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md, 8px); background: var(--surface); box-shadow: var(--shadow-sm); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { position: sticky; top: 0; background: var(--bg); text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--mono, monospace); color: var(--ink-2); padding: 13px 18px; border-bottom: 2px solid var(--line); z-index: 5; }
.tbl th.srt { cursor: pointer; transition: color 0.2s; }
.tbl th.srt:hover { color: var(--ink); }
.tbl th.frozen-col, .tbl td.frozen-col { position: sticky; left: 0; background: var(--surface); z-index: 4; border-right: 1px solid var(--line); }
.tbl th.frozen-col { z-index: 6; background: var(--bg); }
.tbl td { padding: 13px 18px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; font-size: 14px; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.clk { cursor: pointer; }  
.tbl tbody tr { transition: background 0.15s; }
.tbl tbody tr:hover { background: var(--bg); }
.sub { color: var(--ink-3); font-size: 13px; margin-top: 4px; }

/* Desktop vs Mobile Table Views */
.table-desktop { display: block; }
.table-mobile-cards { display: none; }

.mobile-data-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 8px);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s, border-color 0.15s;
}
.mobile-data-card:active {
  transform: scale(0.99);
  border-color: var(--crizant-blue-600, #0057D9);
}
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.card-primary-title {
  font-family: var(--head, 'Saira', sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.card-secondary-sub {
  font-size: 13px;
  color: var(--ink-2);
}
.card-secondary-sub .card-label {
  font-family: var(--mono, monospace);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card-accordion {
  margin-top: 6px;
}
.card-expand-btn {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-expanded-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fadeIn 0.2s;
}
.card-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.card-field-label {
  font-family: var(--mono, monospace);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card-field-value {
  font-weight: 600;
  color: var(--ink);
}

.pager { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; color: var(--ink-2); font-size: 13px; font-weight: 500; border-top: 1px solid var(--line); background: var(--surface); }
.pager button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 8px 14px; transition: all 0.2s; font-weight: 500; min-height: 36px; }
.pager button:hover:not(:disabled) { background: var(--bg); border-color: var(--ink-3); }
.pager button:disabled { opacity: 0.38; cursor: not-allowed; }
.pager-controls { display: flex; align-items: center; gap: 8px; }
.pager-indicator { font-family: var(--mono, monospace); font-size: 12px; }

.empty { text-align: center; padding: 48px 20px; color: var(--ink-3); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-md, 8px); }
.empty-icon { font-size: 44px; margin-bottom: 12px; opacity: 0.7; }
.empty h3 { font-size: 18px; color: var(--ink); margin: 0 0 6px; }
.empty p { font-size: 14px; margin: 0; max-width: 400px; margin: 0 auto; }
.empty-cta { margin-top: 18px; min-height: 40px; }

.kan { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; overflow-x: auto; padding-bottom: 16px; align-items: flex-start; }
.col { background: var(--bg); border-radius: var(--r-md, 8px); padding: 16px; min-height: 400px; border: 1px solid var(--line); }
.col header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.col header h4 { margin: 0; font-size: 15px; font-family: var(--head, sans-serif); }
.col header span { font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--surface); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); font-family: var(--mono, monospace); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 8px); padding: 16px; margin-bottom: 12px; cursor: grab; box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; position: relative; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: var(--brand-soft); }
.card:active { cursor: grabbing; transform: scale(0.98); }
.card .title { font-weight: 600; font-size: 15px; margin-bottom: 8px; color: var(--ink); }
.card .row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13px; color: var(--ink-2); }

.toasts { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 100; pointer-events: none; }
.toast { background: var(--ink); color: var(--surface); padding: 14px 20px; border-radius: 10px; box-shadow: var(--shadow-lg); animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 10px; pointer-events: auto; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: none; } }

.err { background: #fef2f2; color: #b91c1c; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; border: 1px solid #fecaca; display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 13.5px; }
.busy { opacity: 0.6; pointer-events: none; filter: grayscale(20%); }

/* Scrim & Modal / Bottom Sheet */
.scrim { position: fixed; inset: 0; background: rgba(10, 34, 64, 0.6); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 60; padding: 20px; animation: fadeIn 0.2s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal { background: var(--surface); color: var(--ink); width: 100%; max-width: 520px; border-radius: 12px; padding: 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); animation: popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes popIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } }

.modal-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.modal-top h3 { margin: 0; font-size: 20px; font-family: var(--head, sans-serif); }
.modal-close { border: 0; background: var(--bg); border-radius: 999px; width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-2); font-size: 15px; cursor: pointer; }
.modal-close:hover { color: var(--ink); background: var(--line); }
.sheet-handle-bar { display: none; }

.fld { display: flex; flex-direction: column; margin-bottom: 16px; gap: 6px; }
.fld-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.fld-hint { font-size: 11.5px; color: var(--ink-3); }
.fld-err-msg { font-size: 12px; color: #dc2626; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.fld-error .inp { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }
.mact { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }

.skel-wrap { width: 100%; }
.skel { height: 16px; border-radius: 4px; margin: 14px 0; background: linear-gradient(90deg, var(--bg) 25%, var(--line) 50%, var(--bg) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* PLG Setup Guide Floating Assistant */
.setup-guide {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 45;
  font-family: var(--sans, inherit);
}
.setup-trigger-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--crizant-navy-900, #0A2240);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 8px 18px 8px 12px;
  box-shadow: 0 8px 24px rgba(10,34,64,0.25);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.setup-trigger-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(10,34,64,0.35);
}
.setup-badge {
  background: var(--crizant-blue-600, #0057D9);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.setup-pct {
  background: rgba(255,255,255,0.15);
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--mono, monospace);
  font-size: 11px;
}
.setup-popover {
  position: absolute;
  bottom: 52px;
  right: 0;
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 18px;
  animation: popIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--ink);
}
.setup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.setup-header strong {
  display: block;
  font-size: 15px;
  font-family: var(--head, sans-serif);
}
.setup-header small {
  color: var(--ink-2);
  font-size: 12px;
}
.setup-close {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 15px;
  cursor: pointer;
  padding: 4px;
}
.setup-progress-bar {
  height: 6px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}
.setup-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--crizant-blue-600, #0057D9), var(--crizant-cyan-400, #00A9EF));
  transition: width 0.3s;
}
.setup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.setup-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
}
.step-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.step-done .step-icon {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.step-pending .step-icon {
  background: var(--bg);
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.step-done .step-title {
  text-decoration: line-through;
  opacity: 0.6;
}
.step-title {
  font-weight: 600;
  color: var(--ink);
}
.step-desc {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 2px;
}
.step-btn {
  margin-top: 6px;
  border: 0;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* ========================================================= */
/* Responsive & Multi-Device Breakpoint Matrix              */
/* ========================================================= */

/* Tablet & Mobile (<= 1023px) Interaction Rules: 48px touch targets */
@media (max-width: 1023px) {
  .btn, .inp, .seg button, .pager button {
    min-height: 48px;
    font-size: 14.5px;
  }
  .kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* Mobile Devices (<= 767px): Data Cards, Bottom Sheets, Single Column Forms */
@media (max-width: 767px) {
  .table-desktop {
    display: none;
  }
  .table-mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .kpi {
    padding: 12px 14px;
  }
  .kpi strong {
    font-size: 20px;
  }
  .tbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .tbar .search-inp {
    min-width: 100%;
    width: 100%;
  }
  .tbar .seg {
    width: 100%;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tbar .seg::-webkit-scrollbar {
    display: none;
  }
  .tbar .seg button {
    flex: 1;
    text-align: center;
    white-space: nowrap;
  }
  .tbar-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .tbar-actions .btn {
    flex: 1;
    justify-content: center;
  }

  /* 16px font-size prevents iOS Safari auto-zoom on input focus */
  .inp, select, textarea {
    font-size: 16px !important;
  }

  .btn, .seg button, .pager button {
    touch-action: manipulation;
  }

  .tw, .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  /* Bottom-Anchored Sheet for Modals */
  .scrim {
    place-items: end stretch;
    padding: 0;
  }
  .modal.bottom-sheet {
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    width: 100%;
    max-height: 88dvh;
    padding: 16px 20px max(32px, env(safe-area-inset-bottom));
    border-bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes slideUpSheet {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .sheet-handle-bar {
    display: flex;
    justify-content: center;
    padding-bottom: 12px;
  }
  .sheet-handle {
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: var(--line);
    display: block;
  }
  .modal-top {
    margin-bottom: 14px;
  }
  .modal-top h3 {
    font-size: 19px;
  }

  /* Hide floating setup guide on very small screens to avoid covering touch areas */
  .setup-guide {
    display: none;
  }
}

@media (max-width: 360px) {
  .kpis {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Register page header
   -------------------------------------------------------------------------- */
.reg-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  min-width: 0;
}

.reg-header-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
  background: var(--bg-subtle, #F1F5F9);
  border: 1px solid var(--line, #E5E7EB);
}

.reg-header-text { min-width: 0; }

.reg-header-text h2 {
  margin: 0 0 3px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink, #0F172A);
  overflow-wrap: anywhere;
}

.reg-header-text p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2, #64748B);
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .reg-header-icon { width: 38px; height: 38px; font-size: 18px; }
  .reg-header-text h2 { font-size: 19px; }
}
/* ==========================================================================
   Crizant One — Cross-MFE Senior UI/UX Harmonization Layer
   Elevates and unifies cards, tables, inputs, badges, and action bars across
   all 15 federated micro-frontends to match modern light & minimalist standards.
   Strictly aligned with Dashboard page aesthetics: Pure White canvas, #0A2240 navy,
   16px card radii, top gradient accent stripes, pill status badges and pill action buttons.
   ========================================================================== */

/* Universal Root & Viewport Protection */
html,
body,
#root {
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  border-inline: none !important;
  border: none !important;
  background: #FFFFFF !important;
}

/* Headings: Signature Crizant Navy */
h1, h2, h3, .heading, .title {
  color: #0A2240 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}

/* -------------------------------------------------------------------------- */
/* Universal Cards & Containers (Dashboard 16px Radius & Clean Border)        */
/* -------------------------------------------------------------------------- */
.card,
.metric-card,
.report-card,
.policy-card,
.claim-card,
.quote-card,
.state-card,
article.card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  color: #0F172A !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

.card:hover,
.metric-card:hover,
.policy-card:hover,
.claim-card:hover,
.quote-card:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

.card-header,
.header-actions {
  border-bottom: 1px solid #F1F5F9 !important;
}

/* -------------------------------------------------------------------------- */
/* Metric Cards & KPIs (Signature Dashboard Top Accent Stripe)                */
/* -------------------------------------------------------------------------- */
.kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 22px !important;
}

.kpi {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

/* Top accent colored line on all KPI cards */
.kpi::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #0057D9, #0080F0) !important;
  border-radius: 16px 16px 0 0 !important;
}

.kpi:nth-child(2)::before {
  background: linear-gradient(90deg, #10B981, #34D399) !important;
}

.kpi:nth-child(3)::before {
  background: linear-gradient(90deg, #F59E0B, #FBBF24) !important;
}

.kpi:nth-child(4)::before {
  background: linear-gradient(90deg, #8B5CF6, #A78BFA) !important;
}

.kpi:nth-child(5)::before {
  background: linear-gradient(90deg, #EC4899, #F472B6) !important;
}

.kpi:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-2px) !important;
}

.kpi small,
.metric-label {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748B !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.kpi strong,
.metric-value {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #0A2240 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
}

/* -------------------------------------------------------------------------- */
/* Buttons & Actions (Signature Dashboard Pill Shapes)                        */
/* -------------------------------------------------------------------------- */
.btn,
button.btn-secondary,
.btn-secondary-action {
  border: 1px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #0A2240 !important;
  border-radius: 9999px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  cursor: pointer !important;
}

.btn:hover,
button.btn-secondary:hover,
.btn-secondary-action:hover {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0A2240 !important;
  transform: translateY(-1px) !important;
}

.btn.pri,
.btn-primary,
button.btn-primary,
.btn-new-lead,
button.pri,
button[type="submit"] {
  background: #0057D9 !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !important;
  border-radius: 9999px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(0, 87, 217, 0.28) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn.pri:hover,
.btn-primary:hover,
button.btn-primary:hover,
.btn-new-lead:hover,
button.pri:hover,
button[type="submit"]:hover {
  background: #0080F0 !important;
  box-shadow: 0 4px 12px rgba(0, 87, 217, 0.38) !important;
  transform: translateY(-1px) !important;
}

.btn.ghost {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  color: #64748B !important;
  border-radius: 9999px !important;
}

.btn.ghost:hover {
  background: #F1F5F9 !important;
  color: #0A2240 !important;
}

.btn-sm,
.btn.sm {
  padding: 5px 12px !important;
  font-size: 12px !important;
  min-height: 28px !important;
}

/* -------------------------------------------------------------------------- */
/* Tables & Grids (Dashboard Modern White Surface)                            */
/* -------------------------------------------------------------------------- */
.tw,
.table-responsive {
  border: 1px solid #E5E7EB !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  overflow-x: auto !important;
}

.tbl,
.data-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.tbl th,
.data-table th {
  background: #F8FAFC !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.tbl td,
.data-table td {
  padding: 13px 18px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  color: #0F172A !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
}

.tbl tbody tr,
.data-table tbody tr {
  transition: background-color 0.15s ease !important;
}

.tbl tbody tr:hover,
.data-table tbody tr:hover {
  background: #F8FAFC !important;
}

.tbl tbody tr:last-child td,
.data-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Form Controls & Inputs (Clean Pill Search & Focused Inputs)                 */
/* -------------------------------------------------------------------------- */
.inp,
.input-field,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  color: #0F172A !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.inp:focus,
.input-field:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #0057D9 !important;
  box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.16) !important;
}

/* Pill Search Inputs */
input[type="search"],
.inp[type="search"],
.search-input,
.inp-search {
  border-radius: 9999px !important;
  padding-left: 38px !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* Ensure inputs with icons keep left padding clear of the icon */
.input-with-icon,
.input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.input-with-icon > .input-icon,
.input-with-icon > svg,
.input-wrap > .input-icon,
.input-wrap > svg {
  position: absolute !important;
  left: 12px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  color: #8C99A8 !important;
}

/* -------------------------------------------------------------------------- */
/* Badges & Status Indicators (Signature Dashboard Vibrant Pill Badges)       */
/* -------------------------------------------------------------------------- */
.bdg,
.badge,
span.pill {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border: 1px solid transparent !important;
  letter-spacing: 0.02em !important;
}

.bdg.ok,
.badge-success,
.bdg-approved,
.status-active {
  background: #E8F7EE !important;
  color: #166534 !important;
  border-color: #BBF7D0 !important;
}

.bdg.warn,
.badge-warning,
.bdg-pending {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border-color: #FDE68A !important;
}

.bdg.bad,
.bdg.err,
.badge-danger,
.bdg-rejected {
  background: #FEE2E2 !important;
  color: #991B1B !important;
  border-color: #FECACA !important;
}

.bdg.info,
.badge-info {
  background: #E0F2FE !important;
  color: #0369A1 !important;
  border-color: #BAE6FD !important;
}

.bdg.mute,
.badge-secondary {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border-color: #E2E8F0 !important;
}

/* -------------------------------------------------------------------------- */
/* Live Pulse Badges & Summary Chips                                          */
/* -------------------------------------------------------------------------- */
.live-pulse-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #0369A1 !important;
  background: #E0F2FE !important;
  padding: 3px 9px !important;
  border-radius: 9999px !important;
  border: 1px solid #BAE6FD !important;
}

.pulse-dot {
  width: 6.5px !important;
  height: 6.5px !important;
  border-radius: 50% !important;
  background: #0284C7 !important;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2) !important;
  animation: pulseAnim 2s infinite !important;
}

@keyframes pulseAnim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.summary-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: transform 0.15s ease !important;
}

.summary-chip:hover {
  transform: translateY(-1px) !important;
}

.chip-green {
  background: #E8F7EE !important;
  color: #166534 !important;
  border: 1px solid #BBF7D0 !important;
}

.chip-amber {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border: 1px solid #FDE68A !important;
}

.chip-blue {
  background: #E0F2FE !important;
  color: #0369A1 !important;
  border: 1px solid #BAE6FD !important;
}

.chip-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
}

.dot-green { background: #16A34A !important; }
.dot-amber { background: #D97706 !important; }
.dot-blue { background: #0284C7 !important; }

/* -------------------------------------------------------------------------- */
/* Filter Bars & Segmented Controls (Pill Filter Buttons)                     */
/* -------------------------------------------------------------------------- */
.flt,
.filter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}

.flt button,
.tab-button {
  border: 1px solid #E2E8F0 !important;
  background: #F8FAFC !important;
  color: #475569 !important;
  padding: 6px 14px !important;
  font-weight: 500 !important;
  border-radius: 9999px !important;
  font-size: 12.5px !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.flt button:hover:not(.on):not(.active),
.tab-button:hover:not(.active) {
  background: #EEF2F6 !important;
  color: #0A2240 !important;
  border-color: #CBD5E1 !important;
}

.flt button.on,
.flt button.active,
.tab-button.active {
  background: #0057D9 !important;
  color: #FFFFFF !important;
  border-color: #0057D9 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(0, 87, 217, 0.28) !important;
}

/* -------------------------------------------------------------------------- */
/* Modals & Dialogs                                                           */
/* -------------------------------------------------------------------------- */
.modal {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 20px 40px -10px rgba(10, 34, 64, 0.14) !important;
}

.modal header {
  border-bottom: 1px solid #F1F5F9 !important;
  color: #0A2240 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

.mact {
  border-top: 1px solid #F1F5F9 !important;
  padding-top: 16px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

/* -------------------------------------------------------------------------- */
/* Eliminating Double-Padding across MFE Root Wrappers                         */
/* -------------------------------------------------------------------------- */
.reports-wrapper,
.quote-container,
.admin-module,
.claims-container,
.finance-container,
.crm-container,
.policy-container,
.dashboard-container {
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
}

/* ==========================================================================
   Mobile Responsive Harmonization Layer (< 768px & < 480px)
   Guarantees zero horizontal page blowout, touch-friendly navigation,
   and beautifully balanced layouts across phones and small viewports.
   ========================================================================== */

@media (max-width: 768px) {
  /* Strict Viewport Containment */
  html, body, #root, .shell, .main, .content, .canvas, .max-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .content {
    padding: 12px 10px calc(62px + env(safe-area-inset-bottom)) 10px !important;
  }

  .canvas, .max-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Universal Headers & Banners */
  .crm-header-row,
  .dash-greeting-row,
  .onb-header-bar,
  .dms-header,
  .page-header-row,
  .header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 0 8px 0 !important;
    margin-bottom: 16px !important;
  }

  .crm-header-left,
  .dash-greeting-left,
  .onb-title-group {
    width: 100% !important;
  }

  .crm-header-title,
  .dash-greeting-title,
  .onb-title-group h1,
  h1.top-org-name {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  .crm-header-sub,
  .dash-greeting-sub,
  .onb-title-group p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .dash-greeting-actions,
  .header-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }

  /* KPI & Metric Grids: 2-column mobile cards */
  .kpis,
  .crm-kpi-grid,
  .stats-row,
  .metric-grid,
  .stat-grid,
  .summary-grid,
  .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }

  .kpi,
  .stat-card,
  .metric-card {
    padding: 12px 14px 10px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
  }

  .kpi strong,
  .metric-value,
  .stat-value {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  .kpi small,
  .metric-label,
  .stat-label {
    font-size: 9.5px !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.04em !important;
  }

  .stat-sparkline {
    display: none !important;
  }

  /* Horizontal Scrollable Tabs & Filter Controls */
  .crm-controls-row,
  .filter-bar,
  .flt,
  .tab-bar,
  .dms-nav-tabs,
  .onb-nav-tabs,
  .action-filter-pills {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    display: flex !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
  }

  .crm-controls-row::-webkit-scrollbar,
  .filter-bar::-webkit-scrollbar,
  .flt::-webkit-scrollbar,
  .dms-nav-tabs::-webkit-scrollbar,
  .onb-nav-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .dms-nav-tab,
  .onb-tab-btn,
  .filter-pill,
  .tab-button,
  .flt button {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  .crm-search-box,
  .search-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Robust Scrollable Tables */
  .table-responsive,
  .tw,
  .table-wrap,
  .dms-table-container,
  .onb-table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    border-radius: 12px !important;
    margin-bottom: 14px !important;
    border: 1px solid #E5E7EB !important;
  }

  table {
    max-width: none !important;
    width: 100% !important;
  }

  table th,
  table td {
    padding: 10px 12px !important;
    font-size: 12.5px !important;
  }

  /* Mobile Modals & Drawers */
  .modal,
  .modal-content,
  .crm-modal,
  .dialog-card {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 10px auto !important;
    max-height: 88dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  .mact,
  .modal-actions {
    flex-direction: column-reverse !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .mact .btn,
  .modal-actions button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Form Grids & Responsive Columns */
  .form-row,
  .form-grid,
  .grid-2,
  .grid-3,
  .form-row-2col {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  input,
  select,
  textarea {
    font-size: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Mobile Kanban Touch-Snap */
  .kan {
    padding: 8px 2px 16px !important;
    gap: 12px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .kan .col {
    flex: 0 0 85vw !important;
    min-width: 85vw !important;
    max-width: 85vw !important;
    scroll-snap-align: center !important;
  }

  /* Dashboard Next Best Actions & Split Layout */
  .dash-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .action-row {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .action-row-title {
    font-size: 13px !important;
  }

  .action-cta-btn {
    display: none !important;
  }

  .quick-actions-bar {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .card-top-header {
    padding: 12px 14px 10px !important;
    flex-wrap: wrap !important;
  }

  /* DMS Specific Mobile Rules */
  .dms-header {
    padding: 12px 14px !important;
  }

  .dms-container section[style*="gridTemplateColumns"],
  .dms-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 12px 14px !important;
    gap: 10px !important;
  }
}

/* Extra-narrow Phones (< 380px, e.g. iPhone SE 1st gen, small Galaxy Fold) */
/* Stat tiles hold a short label and a number, so they stay two-up down to the
   narrowest common phones — 375px (iPhone SE/mini) was previously dropping to a
   single column, which pushed four tiles into four screens of scrolling before
   any actual content. Only genuinely tiny viewports get one column. */
@media (max-width: 340px) {
  .kpis,
  .crm-kpi-grid,
  .stats-row,
  .metric-grid,
  .stat-grid,
  .summary-grid,
  .kpi-grid,
  .dms-container section[style*="gridTemplateColumns"],
  .dms-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 380px) {
  .crm-header-title,
  .dash-greeting-title,
  .onb-title-group h1 {
    font-size: 18px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Inline grid safety net                                                      */
/*                                                                             */
/* React components that set style={{ gridTemplateColumns: 'repeat(N, 1fr)' }} */
/* produce an INLINE declaration, which outranks every stylesheet media query. */
/* Several screens therefore kept 3-6 fixed columns on a phone and silently    */
/* clipped the overflow (the onboarding product picker lost 3 of its 5 cards,  */
/* unreachable because the shell sets overflow-x: hidden). Collapse those      */
/* grids at narrow widths. Intrinsically responsive auto-fit / auto-fill       */
/* tracks already adapt, so they are left alone.                               */
/* -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(4"]:not([style*="auto-fit"]):not([style*="auto-fill"]),
  [style*="grid-template-columns: repeat(5"]:not([style*="auto-fit"]):not([style*="auto-fill"]),
  [style*="grid-template-columns: repeat(6"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  /* Compact stat tiles still read well two-up on a large phone. */
  .stats-row[style*="grid-template-columns"],
  .kpi-grid[style*="grid-template-columns"],
  .dms-stats-grid[style*="grid-template-columns"],
  section[style*="grid-template-columns: repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   Flex min-content trap
   A flex item defaults to min-width:auto, so it refuses to shrink below its
   content's intrinsic width. Page headers built as a flex row therefore kept
   their desktop width on a phone and pushed the title clean off the screen
   (the policy register overflowed by 273px). Letting these items shrink, and
   wrap when there is no room, fixes it everywhere at once.
   -------------------------------------------------------------------------- */
.header-actions,
.crm-header-row,
.flex-between,
.header-row,
.card-header,
.page-header {
  flex-wrap: wrap;
  min-width: 0;
}

.header-actions > *,
.crm-header-row > *,
.flex-between > *,
.header-row > *,
.card-header > *,
.page-header > * {
  min-width: 0;
}

@media (max-width: 768px) {
  /* Long headings must wrap rather than define the row's width. */
  .header-actions h1, .header-actions h2, .header-actions h3,
  .card-header h1, .card-header h2, .card-header h3,
  .page-header h1, .page-header h2, .page-header h3 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Segmented controls and filter/tab rows scroll instead of overflowing. */
  .seg,
  .segmented,
  .filter-row,
  .tabs,
  .sub-tabs,
  .module-tabs,
  .chip-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }

  .seg::-webkit-scrollbar,
  .segmented::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  .sub-tabs::-webkit-scrollbar,
  .module-tabs::-webkit-scrollbar,
  .chip-row::-webkit-scrollbar { display: none; }

  .seg > *,
  .segmented > *,
  .filter-row > *,
  .tabs > *,
  .sub-tabs > *,
  .module-tabs > *,
  .chip-row > * { flex: 0 0 auto; }
}

@media (max-width: 768px) {
  /* Rows built with an inline display:flex and no class (tab strips, action
     bars) cannot be reached by the class-based rules above, and nowrap kept
     pushing their buttons off-screen. Allow them to wrap; stacking is a benign
     fallback, being clipped is not. Columns and explicit wrap are left alone. */
  main [style*="display: flex"]:not([style*="flex-direction: column"]):not([style*="flex-wrap"]),
  main [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="flex-wrap"]) {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  /* Wide tables that were never wrapped in .table-responsive were clipped by the
     shell's overflow-x:hidden — the reconciliation register lost 1000px of its
     columns. Make the table its own horizontal scroller so every column stays
     reachable. Tables already inside a wrapper simply never need to scroll. */
  main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  main table thead,
  main table tbody,
  main table tfoot {
    width: max-content;
    min-width: 100%;
  }

  main table th,
  main table td {
    white-space: nowrap;
  }

  /* The shared Table component swaps to stacked cards below this width, so its
     hidden table must not add a stray scrollbar. */
  main .table-mobile-cards ~ table,
  main table[hidden] { display: none; }
}

@media (max-width: 768px) {
  /* Grid and flex items also default to min-width:auto, so a single collapsed
     track can still blow out to its content's intrinsic width — the DMS card
     reached 1301px inside a 299px column. Let every direct child of an inline
     grid/flex container shrink. */
  main [style*="display: grid"] > *,
  main [style*="display:grid"] > *,
  main [style*="display: flex"] > *,
  main [style*="display:flex"] > *,
  main .dms-card,
  main .dms-container > * {
    min-width: 0 !important;
  }

  /* Fixed-width sidebars inside a two-column shell become full width. */
  main [style*="grid-template-columns: 280px"],
  main [style*="grid-template-columns: 260px"],
  main [style*="grid-template-columns: 300px"],
  main [style*="grid-template-columns: 240px"] {
    grid-template-columns: 1fr !important;
  }

  main .dms-container {
    flex-direction: column !important;
  }
}
/*$vite$:1*/