/* We Are Brave — dashboard theme (dark) */

/* Brand typefaces (brand book: Stardos Stencil headlines, Tw Cen MT body) */
@font-face{font-family:"Stardos Stencil";src:url("fonts/StardosStencil-Regular.ttf") format("truetype");font-weight:400}
@font-face{font-family:"Stardos Stencil";src:url("fonts/StardosStencil-Bold.ttf") format("truetype");font-weight:700}
@font-face{font-family:"Tw Cen MT";src:url("fonts/TWCenM.TTF") format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:"Tw Cen MT";src:url("fonts/TWCenMI.TTF") format("truetype");font-weight:400;font-style:italic}
@font-face{font-family:"Tw Cen MT";src:url("fonts/TWCenB.TTF") format("truetype");font-weight:700;font-style:normal}
@font-face{font-family:"Tw Cen MT";src:url("fonts/TWCenBI.TTF") format("truetype");font-weight:700;font-style:italic}

:root{
  --bg:#0F0F0E; --card:#1A1A18; --card-2:#252523;
  --bo:#3C3C3B; --bo-2:#4A4A48;
  --tx:#F5F4F2; --tx-2:#A8A6A0; --tx-3:#6B6B69;
  --co:#ED6E57; --bl:#00A3E0; --gr:#00C085; --pu:#A84ABA; --ye:#FFE05C;
  --ac:#00A3E0; /* lead accent — Decide Brave blue */
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);
  font-family:"Tw Cen MT","Century Gothic","Inter","Helvetica Neue",system-ui,sans-serif;}
#react-entry-point,#_dash-app-content{background:var(--bg)}

.wrap{max-width:1500px;margin:0 auto;padding:0 36px 56px}

/* Header — rainbow accent strip echoing the BRAVE logo fan */
.brave-header{display:flex;align-items:center;justify-content:space-between;
  height:78px;padding:0 36px;background:var(--card);position:relative;margin-bottom:30px}
.brave-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--ye) 0%,var(--co) 28%,var(--pu) 52%,var(--gr) 76%,var(--bl) 100%)}
.brave-logo{background:#fff;border-radius:8px;padding:9px 16px;display:flex;align-items:center;
  cursor:pointer;transition:transform .12s}
.brave-logo:hover{transform:scale(1.02)}
.brave-logo img{height:34px;display:block}
.brave-header-meta{text-align:right}
.brave-header-meta .t1{font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx)}
.brave-header-meta .t2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-3);margin-top:2px}
.brave-header-right{display:flex;align-items:center;gap:24px}
.brave-nav{display:flex;gap:16px}
.brave-nav-link{color:var(--tx-2);font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;cursor:pointer}
.brave-nav-link:hover{color:var(--tx)}
.brave-user .t3{font-size:11px;color:var(--tx-3);letter-spacing:.04em}
.brave-user .t3.strong{color:var(--tx);font-weight:700}

/* Login page */
.login-wrap{min-height:calc(100vh - 100px);display:flex;align-items:center;justify-content:center;padding:30px}
.login-card{background:var(--card);border:1px solid var(--bo);border-radius:10px;
  padding:32px 30px;width:340px;border-top:3px solid var(--ac)}
.login-title{font-family:"Stardos Stencil",Georgia,serif;font-size:24px;font-weight:700;
  color:var(--tx);margin-bottom:18px;text-align:center}
.login-card .lab{font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tx-2);margin-bottom:6px;display:block}
.login-card .inv-input{width:100%!important;display:block!important;
  background:#fff!important;color:#1a1a1a!important;border:1px solid var(--bo);
  border-radius:6px;padding:10px 13px;font-size:14px;margin-bottom:4px;box-sizing:border-box}
.login-card .inv-input:focus{outline:none;border-color:var(--ac)}

/* User management table */
.user-table{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--bo);border-radius:6px;overflow:hidden;margin:8px 0 20px}
.user-table th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:10px 14px;color:var(--tx-3);
  border-bottom:1px solid var(--bo);background:var(--card-2)}
.user-table td{padding:11px 14px;font-size:13px;color:var(--tx);
  border-bottom:1px solid var(--bo)}
.user-table tbody tr:last-child td{border-bottom:none}
.user-table tbody tr:hover td{background:var(--card-2)}
.del-btn{background:transparent;color:var(--co);border:1px solid var(--co);
  border-radius:4px;padding:4px 11px;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer;transition:all .12s}
