/*
 * Wormwood Design System v1.0
 * ===========================
 * Central design-token file for every admin/rule-editor template.
 *
 * Usage in any template:
 *   <link rel="stylesheet" href="{{ url_for('static', filename='wormwood/design-system.css') }}">
 *
 * Token naming convention:
 *   --ww-{category}-{variant}
 *
 * Token categories:
 *   bg            — background layers
 *   border        — border colours
 *   accent        — primary brand green
 *   blue          — link / secondary
 *   cyan          — info / trace
 *   purple        — decorative / power
 *   amber         — warnings / opex
 *   red           — errors
 *   green         — success (alias of accent)
 *   text          — typographic hierarchy
 *   rule-type-*   — per rule-type colour
 *   radius        — border radii
 *   shadow        — elevation
 *   anim          — animation timing
 */

/* ── Google Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Tokens ───────────────────────────────────────────────────────── */
:root {
  /* Backgrounds — 5-layer depth model (orchestrator dark-green palette) */
  --ww-bg-void:      #060909;   /* deepest — behind everything          */
  --ww-bg-base:      #0a0c10;   /* page background                      */
  --ww-bg-surface:   #0e1510;   /* cards, panels, sidebar               */
  --ww-bg-elevated:  #131e15;   /* inputs, dropdowns, tool rows         */
  --ww-bg-overlay:   #1a2a1e;   /* popovers, tooltips                   */

  /* Borders (green-tinted to match orchestrator) */
  --ww-border:       #1a3520;   /* default border                       */
  --ww-border-mid:   #2a5038;   /* focused / hover border               */
  --ww-border-bright:#19e28a;   /* active / selected border             */

  /* Brand green — primary accent (matches IA_ORCHESTRATOR #19E28A) */
  --ww-accent:       #19e28a;   /* primary CTA, logo, active state      */
  --ww-accent-dim:   #0da85f;   /* hover on accent buttons              */
  --ww-accent-subtle:rgba(25,226,138,.10); /* ghost hover backgrounds   */
  --ww-accent-glow:  rgba(25,226,138,.25); /* glow rings, pulses        */

  /* Blue — secondary / links */
  --ww-blue:         #4a9eff;
  --ww-blue-dim:     #2d7ed6;
  --ww-blue-subtle:  rgba(74,158,255,.12);

  /* Cyan — trace / info */
  --ww-cyan:         #22d3ee;
  --ww-cyan-subtle:  rgba(34,211,238,.12);

  /* Purple — power/decoration */
  --ww-purple:       #818cf8;
  --ww-purple-subtle:rgba(129,140,248,.12);

  /* Amber — warnings / OPEX */
  --ww-amber:        #f59e0b;
  --ww-amber-subtle: rgba(245,158,11,.12);

  /* Red — errors */
  --ww-red:          #ef4444;
  --ww-red-subtle:   rgba(239,68,68,.12);

  /* Teal — infrastructure / success alt */
  --ww-teal:         #34d399;
  --ww-teal-subtle:  rgba(52,211,153,.12);

  /* Orange — energy */
  --ww-orange:       #fb923c;
  --ww-orange-subtle:rgba(251,146,60,.12);

  /* Text hierarchy */
  --ww-text-primary:   #e8f0fe;  /* headings, body                      */
  --ww-text-secondary: #8ba0b8;  /* labels, descriptions                */
  --ww-text-dim:       #4a6480;  /* placeholders, metadata              */
  --ww-text-inverse:   #080c18;  /* text on accent bg                   */

  /* Rule-type semantic colours */
  --ww-type-capex:          var(--ww-blue);
  --ww-type-opex:           var(--ww-amber);
  --ww-type-tco:            var(--ww-accent);
  --ww-type-power:          var(--ww-purple);
  --ww-type-infrastructure: var(--ww-teal);
  --ww-type-energy:         var(--ww-orange);

  /* Technology colours */
  --ww-tech-grc:         var(--ww-accent);
  --ww-tech-traditional: var(--ww-blue);
  --ww-tech-rdhx:        var(--ww-cyan);
  --ww-tech-dlc:         var(--ww-purple);
  --ww-tech-global:      var(--ww-text-dim);

  /* Typography */
  --ww-font-ui:   'Inter', system-ui, -apple-system, sans-serif;
  --ww-font-code: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Radii */
  --ww-radius-sm:  4px;
  --ww-radius-md:  8px;
  --ww-radius-lg:  12px;
  --ww-radius-xl:  16px;
  --ww-radius-full: 9999px;

  /* Shadows */
  --ww-shadow-sm:  0 1px 3px rgba(0,0,0,.6);
  --ww-shadow-md:  0 4px 16px rgba(0,0,0,.5);
  --ww-shadow-lg:  0 8px 32px rgba(0,0,0,.6);
  --ww-shadow-accent: 0 0 0 3px var(--ww-accent-glow);
  --ww-shadow-blue:   0 0 0 3px rgba(74,158,255,.25);

  /* Animation */
  --ww-anim-fast:   120ms ease;
  --ww-anim-mid:    220ms ease;
  --ww-anim-slow:   380ms ease;
}

