/* SensorView Dark Mode */
* {
    box-sizing: border-box;
    -webkit-font-smoothing: initial;
    /* Disable antialiasing for crisp text */
}

.btn-control.btn-dim {
    background-color: #f39c12;
    color: white;
}

.btn-control.btn-dim:hover {
    background-color: #d68910;
}

body {
    font-family: Tahoma, Verdana, Segoe UI, sans-serif;
    font-size: 11px;
    background-color: #1e1e1e;
    /* Dark Mode Background */
    color: #e0e0e0;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollbars - Dark Mode Style */
::-webkit-scrollbar {
    width: 17px;
    height: 17px;
    background-color: #2d2d2d;
}

::-webkit-scrollbar-thumb {
    background-color: #555;
    border: 1px solid #2d2d2d;
    box-shadow: inset 1px 0 0 0 #2d2d2d;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #666;
}

::-webkit-scrollbar-button {
    background-color: #2d2d2d;
    width: 17px;
    height: 17px;
}

::-webkit-scrollbar-corner {
    background-color: #2d2d2d;
}

/* Utilities */
.btn {
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    padding: 2px 12px;
    height: 23px;
    color: #e0e0e0;
    background: linear-gradient(to bottom, #4a4a4a 0%, #3a3a3a 100%);
    border: 1px solid #555;
    border-radius: 2px;
    cursor: default;
    min-width: 75px;
    outline: none;
    box-shadow: inset 1px 1px 0px #5a5a5a;
}

.btn:hover:not(:disabled) {
    background: linear-gradient(to bottom, #4a6a8a 0%, #3a5a7a 100%);
    border-color: #5a8aba;
    box-shadow: inset 1px 1px 0px #5a7a9a;
}

.btn:active:not(:disabled) {
    background: linear-gradient(to bottom, #3a5a7a 0%, #2a4a6a 100%);
    border-color: #4a7aaa;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
    padding: 3px 11px 1px 13px;
    /* Shift text slightly */
}

.btn:disabled {
    color: #666;
    background: #3a3a3a;
    border-color: #444;
    box-shadow: none;
    cursor: default;
}

.btn-primary {
    font-weight: bold;
    border: 1px solid #5a8aba;
}

.btn-success {
    color: #90ee90;
    background: linear-gradient(to bottom, #2a4a2a 0%, #1a3a1a 100%);
    border-color: #4a8a4a;
}

.btn-warning {
    color: #ffcc80;
    background: linear-gradient(to bottom, #5a4a2a 0%, #4a3a1a 100%);
    border-color: #8a6a3a;
}

.btn-info {
    color: #80c0ff;
    background: linear-gradient(to bottom, #2a4a6a 0%, #1a3a5a 100%);
    border-color: #4a7aaa;
}

h1,
h2,
h3 {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

/* Main Layout */
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Menu Bar / Header */
header {
    background: linear-gradient(to bottom, #3a3a3a 0%, #2a2a2a 100%);
    border-bottom: 1px solid #444;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    height: 38px;
    flex-shrink: 0;
}

header .header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

header h1 {
    font-size: 12px;
    font-weight: bold;
    color: #e0e0e0;
}

.subtitle {
    display: none;
    /* Hide subtitle for cleaner look */
}

/* Toolbar Area */
.connection-panel {
    background-color: #2d2d2d;
    padding: 5px 8px;
    border-bottom: 1px solid #444;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    flex-shrink: 0;
}

.button-group {
    display: flex;
    gap: 6px;
}

.status-bar {
    font-size: 11px;
    color: #b0b0b0;
    display: flex;
    gap: 15px;
    padding-right: 5px;
    border-left: 1px solid #444;
    padding-left: 10px;
}

.status {
    position: relative;
    padding-left: 12px;
}

.status::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #666;
    border: 1px solid #888;
}

.status.connected::before {
    background-color: #00CC00;
    border-color: #006600;
}

.status.discovering::before {
    background-color: #FFCC00;
    border-color: #CC9900;
}

.status.disconnected::before {
    background-color: #CC0000;
    border-color: #660000;
}

/* Main Content Area (Split Views) */
.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 5px;
    gap: 5px;
}

/* Sidebar (Devices) */
.devices-sidebar {
    width: 300px;
    display: flex;
    flex-direction: column;
    background-color: #2a2a2a;
    border: 1px solid #444;
    flex-shrink: 0;
}

.devices-header {
    background: linear-gradient(to bottom, #3a3a3a 0%, #2d2d2d 100%);
    border-bottom: 1px solid #444;
    padding: 4px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 28px;
}

.devices-header h2 {
    font-size: 11px;
    font-weight: bold;
    color: #e0e0e0;
}

.devices-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Device Search Filter */
.devices-search {
    padding: 4px 6px;
    background-color: #333;
    border-bottom: 1px solid #444;
}

.devices-search input {
    width: 100%;
    height: 21px;
    padding: 2px 6px;
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    border: 1px solid #555;
    background-color: #2a2a2a;
    color: #e0e0e0;
    box-sizing: border-box;
}

.devices-search input:focus {
    outline: none;
    border-color: #5a8aba;
    box-shadow: 0 0 2px rgba(90, 138, 186, 0.3);
}

.devices-search input::placeholder {
    color: #777;
    font-style: italic;
}

.devices-list {
    flex: 1;
    overflow-y: auto;
    padding: 2px;
    background-color: #2a2a2a;
}

.empty-state {
    padding: 10px;
    color: #777;
    text-align: center;
    font-style: italic;
}

/* Device List Items */
.device-item {
    border: 1px dotted transparent;
    padding: 0;
    cursor: default;
    display: flex;
    flex-direction: column;
}

.device-item:hover {
    background-color: #3a3a3a;
    border-color: #555;
}

.device-item.selected {
    background-color: #3a5a7a;
    border: 1px dotted #5a8aba;
}

/* nARP relay card — indented under nRP-Main */
.device-item.narp-relay-item > .device-row {
    padding-left: 20px;
    border-left: 2px solid #4a6a8a;
    margin-left: 8px;
}

.device-slot-label {
    font-size: 10px;
    color: #7aaecc;
    margin-right: 4px;
    font-weight: 600;
    white-space: nowrap;
}

/* Drag and Drop Styles */
.device-item.draggable {
    cursor: grab;
}

.device-item.draggable:active {
    cursor: grabbing;
}

.device-item.dragging {
    opacity: 0.5;
    background-color: #4a5a6a;
}

.device-chip-draggable {
    cursor: grab;
}

.device-chip-draggable:active {
    cursor: grabbing;
}

.device-chip-pending {
    border-style: dashed;
    opacity: 0.7;
    background-color: #3a4a3a;
}

.device-row {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    gap: 8px;
    height: 28px;
}

.device-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #666;
    flex-shrink: 0;
}

.device-status-indicator.online {
    background-color: #00CC00;
    border-color: #006600;
}

.device-status-indicator.offline {
    background-color: #CC0000;
    border-color: #660000;
}

.device-name {
    font-weight: bold;
    color: #e0e0e0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

.device-serial-small {
    color: #888;
    font-size: 9px;
    font-family: 'Consolas', monospace;
    letter-spacing: 0.5px;
}


.device-info-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 8px;
    min-width: 0;
    flex-shrink: 0;
}

.device-default-missing {
    font-size: 9px;
    color: #e74c3c;
    white-space: nowrap;
}

.device-default-missing-row {
    opacity: 0.85;
}

.device-default-missing-banner {
    color: #e74c3c;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid rgba(231, 76, 60, 0.4);
    border-radius: 4px;
    background: rgba(231, 76, 60, 0.1);
}

.device-port-voltages {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 8px;
    font-family: 'Consolas', monospace;
    padding: 1px 4px;
    background-color: rgba(136, 136, 136, 0.1);
    border-radius: 2px;
    border: 1px solid rgba(136, 136, 136, 0.2);
    line-height: 1.2;
}

.device-item.selected .device-port-voltages {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.voltage-row {
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.voltage-label {
    color: #aaa;
    font-weight: normal;
    font-size: 8px;
}

.voltage-value {
    color: #90ee90;
    font-weight: bold;
    font-size: 8px;
    min-width: 28px;
    text-align: right;
}

.device-item.selected .voltage-value {
    color: #aaffaa;
}

.voltage-unit {
    color: #888;
    font-size: 7px;
}

.btn-icon-small {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 11px;
    padding: 1px 4px;
    border-radius: 3px;
    color: #b0b0b0;
}

.btn-icon-small:hover {
    background-color: #444;
    border-color: #666;
}

.btn-icon-small.active {
    color: #CC0000;
    font-weight: bold;
    animation: blink-animation 1s infinite;
}

@keyframes blink-animation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

/* Control Panel (Property Grid Style) */
.control-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #252525;
    border: 1px solid #444;
    overflow: hidden;
}

.control-panel>h2 {
    background: linear-gradient(to bottom, #3a3a3a 0%, #2d2d2d 100%);
    border-bottom: 1px solid #444;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: bold;
    color: #e0e0e0;
}

.device-control-content {
    padding: 10px;
    overflow-y: auto;
    flex: 1;
}

.selected-device-header {
    background-color: #2a2a2a;
    border: 1px solid #444;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.device-header-left {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.device-header-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.device-header-status-inline {
    font-size: 11px;
    color: #999;
}

.device-header-status-inline .header-status-badge {
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
}

.device-header-status-inline .header-status-badge.on {
    color: #0F0;
    background-color: rgba(0, 180, 0, 0.2);
}

.device-header-status-inline .header-status-badge.off {
    color: #888;
    background-color: #3a3a3a;
}

.device-header-status-inline .header-status-meta {
    color: #888;
}

.status-reason-text {
    color: #a8c8e8;
    font-style: italic;
}

.device-header-control-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #3a3a3a;
}

.header-dim-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    max-width: 200px;
}

.header-dim-wrap .header-dim-slider {
    flex: 1;
    min-width: 60px;
}

.header-dim-value {
    min-width: 36px;
    font-size: 11px;
    font-weight: bold;
}

.header-control-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.header-control-buttons .btn-control {
    min-width: 0;
    padding: 2px 8px;
    font-size: 10px;
}

.btn-link-inline {
    background: none;
    border: none;
    color: #5a8aba;
    cursor: pointer;
    font-size: 11px;
    padding: 0 4px;
    text-decoration: none;
}

.btn-link-inline:hover {
    text-decoration: underline;
}

.device-header-right {
    display: flex;
    align-items: center;
}

.device-header-right-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.device-header-right-buttons {
    display: flex;
    align-items: center;
}

.device-header-occ-light-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    margin-top: 8px;
}

.occupancy-timer-below-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2px;
    padding: 6px 10px;
    background: rgba(127, 140, 141, 0.15);
    border-radius: 6px;
    min-width: 100px;
}

.occupancy-timer-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.occupancy-timer-value {
    font-size: 15px;
    font-weight: 600;
    color: #b0b0b0;
    font-variant-numeric: tabular-nums;
}

.photocell-level-below-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2px;
    padding: 6px 10px;
    background: rgba(127, 140, 141, 0.15);
    border-radius: 6px;
    min-width: 100px;
}

.photocell-level-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.photocell-level-value {
    font-size: 15px;
    font-weight: 600;
    color: #b0b0b0;
    font-variant-numeric: tabular-nums;
}

.status-control-wrapper {
    display: flex;
    gap: 10px;
}

.status-control-wrapper>.control-section {
    flex: 1;
}

.device-title-large {
    font-size: 14px;
    font-weight: bold;
    color: #e0e0e0;
    cursor: text;
    padding: 2px 4px;
    border: 1px solid transparent;
}

.device-title-large:hover {
    background-color: #333;
    border-color: #444;
}

.inline-edit-input {
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    padding: 2px;
    background-color: #2a2a2a;
    color: #e0e0e0;
    border: 1px solid #555;
}

.selected-device-serial {
    color: #888;
    font-size: 10px;
    margin-top: 4px;
}

.control-section {
    background-color: #2d2d2d;
    border: 1px solid #444;
    margin-bottom: 5px;
    padding: 4px;
}

.control-section h3 {
    margin: -4px -4px 4px -4px;
    background-color: #3a3a3a;
    border-bottom: 1px solid #444;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: bold;
    color: #e0e0e0;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dotted #444;
    padding-bottom: 2px;
}

.detail-label {
    color: #999;
}

.detail-value {
    color: #e0e0e0;
    font-family: 'Consolas', monospace;
    font-weight: bold;
}

.control-buttons-row {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.btn-control {
    flex: 1;
    margin: 0;
    height: 24px;
    font-size: 11px;
}

.status-display {
    background-color: #000;
    color: #0F0;
    font-family: 'Consolas', monospace;
    padding: 8px;
    border: 2px inset #FFF;
    margin-bottom: 5px;
    text-align: center;
}

.status-row {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}

.status-value.on {
    color: #0F0;
    text-shadow: 0 0 5px #0F0;
}

.status-value.off {
    color: #555;
}

/* Channel Assignment Grid */
.channel-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    margin-bottom: 10px;
}

.channel-checkbox-wrapper {
    display: flex;
    align-items: center;
    background-color: #2a2a2a;
    border: 1px solid #555;
    padding: 2px 4px;
    justify-content: center;
    position: relative;
}

.channel-checkbox-wrapper:hover {
    background-color: #3a4a5a;
    border-color: #5a8aba;
}

.channel-checkbox {
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.channel-checkbox-label {
    margin-left: 4px;
    cursor: pointer;
    user-select: none;
    font-size: 10px;
    color: #e0e0e0;
    pointer-events: auto;
}

.section-hint {
    color: #888;
    font-style: italic;
    margin-bottom: 8px;
    margin-top: 0;
}

/* Log Panel (Terminal/List Box) */
.log-panel.log-panel-hidden {
    display: none !important;
}

.log-panel {
    height: 150px;
    min-height: 50px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background-color: #1e1e1e;
    border-top: 1px solid #444;
    flex-shrink: 0;
    position: relative;
    transition: height 0.2s ease;
}

.log-panel.collapsed {
    height: 24px;
    overflow: hidden;
}

.log-panel.collapsed .log-output {
    display: none;
}

.log-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    cursor: ns-resize;
    background-color: transparent;
    z-index: 10;
    transition: background-color 0.2s ease;
}

.log-resize-handle:hover {
    background-color: #5a8aba;
    height: 6px;
}

.log-resize-handle:active {
    background-color: #4a7aaa;
    height: 6px;
}

.log-panel.collapsed .log-resize-handle {
    display: none;
}

.log-header {
    background: linear-gradient(to bottom, #3a3a3a 0%, #2d2d2d 100%);
    border-bottom: 1px solid #444;
    padding: 2px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 24px;
}

.log-header h2 {
    font-size: 11px;
    font-weight: normal;
    color: #b0b0b0;
}

.log-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.log-output {
    flex: 1;
    background-color: #1a1a1a;
    border: 1px solid #444;
    border-left: none;
    border-right: none;
    border-bottom: none;
    /* Just top was needed really, or fill */
    margin: 5px;
    margin-top: 0;
    overflow-y: scroll;
    font-family: 'Consolas', 'Lucida Console', monospace;
    font-size: 11px;
    padding: 2px;
    color: #c0c0c0;
}

.log-entry {
    border-bottom: 1px dotted #333;
    white-space: pre-wrap;
    padding: 1px 0;
}

.log-entry:hover {
    background-color: #252530;
}

.log-timestamp {
    color: #666;
    margin-right: 8px;
}

.log-entry.error {
    color: #ff6b6b;
}

.log-entry.success {
    color: #69db7c;
}

.log-entry.warning {
    color: #ffc078;
}

.log-entry.debug {
    color: #888;
    font-style: italic;
}

/* Inputs */
input[type="number"] {
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    height: 21px;
    width: 40px;
    border: 1px solid #555;
    background-color: #2a2a2a;
    color: #e0e0e0;
    padding-left: 2px;
}

input[type="checkbox"] {
    margin: 0 4px 0 0;
    vertical-align: middle;
}

/* Dim Slider Styles */
.dim-slider-container {
    margin-bottom: 5px;
    padding: 4px;
    background-color: #2a2a2a;
    border: 1px solid #444;
}

.dim-slider-label {
    display: block;
    font-weight: bold;
    margin-bottom: 2px;
    color: #e0e0e0;
}

.dim-slider-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dim-slider {
    flex: 1;
    height: 20px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

/* Slider Track - WebKit (Chrome, Safari, Edge) */
.dim-slider::-webkit-slider-runnable-track {
    height: 8px;
    background: linear-gradient(to bottom, #3a3a3a 0%, #4a4a4a 100%);
    border: 1px solid #555;
    border-radius: 0;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Slider Thumb - WebKit */
.dim-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 11px;
    height: 21px;
    margin-top: -7px;
    background: linear-gradient(to bottom, #5a5a5a 0%, #4a4a4a 100%);
    border: 1px solid #666;
    border-radius: 2px;
    box-shadow: inset 1px 1px 0px #6a6a6a;
    cursor: pointer;
}

.dim-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(to bottom, #4a6a8a 0%, #3a5a7a 100%);
    border-color: #5a8aba;
}

.dim-slider::-webkit-slider-thumb:active {
    background: linear-gradient(to bottom, #3a5a7a 0%, #2a4a6a 100%);
    border-color: #4a7aaa;
}

/* Slider Track - Firefox */
.dim-slider::-moz-range-track {
    height: 8px;
    background: linear-gradient(to bottom, #3a3a3a 0%, #4a4a4a 100%);
    border: 1px solid #555;
    border-radius: 0;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Slider Thumb - Firefox */
.dim-slider::-moz-range-thumb {
    width: 11px;
    height: 21px;
    background: linear-gradient(to bottom, #5a5a5a 0%, #4a4a4a 100%);
    border: 1px solid #666;
    border-radius: 2px;
    box-shadow: inset 1px 1px 0px #6a6a6a;
    cursor: pointer;
}

.dim-slider::-moz-range-thumb:hover {
    background: linear-gradient(to bottom, #4a6a8a 0%, #3a5a7a 100%);
    border-color: #5a8aba;
}

.dim-slider::-moz-range-thumb:active {
    background: linear-gradient(to bottom, #3a5a7a 0%, #2a4a6a 100%);
    border-color: #4a7aaa;
}

.dim-slider-value {
    min-width: 45px;
    text-align: right;
    font-family: 'Consolas', monospace;
    font-weight: bold;
    font-size: 12px;
    color: #e0e0e0;
    background-color: #2a2a2a;
    border: 1px solid #555;
    padding: 2px 6px;
}

/* Special Operating Mode Styles */
.special-mode-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

/* Row of dropdowns (Special Mode, Idle Time, WallPod, Follow Photocell) side by side */
.special-mode-settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.special-mode-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.special-mode-field label {
    font-size: 11px;
    color: #b0b0b0;
}

.special-mode-select {
    flex: 1;
    min-width: 0;
    height: 23px;
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    border: 1px solid #555;
    background-color: #2a2a2a;
    color: #e0e0e0;
    padding: 2px 4px;
    cursor: pointer;
}

.special-mode-settings-row .special-mode-select {
    width: 100%;
}

.special-mode-select:focus {
    outline: none;
    border-color: #5a8aba;
}

/* Always On toggle (Dimming / Relay) - nPP16-D-ER-EFP; matches .view-toggle-btn styling */
.always-on-settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    align-items: flex-start;
}

.always-on-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.always-on-field label {
    font-size: 11px;
    color: #b0b0b0;
}

.always-on-toggle {
    display: flex;
    gap: 0;
    border-radius: 3px;
    overflow: hidden;
    width: fit-content;
    border: 1px solid #444;
}

.always-on-toggle-btn {
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    padding: 4px 14px;
    height: 26px;
    color: #b0b0b0;
    background: linear-gradient(to bottom, #3a3a3a 0%, #2a2a2a 100%);
    border: none;
    border-right: 1px solid #444;
    cursor: pointer;
    outline: none;
}

.always-on-toggle-btn:last-child {
    border-right: none;
}

.always-on-toggle-btn:hover:not(.active) {
    background: linear-gradient(to bottom, #4a4a4a 0%, #3a3a3a 100%);
    color: #e0e0e0;
}

.always-on-toggle-btn.active {
    background: linear-gradient(to bottom, #3a5a7a 0%, #2a4a6a 100%);
    border-color: #5a8aba;
    color: #ffffff;
    font-weight: bold;
}

/* Dual-slider section: compact, does not span full width */
.dual-slider-section {
    margin-top: 16px;
    margin-bottom: 8px;
    max-width: 320px;
}

.dual-slider-section-label {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    color: #b0b0b0;
}

/* Dual-Handle Slider (Occupied / Unoccupied Dim Levels) */
.dual-slider-container {
    padding: 10px 8px 12px;
    margin: 4px 0;
}

.dual-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #b0b0b0;
    margin-bottom: 10px;
    padding: 0 4px;
}

.dual-slider-labels strong {
    color: #e0e0e0;
    font-family: 'Consolas', monospace;
}

.dual-slider-number {
    width: 2.8em;
    padding: 2px 4px;
    margin: 0 2px;
    font-size: 12px;
    font-family: 'Consolas', monospace;
    color: #e0e0e0;
    background: #2a2a2a;
    border: 1px solid #555;
    border-radius: 3px;
    -moz-appearance: textfield;
}

.dual-slider-number::-webkit-outer-spin-button,
.dual-slider-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dual-slider-number:focus {
    outline: 1px solid #5a8aba;
    border-color: #5a8aba;
}

.dual-slider-track {
    position: relative;
    height: 24px;
    overflow: visible;
}

.dual-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    pointer-events: none;
}

/* Lower slider sits behind, upper slider in front */
.dual-slider-lower {
    z-index: 1;
}

.dual-slider-upper {
    z-index: 2;
}

/* Offset thumbs so when both values are equal they don't sit on top of each other (easier to click) */
.dual-slider-lower::-webkit-slider-thumb {
    transform: translateX(-3px);
}

.dual-slider-upper::-webkit-slider-thumb {
    transform: translateX(3px);
}

.dual-slider-lower::-moz-range-thumb {
    transform: translateX(-3px);
}

.dual-slider-upper::-moz-range-thumb {
    transform: translateX(3px);
}

/* Only the thumbs should receive pointer events */
.dual-slider::-webkit-slider-thumb {
    pointer-events: all;
}

.dual-slider::-moz-range-thumb {
    pointer-events: all;
}

/* Track - WebKit: only show on lower slider */
.dual-slider::-webkit-slider-runnable-track {
    height: 8px;
    background: transparent;
    border: none;
    border-radius: 0;
}

.dual-slider-lower::-webkit-slider-runnable-track {
    background: linear-gradient(to bottom, #3a3a3a 0%, #4a4a4a 100%);
    border: 1px solid #555;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Thumb - WebKit (unoccupied = amber, occupied = blue) */
.dual-slider-lower::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 21px;
    margin-top: -7px;
    background: linear-gradient(to bottom, #8a7a3a 0%, #7a6a2a 100%);
    border: 1px solid #998a4a;
    border-radius: 2px;
    box-shadow: inset 1px 1px 0px #9a8a4a;
    cursor: pointer;
    pointer-events: all;
}

.dual-slider-lower::-webkit-slider-thumb:hover {
    background: linear-gradient(to bottom, #9a8a4a 0%, #8a7a3a 100%);
    border-color: #aa9a5a;
}

.dual-slider-upper::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 21px;
    margin-top: -7px;
    background: linear-gradient(to bottom, #4a6a8a 0%, #3a5a7a 100%);
    border: 1px solid #5a8aba;
    border-radius: 2px;
    box-shadow: inset 1px 1px 0px #5a7a9a;
    cursor: pointer;
    pointer-events: all;
}

.dual-slider-upper::-webkit-slider-thumb:hover {
    background: linear-gradient(to bottom, #5a7a9a 0%, #4a6a8a 100%);
    border-color: #6a9aca;
}

/* Track - Firefox: only show on lower slider */
.dual-slider::-moz-range-track {
    height: 8px;
    background: transparent;
    border: none;
    border-radius: 0;
}

.dual-slider-lower::-moz-range-track {
    background: linear-gradient(to bottom, #3a3a3a 0%, #4a4a4a 100%);
    border: 1px solid #555;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Thumb - Firefox (unoccupied = amber, occupied = blue) */
.dual-slider-lower::-moz-range-thumb {
    width: 13px;
    height: 21px;
    background: linear-gradient(to bottom, #8a7a3a 0%, #7a6a2a 100%);
    border: 1px solid #998a4a;
    border-radius: 2px;
    box-shadow: inset 1px 1px 0px #9a8a4a;
    cursor: pointer;
    pointer-events: all;
}

.dual-slider-lower::-moz-range-thumb:hover {
    background: linear-gradient(to bottom, #9a8a4a 0%, #8a7a3a 100%);
    border-color: #aa9a5a;
}

.dual-slider-upper::-moz-range-thumb {
    width: 13px;
    height: 21px;
    background: linear-gradient(to bottom, #4a6a8a 0%, #3a5a7a 100%);
    border: 1px solid #5a8aba;
    border-radius: 2px;
    box-shadow: inset 1px 1px 0px #5a7a9a;
    cursor: pointer;
    pointer-events: all;
}

.dual-slider-upper::-moz-range-thumb:hover {
    background: linear-gradient(to bottom, #5a7a9a 0%, #4a6a8a 100%);
    border-color: #6a9aca;
}

.dual-slider-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #777;
    margin-top: 8px;
    padding: 0 4px;
}

.device-loading-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid #555;
    border-top-color: #b0b0b0;
    border-radius: 50%;
    animation: spinner 0.6s linear infinite;
    display: inline-block;
    margin-right: 5px;
    flex-shrink: 0;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.btn-icon-small.warning {
    color: #CC0000;
    font-weight: bold;
    border-color: #CC0000;
}

/* View Toggle Bar */
.view-toggle-bar {
    display: flex;
    padding: 5px 8px;
    background-color: #2d2d2d;
    border-bottom: 1px solid #444;
    gap: 0;
}

.view-toggle-btn {
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    padding: 4px 16px;
    height: 26px;
    color: #b0b0b0;
    background: linear-gradient(to bottom, #3a3a3a 0%, #2a2a2a 100%);
    border: 1px solid #444;
    cursor: pointer;
    outline: none;
}

.view-toggle-btn:first-child {
    border-radius: 3px 0 0 3px;
}

.view-toggle-btn:last-child {
    border-radius: 0 3px 3px 0;
}

.view-toggle-btn+.view-toggle-btn {
    border-left: none;
}

.view-toggle-btn:hover:not(.active) {
    background: linear-gradient(to bottom, #4a4a4a 0%, #3a3a3a 100%);
    color: #e0e0e0;
}

.view-toggle-btn.active {
    background: linear-gradient(to bottom, #3a5a7a 0%, #2a4a6a 100%);
    border-color: #5a8aba;
    color: #ffffff;
    font-weight: bold;
}

/* Channels View Container */
.channels-view-container {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 5px;
    gap: 5px;
    overflow: hidden;
}

.channels-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.channels-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: #2d2d2d;
    border: 1px solid #444;
    border-bottom: none;
}

.channels-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.channels-header-title h2 {
    margin: 0;
    font-size: 16px;
    color: #e0e0e0;
}

.unsaved-changes-indicator {
    font-size: 11px;
    color: #ffaa00;
    font-style: italic;
}

.channels-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Three-column channel layout */
.channel-row-three-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background-color: #444;
    border-bottom: 1px solid #3a3a3a;
}

.channel-column {
    background-color: #2a2a2a;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.channel-column-header {
    padding: 8px 12px;
    background-color: #2d2d2d;
    border-bottom: 1px solid #444;
    font-weight: bold;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.channel-column-header.switch {
    color: #80c0ff;
    background-color: #2d2d3d;
}

.channel-column-header.occupancy {
    color: #ffcc80;
    background-color: #3d2d2d;
}

.channel-column-header.photocell {
    color: #c0ff80;
    background-color: #2d3d2d;
}

.channel-column-content {
    flex: 1;
    padding: 8px;
    overflow-y: auto;
    min-height: 0;
}

.channel-drop-zone {
    min-height: 40px;
    padding: 8px;
    border: 2px dashed #555;
    border-radius: 4px;
    margin-bottom: 8px;
    background-color: #252525;
    transition: all 0.2s ease;
}

.channel-drop-zone.drag-over {
    border-color: #5a8aba;
    background-color: #2a3a4a;
    border-style: solid;
}

.channel-drop-zone.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 10px;
    font-style: italic;
}

.channels-content {
    flex: 1;
    overflow-y: auto;
    background-color: #252525;
    border: 1px solid #444;
    padding: 0;
}

/* Channels add bar (Control Channels tab) */
.channels-addbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background-color: #242424;
    border-bottom: 1px solid #3a3a3a;
}

.channels-addbar-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.channels-addbar-title {
    font-weight: bold;
    color: #e0e0e0;
    font-size: 12px;
}

.channels-addbar-hint {
    font-size: 10px;
    color: #888;
}

.channels-addbar-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.channels-quick-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.channels-quick-add-more {
    font-size: 10px;
    color: #666;
    padding: 3px 4px;
}

.channels-addbar-manual {
    display: flex;
    gap: 6px;
    align-items: center;
}

.channels-add-input {
    width: 64px;
    height: 22px;
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    color: #e0e0e0;
    padding: 3px 8px;
}

.channels-add-input:focus {
    border-color: #5a8aba;
    outline: none;
}

.channels-remove-channel-btn {
    margin-left: 10px;
}

/* Channel Row - New three-column layout */
.channel-row {
    border-bottom: 1px solid #3a3a3a;
    background-color: #2a2a2a;
}

.channel-row-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: 12px;
    background-color: #2d2d2d;
    border-bottom: 1px solid #444;
}

.channel-row-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.channel-expand-icon {
    font-size: 10px;
    color: #888;
    width: 12px;
    transition: transform 0.2s ease;
}

.channel-row.expanded .channel-expand-icon {
    transform: rotate(90deg);
}

.channel-number {
    font-weight: bold;
    color: #5a8aba;
    min-width: 30px;
}

.channel-name-input {
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    color: #e0e0e0;
    padding: 3px 8px;
    width: 150px;
    height: 22px;
}

.channel-name-input:focus {
    border-color: #5a8aba;
    outline: none;
}

.channel-toggle {
    display: flex;
    gap: 0;
    margin-left: 10px;
}

.channel-toggle-btn {
    font-family: Tahoma, sans-serif;
    font-size: 10px;
    padding: 2px 8px;
    height: 20px;
    color: #888;
    background: #333;
    border: 1px solid #555;
    cursor: pointer;
}

.channel-toggle-btn:first-child {
    border-radius: 2px 0 0 2px;
}

.channel-toggle-btn:last-child {
    border-radius: 0 2px 2px 0;
    border-left: none;
}

.channel-toggle-btn.off-active {
    background: #4a3030;
    color: #ff8080;
    border-color: #804040;
}

.channel-toggle-btn.on-active {
    background: #304a30;
    color: #80ff80;
    border-color: #408040;
}

.channel-stats {
    display: flex;
    gap: 20px;
    flex: 1;
    justify-content: center;
}

.channel-stat {
    font-size: 10px;
    color: #888;
}

.channel-stat-count {
    color: #b0b0b0;
    font-weight: bold;
}

.channel-delete-btn {
    background: none;
    border: none;
    color: #ff6060;
    font-size: 14px;
    cursor: pointer;
    padding: 0 8px;
    opacity: 0.6;
}

.channel-delete-btn:hover {
    opacity: 1;
}

/* Channel Devices Section */
.channel-devices {
    display: none;
    padding: 10px 20px 15px 40px;
    background-color: #252525;
    border-top: 1px solid #333;
}

.channel-row.expanded .channel-devices {
    display: block;
}

.channel-devices-section {
    margin-bottom: 12px;
}

.channel-devices-section:last-child {
    margin-bottom: 0;
}

.channel-devices-title {
    font-size: 11px;
    font-weight: bold;
    color: #888;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px dotted #444;
}

.channel-devices-title.switch {
    color: #80c0ff;
}

.channel-devices-title.occupancy {
    color: #ffcc80;
}

.channel-devices-title.photocell {
    color: #c0ff80;
}

.channel-devices-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.channel-device-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #3a3a3a;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 10px;
    color: #e0e0e0;
}

.channel-device-chip:hover {
    background-color: #4a4a4a;
    border-color: #666;
}

.channel-device-chip .device-chip-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-device-chip .device-chip-serial {
    color: #888;
    font-family: 'Consolas', monospace;
    font-size: 9px;
}

.channel-device-chip .remove-btn {
    background: none;
    border: none;
    color: #ff6060;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
}

.channel-device-chip .remove-btn:hover {
    opacity: 1;
}

.channel-add-device {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #2a3a2a;
    border: 1px dashed #4a6a4a;
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 10px;
    color: #80c080;
    cursor: pointer;
}

.channel-add-device:hover {
    background-color: #3a4a3a;
    border-color: #5a8a5a;
}

/* Broadcasting vs Tracking styling */
.channel-device-chip.broadcasting {
    border-color: #6080a0;
    background-color: #303848;
}

.channel-device-chip.tracking {
    border-color: #a08060;
    background-color: #484030;
}

/* Empty channel devices message */
.channel-devices-empty {
    color: #666;
    font-style: italic;
    font-size: 10px;
    padding: 4px 0;
}

/* Channel device chips in new layout */
.channel-device-chip-in-column {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: #3a3a3a;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 6px 10px;
    font-size: 10px;
    color: #e0e0e0;
    margin-bottom: 6px;
    cursor: default;
}

.channel-device-chip-in-column:hover {
    background-color: #4a4a4a;
    border-color: #666;
}

.channel-device-chip-in-column.pending {
    border-style: dashed;
    opacity: 0.7;
    background-color: #3a4a3a;
}

.channel-device-chip-in-column .device-chip-name {
    flex: 1;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-device-chip-in-column .device-chip-serial {
    color: #888;
    font-family: 'Consolas', monospace;
    font-size: 9px;
}

.channel-device-chip-in-column .remove-btn {
    background: none;
    border: none;
    color: #ff6060;
    font-size: 14px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.7;
}

.channel-device-chip-in-column .remove-btn:hover {
    opacity: 1;
}

/* Preset Scene Formatting */
.preset-scene-info {
    margin-bottom: 8px;
    padding: 8px;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 11px;
    color: #e0e0e0;
}

.preset-scene-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.preset-scene-tag {
    background-color: #2a4a6a;
    border: 1px solid #4a7aaa;
    border-radius: 3px;
    padding: 2px 6px;
    font-family: 'Consolas', monospace;
    font-size: 11px;
    display: inline-block;
}

/* Save Status Bar */
.save-status-bar {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background: linear-gradient(to bottom, #3a5a7a 0%, #2a4a6a 100%);
    border: 1px solid #5a8aba;
    border-radius: 20px;
    padding: 12px 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    min-width: 300px;
    max-width: 500px;
}

.save-status-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.save-status-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #e0e0e0;
    font-size: 13px;
    font-weight: 500;
}

#saveStatusPercent {
    font-weight: bold;
    color: #90caf9;
    font-size: 14px;
}

.save-progress-bar-container {
    width: 100%;
    height: 6px;
    background-color: #2a2a2a;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #444;
}

.save-progress-bar {
    height: 100%;
    background: linear-gradient(to right, #4a9eff 0%, #5a8aba 50%, #4a9eff 100%);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(74, 158, 255, 0.5);
}

/* Identify Helper View */
.identify-helper-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 5px;
    overflow: hidden;
}

.identify-helper-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background-color: #2d2d2d;
    border: 1px solid #444;
    border-bottom: none;
}

.identify-helper-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.identify-helper-header-title h2 {
    margin: 0;
    font-size: 13px;
    color: #e0e0e0;
}

.identify-helper-status {
    font-size: 11px;
    color: #888;
    font-style: italic;
}

.identify-helper-status.running {
    color: #ffaa00;
}

.identify-helper-header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.identify-helper-separator {
    display: inline-block;
    width: 1px;
    height: 18px;
    background-color: #555;
    margin: 0 4px;
}

.identify-helper-content {
    flex: 1;
    overflow-y: auto;
    background-color: #252525;
    border: 1px solid #444;
    padding: 0;
}

/* Compact grid-based row layout */
.identify-helper-header-row {
    display: grid;
    grid-template-columns: 28px 28px 160px 70px 170px 40px;
    align-items: center;
    padding: 3px 6px;
    gap: 4px;
    background-color: #2d2d2d;
    font-weight: bold;
    font-size: 10px;
    color: #b0b0b0;
    border-bottom: 2px solid #444;
}

.identify-helper-device-row {
    display: grid;
    grid-template-columns: 28px 28px 160px 70px 170px 40px;
    align-items: center;
    padding: 3px 6px;
    gap: 4px;
    border-bottom: 1px solid #333;
}

.identify-helper-device-row:hover {
    background-color: #333;
}

.identify-helper-device-row.led-on {
    background-color: #2a4a2a;
    border-left: 3px solid #90ee90;
    padding-left: 3px;
}

.identify-helper-device-row.led-off {
    background-color: #3a2a2a;
    border-left: 3px solid #ff6b6b;
    padding-left: 3px;
}

/* Column sizing helpers */
.ih-col-check {
    text-align: center;
    width: 28px;
}

.ih-col-find {
    text-align: center;
    width: 28px;
}

.ih-col-device {
    color: #e0e0e0;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ih-col-serial {
    color: #888;
    font-family: 'Consolas', monospace;
    font-size: 12px;
    min-width: 80px;
}

.ih-col-label {
    font-size: 10px;
}

.ih-col-led {
    text-align: center;
    min-width: 40px;
}

/* LED Status */
.ih-led-status {
    font-size: 10px;
    text-align: center;
    color: #888;
}

.ih-led-status.status-on {
    color: #90ee90;
    font-weight: bold;
}

.ih-led-status.status-off {
    color: #ff6b6b;
    font-weight: bold;
}

/* Inline label input */
/* .ih-col-label rules moved below */

.ih-col-label input {
    width: 100%;
    max-width: 220px;
    /* Limit to ~20-25 chars */
    background: transparent;
    border: 1px solid transparent;
    color: #e0e0e0;
    padding: 2px 4px;
    font-family: 'Consolas', monospace;
    font-size: 13px;
}

.ih-col-label input:focus {
    background: #333;
    border: 1px solid #555;
    outline: none;
}

.ih-col-label input.modified {
    color: #ffd700;
    font-style: italic;
}

.ih-label-input {
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    background-color: #1e1e1e;
    border: 1px solid #444;
    color: #e0e0e0;
    padding: 2px 5px;
    height: 20px;
    width: 20ch;
    max-width: 20ch;
    box-sizing: border-box;
}

.ih-label-input:focus {
    border-color: #5a8aba;
    background-color: #2a2a2a;
    outline: none;
}

.ih-label-input::placeholder {
    color: #555;
    font-style: italic;
}

/* Device Type Filters */
.label-helper-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 15px;
    padding: 2px 0;
}

.filter-tag {
    cursor: pointer;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 11px;
    color: #aaa;
    transition: all 0.2s;
    user-select: none;
}

.filter-tag:hover {
    background-color: #444;
    color: #fff;
}

.filter-tag.active {
    background-color: #007acc;
    border-color: #009ce0;
    color: #fff;
    font-weight: bold;
}

.ih-label-input.labeled {
    color: #b0d0f0;
}

/* Sequential Label Toolbar */
.seq-label-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
    padding: 2px 0;
    font-size: 11px;
    color: #b0b0b0;
}

.seq-label-title {
    font-weight: bold;
    color: #e0e0e0;
}

.seq-row-input {
    width: 40px;
    height: 22px;
    background-color: #1e1e1e;
    border: 1px solid #444;
    color: #e0e0e0;
    text-align: center;
    font-size: 11px;
    border-radius: 3px;
    padding: 0 2px;
}

.seq-row-input:focus {
    border-color: #5a8aba;
    outline: none;
}

.seq-label-next {
    font-weight: bold;
    color: #5ac85a;
    padding: 0 6px;
}

/* Label cell: flex container for input + seq button side by side */
.ih-label-cell {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Sequential Assign Button (next to label input) */
.btn-seq-assign {
    background-color: #2a5a2a;
    border: 1px solid #3a7a3a;
    color: #90ee90;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    height: 22px;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-seq-assign:hover {
    background-color: #3a7a3a;
    border-color: #5a9a5a;
    color: #fff;
}

/* Label Helper New Styles */

/* Label Helper Header Controls */
.label-helper-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: 15px;
    padding-left: 15px;
    border-left: 1px solid #444;
}

.room-num-input {
    font-family: Tahoma, sans-serif;
    font-size: 11px;
    padding: 3px 6px;
    height: 23px;
    width: 110px;
    border: 1px solid #555;
    background-color: #1e1e1e;
    color: #e0e0e0;
}

.room-num-input:focus {
    border-color: #5a8aba;
    outline: none;
}

/* Bottom Bar */
.identify-helper-bottom-bar {
    background-color: #2d2d2d;
    border-top: 1px solid #444;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 38px;
    flex-shrink: 0;
}

.identify-controls-group {
    display: flex;
    gap: 8px;
}

.identify-status-group {
    display: flex;
    justify-content: flex-end;
}

/* Dynamic Grid Layout */

/* Default Grid Template (3 columns: Device, Serial, Label+Seq) */
.identify-helper-header-row,
.identify-helper-device-row {
    display: grid;
    grid-template-columns: 140px 110px 1fr;
    align-items: center;
    padding: 3px 6px;
    gap: 8px;
    border-bottom: 1px solid #333;
}

.identify-helper-header-row {
    background-color: #2d2d2d;
    font-weight: bold;
    font-size: 10px;
    color: #b0b0b0;
    border-bottom: 2px solid #444;
}

/* Identify Mode Grid Template (6 columns: Inc, Find, Device, Serial, Label+Seq, LED) */
/* Requires .identify-mode-active on container */
.identify-helper-container.identify-mode-active .identify-helper-header-row,
.identify-helper-container.identify-mode-active .identify-helper-device-row {
    grid-template-columns: 28px 28px 140px 110px 1fr 40px;
}

/* Default Mode (Label Helper): Hide Inc, Find, LED columns */
/* Note: We target the specific columns by class */
.identify-helper-container:not(.identify-mode-active) .ih-col-check,
.identify-helper-container:not(.identify-mode-active) .ih-col-find,
.identify-helper-container:not(.identify-mode-active) .ih-col-led {
    display: none;
}

/* Adjust header layout */
.identify-helper-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.identify-helper-header-right {
    display: flex;
    align-items: center;
}

/* Fake Device Modal */
.fake-device-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.fake-device-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.fake-device-modal-content {
    position: relative;
    background: #2a2a2e;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    min-width: 360px;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

.fake-device-modal-content h2 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: #e0e0e0;
}

.fake-device-modal-desc {
    margin: 0 0 16px 0;
    font-size: 0.85rem;
    color: #999;
}

.fake-device-field {
    margin-bottom: 14px;
}

.fake-device-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
    color: #b0b0b0;
}

.fake-device-field input[type="text"],
.fake-device-field select,
.fake-device-field textarea {
    width: 100%;
    padding: 8px 10px;
    background: #1a1a1e;
    border: 1px solid #444;
    border-radius: 4px;
    color: #e0e0e0;
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.fake-device-field textarea {
    resize: vertical;
    min-height: 48px;
}

.fake-device-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Save Status Toast */
.save-status-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    padding: 10px 20px;
    border-radius: 8px;
    /* Rounded corners */
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s ease-in-out;
    min-width: 200px;
    font-size: 14px;
    display: none;
}

.save-status-toast.saving {
    background: linear-gradient(to bottom, #ffd700, #daa520);
    /* Yellow gradient */
    color: #333;
    border: 1px solid #b8860b;
}

.save-status-toast.success {
    background: linear-gradient(to bottom, #2ecc71, #27ae60);
    /* Green gradient */
    color: #ffffff;
    border: 1px solid #1e8449;
}

.save-status-toast.error {
    background: linear-gradient(to bottom, #e74c3c, #c0392b);
    /* Red gradient */
    color: #ffffff;
    border: 1px solid #922b21;
}

/* Inline confirm popover (replaces browser confirm()) */
.inline-confirm-popover {
    position: fixed;
    z-index: 9999;
    min-width: 240px;
    max-width: 320px;
    background: #2a2a2a;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 10px 10px 8px 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
}

.inline-confirm-message {
    font-size: 11px;
    color: #e0e0e0;
    margin-bottom: 8px;
}

.inline-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ─── Programming View ─────────────────────────────────────────────────────── */

.programming-container {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    gap: 0;
}

.prog-devices-panel {
    width: 300px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #444;
    background: #222;
}

.prog-presets-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 20px;
    background: #1a1a1a;
}

.prog-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #444;
    background: #2a2a2a;
    flex-shrink: 0;
}

.prog-panel-title {
    font-weight: 600;
    font-size: 0.95em;
    flex: 1;
}

.prog-device-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.prog-device-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    border-bottom: 1px solid #333;
    font-size: 0.85em;
}

.prog-device-row:hover {
    background: #2d2d2d;
}

.prog-device-row--checked {
    background: #1e3a5f;
}

.prog-device-row--checked:hover {
    background: #254770;
}

.prog-device-check {
    flex-shrink: 0;
    cursor: pointer;
}

.prog-device-serial {
    color: #888;
    font-family: monospace;
    font-size: 0.9em;
    flex-shrink: 0;
}

.prog-device-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ccc;
}

.prog-status-bar {
    padding: 8px 12px;
    border-top: 1px solid #444;
    font-size: 0.82em;
    color: #888;
    background: #2a2a2a;
    flex-shrink: 0;
}

.prog-presets-grid {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}

.prog-presets-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 8px;
    border-bottom: 1px solid #444;
    margin-bottom: 4px;
}

.prog-time-header {
    width: 72px;
    text-align: center;
    font-size: 0.8em;
    color: #888;
    font-weight: 600;
}

.prog-preset-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #2d2d2d;
}

.prog-preset-label {
    width: 110px;
    min-width: 110px;
    font-size: 0.88em;
    font-weight: 500;
    color: #ccc;
}

.prog-preset-btns {
    display: flex;
    gap: 8px;
}

.prog-preset-btn {
    width: 72px;
    text-align: center;
}

.prog-preset-btn:not(:disabled):hover {
    background: #3a6ea8;
}

.prog-presets-note {
    margin-top: 10px;
    font-size: 0.78em;
    color: #666;
    line-height: 1.5;
}

.prog-applied-summary {
    padding: 12px 14px;
    border-top: 1px solid #333;
    font-size: 0.85em;
    line-height: 1.7;
    min-height: 0;
}

.prog-applied-title {
    font-weight: 600;
    color: #e8734a;
    margin-bottom: 2px;
}

.prog-applied-row {
    color: #999;
}

.prog-applied-row span {
    color: #ddd;
}

.prog-applied-dimming-note {
    font-style: italic;
    color: #666;
}

.prog-progress-section {
    padding: 10px 14px 8px;
    border-top: 1px solid #333;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.prog-progress-bar-track {
    height: 8px;
    background: #2a2a2a;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #444;
}

.prog-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2a6496, #4a9eff);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.prog-progress-label {
    font-size: 0.8em;
    color: #888;
    text-align: right;
}

/* ── Commissioning Tool ─────────────────────────────────────────── */

/* CT row in the device list sidebar */
.commissioning-tool-item {
    background-color: #1e2e3e;
    border-bottom: 1px solid #3a5a7a !important;
    cursor: pointer;
}

.commissioning-tool-item:hover {
    background-color: #263d52 !important;
}

.commissioning-tool-item.selected {
    background-color: #2a4a6a !important;
    border: 1px dotted #6a9aca !important;
}

.ct-icon {
    font-size: 14px;
    flex-shrink: 0;
    color: #7ab0d8;
}

.ct-label {
    font-weight: 600;
    color: #a0c8e8;
    font-size: 0.92em;
}

.ct-device-count {
    margin-left: auto;
    font-size: 0.75em;
    color: #7aaecc;
    white-space: nowrap;
}

/* Devices nested under CT are indented */
.device-item.ct-child-item > .device-row {
    padding-left: 16px;
    border-left: 2px solid #3a5a7a;
    margin-left: 6px;
}

/* nARP relay cards nested under CT get double indent */
.device-item.ct-child-item.narp-relay-item > .device-row {
    padding-left: 28px;
    border-left: 2px solid #4a6a8a;
    margin-left: 6px;
}

/* ── CT Global Status Panel (right side) ───────────────────────── */

.ct-global-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 16px 8px;
    border-bottom: 1px solid #3a5a7a;
    background: #1e2e3e;
}

.ct-global-title {
    font-size: 1.05em;
    font-weight: 600;
    color: #a0c8e8;
}

.ct-global-subtitle {
    font-size: 0.82em;
    color: #7aaecc;
}

.ct-device-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    padding: 4px 0;
}

.ct-device-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-bottom: 1px solid #2a2a2a;
    min-height: 34px;
}

.ct-device-row:hover {
    background-color: #2a3a4a;
}

.ct-row-name {
    font-size: 0.88em;
    color: #e0e0e0;
    min-width: 100px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-row-serial {
    font-size: 0.75em;
    color: #7a9ab8;
    font-family: monospace;
    min-width: 72px;
}

.ct-row-power {
    font-size: 0.72em;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    min-width: 30px;
    text-align: center;
}

.ct-power-on {
    background-color: #1a4a1a;
    color: #66cc66;
    border: 1px solid #2a7a2a;
}

.ct-power-off {
    background-color: #3a1a1a;
    color: #cc6666;
    border: 1px solid #7a2a2a;
}

.ct-row-controls {
    display: flex;
    align-items: center;
    gap: 3px;
}

.ct-row-dimlevel {
    font-size: 0.78em;
    color: #b0b0b0;
    min-width: 32px;
    text-align: center;
    font-family: monospace;
}

.btn-ct-sm {
    font-size: 0.75em;
    padding: 2px 7px;
    border: 1px solid #555;
    border-radius: 3px;
    background-color: #3a3a3a;
    color: #d0d0d0;
    cursor: pointer;
    line-height: 1.4;
}

.btn-ct-sm:hover {
    background-color: #505050;
}

.btn-ct-sm.btn-off {
    border-color: #7a3a3a;
    color: #ff9999;
}

.btn-ct-sm.btn-off:hover {
    background-color: #5a2a2a;
}

.btn-ct-sm.btn-on {
    border-color: #3a7a3a;
    color: #99ff99;
}

.btn-ct-sm.btn-on:hover {
    background-color: #2a5a2a;
}

.btn-ct-sm.btn-dim {
    min-width: 22px;
    color: #aaccff;
}

.btn-ct-sm.btn-warn-active {
    border-color: #aa8800;
    color: #ffcc44;
    background-color: #3a3a00;
}

.ct-row-reason {
    font-size: 0.78em;
    color: #8ab0c8;
    margin-left: 4px;
    white-space: nowrap;
}

/* ─── nTS Config View ───────────────────────────────────────────────────────── */

.nts-container {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    gap: 0;
}

.nts-empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.95em;
    padding: 32px;
}

/* Device list sidebar */
.nts-device-list {
    width: 240px;
    min-width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #444;
    background: #222;
    overflow-y: auto;
}

.nts-list-header {
    padding: 10px 12px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}

.nts-device-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #2a2a2a;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nts-device-item:hover { background: #2d2d2d; }
.nts-device-item--active { background: #1e3a5f; }
.nts-device-item--active:hover { background: #254770; }

.nts-device-name {
    font-size: 0.9em;
    color: #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nts-device-serial {
    font-size: 0.75em;
    color: #777;
    font-family: monospace;
}

.nts-badge {
    font-size: 0.68em;
    padding: 1px 5px;
    border-radius: 3px;
    margin-top: 2px;
    align-self: flex-start;
}

.nts-badge--loading { background: #4a3800; color: #f0c040; }
.nts-badge--ok      { background: #1a3a1a; color: #4caf50; }

/* Main panel */
.nts-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #1a1a1a;
}

.nts-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #444;
    background: #2a2a2a;
    flex-shrink: 0;
}

.nts-panel-title {
    font-weight: 600;
    font-size: 0.95em;
    color: #eee;
    flex: 1;
}

.nts-panel-serial {
    font-size: 0.78em;
    color: #888;
    font-family: monospace;
}

.nts-read-btn {
    flex-shrink: 0;
}

/* Tab bar */
.nts-tab-bar {
    display: flex;
    border-bottom: 1px solid #444;
    background: #222;
    flex-shrink: 0;
}

.nts-tab-btn {
    padding: 8px 18px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #888;
    cursor: pointer;
    font-size: 0.88em;
    transition: color 0.15s, border-color 0.15s;
}

.nts-tab-btn:hover { color: #ccc; }
.nts-tab-btn.active {
    color: #5b9bd5;
    border-bottom-color: #5b9bd5;
}

/* Tab content area */
.nts-tab-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.nts-scroll, .nts-homescreen-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.nts-state-msg {
    padding: 24px 20px;
    color: #666;
    font-size: 0.9em;
}

/* Shared table */
.nts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
}

.nts-table th {
    text-align: left;
    padding: 6px 10px;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    border-bottom: 1px solid #444;
    white-space: nowrap;
}

.nts-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #2a2a2a;
    color: #ccc;
    vertical-align: top;
}

.nts-table tr:hover td { background: #222; }

.nts-label-cell {
    color: #eee;
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Homescreen grid */
.nts-pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.nts-page-card {
    background: #222;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    overflow: hidden;
}

.nts-page-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #2a2a2a;
    border-bottom: 1px solid #3a3a3a;
}

.nts-page-num {
    font-size: 0.75em;
    color: #888;
    font-weight: 600;
    white-space: nowrap;
}

.nts-page-label {
    font-size: 0.88em;
    color: #ddd;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nts-blocks-grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #1a1a1a;
}

/* Individual block */
.nts-block {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #252525;
    min-height: 32px;
    flex-wrap: wrap;
}

.nts-block--hidden { opacity: 0.45; }
.nts-block--unused { opacity: 0.3; }

.nts-block-num {
    font-size: 0.72em;
    color: #666;
    width: 14px;
    flex-shrink: 0;
}

.nts-block-type-tag {
    font-size: 0.7em;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
    flex-shrink: 0;
}

.nts-block--wallpod .nts-block-type-tag { background: #1a3a5a; color: #6ab0e8; }
.nts-block--scene   .nts-block-type-tag { background: #2a3a1a; color: #7acd5e; }

.nts-block-label {
    font-size: 0.83em;
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.nts-block-empty { font-size: 0.8em; color: #555; }

.nts-block-hidden-tag {
    font-size: 0.68em;
    color: #777;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 0 4px;
    flex-shrink: 0;
}

.nts-scene-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
}

.nts-scene-chip {
    font-size: 0.77em;
    background: #1e3a1e;
    color: #8dc87e;
    border-radius: 3px;
    padding: 1px 6px;
    white-space: nowrap;
}

.nts-scene-chip--hidden { opacity: 0.5; }