:root{
  --bg:#0b0f14;
  --panel:#0f1620cc;
  --panel2:#0c121acc;
  --text:#e6eef8;
  --muted:#9fb0c4;
  --red:#ff1e2d;
  --red2:#ff4b57;
  --border: rgba(255,255,255,.08);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
}

html,body{height:100%;
  background-repeat: no-repeat;
  background-size: 100% 520px;
  background-color: #070a0f;
}
body{
  background-color: var(--bg);
  background-image:
    radial-gradient(1000px 500px at 20% 0%, rgba(255,30,45,.18), transparent 60%),
    radial-gradient(900px 450px at 80% 10%, rgba(255,30,45,.12), transparent 55%);
  background-repeat: no-repeat;
  background-size: 100% 560px, 100% 560px;
  background-position: left top, right top;
  color: var(--text);
}

/* Ensure no unexpected dark/black text from defaults */
.table, .table th, .table td, .form-label, .dropdown-menu { color: var(--text); }
.form-text{color: var(--muted)!important;}
.text-muted{color: var(--muted)!important;}
input::placeholder, textarea::placeholder{color: rgba(230,238,248,.55)!important;}


a{color: var(--text);}
a:hover{color: #fff; text-decoration: none;}
.text-muted{color: var(--muted)!important;}

.navbar{
  background: rgba(8,12,18,.78)!important;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.brand-dot{
  width:10px;height:10px;border-radius:50%;
  background: var(--red); display:inline-block; margin-right:8px;
  box-shadow: 0 0 16px rgba(255,30,45,.9);
}
.btn-f1{
  background: linear-gradient(135deg, var(--red), var(--red2));
  border: 0;
  color:#fff;
  box-shadow: 0 12px 30px rgba(255,30,45,.22);
}
.btn-f1:hover{filter: brightness(1.05);}
.card-glass{
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.hero{
  position: relative;
  overflow:hidden;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(11,15,20,.92), rgba(11,15,20,.35), rgba(11,15,20,.82));
}
.hero img{width:100%; height: clamp(360px, 48vh, 520px); object-fit: cover; filter: saturate(1.1) contrast(1.05);} 
.hero .hero-content{
  position:absolute; inset:0;
  z-index:2;
  display:flex; align-items:center;
  padding: 26px;
}
@media (max-width: 576px){
  .hero{min-height:560px;}
  .hero img{position:absolute; inset:0; height:100%;}
  .hero .hero-content{position:relative; inset:auto; padding: 18px; align-items:flex-start;}
}

.race-card{
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(15,22,32,.45);
}

@media (max-width: 576px){
  .hero .hero-content{padding: 18px; align-items:flex-start;}
  .display-6{font-size: 1.6rem;}
}
.badge-f1{
  background: rgba(255,30,45,.15);
  border: 1px solid rgba(255,30,45,.35);
  color: #ffd8db;
}
.table-darkish{
  --bs-table-bg: rgba(15,22,32,.55);
  --bs-table-color: var(--text);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  border-color: var(--border);
}
.form-control, .form-select{
  background: rgba(12,18,26,.8);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.10);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(255,30,45,.55);
  box-shadow: 0 0 0 .2rem rgba(255,30,45,.18);
}
small.help{color: var(--muted);}

.footer{
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding: 22px 0;
  margin-top: 40px;
}

/* Small icon buttons (admin/users) */
.btn-icon{
  width:40px;
  height:36px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.kpi{
  display:flex; gap:14px; flex-wrap:wrap;
}
.kpi .kpi-item{
  flex:1 1 170px;
  padding:14px 16px;
  border-radius: 16px;
  border:1px solid var(--border);
  background: rgba(15,22,32,.45);
}
.kpi .kpi-item .num{font-size: 1.35rem; font-weight: 800;}
.kpi .kpi-item .lbl{color: var(--muted); font-size: .9rem;}

.race-card{
  padding:14px 16px;
  border-radius: 18px;
  border:1px solid var(--border);
  background: rgba(15,22,32,.45);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* Mobile overflow fixes */
main, .container{overflow-x:hidden;}
table{table-layout: fixed;}
th, td{word-break: break-word;}

.pulse{
  width:10px;height:10px;border-radius:50%; background: var(--red);
  box-shadow: 0 0 0 rgba(255,30,45,.7);
  animation: pulse 1.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,30,45,.55)}
  70%{box-shadow:0 0 0 12px rgba(255,30,45,0)}
  100%{box-shadow:0 0 0 0 rgba(255,30,45,0)}
}


/* ================================
   MOBILE UI POLISH (titles/buttons/navbar)
   ================================ */

@media (max-width: 768px){
  /* Navbar toggler must stay compact */
  .navbar .navbar-toggler{
    width:auto !important;
    margin:0 !important;
    padding:.35rem .55rem !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* Top bar (titel + actieknop) netjes onder elkaar */
  .page-topbar{
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .page-topbar > h1{
    flex: 1 1 100% !important;
  }
  .page-topbar > a.btn,
  .page-topbar > button.btn{
    width:auto !important;
    padding:.35rem .6rem !important;
    font-size:.92rem !important;
    border-radius:.85rem !important;
    margin-left:auto !important;
    white-space:nowrap !important;
  }

  /* voorkom horizontale scroll door tables op mobiel (we tonen cards) */
  .table-responsive{ overflow-x:auto; }
}


/* Alerts readability */
.alert.alert-success{background:rgba(0,200,120,.14)!important;color:#d7ffe9!important;border:1px solid rgba(0,200,120,.25)!important;}
.alert.alert-danger{background:rgba(255,0,60,.14)!important;color:#ffd7e1!important;border:1px solid rgba(255,0,60,.25)!important;}
.alert.alert-info{background:rgba(90,160,255,.14)!important;color:#d7e7ff!important;border:1px solid rgba(90,160,255,.25)!important;}
.alert.card-glass{backdrop-filter: blur(10px);}

/* Prevent header action buttons from stretching on mobile */
.d-flex.justify-content-between.align-items-center.mb-3{flex-wrap:wrap;gap:.75rem;}
.d-flex.justify-content-between.align-items-center.mb-3 > a.btn,
.d-flex.justify-content-between.align-items-center.mb-3 > .btn{flex:0 0 auto;white-space:nowrap;}

/* Standings podium */
.podium{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:16px;}
@media(min-width:768px){.podium{grid-template-columns:repeat(3,1fr);}}
.podium .pod{position:relative;padding:14px;border-radius:18px;overflow:hidden;}
.podium .place{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);}
.podium .name{font-weight:800;font-size:22px;line-height:1.1;margin-top:6px;}
.podium .pts{margin-top:8px;color:rgba(255,255,255,.75);}
.podium .icon{position:absolute;right:12px;top:12px;font-size:28px;opacity:.95;}
.podium .pod.p1{border:1px solid rgba(255,215,0,.28);background:linear-gradient(180deg, rgba(255,215,0,.14), rgba(15,20,25,.65));}
.podium .pod.p2{border:1px solid rgba(200,200,200,.22);background:linear-gradient(180deg, rgba(200,200,200,.12), rgba(15,20,25,.65));}
.podium .pod.p3{border:1px solid rgba(205,127,50,.25);background:linear-gradient(180deg, rgba(205,127,50,.12), rgba(15,20,25,.65));}

/* Card list actions */
.card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.card-actions .btn{min-width:140px;}


/* PWA install banner */
.installbar{position:fixed;left:0;right:0;bottom:0;z-index:9999;padding:12px 12px 16px;background:rgba(10,12,16,.92);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12)}
.installbar.hidden{display:none}
.installbar__inner{max-width:1100px;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between}
.installbar__text{min-width:0}
.installbar__title{font-weight:800;letter-spacing:.2px}
.installbar__sub{opacity:.85;font-size:13px}
.installbar__actions{display:flex;gap:10px;flex-shrink:0}
@media (max-width:560px){
  .installbar__inner{flex-direction:column;align-items:stretch}
  .installbar__actions{width:100%}
  .installbar__actions .btn{flex:1}
}


/* Driver logo behind acronym (F1-style) */
.driver-cell{display:flex;align-items:center;gap:10px;}
.driver-cell .driver-text{position:relative; z-index:2; font-weight:700; letter-spacing:.5px;}
.driver-cell .driver-cell{
  display:flex;
  align-items:center;
  gap:10px;
}
.driver-logo{
  width:30px;
  height:30px;
  object-fit:contain;
  flex:0 0 auto;
  filter:none;
}
.driver-code{
  font-weight:700;
  letter-spacing:.06em;
}

/* Mobile: keep logo next to code */
@media(max-width:576px){
  .driver-logo{ width:28px; height:28px; }
  .driver-cell{ gap:8px; }
}
.driver-cell .driver-logo{background-size: 56px 56px;}
}

/* Navbar spacing + mobile menu clarity */
.navbar-nav .nav-link{padding:.6rem .9rem;}
@media(min-width:992px){
  .navbar-nav .nav-item{margin-right:.35rem;}
  .navbar-nav .nav-link{border-radius:12px;}
}
@media(max-width:991.98px){
  .navbar-collapse{margin-top:10px;}
  .navbar-nav .nav-link{
    padding: 14px 14px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .navbar-nav .nav-item:first-child .nav-link{border-top:0;}
}

/* Scroll-to-top lower */
#scrollTopBtn{right:16px; bottom:14px;}

.btn-logout{border-radius:14px; padding:.42rem .8rem;}


/* KPI icons */
.kpi .lbl{display:flex; align-items:center; gap:8px;}
.kpi-ico{display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:999px; opacity:.9;}
.kpi-item.kpi-bonus .kpi-ico{border-color: rgba(255,210,80,.35);}


.driver-mini{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(0,0,0,.35));flex:0 0 auto;}

.compound-letter{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:6px;border:1px solid rgba(255,255,255,.2);font-weight:700;font-size:12px;line-height:1;padding:0 6px;margin-left:6px;opacity:.85;}

.mini-rule{border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 14px;background:rgba(0,0,0,.18);height:100%;}
.mini-rule-score{font-weight:900;font-size:18px;line-height:1;margin-bottom:4px;}
.mini-rule-label{font-size:13px;opacity:.85;}
.prize-box{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px;background:rgba(0,0,0,.18);height:100%;display:flex;align-items:center;justify-content:space-between;}
.prize-place{font-weight:700;}
.prize-pct{font-weight:900;font-size:22px;}


/* Navbar buttons */
.navbar .nav-link.btn-nav{
  padding:.45rem .8rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:.6rem;
  margin:0 .15rem;
}
.navbar .nav-link.btn-nav:hover{border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04);}
.navbar .nav-link.btn-nav.active{border-color:rgba(255,59,92,.55); box-shadow:0 0 0 2px rgba(255,59,92,.12) inset;}

/* Live table: disable ghost logo behind */
.driver-cell .points-pill{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:.1rem .5rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);font-weight:700;}
.prize-card{border:1px solid rgba(255,255,255,.14);}
.prize-pct{font-weight:800;}
.prize-1{box-shadow:0 0 0 1px rgba(255,215,0,.18) inset;}
.prize-2{box-shadow:0 0 0 1px rgba(192,192,192,.18) inset;}
.prize-3{box-shadow:0 0 0 1px rgba(205,127,50,.18) inset;}


/* Nav buttons */
.navbar .nav-link{padding:.55rem .9rem;border:1px solid rgba(255,255,255,.08);border-radius:10px;margin:0 .25rem;color:rgba(255,255,255,.85);} 
.navbar .nav-link:hover,.navbar .nav-link:focus{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#fff;}
.navbar .nav-link.active{border-color:rgba(255,60,60,.35);box-shadow:0 0 0 1px rgba(255,60,60,.12) inset;}
@media (max-width: 991px){.navbar .nav-link{display:block;margin:.35rem 0;padding:.75rem 1rem;}}

/* Live table: prevent logo wrapping on mobile */
.live-table td:nth-child(2){white-space:nowrap;}
@media (max-width: 576px){.driver-cell{gap:8px;}.driver-mini{width:22px;height:22px;}}



/* Ensure text in glass cards is always readable (Bootstrap .card defaults can override) */
.card-glass, .card.card-glass{ color: var(--text) !important; }
.card-glass h1, .card-glass h2, .card-glass h3, .card-glass h4, .card-glass h5,
.card.card-glass h1, .card.card-glass h2, .card.card-glass h3, .card.card-glass h4, .card.card-glass h5{
  color: var(--text) !important;
}
.card-glass{ overflow:hidden; }

/* Mobile nav: make items feel like buttons (spacing + hit area) */
@media (max-width: 991.98px){
  .navbar-collapse{ padding: .75rem 0; }
  .navbar-nav .nav-link{
    padding: 12px 14px;
    margin: 6px 0;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
  }
  .navbar-nav .nav-link:hover{
    background: rgba(255,255,255,.06);
  }
}