/* styles.css */
/* Professional desktop layout – viewport-aware sizing */

:root,
html[data-theme="cool"] {
    --bg-body: #1a1d22;
    --bg-controls: #25282f;
    --bg-canvas: #2a2e36;
    --bg-scope: #21242a;
    --border-base: #3c414b;
    --border-controls: #4a4f5a;
    --text-primary: #d8d9db;
    --text-secondary: #a0a3a8;
    --brand-link: #7ec8f7;
    --brand-link-hover: #ffffff;
    --button-bg: #4b5e85;
    --button-hover: #5f75a8;
    --input-bg: #32363f;
    --gap-small: 12px;
}

/* Warm — clearly warm-toned, between cool and full amber */
html[data-theme="warm"] {
    --bg-body: #201e1c;
    --bg-controls: #2c2a28;
    --bg-canvas: #33302d;
    --bg-scope: #282523;
    --border-base: #474440;
    --border-controls: #56524e;
    --text-primary: #dbdad8;
    --text-secondary: #a7a4a1;
    --brand-link: #d8c49d;
    --brand-link-hover: #ffffff;
    --button-bg: #76685a;
    --button-hover: #958372;
    --input-bg: #3c3835;
}

/* Neutral — zero hue/saturation for objective viewing */
html[data-theme="neutral"] {
    --bg-body: #1e1e1e;
    --bg-controls: #2a2a2a;
    --bg-canvas: #303030;
    --bg-scope: #262626;
    --border-base: #444444;
    --border-controls: #525252;
    --text-primary: #dadada;
    --text-secondary: #a4a4a4;
    --brand-link: #bbbbbb;
    --brand-link-hover: #ffffff;
    --button-bg: #686868;
    --button-hover: #848484;
    --input-bg: #393939;
}

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

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: 'Inter', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── App header / branding ── */
.app-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background-color: var(--bg-controls);
    border-bottom: 1px solid var(--border-controls);
    min-height: 38px;
}

.app-header-brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.app-header-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.app-header-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.app-header-meta a {
    color: var(--brand-link);
    font-weight: 600;
    text-decoration: none;
}

.app-header-meta a:hover {
    color: var(--brand-link-hover);
}

.app-header-sep {
    margin: 0 4px;
    opacity: 0.6;
}

.app-header-help {
    width: 22px;
    height: 22px;
    border: 1px solid var(--border-controls);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.app-header-help:hover {
    color: var(--brand-link-hover);
    border-color: var(--brand-link);
    background: rgba(126, 200, 247, 0.12);
}

/* ── Controls panel ── */
#controls {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-controls);
    border-bottom: 1px solid var(--border-controls);
    min-height: 0;
}

.controls-toolbar {
    flex: 0 0 auto;
    padding: 6px 16px 0;
}

#controlsToggle {
    background: transparent;
    border: 1px solid var(--border-controls);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease;
}

#controlsToggle:hover {
    color: var(--text-primary);
    border-color: var(--brand-link);
}

.controls-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--gap-small);
    padding: 8px 16px 12px;
}

#controls.controls--collapsed .controls-body {
    display: none;
}

#controls.controls--collapsed .controls-toolbar {
    padding-bottom: 6px;
}

.control-section {
    flex: 0 1 auto;
    min-width: 200px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-controls);
    border-radius: 6px;
    background-color: var(--bg-canvas);
}

#input-sources {
    min-width: 240px;
}

#global-settings {
    min-width: 200px;
    max-width: 360px;
}

#scopes-visibility {
    min-width: 320px;
    max-width: 440px;
    flex: 1 1 320px;
}

.control-section h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.source-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.source-actions button {
    flex: 1 1 auto;
    min-width: 4.5rem;
}

.source-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.source-context-item[hidden] {
    display: none;
}

.source-fps {
    margin-left: auto;
}

.visibility-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    grid-template-columns: repeat(2, minmax(148px, 1fr));
    gap: 8px 20px;
    align-items: center;
}

@media (min-width: 1400px) {
    #scopes-visibility {
        min-width: 400px;
        max-width: 520px;
    }

    .visibility-grid {
        grid-template-rows: repeat(3, auto);
        grid-template-columns: repeat(3, minmax(132px, 1fr));
    }
}

.selection-panel[hidden] {
    display: none;
}

.visibility-grid label {
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.visibility-grid label:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.preview-stage,
.selection-panel-body,
#scopes .scope {
    transition:
        box-shadow 0.48s ease-in-out,
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

#scopes .scope.scope-fade-pending {
    opacity: 0;
    transition: box-shadow 0.48s ease-in-out, opacity 0s linear;
}

