/* igus Robot Control OperatorHMI - Redesigned */

/* ============================================
   FONTS (bundled locally)
   ============================================ */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/dm-sans.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/inter.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/jetbrains-mono.woff2') format('woff2');
}

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    /* Force light rendering of native UA controls (e.g. the native <select>
       dropdown popup on older Chromium). Without this, an HMI configured for a
       dark system scheme renders the popup with a dark background while the
       option text inherits the dark --text color, making entries invisible. */
    color-scheme: light;

    /* Colors - Designer palette */
    --bg: #f0f1f3;
    --surface: #ffffff;
    --surface-raised: #f7f8fa;
    --border: #dde0e6;
    --border-subtle: #e8eaef;

    --text: #1a1d23;
    --text-secondary: #3a3f4a;
    --text-muted: #5c6370;
    --text-dim: #9ba1ad;

    --igus-orange: #e8930e;
    --igus-orange-dim: rgba(232, 147, 14, 0.10);
    --igus-orange-glow: rgba(232, 147, 14, 0.22);

    --green: #1a8a3e;
    --green-dim: rgba(26, 138, 62, 0.08);
    --green-glow: rgba(26, 138, 62, 0.2);

    --red: #d1242f;
    --red-dim: rgba(209, 36, 47, 0.07);
    --red-glow: rgba(209, 36, 47, 0.18);

    --yellow: #9a6700;
    --yellow-dim: rgba(154, 103, 0, 0.08);

    /* ---- LAYOUT FRAME ---- */
    --header-height: 44px;
    --tab-height: 50px;
    --sidebar-width: 210px;

    /* ---- TYPOGRAPHY SCALE ---- */
    --text-xs: 14px;
    --text-sm: 15px;
    --text-md: 17px;
    --text-lg: 19px;

    /* ---- RADII ---- */
    --radius-btn: 14px;
    --radius-card: 12px;
    --radius-input: 10px;
    --radius-pill: 20px;

    /* ---- MOTION ---- */
    --dur-press: 0.12s;
    --dur-transition: 0.2s;
    --dur-enter: 0.35s;
    --dur-hero: 0.45s;
    --ease-snap: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

    /* ---- SHADOWS ---- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-orange: 0 1px 4px rgba(232, 147, 14, 0.35);
    --shadow-tab-bar: 0 -1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sheet: 0 -4px 20px rgba(0, 0, 0, 0.25);
    --shadow-hero: 0 2px 8px rgba(0, 0, 0, 0.04);

    /* ---- STATE OPACITIES ---- */
    --disabled-icon-opacity: 0.3;
    --disabled-tab-opacity: 0.4;

    /* ---- HEADER ---- */
    --header-pad-x: 16px;
    --header-gap: 12px;
    --header-info-gap: 14px;
    --logo-height: 27px;

    /* ---- ERROR BANNER ---- */
    --banner-pad-x: 16px;
    --banner-min-h: 34px;
    --banner-gap: 8px;
    --banner-radius: 6px;
    --banner-icon: 15px;

    /* ---- DEMO TOGGLE ---- */
    --demo-gap: 6px;
    --demo-pad: 3px 10px;
    --toggle-track-w: 32px;
    --toggle-track-h: 16px;
    --toggle-track-radius: 8px;
    --toggle-thumb-size: 12px;
    --toggle-thumb-inset: 2px;

    /* ---- SIDEBAR TILE ---- */
    --tile-min-height: 70px;
    --tile-pad: 10px 12px;
    --tile-header-mb: 6px;
    --tile-accent-w: 5px;
    --tile-field-max-w: 115px;
    --info-field-max-w: 220px;
    --tile-content-gap: 2px;
    --sidebar-gap: 1px;

    /* ---- CONTROLS ZONE + ROWS ---- */
    --zone-pad: 14px 18px;
    --zone-gap: 12px;
    --program-row-gap: 12px;
    --ctrl-row-gap: 10px;
    --bottom-row-gap: 10px;

    /* ---- PROGRAM SELECT + STATUS ---- */
    --select-h: 40px;
    --select-pad-x: 14px;
    --select-picker-pad: 4px;
    --status-pad: 4px 10px;

    /* ---- CONTROL BUTTON + REF PANEL ---- */
    --btn-height: 120px;
    --btn-icon-size: 36px;
    --btn-gap: 8px;
    --btn-border-w: 2px;
    --btn-inner-radius: 13px;
    --btn-press-scale: 0.96;
    --btn-active-glow: 12px;

    /* ---- VELOCITY ---- */
    --panel-pad: 10px 16px;
    --panel-title-mb: 6px;
    --velocity-gap: 3px;
    --slider-row-gap: 8px;
    --vel-btn-w: 36px;
    --vel-btn-h: 28px;
    --vel-btn-img: 18px;
    --vel-btn-radius: 6px;
    --vel-btn-press-scale: 0.93;
    --slider-track-h: 28px;
    --slider-track-radius: 6px;
    --slider-thumb-size: 22px;
    --slider-thumb-radius: 5px;

    /* ---- TAB BAR ---- */
    --tab-gap: 2px;
    --tab-icon-size: 20px;
    --tab-indicator-h: 2.5px;
    --tab-indicator-inset: 20%;

    /* ---- INFO PANEL ---- */
    --info-panel-pad: 10px 12px;
    --info-panel-title-mb: 4px;

    /* ---- COMING-SOON HERO CARD ---- */
    --hero-outer-pad: 24px;
    --hero-card-gap: 14px;
    --hero-card-pad: 40px 56px;
    --hero-card-max-w: 460px;
    --hero-icon-outer: 88px;
    --hero-icon-inner: 48px;
    --hero-icon-mb: 4px;
    --hero-tag-pad: 4px 12px;
    --hero-desc-max-w: 320px;

    /* ---- BOTTOM SHEET ---- */
    --sheet-handle-pad: 12px 0;
    --sheet-handle-bar-w: 36px;
    --sheet-handle-bar-h: 4px;
    --sheet-handle-bar-radius: 2px;
    --sheet-tile-pad: 8px 10px;
    --sheet-tile-accent-w: 5px;
    --sheet-tile-header-mb: 3px;
    --sheet-gap: 1px;
    --dur-sheet: 0.25s;
    --backdrop-color: rgba(0, 0, 0, 0.5);
    --panel-narrow-min-h: 80px;

    /* ---- MISC LITERALS ---- */
    --tile-field-gap: 0.5rem;
    --vel-btn-font: 18px;
    --option-pad: 14px 16px;
    --option-font: 18px;
    --root-font: 16px;
    --hero-tag-font: 0.7rem;
    --hero-title-font: 1.6rem;
    --hero-desc-font: 1rem;
    --radius-circle-pill: 100px;
    --sheet-bottom-pad: 2rem;

    /* ---- BORDER WIDTHS ---- */
    --border-w: 1px;
    --border-w-strong: 1.5px;
    --tab-indicator-radius: 0 0 2px 2px;

    /* ---- LETTER-SPACING SCALE ---- */
    --tracking-xs: 0.3px;
    --tracking-sm: 0.4px;
    --tracking-md: 0.5px;
    --tracking-lg: 0.8px;
    --tracking-xl: 1px;
    --tracking-xxl: 1.5px;

    /* ---- KEYFRAME INTERNALS ---- */
    --pulse-glow-blur: 16px;
    --pulse-glow-spread: 4px;
    --slide-in-y: 6px;
    --hero-in-y: 10px;
    --hero-in-scale: 0.985;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: var(--root-font);
    color: var(--text);
    background: var(--bg);
    height: 100%;
    overflow: auto;
    touch-action: manipulation;
    -webkit-font-smoothing: antialiased;
    -webkit-touch-callout: none;
    user-select: none;
}

