/* static/css/style.css */

/* =================================================================
   1. ROOT VARIABLES & GLOBAL STYLES
   ================================================================= */
:root {
    --bg-color: #1a1a2e;
    --panel-bg: #16213e;
    --primary-color: #0f3460;
    --accent-color: #e94560;
    --text-color: #dcdcdc;
    --highlight-compare: #f9d923; /* Yellow */
    --highlight-found: #4caf50;    /* Green */
    --highlight-sorted: #5372f0;  /* Blue */
    --highlight-min: #00bcd4;     /* Cyan */
    --highlight-error: #f44336;  /* Red */
    --font-main: 'Roboto', sans-serif;
    --font-code: 'Fira Code', monospace;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

header {
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    font-family: var(--font-code);
    color: var(--accent-color);
    margin: 0;
}

/* =================================================================
   2. LAYOUT & PANELS
   ================================================================= */
.container {
    display: flex;
    gap: 20px;
    height: 85vh;
}

.panel {
    background-color: var(--panel-bg);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.controls-panel { flex: 1; min-width: 280px; }
.visualization-panel { flex: 3; }
.info-panel { flex: 1.5; min-width: 320px; }

/* =================================================================
   3. CONTROLS PANEL
   ================================================================= */
.control-group { margin-bottom: 15px; }
.control-group label { display: block; margin-bottom: 5px; font-size: 0.9em; }

select, input[type="number"], input[type="text"] {
    width: 100%;
    padding: 8px;
    background-color: var(--primary-color);
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    color: var(--text-color);
    font-family: var(--font-main);
    box-sizing: border-box;
}

button {
    width: 100%;
    padding: 10px;
    background-color: var(--accent-color);
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-bottom: 10px;
}
button:hover:not(:disabled) { background-color: #ff6b81; }
button:disabled { background-color: #555; cursor: not-allowed; }
hr { border: 1px solid var(--primary-color); margin: 20px 0; }

/* =================================================================
   4. VISUALIZATION PANEL
   ================================================================= */
#visualization-title { text-align: center; margin-top: 0; }
#visualization-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 10px;
    position: relative;
    border: 1px dashed var(--primary-color);
    border-radius: 4px;
    min-height: 200px;
}
#status-log {
    padding: 10px;
    margin-top: 10px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 4px;
    text-align: center;
    font-family: var(--font-code);
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}
#status-log p { margin: 0; }

/* --- 4.1 Array Styles --- */
.array-element {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    border: 2px solid var(--accent-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
    position: relative;
}
.array-element.comparing { border-color: var(--highlight-compare); transform: translateY(-10px); }
.array-element.found { background-color: var(--highlight-found); border-color: var(--highlight-found); }
.array-element.sorted { background-color: var(--highlight-sorted); border-color: var(--highlight-sorted); }
.array-element.min-element { border-color: var(--highlight-min); }
.array-element.faded { opacity: 0.3; }

.pointer {
    position: absolute;
    bottom: -30px;
    font-size: 0.8em;
    font-family: var(--font-code);
    color: var(--highlight-pointer);
    transition: left 0.3s ease-in-out;
    text-align: center;
}
.pointer-label { font-weight: bold; }


/* --- 4.2 SVG (Tree/Graph) Styles --- */
#visualization-container svg { width: 100%; height: 100%; overflow: visible; }

.node circle {
    stroke: var(--accent-color);
    stroke-width: 3px;
    fill: var(--primary-color);
    transition: all 0.3s ease;
}
.node text {
    fill: var(--text-color);
    font-family: var(--font-code);
    font-size: 16px;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}
.link {
    stroke: var(--primary-color);
    stroke-width: 2px;
    transition: all 0.3s ease;
}
/* Node/Link States */
.node.comparing circle, .node.visiting circle { stroke: var(--highlight-compare); }
.node.visited circle { fill: var(--highlight-sorted); }
.node.found circle { fill: var(--highlight-found); stroke: var(--highlight-found); }
.link.exploring { stroke: var(--highlight-compare); stroke-width: 4px; }
.link.visited { stroke: var(--highlight-sorted); }

/* --- 4.3 Auxiliary Visualization Styles --- */
#aux-visualization-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 10px;
    min-height: 60px;
    flex-wrap: wrap;
}
.aux-title { width: 100%; text-align: center; font-family: var(--font-code); margin-bottom: 5px; }

.queue-element, .stack-element {
    background-color: var(--primary-color);
    border: 1px solid var(--highlight-min);
    padding: 5px 10px;
    border-radius: 4px;
    font-family: var(--font-code);
}
.queue-element.processing, .stack-element.processing {
    border-color: var(--highlight-compare);
    transform: scale(1.1);
}

/* DP Table */
.dp-table {
    border-collapse: collapse;
    margin: 10px auto;
    font-family: var(--font-code);
}
.dp-table th, .dp-table td {
    border: 1px solid var(--primary-color);
    padding: 8px;
    text-align: center;
    min-width: 40px;
}
.dp-table th { background-color: var(--primary-color); }
.dp-table td.dp-highlight { background-color: var(--highlight-compare); color: var(--bg-color); }
.dp-table td.dp-referenced { box-shadow: 0 0 10px var(--highlight-min) inset; }


/* =================================================================
   5. INFO PANEL
   ================================================================= */
#info-title { margin-top: 0; }
.info-tabs { display: flex; margin-bottom: 15px; }
.tab-link {
    background-color: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 8px 12px;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 4px 4px 0 0;
    width: auto;
    margin-bottom: 0;
}
.tab-link.active { background-color: var(--accent-color); color: white; }
.tab-content { display: none; }
.tab-content.active { display: block; }

pre {
    background-color: rgba(0,0,0,0.3);
    padding: 15px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--font-code);
}
ul { padding-left: 20px; }
li { margin-bottom: 5px; }
.link-weight {
    fill: var(--text-color);
    font-size: 12px;
    font-family: var(--font-code);
    text-anchor: middle;
}
.array-element.key-element {
    border-color: #ff9800; /* Orange */
    transform: translateY(-20px) scale(1.1);
}
.array-element.pivot-element {
    background-color: #9c27b0; /* Purple */
    border-color: #9c27b0;
}
.array-element.sub-array {
    border-style: dashed;
    border-color: var(--highlight-min);
}