/* ── Base reset ───────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ww-bg-base);
  color: var(--ww-text-primary);
  font-family: var(--ww-font-ui);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography utilities ─────────────────────────────────────────── */
.ww-font-code { font-family: var(--ww-font-code); }
.ww-text-primary   { color: var(--ww-text-primary)   !important; }
.ww-text-secondary { color: var(--ww-text-secondary) !important; }
.ww-text-dim       { color: var(--ww-text-dim)       !important; }
.ww-text-accent    { color: var(--ww-accent)          !important; }
.ww-text-blue      { color: var(--ww-blue)            !important; }
.ww-text-cyan      { color: var(--ww-cyan)            !important; }
.ww-text-amber     { color: var(--ww-amber)           !important; }
.ww-text-red       { color: var(--ww-red)             !important; }

/* ── Layout helpers ───────────────────────────────────────────────── */
.ww-surface  { background: var(--ww-bg-surface);  border-radius: var(--ww-radius-md); }
.ww-elevated { background: var(--ww-bg-elevated); border-radius: var(--ww-radius-sm); }

.ww-card {
  background: var(--ww-bg-surface);
  border: 1px solid var(--ww-border);
  border-radius: var(--ww-radius-md);
  padding: 1.25rem;
}

.ww-card--accent-top {
  border-top-width: 2px;
  border-top-color: var(--ww-accent);
}
.ww-card--blue-top   { border-top: 2px solid var(--ww-blue); }
.ww-card--amber-top  { border-top: 2px solid var(--ww-amber); }
.ww-card--cyan-top   { border-top: 2px solid var(--ww-cyan); }
.ww-card--purple-top { border-top: 2px solid var(--ww-purple); }
.ww-card--red-top    { border-top: 2px solid var(--ww-red); }

/* ── Navbar ───────────────────────────────────────────────────────── */
.ww-navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  height: 52px;
  background: var(--ww-bg-surface);
  border-bottom: 1px solid var(--ww-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.ww-navbar__brand img {
  height: 32px;
  display: block;
}

.ww-navbar__version {
  font-family: var(--ww-font-code);
  font-size: 10px;
  color: var(--ww-text-dim);
  background: var(--ww-bg-elevated);
  border: 1px solid var(--ww-border);
  border-radius: var(--ww-radius-full);
  padding: 1px 7px;
  margin-left: auto;
}

.ww-navbar__user {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ww-text-secondary);
  font-size: 12px;
}

/* ── Admin nav tabs ───────────────────────────────────────────────── */
.ww-nav {
  display: flex;
  gap: 2px;
  background: var(--ww-bg-surface);
  border: 1px solid var(--ww-border);
  border-radius: var(--ww-radius-md);
  padding: 4px;
  margin-bottom: 1.5rem;
}

