/* Copyright 2026 BQ Octantis. All rights reserved. */
/* Version 1.3.2 - Dark Mode Enhanced */

:root {
    /* Light Mode Colors (Originals) */
    --bg-color: #ffffff;
    --text-main: #333333;
    --text-secondary: #444444;
    --text-muted: #555555;
    --app-switcher-active: #333333;
    --separator-color: #cccccc;
    --canvas-border: #aaaaaa;
    --canvas-bg: #f0f0f0;
    --placeholder-bg: rgba(255, 255, 255, 0.85);
    --panel-bg: #f4f4f4;
    --panel-border: #dddddd;
    --info-box-text: #333333;
    --edit-bg: #e9ecef;
    --edit-border: #ced4da;
    --input-bg: #ffffff;
    --input-border: #999999;
    --locus-dashed: #cccccc;
    --picker-bg: #ffffff;
    --picker-border: #cccccc;
    --shadow-color: rgba(0,0,0,0.1);
    
    /* Button States */
    --undo-disabled-bg: #e9ecef;
    --undo-disabled-border: #ced4da;
    --undo-disabled-text: #6c757d;
}

body.dark-mode {
    /* Dark Mode Colors */
    --bg-color: #121212;
    --text-main: #e0e0e0;
    --text-secondary: #bbbbbb;
    --text-muted: #aaaaaa;
    --app-switcher-active: #ffffff;
    --separator-color: #444444;
    --canvas-border: #444444;
    --canvas-bg: #1a1a1a;
    --placeholder-bg: rgba(30, 30, 30, 0.9);
    --panel-bg: #1e1e1e;
    --panel-border: #333333;
    --info-box-text: #ffffff;
    --edit-bg: #2d2d2d;
    --edit-border: #444444;
    --input-bg: #252525;
    --input-border: #555555;
    --locus-dashed: #444444;
    --picker-bg: #1a1a1a;
    --picker-border: #333333;
    --shadow-color: rgba(0,0,0,0.5);

    --undo-disabled-bg: #2a2a2a;
    --undo-disabled-border: #333333;
    --undo-disabled-text: #555555;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    display: flex; flex-direction: column; align-items: center; padding: 20px; margin: 0; 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.app-switcher {
    text-align: center;
    margin-bottom: 20px;
    font-size: 0.9em;
}

.app-switcher a {
    color: #007bff;
    text-decoration: none;
}

.app-switcher a:hover {
    text-decoration: underline;
}

.app-switcher .active-app {
    color: var(--app-switcher-active);
    font-weight: bold;
}

.app-switcher .separator {
    margin: 0 10px;
    color: var(--separator-color);
    user-select: none;
}

.controls {
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.checkbox-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.button-controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox-controls .checkbox-group + .checkbox-group {
    margin-left: 10px;
}

.button-controls button + button {
    margin-left: 15px;
}

.analyzer-container { display: flex; flex-wrap: wrap; gap: 30px; width: 95%; max-width: 1200px; justify-content: center; align-items: flex-start; }

.image-section, .chart-section { flex: 1 1 400px; min-width: 350px; max-width: 600px; display: flex; flex-direction: column; align-items: center; }

.section-title { font-weight: bold; margin-bottom: 8px; font-size: 0.9em; color: var(--text-secondary); text-align: center; }

.section-footer { font-weight: normal; margin-top: 10px; font-size: 0.8em; color: var(--text-secondary); text-align: center; }

.section-subtitle {
    font-size: 0.85em;
    font-weight: normal;
    color: var(--text-muted);
    margin-top: -6px;
    margin-bottom: 8px;
    text-align: center;
}

.canvas-wrapper { 
    position: relative; 
    width: 100%; 
    max-width: 500px; 
    display: flex; 
    justify-content: center; 
    overflow: hidden; 
    border: 1px solid var(--canvas-border); 
    box-sizing: border-box;
    aspect-ratio: 8 / 5;
    background-color: var(--canvas-bg);
}

#gradientCanvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: default;
    background-color: var(--canvas-bg);
}

#canvasPlaceholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; box-sizing: border-box; transition: opacity 0.3s ease; opacity: 1; pointer-events: none; z-index: 10; }

#canvasPlaceholder.hidden { opacity: 0; }

.placeholder-content { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 10px; 
    padding: 20px; 
    background-color: var(--placeholder-bg); 
    border-radius: 8px; 
    box-shadow: 0 2px 5px var(--shadow-color); 
}

.placeholder-content p { margin: 0; font-weight: bold; color: var(--text-muted); }

#infoPanelContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 500px;
    margin-top: 10px;
}

.info-panel {
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 10px;
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 5px;
    font-family: monospace;
    font-size: 0.9em;
    gap: 10px;
    box-sizing: border-box;
}

.color-info-box {
    text-align: center;
    line-height: 1.5;
    padding: 2px 5px;
    border-radius: 4px;
    transition: color 0.1s, background-color 0.1s, border-color 0.1s;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    white-space: nowrap;
}

.color-info-box strong { font-size: 1.05em; color: var(--info-box-text); }

.color-info-box.dragging { background-color: #555; color: white; }
.color-info-box.dragging strong { color: white; }

.color-info-box.editing {
    background-color: var(--edit-bg);
    border-color: var(--edit-border);
    cursor: default;
}

.edit-input {
    font-family: monospace;
    font-size: 0.9em;
    border: 1px solid var(--input-border);
    border-radius: 2px;
    padding: 0 2px;
    background-color: var(--input-bg);
    color: var(--text-main);
    text-align: center;
    max-width: 45px;
}

.locus-info {
    border-top: 1px dashed var(--locus-dashed);
    margin-top: 4px;
    padding-top: 4px;
    font-size: 0.9em;
    color: var(--text-secondary);
}

.color-info-box.dragging .locus-info {
    color: #ddd;
    border-top-color: #777;
}

.checkbox-group { display: flex; align-items: center; gap: 5px; }
.checkbox-group label { cursor: pointer; font-size: 0.7em; }

#pickerCanvas { 
    width: 100%;
    border: 1px solid var(--picker-border); 
    background-color: var(--picker-bg); 
    cursor: crosshair;
    aspect-ratio: 1 / 1;
}

#shareButton {
    padding: 8px 15px;
    cursor: pointer;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    font-size: 0.9em;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    color: #155724;
}

#shareButton:hover:not(.copied) {
    background-color: #c3e6cb;
}

#shareButton.copied {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
    cursor: default;
}

#undoButton {
    padding: 8px 15px;
    cursor: pointer;
    background-color: #cce5ff;
    border: 1px solid #b8daff;
    border-radius: 4px;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
    color: #004085;
}

#undoButton:hover:not(:disabled) {
    background-color: #b8daff;
}

#undoButton:disabled {
    background-color: var(--undo-disabled-bg);
    border-color: var(--undo-disabled-border);
    color: var(--undo-disabled-text);
    cursor: not-allowed;
}

#clearButton { 
    padding: 8px 15px; 
    cursor: pointer; 
    background-color: #f8d7da; 
    border: 1px solid #f5c6cb; 
    border-radius: 4px; 
    font-size: 0.9em; 
    transition: background-color 0.2s ease; 
    color: #721c24; 
}

#clearButton:hover { background-color: #f5c6cb; }

#themeToggle {
    background: none;
    border: 1px solid var(--separator-color);
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    vertical-align: middle;
    transition: background-color 0.2s, border-color 0.2s;
    padding: 0;
    margin-left: 5px;
}

#themeToggle:hover {
    background-color: var(--panel-bg);
    border-color: var(--text-muted);
}

@media (max-width: 768px) { 
    .analyzer-container { gap: 20px; } 
    .image-section, .chart-section { flex-basis: 100%; max-width: 100%; } 
    .canvas-wrapper { max-width: 95%;} 
    #infoPanelContainer { max-width: 95%; }
    .info-panel { flex-direction: column; }
}