/* ============================================
   APP CONTAINER
   ============================================ */
.app-container {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

/* ============================================
   HEADER
   ============================================ */
.header {
    display: flex;
    align-items: center;
    height: var(--header-height);
    background: var(--surface);
    border-bottom: var(--border-w) solid var(--border);
    padding: 0 var(--header-pad-x);
    gap: var(--header-gap);
    box-shadow: var(--shadow-sm);
    z-index: 10;
}

.header-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.igus-logo {
    height: var(--logo-height);
    width: auto;
}

.header-error {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: white;
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-sm);
    padding: 0 var(--banner-pad-x);
    min-height: var(--banner-min-h);
    border-radius: var(--banner-radius);
    gap: var(--banner-gap);
    animation: alertPulse 2.5s ease-in-out infinite;
    cursor: pointer;
}

.header-error:not(.hidden):hover {
    filter: brightness(1.08);
}

.header-error.hidden {
    background: transparent;
    animation: none;
    min-height: 0;
}


.header-error .error-icon {
    flex-shrink: 0;
}

.header-error .error-icon img {
    width: var(--banner-icon);
    height: var(--banner-icon);
    display: block;
}

.header-error .error-title {
    font-weight: 700;
}

.header-info {
    display: flex;
    align-items: center;
    gap: var(--header-info-gap);
    flex-shrink: 0;
}

.clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted);
}

/* ============================================
   DEMO TOGGLE (in header)
   ============================================ */
.demo-toggle {
    display: flex;
    align-items: center;
    gap: var(--demo-gap);
    cursor: pointer;
    padding: var(--demo-pad);
    border-radius: var(--radius-pill);
    background: var(--bg);
    border: var(--border-w) solid var(--border);
}

.demo-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-xs);
    color: var(--text-dim);
    text-transform: uppercase;
}

.demo-label.active-label {
    color: var(--text);
}

.toggle-track {
    width: var(--toggle-track-w);
    height: var(--toggle-track-h);
    border-radius: var(--toggle-track-radius);
    background: var(--red);
    position: relative;
    transition: background var(--dur-transition) ease;
}

.toggle-track.ok {
    background: var(--green);
}

.toggle-thumb {
    width: var(--toggle-thumb-size);
    height: var(--toggle-thumb-size);
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: var(--toggle-thumb-inset);
    left: var(--toggle-thumb-inset);
    transition: left var(--dur-transition) ease;
}

.toggle-thumb.ok {
    left: calc(var(--toggle-track-w) - var(--toggle-thumb-size) - var(--toggle-thumb-inset));
}

/* ============================================
   LAYOUT
   ============================================ */
.layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    height: calc(100% - var(--header-height) - var(--tab-height));
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-gap);
    background: var(--border);
    border-right: var(--border-w) solid var(--border);
    overflow-y: auto;
    min-height: 0;
}

.tile {
    background: var(--surface);
    padding: var(--tile-pad);
    flex: 1 0 auto;
    min-height: var(--tile-min-height);
    display: flex;
    flex-direction: column;
    border-right: var(--tile-accent-w) solid var(--border);
}

.tile.ok {
    border-right-color: var(--green);
}

.tile.warning {
    border-right-color: var(--yellow);
}

.tile.error {
    border-right-color: var(--red);
}

.tile-header {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: var(--tracking-lg);
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: var(--tile-header-mb);
}

.tile-content {
    display: flex;
    flex-direction: column;
    gap: var(--tile-content-gap);
}

.tile-field {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--tile-field-gap);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-md);
    line-height: 1.3;
}

.tile-field-label {
    color: var(--text-muted);
    flex-shrink: 0;
    font-weight: 400;
}

.tile-field-value {
    color: var(--text);
    font-weight: 500;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Narrow sidebar/bottom-sheet tiles cap the value width tightly so long
   strings don't push the label out. Info-panels get a larger cap since
   the column is wider — enough for typical counters and durations,
   still truncates truly runaway strings with an ellipsis. */
.tile .tile-field-value {
    max-width: var(--tile-field-max-w);
}

.info-panel .tile-field-value {
    max-width: var(--info-field-max-w);
}

.tile-field-value.val-ok {
    color: var(--green);
}

.tile-field-value.val-err {
    color: var(--red);
    font-size: var(--text-sm);
}

.tile-field-value.val-dim {
    color: var(--text-dim);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
    overflow-y: auto;
    background: var(--bg);
    min-height: 0;
}

.screen {
    display: none;
    min-height: 100%;
}

.screen.active {
    display: block;
}

/* ============================================
   CONTROLS ZONE (replaces control-grid)
   ============================================ */
.controls-zone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--zone-pad);
    gap: var(--zone-gap);
    min-height: 100%;
    background: var(--bg);
}

/* Program Row */
.program-row {
    display: flex;
    align-items: center;
    gap: var(--program-row-gap);
    /* The entrance animation (fadeSlideIn) leaves a transform on every row,
       making each row its own stacking context. Without a z-index here the
       program row paints below the later control rows, so the open dropdown
       popup would be hidden behind the Enable/Start buttons. Lift it above
       its sibling rows. */
    position: relative;
    z-index: 5;
}

.program-row .row-label {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: var(--tracking-md);
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Custom dropdown: a styled button + popup list replacing the native
   <select>. On the Weidmüller HMI's Chromium 119 the native popup ignored
   author CSS for option colours and followed the system/GTK theme, rendering
   program names unreadably. Every colour here is under our control, and
   visibility is driven by the .open class (not the native popup). */
.program-select-wrap {
    flex: 1;
    position: relative;
}

/* While open, lift the whole widget into its own stacking context above the
   sibling control buttons/cards so the popup list is not painted behind them. */
.program-select-wrap.open {
    z-index: 100;
}

.program-select {
    height: var(--select-h);
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-input);
    padding: 0 var(--select-pad-x);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--select-pad-x);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
}