.ww-nav__link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--ww-radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ww-text-secondary);
  text-decoration: none;
  transition: background var(--ww-anim-fast), color var(--ww-anim-fast);
  white-space: nowrap;
}

.ww-nav__link:hover {
  background: var(--ww-bg-elevated);
  color: var(--ww-text-primary);
  text-decoration: none;
}

.ww-nav__link.active {
  background: var(--ww-bg-elevated);
  color: var(--ww-accent);
  border: 1px solid var(--ww-border);
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.ww-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--ww-radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--ww-font-ui);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ww-anim-fast), border-color var(--ww-anim-fast),
              box-shadow var(--ww-anim-fast);
  text-decoration: none;
  white-space: nowrap;
}

.ww-btn--primary {
  background: var(--ww-accent);
  border-color: var(--ww-accent);
  color: var(--ww-text-inverse);
}
.ww-btn--primary:hover {
  background: var(--ww-accent-dim);
  border-color: var(--ww-accent-dim);
  color: var(--ww-text-inverse);
}
.ww-btn--primary:focus-visible { outline: none; box-shadow: var(--ww-shadow-accent); }

.ww-btn--ghost {
  background: transparent;
  border-color: var(--ww-border);
  color: var(--ww-text-secondary);
}
.ww-btn--ghost:hover {
  background: var(--ww-bg-elevated);
  border-color: var(--ww-border-mid);
  color: var(--ww-text-primary);
}

.ww-btn--danger {
  background: transparent;
  border-color: var(--ww-red);
  color: var(--ww-red);
}
.ww-btn--danger:hover {
  background: var(--ww-red-subtle);
}

.ww-btn:disabled, .ww-btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

/* ── Form controls ────────────────────────────────────────────────── */
.ww-input,
.ww-select,
.ww-textarea {
  background: var(--ww-bg-elevated);
  border: 1px solid var(--ww-border);
  border-radius: var(--ww-radius-sm);
  color: var(--ww-text-primary);
  font-family: var(--ww-font-ui);
  font-size: 12.5px;
  padding: 5px 9px;
  width: 100%;
  transition: border-color var(--ww-anim-fast), box-shadow var(--ww-anim-fast);
}

.ww-input:focus,
.ww-select:focus,
.ww-textarea:focus {
  outline: none;
  border-color: var(--ww-border-bright);
  box-shadow: var(--ww-shadow-blue);
}

.ww-input.ww-input--code,
.ww-textarea.ww-textarea--code {
  font-family: var(--ww-font-code);
  font-size: 12px;
  color: var(--ww-accent);
}

.ww-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ww-text-dim);
  margin-bottom: 4px;
}

.ww-field { margin-bottom: 10px; }

