/* ─── RedLineCAD v2 — Button Style Variants ──────────────────────────────────
   Applied via body class by the theme engine (themes.js).
   Each variant overrides .btn and its sub-classes.
   ─────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════════
   NEON / GLOW  (body.btn-style-neon)
   ══════════════════════════════════════════════════════════════════════════════ */
.btn-style-neon .btn {
  background: transparent;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.btn-style-neon .btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 150ms;
  pointer-events: none;
}
.btn-style-neon .btn:hover::before { opacity: 1; }

.btn-style-neon .btn-primary {
  color: var(--accent-bright);
  border-color: var(--accent);
  background: var(--accent-dim);
  text-shadow: 0 0 8px var(--accent);
}
.btn-style-neon .btn-primary::before { background: var(--accent-dim); }
.btn-style-neon .btn-primary:hover {
  background: var(--accent-dim);
  border-color: var(--accent-bright);
  box-shadow: 0 0 16px var(--accent), 0 0 4px var(--accent), inset 0 0 8px var(--accent-dim);
  color: #fff;
}

.btn-style-neon .btn-secondary {
  color: #a0b0c8;
  border-color: rgba(160,176,200,0.4);
  background: rgba(160,176,200,0.05);
}
.btn-style-neon .btn-secondary:hover {
  border-color: #a0b0c8;
  box-shadow: 0 0 12px rgba(160,176,200,0.3);
  color: #e8eaf0;
}

.btn-style-neon .btn-danger {
  color: #ff4444;
  border-color: rgba(255,68,68,0.5);
  background: rgba(255,68,68,0.05);
}
.btn-style-neon .btn-danger:hover {
  border-color: #ff4444;
  box-shadow: 0 0 14px rgba(255,68,68,0.5);
  color: #ff8888;
}

.btn-style-neon .btn-success {
  color: #00ff88;
  border-color: rgba(0,255,136,0.4);
  background: rgba(0,255,136,0.05);
}
.btn-style-neon .btn-success:hover {
  border-color: #00ff88;
  box-shadow: 0 0 14px rgba(0,255,136,0.4);
  color: #66ffbb;
}

.btn-style-neon .btn-info {
  color: #44aaff;
  border-color: rgba(68,170,255,0.4);
  background: rgba(68,170,255,0.05);
}
.btn-style-neon .btn-info:hover {
  border-color: #44aaff;
  box-shadow: 0 0 14px rgba(68,170,255,0.4);
}

/* ══════════════════════════════════════════════════════════════════════════════
   GLASSMORPHISM  (body.btn-style-glass)
   ══════════════════════════════════════════════════════════════════════════════ */