.visibility-highlight {
    box-shadow:
        0 0 0 2px rgba(126, 200, 247, 0.9),
        0 0 22px rgba(126, 200, 247, 0.32);
}

#controls label {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-primary);
}

#controls select,
#controls input[type="file"],
#controls input[type="checkbox"] {
    background-color: var(--input-bg);
    border: 1px solid var(--border-controls);
    color: var(--text-primary);
    padding: 6px;
    border-radius: 4px;
    font-size: 12px;
}

#controls button:not(#controlsToggle) {
    background-color: var(--button-bg);
    color: var(--text-primary);
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

#controls button:not(#controlsToggle):hover {
    background-color: var(--button-hover);
}

#controls button:not(#controlsToggle):disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#controls button:not(#controlsToggle):disabled:hover {
    background-color: var(--button-bg);
}

#selectionSizeDisplay {
    font-variant-numeric: tabular-nums;
}

/* ── Main content ── */
#container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: var(--gap-small);
    overflow: hidden;
    padding: 0 var(--gap-small) var(--gap-small);
}

#preview {
    flex: 0 0 auto;
    width: auto;
    min-width: 260px;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--gap-small) 0;
}

.preview-stage {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.preview-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 0;
    padding: 1rem;
    border: 1px dashed var(--border-base);
    border-radius: 6px;
    background-color: var(--bg-canvas);
    color: var(--text-secondary);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.preview-placeholder[hidden] {
    display: none;
}

.preview-placeholder:hover,
.preview-placeholder:focus-visible {
    border-color: var(--text-secondary);
    background-color: rgba(255, 255, 255, 0.03);
    outline: none;
}

.preview-placeholder-plus {
    font-size: clamp(3.5rem, 14vw, 5.5rem);
    font-weight: 300;
    line-height: 1;
    opacity: 0.4;
    user-select: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.preview-placeholder-text {
    font-size: clamp(0.8rem, 2vw, 0.95rem);
    opacity: 0.65;
    text-align: center;
    max-width: 16em;
    line-height: 1.35;
}

.preview-placeholder:hover .preview-placeholder-plus,
.preview-placeholder:focus-visible .preview-placeholder-plus {
    opacity: 0.6;
    transform: scale(1.04);
}

.selection-panel {
    flex: 0 0 auto;
    width: 148px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--gap-small) 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.selection-panel-title {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    letter-spacing: 0.02em;
}

.selection-panel-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 8px;
    background: var(--bg-scope);
    border: 1px solid var(--border-base);
    border-radius: 6px;
}

.selection-panel-meta {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.4;
}

.selection-panel-meta span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.selection-panel-hint {
    font-size: 10px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.35;
}

#scopes {
    flex: 1 1 0;
    width: 100%;
    min-width: 280px;
    min-height: 0;
    height: 100%;
    display: grid;
    gap: var(--gap-small);
    overflow: hidden;
    padding: 8px;
    align-content: start;
    justify-items: stretch;
    align-items: start;
}

#mediaCanvas {
    display: block;
    flex-shrink: 0;
    background-color: var(--bg-canvas);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    cursor: crosshair;
}

#mediaCanvas.is-panning {
    cursor: grabbing;
}

.scope {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    width: 100%;
    container-type: inline-size;
}

.scope-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 22px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.scope-title {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.scope-gear {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.scope-gear--custom {
    color: var(--brand-link);
}

.scope-gear--custom::after {
    content: '';
    position: absolute;
    top: 1px;
    right: 1px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-link);
    box-shadow: 0 0 4px color-mix(in srgb, var(--brand-link) 55%, transparent);
}

.scope-gear:hover,
.scope-gear[aria-expanded="true"] {
    color: var(--text-primary);
    border-color: var(--border-controls);
    background: rgba(255, 255, 255, 0.04);
}

.scope-gear--custom:hover,
.scope-gear--custom[aria-expanded="true"] {
    color: var(--brand-link-hover);
    border-color: color-mix(in srgb, var(--brand-link) 40%, var(--border-controls));
}

.scope-popover {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-controls);
    border: 1px solid var(--border-controls);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    min-width: 180px;
}

.scope-popover[hidden] {
    display: none;
}

.scope-popover label {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-primary);
}

.scope-popover select {
    background-color: var(--input-bg);
    border: 1px solid var(--border-controls);
    color: var(--text-primary);
    padding: 6px;
    border-radius: 4px;
    font-size: 12px;
}

