/* 
================================================================================
NORDIC OBSIDIAN & BOTANICAL SAGE DESIGN SYSTEM - SIMULATOR INJECTION
Tactile Soft-3D Claymorphic Overrides for Laboratory Simulators
================================================================================
*/

:root {
  /* Color Tokens - Nordic Forest, Sage Green & Linen */
  --canvas-base: #0c1310 !important;
  --surface-card: #161e1a !important;
  --surface-canvas: #0c1310 !important;
  --border-default: rgba(116, 198, 157, 0.2) !important;
  --border-focus: #52b788 !important;
  --text-primary: #f0ebe1 !important;
  --text-secondary: #8a9990 !important;
  --accent-blue: #52b788 !important;
  
  /* Overriding legacy simulator variables */
  --primary-color: #52b788 !important;
  --bg-color: #0c1310 !important;
  --panel-bg: #161e1a !important;
  --text-color: #f0ebe1 !important;
  --border-color: rgba(116, 198, 157, 0.2) !important;
  
  /* Physics legacy variable overrides */
  --secondary-color: #74c69d !important;
  --accent-color: #34d399 !important;
  --dark-color: #8a9990 !important;
  --light-color: #111714 !important;
  --input-bg: #111714 !important;
  --box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

body {
  background-color: var(--canvas-base) !important;
  color: var(--text-primary) !important;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Nordic Botanical Sage Custom Scrollbars */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #2d4a3e #0c1310 !important;
}
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: #0c1310 !important;
  border-radius: 9999px !important;
}
::-webkit-scrollbar-thumb {
  background: #233930 !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(82, 183, 136, 0.25) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #52b788 !important;
}

/* Hide standalone back button when loaded in workstation iframe */
div[style*="position:fixed;top:12px;left:12px"],
.standalone-back-btn {
  display: none !important;
}

/* Containers, Cards, Panels (Claymorphic Soft-3D Elevation) */
.panel, .card, .container, .sidebar, .control-panel, .dashboard, header, .tab-content, .controls, .info-panel {
  background: linear-gradient(145deg, #18251e 0%, #101814 100%) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 12px 28px -6px rgba(0, 0, 0, 0.65),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.08),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5) !important;
  color: var(--text-primary) !important;
}

/* Canvas and Visualization Areas */
canvas, .visualization, .sim-canvas, .plot-area, .simulation-area {
  background-color: var(--surface-canvas) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.7) !important;
}

/* Claymorphic Buttons */
button, .btn, .button, .tab-btn {
  background: linear-gradient(180deg, #1c2921 0%, #131c17 100%) !important;
  border: 1px solid rgba(116, 198, 157, 0.22) !important;
  color: var(--text-primary) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-weight: 600 !important;
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.1) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

button:hover, .btn:hover, .button:hover, .tab-btn:hover {
  background: linear-gradient(180deg, #24352b 0%, #17241d 100%) !important;
  border-color: rgba(116, 198, 157, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

button:active, .btn:active, .button:active, .tab-btn:active {
  background: #111a15 !important;
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(1px) !important;
}

/* Primary/Action Buttons */
button.primary, .btn-primary, .action-btn, .tab-btn.active {
  background: linear-gradient(180deg, #5ec493 0%, #46a678 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #0c1310 !important;
  font-weight: 700 !important;
  box-shadow: 
    0 6px 16px -2px rgba(82, 183, 136, 0.5),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.4) !important;
}

button.primary:hover, .btn-primary:hover, .action-btn:hover {
  background: linear-gradient(180deg, #6fd4a3 0%, #52b788 100%) !important;
  box-shadow: 
    0 10px 22px -2px rgba(82, 183, 136, 0.65),
    inset 0 2px 3px rgba(255, 255, 255, 0.5) !important;
}

/* Inputs */
input[type="text"], input[type="number"], select, textarea {
  background-color: #0c1310 !important;
  border: 1px solid rgba(116, 198, 157, 0.22) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #52b788 !important;
  outline: none !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 12px rgba(82, 183, 136, 0.35) !important;
}

/* Range Sliders */
input[type="range"] {
  -webkit-appearance: none !important;
  background: transparent !important;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(116, 198, 157, 0.2) !important;
  height: 4px !important;
  border-radius: 2px !important;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  height: 16px !important;
  width: 16px !important;
  border-radius: 50% !important;
  background: #52b788 !important;
  margin-top: -6px !important;
  border: 2px solid #0c1310 !important;
  box-shadow: 0 0 10px rgba(82, 183, 136, 0.7) !important;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

p, span, div, label {
  color: var(--text-secondary) !important;
}

/* Tables */
table {
  border-collapse: collapse !important;
  width: 100% !important;
}

th, td {
  border: 1px solid var(--border-default) !important;
  padding: 8px 12px !important;
  color: var(--text-secondary) !important;
}

th {
  background-color: #18251e !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

tr:nth-child(even) {
  background-color: rgba(116, 198, 157, 0.03) !important;
}

tr:hover {
  background-color: rgba(116, 198, 157, 0.08) !important;
}