/* * THEME: Modern Rustic Utility
 * AUTHOR: TinyCalc Design Agent
 * FILE: styles.css (Nuclear Override)
 */

/* --- 1. FONTS & VARIABLES --- */

:root {
    /* Palette - Earthy & Technical */
    --c-bg-app: #FAF9F6;       /* Birch Paper */
    --c-bg-card: #FFFFFF;      /* Clean White */
    --c-bg-input: #FFFFFF;
    
    --c-text-primary: #292524; /* Warm Charcoal */
    --c-text-secondary: #57534E; /* Stone */
    --c-text-muted: #A8A29E;
    
    --c-brand: #D97706;        /* Toolbox Amber */
    --c-brand-hover: #B45309;
    
    --c-scenario-a: #0284C7;   /* Blueprint Blue */
    --c-scenario-a-bg: #E0F2FE;
    --c-scenario-a-border: #BAE6FD;

    --c-scenario-b: #059669;   /* Forest Sage */
    --c-scenario-b-bg: #D1FAE5;
    --c-scenario-b-border: #A7F3D0;

    --c-border: #E5E7EB;
    --c-border-focus: #D97706;
    --c-error: #DC2626; /* Burnt Clay */

    /* Typography */
    --font-heading: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* Spacing & Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* --- 2. GLOBAL OVERRIDES (Important!) --- */

body {
    background-color: var(--c-bg-app) !important;
    color: var(--c-text-primary) !important;
    font-family: var(--font-heading) !important;
    padding: 20px;
    margin: 0;
}

/* Force headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    color: var(--c-text-primary) !important;
    letter-spacing: -0.02em !important;
}

/* --- 3. INPUTS (Nuclear Selectors) --- */

/* Missing Core Layout Classes */
.input-group {
    margin-bottom: 1.0rem;
}
.heatLossChartBox {
    height: 350px;
    margin-bottom: 2rem;
}

/* We use body prefix to increase specificity */
body input, 
body select, 
body textarea, 
body .input-field {
    width: 100%;
    padding: 12px 16px !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--c-border) !important;
    background-color: var(--c-bg-input) !important;
    color: var(--c-text-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
    margin-bottom: 0.5rem !important;
    /* NEW: Tactile "Slot" styling */
    border: 2px solid var(--c-border) !important;
    background-color: var(--c-bg-input) !important;
    /* Inner shadow creates the "recessed slot" look */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06) !important;
    transition: all 0.2s ease !important;
}

body input:focus, 
body select:focus, 
body textarea:focus, 
body .input-field:focus {
    outline: none !important;
    border-color: var(--c-brand) !important;
    /* glowing ring plus the inner depth */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06), 0 0 0 3px rgba(217, 119, 6, 0.2) !important;
}

/* Labels */
body label, 
body .input-label {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--c-text-secondary) !important;
    margin-bottom: 0.4rem !important;
    display: block !important;
}

/* --- 4. SCENARIOS --- */

/* Scenario A */
body .scenario-header-a { 
    border-bottom: 3px solid var(--c-scenario-a) !important; 
    color: var(--c-scenario-a) !important;
    font-family: var(--font-mono) !important;
    margin-bottom: 1rem !important;
}
body .scenario-box-a { 
    background-color: var(--c-scenario-a-bg) !important; 
    border: 1px solid var(--c-scenario-a-border) !important; 
    padding: 1.5rem !important;
    /* NEW: Sanded Wood Edge Effect */
    border-radius: var(--radius-lg) !important; /* Increased from md to lg (12px) for "sanded" look */
    box-shadow: 0 4px 6px -1px rgba(41, 37, 36, 0.05), 0 2px 4px -1px rgba(41, 37, 36, 0.03) !important;
    border-bottom-width: 4px !important; /* thicker bottom border adds weight/physicality */
}

/* Scenario B */
body .scenario-header-b { 
    border-bottom: 3px solid var(--c-scenario-b) !important; 
    color: var(--c-scenario-b) !important; 
    font-family: var(--font-mono) !important;
    margin-bottom: 1rem !important;
}
body .scenario-box-b { 
    background-color: var(--c-scenario-b-bg) !important; 
    border: 1px solid var(--c-scenario-b-border) !important; 
    padding: 1.5rem !important;
    /* NEW: Sanded Wood Edge Effect */
    border-radius: var(--radius-lg) !important; /* Increased from md to lg (12px) for "sanded" look */
    box-shadow: 0 4px 6px -1px rgba(41, 37, 36, 0.05), 0 2px 4px -1px rgba(41, 37, 36, 0.03) !important;
    border-bottom-width: 4px !important; /* thicker bottom border adds weight/physicality */
}

/* --- 5. BUTTONS & UI --- */

body button {
    background-color: var(--c-brand) !important;
    color: white !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 24px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease;
}