.del-btn:hover{background:var(--co);color:#fff}

/* Tabs */
.brave-tabs{border-bottom:1px solid var(--bo)!important;margin-bottom:18px}
.brave-tab{background:transparent!important;border:none!important;color:var(--tx-3)!important;
  font-weight:700!important;font-size:13px!important;letter-spacing:.04em;padding:12px 22px!important}
.brave-tab:hover{color:var(--tx-2)!important}
.brave-tab--sel{background:transparent!important;color:var(--tx)!important;
  border:none!important;border-bottom:3px solid var(--ac)!important}

/* Send invites */
.inv-panel{max-width:780px}
.inv-help{color:var(--tx-2);font-size:13px;margin:-2px 0 18px;max-width:700px;line-height:1.6}
.inv-row{display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.inv-field{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.inv-input{background:#ffffff;border:1px solid var(--bo);border-radius:6px;color:#1a1a1a;
  padding:12px 14px;font-size:15px;line-height:1.5;width:100%;display:block;
  min-height:44px;box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-fill-color:#1a1a1a;caret-color:#1a1a1a}
.inv-input::placeholder{color:#999}
.inv-input:focus{outline:none;border-color:var(--ac)}
.inv-textarea{width:100%;min-height:120px;background:var(--card);border:1px solid var(--bo);
  border-radius:6px;color:var(--tx);padding:11px 13px;font-size:13.5px;font-family:inherit;
  margin:6px 0 12px;resize:vertical}
.inv-textarea:focus{outline:none;border-color:var(--ac)}
.inv-status{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.02em;
  padding:6px 12px;border-radius:4px;margin:-6px 0 16px}
.inv-status.ok{background:rgba(0,192,133,0.12);color:var(--gr);border:1px solid rgba(0,192,133,0.4)}
.inv-status.warn{background:rgba(255,224,92,0.10);color:var(--ye);border:1px solid rgba(255,224,92,0.4)}
.inv-preview{font-size:12px;color:var(--tx-2);margin-bottom:14px;word-break:break-all}
.inv-results{margin-top:16px;font-size:13px;line-height:1.6}

/* Controls */
.controls{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.controls .lab{font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-2)}
.dl-btn{margin-left:auto;background:var(--ac);color:#fff;border:none;
  padding:11px 22px;border-radius:6px;font-weight:700;font-size:13px;cursor:pointer;
  letter-spacing:.03em;transition:filter .15s}
.dl-btn:hover{filter:brightness(1.08)}
.dl-status{min-height:18px;font-size:12px;color:var(--tx-2);margin:6px 0 18px}

/* dcc.Dropdown — react-select's default look (white box, dark text). The
   body's `color:var(--tx)` (light) inherits everywhere by default, including
   into the dropdown's SingleValue text — which gave us light-on-white.
   Force dark text on every element inside the dropdown to stop that. */
.brave-dd,
.brave-dd *{color:#1a1a1a!important}
.brave-dd [class*="-control"]{border-radius:6px!important;min-height:40px!important}
.brave-dd [class*="-control"]:hover{border-color:var(--bo-2)!important}
.brave-dd [class*="-control--is-focused"]{
  border-color:var(--ac)!important;
  box-shadow:0 0 0 1px var(--ac)!important;
}

/* Client context header */
.context{display:flex;align-items:baseline;gap:18px;margin:4px 0 18px;flex-wrap:wrap}
.context .ctx-name{font-family:"Stardos Stencil",Georgia,serif;font-size:30px;
  font-weight:700;color:var(--tx);letter-spacing:.01em}
.ctx-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx-2);background:var(--card-2);border:1px solid var(--bo);
  border-radius:999px;padding:4px 12px}

/* KPI cards */
.kpis{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.kpi{flex:1;min-width:170px;background:var(--card);border:1px solid var(--bo);
  border-left:3px solid var(--ac);border-radius:6px;padding:16px 20px;
  transition:transform .12s ease, border-color .15s ease}
.kpi:hover{transform:translateY(-2px)}
/* colour-cycle the KPI accents through the brand palette */
.kpis .kpi:nth-child(1){border-left-color:var(--bl)}
.kpis .kpi:nth-child(2){border-left-color:var(--gr)}
.kpis .kpi:nth-child(3){border-left-color:var(--ye)}
.kpis .kpi:nth-child(4){border-left-color:var(--pu)}

/* Hero row: gauge + KPIs */
.hero{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.hero-gauge{flex:0 0 330px;min-width:300px}
.hero-kpis{flex:1;align-content:flex-start}
.kpi .lab{font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tx-3)}
.kpi .val{font-family:"Tw Cen MT","Century Gothic",sans-serif;font-size:32px;font-weight:700;
  margin-top:4px;line-height:1.05}
.kpi .sub{font-size:12px;color:var(--tx-2);margin-top:3px}

/* Band legend */
.band-legend{display:flex;gap:18px;flex-wrap:wrap;margin:-2px 0 12px;padding-left:11px}
.band-legend .leg{font-size:11px;color:var(--tx-2);display:flex;align-items:center;gap:7px}
.band-legend .dot{width:9px;height:9px;border-radius:2px;display:inline-block}

/* Section labels + chart cards */
.sect{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx-2);margin:28px 0 10px;padding-left:11px;border-left:3px solid var(--ac)}
.grid{display:flex;gap:16px;flex-wrap:wrap}
.panel{flex:1;min-width:430px;background:var(--card);border:1px solid var(--bo);
  border-radius:8px;padding:8px 8px 2px;transition:border-color .15s ease}
.panel:hover{border-color:var(--bo-2)}
.panel.full{flex-basis:100%}

/* Empty / loading states */
.empty{color:var(--tx-3);padding:70px 0;text-align:center;font-size:14px}
.foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--bo);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}

/* Dash loading spinner colour */
._dash-loading-callback,.dash-spinner *{color:var(--ac)!important}