/* ── Badges ───────────────────────────────────────────────────────── */
.ww-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: var(--ww-radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.ww-badge--capex         { background:rgba(74,158,255,.15); color:var(--ww-blue);   border-color:rgba(74,158,255,.3); }
.ww-badge--opex          { background:var(--ww-amber-subtle); color:var(--ww-amber); border-color:rgba(245,158,11,.3); }
.ww-badge--tco           { background:var(--ww-accent-subtle); color:var(--ww-accent); border-color:rgba(25,226,138,.3); }
.ww-badge--power         { background:var(--ww-purple-subtle); color:var(--ww-purple); border-color:rgba(129,140,248,.3); }
.ww-badge--infrastructure{ background:var(--ww-teal-subtle);   color:var(--ww-teal);   border-color:rgba(52,211,153,.3); }
.ww-badge--energy        { background:var(--ww-orange-subtle); color:var(--ww-orange); border-color:rgba(251,146,60,.3); }

.ww-badge--grc          { background:var(--ww-accent-subtle); color:var(--ww-accent); border-color:rgba(25,226,138,.3); }
.ww-badge--traditional  { background:var(--ww-blue-subtle);   color:var(--ww-blue);   border-color:rgba(74,158,255,.3); }
.ww-badge--rdhx         { background:var(--ww-cyan-subtle);   color:var(--ww-cyan);   border-color:rgba(34,211,238,.3); }
.ww-badge--dlc          { background:var(--ww-purple-subtle); color:var(--ww-purple); border-color:rgba(129,140,248,.3); }
.ww-badge--global       { background:rgba(74,100,128,.15);    color:var(--ww-text-dim); border-color:rgba(74,100,128,.3); }

.ww-badge--success { background:var(--ww-accent-subtle); color:var(--ww-accent); border-color:rgba(25,226,138,.3); }
.ww-badge--warning { background:var(--ww-amber-subtle);  color:var(--ww-amber);  border-color:rgba(245,158,11,.3); }
.ww-badge--danger  { background:var(--ww-red-subtle);    color:var(--ww-red);    border-color:rgba(239,68,68,.3); }
.ww-badge--info    { background:var(--ww-cyan-subtle);   color:var(--ww-cyan);   border-color:rgba(34,211,238,.3); }

/* Rule-type prefixed aliases — used as .ww-badge--type-<rule_type> in templates */
.ww-badge--type-capex          { background:rgba(74,158,255,.15); color:var(--ww-blue);   border-color:rgba(74,158,255,.3); }
.ww-badge--type-opex           { background:var(--ww-amber-subtle); color:var(--ww-amber); border-color:rgba(245,158,11,.3); }
.ww-badge--type-tco            { background:var(--ww-accent-subtle); color:var(--ww-accent); border-color:rgba(25,226,138,.3); }
.ww-badge--type-power          { background:var(--ww-purple-subtle); color:var(--ww-purple); border-color:rgba(129,140,248,.3); }
.ww-badge--type-infrastructure { background:var(--ww-teal-subtle);   color:var(--ww-teal);   border-color:rgba(52,211,153,.3); }
.ww-badge--type-energy         { background:var(--ww-orange-subtle); color:var(--ww-orange); border-color:rgba(251,146,60,.3); }

/* Technology prefixed aliases — used as .ww-badge--tech-<technology> in templates */
.ww-badge--tech-grc         { background:var(--ww-accent-subtle); color:var(--ww-accent); border-color:rgba(25,226,138,.3); }
.ww-badge--tech-traditional { background:var(--ww-blue-subtle);   color:var(--ww-blue);   border-color:rgba(74,158,255,.3); }
.ww-badge--tech-rdhx        { background:var(--ww-cyan-subtle);   color:var(--ww-cyan);   border-color:rgba(34,211,238,.3); }
.ww-badge--tech-dlc         { background:var(--ww-purple-subtle); color:var(--ww-purple); border-color:rgba(129,140,248,.3); }

/* ── Stat card ────────────────────────────────────────────────────── */
.ww-stat-card {
  background: var(--ww-bg-surface);
  border: 1px solid var(--ww-border);
  border-top: 3px solid var(--ww-accent);
  border-radius: var(--ww-radius-md);
  padding: 1.25rem;
  text-align: center;
  transition: border-top-color var(--ww-anim-mid), box-shadow var(--ww-anim-mid);
}
.ww-stat-card:hover { box-shadow: var(--ww-shadow-md); }

.ww-stat-card__value {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--ww-accent);
  line-height: 1.1;
  margin: .4rem 0;
  font-variant-numeric: tabular-nums;
}
.ww-stat-card__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ww-text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ww-stat-card__sub {
  font-size: 11px;
  color: var(--ww-text-dim);
  margin-top: 4px;
}