body button:hover {
    background-color: var(--c-brand-hover) !important;
}

/* Specific Override for Clear All */
body #clearAllBtn {
    background-color: transparent !important;
    color: var(--c-error) !important;
    border: 2px solid var(--c-error) !important;
    box-shadow: none !important;
}
body #clearAllBtn:hover {
    background-color: var(--c-error) !important;
    color: white !important;
}

/* Fix links */
body a {
    color: var(--c-brand) !important;
}

/* --- 6. LAYOUT REFINEMENT (Bento Box) --- */
@media (min-width: 768px) {
    /* Targeting the container of the scenarios */
    #scenariosGrid, #resultsGrid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    /* Make the button span full width if it gets caught in the grid */
    body button {
        grid-column: 1 / -1 !important;
    }
}

/* --- 7. EXPLORER OVERRIDES (Fixing scrambled layout) --- */

/* --- 8. EXPLORER LAYOUT --- */

.explorer-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

@media (min-width: 768px) {
    .explorer-container {
        display: grid !important;
        grid-template-columns: 1fr 350px !important; /* Stack takes space, Dashboard fixed width */
        gap: 24px !important;
        align-items: start !important;
    }
}

.stack-section {
    background-color: transparent !important;
}

.assembly-stack {
    background-color: var(--c-bg-card) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
}

.assembly-header {
    background-color: #F3F4F6 !important;
    padding: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-bottom: 1px solid var(--c-border) !important;
    color: var(--c-text-secondary) !important;
}

.heat-flow-arrow {
    text-align: center !important;
    padding: 8px !important;
    font-size: 0.9rem !important;
    color: var(--c-text-muted) !important;
    font-weight: 600 !important;
}

/* Dashboard */
.dashboard {
    background-color: var(--c-bg-card) !important;
    padding: 20px !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--c-border) !important;
}

/* Stat Card */
.stat-card {
    background-color: #F9FAFB !important;
    padding: 16px !important;
    border-radius: var(--radius-sm) !important;
    text-align: center !important;
    margin-bottom: 16px !important;
    border: 1px solid var(--c-border) !important;
}

.stat-value {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: var(--c-text-primary) !important;
    line-height: 1.2 !important;
}

.stat-sub {
    font-size: 0.75rem !important;
    color: var(--c-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Inspector */
.inspector-panel {
    background-color: #EFF6FF !important; /* Blue-50 */
    border: 1px solid #DBEAFE !important;
    color: #1E40AF !important;
    padding: 12px !important;
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
}

.inspector-warning {
    background-color: #FEF2F2 !important; /* Red-50 */
    border: 1px solid #FEE2E2 !important;
    color: #991B1B !important;
    padding: 12px !important;
    font-size: 0.9rem !important;
    margin-bottom: 12px !important;
}

/* The layer container needs to be a flex row to keep text left and controls right */
.layer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: var(--c-bg-card) !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--c-border) !important;
    margin-bottom: 0 !important;
}

.layer:last-child {
    border-bottom: none !important;
}

/* Text area inside layer */
.layer > div:first-child {
    flex-grow: 1 !important;
    margin-right: 12px !important;
}

/* Controls area */
.layer-controls {
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

/* Override the global huge button styles for these specific small icon buttons */
.layer-controls button {
    padding: 6px 10px !important; /* Much smaller padding */
    font-size: 1.0rem !important;
    line-height: 1 !important;
    background-color: transparent !important; /* Transparent background */
    color: var(--c-text-secondary) !important; /* Neutral color for arrows */
    border: 1px solid var(--c-border) !important; /* Subtle border */
    box-shadow: none !important;
    width: auto !important; /* Prevent full width */
    min-width: 0 !important; /* Allow shrinking */
    grid-column: auto !important; /* Reset grid placement if any */
}

.layer-controls button:hover {
    background-color: var(--c-bg-app) !important;
    border-color: var(--c-brand) !important;
    color: var(--c-brand) !important;
}

/* Special case for remove button (Red X) */
.layer-controls button[aria-label="Remove Layer"] {
    color: var(--c-error) !important;
    border-color: transparent !important;
}

.layer-controls button[aria-label="Remove Layer"]:hover {
    background-color: #FEF2F2 !important; /* Light red bg */
    border-color: var(--c-error) !important;
}

/* Fix the Add Layer buttons in the dashboard to look like chips/cards */
.add-menu {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.add-btn {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    text-align: left !important;
    background-color: white !important;
    color: var(--c-text-primary) !important;
    border: 1px solid var(--c-border) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    /* Revert the huge button styles */
    width: 100% !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 500 !important;
}

.add-btn:hover {
    border-color: var(--c-brand) !important;
    background-color: #FFF7ED !important; /* Orange-50 */
    color: var(--c-brand-hover) !important;
}