/* ============================================================================
   QOVERED APP SHELL — themed chrome (header, tabs, page) on the design tokens.
   Loaded after style.css so it overrides the legacy shell. Feature tab CONTENT
   is migrated separately; this gives the app its new frame + Dashboard.
   ============================================================================ */

#dashboard { background: var(--q-bg); min-height: 100vh; color: var(--q-text);
  font-family: var(--q-font-sans); }

/* ---- App bar ---- */
#dashboard header { background: var(--q-bg) !important; box-shadow: none !important;
  border-bottom: 1px solid var(--q-border); position: sticky; top: 0; z-index: 50; }
.q-appbar-inner { max-width: 960px; margin: 0 auto; height: 62px; display: flex;
  align-items: center; justify-content: space-between; padding: 0 18px; }
.q-brand { display: flex; align-items: center; gap: 10px; }
.q-brand svg { width: 26px; height: 26px; display: block; }
.q-brand-name { font-family: var(--q-font-display); font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em; color: var(--q-text); }
.q-appbar-actions { display: flex; align-items: center; gap: 4px; }
.q-iconbtn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: none;
  background: transparent; color: var(--q-text-secondary); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; transition: background var(--q-dur-fast), color var(--q-dur-fast);
  text-decoration: none; padding: 0; }
.q-iconbtn:hover { background: var(--q-surface-2); color: var(--q-text); }
.q-iconbtn--warn { color: var(--q-warning); }
.q-iconbtn .q-dot { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 9px; background: var(--q-danger); color: #fff; font-size: 10px;
  font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
#dashboard .q-avatar-btn { width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: var(--q-accent-soft); color: var(--q-accent-soft-text); display: flex; align-items: center;
  justify-content: center; font-family: var(--q-font-display); font-weight: 700; font-size: 14px; overflow: hidden; }
#dashboard .q-avatar-btn img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Tab bar (override legacy) ---- */
#dashboard #appTabs.app-tabs { max-width: 960px; margin: 0 auto; padding: 14px 18px 0;
  gap: 2px; border: none; background: transparent; }
#dashboard .app-tab { color: var(--q-text-muted); font-family: var(--q-font-sans); font-weight: 600;
  border-radius: var(--q-radius-sm); }
#dashboard .app-tab:hover { color: var(--q-text-secondary); background: var(--q-surface-2); }
#dashboard .app-tab.active { color: var(--q-accent); background: transparent; }
#dashboard .app-tab.active::after { background: var(--q-accent); }

/* ---- Panels ---- */
#dashboard .tab-panel { max-width: 960px; margin: 0 auto; padding: 4px 18px 60px; }
#balansScope { background: transparent !important; padding: 4px 0 40px !important; }

/* ---- Dashboard (Overzicht) ---- */
.dash { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
.dash-hero { background: var(--q-surface); background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 42%);
  border-radius: var(--q-radius-xl); padding: 26px 22px; text-align: center; border: 1px solid var(--q-border); }
.dash-hero .lab { font-size: var(--q-text-sm); color: var(--q-text-muted); font-weight: 600; }
.dash-hero .big { margin: 8px 0 4px; font-size: 46px; }
.dash-hero .yr { font-size: var(--q-text-sm); color: var(--q-text-muted); }
.dash-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-cat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 15px 2px; cursor: pointer; }
.dash-cat + .dash-cat { border-top: 1px solid var(--q-border); }
.dash-donut { display: flex; align-items: center; gap: 18px; }
.dash-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dash-legend-row { display: flex; align-items: center; gap: 8px; font-size: var(--q-text-sm); }
.dash-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dash-legend-val { margin-left: auto; font-family: var(--q-font-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--q-text); }
@media (max-width: 560px) { .dash-grid2 { grid-template-columns: 1fr; } }