/* RB CRM / glass theme. Data surfaces stay opaque; chrome provides depth. */
:root {
  --crm-bg: #eef2fa;
  --crm-surface: #fff;
  --crm-ink: #18233d;
  --crm-muted: #596780;
  --crm-line: #e5eaf3;
  --crm-teal: #4b56d8;
  --crm-soft: #eef0ff;
  --glass-surface: rgba(255, 255, 255, .69);
  --glass-border: rgba(255, 255, 255, .86);
  --glass-shadow: 0 12px 38px rgba(52, 66, 121, .065), inset 0 1px 0 rgba(255,255,255,.8);
  --glass-blue: rgba(116, 145, 255, .17);
  --glass-violet: rgba(176, 143, 241, .14);
  --glass-mint: rgba(107, 218, 201, .12);
  --glass-hover: rgba(90, 105, 232, .055);
}
.dark {
  --crm-bg: #0e1322;
  --crm-surface: #171e30;
  --crm-ink: #eaf0fc;
  --crm-muted: #a1aec5;
  --crm-line: #2a344b;
  --crm-teal: #b1b9ff;
  --crm-soft: #292f4c;
  --glass-surface: rgba(25, 33, 54, .76);
  --glass-border: rgba(178, 194, 255, .14);
  --glass-shadow: 0 12px 38px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(221,230,255,.045);
  --glass-blue: rgba(94, 112, 233, .15);
  --glass-violet: rgba(156, 85, 223, .12);
  --glass-mint: rgba(57, 172, 180, .08);
  --glass-hover: rgba(155, 167, 255, .07);
}
body.fi-body, .fi-simple-layout {
  background-color: var(--crm-bg);
  background-image: radial-gradient(ellipse at 17% 0%,var(--glass-blue),transparent 45%),
    radial-gradient(ellipse at 89% 12%,var(--glass-violet),transparent 42%),
    radial-gradient(ellipse at 70% 95%,var(--glass-mint),transparent 50%);
  background-attachment: fixed;
  color: var(--crm-ink);
}
.fi-sidebar {
  background: var(--glass-surface) !important;
  border-right: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.fi-sidebar-header { background: transparent !important; border-bottom: 1px solid var(--crm-line); }
.fi-topbar > nav {
  background: var(--glass-surface) !important;
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.fi-sidebar-item-button { min-height: 44px; border: 1px solid transparent; }
.fi-sidebar-item-button:hover { background: var(--glass-hover); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-active > .fi-sidebar-item-button {
  background: linear-gradient(115deg,var(--crm-soft),var(--glass-hover));
  color: var(--crm-teal);
  border-color: color-mix(in srgb,var(--crm-teal) 15%,transparent);
  box-shadow: 0 3px 10px var(--glass-hover);
}
.crm-brand-mark { background: linear-gradient(135deg,#6275eb,#8271d9); box-shadow: 0 5px 15px #6478df26; letter-spacing:-1px; }
.crm-brand strong { font-size: 11px; letter-spacing: .055em; }
.crm-brand small { font-size: 10px; letter-spacing:.04em; }
.crm-workspace { gap: 24px; }
.crm-hero {
  min-height: 225px;
  padding: 34px 36px;
  background: var(--glass-surface);
  color: var(--crm-ink);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  isolation: isolate;
}
.crm-hero::before {
  content: ''; position: absolute; width: 370px; height: 370px; right: -70px; top: -170px;
  border-radius: 50%; background: radial-gradient(circle,var(--glass-violet),transparent 68%);
  pointer-events: none; z-index: -1;
}
.crm-hero::after {
  content: ''; position: absolute; width: 420px; height: 300px; right: 15%; bottom: -180px;
  border-radius: 50%; background: radial-gradient(ellipse,var(--glass-blue),transparent 68%);
  pointer-events: none; z-index: -1;
}
.crm-hero > div:first-child { position:relative; z-index:2; }
.crm-hero .crm-eyebrow { color:var(--crm-teal); font-size:10px; letter-spacing:.15em; }
.crm-hero h2 { font-size:34px; margin-top:16px; letter-spacing:-.045em; }
.crm-hero-dot { color:var(--crm-teal); }
.crm-hero p { font-size:14px; color:var(--crm-muted); }
.crm-hero-meta { font-size:11px; color:var(--crm-muted); gap:10px; margin-top:25px; }
.crm-live-dot { background:#36bfa0; box-shadow:0 0 0 4px #36bfa014; }
.crm-button, .fi-btn.fi-color-primary {
  background:linear-gradient(120deg,#596de0,#7964cf); color:#fff;
  border:1px solid #ffffff30; border-radius:11px; box-shadow:0 6px 16px #6674db24;
}
.crm-button { position:relative; overflow:hidden; padding:12px 18px; font-size:13px; }
.crm-button::after {
  content:''; position:absolute; inset:-40% -80%; pointer-events:none;
  background:linear-gradient(110deg,transparent 43%,#ffffff25 50%,transparent 57%);
  transform:translateX(-55%);
}
.crm-button:hover { background:linear-gradient(120deg,#5266d5,#705bc5); box-shadow:0 8px 22px #6674db35; }
.crm-hero-art { right:20%; top:-10px; opacity:.8; width:265px; height:265px; z-index:0; }
.crm-orbit {
  inset:25px; border-color:color-mix(in srgb,var(--crm-teal) 15%,transparent);
  box-shadow:0 0 0 25px color-mix(in srgb,var(--crm-teal) 3%,transparent),0 0 0 50px color-mix(in srgb,var(--crm-teal) 2%,transparent);
}
.crm-orbit::before { border-color:color-mix(in srgb,var(--crm-teal) 20%,transparent); }
.crm-orbit::after {
  content:''; position:absolute; width:17px; height:17px; right:22px; top:20px;
  background:linear-gradient(135deg,#a0adff,#baa4eb); border:3px solid var(--glass-border);
  border-radius:50%; box-shadow:0 0 24px #8c91ef50;
}
.crm-art-label { color:var(--crm-teal); opacity:.6; font-size:11px; letter-spacing:.22em; }
.crm-metrics { gap:18px; }
.crm-metric {
  position:relative; overflow:hidden; padding:23px 24px;
  background:var(--glass-surface); border:1px solid var(--glass-border);
  border-radius:20px; box-shadow:var(--glass-shadow);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.crm-metric::after {
  content:''; position:absolute; width:100px; height:100px; top:-44px; right:-25px;
  background:radial-gradient(circle,var(--glass-blue),transparent 68%); pointer-events:none;
}
.crm-metric > div {font-size:13px;}
.crm-metric small {color:var(--crm-teal);font-size:10px;}
.crm-metric > strong {font-size:36px;margin:20px 0 12px;font-variant-numeric:tabular-nums;}
.crm-metric p {font-size:11px;line-height:1.6;}
.crm-card, .fi-section, .fi-ta-ctn {
  background:var(--crm-surface); border:1px solid var(--crm-line); border-radius:20px !important;
  box-shadow:0 6px 22px #142c5c03 !important;
}
.crm-card-heading {padding:24px 25px 20px;}
.crm-card-heading h3 {font-size:16px; margin-top:7px;}
.crm-card-heading h3 small {font-size:11px;}
.crm-card-heading > a {font-size:12px;}
.crm-eyebrow {font-size:10px;}
.crm-table th {background:color-mix(in srgb,var(--crm-bg) 65%,var(--crm-surface));font-size:11px;padding:13px 16px;}
.crm-table td {font-size:12px;padding:18px 16px;}
.crm-company a {font-size:12px;max-width:230px;line-height:1.6;}
.crm-company small {font-size:11px;}
.crm-avatar {background:var(--crm-soft);color:var(--crm-teal);border-radius:11px;width:36px;height:36px;}
.crm-chip {font-size:11px;background:var(--crm-soft);color:var(--crm-teal);padding:5px 9px;}
.crm-table tbody tr:hover,.fi-ta-row:hover {background:var(--glass-hover);}
.crm-empty {padding:38px 20px;}
.crm-empty-icon {display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--crm-soft);font-size:23px;}
.crm-empty strong {font-size:14px;}
.crm-empty p {font-size:12px;line-height:1.7;}
.crm-task strong {font-size:13px;}
.crm-task small,.crm-pipeline > div,.crm-pipeline strong,.crm-sales {font-size:12px;}
.crm-track {height:8px;background:var(--crm-soft);}
.crm-track i {background:linear-gradient(90deg,#7387ed,#a095ea);}
.crm-activity strong {font-size:12px;}
.crm-activity p {font-size:12px;}
.crm-activity small {font-size:11px;}
.crm-footer {font-size:10px;letter-spacing:.08em;}
.crm-reference-row {flex-wrap:wrap;}
.fi-input-wrp {background:var(--crm-surface);border-radius:11px;}
.fi-modal-window,.fi-dropdown-panel,.fi-simple-main {
  background:var(--glass-surface) !important; border:1px solid var(--glass-border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--glass-shadow) !important;
}
.fi-simple-main {border-radius:24px !important;}
.crm-button:focus-visible, .crm-arrow:focus-visible, .crm-task:focus-visible,
.crm-card a:focus-visible {outline:3px solid var(--crm-teal);outline-offset:4px;border-radius:5px;}
/* Motion is tied to an interaction or a single entrance; no continuously moving backgrounds. */
@media (prefers-reduced-motion:no-preference) {
  body.fi-body,.fi-sidebar,.fi-topbar > nav,.crm-card,.crm-metric,.fi-section,.fi-input-wrp {
    transition:background-color 220ms ease,border-color 220ms ease,color 220ms ease,box-shadow 200ms ease;
  }
  .crm-metric,.crm-button,.fi-btn,.crm-empty-icon {transition:transform 180ms ease,box-shadow 180ms ease,background-color 200ms ease;}
  .crm-metric:hover {transform:translateY(-3px);box-shadow:0 15px 36px #5464a512,inset 0 1px 0 var(--glass-border);}
  .crm-button:hover,.fi-btn:hover {transform:translateY(-1px);}
  .crm-button:active,.fi-btn:active {transform:translateY(0);}
  .crm-button:hover::after {animation:crm-sheen 650ms ease-out both;}
  .crm-orbit,.crm-art-label {transition:transform 650ms cubic-bezier(.2,.7,.3,1);}
  .crm-hero:hover .crm-orbit {transform:rotate(-17deg);}
  .crm-hero:hover .crm-art-label {transform:translateY(-3px);}
  .crm-table tbody tr,.crm-task,.crm-activity > a {transition:background-color 160ms ease;}
  .crm-hero,.crm-metrics {animation:crm-arrive 350ms cubic-bezier(.2,.7,.3,1) both;}
  .crm-metrics {animation-delay:70ms;}
  @keyframes crm-arrive {from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  @keyframes crm-sheen {from{transform:translateX(-55%)}to{transform:translateX(55%)}}
}
/* A solid fallback also keeps older browsers readable. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .fi-sidebar,.fi-topbar > nav,.crm-hero,.crm-metric,.fi-modal-window,.fi-dropdown-panel,.fi-simple-main {background:var(--crm-surface) !important;}
}
@media(max-width:1100px){.crm-hero-art{right:8%;opacity:.45}}
@media(max-width:640px){
  .crm-hero{padding:26px 24px;min-height:250px;}
  .crm-hero h2{font-size:28px;}.crm-hero-art{right:-80px;opacity:.3;}
  .crm-hero-meta{font-size:10px;flex-wrap:wrap;gap:8px;}
  .crm-metric{padding:20px 18px;}.crm-metric > strong{font-size:31px;}
  .crm-card-heading{padding:21px 20px;}.crm-footer{font-size:9px;}
  .fi-sidebar,.fi-topbar > nav,.crm-hero,.crm-metric{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
}