.btn-style-glass .btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 8px rgba(0,0,0,0.3);
}
.btn-style-glass .btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 16px rgba(0,0,0,0.4);
}
.btn-style-glass .btn-primary {
  background: rgba(204,0,0,0.2);
  border-color: rgba(204,0,0,0.4);
  border-left: 3px solid var(--accent);
  color: #fff;
}
.btn-style-glass .btn-primary:hover {
  background: rgba(204,0,0,0.3);
  border-color: rgba(204,0,0,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 20px rgba(204,0,0,0.3);
}
.btn-style-glass .btn-danger {
  background: rgba(255,32,32,0.12);
  border-color: rgba(255,32,32,0.3);
  border-left: 3px solid #ff2020;
  color: #ff8888;
}
.btn-style-glass .btn-success {
  background: rgba(0,204,102,0.12);
  border-color: rgba(0,204,102,0.3);
  border-left: 3px solid #00cc66;
  color: #66ffaa;
}
.btn-style-glass .btn-info {
  background: rgba(26,111,255,0.12);
  border-color: rgba(26,111,255,0.3);
  border-left: 3px solid #1a6fff;
  color: #88bbff;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TACTICAL / INDUSTRIAL  (body.btn-style-tactical)
   ══════════════════════════════════════════════════════════════════════════════ */
.btn-style-tactical .btn {
  background: #1a1c10;
  border: 1px solid rgba(200,150,10,0.3);
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c8b870;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 4px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}
.btn-style-tactical .btn::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 8px; height: 100%;
  background: repeating-linear-gradient(
    45deg, transparent, transparent 2px,
    rgba(200,150,10,0.15) 2px, rgba(200,150,10,0.15) 4px
  );
  opacity: 0;
  transition: opacity 150ms;
}
.btn-style-tactical .btn:hover::before { opacity: 1; }
.btn-style-tactical .btn:hover {
  background: #222410;
  border-color: rgba(200,150,10,0.6);
  color: #f0d060;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 8px rgba(200,150,10,0.2);
}
.btn-style-tactical .btn-primary {
  background: #c8960a;
  color: #0e1008;
  border-color: #c8960a;
}
.btn-style-tactical .btn-primary:hover {
  background: #f0b800;
  border-color: #f0b800;
  box-shadow: 0 0 12px rgba(200,150,10,0.5);
  color: #0e1008;
}
.btn-style-tactical .btn-danger {
  background: #1a0808;
  color: #ff4444;
  border-color: rgba(255,68,68,0.4);
}
.btn-style-tactical .btn-danger::before {
  background: repeating-linear-gradient(
    45deg, transparent, transparent 2px,
    rgba(255,68,68,0.15) 2px, rgba(255,68,68,0.15) 4px
  );
}
.btn-style-tactical .btn-success {
  background: #081a0e;
  color: #44cc77;
  border-color: rgba(68,204,119,0.4);
}

/* ══════════════════════════════════════════════════════════════════════════════
   OUTLINED / TECH  (body.btn-style-outlined)
   ══════════════════════════════════════════════════════════════════════════════ */
.btn-style-outlined .btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: all 140ms;
}
.btn-style-outlined .btn:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--text-secondary);
  color: var(--text-primary);
}
.btn-style-outlined .btn-primary {
  border-color: var(--accent);
  color: var(--accent-bright);
}
.btn-style-outlined .btn-primary:hover {
  background: var(--accent-dim);
  border-color: var(--accent-bright);
  color: #fff;
  box-shadow: 0 0 0 1px var(--accent);
}
.btn-style-outlined .btn-danger {
  border-color: rgba(255,32,32,0.5);
  color: #ff4444;
}
.btn-style-outlined .btn-danger:hover {
  background: rgba(255,32,32,0.06);
  border-color: #ff2020;
  box-shadow: 0 0 0 1px #ff2020;
}
.btn-style-outlined .btn-success {
  border-color: rgba(0,204,102,0.5);
  color: #00cc66;
}
.btn-style-outlined .btn-success:hover {
  background: rgba(0,204,102,0.06);
  border-color: #00cc66;
  box-shadow: 0 0 0 1px #00cc66;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PILL WITH STATUS  (body.btn-style-pill)
   ══════════════════════════════════════════════════════════════════════════════ */
.btn-style-pill .btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--text-primary);
  padding: 7px 20px;
}
.btn-style-pill .btn:hover {
  background: var(--bg-overlay);
  border-color: rgba(255,255,255,0.2);
}
.btn-style-pill .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px var(--accent-dim);
}
.btn-style-pill .btn-primary:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  box-shadow: 0 4px 14px var(--accent-border);
}
.btn-style-pill .btn-danger {
  background: rgba(255,32,32,0.1);
  border-color: rgba(255,32,32,0.3);
  color: #ff6666;
}
.btn-style-pill .btn-success {
  background: rgba(0,204,102,0.1);
  border-color: rgba(0,204,102,0.3);
  color: #44dd88;
}
/* Status dot helper — add data-status="online|busy|offline" to pill buttons */
.btn-style-pill .btn[data-status]::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.btn-style-pill .btn[data-status="online"]::before  { background: #00cc66; box-shadow: 0 0 4px #00cc66; }
.btn-style-pill .btn[data-status="busy"]::before    { background: #ffaa00; box-shadow: 0 0 4px #ffaa00; }
.btn-style-pill .btn[data-status="offline"]::before { background: #4a5568; }

/* ══════════════════════════════════════════════════════════════════════════════
   RAISED / 3D  (body.btn-style-raised)
   ══════════════════════════════════════════════════════════════════════════════ */
.btn-style-raised .btn {
  background: var(--bg-elevated);
  border: 1px solid rgba(255,255,255,0.1);
  border-bottom: 3px solid rgba(0,0,0,0.5);
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-primary);
  box-shadow: 0 3px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(0);
  transition: transform 80ms, box-shadow 80ms, border-bottom 80ms, background 140ms;
}
.btn-style-raised .btn:hover {
  background: var(--bg-overlay);
  box-shadow: 0 4px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-style-raised .btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4) !important;
  border-bottom-width: 1px !important;
}
.btn-style-raised .btn-primary {
  background: var(--accent);
  border-color: var(--accent-bright);
  border-bottom-color: var(--rlc-red-dim, #8a0000);
  color: #fff;
  box-shadow: 0 3px 0 var(--rlc-red-dim, #8a0000), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-style-raised .btn-primary:hover {
  background: var(--accent-bright);
  box-shadow: 0 4px 0 var(--rlc-red-dim, #8a0000), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-style-raised .btn-danger {
  background: #cc2222;
  border-color: #ff4444;
  border-bottom-color: #880000;
  color: #fff;
  box-shadow: 0 3px 0 #880000, inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-style-raised .btn-success {
  background: #009944;
  border-color: #00cc66;
  border-bottom-color: #006622;
  color: #fff;
  box-shadow: 0 3px 0 #006622, inset 0 1px 0 rgba(255,255,255,0.15);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SKEWED / ANGULAR  (body.btn-style-skewed)
   ══════════════════════════════════════════════════════════════════════════════ */
.btn-style-skewed .btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-primary);
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  padding: 8px 24px;
  position: relative;
}
.btn-style-skewed .btn:hover {
  background: var(--bg-overlay);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.2);
}
.btn-style-skewed .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.btn-style-skewed .btn-primary:hover {
  background: var(--accent-bright);
  box-shadow: 4px 0 0 var(--accent), -4px 0 0 var(--accent);
}
.btn-style-skewed .btn-secondary {
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.btn-style-skewed .btn-danger {
  background: rgba(255,32,32,0.1);
  border-color: rgba(255,32,32,0.4);
  color: #ff6666;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.btn-style-skewed .btn-success {
  background: rgba(0,204,102,0.1);
  border-color: rgba(0,204,102,0.4);
  color: #44dd88;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR THEME OVERRIDES  (applied via .sidebar[data-theme="..."])
   ══════════════════════════════════════════════════════════════════════════════ */

/* Apply sidebar CSS vars to the actual sidebar elements */
.sidebar {
  background: var(--sidebar-bg, var(--bg-surface)) !important;
  border-right-color: var(--sidebar-border, var(--border)) !important;
}
.sidebar .nav-item {
  background: var(--sidebar-item-bg, transparent);
  color: var(--sidebar-text, var(--text-secondary));
  border-radius: var(--sidebar-item-radius, 0);
  border: var(--sidebar-item-border, 2px solid transparent);
  padding: var(--sidebar-item-padding, 8px 16px);
  font-family: var(--sidebar-item-font, var(--font-sans));
  font-weight: var(--sidebar-item-weight, 500);
  font-size: var(--sidebar-item-size, 0.8125rem);
  letter-spacing: var(--sidebar-item-ls, 0);
  text-transform: var(--sidebar-item-tt, none);
}
.sidebar .nav-item:hover {
  background: var(--sidebar-item-hover, rgba(255,255,255,0.04));
  color: var(--sidebar-text-active, var(--text-primary));
}
.sidebar .nav-item.active {
  background: var(--sidebar-item-active, rgba(204,0,0,0.12)) !important;
  color: var(--sidebar-text-active, var(--text-primary)) !important;
  border: var(--sidebar-item-active-border, 2px solid var(--accent)) !important;
  box-shadow: var(--sidebar-glow, none);
}
.sidebar .sidebar-section {
  color: var(--sidebar-section-text, var(--text-muted));
}
.sidebar .sidebar-logo {
  background: var(--sidebar-logo-bg, transparent);
}
.sidebar .sidebar-footer {
  background: var(--sidebar-footer-bg, transparent);
}

/* Tactical hazard stripe on active item */
.sidebar[data-theme="tactical"] .nav-item.active {
  background-image: var(--sidebar-texture, none) !important;
  background-color: var(--sidebar-item-active) !important;
  color: var(--sidebar-text-active) !important;
}

/* Glass sidebar blur */
.sidebar[data-theme="glass"] {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ══════════════════════════════════════════════════════════════════════════════
   FONT SCALE
   ══════════════════════════════════════════════════════════════════════════════ */
.font-scale-small  { font-size: 12px; }
.font-scale-normal { font-size: 14px; }
.font-scale-large  { font-size: 15px; }
.font-scale-xl     { font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════════════════
   COMPACT MODE
   ══════════════════════════════════════════════════════════════════════════════ */
.compact-mode .nav-item    { padding: 5px 14px !important; }
.compact-mode .page-header-bar { min-height: 44px; padding: 8px 20px; }
.compact-mode .sidebar-section { padding: 8px 14px 2px; }
.compact-mode .card        { padding: 12px; }

/* ══════════════════════════════════════════════════════════════════════════════
   NO GLOW MODE
   ══════════════════════════════════════════════════════════════════════════════ */
.no-glow .btn:hover       { box-shadow: none !important; }
.no-glow .nav-item.active { box-shadow: none !important; }
.no-glow *                { text-shadow: none !important; }