.program-select-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.program-select-arrow {
    flex-shrink: 0;
    width: 12px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239ba1ad' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--dur-transition) ease;
}

.program-select-wrap.open .program-select-arrow {
    transform: rotate(180deg);
}

.program-select.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Popup list — shown only while the wrap has the .open class */
.program-dropdown-list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--select-picker-pad);
    box-shadow: var(--shadow-lg);
    max-height: 260px;
    overflow-y: auto;
}

.program-select-wrap.open .program-dropdown-list {
    display: block;
}

.program-dropdown-item {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--option-font);
    color: var(--text);
    background: var(--surface);
    padding: var(--option-pad);
    line-height: 1.5;
    border-radius: var(--radius-input);
    cursor: pointer;
}

.program-dropdown-item:hover {
    background: var(--surface-raised);
}

.program-dropdown-item.selected {
    font-weight: 700;
    background: var(--bg);
}

.program-status {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: var(--tracking-xs);
    flex-shrink: 0;
    padding: var(--status-pad);
    border-radius: var(--radius-pill);
}

.program-status.running {
    color: var(--green);
    background: var(--green-dim);
}

.program-status.stopped {
    color: var(--red);
    background: var(--red-dim);
}

.program-status.paused {
    color: var(--yellow);
    background: var(--yellow-dim);
}

/* ============================================
   CONTROL BUTTONS
   ============================================ */
.ctrl-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ctrl-row-gap);
}

.ctrl-btn {
    height: var(--btn-height);
    border: var(--btn-border-w) solid var(--border);
    border-radius: var(--radius-btn);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    cursor: pointer;
    transition: all var(--dur-press) ease;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    color: var(--text-secondary);
}

.ctrl-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--dur-press) ease;
    border-radius: var(--btn-inner-radius);
    background: var(--surface-raised);
}

.ctrl-btn:active {
    transform: scale(var(--btn-press-scale));
}

.ctrl-btn:active::before {
    opacity: 1;
}

.ctrl-btn .btn-icon {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    position: relative;
    z-index: 1;
}

.ctrl-btn .btn-label {
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* Highlighted button (next likely action) */
.ctrl-btn.highlight {
    color: var(--igus-orange);
    border-color: var(--igus-orange);
    animation: enablePulse 2s ease-in-out infinite;
}

.ctrl-btn.highlight::before {
    background: var(--igus-orange-dim);
}

/* Active state (e.g. enabled robot = Reset button glows steady) */
.ctrl-btn.highlight.active {
    animation: none;
    box-shadow: 0 0 var(--btn-active-glow) var(--igus-orange-glow);
}

/* Disabled control buttons (after highlight so it wins without !important) */
.ctrl-btn.ctrl-btn.disabled {
    pointer-events: none;
    cursor: default;
    color: var(--border);
    border-color: var(--border-subtle);
    box-shadow: none;
    animation: none;
}

.ctrl-btn.ctrl-btn.disabled .btn-icon {
    opacity: var(--disabled-icon-opacity);
}

.ctrl-btn.ctrl-btn.disabled .btn-label {
    color: var(--border);
}

/* ============================================
   BOTTOM ROW: VELOCITY + REFERENCE
   ============================================ */
.bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bottom-row-gap);
}

.panel-card {
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--panel-pad);
    height: var(--btn-height);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

.panel-card .panel-title {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-lg);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--panel-title-mb);
}

/* Velocity slider */
.velocity-inner {
    display: flex;
    flex-direction: column;
    gap: var(--velocity-gap);
    flex: 1;
    justify-content: center;
}

.slider-fill,
.slider-thumb {
    opacity: 0;
    transition: opacity var(--dur-transition) ease;
}

.velocity-inner.ready .slider-fill,
.velocity-inner.ready .slider-thumb {
    opacity: 1;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: var(--slider-row-gap);
}

.vel-btn {
    width: var(--vel-btn-w);
    height: var(--vel-btn-h);
    border: var(--border-w-strong) solid var(--border);
    border-radius: var(--vel-btn-radius);
    background: var(--surface-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--dur-press) ease;
    color: var(--text-secondary);
    font-size: var(--vel-btn-font);
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
}

.vel-btn img {
    width: var(--vel-btn-img);
    height: var(--vel-btn-img);
}

.vel-btn:active {
    transform: scale(var(--vel-btn-press-scale));
    background: var(--bg);
}

.vel-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
    text-align: center;
}

.slider-wrap {
    flex: 1;
    display: flex;
    align-items: center;
}

