/* ============================================================
   app-mobile.css — Donkere "Orbit" mobiele skin voor de Umely
   e-learning. ALLE regels staan onder @media (max-width:768px),
   het bestaande mobiele omslagpunt van de app. Boven 768px doet
   dit bestand niets, dus de desktopversie blijft volledig intact.

   Aanpak: herstijlen van de BESTAANDE DOM (geen nieuwe markup/JS),
   zodat alle functionaliteit 1-op-1 blijft werken. Alleen de skin
   op telefoon verandert naar donker/futuristisch.
   ============================================================ */

@media (max-width: 768px) {

  /* ---- Donkere tokens (overschrijven de lichte :root op telefoon) ---- */
  :root {
    --warm-white: #0B0C0F;
    --white: #14161B;
    --gray-text: rgba(255,255,255,0.62);
    --gray-border: rgba(255,255,255,0.10);
    --gray-light: rgba(255,255,255,0.07);
    --charcoal: #0F1014;
  }

  /* ---- Basis ---- */
  html { overflow-x: hidden; }
  body {
    background: #0B0C0F !important;
    color: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  /* Ambient: zachte gradient-orbs + fijne grid-mesh achter alles */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(680px circle at 88% -4%, rgba(255,77,0,0.20), transparent 55%),
      radial-gradient(620px circle at 0% 102%, rgba(255,133,20,0.13), transparent 55%),
      radial-gradient(520px circle at 100% 100%, rgba(230,62,94,0.10), transparent 55%);
  }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(150% 80% at 50% 0%, #000 30%, transparent 80%);
    mask-image: radial-gradient(150% 80% at 50% 0%, #000 30%, transparent 80%);
  }
  header, main, footer { position: relative; z-index: 1; }
  /* Onderbalk NIET op relative zetten: hij moet vast onderaan blijven (position:fixed
     uit de basis-CSS). We tillen 'm alleen boven de ambient via z-index. */
  .mobile-bottom-nav { z-index: 200; }

  /* ---- Header → glazige donkere app-balk ---- */
  header {
    background: rgba(15,16,20,0.82) !important;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  /* ---- Tekstkleuren ---- */
  .greeting h1, .greeting .greeting-sub,
  h1, h2, h3, h4, p, span, td, th, label, li, a { color: #fff; }
  .greeting-date, .stat-label, .prog-label, .cover-meta, .section-head .section-sub,
  .traject-count, .tool-desc, .news-sum, .goal-sub, .mod-slug { color: rgba(255,255,255,0.60) !important; }
  /* Gradient-accenten in tekst blijven oranje (huisstijl) */

  /* ---- Generieke kaart/oppervlak → donker glas ---- */
  .hero, .stat, .col, .lib, .goal-card, .goal-right, .tip-card, .traject-card,
  .tool-card, .mod-card, .cover-card, .resume-strip, .upgrade-banner,
  .content-card, .skeleton-card, .um-table-wrap, .um-table-scroll {
    background: rgba(255,255,255,0.045) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 14px 34px rgba(0,0,0,0.34) !important;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: #fff;
  }
  /* Hero/tip-card/resume zijn al donker in het origineel: laat hun eigen
     gloed staan maar zorg voor nette donkere rand. */
  .hero, .tip-card { background: #0F1014 !important; }
  .resume-strip, .upgrade-banner { background: linear-gradient(135deg,#15171c,#1d2026) !important; }

  /* Lichte vlakjes/inputs binnen kaarten → donker */
  input, select, textarea {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #fff !important;
  }
  input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.4) !important; }
  .toolbar-search input { background: rgba(255,255,255,0.05) !important; }

  /* Voortgangsbalken: donkere baan, oranje vulling blijft */
  .prog-bar, .traject-bar, .goal-bar, .cover-prog { background: rgba(255,255,255,0.08) !important; }

  /* Chips / categorie-knoppen */
  .cat-chip { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; color: #fff !important; }
  .cat-chip .count { background: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.7) !important; }

  /* Module-header binnen secties blijft donker (huisstijl: #27292D) */
  .module-header { background: #0F1014 !important; }

  /* Knoppen blijven pill + oranje gradient (huisstijl) — niets wijzigen,
     behalve donkere/secundaire knoppen leesbaar maken. */
  .prog-btn, .tool-week-btn { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
  .prog-btn:hover, .tool-week-btn:hover { background: var(--flame) !important; }

  /* ---- Mobiele onderbalk → zwevende glas-tabbar (Orbit) ---- */
  .mobile-bottom-nav {
    left: 12px; right: 12px; bottom: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    border-radius: 22px;
    background: rgba(18,19,24,0.62) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 16px 40px rgba(0,0,0,0.5), 0 0 34px rgba(255,77,0,0.08);
    overflow: hidden;
  }
  /* Forceer alle onderbalk-items zichtbaar: een bestaande header-regel
     (nav a[href="/home"|"/account.html"]{display:none}) verbergt ze anders ook hier. */
  .mobile-bottom-nav .mobile-nav-item { display: flex !important; }
  .mobile-nav-item { color: rgba(255,255,255,0.5) !important; border-radius: 14px; }
  .mobile-nav-item.active { color: var(--amber) !important; }
  /* main moet ruimte houden onder de zwevende balk */
  main { padding-bottom: calc(64px + env(safe-area-inset-bottom) + 28px) !important; }

  /* Footer donker (was al charcoal, maar consistent maken) */
  footer { background: #0B0C0F !important; border-top: 1px solid rgba(255,255,255,0.06); }

  /* ---- App-balk: compacte uitlog-knop rechts (nav-links blijven verborgen) ---- */
  header nav button.logout {
    display: inline-flex !important; align-items: center;
    padding: 7px 14px; font-size: 12px; font-weight: 700;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.20);
    color: #fff; border-radius: 999px;
  }

  /* ---- Mobiele weergave-schakelaar: Home = dashboard, Bibliotheek = #libraryBlock ----
     Home-weergave (standaard): bibliotheek verborgen, zodat /home kort is.
     Bibliotheek-weergave (body.m-view-bib): alleen de bibliotheek zichtbaar. */
  #libraryBlock { display: none; }
  body.m-view-bib #main > :not(#libraryBlock) { display: none; }
  body.m-view-bib #libraryBlock { display: block; }
  /* Footer onder bibliotheek-weergave niet nodig te verbergen; blijft staan. */
}