/* =========================================================
   90MIN DASHBOARD — main.css
   Design tokens + base layout (desktop-scaled-up, mobile owns defaults)
   ========================================================= */

:root{
  /* --- surfaces --- */
  --bg:            #0A0D12;
  --bg-elevated:   #10141B;
  --surface:       #151A22;
  --surface-hi:    #1C222C;
  --border:        #232A37;
  --border-soft:   #1A2029;

  /* --- text --- */
  --text:          #EDEFF3;
  --text-muted:    #8B93A3;
  --text-faint:    #565F70;

  /* --- brand / signal colors --- */
  --blue:          #2F6FED;   /* IFK blue — primary brand */
  --blue-dim:      #16294F;
  --orange:        #F5A623;   /* developing / transfer signal */
  --orange-dim:    #3A2B12;
  --green:         #33C481;   /* confirmed */
  --green-dim:     #123023;
  --yellow:        #E8C547;   /* rumour */
  --red:           #E5484D;   /* alerts / danger */

  /* --- type --- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* --- shape --- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;

  /* --- layout --- */
  --topbar-h: 56px;
  --bottomnav-h: 62px;
  --sidebar-w: 232px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y: none;
}
h1,h2,h3{ font-family:var(--font-display); margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; }
input{ font-family:inherit; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--blue-dim); color:var(--text); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ===== APP SHELL ===== */
#app{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.hidden{ display:none !important; }

.offline-banner{
  background:var(--orange);
  color:#1A1200;
  font-size:12.5px;
  font-weight:600;
  text-align:center;
  padding:6px 12px;
}

/* ===== TOP BAR ===== */
.topbar{
  height:var(--topbar-h);
  padding-top:var(--safe-top);
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:12px;
  padding-right:12px;
  border-bottom:1px solid var(--border-soft);
  background:var(--bg-elevated);
  position:sticky;
  top:0;
  z-index:40;
}

.brand{
  display:flex;
  align-items:baseline;
  font-family:var(--font-display);
  font-weight:700;
  flex-shrink:0;
  gap:1px;
}
.brand-mark{ color:var(--blue); font-size:19px; }
.brand-word{ color:var(--text); font-size:14px; letter-spacing:0.06em; margin-left:3px; }

.icon-btn{
  background:transparent;
  border:none;
  color:var(--text-muted);
  width:34px;
  height:34px;
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  flex-shrink:0;
  cursor:pointer;
}
.icon-btn:hover{ background:var(--surface-hi); color:var(--text); }
.icon-btn .dot{
  position:absolute;
  top:6px; right:6px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--red);
  border:1.5px solid var(--bg-elevated);
}

.global-search{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:0 12px;
  height:34px;
  color:var(--text-faint);
  position:relative;
}
.global-search input{
  border:none;
  background:transparent;
  outline:none;
  color:var(--text);
  font-size:13.5px;
  width:100%;
}
.global-search input::placeholder{ color:var(--text-faint); }

.search-suggestions{
  position:absolute;
  top:calc(100% + 6px);
  left:0; right:0;
  background:var(--surface-hi);
  border:1px solid var(--border);
  border-radius:var(--radius);
  max-height:320px;
  overflow-y:auto;
  z-index:60;
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
}
.suggestion-item{
  padding:10px 12px;
  font-size:13px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  border-bottom:1px solid var(--border-soft);
}
.suggestion-item:last-child{ border-bottom:none; }
.suggestion-item:hover{ background:var(--surface); }
.suggestion-type{ color:var(--text-faint); font-size:11px; text-transform:uppercase; letter-spacing:0.04em; }

.topbar-actions{ display:flex; gap:4px; flex-shrink:0; }

.demo-banner{
  background:var(--blue-dim);
  color:#B7CBFF;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-align:center;
  padding:5px;
  font-weight:600;
}

/* ===== SHELL / LAYOUT ===== */
.shell{
  flex:1;
  display:flex;
  min-height:0;
  width:100%;
}

.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  border-right:1px solid var(--border-soft);
  background:var(--bg-elevated);
  display:none;
  flex-direction:column;
  justify-content:space-between;
  padding:14px 10px;
}
.sidebar-nav{ display:flex; flex-direction:column; gap:2px; }
.sidebar-footer{ display:flex; flex-direction:column; gap:10px; }

.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  font-size:13.5px;
  font-weight:500;
  cursor:pointer;
  border:none;
  background:transparent;
  width:100%;
  text-align:left;
}
.nav-item svg{ flex-shrink:0; opacity:0.85; }
.nav-item:hover{ background:var(--surface); color:var(--text); }
.nav-item.active{ background:var(--blue-dim); color:#BFD2FF; }

.provider-pill{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-faint);
  border:1px solid var(--border);
  border-radius:999px;
  padding:5px 10px;
  text-align:center;
}

.btn-ghost{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:8px 10px;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
}
.btn-ghost:hover{ background:var(--surface-hi); }
.btn-ghost.small{ font-size:12px; padding:7px 9px; }

.main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.dashboard-header{
  padding:14px 14px 8px;
}
.dashboard-title-row{
  display:flex;
  align-items:center;
  gap:8px;
}
#dashboard-title{ font-size:20px; }

.trending-ticker{
  margin-top:8px;
  display:flex;
  gap:16px;
  overflow-x:auto;
  scrollbar-width:none;
  font-family:var(--font-mono);
  font-size:11.5px;
  padding-bottom:2px;
}
.trending-ticker::-webkit-scrollbar{ display:none; }
.ticker-item{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-muted);
  white-space:nowrap;
}
.ticker-rank{ color:var(--text-faint); }
.ticker-name{ color:var(--text); }
.ticker-up{ color:var(--green); }