@media screen and (max-width: 900px) {

  /* --- General adjustments --- */
  .header_top_fixed,
  header.page-header {
    position: static !important;
  }

  /* navbar must keep stacking context on mobile */
  nav.navbar {
    position: relative !important;
  }

  body > div[style*="padding-top: 280px"] {
    display: none !important;
  }

  main { padding-top: 20px !important; }

  /* --- Banner --- */
  .banner {
    background-color: #FFDA03 !important;
    height: 12px !important;        /* thinner yellow bar */
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
  }

  .banner h1 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* --- Header compact --- */
  .header_top_fixed header.page-header {
    text-align: center;
  }

  .header_top_fixed .page-header h1 {
    font-size: 1.2rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .header_top_fixed .page-header img { height: 30px !important; }
  .page-header h1 a { font-size: 20px !important; }

  .header_top_fixed hr, hr.solid {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* --- Navbar compact --- */
  nav.navbar {
    font-size: 13px !important;
    padding: 5px 10px !important;
    margin-top: 0 !important;
    background-color: var(--nav-background) !important;
    color: var(--link-color);
    border-top: none !important;
    box-shadow: none !important;
    display: flex;
    flex-wrap: wrap;               /* allows two lines */
    justify-content: center;
    align-items: center;
    gap: 6px;
    overflow-x: hidden !important; /* avoid sideways scroll */
    width: 100%;
  }

  nav.navbar a,
  nav.navbar button.dropbtn {
    flex: 0 1 auto;
    font-size: 13px !important;
    padding: 4px 8px !important;
    text-align: center;
    white-space: nowrap;
  }

  .nav-right span { display: none !important; }
  .dropbtn { font-size: 13px !important; }

  /* --- Dropdowns (tap-to-open) --- */
  .dropdown-content {
    position: absolute !important;
    background-color: var(--primary-color) !important;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: none;
    /* z-index will be unified later in a single block */
  }

  .dropdown.open .dropdown-content {
    display: block !important;
  }

  .dropdown-content a {
    display: block;
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
    padding: 10px 14px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }

  .dropdown-content a:hover,
  .dropdown-content button:hover {
    background-color: var(--secondary-color) !important;
    color: var(--primary-color) !important;
  }

  nav.navbar,
  .header_top_fixed,
  header.page-header {
    overflow: visible !important;
  }

  /* --- Footer smaller --- */
  footer {
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
  }
}

/* ==========================================================
   📱 Fix for banner/footer not filling full width on mobile
   ========================================================== */
@media screen and (max-width: 900px) {
  main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  .header_top_fixed,
  header.page-header,
  .banner,
  nav.navbar,
  footer {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  footer {
    background-color: var(--footer-background) !important;
    color: black !important;
    text-align: center;
    padding: 10px 0 !important;
    border-top: 3px solid black !important;
  }

  /* Make sure the main container doesn't limit width */
  .container,
  .container-fluid {
    max-width: 100% !important;
    padding: 0 !important;
  }
}

/* ==========================================================
   💡 Force full-width rendering on small screens
   ========================================================== */
@media screen and (max-width: 900px) {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  main {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .container,
  .container-fluid {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  .header_top_fixed,
  header.page-header,
  .banner,
  nav.navbar,
  footer {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================
   📱 Add safe side spacing for page content on mobile
   ========================================================== */
@media screen and (max-width: 900px) {

  /* Keep banner, nav, and footer full width */
  .header_top_fixed,
  header.page-header,
  .banner,
  nav.navbar,
  footer {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Add side padding to the actual page content */
  main,
  .container,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  /* Prevent the table from touching screen edges */
  table {
    width: 100%;
    border-collapse: collapse;
  }

  /* Make sure large buttons or tables never overflow */
  .btn, .table {
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* ==========================================================
   📱 Stack bottom buttons on success pages
   ========================================================== */
@media screen and (max-width: 900px) {
  .button-group {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .button-group .btn {
    width: 100% !important;
    margin: 4px 0 !important;
    font-size: 15px;
    padding: 10px;
  }

  .card {
    margin: 20px 10px !important;
    border-radius: 10px !important;
  }
}


/* ==========================================================
   📱 Responsive table fix for wedstrijd_selector.html
   ========================================================== */
@media screen and (max-width: 900px) {

  /* Wrap table in scrollable container */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
    width: 100%;
  }

  /* Reduce table font and padding slightly */
  table {
    font-size: 13px !important;
  }

  th, td {
    padding: 6px 8px !important;
    white-space: nowrap;
  }

  /* Make buttons smaller */
  a.button-40 {
    font-size: 12px !important;
    padding: 5px 8px !important;
  }

  /* Center-align headers */
  thead th {
    text-align: center !important;
  }

  /* Slightly reduce heading spacing */
  h1, h2 {
    font-size: 1.25rem !important;
  }

  /* Ensure page edges have a little padding */
  main, div[style*="padding:30px"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* ==========================================================
   📱 Compact table layout for mobile screens
   ========================================================== */
@media screen and (max-width: 900px) {

  /* Hide long text in certain cells */
  .status-text {
    display: none !important;
  }

  .edit-text {
    display: none !important;
  }

  /* Optional: slightly shrink emoji spacing */
  .status-nog-te-spelen {
    font-size: 13px !important;
  }

  /* Keep table readable */
  table {
    font-size: 13px !important;
  }

  td, th {
    padding: 6px 8px !important;
  }

  /* Make Edit button square-like for icon-only look */
  .edit-btn {
    min-width: 36px !important;
    padding: 5px 8px !important;
    text-align: center;
  }

  .edit-btn span {
    display: none !important;
  }
}


/* ==========================================================
   📱 Mobile compact view for wedstrijd table
   ========================================================== */
@media screen and (max-width: 900px) {

  /* Hide location text, keep icon */
  .loc-text {
    display: none !important;
  }

  /* Slightly reduce icon size and spacing */
  .loc-icon {
    font-size: 18px;
    margin-right: 0 !important;
  }

  /* Keep the rest of your compact rules */
  .status-text, .edit-text {
    display: none !important;
  }

  table {
    font-size: 13px !important;
  }

  td, th {
    padding: 6px 8px !important;
  }

  .edit-btn {
    min-width: 36px !important;
    padding: 5px 8px !important;
    text-align: center;
  }

  /* Keep table inside horizontal scroll container */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================
   📱 Dashboard Mobile Layout
   ========================================================== */
@media (max-width: 900px) {
  .dashboard-container {
    flex-direction: column !important;
    height: auto !important;
  }

  .dashboard-column {
    flex: 1 1 100% !important;
    width: 100% !important;
    padding: 10px;
  }

  .statistics-block {
    margin-top: 15px;
  }

  .statistics-block table {
    font-size: 0.9rem;
  }
}

/* --- Mobile: reorder charts across columns --- */
@media (max-width: 900px) {
  /* 1) Flatten the column wrappers so their children
        become direct flex items of the container */
  .dashboard-container {
    display: flex !important;
    flex-direction: column !important;
  }
  .dashboard-container .dashboard-column {
    display: contents !important;   /* <-- key line */
  }

  /* 2) Ensure each chart is a flex item with spacing */
  .dashboard-container .chart,
  .dashboard-container .statistics-block {
    margin-bottom: 20px;
  }

  /* 3) Desired stacked order */
  .dashboard-container .chart-minuten      { order: 1 !important; }
  .dashboard-container .chart-percentage   { order: 2 !important; }
  .dashboard-container .chart-goals        { order: 3 !important; }
  .dashboard-container .chart-aanwezigheid { order: 4 !important; }
  .dashboard-container .statistics-block   { order: 5 !important; }
}


/* ==========================================================
   📱 Compact Statistics Styling (Mobile)
   ========================================================== */
@media (max-width: 900px) {

  .statistics-block {
    margin: 10px 0 !important;
    padding: 10px !important;
    background-color: #555 !important;
    color: #FFDA03 !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  }

  .statistics-block h3 {
    text-align: center !important;
    font-size: 1rem !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
    color: #FFDA03 !important;
  }

  /* Stack all stats vertically */
  .statistics-block > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin: 0 !important;
  }

  .statistics-block table {
    width: 100% !important;
    margin-bottom: 8px !important;
    border: 1px solid #777 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background-color: #444 !important;
  }

  /* --- Statistics table headers (mobile) --- */
  .statistics-block th {
    background-color: #003366 !important;
    color: #FFDA03 !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    line-height: 1.1rem !important;
    padding: 6px 4px !important;
    white-space: normal !important;  /* ✅ allow text wrapping */
    word-wrap: break-word !important;
    max-width: 120px;               /* keeps wrapping narrow */
    border-radius: 6px 6px 0 0;
  }

  .statistics-block td {
    text-align: center !important;
    font-size: 1.3rem !important;   /* reduced number size */
    font-weight: 700 !important;
    background-color: #555 !important;
    color: #FFDA03 !important;
    padding: 6px !important;
  }

  /* Make sure last table has no extra margin */
  .statistics-block table:last-child {
    margin-bottom: 0 !important;
  }
}

/* ==========================================================
   📱 Equal height & centered stat boxes
   ========================================================== */
@media (max-width: 900px) {

  /* Center all the stat tables as a grid inside the block */
  .statistics-block > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* ✅ center tables horizontally */
    justify-content: center !important;
    width: 100% !important;
    gap: 8px !important;              /* small spacing between tables */
  }

  /* Each table centered with fixed width */
  .statistics-block table {
    display: block !important;
    width: 90% !important;            /* ✅ narrower so centered inside */
    margin: 0 auto 8px auto !important;
    background-color: #444 !important;
    border: 1px solid #777 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    height: 120px !important;         /* consistent box height */
  }

  /* Titles */
  .statistics-block th {
    background-color: #003366 !important;
    color: #FFDA03 !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    line-height: 1.1rem !important;
    padding: 6px 4px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    border-radius: 6px 6px 0 0;
  }

  /* Numbers vertically centered */
  .statistics-block td {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    background-color: #555 !important;
    color: #FFDA03 !important;
    height: 100% !important;
    padding: 0 !important;
  }

  /* Remove extra margin for last table */
  .statistics-block table:last-child {
    margin-bottom: 0 !important;
  }
}


/* ==========================================================
   📱 Fix dashboard menu being covered by graphs
   ========================================================== */
@media (max-width: 900px) {
  #menu {
    position: relative !important;
    z-index: 1000 !important;  /* lower than navbar dropdowns */
    background-color: #FFDA03 !important;
    margin-bottom: 10px !important;
  }

  /* Make sure no Plotly chart overlaps upward */
  .dashboard-container,
  .dashboard-container .chart {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
  }

  /* Prevent background bleed (black bar effect) */
  .dashboard-container::before {
    content: "";
    display: block;
    position: relative;
    background: none !important;
  }
}


/* ==========================================================
   📱 Ensure Dashboard Menu stays visible
   ========================================================== */
@media (max-width: 900px) {
  #menu {
    position: relative !important;
    z-index: 1000 !important;   /* keep consistent with above */
    margin-bottom: 15px !important;
  }

  .dashboard-container {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Avoid charts overlapping the menu */
  .dashboard-container .chart {
    position: relative !important;
    z-index: 1 !important;
  }
}


/* ==========================================================
   📱 Dashboard Menu Consistent Styling (Mobile)
   ========================================================== */
@media (max-width: 900px) {
  #menu nav.navbar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: #FFDA03 !important;
    padding: 8px 5px !important;
  }

  #menu nav.navbar a,
  #menu nav.navbar button.dropbtn {
    background-color: #FFDA03 !important;
    color: black !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 6px 10px !important;
    border: 2px solid black !important;
    border-radius: 6px !important;
    text-decoration: none !important;
  }

  #menu nav.navbar a:hover,
  #menu nav.navbar button.dropbtn:hover {
    background-color: black !important;
    color: #FFDA03 !important;
  }

  /* Fix for dropdown alignment */
  #menu .dropdown-content a {
    background-color: #FFDA03 !important;
    color: black !important;
  }

  #menu .dropdown-content a:hover {
    background-color: black !important;
    color: #FFDA03 !important;
  }
}

/* ==========================================================
   📱 Dashboard Menu: Show dropdown only on mobile
   ========================================================== */
@media (max-width: 900px) {
  #dashboard-menu {
    background-color: #FFDA03 !important;
    padding: 10px;
    border-bottom: 2px solid black;
  }

  .dashboard-menu-desktop {
    display: none !important;   /* hide old menu */
  }

  .dashboard-menu-mobile {
    display: block !important;
    width: 100%;
  }

  #dashboardMenuSelect {
    width: 100%;
    font-size: 0.9rem;
    font-weight: 700;
    color: black;
    background-color: #FFDA03;
    border: 2px solid black;
    border-radius: 6px;
    padding: 8px;
  }

  #dashboardMenuSelect:focus {
    outline: none;
    background-color: #FFF48C; /* slightly lighter yellow on focus */
  }
}

/* ==========================================================
   🖥️ Dashboard Menu (Desktop) — Black buttons, yellow text
   ========================================================== */
@media (min-width: 901px) {
  .dashboard-menu-desktop {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background-color: black; /* keep yellow background strip */
    padding: 10px 20px;
    justify-content: flex-start;
    align-items: center;
  }

  .dashboard-menu-mobile {
    display: none !important;
  }

  .dashboard-menu-desktop a,
  .dashboard-menu-desktop .dropbtn {
    background-color: black !important;   /* 🖤 black buttons */
    color: #FFDA03 !important;            /* 💛 yellow text */
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    padding: 6px 12px !important;
    border: 1px solid #FFDA03 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    cursor: pointer;
  }

  /* No hover inversion — keep same colors */
  .dashboard-menu-desktop a:hover,
  .dashboard-menu-desktop .dropbtn:hover {
    background-color: black !important;
    color: #FFDA03 !important;
  }

  /* Dropdown content */
  .dashboard-menu-desktop .dropdown-content a {
    background-color: black !important;
    color: #FFDA03 !important;
  }

  .dashboard-menu-desktop .dropdown-content a:hover {
    background-color: #222 !important;
  }
}


/* ==========================================================
   📱 FINAL NAVBAR DROPDOWN STACKING FIX
   ========================================================== */
@media screen and (max-width: 900px) {

  /* Navbar as base stacking context */
  nav.navbar {
    position: relative !important;
    z-index: 9000 !important;
    overflow: visible !important;
  }

  /* Left side (Home, Team Beheer, Trainingen Database, Berichten) */
  .nav-left {
    position: relative !important;
    z-index: 10000 !important;   /* above nav-right */
  }

  /* Right side (username) just below left side */
  .nav-right {
    position: relative !important;
    z-index: 9500 !important;
  }

  /* Actual dropdown menus – sit above both sides */
  .nav-left .dropdown-content,
  .nav-right .dropdown-content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 11000 !important;   /* above nav-left/nav-right */
  }

  /* Everything else (dashboard menu, charts, page content) stays below navbar */
  #menu,
  .dashboard-container,
  main,
  table {
    position: relative !important;
    z-index: 1 !important;
  }
}

@media (max-width: 900px) {

  .nav-left {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* Fix long items like 'Gebruikersbeheer' */
  .nav-left a,
  .nav-left .dropbtn,
  .nav-left li a {
    flex: 1 1 auto !important;
    white-space: normal !important;
  }
}

@media (max-width: 900px) {

  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    display: block !important;
  }

  .table-responsive table {
    width: max-content !important;   /* ⭐ KEY FIX */
    min-width: 100% !important;      /* ensures table is at least screen size */
    border-collapse: collapse;
  }
}