:root{ --bg:#0e1116; --ink:#e5e7eb; --muted:#9aa4b2; --card:#151a21; --accent:#ff3355; }
html[data-theme="light"]{ --bg:#ffffff; --ink:#111418; --muted:#6b7280; --card:#f4f6f8; }
body{ background:var(--bg); color:var(--ink); font-family:Segoe UI,system-ui,Roboto,sans-serif; }
.hidden{ display:none !important; }
.small-muted{ color:var(--muted); font-size:.85rem; }
.card-soft{ background:var(--card); border:1px solid rgba(255,255,255,.05); border-radius:16px; }
header.app-header{ position:sticky; top:0; z-index:10; background:rgba(21,26,33,.8); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.05); }
header .brand{ display:flex; align-items:center; gap:10px; height:72px; padding:0 12px; }
header .brand img{ width:34px; height:34px; border-radius:8px; }
header .brand h1{ font-size:20px; margin:0; font-weight:700; }

/* Bottom tabbar */
.tabbar{ position:fixed; bottom:0; left:0; right:0; z-index:10; background:rgba(21,26,33,.9); border-top:1px solid rgba(255,255,255,.08); }
.tabbar .nav{ display:flex; justify-content:space-around; gap:4px; padding:6px 8px; }
.tabbar .nav-link{ color:var(--muted); text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 8px; border-radius:12px; }
.tabbar .nav-link.active{ color:var(--ink); background:rgba(255,255,255,.06); box-shadow:0 8px 24px rgba(0,0,0,.25) inset; }
.tabbar i{ font-size:20px; }

main{ padding:12px; padding-bottom:80px; }

/* Lists */
.set-row{ display:grid; grid-template-columns:auto 1fr auto 1fr auto; gap:8px; align-items:center; }
.list-group-item{ background:var(--card); color:var(--ink); border:1px solid rgba(255,255,255,.06); }
.modal-content{ background:var(--card); color:var(--ink); border:1px solid rgba(255,255,255,.08); }
.modal-header,.modal-footer{ border-color:rgba(255,255,255,.08); }
.form-control, .form-select{ background:rgba(255,255,255,.06); color:var(--ink); border:1px solid rgba(255,255,255,.12); }
.form-control::placeholder{ color:var(--muted); }
.btn{ border-radius:12px; }

/* Glow for new posts */
.feed-card{ border-radius:16px; padding:12px; margin-bottom:8px; }
.feed-card.new{ animation:pulseGlow 2.5s infinite ease-in-out; box-shadow:0 0 10px var(--user-color,#ff3355); }
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 0 6px var(--user-color,#ff3355);} 50%{ box-shadow:0 0 16px var(--user-color,#ff3355);} }

.story-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 2px;
    background: var(--accent, #ff3355);
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}
.feed-card.glow-new .story-ring {
    box-shadow: 0 0 12px var(--accent, #ff3355);
}


.kpis{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kpi{ background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:12px; }
.kpi .v{ font-size:24px; font-weight:800; }


.glow-new {
    --glow: var(--user-color, #ff3355);
    animation: glowPulse 1.8s ease-in-out infinite alternate;
    box-shadow: 0 0 12px var(--glow) !important;
    border: 1px solid var(--glow) !important;
}

@keyframes glowPulse {
    from {
        box-shadow: 0 0 6px var(--glow, rgba(255,255,255,0.3));
    }
    to {
        box-shadow: 0 0 16px var(--glow, rgba(255,255,255,0.8));
    }
}

/* Small buttons in workouts */
.workout-actions .btn{ padding:4px 8px; font-size:.85rem; }

/* Map viewer */
#mapWrap{ position:relative; overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,.06); }
#gymMap{ width:100%; transform-origin:0 0; touch-action:none; user-select:none; }


/* === Beta Fixed 2: UI polish === */

/* Brand logo scales by height */
header .brand img{ height:34px; width:auto; aspect-ratio:auto; border-radius:8px; }

/* Compact tabbar */
.tabbar .nav{ padding:4px 6px; }
.tabbar .nav-link{ padding:4px 6px; gap:2px; }
.tabbar i{ font-size:18px; }

/* Light mode header/tabbar lighter */
html[data-theme="light"] header.app-header,
html[data-theme="light"] .tabbar{
  background: rgba(255,255,255,.9);
  border-color: rgba(0,0,0,.05);
}
html[data-theme="light"] .tabbar .nav-link.active{
  background: rgba(0,0,0,.05);
}

/* History dark mode fixes */
#pane-history .card-soft{ background:var(--card); color:var(--ink); border-color:rgba(255,255,255,.08); }
#pane-history .small-muted{ color:var(--muted); }
#pane-history .badge{ background:rgba(255,255,255,.06); color:var(--ink); border-color:rgba(255,255,255,.1); }


/* === beta-fixed6 additions === */
.brand-logo{ height:40px; width:auto; object-fit:contain; }

.feed-tabs{ display:flex; gap:6px; }
.btn-tab{ flex:1; background:var(--card); color:var(--ink); border:none; font-weight:500; border-radius:8px; padding:6px 10px; }
.btn-tab.active{ background:var(--accent); color:#fff; }
.btn-tab i{ vertical-align:middle; }

/* Dark mode for history cards */
[data-theme="dark"] #pane-history .card-soft{ background:#1e2229; color:#6e6e6f; }
[data-theme="dark"] #pane-history .small-muted{ color:#cfd6dd !important; }


/* === beta-fixed9 additions === */
.brand-logo{height:40px;width:auto;object-fit:contain;}
.feed-tabs{display:flex;gap:6px;}
.btn-tab{flex:1;background:var(--card);color:var(--ink);border:none;font-weight:500;border-radius:8px;padding:6px 10px;}
.btn-tab.active{background:var(--accent);color:#fff;}
.btn-tab i{vertical-align:middle;}
[data-theme="dark"] #pane-history .card-soft{background:#1e2229;color:#777777;}
[data-theme="dark"] #pane-history .small-muted{color:#cfd6dd!important;}

.feed-card button[data-show-result] {
  font-size: 13px;
  padding: 4px 10px;
}
.feed-card .card-soft {
  background-color: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.hidden { display: none !important; }
.toast-msg {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg, #222);
  color: var(--text, #fff);
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity .3s, bottom .3s;
  z-index: 9999;
  font-size: 14px;
}
.toast-msg.show {
  opacity: 1;
  bottom: 40px;
}

/* === Ultra-Compact Tabbar (beta-fixed10) === */

/* totale hoogte minder */
.tabbar {
    height: 50px; /* was 54–64 */
    padding: 0;
}

/* nav binnenin */
.tabbar .nav {
    padding: 2px 4px !important; /* was 4–6 */
    gap: 2px !important;
}

/* knoppen zelf */
.tabbar .nav-link {
    padding: 2px 4px !important;  /* was 4–6 */
    gap: 1px !important;          /* icon + label minder ruimte */
    border-radius: 10px !important;
    font-size: 11px;
}

/* iconen kleiner maar leesbaar */
.tabbar i {
    font-size: 16px !important; /* was 18–20 */
    line-height: 1;
}

/* active state subtieler */
.tabbar .nav-link.active {
    background: rgba(255,255,255,0.05) !important;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.25) !important;
}
/* === Floating Pill Tabbar (beta-floating1) === */

/* container */
.tabbar {
    position: fixed;
    bottom: 12px;              /* zweeft 12px boven de rand */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);  /* mooie marges links/rechts */
    max-width: 550px;          /* mooi voor grotere schermen */
    background: rgba(21, 26, 33, 0.85);
    backdrop-filter: blur(12px);
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.08);
    padding: 6px 8px !important;
    z-index: 20;
}

/* light mode */
html[data-theme="light"] .tabbar {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.06);
}

/* nav inside */
.tabbar .nav {
    padding: 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* each button */
.tabbar .nav-link {
    flex: 1;
    padding: 6px 4px !important;
    gap: 2px !important;
    text-align: center;
    border-radius: 14px;
    color: var(--muted);
    font-size: 11px;
}

/* icon size */
.tabbar i {
    font-size: 18px !important;
}

/* active button */
.tabbar .nav-link.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* verwijder oude border boven */
.tabbar {
    border-top: none !important;
}



/* hoofdcontent niet door bar laten overlappen */
main {
    padding-bottom: 110px !important;
}

/* === Fix ugly active highlight inside floating pill tabbar === */
.tabbar .nav-link {
    position: relative;
    overflow: hidden;
}

.tabbar .nav-link:active,
.tabbar .nav-link:focus,
.tabbar .nav-link:focus-visible,
.tabbar .nav-link:visited {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.tabbar .nav-link:active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}

/* Auto logo-switch depending on theme */
html[data-theme="dark"] #appLogo {
    content: attr(data-dark);
}

html[data-theme="light"] #appLogo,
html[data-theme="auto"] #appLogo {
    content: attr(data-light);
}

/* Safari/Chrome fix */
#appLogo {
    content: attr(src);
}
/* --- ICON ONLY ACTIVE GLOW (user color) --- */

/* verwijder achtergrond van active tab */
.tabbar .nav-link.active {
    background: transparent !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    border: none !important;
}

/* icoontje zelf in user kleur */
.tabbar .nav-link.active i {
    color: var(--accent) !important;
}

/* zachte glow alleen rond icoon */
.tabbar .nav-link.active i {
    text-shadow: 
        0 0 6px var(--accent),
        0 0 10px var(--accent),
        0 0 14px var(--accent);
}

/* geen glow op label */
.tabbar .nav-link.active span,
.tabbar .nav-link.active .label {
    color: var(--ink) !important;
}

/* tik-feedback blijft subtiel */
.tabbar .nav-link:active::after {
    background: rgba(255,255,255,0.06);
}

/* Match brand width met appView */
header .brand {
    max-width: 1320px;     /* zelfde als #appView */
    width: 100%;
    margin: 0 auto;
}


/* Maak alle sluit-kruisjes in modals/tabbladen de gebruiker-kleur */
.btn-close {
  --bs-btn-close-bg: none;
  background: transparent;
  opacity: .9;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.btn-close::before,
.btn-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 2px;
  background: var(--accent, #ff3355);
  transform-origin: center;
}
.btn-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.btn-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.btn-close:focus{
  box-shadow: 0 0 0 2px var(--accent, #ff3355);
  outline: none;
}


/* Primaire knoppen laten meekleuren met user-accent */
.btn-primary {
  background-color: var(--accent, #ff3355);
  border-color: var(--accent, #ff3355);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent, #e02050);
  border-color: var(--accent, #e02050);
}
.btn-outline-primary {
  color: var(--accent, #ff3355);
  border-color: var(--accent, #ff3355);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background-color: var(--accent, #ff3355);
  border-color: var(--accent, #ff3355);
}


/* Accent button using user color */
.btn-accent{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-accent:hover,
.btn-accent:focus{
  background: var(--accent);
  border-color: var(--accent);
  filter: brightness(1.08);
  color:#fff;
}


.avatar-glow{
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 0 16px var(--accent);
}
html[data-theme="light"] .avatar-glow{
  box-shadow: 0 0 0 2px rgba(0,0,0,.06), 0 0 12px rgba(0,0,0,.25);
}