* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #0a0e14;
    --bg-secondary: #11161d;
    --bg-card: rgba(17, 22, 29, 0.7);
    --accent-cyan: #509D45;
    --accent-cyan-dark: #084100;
    --accent-blue: #569cd6;
    --accent-purple: #c586c0;
    --accent-orange: #faa626;
    --accent-red: #f14c4c;
    --accent-green: #B1C396;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --border-color: rgba(255, 255, 255, 0.08);
    --glass-bg: rgba(17, 22, 29, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at top, rgba(78, 201, 176, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(86, 156, 214, 0.05) 0%, transparent 50%);
    color: var(--text-primary);
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Navbar ── */
.navbar {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    padding: 16px 32px;
    height: 60px;
    flex-shrink: 0;
    gap: 24px;
    box-shadow: var(--shadow-sm);
    justify-content: space-between;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.5rem;
}

.navbar-logo {
    height: 28px;
    width: auto;
    flex-shrink: 0;
}

.navbar-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.navbar-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 28px;
    background: linear-gradient(180deg, var(--accent-cyan), var(--accent-cyan-dark));
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(78, 201, 176, 0.6);
}

.navbar-session {
    font-size: 0.85rem;
    color: var(--accent-cyan);
    font-weight: 600;
    background: var(--glass-bg);
    padding: 6px 12px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

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

.navbar-divider {
    width: 1px;
    height: 28px;
    background: var(--glass-border);
    margin: 0 8px;
    flex-shrink: 0;
}

.navbar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    height: 40px;
}

.navbar-btn span {
    line-height: 1;
}

.navbar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.navbar-btn:active {
    transform: translateY(0);
}

.navbar-btn:disabled {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    border-color: var(--border-color);
}

.navbar-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--accent-blue);
    padding: 0 12px;
}

.navbar-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 460px;
    margin: 0 16px;
}

.progress-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-cyan);
    border-radius: 5px;
    transition: width 0.5s ease;
}

.progress-fill.paused {
    background: var(--accent-orange);
}

.progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 110px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.progress-text.paused {
    color: var(--accent-orange);
}

.progress-cmd-btn {
    padding: 8px 12px;
    height: 32px;
}

.environment-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.environment-selector label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.environment-selector select {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.environment-selector select:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.environment-selector select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px rgba(78, 201, 176, 0.3);
}

.environment-selector select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.btn-toggle-settings {
    background: var(--glass-bg);
}

.btn-toggle-settings:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-toggle-settings.active,
#toggleAutoScrollBtn.active {
    background: var(--accent-blue);
    color: var(--bg-primary);
}

.main-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}

.left-panel {
    /* Explicit 35/65 split (form/console) -- the right panel fills the remainder
       via its own flex: 1, so this only needs to set the left side's share. */
    width: 35%;
    min-width: 0;
    max-width: 70%;
    padding: 24px 32px;
    overflow-y: auto;
    border-right: 1px solid var(--glass-border);
    transition: width 0.3s ease, max-width 0.3s ease, min-width 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: rgba(17, 22, 29, 0.55);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

.left-panel.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    border-right: none;
}

.resize-handle {
    width: 5px;
    cursor: col-resize;
    background: var(--glass-border);
    flex-shrink: 0;
    transition: background-color 0.15s;
}

.resize-handle:hover,
.resize-handle.dragging {
    background: var(--accent-cyan);
}

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

.right-panel {
    flex: 1;
    min-width: 30%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(5, 8, 12, 0.6);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    flex-shrink: 1;
    transition: flex 0.3s ease, min-width 0.3s ease, opacity 0.3s ease;
    opacity: 1;
}

/* Settings toggle now hides the console and shows only the form (left-panel
   expands to fill the freed space via JS setting width/max-width to 100%). */
.right-panel.collapsed {
    flex: 0 0 0 !important;
    min-width: 0 !important;
    opacity: 0;
    overflow: hidden;
}

.section {
    margin-bottom: 0.75rem;
}

.section h2 {
    color: var(--accent-blue);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.25rem;
}

