:root {
  --t-primary:       #e8572a;
  --t-primary-light: #f07a52;
  --t-primary-pale:  #fdeee8;
  --t-accent:        #111314;
  --t-accent-light:  #3a3f44;
  --t-accent-pale:   #e4e5e6;
  --t-dark:          #181c20;
  --t-mid:           #52606a;
  --t-muted:         #8a98a4;
  --t-line:          #dce0e4;
  --t-cream:         #f5f6f8;
  --t-white:         #ffffff;
}

/* ==========================================================================
   Trajectly — mobile-today.css
   Compacte app-startpagina voor mobiel & tablet (≤1366px of touchscherm).
   Desktop (≥1367px, geen touchscherm) ziet dit component niet.
   ========================================================================== */

/* ── Standaard verborgen: desktop toont dit component nooit ── */
.bp-mt-shell {
    display: none;
}

/* ── Op mobiel/tablet: toon mobile-today, verberg desktop-shell ── */
@media (max-width: 1366px), (any-pointer: coarse) {

    /* Maak theme-contentwrappers transparant zodat de pagina-achtergrondkleur zichtbaar is */
    .kb-wrap,
    #kb-dashboard-root,
    .entry-content,
    .page-content,
    .site-content,
    .content-area,
    article.type-page,
    .elementor-section-wrap,
    .wp-block-post-content {
        background: transparent !important;
    }

    .bp-mt-shell {
        display: block;
        padding: 0 16px;
        /* Extra ruimte onderaan voor zwevende bottom nav */
        padding-bottom: calc(var(--bp-mobile-nav-height, 64px) + var(--bp-mobile-nav-offset, 10px) + env(safe-area-inset-bottom) + 24px);
    }

    /* Verberg het bestaande desktopdashboard op mobiel/tablet */
    #kb-dashboard-root .kb-hero,
    #kb-dashboard-root .bp-client-dashboard-shell {
        display: none !important;
    }

    /* Houd de reflectie-modal beschikbaar; verberg alleen het desktopblok eromheen. */
    #kb-dashboard-root .bp-inzicht-blok {
        display: block !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #kb-dashboard-root .bp-inzicht-blok > :not(.bp-reflectie-modal-backdrop) {
        display: none !important;
    }

    body.bp-mobile-reflectie-open #kb-dashboard-root .bp-inzicht-blok {
        display: block !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    body.bp-mobile-reflectie-open .bp-reflectie-modal-backdrop.is-open:not([hidden]),
    body.bp-mobile-reflectie-open .bp-reflectie-modal-backdrop--mobile-active:not([hidden]) {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10000 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100vw !important;
        height: 100dvh !important;
        margin: 0 !important;
    }

    body.bp-mobile-reflectie-open .bp-reflectie-modal-backdrop.is-open:not([hidden]) .bp-reflectie-modal,
    body.bp-mobile-reflectie-open .bp-reflectie-modal-backdrop--mobile-active:not([hidden]) .bp-reflectie-modal {
        width: min(calc(100vw - 24px), 560px) !important;
        max-height: calc(100dvh - 32px) !important;
        overflow: auto !important;
        border-radius: 18px !important;
        margin: 0 !important;
    }

    /* ── 1. Begroeting ── */
    .bp-mt-greeting {
        padding: 20px 0 8px;
    }

    .bp-mt-greeting-title {
        font-size: 26px;
        font-weight: 700;
        color: var(--t-dark);
        letter-spacing: 0;
        margin: 0 0 4px;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
        line-height: 1.15;
    }

    .bp-mt-greeting-sub {
        font-size: 14px;
        color: var(--t-muted);
        margin: 0 0 20px;
        font-weight: 400;
    }

    /* ── Kaart-basis ── */
    .bp-mt-card {
        background: var(--t-white);
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 12px;
        border: 1px solid var(--t-line);
        box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    }

    /* ── Sectiekoppen ── */
    .bp-mt-section-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0;
        color: var(--t-muted);
        margin: 20px 0 8px;
    }

    /* ── 2. Trajectstatus kaart ── */
    .bp-mt-traject {
        background: var(--t-cream);
    }

    /* Bovenste rij: label + percentage rechts — alles in de normale flow */
    .bp-mt-traject-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 4px;
    }

    .bp-mt-traject-header-left {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .bp-mt-traject-label {
        font-size: 11px;
        font-weight: 700;
        color: var(--t-muted);
        text-transform: uppercase;
        letter-spacing: 0;
    }

    .bp-mt-traject-badge {
        display: inline-flex;
        align-self: flex-start;
        font-size: 11px;
        font-weight: 600;
        background: var(--t-primary-pale);
        color: var(--t-primary);
        padding: 3px 10px;
        border-radius: 20px;
        border: 1px solid var(--t-primary-light);
        white-space: nowrap;
    }

    /* Percentage rechts, groot maar in flow — geen absolute positioning */
    .bp-mt-traject-pct {
        font-size: 32px;
        font-weight: 800;
        color: var(--t-primary);
        opacity: .25;
        letter-spacing: 0;
        flex-shrink: 0;
        line-height: 1;
        align-self: center;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
    }

    .bp-mt-traject-week {
        font-size: 22px;
        font-weight: 700;
        color: var(--t-dark);
        letter-spacing: 0;
        margin: 10px 0 10px;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
    }

    .bp-mt-progress-track {
        height: 8px;
        background: var(--t-line);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 16px;
    }

    .bp-mt-progress-fill {
        display: block;
        height: 100%;
        border-radius: 4px;
        background: linear-gradient(90deg, var(--t-primary), var(--t-primary-light));
        transition: width .6s ease;
        min-width: 4px;
    }

    .bp-mt-traject-meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .bp-mt-traject-meta-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .bp-mt-meta-label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0;
        color: var(--t-muted);
    }

    .bp-mt-meta-value {
        font-size: 13px;
        color: var(--t-mid);
        line-height: 1.4;
    }

    /* ── Fallback kaart (geen ziektedag) ── */
    .bp-mt-fallback {
        background: var(--tly-gold-pale, #f7f0dc);
        border-color: var(--tly-gold, #c9a84c);
    }

    .bp-mt-fallback-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--t-dark);
        margin: 0 0 6px;
    }

    .bp-mt-fallback-sub {
        font-size: 13px;
        color: var(--t-mid);
        margin: 0 0 14px;
    }

    .bp-mt-fallback-link {
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
        color: var(--t-accent);
        text-decoration: none;
        padding: 8px 16px;
        border-radius: 10px;
        background: rgba(181, 103, 58, .1);
        transition: background .12s;
    }

    .bp-mt-fallback-link:hover,
    .bp-mt-fallback-link:active {
        background: rgba(181, 103, 58, .18);
    }

    /* ── 3. Snelle acties ── */
    .bp-mt-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 4px;
    }

    .bp-mt-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 18px 12px 16px;
        background: var(--t-white);
        border: 1px solid var(--t-line);
        border-radius: 18px;
        color: var(--t-dark);
        font-size: 13px;
        font-weight: 600;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
        text-decoration: none;
        cursor: pointer;
        min-height: 80px;
        -webkit-tap-highlight-color: transparent;
        transition: background .12s, transform .1s;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
        box-sizing: border-box;
        text-align: center;
        width: 100%;
    }

    .bp-mt-action:active {
        background: var(--t-cream);
        transform: scale(.97);
    }

    .bp-mt-action.is-disabled {
        opacity: .4;
        pointer-events: none;
    }

    .bp-mt-action[disabled] {
        opacity: .4;
        pointer-events: none;
    }

    .bp-mt-action-icon {
        font-size: 26px;
        line-height: 1;
    }

    .bp-mt-action-text {
        line-height: 1.2;
    }

    /* ── 4. Recente activiteit ── */
    .bp-mt-updates {
        padding: 0;
        overflow: hidden;
    }

    .bp-mt-update-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 14px 20px;
        border-bottom: 1px solid var(--t-line);
    }

    .bp-mt-update-item:last-child {
        border-bottom: none;
    }

    .bp-mt-update-date {
        font-size: 11px;
        font-weight: 700;
        color: var(--t-muted);
        text-transform: uppercase;
        letter-spacing: 0;
    }

    .bp-mt-update-text {
        font-size: 14px;
        color: var(--t-mid);
        line-height: 1.45;
        /* Lange teksten afkappen */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

} /* einde @media (max-width: 1366px), (any-pointer: coarse) */