.slider-track {
    width: 100%;
    height: var(--slider-track-h);
    background: var(--bg);
    border-radius: var(--slider-track-radius);
    position: relative;
    cursor: pointer;
    touch-action: none;
    border: var(--border-w) solid var(--border-subtle);
}

.slider-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, var(--igus-orange-dim), var(--igus-orange-glow));
    border-radius: var(--slider-thumb-radius) 0 0 var(--slider-thumb-radius);
}

.slider-thumb {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    background: var(--igus-orange);
    border-radius: var(--slider-thumb-radius);
    box-shadow: var(--shadow-orange);
}

/* Reference panel — mirrors .ctrl-btn geometry exactly so the icon/label
   cluster sits with identical breathing room. Overrides .panel-card base
   (which uses smaller border, different radius, and vertical padding). */
.panel-card.ref-panel {
    padding: 0;
    border-width: var(--btn-border-w);
    border-radius: var(--radius-btn);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--dur-press) ease;
}

.panel-card.ref-panel:active {
    transform: scale(var(--btn-press-scale));
    background: var(--surface-raised);
}

.panel-card.ref-panel .btn-icon {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
}

.panel-card.ref-panel .btn-label {
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
}

/* Highlighted reference panel */
.panel-card.highlight {
    color: var(--igus-orange);
    border-color: var(--igus-orange);
    animation: enablePulse 2s ease-in-out infinite;
}

/* Disabled panel (after highlight so it wins without !important) */
.panel-card.panel-card.disabled {
    pointer-events: none;
    cursor: default;
    color: var(--border);
    border-color: var(--border-subtle);
    box-shadow: none;
    animation: none;
}

.panel-card.panel-card.disabled .panel-title {
    color: var(--border);
}

.panel-card.ref-panel.panel-card.disabled .btn-icon {
    opacity: var(--disabled-icon-opacity);
}

.panel-card.ref-panel.panel-card.disabled .btn-label {
    color: var(--border);
}

/* ============================================
   TAB BAR / BOTTOM NAVIGATION
   ============================================ */
.tab-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--tab-height);
    background: var(--surface);
    border-top: var(--border-w) solid var(--border);
    display: flex;
    align-items: stretch;
    box-shadow: var(--shadow-tab-bar);
}

.tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tab-gap);
    cursor: pointer;
    color: var(--text-dim);
    transition: color var(--dur-transition) ease;
    border: none;
    background: none;
    position: relative;
    font-family: 'DM Sans', system-ui, sans-serif;
}

.tab .icon-mask {
    width: var(--tab-icon-size);
    height: var(--tab-icon-size);
}

/* Mask-based icons so they inherit text color (used by tab bar, coming-soon) */
.icon-mask {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: var(--icon) no-repeat center / contain;
    mask: var(--icon) no-repeat center / contain;
}

.tab span {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-md);
    text-transform: uppercase;
}

.tab.active {
    color: var(--igus-orange);
}

.tab.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--tab-indicator-inset);
    right: var(--tab-indicator-inset);
    height: var(--tab-indicator-h);
    background: var(--igus-orange);
    border-radius: var(--tab-indicator-radius);
}

.tab.disabled {
    opacity: var(--disabled-tab-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   INFO SCREEN
   ============================================ */
.info-zone {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--zone-gap);
    padding: var(--zone-pad);
    min-height: 100%;
    align-content: start;
}

.info-zone > .info-panel-wide {
    grid-column: 1 / -1;
}

.info-panel {
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-card);
    padding: var(--info-panel-pad);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--tile-content-gap);
}

.info-panel-title {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: var(--tracking-lg);
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: var(--info-panel-title-mb);
}

/* ============================================
   COMING SOON SCREEN
   ============================================ */
.coming-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: var(--hero-outer-pad);
}

.coming-soon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hero-card-gap);
    padding: var(--hero-card-pad);
    max-width: var(--hero-card-max-w);
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-hero);
    text-align: center;
}

.coming-soon-icon {
    width: var(--hero-icon-outer);
    height: var(--hero-icon-outer);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--igus-orange-dim);
    border-radius: 50%;
    color: var(--igus-orange);
    margin-bottom: var(--hero-icon-mb);
}

.coming-soon-icon .icon-mask {
    width: var(--hero-icon-inner);
    height: var(--hero-icon-inner);
}

.coming-soon-tag {
    font-size: var(--hero-tag-font);
    font-weight: 700;
    letter-spacing: var(--tracking-xxl);
    text-transform: uppercase;
    color: var(--igus-orange);
    padding: var(--hero-tag-pad);
    background: var(--igus-orange-dim);
    border-radius: var(--radius-circle-pill);
}

