/* public/css/view.chart.css */

main#chart-view {
    flex-direction: row;
}

.chart-tree-wrapper {
    flex: 0 0 40%;
    min-width: 250px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border);
    background-color: var(--color-bg-secondary);
}

#chart-payload-container {
    /* Uses .payload-container base */
    padding: 0;
    background-color: var(--color-bg);
}

#chart-payload-area {
    /* Uses .payload-main-area base */
    flex: 0 0 40%; 
    min-height: 100px;
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--color-bg-secondary);
}

/* --- Chart Controls (Top-left) [MODIFIED] --- */
.chart-tree-wrapper .tree-controls {
    padding: 10px;
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.chart-tree-wrapper .tree-controls input {
    flex-grow: 1;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 14px;
}
.chart-tree-wrapper .tree-controls input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.chart-tree-wrapper .tree-controls button {
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-tertiary);
    color: var(--color-text);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1.2em;
    line-height: 1;
}
.chart-tree-wrapper .tree-controls button:hover {
    background-color: var(--color-bg-accent);
}


/* --- #chart-tree Specifics --- */
#chart-tree .node-filter-checkbox { display: none; }
#chart-tree li { padding-left: 2px; }
#chart-tree ul { margin-left: 20px; }
#chart-tree .node-container { cursor: pointer; }
#chart-tree .node-container:hover { background-color: var(--color-bg-accent); }
#chart-tree .selected { background-color: var(--selected-bg); color: var(--selected-text); }
#chart-tree .selected .node-name::before { filter: brightness(0) invert(1); }
body.dark-mode #chart-tree .selected .node-name::before { filter: brightness(0) invert(0.2); }
#chart-tree .selected .node-timestamp { color: var(--selected-text); opacity: 0.8; }

/* [MODIFIED] Added rules for collapse and filter */
#chart-tree .is-folder.collapsed > ul { 
    display: none; 
}
#chart-tree .filtered-out { 
    display: none; 
}

#chart-tree .is-folder > .node-container { font-weight: 500; }


/* --- Chart Variable List (Top-right) --- */
.chart-variable-list {
    flex-grow: 1;
    overflow-y: auto;
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-secondary);
    border-radius: 4px;
    padding: 10px 15px;
    margin-top: 10px;
}
.chart-variable-item {
    display: block;
    margin-bottom: 8px;
    font-family: 'Courier New', Courier, monospace;
}
.chart-variable-item input {
    margin-right: 8px;
    cursor: pointer;
}
.chart-variable-item label {
    cursor: pointer;
    user-select: none;
    word-break: break-all;
}
.chart-variable-item .var-type {
    font-size: 0.9em;
    color: var(--color-text-secondary);
    margin-left: 5px;
}

/* --- Chart Main Area (Bottom-right) --- */
#chart-main-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 150px;
    padding: 10px 20px;
    box-sizing: border-box;
    overflow: hidden; /* Prevent canvas from overflowing */
}

.chart-config-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-secondary);
    flex-shrink: 0;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}
.chart-config-bar .form-group {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.chart-config-bar .form-group label {
    font-size: 0.9em;
    font-weight: 500;
    margin-bottom: 0; /* Override default */
}
.chart-config-bar select,
.chart-config-bar .chart-button {
    padding: 4px 8px;
    font-size: 0.9em;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-tertiary);
    color: var(--color-text);
}
.chart-config-bar .chart-button {
    cursor: pointer;
    transition: background-color 0.2s;
}
.chart-config-bar .chart-button:hover {
    background-color: var(--color-bg-accent);
}

/* [NEW] Style for the config select dropdown */
#chart-config-select {
    flex-grow: 1;
    min-width: 150px;
    max-width: 250px;
}

/* [NEW] Style for the new save/delete buttons */
#btn-chart-save-current {
    background-color: var(--color-primary);
    color: var(--color-header-text);
    border-color: var(--color-primary);
    font-weight: 500;
}
#btn-chart-save-as {
    background-color: var(--color-bg-tertiary);
}
#btn-chart-delete-config {
    /* Uses .danger-button from base.css */
    padding: 4px 8px;
    font-size: 0.9em;
    margin-left: -5px; /* Pull it closer to save buttons */
}


#btn-chart-generate {
    background-color: var(--color-success);
    color: var(--color-header-text);
    border-color: var(--color-success);
    font-weight: 500;
}
#btn-chart-generate:hover {
    background-color: var(--color-success-hover);
}

#btn-chart-clear {
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
}
#btn-chart-clear:hover {
    background-color: var(--color-danger);
    color: #fff;
}

#btn-chart-fullscreen {
    font-size: 1.1em;
}

#chart-time-range-slider-container {
    flex-grow: 1;
    margin: 0 15px;
    min-width: 200px; /* Ensure slider has space */
    /* Base styles are in base.css */
}

#chart-canvas-container {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#chart-canvas {
    max-width: 100%;
    max-height: 100%;
}
#chart-placeholder {
    display: block;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* --- Chart Fullscreen --- */
#chart-main-area:fullscreen {
    background-color: var(--color-bg-secondary);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
#chart-main-area:fullscreen #chart-canvas-container {
     height: 100%; /* Allow it to fill remaining space */
}
#chart-main-area:-webkit-full-screen { background-color: var(--color-bg-secondary); }
#chart-main-area:-moz-full-screen { background-color: var(--color-bg-secondary); }
#chart-main-area:-ms-fullscreen { background-color: var(--color-bg-secondary); }

/* --- Chart Save Status --- */
#chart-save-status {
    font-size: 0.9em;
    font-weight: 500;
    margin-left: -5px; /* Pull it closer to save buttons */
    transition: color 0.3s;
}
#chart-save-status.success {
    color: var(--color-success);
}
#chart-save-status.error {
    color: var(--color-danger);
}


/* --- [NEW] Mobile Responsive Styles --- */
@media (max-width: 768px) {
    main#chart-view {
        flex-direction: column; /* Stack panels vertically */
        height: auto;
    }

    .chart-tree-wrapper {
        flex: 0 0 40vh; /* Tree takes 40% of viewport height */
        min-width: 100%; /* Full width */
        min-height: 200px;
        height: 40vh;
        border-right: none;
    }
    
    #chart-payload-container {
        flex-grow: 1; /* Payload/Chart area takes remaining space */
        min-height: 500px; /* Ensure it's usable */
        border-top: 1px solid var(--color-border);
    }
    
    /* Re-enable and re-style the horizontal resizer for mobile */
    #drag-handle-horizontal-chart {
        display: flex; /* Show it */
        flex: 0 0 10px; /* Make it a bit thicker for touch */
    }

    #chart-payload-area {
        flex: 0 0 40%; /* Start at 40% */
        min-height: 150px;
        padding: 10px;
    }

    #chart-main-area {
        padding: 10px;
    }
    
    .chart-config-bar {
        gap: 8px; /* Reduce gap */
    }
    
    /* Make slider take full width on its own row */
    #chart-time-range-slider-container {
        flex-basis: 100%;
        min-width: 100%;
        margin: 5px 0;
    }
}