/* ============================================================================
   iKeePass — Diagramm-Skin
   ----------------------------------------------------------------------------
   Semantische Tokens nach dem Design-System des Skills „diagram-design".
   Die Werte stammen NICHT aus dem Standard-Skin, sondern aus der Marken-
   palette dieser Webseite: Violett #667eea → #764ba2 (Hero-Verlauf),
   Blau #3273dc (Bulma-Link), Beinahe-Schwarz #1d1d1f, Tint #f0f4ff.

   Regeln des Systems, die hier gelten:
   • genau EIN Akzent (Violett). „link" ist kein zweiter Akzent, sondern
     ausschliesslich fuer externe/HTTP-Kanten reserviert.
   • paper ist warm-neutral, nicht reinweiss.
   • Rasterweite 4, Radien 4/6/8, Strichstaerken 0.8/1/1.2.
   ========================================================================== */

:root {
  --dg-paper:        #fbfaff;
  --dg-paper-2:      #f0f4ff;
  --dg-ink:          #1d1d1f;
  --dg-muted:        #69707a;
  --dg-soft:         #8f96a3;
  --dg-rule:         rgba(29, 29, 31, 0.12);
  --dg-rule-solid:   #c9cdd6;
  --dg-accent:       #667eea;
  --dg-accent-tint:  rgba(102, 126, 234, 0.09);
  --dg-accent-soft:  rgba(102, 126, 234, 0.45);
  --dg-link:         #3273dc;
  --dg-fill-white:   #ffffff;
  --dg-fill-store:   rgba(29, 29, 31, 0.05);
  --dg-fill-ext:     rgba(29, 29, 31, 0.03);
  --dg-stroke-ext:   rgba(29, 29, 31, 0.30);
  --dg-stroke-opt:   rgba(29, 29, 31, 0.20);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dg-paper:       #1d1d1f;
    --dg-paper-2:     #2a2a2c;
    --dg-ink:         #f5f5f7;
    --dg-muted:       #b4bac4;
    --dg-soft:        #8b93a1;
    --dg-rule:        rgba(245, 245, 247, 0.14);
    --dg-rule-solid:  rgba(201, 205, 214, 0.28);
    --dg-accent:      #8a9bf0;
    --dg-accent-tint: rgba(138, 155, 240, 0.14);
    --dg-accent-soft: rgba(138, 155, 240, 0.50);
    --dg-link:        #6a9ff0;
    --dg-fill-white:  #26262a;
    --dg-fill-store:  rgba(245, 245, 247, 0.06);
    --dg-fill-ext:    rgba(245, 245, 247, 0.04);
    --dg-stroke-ext:  rgba(245, 245, 247, 0.30);
    --dg-stroke-opt:  rgba(245, 245, 247, 0.20);
  }
}

/* Behälter — bewusst ohne Rahmen und Hintergrund („Container is clean by
   default"); das Diagramm sitzt direkt auf der Seite. */
.ikp-diagram {
  margin: 1.75rem 0;
  padding: 0;
}

.ikp-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: visible;
}

/* Schrift: die Webseite nutzt Open Sans. Statt eine zweite Sans-Familie zu
   laden, erbt das Diagramm die Seitenschrift; Mono bleibt der Systemstapel.
   Technische Werte (Ports, Feldnamen, URIs) stehen in Mono, Namen in Sans. */
.ikp-diagram .dg-name    { font-family: inherit; font-size: 12px; font-weight: 600; fill: var(--dg-ink); }
.ikp-diagram .dg-sub     { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; fill: var(--dg-muted); }
.ikp-diagram .dg-eyebrow { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; font-weight: 500;
                           letter-spacing: 0.18em; text-transform: uppercase; fill: var(--dg-soft); }
.ikp-diagram .dg-arrow-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px;
                           letter-spacing: 0.06em; fill: var(--dg-muted); }
.ikp-diagram .dg-note    { font-family: inherit; font-size: 10px; font-style: italic; fill: var(--dg-soft); }
.ikp-diagram .dg-accent-text { fill: var(--dg-accent); }

/* Knotentypen */
.ikp-diagram .dg-node    { fill: var(--dg-fill-white); stroke: var(--dg-ink); stroke-width: 1; }
.ikp-diagram .dg-focal   { fill: var(--dg-accent-tint); stroke: var(--dg-accent); stroke-width: 1.2; }
.ikp-diagram .dg-store   { fill: var(--dg-fill-store); stroke: var(--dg-muted); stroke-width: 1; }
.ikp-diagram .dg-ext     { fill: var(--dg-fill-ext); stroke: var(--dg-stroke-ext); stroke-width: 1; }
.ikp-diagram .dg-opt     { fill: none; stroke: var(--dg-stroke-opt); stroke-width: 0.8; stroke-dasharray: 4 3; }
.ikp-diagram .dg-security{ fill: var(--dg-accent-tint); stroke: var(--dg-accent-soft); stroke-width: 1; stroke-dasharray: 4 4; }
.ikp-diagram .dg-tag     { fill: none; stroke: var(--dg-rule-solid); stroke-width: 0.8; }

/* Kanten */
.ikp-diagram .dg-edge    { fill: none; stroke: var(--dg-muted); stroke-width: 1; }
.ikp-diagram .dg-edge-accent { fill: none; stroke: var(--dg-accent); stroke-width: 1.2; }
.ikp-diagram .dg-edge-link   { fill: none; stroke: var(--dg-link); stroke-width: 1; }
.ikp-diagram .dg-edge-dashed { fill: none; stroke: var(--dg-stroke-opt); stroke-width: 0.8; stroke-dasharray: 4 3; }
.ikp-diagram .dg-rule    { stroke: var(--dg-rule); stroke-width: 1; }