.color-swatch {
    display: block;
    width: 100%;
    height: 36px;
    border-radius: 4px;
    background-color: var(--input-bg);
    border: 1px solid var(--border-controls);
}

.color-chips {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.color-chip {
    cursor: pointer;
    padding: 5px 6px;
    border-radius: 4px;
    background: var(--input-bg);
    border: 1px solid transparent;
    font-size: 10.5px;
    color: var(--text-primary);
    text-align: center;
    word-break: break-all;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

#vectorscopeCanvas,
#lumaWaveformCanvas,
#rgbHistogramCanvas,
#rgbWaveformCanvas,
#rgbWaveformOverlayCanvas,
#selectedAreaCanvas {
    display: block;
    width: var(--scope-tile-size, 120px);
    height: var(--scope-tile-size, 120px);
    flex-shrink: 0;
    background-color: var(--bg-scope);
    border: 1px solid var(--border-base);
    border-radius: 6px;
    image-rendering: auto;
}

@media (prefers-reduced-motion: reduce) {
    #scopes .scope {
        transition: box-shadow 0.48s ease-in-out;
    }
}

/* ── Responsive: stacked layout (phones, vertical monitors, narrow windows) ── */
html[data-layout="stacked"],
html[data-layout="stacked"] body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

html[data-layout="stacked"] body {
    min-height: 100vh;
    min-height: 100dvh;
}

html[data-layout="stacked"] #container {
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    flex: 0 0 auto;
    min-height: auto;
}

html[data-layout="stacked"] #preview {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    padding-top: var(--gap-small);
}

html[data-layout="stacked"] .preview-stage {
    margin: 0 auto;
}

html[data-layout="stacked"] .selection-panel {
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 0 var(--gap-small);
    overflow: visible;
}

html[data-layout="stacked"] .selection-panel-title {
    width: 100%;
}

html[data-layout="stacked"] .selection-panel-body {
    flex: 1 1 220px;
    max-width: 360px;
}

html[data-layout="stacked"] .color-swatch {
    max-width: 120px;
}

html[data-layout="stacked"] #scopes {
    width: 100%;
    min-width: 0;
    min-height: 280px;
    flex: 0 0 auto;
    overflow: visible;
    justify-items: center;
}

html[data-layout="stacked"] .scope {
    max-width: 100%;
    align-items: center;
}

/* Header matches canvas width so gear stays on the tile corner */
html[data-layout="stacked"] .scope-header {
    width: var(--scope-tile-size, 120px);
    max-width: 100%;
    box-sizing: border-box;
}

html[data-layout="stacked"] .scope-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Stacked + wide: preview and selection info side by side, scopes below ── */
html[data-layout="stacked"][data-stacked-split="true"] #container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: start;
}

html[data-layout="stacked"][data-stacked-split="true"] #preview {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    justify-content: center;
    align-items: flex-start;
}

html[data-layout="stacked"][data-stacked-split="true"] .preview-stage {
    margin: 0;
}

html[data-layout="stacked"][data-stacked-split="true"] .selection-panel {
    grid-column: 2;
    grid-row: 1;
    width: 148px;
    max-width: 148px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--gap-small) 0;
    gap: 8px;
}

html[data-layout="stacked"][data-stacked-split="true"] .selection-panel-title {
    width: auto;
}

html[data-layout="stacked"][data-stacked-split="true"] .selection-panel-body {
    flex: 1 1 auto;
    max-width: none;
}

html[data-layout="stacked"][data-stacked-split="true"] .color-swatch {
    max-width: none;
}

html[data-layout="stacked"][data-stacked-split="true"] #scopes {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
}

/* ── Controls & header on small screens ── */
@media (max-width: 640px) {
    .app-header {
        padding: 6px 12px;
    }

    .app-header-title {
        font-size: 14px;
    }

    .app-header-meta {
        font-size: 11px;
    }

    .controls-toolbar {
        padding-left: 12px;
        padding-right: 12px;
    }

    .controls-body {
        padding-left: 12px;
        padding-right: 12px;
    }

    .control-section {
        min-width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
    }

    #scopes-visibility {
        min-width: 0;
    }

    .visibility-grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: 8px 12px;
    }

    .source-fps {
        margin-left: 0;
        width: 100%;
    }

    .source-context {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .app-header-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .visibility-grid {
        grid-template-columns: 1fr;
    }

    .source-actions button {
        min-width: calc(50% - 4px);
    }
}