/* ── Op tablet: 2-koloms grid voor snelle acties ── */
@media (min-width: 600px) and (max-width: 1366px), (min-width: 600px) and (any-pointer: coarse) {

    .bp-mt-shell {
        padding: 0 24px;
        padding-bottom: calc(var(--bp-mobile-nav-height, 64px) + var(--bp-mobile-nav-offset, 10px) + env(safe-area-inset-bottom) + 32px);
        max-width: 640px;
        margin: 0 auto;
    }

    .bp-mt-actions {
        grid-template-columns: repeat(4, 1fr);
    }

    .bp-mt-greeting-title {
        font-size: 30px;
    }

    .mobile-quick-grid {
        grid-template-columns: repeat(4, 1fr);
    }

}

/* ============================================
   Trajectly Mobile Dashboard — vernieuwde layout
   ============================================ */

/* Greeting */
.mobile-greeting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0 4px;
}
.mobile-greeting {
  font-size: 22px;
  font-weight: 500;
}
.mobile-greeting-sub {
  font-size: 13px;
  color: #888780;
  margin-bottom: 16px;
}
.mobile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #C49A5A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
}
.mobile-avatar-img {
  object-fit: cover;
  background: none;
}

/* Trajectstatus kaart */
.mobile-traj-card {
  background: #fff;
  border-radius: 16px;
  border: 0.5px solid rgba(0,0,0,0.1);
  padding: 16px;
  margin-bottom: 12px;
}
.mobile-traj-card--fallback {
  background: #f7f0dc;
  border-color: #c9a84c;
}
.mobile-traj-fallback-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 6px;
}
.mobile-traj-fallback-sub {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 14px;
}
.mobile-traj-fallback-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #e8572a;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(232,87,42,.1);
}
.mobile-traj-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.mobile-traj-label {
  font-size: 10px;
  color: #888780;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mobile-traj-pct-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.mobile-traj-pct {
  font-size: 26px;
  font-weight: 500;
  color: #e8572a;
  line-height: 1;
}
.mobile-traj-pct-sub {
  font-size: 10px;
  color: #888780;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 2px;
}
.mobile-traj-badge {
  display: inline-block;
  background: #e8572a;
  color: #fff;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.mobile-traj-week {
  font-size: 18px;
  font-weight: 500;
  color: #111314;
  margin-bottom: 10px;
}
.mobile-progress-track {
  height: 6px;
  background: #f0ede8;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 12px;
}
.mobile-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #639922 0%, #EF9F27 100%);
  transition: width 0.4s ease;
}
.mobile-traj-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mobile-traj-info {
  background: #f5f3ee;
  border-radius: 8px;
  padding: 8px 10px;
}
.mobile-traj-info-label {
  font-size: 9px;
  color: #888780;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.mobile-traj-info-val {
  font-size: 12px;
  color: #111314;
}