.coming-soon-title {
    font-size: var(--hero-title-font);
    font-weight: 700;
    color: var(--text);
}

.coming-soon-desc {
    font-size: var(--hero-desc-font);
    color: var(--text-muted);
    max-width: var(--hero-desc-max-w);
    line-height: 1.5;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes alertPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

@keyframes enablePulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--igus-orange-glow); }
    50% { box-shadow: 0 0 var(--pulse-glow-blur) var(--pulse-glow-spread) var(--igus-orange-glow); }
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(var(--slide-in-y)); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes screenFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes heroEnter {
    from { opacity: 0; transform: translateY(var(--hero-in-y)) scale(var(--hero-in-scale)); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tabIndicatorIn {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.screen.active {
    animation: screenFade var(--dur-transition) ease both;
}

.tile, .program-row, .ctrl-row, .bottom-row, .info-panel {
    animation: fadeSlideIn var(--dur-enter) ease both;
}

.tile:nth-child(1), .info-panel:nth-child(1) { animation-delay: 0.03s; }
.tile:nth-child(2), .info-panel:nth-child(2) { animation-delay: 0.06s; }
.tile:nth-child(3), .info-panel:nth-child(3) { animation-delay: 0.09s; }
.tile:nth-child(4), .info-panel:nth-child(4) { animation-delay: 0.12s; }

/* Gate the icon/label swap until the first state update so Enable↔Reset
   and Start↔Pause don't flicker on page load. */
.ctrl-btn .btn-icon, .ctrl-btn .btn-label {
    opacity: 0;
    transition: opacity var(--dur-transition) ease;
}
.ctrl-btn.initialized .btn-icon, .ctrl-btn.initialized .btn-label {
    opacity: 1;
}

.coming-soon-card {
    animation: heroEnter var(--dur-hero) var(--ease-smooth) both;
    animation-delay: 0.05s;
}

.tab.active::before {
    transform-origin: center;
    animation: tabIndicatorIn var(--dur-transition) var(--ease-snap) both;
}

/* ============================================
   RESPONSIVE: 800x480 (7" Touch Panel)
   ============================================ */
@media (max-width: 53.125rem) { /* 850px */
    :root {
        --sidebar-width: 170px;
        --header-height: 38px;
        --tab-height: 42px;
        --tile-min-height: 56px;

        --btn-height: 100px;

        --zone-pad: 10px 12px;
        --zone-gap: 8px;

        --text-xs: 13px;
        --text-sm: 14px;
        --text-md: 15px;
        --text-lg: 17px;

        --header-pad-x: 10px;
        --header-gap: 8px;
        --logo-height: 20px;

        --banner-pad-x: 10px;
        --banner-min-h: 28px;

        --tile-pad: 6px 8px;
        --tile-header-mb: 3px;

        --select-h: 34px;

        --tab-icon-size: 18px;
    }
}

/* ============================================
   BOTTOM SHEET (hidden by default, shown on mobile)
   ============================================ */
.bottom-sheet-backdrop {
    display: none;
}

.bottom-sheet {
    display: none;
}

.bottom-sheet-handle {
    display: flex;
    justify-content: center;
    padding: var(--sheet-handle-pad);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.handle-bar {
    width: var(--sheet-handle-bar-w);
    height: var(--sheet-handle-bar-h);
    background: var(--text-dim);
    border-radius: var(--sheet-handle-bar-radius);
}

.bottom-sheet-content {
    display: flex;
    flex-direction: column;
    gap: var(--sheet-gap);
    background: var(--border);
    overflow-y: auto;
}

.bottom-sheet .tile {
    background: var(--surface);
    padding: var(--sheet-tile-pad);
    flex: none;
    border-right: none;
    border-left: var(--sheet-tile-accent-w) solid var(--border);
}

.bottom-sheet .tile.ok {
    border-left-color: var(--green);
}

.bottom-sheet .tile.warning {
    border-left-color: var(--yellow);
}

.bottom-sheet .tile.error {
    border-left-color: var(--red);
}

.bottom-sheet .tile-header {
    font-size: var(--text-xs);
    margin-bottom: var(--sheet-tile-header-mb);
}

.bottom-sheet .tile-field {
    font-size: var(--text-sm);
}

/* ============================================
   RESPONSIVE: Very small screens
   ============================================ */
@media (max-width: 40rem) { /* 640px */
    :root {
        --sidebar-width: 0;
        --btn-height: 90px;
    }

    .sidebar {
        display: none;
    }

    .header {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--header-height);
        padding-top: 4px;
        padding-bottom: 4px;
        row-gap: 4px;
    }

    .header-info {
        margin-left: auto;
    }

    .header-error {
        flex-basis: 100%;
        order: 3;
    }

    .header-error.hidden {
        display: none;
    }

    .layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .app-container {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        padding-bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px));
    }

    .tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .screen {
        height: auto;
    }

    .controls-zone {
        height: auto;
        overflow: visible;
    }

    .ctrl-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .bottom-row {
        grid-template-columns: 1fr;
    }

    .panel-card {
        height: auto;
        min-height: var(--panel-narrow-min-h);
    }

    .program-row {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .program-row .row-label {
        order: 1;
    }

    .program-row .program-status {
        order: 2;
        margin-left: auto;
    }

    .program-row .program-select-wrap {
        order: 3;
        flex: 1 0 100%;
    }

    .info-zone {
        grid-template-columns: 1fr;
    }

    .bottom-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--backdrop-color);
        z-index: 49;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dur-sheet) ease;
    }

    .bottom-sheet-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    .bottom-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        z-index: 51;
        background: transparent;
        pointer-events: none;
    }

    .bottom-sheet .bottom-sheet-handle {
        pointer-events: auto;
        background: var(--surface);
        border-top: var(--border-w) solid var(--border);
    }

    .bottom-sheet .bottom-sheet-content {
        max-height: 0;
        transition: max-height var(--dur-sheet) ease;
        pointer-events: auto;
    }

    .bottom-sheet.open .bottom-sheet-content {
        max-height: calc(100dvh - var(--header-height) - var(--tab-height) - env(safe-area-inset-bottom, 0px) - var(--sheet-bottom-pad));
    }

    .bottom-sheet.open {
        background: var(--surface);
        box-shadow: var(--shadow-sheet);
        pointer-events: auto;
    }

    .bottom-sheet.dragging .bottom-sheet-content {
        transition: none;
    }
}

