/* =========================================================
   CoachOne — Global Styles (Compact, Fixed Sidebar) — v1.6.2
   - Sidebar altijd zichtbaar (fixed)
   - Topbar glas/transparant (matching achtergrond)
   - Abonnement-banner overal hard uit (zonder rest-ruimte)
   - Dashboard split 75% / 25% + mini-tabs
   - Update: teamlogo 1 cm naar beneden (sidebar header padding-top)
   - Nieuw: Dark Select (native <select> + opties in dark theme)
   ========================================================= */

/* ---------- Root & Reset ---------- */
:root{
  --co-font: 'Helvetica Neue', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --co-bg: #0f1730;
  --co-text: #e8edff;
  --co-muted: rgba(232,237,255,.75);

  --co-brand: #0b1220;      /* Sidebar background */
  --co-brand-2: #072940;    /* Accent dark */
  --co-accent: #365cff;     /* Primary */
  --co-accent-2: #00AEEF;   /* Secondary */
  --co-gold: #ffc72c;

  --co-surface: rgba(255,255,255,.06);
  --co-surface-2: rgba(255,255,255,.04);
  --co-border: rgba(255,255,255,.12);
  --co-border-strong: rgba(255,255,255,.18);

  --sidebar-w: 270px;
  --topbar-h: 44px;         /* compact */
  --divider-top: 0px;

  --radius: 12px;
  --shadow: 0 4px 18px rgba(0,0,0,.25);

  --brand-narrow: 28px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family:var(--co-font);
  color:var(--co-text);
  background:var(--co-bg);
  overflow-x:hidden;
}

.text-muted{ color:var(--co-muted) !important; }
.text-white{ color:#fff !important; }

/* =========================================================
   LAYOUT: Sidebar (fixed) + Content rechts
   ========================================================= */

.sidebar,
.sidebar-wrapper{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar-w);
  background:var(--co-brand);
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:0 12px 12px;
  z-index:1000;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border-right:1px solid rgba(255,255,255,.12);

  transform:none !important;
  opacity:1 !important;
  visibility:visible !important;
  left:0 !important;
}
.sidebar-wrapper::before,
.sidebar-wrapper::after{ content:none !important; display:none !important; }

/* Verberg native scrollbars (zonder layout-shift) */
.sidebar, .sidebar-wrapper{
  -ms-overflow-style:none;
  scrollbar-width:none;
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
}
.sidebar::-webkit-scrollbar,
.sidebar-wrapper::-webkit-scrollbar{ width:0; height:0; display:none; background:transparent; }

/* Content rechts van de sidebar */
.main-content,
.page-content{
  margin-left:var(--sidebar-w);
  min-height:100vh;
  padding:12px 14px 20px; /* compact */
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(54,92,255,.16), rgba(54,92,255,0)),
    url('/assets/images/bg-themes/body-background-1.webp') center center / cover no-repeat fixed,
    var(--co-bg);
  background-attachment:fixed;
  color:var(--co-text);
}

