.source-foot { display:flex; align-items:center; justify-content:center; gap:5px; font-size:0 !important; line-height:1; color:transparent; cursor:help; }
.source-foot > * { display:none !important; }
.source-foot::before { content:""; display:inline-block; width:8px; height:8px; flex:0 0 8px; margin-right:3px; border:1px solid #fff; border-radius:50%; background:#87938c; box-shadow:0 1px 3px #15282035; }
.source-foot::after { content:"Diensten gesynchroniseerd"; display:inline; color:#526159; font-size:11px; font-weight:600; }
.source-foot[data-cache-state="is-online"]::before { background:#4f965d; }
.source-foot[data-cache-state="is-warning"]::before { background:#d18a22; }
.source-foot[data-cache-state="is-warning"]::after { content:"Synchronisatie vertraagd"; }
.source-foot[data-cache-issue="details"]::after { content:"Ritdetails niet opgehaald"; }
.source-foot[data-cache-issue="stale-details"]::after { content:"Laatst bekende ritdetails"; }
.source-foot[data-cache-state="is-error"]::before { background:#cf2631; }
.source-foot[data-cache-state="is-error"]::after { content:"Synchronisatiefout"; }
.source-foot[data-cache-state="is-offline"]::after { content:"Offline"; }

/* Keep the compact sync signal comfortably legible against the dark footer. */
:root.dark-mode .source-foot::before {
  width:10px;
  height:10px;
  flex-basis:10px;
  border-color:#d8ffe1;
  background:#8a9b90;
  box-shadow:0 0 0 2px #203e2a,0 0 7px #4ee07780;
}
:root.dark-mode .source-foot::after {
  color:#edf7ef !important;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
}
:root.dark-mode .source-foot[data-cache-state="is-online"]::before { background:#58d478; }
:root.dark-mode .source-foot[data-cache-state="is-warning"]::before { background:#f0b54b; box-shadow:0 0 0 2px #4d3b1c; }
:root.dark-mode .source-foot[data-cache-state="is-error"]::before { background:#ff6972; box-shadow:0 0 0 2px #4d2528; }
@media (max-width: 700px) {
  .source-foot[role="button"] { cursor:pointer; min-height:44px; padding-inline:12px; touch-action:manipulation; }
  .source-foot::before { margin-right:5px; }
  .source-foot[data-cache-expanded="true"]::after { content:attr(data-cache-detail); }
  .source-foot[role="button"]:focus-visible { outline:2px solid #477359; outline-offset:-4px; }
  .app .bottom-nav {
    gap: 8px;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  }
  .app .bottom-nav button {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    min-height: 64px;
    padding: 10px 8px;
    border-radius: 18px;
    gap: 8px;
    line-height: 1.35;
    align-items: center;
    justify-content: center;
  }
  .app .content { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}

@media print { .cache-status-dot { display: none; } }