/* === FONTS === */
@font-face { font-family: fn-normal; font-display: swap; src: url(fonts/burbanksmall-medium.woff2) format("woff2"); }
@font-face { font-family: fn-semi; font-weight: 700; font-display: swap; src: url(fonts/burbanksmall-bold.woff2) format("woff2"); }
@font-face { font-family: fn; font-display: swap; src: url(fonts/burbanksmall-black.woff2) format("woff2"); }
@font-face { font-family: fn-title; font-display: swap; src: url(fonts/burbankbigregular-black.woff2) format("woff2"); }
@font-face { font-family: HeadingNowVariable; font-style: normal; font-stretch: normal; font-display: swap; src: url(fonts/HeadingNowVariable.woff2) format("woff2"); }

/* === THEME === */
:root{
  --bottom-nav-height:64px;

  --bg:#0d1014;
  --card:#15171b;
  --card-glass:#15171b;;
  --stroke:#181a20;
  --text:#e6e6f0;
  --muted:#ffffff;
  --primary:#8e78ff;
  --success:#55ffb6;

  /* Progress bar */
  --progress-height:3px;
  --progress-track:rgba(255,255,255,.12);
  --progress-start:rgba(255,96,175,.9);
  --progress-end:rgba(255,255,255,.9);
  --progress-glow:0 0 8px rgba(255,0,157,.6);

  /* Status accent (overridden by data-status) */
  --status-color:#6c757d;
  --status-glow:rgba(108,117,125,.35);
}

