/* ============================================================================
   DAGB SiteMonitor — V2 globale nav-styling
   Was eerder via JS geïnjecteerd (zie staging-v2-nav.js); verplaatst naar
   echte CSS-file omdat CSP `style-src-elem` geen inline-injects toelaat.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Mobile burger-menu
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .app-nav { display: none; }
  .app-burger { display: flex; align-items: center; justify-content: center; }
  .app-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--teal-dark);
    padding: 8px;
    gap: 4px;
    z-index: 25;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
  .app-nav.open .app-pill,
  .app-nav.open a.app-user {
    width: 100%;
    justify-content: flex-start;
    border-radius: 8px;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------------
   UI-isolatie: eindklant is read-only — verberg actie-knoppen
   --------------------------------------------------------------------------- */
body[data-role="customer"] #addSiteBtn,
body[data-role="customer"] #addCustomerBtn,
body[data-role="customer"] #editBtn,
body[data-role="customer"] #moreBtn,
body[data-role="customer"] #menuBtn,
body[data-role="customer"] #settingsBtn,
body[data-role="customer"] #scanBtn,
body[data-role="customer"] #addContact,
body[data-role="customer"] .row-actions,
body[data-role="customer"] .contact-remove,
body[data-role="customer"] .contact-add {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Self-protection: reseller op eigen account
   - Geen type-toggle (mag eigen rol niet wijzigen)
   - Geen gevarenzone / Klant verwijderen
   - Klantgegevens-sectie verbergen — info zit in eigen Voorkeuren
   --------------------------------------------------------------------------- */
body[data-self-account="1"] .segmented[role="radiogroup"] {
  pointer-events: none;
  opacity: 0.5;
}
body[data-self-account="1"] #gevarenzone,
body[data-self-account="1"] .anchor-item.danger {
  display: none !important;
}
body[data-self-account="1"] #infoSection {
  display: none !important;
}
body[data-self-account="1"] #menuDeleteCustomer {
  display: none !important;
}
/* Toegang geven/intrekken slaat nergens op voor je eigen account */
body[data-self-account="1"] #menuGrantAccess,
body[data-self-account="1"] #menuRevokeAccess {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Forced password change — banner op /voorkeuren
   Alleen zichtbaar als nav.js detecteert dat /api/v2/me zegt mustChangePassword.
   Andere voorkeuren-secties worden verborgen zodat de gebruiker niets anders
   kan doen voordat 'ie 'm wijzigt.
   --------------------------------------------------------------------------- */
.must-change-banner {
  display: none;
}
body[data-must-change-password="1"] .must-change-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #FFF8E1;
  border: 1px solid #F0E4B8;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  color: #7A5A1F;
}
body[data-must-change-password="1"] .must-change-banner .ic {
  flex-shrink: 0;
  margin-top: 2px;
  stroke: #7A5A1F;
}
body[data-must-change-password="1"] .must-change-text strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
body[data-must-change-password="1"] .must-change-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
/* Verberg andere voorkeuren-secties zolang het wachtwoord niet gewijzigd is */
body[data-must-change-password="1"] #sectionOnboard,
body[data-must-change-password="1"] #sectionThreshold,
body[data-must-change-password="1"] #sectionBrand {
  display: none !important;
}

/* Merkprofiel sectie alleen voor resellers — admin en customer zien 'm niet */
#sectionBrand { display: none; }
body[data-role="reseller"] #sectionBrand { display: block; }

/* Voor customer-rol: Rondleiding (geen tour) en Offline-alerts (reseller-side
   beheerd) zijn niet relevant. Alleen Wachtwoord-sectie blijft over. */
body[data-role="customer"] #sectionOnboard,
body[data-role="customer"] #sectionThreshold {
  display: none !important;
}

/* Fase 3.1a — Reseller-rol heeft geen sub-resellers. RESELLERS-counter is dus
   altijd 0 en verwarrend. Verbergen. */
body[data-role="reseller"] #kpiResellersCard {
  display: none !important;
}

/* Fase 3.1b — "RESELLER" type-tag op eigen self-row is redundant ("Jouw" badge
   zegt 't al). Plus voor reseller-rol zijn alle ANDERE rijen klanten — daar
   is type-tag ook redundant. Voor admin behouden we 'm. */
body[data-role="reseller"] .row .cust-type {
  display: none;
}

/* Op /meldingen: klant-naam-pill is voor customer-rol altijd henzelf
   (redundant). Alleen tonen voor admin/reseller die meerdere klanten beheren. */
body[data-role="customer"] .event-meta-cust {
  display: none;
}
/* En verberg de separator die direct voor de cust-pill komt (anders blijft
   er een hangend "·" over wanneer er ook een mail/digest pill is). */
