/*##############################################################################################################
### Theme + Redesign
### Loaded after custom.css and the Festo web essentials, so it only overrides — remove the <link> in
### index.html and the old look is back. Two parts:
###   1. Look for both themes: system font, rounded translucent menus, toolbar with pill buttons,
###      VAL blue as accent (matching the Sizing Solution Platform).
###   2. Dark theme: the Festo colour variables (--fwe-*) redefined under html[data-theme="dark"],
###      plus the few colours custom.css hard-codes. The theme is set by js/val/theme.js.
###############################################################################################################*/

/*########## 1. Tokens ##########*/

:root {
  --gs-radius: 14px;
  --gs-radius-small: 10px;
  --gs-ease: cubic-bezier(.32, .72, 0, 1);
  --gs-glass: rgba(255,255,255,.82);
  --gs-shadow: 0 1px 2px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.14);
  --gs-hover: rgba(0,0,0,.06);
  --gs-accent-soft: rgba(15,49,161,.12);
  --gs-input: #ffffff;
  --gs-axis-x: #ff453a;
  --gs-axis-y: #30d158;
  --gs-axis-z: #0a84ff;

  --fwe-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", "MetaPro", sans-serif;
  --fwe-hero: #0f31a1;
  --fwe-hero-dark: #0c2a8a;
  --fwe-hero-darker: #0a2273;
  --fwe-btn-hero: #0f31a1;
  --fwe-btn-hero-hover: #1a44c9;
  --fwe-btn-hero-active: #0c2a8a;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --gs-glass: rgba(28,30,33,.86);
  --gs-shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 50px rgba(0,0,0,.5);
  --gs-hover: rgba(255,255,255,.08);
  --gs-accent-soft: rgba(91,132,255,.18);
  --gs-input: rgba(255,255,255,.05);

  --fwe-white: #1a1c1e;
  --fwe-background: #111213;
  --fwe-gray-100: #1f2224;
  --fwe-gray-200: #25282b;
  --fwe-gray-300: #2d3134;
  --fwe-gray-400: #3c4146;
  --fwe-border: rgba(255,255,255,.1);
  --fwe-border-disabled: rgba(255,255,255,.06);
  --fwe-control: #2d3134;
  --fwe-control-dark: #363a3e;
  --fwe-control-darker: #3f4448;
  --fwe-control-border: #4a4f55;
  --fwe-control-border-dark: #575d63;
  --fwe-control-scrollbar: #3c4146;
  --fwe-text: #e8e4de;
  --fwe-text-light: #8f8a84;
  --fwe-text-disabled: #6f6a64;
  --fwe-icon-black: #e8e4de;
  --fwe-btn: #2d3134;
  --fwe-btn-hover: #383d42;
  --fwe-btn-active: #42474d;
  --fwe-btn-text: #e8e4de;
  --fwe-btn-text-hover: #ffffff;
  --fwe-hero: #5b84ff;
  --fwe-icon-hero: #5b84ff;
}

body {
  -webkit-font-smoothing: antialiased;
}

/*########## 2. Toolbar (right) ##########*/

#ui-toolbar-container {
  background-color: var(--fwe-white);
  border-left: 1px solid var(--fwe-border);
}
#ui-toolbar-container .fwe-toolbar {
  background-color: transparent;
  border-left: none;
}
#ui-toolbar-container .fwe-toolbar-actions {
  padding-top: 12px;
}
/* Rounded pill per action instead of the full-width row with a side bar. */
#ui-toolbar-container .fwe-toolbar-actions a.toolbar-action {
  width: auto !important;
  height: 44px;
  min-height: 44px;
  margin: 4px 8px;
  line-height: 44px;
  border-radius: var(--gs-radius-small);
  color: var(--fwe-text);
  transition: background-color .2s ease, color .2s ease;
}
#ui-toolbar-container .fwe-toolbar-actions a.toolbar-action i:first-child {
  width: 44px;
}
#ui-toolbar-container .fwe-toolbar-actions a::after {
  display: none;
}
#ui-toolbar-container .fwe-toolbar-actions a.toolbar-action:hover {
  background-color: var(--gs-hover);
  color: var(--fwe-text);
}
#ui-toolbar-container .fwe-toolbar-actions a.toolbar-action.fwe-active {
  min-height: 44px;
  background-color: var(--gs-accent-soft);
  color: var(--fwe-hero) !important;
}
/* The AI action starts the sizing — the one primary action, so it gets the accent. */
#ui-toolbar-container .fwe-toolbar-actions a#chatgpt-toolbar-action {
  margin-top: 12px;
  background-color: var(--fwe-btn-hero);
  color: #ffffff;
}
#ui-toolbar-container .fwe-toolbar-actions a#chatgpt-toolbar-action:hover {
  background-color: var(--fwe-btn-hero-hover);
  color: #ffffff;
}

/*########## 3. Floating menus (context, add object, grid) ##########*/

