/* ============================================================
   DocentenPlan — mobile-dashboard.css
   Alleen mobiele overrides. Desktop styling staat in styles.css.
   Oude dubbele dashboardregels zijn verwijderd.
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --mobile-nav-h: 78px;
  }

  .nav-item[data-view="lesprofielen"],
  .nav-item[data-view="lesmodules"] {
    display: none !important;
  }

  body {
    background: #F3EFE5;
  }

  .app-shell,
  .main-shell,
  .main-content {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .sidebar,
  .app-sidebar,
  aside.sidebar {
    display: none !important;
  }

  .content,
  .page-content,
  .main-content {
    margin-left: 0 !important;
    padding: 56px 0 calc(var(--mobile-nav-h) + 24px) !important;
  }

  .mobile-topbar {
    height: 76px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 10px rgba(34,30,24,.08) !important;
  }

  .mobile-logo,
  .mobile-brand-logo,
  .brand-logo {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    font-size: 18px !important;
    flex: 0 0 46px !important;
  }

  .mobile-brand,
  .mobile-title,
  .brand-title {
    font-size: 23px !important;
    line-height: 1.05 !important;
    letter-spacing: -.04em !important;
    font-weight: 850 !important;
  }

  /* Dashboard: geen padding — teacher-dashboard en td-layout regelen zelf de spacing */
  #view-dashboard.view {
    padding: 0 !important;
  }

  /* Alle andere views: geen topgap (content direct onder topbar), 16px zijkant */
  .view:not(#view-dashboard) {
    padding: 16px 16px 0 !important;
  }

  /* Algemene paginakoppen op mobiel compact */
  .page-header {
    margin-bottom: 14px !important;
    gap: 8px !important;
  }
  .page-header-left h1 {
    font-size: 22px !important;
    letter-spacing: -.03em !important;
  }
  .page-sub {
    font-size: 12px !important;
    margin-top: 3px !important;
    max-width: none !important;
  }

  /* Algemene .card secties compacter */
  .card {
    margin-bottom: 12px !important;
    border-radius: 14px !important;
  }
  .card-header {
    padding: 12px 14px 10px !important;
  }
  .card-header h2 {
    font-size: 16px !important;
  }

  .teacher-dashboard {
    max-width: none !important;
    width: 100% !important;
    padding: 0 0 calc(var(--mobile-nav-h) + 24px) !important;
    overflow-x: hidden !important;
  }

  /* Side-padding for content below the full-bleed hero */
  .td-layout {
    padding: 0 16px !important;
  }

  .td-hero {
    background: #111A3A !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 16px 16px 42px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .td-hero-dots,
  .td-hero-blob,
  .td-top-actions {
    display: none !important;
  }

  .td-topbar {
    display: block !important;
    margin: 0 !important;
  }

  .td-topbar h1 {
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    letter-spacing: -.03em !important;
    margin: 0 0 3px !important;
    max-width: 360px !important;
  }

  .td-topbar p {
    color: rgba(255,255,255,.65) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    max-width: 360px !important;
  }

  .td-layout {
    display: block !important;
  }

  .td-main,
  .td-side {
    width: 100% !important;
    min-width: 0 !important;
  }

  .td-side {
    display: block !important;
    margin-top: 18px !important;
  }

  .td-widget {
    border-radius: 18px !important;
    padding: 16px !important;
    margin-bottom: 14px !important;
  }

  .td-widget-title {
    font-size: 16px !important;
  }

  .td-empty-small,
  .td-link {
    font-size: 13px !important;
  }

  .td-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: -24px 16px 14px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .td-stats .td-stat:nth-child(2) {
    display: flex !important;
  }

  .td-stat {
    height: 68px !important;
    min-height: 68px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(34,30,24,.08), 0 8px 20px -10px rgba(34,30,24,.30) !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .td-stat-icon {
    order: 2 !important;
    margin-left: auto !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  .td-stat-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .td-stat-label {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  .td-stat-value {
    font-size: 19px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .td-section-head {
    border-radius: 18px 18px 0 0 !important;
    padding: 12px 12px 10px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .td-dag-nav {
    gap: 6px !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }

  .td-section-head {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .td-dag-nav h2,
  .td-section-head h2 {
    font-size: 16px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }

  .td-dag-nav-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    font-size: 17px !important;
  }

  .td-view-select {
    font-size: 0 !important;
    flex: 0 0 auto !important;
  }

  .td-view-select select {
    height: 34px !important;
    max-width: 108px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
  }

  .td-timeline {
    border-radius: 0 0 18px 18px !important;
    padding: 12px !important;
    gap: 12px !important;
  }

  .td-lesson {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    padding: 14px 14px !important;
    border-radius: 18px !important;
    min-height: 0 !important;
    text-align: left !important;
  }

  .td-lesson-toprow {
    display: contents !important;
  }

  .td-time {
    grid-column: 1 !important;
    grid-row: 1 / span 7 !important;
    width: 54px !important;
    min-width: 54px !important;
    padding: 0 !important;
  }

  .td-time strong {
    font-size: 17px !important;
    line-height: 1.05 !important;
  }

  .td-time span {
    margin-top: 7px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  .td-time em,
  .td-time small {
    margin-top: 7px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
  }

  .td-class {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 10px !important;
    align-self: center !important;
    justify-self: start !important;
  }

  .td-status {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    font-size: 11px !important;
    padding: 7px 9px !important;
    border-radius: 999px !important;
    max-width: 118px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .td-lesson-titel,
  .td-lesson h3 {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.16 !important;
    letter-spacing: -.025em !important;
    text-align: left !important;
  }

  .td-colorbar,
  .td-combined-colorbar {
    grid-column: 2 / 4 !important;
    grid-row: 3 !important;
    height: 3px !important;
    margin: 0 0 4px !important;
  }

  .td-acties-hoofd {
    grid-column: 1 / 4 !important;
    grid-row: 4 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .td-acties-hoofd button,
  .td-acties-hoofd a,
  .td-acties-extra button,
  .td-acties-extra a {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    flex: 0 0 auto !important;
  }

  .td-lesson-detail {
    grid-column: 1 / 4 !important;
    grid-row: 5 !important;
    padding-top: 9px !important;
    margin: 0 !important;
    border-top: 1px solid #ECE6DA !important;
  }

  .td-meta {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 0 8px !important;
  }

  .td-lesson p {
    font-size: 13px !important;
    line-height: 1.35 !important;
    padding: 10px !important;
    margin: 0 0 10px !important;
  }

  .td-acties-extra {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }

  .td-module-praktijk {
    font-size: 13px !important;
  }

  .td-pause {
    grid-template-columns: 54px minmax(0,1fr) !important;
    padding: 0 14px !important;
    gap: 10px !important;
  }

  .td-pause-card {
    height: 42px !important;
    font-size: 13px !important;
  }

  .bottom-nav,
  .mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: var(--mobile-nav-h) !important;
    background: rgba(255,255,255,.96) !important;
    border-top: 1px solid #E3DDCF !important;
    box-shadow: 0 -10px 30px rgba(34,30,24,.08) !important;
    z-index: 1000 !important;
  }

  .bottom-nav a,
  .bottom-nav button,
  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    font-size: 11px !important;
    color: #9B9386 !important;
  }

  .bottom-nav button.active,
  .bottom-nav a.active,
  .bottom-nav-item.active {
    color: #5B5FEF !important;
  }

  .bottom-nav button.active svg,
  .bottom-nav-item.active svg,
  .bottom-nav-item.active span {
    color: #5B5FEF !important;
  }

  .bottom-nav svg,
  .mobile-bottom-nav svg,
  .bottom-nav i,
  .mobile-bottom-nav i {
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    color: inherit !important;
  }

  /* Lesmaterialen mobiel */
  .lm-wrapper,
  .lm-page,
  .lm-container,
  .view-lesmaterialen,
  #view-lesmaterialen {
    width: 100% !important;
    max-width: none !important;
    overflow-x: hidden !important;
  }

  .lm-card,
  .lm-kaart,
  .lm-module-card,
  .lm-praktijk-sectie,
  .lm-gedeelde-wrap,
  .lm-bekijk-praktijk-blok,
  .lm-bekijk-stap,
  .material-card,
  .module-card {
    border-radius: 18px !important;
    padding: 14px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .lm-card h2,
  .lm-kaart h2,
  .lm-card h3,
  .lm-kaart h3,
  .lm-module-card h3,
  .material-card h3,
  .module-card h3 {
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
    overflow-wrap: anywhere !important;
  }

  .lm-kaart-meta,
  .lm-meta,
  .material-meta,
  .module-meta {
    font-size: 13px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  .lm-acties,
  .lm-actions,
  .module-actions,
  .material-actions,
  .lm-les-knoppen {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  .lm-acties .btn,
  .lm-actions .btn,
  .module-actions .btn,
  .material-actions .btn,
  .lm-les-knoppen .btn,
  .lm-acties button,
  .lm-actions button,
  .module-actions button,
  .material-actions button,
  .lm-les-knoppen button {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    justify-content: center !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
  }

  .lm-acties .btn-danger,
  .lm-actions .btn-danger,
  .module-actions .btn-danger,
  .material-actions .btn-danger,
  .lm-acties button.danger,
  .lm-actions button.danger,
  .module-actions button.danger,
  .material-actions button.danger {
    grid-column: 1 / -1 !important;
  }

  .lm-code,
  .lm-lescode,
  .lescode,
  code {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* ---- Lesmaterialen: echte klassen ----------------------------------------
     De regels hierboven targeten phantom klassen (lm-card/lm-kaart) die in de
     huidige lesmaterialen.js niet bestaan. Hieronder de werkelijke overrides.
     Globale .page-header / .card / .card-header regels staan al hierboven.
     ---------------------------------------------------------------------- */

  /* Stat-blokjes: compact 2×2 grid met kleinere tekst */
  #view-lesmaterialen .gu-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  #view-lesmaterialen .gu-stat {
    padding: 12px 12px !important;
  }

  #view-lesmaterialen .gu-stat-num {
    font-size: 22px !important;
  }

  #view-lesmaterialen .gu-stat-label {
    font-size: 11px !important;
    margin-top: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Instellingen-knop verbergen op mobiel (niet essentieel) */
  #view-lesmaterialen .page-header > .btn {
    display: none !important;
  }

  /* Maak/upload-knop in sectie-header compact */
  #view-lesmaterialen .lm-sectie-header .btn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Tab-panelen: lege staat minder padding */
  #view-lesmaterialen .lm-tab-paneel > div[style*="padding:40px"],
  #view-lesmaterialen .lm-tab-paneel > div[style*="padding: 40px"] {
    padding: 18px 14px !important;
  }

  /* Subtab-balk: horizontaal scrollbaar zonder zichtbare scrollbar */
  #view-lesmaterialen .lm-subtab-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  #view-lesmaterialen .lm-subtab-bar::-webkit-scrollbar {
    display: none !important;
  }

  /* Module-dropdown (vervangt tabbalk op mobiel) */
  #view-lesmaterialen .lm-module-select {
    height: 40px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    margin: 8px 0 10px !important;
  }

  /* Materiaalrijen: knoppen netjes op volledige breedte */
  #view-lesmaterialen .tw-mat-rij {
    gap: 8px !important;
    padding: 10px 12px !important;
    margin: 5px 7px !important;
  }
  #view-lesmaterialen .tw-mat-naam strong {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  #view-lesmaterialen .tw-mat-naam span {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  /* Materiaalrij: 2-koloms grid — buttons zijn directe kinderen, geen div-wrapper */
  #view-lesmaterialen .tw-mat-rij {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 6px !important;
    row-gap: 6px !important;
    align-items: stretch !important;
  }
  /* Titel (tw-mat-naam) overspant beide kolommen */
  #view-lesmaterialen .tw-mat-naam {
    grid-column: 1 / -1 !important;
  }
  /* Actie-knoppen (Download, Bewerken, etc.): elk in één cel naast elkaar */
  #view-lesmaterialen .tw-mat-rij > .btn,
  #view-lesmaterialen .tw-mat-rij > a.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-height: 36px !important;
    width: 100% !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }
  /* Verwijder-knop altijd volle breedte onderaan */
  #view-lesmaterialen .tw-mat-rij > .tw-del-btn {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-height: 36px !important;
    width: 100% !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
  }

  /* ---- Profiel-tab -------------------------------------------------------- */
  .profiel-mobiel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-bottom: 24px !important;
  }
  .profiel-avatar {
    width: 72px !important;
    height: 72px !important;
    border-radius: 22px !important;
    background: #111A3A !important;
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 8px 0 12px !important;
    flex-shrink: 0 !important;
  }
  .profiel-naam {
    font-size: 22px !important;
    font-weight: 850 !important;
    color: #211F1B !important;
    letter-spacing: -.03em !important;
    text-align: center !important;
    margin-bottom: 4px !important;
  }
  .profiel-email {
    font-size: 13px !important;
    color: #7E766A !important;
    text-align: center !important;
    margin-bottom: 10px !important;
  }
  .profiel-rol {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    background: #EAF3E8 !important;
    color: #2C6B30 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
  }
  .profiel-sectie {
    width: 100% !important;
    background: #fff !important;
    border: 1px solid #E3DDCF !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
  }
  .profiel-rij {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 13px 16px !important;
    border-bottom: 1px solid #ECE6DA !important;
    gap: 12px !important;
  }
  .profiel-rij:last-child {
    border-bottom: none !important;
  }
  .profiel-rij-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #7E766A !important;
    flex-shrink: 0 !important;
  }
  .profiel-rij span:not(.profiel-rij-label) {
    font-size: 13px !important;
    color: #211F1B !important;
    text-align: right !important;
    word-break: break-all !important;
  }
  .profiel-wijzig-pw {
    width: 100% !important;
    height: 46px !important;
    border: 1px solid #E3DDCF !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #211F1B !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin-bottom: 10px !important;
    font-family: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .profiel-uitloggen {
    width: 100% !important;
    height: 46px !important;
    border: 1px solid rgba(196,69,47,.25) !important;
    border-radius: 12px !important;
    background: #fff5f2 !important;
    color: #c4452f !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 430px) {
  /* On small phones (≤430px) keep the same or slightly smaller values —
     do NOT increase sizes here, that pushes content off-screen. */

  .td-layout {
    padding: 0 14px !important;
  }

  .td-stats {
    margin: -24px 14px 12px !important;
  }

  .td-lesson {
    grid-template-columns: 50px minmax(0,1fr) auto !important;
    column-gap: 9px !important;
    padding: 13px !important;
  }

  .td-time {
    width: 50px !important;
    min-width: 50px !important;
  }

  .td-time strong {
    font-size: 16px !important;
  }

  .td-time span,
  .td-meta,
  .td-lesson p {
    font-size: 12.5px !important;
  }

  .td-lesson-titel,
  .td-lesson h3 {
    font-size: 16px !important;
  }

  .td-status {
    max-width: 105px !important;
    font-size: 10.5px !important;
    padding: 7px 8px !important;
  }
}