/* ============================================================
   DEV THEME — sandbox for new UI layout work
   All production themes (dark / light) are unchanged.
   This theme is intentionally distinct so dev work is
   visually separate from production at a glance.
   ============================================================ */

body.theme-dev {
  /* Core palette — violet/indigo accent on near-black */
  --bg:              #09080f;
  --bg-alt:          #110e1a;
  --card-bg:         #181325;
  --accent:          #8b5cf6;
  --accent-soft:     rgba(139, 92, 246, 0.20);
  --text-main:       #f1f0f5;
  --text-muted:      #9d93b8;
  --border-subtle:   #2a2040;
  --radius-lg:       18px;
  --shadow-soft:     0 18px 35px rgba(0, 0, 0, 0.6);
  --danger:          #ef4444;
  --warning:         #f59e0b;
  --success:         #22c55e;
  --icon-color:      #181325;

  /* Glass surfaces */
  --glass-bg:        rgba(139, 92, 246, 0.05);
  --glass-bg-hover:  rgba(139, 92, 246, 0.10);
  --glass-border:    rgba(139, 92, 246, 0.15);
  --glass-blur:      blur(14px);
  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.55);

  /* Row selected-state */
  --row-selected-bg:          rgba(139, 92, 246, 0.17);
  --row-selected-border:      rgba(139, 92, 246, 0.40);
  --row-selected-shadow:      0 2px 12px rgba(139, 92, 246, 0.22);
  --row-selected-rail:        #8b5cf6;
  --row-selected-bg-hover:    rgba(139, 92, 246, 0.26);
  --row-selected-border-hover:rgba(139, 92, 246, 0.52);
  --row-selected-shadow-hover:0 3px 16px rgba(139, 92, 246, 0.30);
}

/* Background radial gradient — distinguishable from Classic dark */
body.theme-dev {
  background:
    radial-gradient(ellipse at 15% 10%, rgba(139, 92, 246, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(99, 102, 241, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, #110e1a 0%, #06040c 100%);
}

/* Dev badge in the header title area so it's always obvious */
body.theme-dev .app-header::after {
  content: "DEV";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.30);
  border-radius: 4px;
  padding: 1px 6px;
  pointer-events: none;
  z-index: 10;
}