/*
 * Holographic theme — sci-fi HUD aesthetic.
 *
 * Near-black backgrounds, hairline cyan borders with matching glow,
 * monospace technical readouts, animated highlights on interactive
 * states. Designed for dense informational layouts; composes well with
 * the operations console finale of the demo gallery.
 */

:root {
  --holo-bg:        #0a0e14;
  --holo-bg-panel:  rgba(20, 30, 40, .55);
  --holo-bg-input:  rgba(0, 20, 30, .6);
  --holo-fg:        #b3e5fc;
  --holo-fg-mono:   #80deea;
  --holo-accent:    #4dd0e1;
  --holo-accent-2:  #f48fb1;
  --holo-warning:   #ffb74d;
  --holo-critical:  #ef5350;
  --holo-dim:       rgba(77, 208, 225, .25);
  --holo-glow:      0 0 6px rgba(77, 208, 225, .55);
  --holo-glow-soft: 0 0 4px rgba(77, 208, 225, .3);
  --holo-mono: ui-monospace, "Iosevka", "Space Mono", "IBM Plex Mono",
               "JetBrains Mono", Consolas, monospace;
  --holo-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
}

@keyframes holo-pulse {
  0%, 100% { box-shadow: 0 0 4px var(--holo-critical); opacity: .85; }
  50%      { box-shadow: 0 0 12px var(--holo-critical); opacity: 1; }
}
@keyframes holo-sweep {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

body {
  background: var(--holo-bg);
  background-image:
    radial-gradient(circle at 30% 0%, rgba(77, 208, 225, .04), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(244, 143, 177, .04), transparent 60%);
  color: var(--holo-fg);
  font-family: var(--holo-sans);
}

/*
 * Lists & grids — bracketed panels with hairline glow.
 */
ui-list,
ui-checklist {
  background: var(--holo-bg-panel);
  border: 1px solid var(--holo-accent);
  box-shadow: var(--holo-glow), inset 0 0 24px rgba(77, 208, 225, .04);
  font-family: var(--holo-mono);
  font-size: .92em;
}
ui-list>ui-item,
ui-checklist>ui-checklistitem {
  border-bottom: 1px solid var(--holo-dim);
}
ui-list>ui-item:last-of-type,
ui-checklist>ui-checklistitem:last-of-type {
  border-bottom: 0;
}
ui-list>ui-item[hover],
ui-checklist>ui-checklistitem[hover] {
  background: rgba(77, 208, 225, .08);
  color: var(--holo-accent);
}
ui-list>ui-item.state_selected,
ui-checklist>ui-checklistitem.state_selected {
  background: rgba(77, 208, 225, .18);
  color: var(--holo-accent);
  box-shadow: inset 0 0 0 1px var(--holo-accent);
}
ui-grid>ui-item {
  background: var(--holo-bg-panel);
  border: 1px solid var(--holo-accent);
  box-shadow: var(--holo-glow-soft);
}
ui-grid>ui-item[hover] {
  background: rgba(77, 208, 225, .12);
}

/*
 * Tabs
 */
ui-tabs>ui-tab {
  background: var(--holo-bg-panel);
  border: 1px solid var(--holo-accent);
  box-shadow: var(--holo-glow-soft);
}
ui-tabs>ui-tabbar {
  color: var(--holo-fg-mono);
  border-bottom: 1px solid var(--holo-accent);
  font-family: var(--holo-mono);
  font-size: .8em;
  letter-spacing: .05em;
  text-transform: uppercase;
}
ui-tabs>ui-tabbar>ui-button,
ui-tabs>ui-tabbar>ui-tabbutton,
ui-tabs>ui-tabbar>ui-tabcountbutton {
  background: transparent;
  border: 1px solid var(--holo-dim);
  border-bottom: none;
  color: var(--holo-fg-mono);
  border-radius: 0;
}
ui-tabs>ui-tabbar>ui-button[selected],
ui-tabs>ui-tabbar>ui-tabbutton[selected],
ui-tabs>ui-tabbar>ui-tabcountbutton[selected] {
  background: rgba(77, 208, 225, .15);
  border-color: var(--holo-accent);
  color: var(--holo-accent);
  box-shadow: var(--holo-glow-soft);
}
ui-tabs>ui-tabbar>ui-button[hover] {
  background: rgba(77, 208, 225, .08);
  border-color: var(--holo-accent);
  color: var(--holo-accent);
}

/*
 * Window — the canonical holographic panel
 */
ui-window {
  background: var(--holo-bg-panel);
  border: 1px solid var(--holo-accent);
  box-shadow:
    var(--holo-glow),
    inset 0 0 30px rgba(77, 208, 225, .05);
  color: var(--holo-fg);
  border-radius: 0;
  backdrop-filter: blur(2px);
}
/* Decorative corner brackets — pseudo-elements outside the window */
ui-window::before,
ui-window::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--holo-accent);
  border-style: solid;
  pointer-events: none;
}
ui-window::before {
  top: -3px;
  left: -3px;
  border-width: 1px 0 0 1px;
}
ui-window::after {
  bottom: -3px;
  right: -3px;
  border-width: 0 1px 1px 0;
}
ui-window>ui-window-titlebar {
  border-bottom: 1px solid var(--holo-accent);
  background: linear-gradient(90deg,
    rgba(77, 208, 225, .12),
    rgba(77, 208, 225, .04) 50%,
    rgba(77, 208, 225, 0));
  color: var(--holo-accent);
  font-family: var(--holo-mono);
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
ui-window>ui-window-titlebar>span {
  font-size: 1em;
  padding: .3em .6em;
}
ui-window>.ui_window_resizer {
  border-color: var(--holo-accent);
}
ui-window[maximized] {
  border-radius: 0;
}

ui-tooltip {
  background: var(--holo-bg);
  border: 1px solid var(--holo-accent);
  box-shadow: var(--holo-glow);
  color: var(--holo-accent);
  font-family: var(--holo-mono);
  font-size: .85em;
}

/*
 * Form elements
 */
ui-input>input,
ui-textarea>textarea,
ui-select>select {
  background: var(--holo-bg-input);
  border: 1px solid var(--holo-dim);
  color: var(--holo-fg);
  font-family: var(--holo-mono);
  border-radius: 0;
  outline: none;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
ui-input>input:hover,
ui-input>input[hover],
ui-textarea>textarea:hover {
  border-color: var(--holo-accent);
}
ui-input>input:focus,
ui-textarea>textarea:focus,
ui-select>select:focus {
  border-color: var(--holo-accent);
  box-shadow: var(--holo-glow);
}

ui-toggle>div {
  background: var(--holo-bg-input);
  border: 1px solid var(--holo-dim);
  border-radius: 0;
}
ui-toggle[hover]>div {
  border-color: var(--holo-accent);
}
ui-toggle>div::before {
  background: var(--holo-dim);
  border-radius: 0;
  box-shadow: none;
}
ui-toggle[checked]>div {
  border-color: var(--holo-accent);
  box-shadow: var(--holo-glow-soft);
}
ui-toggle[checked]>div::before {
  background: var(--holo-accent);
  box-shadow: 0 0 6px var(--holo-accent);
}
ui-toggle[disabled]>div::before {
  background: var(--holo-dim);
}

ui-checkbox>input {
  background: var(--holo-bg-input);
  border: 1px solid var(--holo-dim);
  border-radius: 0;
  box-shadow: none;
}
ui-checkbox>input:checked {
  background: rgba(77, 208, 225, .15);
  border-color: var(--holo-accent);
  box-shadow: var(--holo-glow-soft);
}
ui-checkbox>input:checked:after {
  color: var(--holo-accent);
  font-size: .9em;
}
ui-checkbox[hover]>input,
ui-checkbox[hover]>input:checked {
  border-color: var(--holo-accent);
  box-shadow: var(--holo-glow-soft);
  background: rgba(77, 208, 225, .1);
}

ui-slider>ui-slider-track {
  background: rgba(77, 208, 225, .15);
  border: 1px solid var(--holo-accent);
  border-radius: 0;
  box-shadow: inset 0 0 4px rgba(77, 208, 225, .3);
}
ui-slider>ui-slider-track[hover] {
  background: rgba(77, 208, 225, .25);
}
ui-slider-handle {
  background: var(--holo-bg);
  border: 1px solid var(--holo-accent);
  border-radius: 0;
  box-shadow: var(--holo-glow);
}
ui-slider-handle>ui-label {
  background: var(--holo-bg);
  border: 1px solid var(--holo-accent);
  color: var(--holo-accent);
  font-family: var(--holo-mono);
  border-radius: 0;
}

ui-label {
  text-shadow: none;
  color: var(--holo-fg-mono);
  font-family: var(--holo-mono);
  font-size: .85em;
  letter-spacing: .05em;
  text-transform: uppercase;
}

ui-formgroup>ui-label.groupheader {
  color: var(--holo-accent);
  font-weight: normal;
  border-bottom: 1px solid var(--holo-dim);
  text-shadow: 0 0 4px var(--holo-accent);
}

/*
 * Buttons — flat with bracketed corners, mono font
 */
ui-button,
ui-togglebutton,
ui-dropdownbutton,
ui-tabbutton,
ui-tabcountbutton,
ui-popupbutton,
ui-notificationbutton {
  background: transparent;
  background-image: none;
  border: 1px solid var(--holo-accent);
  border-radius: 0;
  color: var(--holo-accent);
  font-family: var(--holo-mono);
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: all 120ms ease-out;
}
ui-button[hover],             ui-button:focus-visible,
ui-togglebutton[hover],       ui-togglebutton:focus-visible,
ui-dropdownbutton[hover],     ui-dropdownbutton:focus-visible,
ui-tabbutton[hover],          ui-tabbutton:focus-visible,
ui-tabcountbutton[hover],     ui-tabcountbutton:focus-visible,
ui-popupbutton[hover],        ui-popupbutton:focus-visible,
ui-notificationbutton[hover], ui-notificationbutton:focus-visible {
  background: rgba(77, 208, 225, .15);
  background-image: none;
  box-shadow: var(--holo-glow);
  color: #fff;
}
ui-button:active,            ui-button.state_pressed,
ui-togglebutton:active,      ui-togglebutton.state_pressed,
ui-dropdownbutton:active,    ui-dropdownbutton.state_pressed,
ui-tabbutton:active,         ui-tabbutton.state_pressed,
ui-tabcountbutton:active,    ui-tabcountbutton.state_pressed,
ui-popupbutton:active,       ui-popupbutton.state_pressed,
ui-notificationbutton:active, ui-notificationbutton.state_pressed {
  background: rgba(77, 208, 225, .3);
  background-image: none;
  box-shadow: inset 0 0 8px rgba(77, 208, 225, .5);
}
ui-button[disabled],
ui-togglebutton:disabled,
ui-dropdownbutton:disabled,
ui-tabcountbutton:disabled,
ui-popupbutton:disabled,
ui-notificationbutton:disabled {
  border-color: var(--holo-dim);
  color: var(--holo-dim);
  background: transparent;
  background-image: none;
  box-shadow: none;
}
ui-togglebutton[active],
ui-button.state_active,
ui-togglebutton.state_active,
ui-tabbutton.state_active,
ui-tabcountbutton.state_active {
  background: rgba(77, 208, 225, .25);
  background-image: none;
  color: var(--holo-bg);
  box-shadow: var(--holo-glow), inset 0 0 8px rgba(77, 208, 225, .3);
}

ui-dropdownbutton > .ui_dropdown_options {
  background: var(--holo-bg);
  border: 1px solid var(--holo-accent);
  box-shadow: var(--holo-glow);
}

ui-notificationbutton ui-indicator {
  background: var(--holo-critical);
  border: 1px solid var(--holo-bg);
  border-radius: 0;
  font-family: var(--holo-mono);
  color: var(--holo-bg);
  box-shadow: 0 0 6px rgba(239, 83, 80, .8);
  font-size: .75em;
}

ui-buttonbar>ui-button,
ui-buttonbar>ui-togglebutton,
ui-radiobuttonbar>ui-togglebutton {
  border-radius: 0;
  border-right: 1px solid var(--holo-accent);
  border-left: 0;
}
ui-buttonbar>ui-button:first-of-type,
ui-buttonbar>ui-togglebutton:first-of-type,
ui-radiobuttonbar>ui-togglebutton:first-of-type {
  border-radius: 0;
  border-left: 1px solid var(--holo-accent);
}
ui-buttonbar>ui-button:last-of-type,
ui-buttonbar>ui-togglebutton:last-of-type,
ui-radiobuttonbar>ui-togglebutton:last-of-type {
  border-radius: 0;
  border-right: 1px solid var(--holo-accent);
}

/*
 * Collapsible panel
 */
ui-collapsiblepanel {
  background: var(--holo-bg-panel);
  border: 1px solid var(--holo-accent);
  box-shadow: var(--holo-glow);
  border-radius: 0;
}
ui-collapsiblepanel[top],
ui-collapsiblepanel[bottom],
ui-collapsiblepanel[left],
ui-collapsiblepanel[right]  { border-radius: 0; }
ui-collapsiblepanel>ui-togglebutton {
  background: var(--holo-bg);
  border: 1px solid var(--holo-accent);
  border-radius: 0;
}

/*
 * Treeview — subsystem hierarchy
 */
ui-treeview {
  font-family: var(--holo-mono);
  color: var(--holo-fg);
}
ui-treeview ui-list {
  border-left: 1px solid var(--holo-dim);
  background: transparent;
  box-shadow: none;
}
ui-treeview>ui-list {
  border-left: 0;
}
ui-treeview ui-treeviewitem:hover>ui-text {
  color: var(--holo-accent);
}
ui-treeview ui-treeviewitem.state_selected>ui-text {
  color: var(--holo-accent-2);
  text-shadow: 0 0 6px var(--holo-accent-2);
}
ui-treeview ui-treeviewitem.state_warning>ui-text { color: var(--holo-warning); }
ui-treeview ui-treeviewitem.state_error>ui-text {
  color: var(--holo-critical);
  animation: holo-pulse 1.6s ease-in-out infinite;
}
ui-treeview ui-treeviewitem.haschildren>ui-text:before {
  color: var(--holo-accent);
}

/*
 * Spinner
 */
ui-spinner .loading {
  border-color: transparent var(--holo-accent) transparent var(--holo-accent);
  filter: drop-shadow(0 0 4px var(--holo-accent));
}
ui-spinner .loading-container:hover .loading {
  border-color: transparent var(--holo-accent-2) transparent var(--holo-accent-2);
}
ui-spinner .loading-text {
  color: var(--holo-accent);
  font-family: var(--holo-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: normal;
}
ui-spinner[full] {
  background: rgba(10, 14, 20, .85);
}

/*
 * Image picker
 */
ui-imagepicker canvas,
ui-image-picker canvas {
  border: 1px solid var(--holo-accent);
  border-radius: 0;
  box-shadow: var(--holo-glow-soft);
}

/*
 * Column dividers
 */
ui-columnlayout>* {
  border-left: 1px solid var(--holo-dim);
}
ui-columnlayout>*:first-child {
  border-left: 0;
}

/*
 * Critical states pulse globally where the class lands.
 */
.state_critical,
[disabled].state_critical {
  animation: holo-pulse 1.6s ease-in-out infinite;
}