/* Redesign app shell adjustments (works with css/core/tinttune-redesign.css).
   #app / .sidebar / .main / .topbar / .content are styled by the redesign system. */

/* Login page: hide the sidebar + topbar so the login card owns the viewport. */
body.login-mode #app-sidebar,
body.login-mode #app-topbar { display: none; }

/* ---- Fixes from user review (both themes) ---- */
/* Legacy style.css paints body #f4f4f4 (shows through body's stable scrollbar-gutter as a white
   strip on the right in dark mode) and <main> #FFFFFF. Force theme surfaces. */
html, body { background: var(--bg-page); color: var(--text-primary); }
#main-content { background: transparent; }

/* Algorithm names vanished when a toggle is ON: legacy .algorithm-list-item[data-status="current"]
   sets color:#fff (invisible in light mode). Restore theme text color. */
#view-sim .rail .algorithm-list-item[data-status="current"] { color: var(--text-primary); background: transparent; }
#view-sim .rail .algorithm-list-item .name { color: var(--text-primary); }

/* MWB grey box: legacy style.css .disabled{background:#ccc!important} on #awb-details. Keep it dimmed
   (opacity) but drop the box + grey text. */
#view-sim .rail #awb-details.disabled,
#view-sim .rail #mwb-slider.disabled { background-color: transparent !important; color: inherit !important; }

/* Input viewer frame: drop the dashed border (per user) — solid like the output frame. */
.img-frame.input-frame { border: 1px solid var(--border); }

/* Simulate pipeline: dim the previous output while processing (production uses a <canvas>,
   not the redesign .zoom-layer), and flash the new output in on done. */
#outputImageContainer .canvas-image, #outputImageContainer #simuoutputimageDefault { transition: filter var(--dur-slow) var(--ease-out); }
#outputImageContainer.processing .canvas-image, #outputImageContainer.processing #simuoutputimageDefault { filter: saturate(.68) brightness(.82); }
#outputImageContainer.done .canvas-image { animation: flashIn var(--dur-slow) var(--ease-out); }

/* Simulate lockout: while processing, block the controls + navigation (no mid-run changes).
   Topbar (theme/collapse/avatar) stays interactive; the pipeline chips stay visible. */
body.simulating .rail,
body.simulating #app-sidebar .sb-body,
body.simulating .viewer-toolbar,
body.simulating #analysis-tabs,
body.simulating .img-frame { pointer-events: none; }
body.simulating .rail,
body.simulating #app-sidebar .sb-body { opacity: .55; }

/* #main-content is the redesign .content (flex:1, scrolls); keep page-transition class flex-safe. */
#main-content.page-content { min-height: 0; }

/* The simulation page loads simulationSidebar.css AFTER the redesign system; its legacy
   `.sidebar { background:#f8f9fa; width:250px }` would repaint our shell sidebar light in dark
   mode. Win with id specificity so the redesign shell holds on every page. */
#app-sidebar {
    width: 264px;
    padding: 0;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
}
body.sb-collapsed #app-sidebar { width: 64px; }

/* Viewer: keep image / canvas / overlay inside the redesign 4:3 frame (raw is 5120x3840 = 4:3).
   fitCanvasToContainer() absolutely-centers + scales the canvas to the frame; these keep the
   placeholder image, upload prompt and probe SVG clipped to the same frame. */
.img-frame { position: relative; }
.img-frame > .sub-upload-box { position: absolute; inset: 0; }
.img-frame > .output-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.img-frame > svg { position: absolute; top: 0; left: 0; }

/* ---- Panel 4/5: legacy custom div-sliders restyled to the redesign range look ----
   The slider engine sets .slider-progress{width:%} and .slider-thumb{left:%}; we only restyle
   appearance so positioning/handlers are untouched. */
.custom-slider { position: relative; width: 100%; height: 18px; display: flex; align-items: center; cursor: pointer; margin-top: 6px; }
.custom-slider .slider-track { position: relative; width: 100%; height: 6px; border-radius: var(--radius-full); background: var(--bg-sunken); border: 1px solid var(--border); }
.custom-slider .slider-progress { position: absolute; left: 0; top: 0; height: 100%; border-radius: var(--radius-full); background: var(--accent); }
.custom-slider .slider-thumb { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent); box-shadow: var(--shadow-sm); transform: translate(-50%, -50%); }
.custom-slider.disabled, #awb-details.disabled, #mwb-slider.disabled { opacity: .45; pointer-events: none; }

/* Algorithm rows: strip the legacy .algorithm-list-item box
   (simulationSidebar.css: background:#f4f4f4; border:1px solid #ccc; border-radius:5px; margin)
   — that fixed light-gray box was the "white background in dark theme". Flat redesign row instead. */
#view-sim .rail .algorithm-list-item {
    list-style: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    margin: 0;
    padding: 11px 0;
}
#view-sim .rail .algorithm-list-item:last-of-type { border-bottom: none; }
#view-sim .rail .algorithm-list-item .desc { margin-top: 1px; }

/* C-9 read-outs (AWB gains / CCM matrix / BLC value) — styled for when surfaced. */
.ccm-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px;
    font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.ccm-readout span { background: var(--bg-sunken); border-radius: var(--radius-sm); padding: 2px 4px; text-align: center; }