.collapsible-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.collapsible-header:hover {
    background: rgba(86, 156, 214, 0.1);
    border-radius: 4px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.collapse-icon {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.collapsible-header.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.section-content {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 5000px;
    opacity: 1;
    overflow: hidden;
}

.section-content.collapsed {
    max-height: 0;
    opacity: 0;
}

.form-group {
    margin-bottom: 0.4rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.form-row .form-group {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 13px;
    backdrop-filter: blur(10px);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 2px rgba(78, 201, 176, 0.1);
}

.form-group input[type="password"] {
    font-family: monospace;
}

/* Prevent Chrome/Edge from painting autofilled fields (e.g. Mqtt Host,
   FracPro API Password) with their default yellow background. The long
   transition delay is the standard trick to stop the yellow flashing back
   in on blur/refocus. */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--glass-bg) inset;
    box-shadow: 0 0 0 1000px var(--glass-bg) inset;
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
    transition: background-color 5000s ease-in-out 0s;
}

/* Brighter highlight for the van's identity fields (username/password/van ID/well
   API) so they stand out more clearly against the form background. */
#fracProApiUsername,
#fracProApiPassword,
#testVanId,
#testWellApi {
    background: rgba(20, 130, 0, 0.28);
}

#fracProApiUsername:focus,
#fracProApiPassword:focus,
#testVanId:focus,
#testWellApi:focus {
    background: rgba(20, 130, 0, 0.4);
}

button {
    padding: 10px 16px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    color: var(--text-primary);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
}

button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

button:active {
    transform: translateY(0);
}

button:disabled {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    border-color: var(--border-color);
}

.btn-start {
    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-cyan-dark) 100%);
    color: #ffffff;
    border: none;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(78, 201, 176, 0.3);
}

.btn-start:hover {
    background: linear-gradient(135deg, #5fd4bc 0%, #34b09e 100%);
    box-shadow: 0 6px 20px rgba(78, 201, 176, 0.4);
}

/* button:disabled (0,1,1) alone loses to .btn-start:hover (0,2,0) when the mouse
   happens to be over a disabled start button, so it kept showing the green
   hover highlight. These explicit disabled(+hover) overrides win regardless of
   pointer position. */
.btn-start:disabled,
.btn-start:disabled:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    box-shadow: none;
    transform: none;
}

.btn-stop {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border: none;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-stop:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* Icons inherit currentColor (stroke="currentColor") -- buttons with a solid accent
   background need this forced to white so icons don't blend into the background. */
.btn-start svg,
.btn-stop svg {
    color: #ffffff;
}

/* Start/Stop now live in the console header alongside the other compact
   32x32 icon buttons -- shrink them to match instead of their full navbar size. */
.console-header-actions .btn-start,
.console-header-actions .btn-stop {
    width: 32px;
    height: 32px;
    padding: 0;
    gap: 0;
}

.console-header-divider {
    width: 1px;
    height: 20px;
    background: var(--glass-border);
    flex-shrink: 0;
}

.file-with-upload {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.file-with-upload .form-group {
    flex: 1;
    min-width: 0;
}

.upload-zone {
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    white-space: nowrap;
    height: 40px;
    flex-shrink: 0;
    background: var(--glass-bg);
}

.upload-zone:hover, .upload-zone.drag-over {
    border-color: var(--accent-cyan);
    background: rgba(78, 201, 176, 0.1);
}

.upload-zone.success {
    border-color: var(--accent-green);
    background: rgba(106, 153, 85, 0.1);
}

.upload-zone.error {
    border-color: var(--accent-red);
    background: rgba(241, 76, 76, 0.1);
}

.upload-zone-icon {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.upload-zone:hover .upload-zone-icon {
    color: var(--accent-cyan);
}

.upload-zone-status {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-zone input[type="file"] {
    display: none;
}

.console-header {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    padding: 16px 24px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.console-header h2 {
    color: var(--accent-orange);
    font-size: 1rem;
    font-weight: 600;
}

.console-output {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.4;
    user-select: text;
    cursor: text;
    background: transparent;
}

.console-output:selection {
    background: var(--accent-cyan);
    color: var(--bg-primary);
}

.console-line {
    margin-bottom: 2px;
    white-space: pre-wrap;
    word-break: break-all;
}

.console-line.info {
    color: var(--text-primary);
}

.console-line.error {
    color: var(--accent-red);
}

.console-line.success {
    color: var(--accent-cyan);
}

.console-line.warning {
    color: var(--accent-orange);
}

.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

.status-running {
    background: var(--accent-cyan);
    box-shadow: 0 0 8px rgba(78, 201, 176, 0.6);
    animation: pulse 2s ease-in-out infinite;
}

.status-stopped {
    background: var(--accent-red);
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

.nested-section {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--glass-border);
}

.hidden {
    display: none;
}

#statusText {
    font-size: 13px;
    font-weight: 600;
}

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

.console-icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    min-width: 0;
    font-size: 13px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.console-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.tooltip {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    color: var(--text-primary);
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--accent-cyan);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    max-width: 300px;
    font-size: 14px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}