/* ============================================
   ERROR DETAIL DIALOG
   ============================================ */
.error-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: var(--backdrop-color);
    z-index: 99;
    opacity: 1;
    transition: opacity var(--dur-sheet) ease;
}

.error-dialog-backdrop.hidden {
    opacity: 0;
    pointer-events: none;
}

.error-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(480px, 90vw);
    max-height: 80vh;
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 1;
    transition: opacity var(--dur-sheet) ease;
    overflow: hidden;
}

.error-dialog.hidden {
    opacity: 0;
    pointer-events: none;
}

.error-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.error-dialog-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-sm);
    color: var(--red);
    text-transform: uppercase;
    background: var(--red-dim);
    padding: 4px 8px;
    border-radius: var(--radius-pill);
}

.error-dialog-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 24px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    border-radius: var(--radius-input);
}

.error-dialog-close:hover {
    color: var(--text);
    background: var(--surface-raised);
}

.error-dialog-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.error-dialog-description {
    font-size: var(--text-sm);
    color: var(--text-dim);
    line-height: 1.5;
    overflow-y: auto;
}

/* ============================================
   LICENSE LOCK OVERLAY
   ============================================ */
.license-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg); /* fully opaque: nothing underneath stays visible */
    z-index: 200; /* above error dialog (100) and bottom sheet */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* display:none instead of the opacity pattern: the lock screen must block
   all input with no transition window */
.license-overlay.hidden {
    display: none;
}

.license-overlay-card {
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    padding: 24px 32px;
    max-width: min(520px, 90vw);
    text-align: center;
}

.license-overlay-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--red);
}

.license-overlay-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 10px;
}

.license-overlay-feature {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--text-xs);
    color: var(--text-dim);
    margin-top: 12px;
}

/* ============================================
   RESPONSIVE: Smartphones (≤480px)
   ============================================ */
@media (max-width: 30rem) { /* 480px */
    :root {
        --btn-height: 80px;
        --btn-icon-size: 24px;
        --btn-gap: 4px;

        --zone-pad: 8px 10px;
        --zone-gap: 8px;

        --text-xs: 12px;
        --text-sm: 13px;
        --text-md: 14px;
        --text-lg: 16px;

        --header-pad-x: 8px;
        --header-gap: 6px;
        --logo-height: 18px;

        --panel-pad: 8px 12px;

        --select-h: 34px;
        --select-pad-x: 10px;

        --tab-icon-size: 16px;
    }
}

/* ============================================
   RESPONSIVE: Large screens (≥1200px)
   ============================================ */