/* Scrollbars onzichtbaar overal */
html, body, .page-content, .main-content{ -ms-overflow-style:none; scrollbar-width:none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.page-content::-webkit-scrollbar,
.main-content::-webkit-scrollbar{ width:0; height:0; display:none; background:transparent; }

/* PerfectScrollbar rails uit */
.ps, .ps__rail-y, .ps__rail-x, .ps__thumb-y, .ps__thumb-x,
.ps--active-y > .ps__rail-y, .ps--active-x > .ps__rail-x{
  display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}

/* =========================================================
   SIDEBAR — Branding, divider, menu & footer
   ========================================================= */

.sidebar-top,
.sidebar-header{
  display:flex; flex-direction:column; align-items:center;
  padding-top:24mm; /* was 14mm — logo 1 cm naar beneden */
  padding-bottom:8px;
}

@media (min-width:1024px){
  .sidebar .sidebar-header,
  .sidebar .sidebar-top{
    box-sizing:border-box !important;
    width:calc(var(--sidebar-w) - var(--brand-narrow)) !important;
    max-width:calc(var(--sidebar-w) - var(--brand-narrow)) !important;
    min-width:calc(var(--sidebar-w) - var(--brand-narrow)) !important;
    flex:0 0 calc(var(--sidebar-w) - var(--brand-narrow)) !important;
    margin-left:auto !important; margin-right:auto !important;
    padding-left:0 !important; padding-right:0 !important;
    overflow:hidden !important; transition:none !important;
  }
  .sidebar .sidebar-header > *{ max-width:100% !important; }
}

.sidebar-header .logo,
.team-logo{
  width:88px; height:88px; margin:0 0 8px 0; display:block;
  object-fit:contain; background:transparent !important;
}
.sidebar-header .team,
.team-name{
  font-weight:800; font-size:1.08rem; color:#fff; text-align:center; line-height:1.15; margin:0; text-shadow:none;
}

.sidebar__divider{ height:1px; width:100%; background:rgba(255,255,255,.12); margin:14px 0 0 0; }

/* Menu positie */
.sidebar-nav{ padding-top:30mm !important; padding-bottom:8px; }

/* MetisMenu */
.metismenu{ padding-left:0; margin:0; }
.metismenu a{
  border-radius:10px; padding:10px 12px; color:rgba(255,255,255,.95);
  display:flex; align-items:center; gap:12px; font-weight:600;
  transition:background .2s, color .2s;
}
.metismenu a i{ font-size:1.25rem; color:#9fb4ff; }
.metismenu a:hover{ background:var(--co-surface); color:#fff; }
.metismenu .mm-active > a{ background:rgba(147,176,255,.18); color:#fff; }

/* Footer / Uitloggen */
.sidebar-footer{
  margin-top:auto; padding-top:12px; border-top:1px dashed rgba(255,255,255,.12);
}
.sidebar-footer a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  color:rgba(255,255,255,.95);
  background:rgba(255,255,255,.06);
  border:1px solid var(--co-border);
  text-decoration:none; font-weight:700;
  transition:background .2s, border-color .2s;
}
.sidebar-footer a:hover{ background:rgba(255,255,255,.12); border-color:var(--co-border-strong); }
.sidebar-footer a i{ font-size:1.25rem; color:#ff8c8c; }

/* =========================================================
   TOPBAR (glas/transparant), brand gecentreerd
   ========================================================= */

.co-topbar{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:10px;

  height:var(--topbar-h);
  min-height:var(--topbar-h);
  padding:8px 6px 10px;
  margin-bottom:12px;

  border-bottom:0 !important;
  box-shadow:none !important;

  /* >>> Transparant (geen donkere balk) <<< */
  background:transparent;
}

.co-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.co-center{ display:flex; align-items:center; justify-content:center; min-width:0; padding:0 4px; }
.co-right{ display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }

/* Zoeken compact – lichte glaslook */
.co-search{ max-width:340px; display:flex; align-items:center; gap:8px; }
.co-search i{ font-size:1.05rem; color:#a8b7ff; }
.co-search input{
  width:100%;
  height:36px; line-height:36px;
  padding:0 10px; font-size:.9rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(26,34,56,.45); /* glas/transparant */
  color:#e8edff; outline:0;
  caret-color:#e8edff;
}

/* Brand midden (SVG of IMG) */
.brand-link{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.brand-svg{ color:#ffffff; display:inline-flex; line-height:0; }
.brand-svg svg{ height:32px; width:auto; display:block; }   /* compact */
.brand-img{ height:32px; width:auto; display:block; filter:invert(1) brightness(2); background:transparent !important; }

/* Actieknoppen rechts compact */
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#e8edff;
}
.btn-icon i{ font-size:1.05rem; }

.btn-profile{
  display:flex; align-items:center; gap:10px; padding:6px 10px;
  border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:#e8edff; font-weight:700;
}
.btn-profile .avatar{
  width:24px; height:24px; border-radius:50%;
  background:#e9efff; display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; color:#365cff;
}

/* Notificatiemenu */
.co-notify{ position:relative; }
.co-bell-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:16px; height:16px; line-height:16px; border-radius:50%;
  background:#ff4d4f; color:#fff; font-size:10px; text-align:center; padding:0 4px; font-weight:800; display:none;
}
.co-notify-panel{
  position:absolute; right:0; top:calc(100% + 8px);
  width:360px; max-width:90vw;
  background:rgba(11,18,32,.98);
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.3);
  color:#e8edff; display:none; z-index:1200;
}
.co-notify-header{ padding:10px 12px; border-bottom:1px dashed rgba(255,255,255,.12); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.co-notify-list{ max-height:420px; overflow:auto; }
.co-notify-item{ padding:10px 12px; border-bottom:1px dashed rgba(255,255,255,.08); }
.co-notify-item:last-child{ border-bottom:0; }
.co-notify-item small{ color:#b6c3ff; }

/* Dropdown language */
.co-flag{ width:20px; height:14px; object-fit:cover; border-radius:3px; border:1px solid rgba(255,255,255,.25); }
.dropdown-language{ position:relative; }
.dropdown-language-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  background:rgba(11,18,32,.98); border:1px solid rgba(255,255,255,.15);
  border-radius:12px; padding:6px; min-width:180px; display:none; z-index:1100;
}
.dropdown-language-menu a{
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  color:#e8edff; text-decoration:none; border-radius:8px;
}
.dropdown-language-menu a:hover{ background:rgba(255,255,255,.06); }

/* =========================================================
   CARDS / COMPONENTS (glas, compact)
   ========================================================= */

.card{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#e8edff !important;
  backdrop-filter:blur(6px);
  border-radius:var(--radius) !important;
  box-shadow: var(--shadow);
}
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6{ color:#ffffff !important; }
.card .text-muted{ color:var(--co-muted) !important; }

.co-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:12px;
  color:#e8edff;
  box-shadow: var(--shadow);
}

/* Buttons */
.btn-ghost{
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.06);
  color:#e8edff; border-radius:12px; padding:10px 14px; font-weight:800;
}
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.btn-brand{
  background:var(--co-accent); border:1px solid var(--co-accent);
  color:#fff; border-radius:12px; padding:10px 14px; font-weight:800;
}

/* =========================================================
   FORMS op donker (+ Dark Select)
   ========================================================= */

.form-control, .form-select, textarea{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#e8edff !important;
}
.form-control::placeholder, textarea::placeholder{ color:rgba(232,237,255,.65); }

/* Native select in dark theme */
select,
.form-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#e8edff !important;
  border-radius:12px;
  padding-right:2.25rem; /* ruimte voor pijltje */
}
select:hover,
.form-select:hover{ background:rgba(255,255,255,.10) !important; }
select:focus,
.form-select:focus{
  outline:0;
  box-shadow:0 0 0 2px rgba(54,92,255,.35);
  border-color:rgba(54,92,255,.65) !important;
}

/* Pijltje tekenen (zonder extra icon) */
.form-select{
  background-image:
    linear-gradient(45deg, transparent 50%, #9fb4ff 50%),
    linear-gradient(135deg, #9fb4ff 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    100% 0;
  background-size:6px 6px, 6px 6px, 2.5rem 100%;
  background-repeat:no-repeat;
}

/* Opties in de dropdown (desktop browsers) */
select option{
  background-color:#0b1220 !important;
  color:#e8edff !important;
}
select optgroup{
  background-color:#0b1220 !important;
  color:#b6c3ff !important;
}
select option:checked,
select option:hover,
select option:focus{
  background-color:#365cff !important;
  color:#ffffff !important;
}

/* Firefox/Windows hint dat we dark willen */
@-moz-document url-prefix(){ select, .form-select{ color-scheme:dark; } }

/* Autofill op donker */
input:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:#e8edff !important;
  -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.06) inset !important;
}

/* =========================================================
   Tabellen/Lists compact
   ========================================================= */
.table{ font-size:.92rem; }
.table th, .table td{ padding:.45rem .6rem; }
.list-group-item{ padding:.5rem .625rem; font-size:.95rem; }

/* KPI compact helpers */
.kpi-title{ color:#b6c3ff; font-size:.85rem; margin-bottom:.25rem; }
.kpi-value{ font-size:1.35rem; font-weight:800; line-height:1; }
.kpi-hint{ color:#95a1c9; font-size:.85rem; }

/* =========================================================
   SUBSCRIPTION BANNER — HARD KILL (globaal)
   ========================================================= */
.alert-warning:not([data-keep="1"]),
.alert.alert-warning:not([data-keep="1"]),
.alert.alert-dismissible.alert-warning:not([data-keep="1"]),
.co-subscription-banner:not([data-keep="1"]){
  display:none !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  visibility:hidden !important;
  opacity:0 !important;
}

/* Fallback: als er toch nog een wrapper blijft staan, haal ruimte weg */
.page-content > .alert-warning,
.page-content > .alert,
.page-content > .co-subscription-banner{ margin:0 !important; padding:0 !important; }

/* =========================================================
   DASHBOARD HELPERS — 75% / 25% split
   ========================================================= */
.dash-split{
  display:flex; gap:12px; align-items:stretch; margin-bottom:12px;
}
.dash-primary{ flex:3 1 0; min-width:0; }
.dash-aside  { flex:1 1 0; min-width:260px; }
.dash-split .card, .dash-split .co-card{ height:100%; }

/* Kleine uitlijning: voorkom “dip” door tabelmarges */
.dash-primary .table{ margin-bottom:0; }
.dash-primary .card .card-body{ padding-bottom:12px; }

/* Responsive: stack onder elkaar */
@media (max-width:1200px){
  .dash-split{ flex-direction:column; }
  .dash-aside{ min-width:0; }
}

/* Mini-tabs (Opkomst / Goals / Assists / Clean sheet) */
.mini-tabs{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin:0 0 8px 0;
}
.mini-tabs .tab{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; font-size:.85rem; font-weight:800;
  color:#e8edff; text-decoration:none; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  transition: background .2s, border-color .2s, color .2s;
}
.mini-tabs .tab:hover{ background:rgba(255,255,255,.12); }
.mini-tabs .tab.active{
  background:var(--co-accent);
  border-color:var(--co-accent);
  color:#fff;
}

/* Lijst binnen stats compacter & leesbaar */
.stats-list .list-group-item{
  background:transparent;
  border-color:rgba(255,255,255,.10);
  color:#e8edff;
  padding:.50rem .625rem;
  font-size:.95rem;
}
.stats-list .list-group-item .muted{ color:var(--co-muted); }

/* =========================================================
   DOORLOPENDE VERTICALE LIJN naast sidebar
   ========================================================= */
@media (min-width:1024px){
  .sidebar, .sidebar-wrapper{ border-right:0 !important; box-shadow:none !important; }
  body::before{
    content:"";
    position:fixed; top:var(--divider-top); left:var(--sidebar-w);
    height:calc(100vh - var(--divider-top)); width:0;
    border-left:1px solid var(--co-border);
    pointer-events:none; z-index:2;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:992px){
  .main-content, .page-content{ margin-left:0; }
  .sidebar-nav{ padding-top:12mm !important; }
  .co-topbar{ position:sticky; top:0; z-index:900; }
}

/* =========================================================
   TYPO (compactere headings)
   ========================================================= */
h1{ font-size:1.25rem; }
h2{ font-size:1.15rem; }
h3{ font-size:1.05rem; }
h4,h5,h6{ font-size:.95rem; margin-bottom:.5rem; }

/* =========================================================
   SAFETY: forceer compactheid wanneer body .co-app heeft
   ========================================================= */
body.co-app .card .card-body{ padding:12px; border-radius:var(--radius); }
body.co-app .page-content, body.co-app .main-content{ padding:12px 14px 20px; }