/* =========================================================================
   GFI Heroes — the house finish
   Loaded last. The base styles came from an earlier tracker; this file is
   what makes this one GFI Heroes: the logo's navy (#001F46) as the brand,
   a navy sidebar carrying the white lion, pure white surfaces on a cool
   page, darker body text and hairline borders so everything reads sharp,
   and one typeface (Inter) everywhere.

   The rule from the rest of the app holds here too: every dark surface
   carries bold white text.
   ========================================================================= */

:root{
  --hero-navy:#001F46; --hero-navy2:#0A3270; --hero-navy3:#12408A; --hero-blue:#1D5BD6; --hero-sky:#5B8EF0;
  --ink:#F3F5F9; --panel:#FFFFFF; --panel2:#F8FAFC; --panel3:#EDF1F6; --line:#E1E6EE; --line2:#CBD3DF;
  --gold:#001F46; --gold-soft:#1D5BD6; --gold-deep:#0A3270; --gold-dim:#A9B8D6;
  --text:#0A1730; --muted:#4D5B73; --muted2:#76839A;
  --shadow:0 1px 2px rgba(10,23,48,.06),0 14px 34px -22px rgba(10,23,48,.35);
  --sb-w:288px;
  /* the pipeline, record, policy and task styles read these */
  --pl-navy:#001F46; --pl-navy2:#0A3270; --pl-navy3:#12408A;
  --pl-blue:#1D5BD6; --pl-blue-ink:#1747AE;
  --pl-tint:#EEF3FC; --pl-tint2:#E1EAFA; --pl-tint-line:#C9D8F3;
  --pl-ink:#0A1730; --pl-ink2:#24324D; --pl-mute:#4D5B73; --pl-mute2:#66758D;
  --pl-line:#E1E6EE; --pl-line2:#CBD3DF; --pl-field:#F7F9FC;
  --pl-dark-grad:linear-gradient(180deg,#0B3473,#001F46);
}

html{background:var(--ink)}
body{background:var(--ink);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01"}
h1,h2,h3,.section-title,.mh-t{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:rgba(29,91,214,.18)}
input,select,textarea{background:#FFFFFF;border-color:var(--line2);color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:var(--hero-blue);box-shadow:0 0 0 3px rgba(29,91,214,.15)}
a{color:var(--hero-blue)}
::-webkit-scrollbar-thumb{background:#C3CCDA;border:2px solid transparent;background-clip:padding-box}

/* ============================================================== sidebar */
#sidebar.sidebar{
  background:
    radial-gradient(420px 300px at 0% 0%,rgba(64,124,230,.22),transparent 70%),
    linear-gradient(180deg,#00285A 0%,#001F46 38%,#00173C 100%);
  border-right:0;color:#FFFFFF;box-shadow:inset -1px 0 0 rgba(255,255,255,.06)}
#sidebar .brand{background:transparent;padding:18px 18px 16px}
#sidebar .brand::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 20%,rgba(255,255,255,.16) 80%,transparent)}
#sidebar .kw-logo-img{width:100%;max-width:196px;margin:2px auto 0;filter:drop-shadow(0 8px 18px rgba(0,0,0,.25))}
#sidebar .rf-brand{padding:2px 26px 2px 0}
#sidebar .sidebar-collapse-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#FFFFFF;font-weight:800}
#sidebar .sidebar-collapse-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
#sidebar .sidebar-expand-btn{background:var(--hero-navy);color:#FFFFFF;border-color:rgba(255,255,255,.2)}

#sidebar .user-chip{border-bottom:1px solid rgba(255,255,255,.1);padding:12px 16px}
#sidebar .uc-avatar{background:linear-gradient(140deg,#2C6BE0,#123E8F);box-shadow:0 0 0 2px rgba(255,255,255,.22);color:#FFFFFF;font-weight:800}
#sidebar .uc-name{color:#FFFFFF;font-weight:800}
#sidebar .uc-role{color:#FFFFFF;opacity:.72;font-weight:600}
#sidebar .uc-signout{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#FFFFFF}
#sidebar .uc-signout:hover{background:rgba(226,74,66,.22);border-color:rgba(255,140,132,.6);color:#FFFFFF}

#sidebar .ph-ql{border-top:0;padding:14px 14px 4px}
#sidebar .ql-head{color:#FFFFFF;opacity:.62;font-family:var(--sans);font-weight:800;letter-spacing:.14em;font-size:10px}
#sidebar .ql-head button,#sidebar .ql-edit{color:#FFFFFF;opacity:.8}
#sidebar .ql-item{color:#FFFFFF;font-weight:700}
#sidebar .ql-item .ql-label{color:#FFFFFF}
#sidebar .ql-item:hover{background:rgba(255,255,255,.08)}
#sidebar .ql-home{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#FFFFFF;font-weight:800}
#sidebar .ql-home:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
#sidebar .ql-item.ql-fixed{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);box-shadow:none;font-weight:800}
#sidebar .ql-item.ql-fixed:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);box-shadow:none}
#sidebar .ql-item.ql-fixed .ql-crown,#sidebar .ql-item.ql-fixed .ql-ext,#sidebar .ql-ext{color:#FFFFFF;opacity:.75;filter:none}
#sidebar .ql-item.ql-company:hover,#sidebar .ql-list .ql-item:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);box-shadow:none}

/* the admin's roster */
#sidebar .nav-dash{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#FFFFFF;font-weight:800}
#sidebar .nav-dash .di{color:#FFFFFF}
#sidebar .nav-dash:hover{background:rgba(255,255,255,.12)}
#sidebar .nav-dash.active{background:#FFFFFF;border-color:#FFFFFF;color:var(--hero-navy)}
#sidebar .nav-dash.active .di{color:var(--hero-navy)}
#sidebar .roster-head span{color:#FFFFFF;opacity:.62;font-weight:800;letter-spacing:.14em;font-size:10px}
#sidebar .roster-head .btn-add{background:#FFFFFF;color:var(--hero-navy);font-weight:800}
#sidebar .search input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#FFFFFF;font-weight:600}
#sidebar .search input::placeholder{color:rgba(255,255,255,.62)}
#sidebar .search input:focus{border-color:rgba(255,255,255,.5);box-shadow:0 0 0 3px rgba(255,255,255,.1)}
#sidebar .agent-item{border-color:transparent}
#sidebar .agent-item-name{color:#FFFFFF;font-weight:700}
#sidebar .agent-item-meta{color:#FFFFFF;opacity:.7}
#sidebar .agent-item:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);box-shadow:none}
#sidebar .agent-item:hover .agent-item-name{color:#FFFFFF}
#sidebar .agent-item.active,#sidebar .agent-item.active-selected-style{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26)}
#sidebar .agent-item.active::before,#sidebar .agent-item.active-selected-style::before{background:#FFFFFF}
#sidebar .roster-empty{color:#FFFFFF;opacity:.7}

#sidebar .sidebar-foot{border-top:1px solid rgba(255,255,255,.1)}
#sidebar .settings-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#FFFFFF;font-weight:800}
#sidebar .settings-btn .settings-caret,#sidebar .settings-btn .settings-ico{color:#FFFFFF}
#sidebar .settings-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
#sidebar .side-foot{border-top:0}
#sidebar .save-pill{color:#FFFFFF;opacity:.7;font-weight:600}
/* the settings menu opens as a light card, readable on its own */
#sidebar .settings-menu{background:#FFFFFF;border:1px solid var(--line);box-shadow:0 24px 50px -18px rgba(0,16,40,.6)}
#sidebar .settings-menu button{color:var(--text);font-weight:600}
#sidebar .settings-menu button:hover{background:var(--panel3);color:var(--hero-navy)}

/* =========================================================== top bar */
.topbar{background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(10,23,48,.02)}
.tab{color:#3C4A63;font-weight:600;border-radius:0;position:relative}
.tab:hover{color:var(--text)}
.tab.active{color:var(--hero-navy);font-weight:800;text-shadow:none}
.tab.active::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2.5px;border-radius:3px 3px 0 0;background:var(--hero-blue)}
.tab .badge{background:#E8EDF5;color:#33435E;font-weight:800}
.tab.active .badge{background:var(--hero-navy);color:#FFFFFF}

/* ======================================================= surfaces */
.panel,.kpi,.ov2-kpi{background:#FFFFFF;border-color:var(--line);box-shadow:0 1px 2px rgba(10,23,48,.05),0 10px 28px -22px rgba(10,23,48,.35)}
.panel{border-radius:16px}
.section-title{color:var(--text);letter-spacing:-.015em}
.ov2-kpi::before{background:linear-gradient(180deg,var(--hero-blue),var(--hero-navy))!important}
.ov2-kpi-v{color:var(--hero-navy)!important;font-weight:900;letter-spacing:-.02em}
.ov2-kpi-k{color:#24324D}
.ov2-kpi-s{color:var(--muted)}

/* the overview hero and team hero: the brand navy, lit from the corner */
.ov2-hero,.td2-hero{
  background:
    radial-gradient(800px 380px at 8% 0%,rgba(64,124,230,.34),transparent 62%),
    radial-gradient(600px 320px at 100% 120%,rgba(29,91,214,.24),transparent 60%),
    linear-gradient(150deg,#00306A 0%,#001F46 52%,#00163A 100%)!important;
  box-shadow:0 24px 50px -28px rgba(0,31,70,.75)!important;border:0!important}
.ov2-hero::after,.td2-hero::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)!important;height:1px!important}

/* buttons that were navy stay navy, a touch richer */
.btn-add{background:linear-gradient(180deg,#0B3473,#001F46);color:#FFFFFF;font-weight:800}

/* the old display face is gone: Inter everywhere, already set via --disp */
.ov2-dream-n{font-family:var(--sans)!important;font-weight:800!important;letter-spacing:-.01em}

/* ===================================================== phone menu bar */
@media (max-width:980px){
  #sidebar.sidebar{box-shadow:24px 0 60px -20px rgba(0,0,0,.5)}
}

/* roster badges on the navy sidebar */
#sidebar .stage-pill{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.28)!important;color:#FFFFFF!important;font-weight:800}
#sidebar .stage-pill::before,#sidebar .stage-pill .dot{background:#FFFFFF!important}
#sidebar .avail-badge{color:#FFFFFF!important;opacity:.78;font-weight:700}
#sidebar .reg-badge{font-weight:800}

/* Inter is wider than the condensed display face the old build used, so a few
   tight rows get room to wrap on a phone instead of running off the edge */
@media (max-width:560px){
  .sysx-hero-r{flex-wrap:wrap;row-gap:14px}
  .sysx-hstats{flex-wrap:wrap;row-gap:10px;column-gap:18px}
  .ov2-jlabel{max-width:96px;letter-spacing:.04em}
}
/* the phone's menu button floats over the top-left of the open drawer */
@media (max-width:980px){
  #sidebar .brand{padding-left:70px;padding-right:16px}
  #sidebar .kw-logo-img{max-width:168px;margin:0}
}