@media (min-width: 75rem) { /* 1200px */
    :root {
        --header-height: 52px;
        --tab-height: 56px;
        --sidebar-width: 280px;
        --tile-min-height: 90px;

        --btn-height: 160px;
        --btn-icon-size: 48px;

        --zone-pad: 20px 28px;
        --zone-gap: 16px;

        --text-xs: 16px;
        --text-sm: 17px;
        --text-md: 19px;
        --text-lg: 21px;

        --header-pad-x: 24px;
        --header-gap: 16px;
        --logo-height: 32px;

        --tile-pad: 14px 16px;
        --tile-header-mb: 8px;

        --panel-pad: 14px 20px;

        --vel-btn-w: 44px;
        --vel-btn-h: 34px;
        --vel-btn-img: 22px;
        --slider-track-h: 34px;

        --select-h: 46px;

        --tab-icon-size: 24px;

        --info-panel-pad: 14px 16px;
    }
}

/* ============================================
   RESPONSIVE: Extra-large screens (≥1600px)
   ============================================ */
/* ============================================
   JOGGING SCREEN
   ============================================ */
.jog-zone {
    display: flex;
    flex-direction: column;
    padding: var(--zone-pad);
    gap: var(--zone-gap);
    min-height: 100%;
    background: var(--bg);
}

/* Top row: mode toggle + stop */
.jog-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zone-gap);
    flex-wrap: wrap;
}

.jog-mode-row {
    display: flex;
    gap: 4px;
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-pill);
    padding: 3px;
}

.jog-mode-btn {
    padding: 6px 20px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: var(--tracking-md);
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--dur-transition) ease;
}

.jog-mode-btn.active {
    background: var(--igus-orange);
    color: #fff;
    box-shadow: var(--shadow-orange);
}

/* Stop button */
.jog-stop-btn {
    height: 42px;
    padding: 0 18px;
    border: var(--btn-border-w) solid var(--red);
    border-radius: var(--radius-btn);
    background: var(--red-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    cursor: pointer;
    transition: all var(--dur-press) ease;
    box-shadow: 0 1px 4px var(--red-glow);
    color: var(--red);
    flex-shrink: 0;
}

.jog-stop-btn:active {
    transform: scale(var(--btn-press-scale));
}

.jog-stop-btn .btn-icon {
    width: 20px;
    height: 20px;
}

.jog-stop-btn .btn-label {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
}

/* Axis list */
.jog-axis-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    flex: 1;
}

/* Single axis row: Name  Value  [-100][-10][-1][+1][+10][+100] */
.jog-axis-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-card);
    padding: 6px 10px;
    box-shadow: var(--shadow-xs);
}

.jog-axis-name {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: var(--tracking-lg);
    text-transform: uppercase;
    color: var(--text);
    width: 28px;
    flex-shrink: 0;
}

.jog-axis-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-dim);
    min-width: 100px;
    text-align: right;
    flex-shrink: 0;
}

.jog-btn-group {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.jog-btn-pack {
    display: flex;
    gap: 4px;
}

/* Step buttons (inline per axis) */
.jog-step-btn {
    padding: 8px 6px;
    min-width: 48px;
    border: var(--btn-border-w) solid var(--border);
    border-radius: var(--radius-input);
    background: var(--surface);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--dur-press) ease;
    text-align: center;
    flex-shrink: 0;
}

.jog-step-btn:active {
    transform: scale(var(--btn-press-scale));
}

.jog-step-btn.disabled {
    pointer-events: none;
    cursor: default;
    color: var(--border);
    border-color: var(--border-subtle);
}

/* ============================================
   JOGGING — RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    .jog-axis-row {
        flex-wrap: wrap;
    }

    .jog-axis-name,
    .jog-axis-value {
        text-align: left;
    }

    .jog-btn-group {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

    .jog-step-btn {
        min-width: 40px;
        padding: 6px 4px;
        font-size: 12px;
    }
}

@media (min-width: 100rem) { /* 1600px */
    :root {
        --sidebar-width: 340px;
        --header-height: 58px;
        --tab-height: 60px;
        --tile-min-height: 110px;

        --btn-height: 200px;
        --btn-icon-size: 56px;

        --zone-pad: 28px 36px;
        --zone-gap: 20px;

        --text-xs: 17px;
        --text-sm: 18px;
        --text-md: 20px;
        --text-lg: 22px;
    }

    .info-zone {
        grid-template-columns: repeat(3, 1fr);
    }
    .info-zone > .info-panel-wide { grid-column: auto; }
}