/* Stat card colour variants */
.ww-stat-card.stat-blue   { border-top-color: var(--ww-blue);   }
.ww-stat-card.stat-blue   .ww-stat-card__value { color: var(--ww-blue); }
.ww-stat-card.stat-amber  { border-top-color: var(--ww-amber);  }
.ww-stat-card.stat-amber  .ww-stat-card__value { color: var(--ww-amber); }
.ww-stat-card.stat-red    { border-top-color: var(--ww-red);    }
.ww-stat-card.stat-red    .ww-stat-card__value { color: var(--ww-red); }
.ww-stat-card.stat-cyan   { border-top-color: var(--ww-cyan);   }
.ww-stat-card.stat-cyan   .ww-stat-card__value { color: var(--ww-cyan); }
.ww-stat-card.stat-purple { border-top-color: var(--ww-purple); }
.ww-stat-card.stat-purple .ww-stat-card__value { color: var(--ww-purple); }

/* BEM modifier aliases — ww-stat-card--<colour> (used in health.html, dashboard.html) */
.ww-stat-card--blue        { border-top-color: var(--ww-blue); }
.ww-stat-card--blue .ww-stat-card__value { color: var(--ww-blue); }
.ww-stat-card--amber       { border-top-color: var(--ww-amber); }
.ww-stat-card--amber .ww-stat-card__value { color: var(--ww-amber); }
.ww-stat-card--accent      { border-top-color: var(--ww-accent); }
.ww-stat-card--accent .ww-stat-card__value { color: var(--ww-accent); }
.ww-stat-card--red         { border-top-color: var(--ww-red); }
.ww-stat-card--red .ww-stat-card__value { color: var(--ww-red); }
.ww-stat-card--cyan        { border-top-color: var(--ww-cyan); }
.ww-stat-card--cyan .ww-stat-card__value { color: var(--ww-cyan); }
.ww-stat-card--purple      { border-top-color: var(--ww-purple); }
.ww-stat-card--purple .ww-stat-card__value { color: var(--ww-purple); }
.ww-stat-card--teal        { border-top-color: var(--ww-teal); }
.ww-stat-card--teal .ww-stat-card__value { color: var(--ww-teal); }
.ww-stat-card--orange      { border-top-color: var(--ww-orange); }
.ww-stat-card--orange .ww-stat-card__value { color: var(--ww-orange); }

/* ── Status dot ───────────────────────────────────────────────────── */
.ww-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
}
.ww-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ww-status--ok     .ww-status__dot { background: var(--ww-accent);  box-shadow: 0 0 6px var(--ww-accent-glow); }
.ww-status--warn   .ww-status__dot { background: var(--ww-amber); }
.ww-status--error  .ww-status__dot { background: var(--ww-red); }
.ww-status--unknown .ww-status__dot { background: var(--ww-text-dim); }
.ww-status--ok    { color: var(--ww-accent);  }
.ww-status--warn  { color: var(--ww-amber);  }
.ww-status--error { color: var(--ww-red);    }
.ww-status--unknown { color: var(--ww-text-dim); }

/* Standalone dot aliases (no __dot child needed) */
.ww-status--active   { width:8px; height:8px; border-radius:50%; background:var(--ww-accent); box-shadow:0 0 5px var(--ww-accent-glow); flex-shrink:0; }
.ww-status--inactive { width:8px; height:8px; border-radius:50%; background:var(--ww-text-dim); flex-shrink:0; }
.ww-status--active.ww-status--active  { color: var(--ww-accent); }
.ww-status--inactive.ww-status--inactive { color: var(--ww-text-dim); }

/* ── Scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar             { width: 6px; height: 6px; }
::-webkit-scrollbar-track       { background: var(--ww-bg-base); }
::-webkit-scrollbar-thumb       { background: var(--ww-border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ww-border-bright); }

/* ── Dividers / HR ────────────────────────────────────────────────── */
.ww-divider {
  border: none;
  border-top: 1px solid var(--ww-border);
  margin: 12px 0;
}