/* Sectie labels */
.mobile-section-label {
  font-size: 10px;
  color: #888780;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 16px 0 8px;
}

/* Snel vastleggen tegels */
.mobile-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.mobile-quick-btn {
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 14px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, transform .1s;
  box-sizing: border-box;
}
.mobile-quick-btn:active {
  transform: scale(.97);
  background: #f5f3ee;
}
.mobile-quick-btn.is-disabled {
  opacity: .4;
  pointer-events: none;
}
.mobile-quick-btn span {
  font-size: 12px;
  color: #2C2C2A;
  text-align: center;
}
.mobile-quick-btn svg {
  display: block;
}
/* Kleuraccenten per tegel */
.mobile-quick-btn.reflectie   { border-top: 2px solid #DDA846; }
.mobile-quick-btn.reflectie svg { color: #DDA846; }
.mobile-quick-btn.logboek     { border-top: 2px solid #3B6D11; }
.mobile-quick-btn.logboek svg { color: #3B6D11; }
.mobile-quick-btn.dagboek     { border-top: 2px solid #185FA5; }
.mobile-quick-btn.dagboek svg { color: #185FA5; }
.mobile-quick-btn.herstel       { border-top: 2px solid #534AB7; }
.mobile-quick-btn.herstel svg   { color: #534AB7; }
.mobile-quick-btn.weekoverzicht { border-top: 2px solid #52606a; }
.mobile-quick-btn.weekoverzicht svg { color: #52606a; }
.mobile-quick-btn.beroepen      { border-top: 2px solid #e8572a; }
.mobile-quick-btn.beroepen svg  { color: #e8572a; }

/* Vandaag kaart (energiecheck) */
.mobile-today-card {
  background: #fff;
  border-radius: 16px;
  border: 0.5px solid rgba(0,0,0,0.1);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.mobile-today-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mobile-today-title {
  font-size: 14px;
  font-weight: 500;
}
.mobile-today-time {
  font-size: 11px;
  color: #888780;
}
.mobile-energy-row {
  display: flex;
  gap: 6px;
}
.mobile-energy-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0.5px solid rgba(0,0,0,0.1);
  background: #f5f3ee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji, sans-serif;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  padding: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.mobile-energy-dot.active,
.mobile-energy-dot:hover {
  background: #EAF3DE;
  border-color: #639922;
}

/* Tip van de dag kaart */
.mobile-tip-card {
  border-radius: 16px;
  border: 0.5px solid #9FE1CB;
  background: #E1F5EE;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.mobile-tip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mobile-tip-badge {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0F6E56;
  background: #9FE1CB;
  padding: 3px 8px;
  border-radius: 6px;
}
.mobile-tip-datum {
  font-size: 11px;
  color: #0F6E56;
}
.mobile-tip-text {
  font-size: 13px;
  color: #085041;
  line-height: 1.6;
}

/* Energie geschiedenis grafiek */
.mobile-energie-chart-card {
  background: #fff;
  border-radius: 16px;
  border: 0.5px solid rgba(0,0,0,0.1);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.mobile-energie-chart-header {
  margin-bottom: 12px;
}
.mobile-energie-chart-title {
  font-size: 14px;
  font-weight: 500;
}
.mobile-energie-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.mobile-energie-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mobile-energie-bar-wrap {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1.5px solid #ece9e3;
}
.mobile-energie-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  transition: height .3s ease;
}
.mobile-energie-bar[data-waarde="0"] { background: transparent; height: 0; }
.mobile-energie-bar[data-waarde="1"] { background: #FFCDD2; }
.mobile-energie-bar[data-waarde="2"] { background: #FFE0B2; }
.mobile-energie-bar[data-waarde="3"] { background: #FFF9C4; border: 0.5px solid #e8e4b0; }
.mobile-energie-bar[data-waarde="4"] { background: #DCEDC8; }
.mobile-energie-bar[data-waarde="5"] { background: #C8E6C9; }
.mobile-energie-bar-dag {
  font-size: 9px;
  color: #888780;
  text-align: center;
  line-height: 1;
}
.mobile-energie-bar-col.is-today .mobile-energie-bar-dag {
  color: #639922;
  font-weight: 700;
}
.mobile-energie-bar-col.is-today .mobile-energie-bar[data-waarde]:not([data-waarde="0"]) {
  outline: 1.5px solid #639922;
  outline-offset: 1px;
}

/* ── Klikbare energiestaven ── */
.mobile-energie-bar-col {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 4px;
  transition: opacity .15s;
}
.mobile-energie-bar-col:hover,
.mobile-energie-bar-col:focus {
  opacity: .72;
  outline: none;
}

/* ── Energie dag-sheet ── */
.energie-dag-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1600;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 32px rgba(0,0,0,.16);
}
.energie-dag-handle {
  width: 36px; height: 4px;
  background: rgba(0,0,0,.15);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.energie-dag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.energie-dag-titel {
  font-size: 16px;
  font-weight: 700;
  color: #111314;
  font-family: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
}
.energie-dag-sluit {
  background: none; border: none;
  font-size: 22px; line-height: 1;
  color: #8a98a4; cursor: pointer;
  padding: 4px;
}
.energie-dag-knoppen {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  padding-bottom: 4px;
}
.energie-dag-dot {
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 24px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji, sans-serif;
  background: #f5f6f8;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.energie-dag-dot.active,
.energie-dag-dot:hover {
  background: #fdeee8;
  border-color: #e8572a;
}

/* Datum onder elke energiestaaf — vaste hoogte zodat alle kolommen gelijk zijn */
.mobile-energie-bar-datum {
  display: block;
  height: 18px;
  margin-top: 8px;
  font-size: 9px;
  color: #8a98a4;
  white-space: nowrap;
  transform: rotate(-35deg);
  transform-origin: center center;
  line-height: 1;
}