body[data-role="customer"] .event-meta-sep:has(+ .event-meta-cust) {
  display: none;
}

/* Globale [hidden] regel — zorgt dat hidden=true ALTIJD wint, ook bij elementen
   die via class display:flex/grid/inline-flex hebben. Vervangt diverse ad-hoc
   `.foo[hidden]{display:none}` workarounds verspreid over de stylesheets
   (task #85 — senior-dev review 2026-05-10). nav.css wordt op alle v2-pagina's
   geladen, dus regel werkt globaal. */
[hidden] {
  display: none !important;
}

/* SVG sprite-container — verborgen <svg> die alleen <symbol>-definities bevat
   voor <use href="#id">. position:absolute haalt 'm uit de layout-flow.
   width/height attributes op de <svg> doen al het meeste werk; deze regel was
   vroeger inline op elke pagina. */
.svg-sprite {
  position: absolute;
}

/* ---------------------------------------------------------------------------
   Shared form-field styles — gebruikt in modals op /02 en /05.
   Modal-styling (overlay, close, foot-info, intro, btn-primary-modal) verplaatst
   naar staging-v2-modal.css — #81.
   --------------------------------------------------------------------------- */
.field { margin-bottom: 14px; }
.label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text, #2C2A26);
}
.required { color: var(--danger, #A32D2D); }
.field-hint {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--muted, #6F6E68);
  line-height: 1.4;
}
/* .btn-primary-modal verplaatst naar staging-v2-modal.css — #81 */

.grant-success-box {
  background: #E6F4F1;
  border: 1px solid #B8DDD7;
  border-radius: var(--r-md, 8px);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.grant-success-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #0C6B63;
  display: flex;
  align-items: center;
  gap: 6px;
}
.grant-success-desc {
  margin: 0;
  font-size: 12.5px;
  color: #2C2A26;
  line-height: 1.5;
}
.copy-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.copy-row .input { flex: 1; }
.input.mono {
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.05em;
  font-size: 14px;
}

@media (prefers-color-scheme: dark) {
  .grant-success-box { background: #1F2E2C; border-color: #2A4540; }
  .grant-success-title { color: #5BB8AD; }
  .grant-success-desc { color: #EFEDE8; }
}

/* White-label logo: vervangt ⚡-icoontje in app-header. Past zich aan aan
   bestaande logo-grootte (22px hoog), met een veilige max-breedte. */
.app-brand-logo {
  height: 22px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   White-label brand_color — overschrijft platform-teal globaal als gezet.
   Zo zien resellers en hun klanten dezelfde accent-kleur op elke pagina.
   --teal-dark wordt door JS in nav.js gevuld met een 15% donkerder variant
   voor hover-states (zodat hover nog steeds contrast geeft).
   --------------------------------------------------------------------------- */
body.has-brand-color {
  --teal: var(--brand-color);
  --teal-dark: var(--brand-color-dark, var(--brand-color));
  /* Page-bg: van DAGB-beige naar neutraal lichtgrijs zodat 't met elke
     brand-kleur werkt. Cards/inputs blijven wit (--card var). */
  --bg: #F5F5F7;
}

/* Color-row binnen merkprofiel: picker + hex + reset-knop op één regel */
.brand-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-color-picker {
  width: 50px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 2px;
  background: var(--card);
  cursor: pointer;
}
.brand-color-hex {
  max-width: 140px;
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  body[data-must-change-password="1"] .must-change-banner {
    background: #2E281A;
    border-color: #4A3D1F;
    color: #E8D7A0;
  }
  body[data-must-change-password="1"] .must-change-banner .ic {
    stroke: #E8D7A0;
  }
}

/* ---------------------------------------------------------------------------
   Dark-mode polish: skip-link, focus-states, search-icon
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  /* Skip-link: was wit-op-wit zichtbaar; in dark wordt-ie nu een teal pill */
  .skip-link {
    background: #2A2825;
    color: #5BB8AD;
    border-color: #5BB8AD;
  }
  /* Focus-outline van page-knoppen: standaard --teal lichter in dark, beter zichtbaar */
  .icon-btn:focus-visible,
  .btn-primary:focus-visible,
  .btn-secondary:focus-visible,
  .search-input:focus,
  .select:focus {
    outline-color: #5BB8AD;
  }
  /* Search-icon was te subtiel in dark */
  .search-icon {
    color: #B8B5AE;
  }
}

/* Verberg [data-admin-only] nav-elementen voor non-admin users.
   !important als vangnet — .app-pill class kan equal-specificity hebben. */
body:not([data-role="admin"]) [data-admin-only]{display:none !important}