/* ── Alert / Flash ────────────────────────────────────────────────── */
.ww-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--ww-radius-sm);
  font-size: 12.5px;
  margin-bottom: 10px;
  border: 1px solid;
}
.ww-alert--success { background: var(--ww-accent-subtle); border-color: rgba(57,211,83,.3);  color: var(--ww-accent); }
.ww-alert--warning { background: var(--ww-amber-subtle);  border-color: rgba(245,158,11,.3); color: var(--ww-amber); }
.ww-alert--danger  { background: var(--ww-red-subtle);    border-color: rgba(239,68,68,.3);  color: var(--ww-red); }
.ww-alert--info    { background: var(--ww-cyan-subtle);   border-color: rgba(34,211,238,.3); color: var(--ww-cyan); }

/* ── Login page ───────────────────────────────────────────────────── */
.ww-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(57,211,83,.06) 0%, transparent 70%),
    var(--ww-bg-base);
  padding: 2rem;
}

.ww-login-card {
  width: 100%;
  max-width: 380px;
  background: var(--ww-bg-surface);
  border: 1px solid var(--ww-border);
  border-radius: var(--ww-radius-lg);
  padding: 2rem;
  box-shadow: var(--ww-shadow-lg);
}

.ww-login-card__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.ww-login-card__logo img {
  height: 40px;
}

.ww-login-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ww-text-primary);
  text-align: center;
  margin: 0 0 1.5rem;
}

/* ── Code output panel ────────────────────────────────────────────── */
.ww-code-output {
  background: var(--ww-bg-void);
  border: 1px solid var(--ww-border);
  border-radius: var(--ww-radius-sm);
  font-family: var(--ww-font-code);
  font-size: 11.5px;
  line-height: 1.5;
  padding: 10px 12px;
  overflow: auto;
  color: var(--ww-accent);
  white-space: pre;
}

.ww-code-output.ww-code-output--error { color: var(--ww-red); }

/* ── Tabs ─────────────────────────────────────────────────────────── */
.ww-tabs {
  display: flex;
  gap: 1px;
  border-bottom: 1px solid var(--ww-border);
  margin-bottom: 12px;
}

.ww-tab {
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ww-text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--ww-anim-fast), border-color var(--ww-anim-fast);
  user-select: none;
}
.ww-tab:hover         { color: var(--ww-text-primary); }
.ww-tab.active        { color: var(--ww-accent); border-bottom-color: var(--ww-accent); }

.ww-tab-panel         { display: none; }
.ww-tab-panel.active  { display: block; }

/* ── Toolbar ──────────────────────────────────────────────────────── */
.ww-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 44px;
  background: var(--ww-bg-surface);
  border: 1px solid var(--ww-border);
  border-radius: var(--ww-radius-md);
  flex-shrink: 0;
}

.ww-toolbar__divider {
  width: 1px;
  height: 22px;
  background: var(--ww-border);
  flex-shrink: 0;
}

.ww-toolbar__spacer { flex: 1; }

/* ── File tree ────────────────────────────────────────────────────── */
.ww-tree__search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--ww-bg-elevated);
  border: 1px solid var(--ww-border);
  border-radius: var(--ww-radius-sm);
  padding: 4px 8px;
  margin-bottom: 8px;
}

.ww-tree__search input {
  background: none;
  border: none;
  outline: none;
  color: var(--ww-text-primary);
  font-size: 11.5px;
  font-family: var(--ww-font-ui);
  width: 100%;
}

.ww-tree__search input::placeholder { color: var(--ww-text-dim); }

.ww-tree__folder {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ww-text-dim);
  padding: 8px 4px 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ww-tree__file {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: var(--ww-radius-sm);
  font-size: 11.5px;
  color: var(--ww-text-secondary);
  cursor: pointer;
  transition: background var(--ww-anim-fast), color var(--ww-anim-fast);
  user-select: none;
}

.ww-tree__file:hover               { background: var(--ww-bg-overlay); color: var(--ww-text-primary); }
.ww-tree__file.active              { background: var(--ww-blue-subtle); color: var(--ww-blue); }
.ww-tree__file .ww-tree__count     { margin-left: auto; font-size: 9px; font-family: var(--ww-font-code); color: var(--ww-text-dim); }

