/* Dashboard-kit Meerburg & Mok: app-wisselaar. Alles met voorvoegsel mmd-
   zodat het niet botst met de stijlen van de tools zelf. */

[data-mm-wisselaar] { display: inline-flex; align-items: center; flex-shrink: 0; }
[data-mm-wisselaar]:empty { display: none; }

.mmd-knop {
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .28); background: transparent; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; margin: 0; transition: background .15s ease, border-color .15s ease;
}
.mmd-knop:hover, .mmd-knop[aria-expanded="true"] { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); }
.mmd-knop:focus-visible { outline: 2px solid #e2c98a; outline-offset: 2px; }
.mmd-knop-licht { border-color: #d3dbe5; color: #1a3a5c; background: #fff; }
.mmd-knop-licht:hover, .mmd-knop-licht[aria-expanded="true"] { background: #eef3f9; border-color: #b9c6d6; }
.mmd-knop-licht:focus-visible { outline-color: #1a3a5c; }

.mmd-paneel {
  position: fixed; z-index: 2147483000; box-sizing: border-box;
  background: #fff; color: #1d2733; border: 1px solid #e3e8ef; border-radius: 16px;
  box-shadow: 0 28px 60px -18px rgba(15, 30, 50, .45);
  padding: 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto;
  font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 14px; line-height: 1.35; text-align: left;
}
.mmd-paneel[hidden] { display: none; }
.mmd-paneel a { text-decoration: none; }

.mmd-start {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: #1a3a5c; color: #fff !important; font-weight: 650;
}
.mmd-start:hover { background: #142e4a; }

.mmd-groep { display: flex; flex-direction: column; gap: 8px; }
.mmd-groepnaam { font-size: 12px; font-weight: 700; color: #5a6b80; letter-spacing: .06em; text-transform: uppercase; }
.mmd-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.mmd-tool {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; border-radius: 10px;
  background: #f6f8fb; border: 1px solid #edf1f6; color: #1d2733 !important; min-height: 44px; box-sizing: border-box;
}
.mmd-tool:hover { background: #eef3f9; border-color: #d3dbe5; }
.mmd-tool:focus-visible, .mmd-start:focus-visible { outline: 2px solid #b8923a; outline-offset: 2px; }
.mmd-hier { background: #f7f0df; border-color: #e6d3a3; }
.mmd-toolnaam { font-weight: 650; font-size: 14px; }
.mmd-toolwat { font-size: 12px; color: #5a6b80; }
.mmd-hier .mmd-toolwat { color: #6b5a33; }

/* Eigen balk voor tools zonder kopbalk */
.mmd-balk {
  display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: #1a3a5c; color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
}
.mmd-merk { display: flex; align-items: baseline; gap: 10px; color: #fff !important; text-decoration: none; }
.mmd-merknaam { font-weight: 700; font-size: 16px; }
.mmd-merksub { font-size: 13px; font-weight: 600; color: #e2c98a; }

@media (max-width: 640px) {
  .mmd-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mmd-paneel { padding: 14px; }
}
@media (max-width: 380px) {
  .mmd-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .mmd-knop { transition: none; } }

/* Zwevende knop voor apps die het hele venster vullen (data-mm-zwevend, data-mm-zwevend-mobiel) */
.mmd-zwevend { position: fixed; z-index: 2000; left: var(--mmd-x, 8px); top: var(--mmd-y, 8px); bottom: var(--mmd-b, auto); }
.mmd-zwevend .mmd-knop { width: 36px; height: 36px; }
@media (max-width: 700px) {
  .mmd-zwevend { left: var(--mmd-x-mobiel, var(--mmd-x, 8px)); top: var(--mmd-y-mobiel, 2px); }
  .mmd-zwevend .mmd-knop { width: 32px; height: 32px; }
  .mmd-zwevend.mmd-geen-mobiel { display: none; }
}
.mmd-afmelden { display: block; margin-top: 14px; padding-top: 10px; border-top: 1px solid #e3e8ef;
  font-size: 13px; color: #5a6b80; }
.mmd-afmelden:hover { color: #1a3a5c; text-decoration: underline; }
.mmd-afmelden:focus-visible { outline: 2px solid #b8923a; outline-offset: 2px; }