/* ═══════════════════════════════════════════════════════════════════════════
   BENNING E-CAD — Premium Unified Theme
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"], :root {
  /* Only apply variables in dark mode, or as fallback if some templates lack light mode */
  --gold: #c9a84c;
  --gold-light: #e6c97a;
  --gold-dark: #a07830;
  
  --bg-main: #0a0d13;
  --bg-sidebar: rgba(22, 27, 39, 0.7);
  --bg-panel: rgba(22, 27, 39, 0.7);
  --bg-toolbar: rgba(22, 27, 39, 0.85);
  --bg-canvas: #0f1117;
  --bg-input: #1e2535;
  --bg-hover: #252d3d;
  --bg-active: rgba(201, 168, 76, 0.15);
  
  --border: rgba(201, 168, 76, 0.18);
  --border-light: rgba(201, 168, 76, 0.08);
  --border-focus: var(--gold);
  
  --text: #e8eaf0;
  --text-primary: #e8eaf0;
  --text-secondary: #8890a4;
  --text-muted: #5a6278;
  
  --accent: var(--gold);
  --accent-hover: var(--gold-light);
  --accent-light: rgba(201, 168, 76, 0.15);
  
  --green: #4caf84;
  --red: #e05c5c;
  --blue: #4c8faf;
  --warning: var(--gold-light);
  
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.6);
  --shadow-panel: 0 0 30px rgba(0,0,0,0.5);
}

[data-theme="dark"] body {
  background: var(--bg-main) !important;
  color: var(--text-primary) !important;
  font-family: 'DM Sans', sans-serif !important;
}

[data-theme="dark"] #menubar, 
[data-theme="dark"] #bottom-bar, 
[data-theme="dark"] #symbol-sidebar, 
[data-theme="dark"] #prop-panel, 
[data-theme="dark"] .sidebar-left, 
[data-theme="dark"] header, 
[data-theme="dark"] .nav {
  background: var(--bg-toolbar) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--border) !important;
}

[data-theme="dark"] #canvas-area {
  background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.05) 0%, transparent 80%), var(--bg-canvas) !important;
}

[data-theme="dark"] .menu-dropdown, 
[data-theme="dark"] .ctx-submenu, 
[data-theme="dark"] .modal, 
[data-theme="dark"] #ctx-menu, 
[data-theme="dark"] .ann-bubble {
  background: rgba(30, 37, 53, 0.9) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: 12px !important;
}

/* Properties Panel Enhancements */
[data-theme="dark"] .prop-section {
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 16px !important;
  border: 1px solid var(--border-light);
}

[data-theme="dark"] .prop-section-title {
  color: var(--gold) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1.2px !important;
  margin-bottom: 10px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-theme="dark"] .prop-section-title::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
}

[data-theme="dark"] .prop-row {
  margin-bottom: 12px !important;
}

[data-theme="dark"] .prop-label {
  font-weight: 500 !important;
  color: var(--text-dim) !important;
  margin-bottom: 4px !important;
}

[data-theme="dark"] input, 
[data-theme="dark"] select, 
[data-theme="dark"] textarea, 
[data-theme="dark"] .comp-search, 
[data-theme="dark"] .cfg-field input {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
  transition: all 0.2s ease;
}

[data-theme="dark"] input:focus, 
[data-theme="dark"] select:focus, 
[data-theme="dark"] textarea:focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 2px rgba(201,168,76,0.2) !important;
}

[data-theme="dark"] .tool-btn-lbl:hover, 
[data-theme="dark"] .tb3-btn:hover, 
[data-theme="dark"] .tool-btn:hover, 
[data-theme="dark"] .btn-secondary:hover {
  background: var(--bg-hover) !important;
}

[data-theme="dark"] .tool-btn-lbl.active, 
[data-theme="dark"] .tb3-btn.active, 
[data-theme="dark"] .tool-btn.active {
  background: var(--bg-active) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

[data-theme="dark"] .prop-apply-btn, 
[data-theme="dark"] .btn-primary, 
[data-theme="dark"] .login-btn {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
  color: #0f1117 !important;
  border: none !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 15px rgba(201,168,76,0.3) !important;
}

[data-theme="dark"] .prop-apply-btn:hover, 
[data-theme="dark"] .btn-primary:hover, 
[data-theme="dark"] .login-btn:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201,168,76,0.4) !important;
}

[data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.2); border-radius: 3px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Interactive Enhancements */
.sym-item {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease !important;
}
.sym-item:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 0 1px var(--gold) !important;
  z-index: 10;
}

/* Canvas Element Glow (controlled via JS class) */
.element-hovered {
  filter: drop-shadow(0 0 8px var(--gold-light)) !important;
  cursor: pointer;
}

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

.modal, .menu-dropdown, #ctx-menu, .ann-bubble {
  animation: fadeIn 0.2s ease-out !important;
}