/* ── Rule form card ───────────────────────────────────────────────── */
.ww-rule-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}

.ww-rule-header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.ww-rule-header__title {
  font-family: var(--ww-font-code);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ww-text-primary);
  word-break: break-all;
}

.ww-fieldgroup {
  background: var(--ww-bg-elevated);
  border: 1px solid var(--ww-border);
  border-radius: var(--ww-radius-sm);
  padding: 10px;
  margin-bottom: 8px;
}

.ww-fieldgroup__title {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ww-text-dim);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Priority indicator ───────────────────────────────────────────── */
.ww-priority {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--ww-font-code);
  font-size: 10px;
  font-weight: 700;
  background: rgba(129,140,248,.12);
  color: var(--ww-purple);
  border: 1px solid rgba(129,140,248,.3);
  border-radius: var(--ww-radius-full);
  padding: 1px 7px;
}

/* ── Toggle switch ────────────────────────────────────────────────── */
.ww-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.ww-toggle input[type="checkbox"] { display: none; }

.ww-toggle__track {
  width: 32px;
  height: 17px;
  background: var(--ww-bg-elevated);
  border: 1px solid var(--ww-border);
  border-radius: var(--ww-radius-full);
  position: relative;
  transition: background var(--ww-anim-fast), border-color var(--ww-anim-fast);
  flex-shrink: 0;
}

.ww-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  background: var(--ww-text-dim);
  border-radius: 50%;
  transition: transform var(--ww-anim-fast), background var(--ww-anim-fast);
}

.ww-toggle input:checked + .ww-toggle__track {
  background: var(--ww-accent-subtle);
  border-color: var(--ww-accent);
}

.ww-toggle input:checked + .ww-toggle__track::after {
  transform: translateX(15px);
  background: var(--ww-accent);
}

.ww-toggle__label {
  font-size: 11.5px;
  color: var(--ww-text-secondary);
}

/* ── Graph overlay ────────────────────────────────────────────────── */
.ww-graph-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5,8,15,.9);
  backdrop-filter: blur(4px);
  z-index: 1000;
  flex-direction: column;
}

.ww-graph-overlay.visible { display: flex; }

.ww-graph-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--ww-bg-surface);
  border-bottom: 1px solid var(--ww-border);
  flex-shrink: 0;
}

.ww-graph-header__title {
  font-weight: 700;
  font-size: 13px;
  color: var(--ww-text-primary);
}

.ww-graph-body {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.ww-graph-legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--ww-bg-surface);
  border: 1px solid var(--ww-border);
  border-radius: var(--ww-radius-md);
  padding: 10px 14px;
  font-size: 10.5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 120px;
}

.ww-graph-legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ww-text-secondary);
}

.ww-graph-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ww-graph-stats {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--ww-bg-surface);
  border: 1px solid var(--ww-border);
  border-radius: var(--ww-radius-md);
  padding: 10px 14px;
  font-size: 10.5px;
  color: var(--ww-text-secondary);
}

.ww-graph-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ww-graph-control-btn {
  width: 30px;
  height: 30px;
  background: var(--ww-bg-surface);
  border: 1px solid var(--ww-border);
  border-radius: var(--ww-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: var(--ww-text-secondary);
  transition: background var(--ww-anim-fast), color var(--ww-anim-fast);
}

.ww-graph-control-btn:hover {
  background: var(--ww-bg-elevated);
  color: var(--ww-text-primary);
}

/* ── Animations ───────────────────────────────────────────────────── */
@keyframes ww-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ww-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

.ww-anim-fade-in { animation: ww-fadeIn .22s ease; }
.ww-pulse        { animation: ww-pulse 2s ease infinite; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ww-nav { flex-wrap: wrap; }
  .ww-nav__link { flex: auto; }
}