.ui-container {
  background-color: var(--gs-glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--fwe-border);
  border-radius: var(--gs-radius);
  box-shadow: var(--gs-shadow);
  overflow: hidden;
  color: var(--fwe-text);
}
#ui-context-container > .fwe-d-flex,
#ui-objmenu-container > .fwe-d-flex:first-child {
  padding: 4px;
  gap: 2px;
}
.ui-context-object-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fwe-text);
  border-bottom-color: var(--fwe-border) !important;
}
.ui-action {
  width: 52px;
  height: 52px;
  border-radius: var(--gs-radius-small);
  color: var(--fwe-text);
  transition: background-color .2s ease, color .2s ease;
}
.ui-action:not(.fwe-active):hover {
  background-color: var(--gs-hover);
}
.ui-action.fwe-active {
  background-color: var(--gs-accent-soft);
}
.ui-list-action {
  margin: 2px 4px;
  border-radius: var(--gs-radius-small);
}
.ui-list-action:hover {
  background-color: var(--gs-hover);
}
/* Sub menus: a hairline separator instead of the thick coloured edge. */
.ui-context-submenu,
.ui-wrapper-3d2-submenu {
  background-color: transparent;
  border-right: none;
  border-top: 1px solid var(--fwe-border);
}
.ui-edit-grid-container {
  background-color: transparent;
}

/* Inputs inside the menus (Bootstrap input groups). */
.ui-container .input-group .form-control,
.ui-container .input-group-text,
.ui-container input.form-control {
  background-color: var(--gs-input);
  border-color: var(--fwe-border);
  color: var(--fwe-text);
  font-variant-numeric: tabular-nums;
}
.ui-container .input-group-text {
  color: var(--fwe-text-light);
}
.ui-container .input-group > :first-child { border-radius: 8px 0 0 8px; }
.ui-container .input-group > :last-child { border-radius: 0 8px 8px 0; }
.ui-container .form-control:focus {
  border-color: var(--fwe-hero);
  box-shadow: 0 0 0 3px var(--gs-accent-soft);
}
.x-axis-helper { border-left: 3px solid var(--gs-axis-x) !important; }
.y-axis-helper { border-left: 3px solid var(--gs-axis-y) !important; }
.z-axis-helper { border-left: 3px solid var(--gs-axis-z) !important; }

/*########## 4. Dialog ##########*/

.fwe-modal {
  /* The template sets a fixed width inline; in a narrow (embedded) window it must still fit. */
  max-width: calc(100vw - 32px);
  padding: 32px;
  background-color: var(--gs-glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--fwe-border);
  border-radius: 18px;
  box-shadow: var(--gs-shadow);
  color: var(--fwe-text);
}
.fwe-modal h2 { font-size: 20px; font-weight: 600; }
.fwe-modal .fwe-modal-footer {
  display: flex;
  gap: 8px;
}
.fwe-btn {
  border-radius: var(--gs-radius-small);
  padding-left: 18px;
  padding-right: 18px;
}

/*########## 5. Sequence editor (timeline) ##########*/

/* Opaque on purpose: the axes gizmo is drawn below it and would shine through a translucent panel. */
.ui-sequence {
  background-color: var(--fwe-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: var(--gs-radius) var(--gs-radius) 0 0;
  border-bottom: none;
  border-left: none;
}
#seq-editor-container {
  background-color: transparent;
}
.sequence-header {
  background-color: transparent;
}
.sequenzkasten {
  background-color: var(--fwe-gray-200);
  border: 1px solid var(--fwe-gray-400);
  border-radius: 6px;
}
.seq-hover,
.seq-active,
.sequenzkasten.ui-resizable-resizing,
.sequenzkasten.ui-draggable-dragging {
  border-color: var(--fwe-hero);
  background-color: var(--gs-accent-soft);
}
.seq-summary {
  background-color: var(--fwe-gray-400);
  border-radius: 999px;
}
#time-slider.ui-slider-horizontal {
  background: var(--fwe-gray-300);
  border-radius: 999px;
}
.seq-highlight-selection::before {
  background-color: var(--gs-accent-soft);
  border-left-color: var(--fwe-hero);
}

/*########## 6. Dark-only adjustments ##########*/

/* Black line icons (SVG via content:url) would vanish on dark surfaces. */
html[data-theme="dark"] .capability-icon,
html[data-theme="dark"] .bootstrap-icon-grid3x3 {
  filter: invert(.92);
}
html[data-theme="dark"] #ui-toolbar-container .fwe-toolbar-actions a.toolbar-action.fwe-active .bootstrap-icon-grid3x3 {
  filter: invert(.55) sepia(1) saturate(6) hue-rotate(195deg);
}
html[data-theme="dark"] .sequenzkasten.seq-hover .ui-resizable-handle,
html[data-theme="dark"] .sequenzkasten.ui-resizable-resizing .ui-resizable-handle {
  background-color: var(--fwe-gray-400);
}
html[data-theme="dark"] .seq-invalid {
  background-color: rgba(255,69,58,.18) !important;
}
html[data-theme="dark"] .popover {
  --bs-popover-bg: #1f2224;
  --bs-popover-border-color: rgba(255,255,255,.1);
  --bs-popover-body-color: var(--fwe-text);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: var(--fwe-control-scrollbar);
}