html,body{height:100%}
:root{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
@supports (font-variation-settings: normal){:root{font-family:'Inter var',system-ui,sans-serif}}

body{
  background: #0d1014;
  color:var(--text);
  padding-bottom:var(--bottom-nav-height);
  scroll-behavior:smooth;
}
/* optional */
.chip i { opacity:.9; }
#visitorLiveChip { border-color: rgba(142,120,255,.35); }
#visitorTotalChip { border-color: rgba(255,255,255,.18); }

/* Titles */
.page-title{font-family:HeadingNowVariable, sans-serif;font-variation-settings:"wdth" 650,"wght" 725;text-transform:uppercase; font-size: 24px;}
.text-secondary{font-family:fn-semi,fn,fn-normal,system-ui,sans-serif}
.halloween2025{font-family:fn-semi,sans-serif;}
/* Top progress bar */
#fnlbProgress{position:fixed;top:0;left:0;right:0;height:var(--progress-height);background:transparent;z-index:9999;pointer-events:none}
#fnlbProgress .track{width:100%;height:100%;background:var(--progress-track)}
#fnlbProgress .bar{height:100%;width:0%;background:linear-gradient(90deg,var(--progress-start),var(--progress-end));box-shadow:var(--progress-glow)}
@keyframes fnlbProgress{from{width:0%}to{width:100%}}

/* Nav */
.navbar{backdrop-filter:blur(10px);background-color:rgba(7,8,11,.85)!important;border-top:1px solid rgba(255,255,255,.06)}

/* Buttons */
.btn{font-family:HeadingNowVariable,fn-normal,sans-serif;text-transform:uppercase;font-variation-settings:"wdth" 650,"wght" 725}
.btn-primary{background:linear-gradient(135deg,var(--primary),#5c9dff);border:0}
.btn-outline-light{border-color:rgba(255,255,255,.2)}

/* Glass cards */
.card.glass,.glass{
  background:var(--card-glass)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:1rem;
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.card:hover{transform:translateY(-2px);transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 16px 40px rgba(0,0,0,.4)}

/* KPI */
.kpi-dot{width:.6rem;height:.6rem;border-radius:50%;display:inline-block}

/* Inputs */
.glass-select{background:rgba(255,255,255,.06);color:var(--text);border:1px solid rgba(255,255,255,.08)}
.glass-select::placeholder{color:var(--muted)}
.glass-select:focus{border-color:var(--primary);box-shadow:0 0 0 .2rem rgba(142,120,255,.25)}

/* --- Bot card layout + playlist backdrop --- */
.bot-card{position:relative;overflow:hidden}
.bot-card > .card-body{position:relative; z-index:2}

/* Playlist backdrop via CSS var: --playlist-bg: url(...) */
.bot-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background-image: linear-gradient(160deg, rgba(13,13,17,.80), rgba(13,13,17,.92)), var(--playlist-bg, none);
  background-size:cover; background-position:center;
  opacity:.9; transition:opacity .2s ease, transform .2s ease;
  transform:scale(1.02);
  will-change:opacity,transform;
}
.bot-card:hover::after{opacity:1; transform:scale(1.04)}

/* Left status glow bar */
.bot-card::before{
  content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:6px;
  border-radius:1rem 0 0 1rem; background:var(--status-color); box-shadow:0 0 60px var(--status-glow);
  z-index:3;
}
/* Status colors */
.bot-card[data-status="available"]{--status-color:#5b9753;--status-glow:rgba(62,230,162,.99)}
.bot-card[data-status="inuse"]{--status-color:#f5c469;--status-glow:rgba(255,193,7,.99)}
.bot-card[data-status="offline"]{--status-color:#ff566e;--status-glow:rgba(255,86,110,.99)}

/* Row 1: avatar + name (left) | copy (right) */
.bot-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.bot-id{display:flex;align-items:center;gap:.75rem}
.bot-avatar{width:40px;height:40px;object-fit:cover;border:2px solid rgba(255,255,255,.1);box-shadow:0 6px 18px rgba(0,0,0,.35);border-radius:50%}
.account-name{font-family:HeadingNowVariable,sans-serif;font-size:1.15rem;line-height:1.05;text-transform:uppercase;font-variation-settings:"wdth" 650,"wght" 725}

/* Row 2: playlist (LEFT) + party (RIGHT) */
.bot-sub{display:flex; align-items:center; gap:.5rem; margin-top:.35rem; flex-wrap:wrap;}
.bot-sub .sub-left{display:flex; align-items:center; gap:.5rem;}
.bot-sub .sub-right{margin-left:auto; display:flex; align-items:center;}
.chip{
  font-size:.9rem;line-height:1;
  padding:.35rem .6rem;border-radius:.6rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(6px);
  white-space:nowrap;
  font-family:"fn",sans-serif;
}
.chip i{margin-right:.35rem;opacity:.8}
.chip-playlist{color:var(--text);}
.chip-party{}

/* Mini avatar group below */
.avatar-group{display:flex;align-items:center;gap:0;margin-top:.5rem}
.avatar-mini,.avatar-count{
  width:32px;height:32px;border-radius:50%;
  border:2px solid rgba(0, 0, 0);
  box-shadow:0 3px 8px rgba(0,0,0,.35);
  background:rgba(255,255,255,.06);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:700;color:#e6e6f0;
}
.avatar-mini + .avatar-mini,
.avatar-mini + .avatar-count,
.avatar-count + .avatar-mini{margin-left:-8px}
.avatar-count{backdrop-filter:blur(6px);border:2px solid rgba(255,255,255,.15)}

/* Skeleton */
.skeleton{position:relative;overflow:hidden;background:#1a1a22;border-radius:1rem;min-height:132px;border:1px solid rgba(255,255,255,.06)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.25s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* Misc */
.copy-btn{border-radius:10px}
.text-secondary{color:var(--muted)!important}
.party-members{color:rgba(255,255,255,0.4);text-transform: uppercase;font-family: 'fn-semi', sans-serif;font-size: 11px;letter-spacing: 0.5px;}
/* ===============================
   Dark glass UI for dropdowns, inputs, tooltips
   =============================== */
:root{
  --glass-surface: rgba(255,255,255,.06);
  --glass-surface-strong: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.12);
  --glass-shadow: 0 12px 40px rgba(0,0,0,.5);
  --tooltip-bg: rgba(12,12,18,.92);
  --tooltip-border: rgba(255,255,255,.14);
  
}
/* Glass buttons to match the theme */
.btn-glass {
  font-family: "fn", sans-serif;
}
/* Dark glass dropdowns (overrides) */
.dropdown-menu{
  background: linear-gradient( to bottom right, rgba(20,20,28,.82), rgba(12,12,18,.82) );
  color: var(--text);
  border: 1px solid var(--glass-border);
  font-family: "fn-normal", sans-serif;
  box-shadow: var(--glass-shadow);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dropdown-item{ color: var(--text); border-radius: 8px; }
.dropdown-item:hover,.dropdown-item:focus,.dropdown-item.active{
  background: rgba(255,255,255,.10);
  color: var(--text);
  font-family: "fn-normal", sans-serif;
}
.dropdown-divider{ border-top-color: rgba(255,255,255,.08); }

/* Dark glass tooltips */
.tooltip{ z-index: 10050; }
.tooltip.tooltip-glass .tooltip-inner{
  background: rgba(12,12,18,.92);
  color: var(--text);
  font-family: "fn", sans-serif;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--glass-shadow);
  padding: .45rem .6rem;
}
.tooltip.tooltip-glass.bs-tooltip-top .tooltip-arrow::before{ border-top-color: rgba(12,12,18,.92); }
.tooltip.tooltip-glass.bs-tooltip-bottom .tooltip-arrow::before{ border-bottom-color: rgba(12,12,18,.92); }
.tooltip.tooltip-glass.bs-tooltip-start .tooltip-arrow::before{ border-left-color: rgba(12,12,18,.92); }
.tooltip.tooltip-glass.bs-tooltip-end .tooltip-arrow::before{ border-right-color: rgba(12,12,18,.92); }

.btn-dark {
  background:#fff600;
  color:#000;
}

/* ===== Mobile polish (XS/SM) ===== */
@media (max-width: 575.98px) {
  .page-title { font-size: 18px; }
  .halloween2025 { font-size: 14px; }
  .navbar { padding-top: .4rem; padding-bottom: .4rem; }

  /* inputs */
  .glass-select { min-width: 160px; }

  /* cards */
  .card.glass { border-radius: .85rem; }
  .bot-avatar { width: 32px; height: 32px; }
  .account-name { font-size: 1rem; }

  .bot-top { gap: .5rem; }
  .bot-sub { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .bot-sub .sub-right { margin-left: 0; }
  .chip { font-size: .85rem; padding: .3rem .5rem; }

  .avatar-mini, .avatar-count { width: 28px; height: 28px; font-size: .7rem; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .page-title { font-size: 20px; }
  .bot-avatar { width: 36px; height: 36px; }
  .chip { font-size: .9rem; }
}

/* Make the vertical rule subtle in dark UI */
.vr { opacity: .5; }