/* Output placeholder: hide the legacy white "no image" JPEG so the dark frame + redesign
   .img-empty state show (theme-aware). #simuoutputimageDefault stays as the zoom/toggle target. */
#simuoutputimageDefault { opacity: 0; }
#outputImageContainer .img-empty { z-index: 1; }        /* above transparent placeholder, below canvas (z-index:9) */

/* Project list: legacy project-list.css sets black text (invisible on the dark sidebar). */
#projectList .project-list-item { color: var(--text-secondary); border-radius: var(--radius-sm); }
#projectList .project-list-item .project-text { color: inherit; }
#projectList .project-list-item:hover { color: var(--text-primary); }

/* ---- Panel 5: Image Adjustment Controls restyled to the redesign (CSS-only) ---- */
#view-sim .rail .form-row { margin-bottom: 14px; }
#view-sim .rail .flex-hv-center { display: flex; align-items: center; gap: 8px; }
#view-sim .rail .form-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
#view-sim .rail [id$="ValueDisplay"] { font-family: var(--font-mono); color: var(--accent); font-weight: var(--weight-medium); }
#view-sim .rail .arrow-container { margin-left: auto; display: flex; gap: 4px; }
#view-sim .rail .arrow-btn { width: 24px; height: 24px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
    background: var(--bg-raised); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#view-sim .rail .arrow-btn:hover { border-color: var(--border-focus); color: var(--text-primary); }
#view-sim .rail .min-max-text { font-size: 11px; color: var(--text-tertiary); display: block; margin-top: 4px; }
/* denoise enable checkboxes -> accent native checkbox */
#view-sim .rail .processing-toggle-row { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--text-sm); color: var(--text-primary); }
#view-sim .rail .processing-toggle-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
#view-sim .rail .processing-control { padding: 10px 0; border-bottom: 1px solid var(--border); }
#view-sim .rail .processing-strength { padding-left: 25px; margin-top: 10px; }
#view-sim .rail .reset-btn, #view-sim .rail #resetActionBtn { margin-top: 6px; }

/* Algorithm rows: kill the legacy green checked-state background
   (simulationSidebar.css .algorithm-list-item[data-status="current"]{background:#4caf50}). */
#view-sim .rail .algorithm-list-item[data-status="current"],
#view-sim .rail .algorithm-list-item[data-status="pending"] { background: transparent; }

/* ---- Panel 6: Analysis / histograms theme-aware ---- */
#view-sim .section { background: transparent !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md); }
#view-sim .graph-area-head h4,
#view-sim #input-graph-title, #view-sim #output-graph-title { color: var(--text-primary); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
#view-sim .simulation-histogram-head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* per-chart R/G/B checkboxes are replaced by the shared #shared-legend chips (kept in DOM,
   the histogram redraw still reads them; the legend syncs + dispatches their change events). */
#view-sim .color-selection { display: none; }
#view-sim .coordinate-view, #view-sim .coordinate-view p { color: var(--text-secondary); font-size: 12px; }
#view-sim .coordinate-view strong { color: var(--text-primary); }

/* ── Redesign zoom/pan (simulationZoom.js) ─────────────────────────────────────────────────────
   The canvas is centre-positioned (translate(-50%,-50%) fit), so the zoom-layer must scale about the
   frame centre (override the redesign default of 0 0, which assumes content anchored top-left).
   overflow:hidden on the frame clips the zoomed image; the chip/prog-track sit outside the layer. */
.img-frame { overflow: hidden; }
.img-frame .zoom-layer { transform-origin: center center; }
.img-frame.zoomed { cursor: grab; }
.img-frame.zoomed:active { cursor: grabbing; }
/* When zoomed, the layer captures drag-to-pan; keep the probe SVG interactive for right-click menu. */
.img-frame.zoomed .zoom-layer { touch-action: none; }

/* ── Output badge dot: blink while processing, SOLID when done (processing ≠ done, not "live") ──
   simulationPipeline.js toggles #out-badge.busy for the whole processing episode. */
/* Processing = amber + blinking dot; Done = green + solid dot; Failed = red. (badge-warning/danger
   modifiers aren't in the base sheet, so define them here alongside the existing badge-success/info.) */
.badge-warning { background: var(--warning-subtle); color: var(--warning); }
.badge-danger  { background: var(--danger-subtle);  color: var(--danger); }
@keyframes tt-dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
#out-badge .dot { transition: opacity .2s var(--ease-out); }
#out-badge.busy .dot { animation: tt-dot-blink 1s ease-in-out infinite; }

/* Hint shown on the (disabled) Image Adjustment Controls until the user runs a Simulate — placed
   OUTSIDE the dimmed fold-body so it stays readable. Toggled by thirdLvlEnableFields(). */
.adjust-hint {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 0 10px; padding: 8px 11px;
    font-size: 12px; color: var(--text-secondary);
    background: var(--info-subtle); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.adjust-hint i, .adjust-hint .lucide { width: 14px; height: 14px; color: var(--info); flex: none; }
.adjust-hint b { color: var(--text-primary); font-weight: var(--weight-medium); }
.adjust-hint.hide, .card.folded .adjust-hint { display: none; }