* { box-sizing: border-box; }
body { margin: 0; background-color: var(--bg-dark); color: var(--text-main); font-family: var(--font-ui); height: 100vh; display: flex; flex-direction: column; }

/* Control Deck */
.control-deck { background: var(--bg-panel); border-bottom: 1px solid #333; padding: 1rem 2rem; display: flex; align-items: center; gap: 2rem; }
.logo-area h1 { margin: 0; font-size: 1.5rem; letter-spacing: -1px; }
.highlight { color: var(--c-housing); }
.input-strip { display: flex; gap: 1.5rem; overflow-x: auto; padding-bottom: 5px; flex-grow: 1; }

/* --- CARDS & INPUTS --- */
.input-card { 
    background: var(--bg-input); 
    padding: 0.75rem; 
    border-radius: 8px; 
    min-width: 180px; /* Slightly wider to fit split inputs */
    border: 1px solid transparent; 
    transition: border-color 0.3s; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Card Headers / Labels */
.input-card label { 
    display: block; 
    font-size: 0.75rem; 
    color: var(--text-muted); 
    margin-bottom: 0.5rem; 
    text-transform: uppercase; 
    font-weight: 700; 
    letter-spacing: 0.5px;
}

/* Standard Input Group ($ + Input) */
.input-group { display: flex; align-items: center; gap: 0.5rem; }
.currency { color: var(--text-muted); font-weight: bold; }

/* --- COMPLEX INPUTS (Health & Housing) --- */

/* The Row with "Label" left and "Dropdown" right */
.med-labels { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 6px;
    width: 100%;
}
.med-labels label { margin: 0; } /* Reset margin for alignment */
.med-labels select {
    width: auto; 
    font-size: 0.7rem; 
    color: var(--text-muted); 
    border: none;
    text-align: right;
    cursor: pointer;
}

/* The Split Inputs (Premium | OOP) */
.med-group { display: flex; gap: 10px; width: 100%; }
.med-box { flex: 1; display: flex; flex-direction: column; }

/* The actual inputs inside the split box */
.med-box input { 
    border-bottom: 1px solid #444; 
    background: rgba(0,0,0,0.1);
    border-radius: 4px 4px 0 0;
    text-align: center; 
    padding: 6px 0; 
    font-size: 1.1rem;
}
.med-box input:focus { border-bottom-color: var(--accent-success); background: rgba(0,0,0,0.2); }

/* Sub-labels under the inputs */
.sub-label { 
    font-size: 0.65rem; 
    color: #666; 
    margin-top: 6px; 
    text-align: center;
    font-style: italic;
}

/* --- HUD / WIDGET --- */
.hero-metric { text-align: center; margin-bottom: 1.5rem; }

/* The Header "MONTHLY DISCRETIONARY" */
.hero-metric label { 
    color: var(--accent-success); 
    font-weight: 800; 
    letter-spacing: 1.5px; 
    font-size: 0.9rem;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

/* The Big Dollar Amount */
.big-money {
    font-size: 3.5rem;
    font-family: var(--font-mono);
    color: var(--text-main);
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
}

.hero-sub { color: var(--text-muted); font-size: 0.9rem; margin-top: 5px; }

/* INPUTS & SELECTS (Fixing White-on-White) */
input, select { 
    background: transparent; 
    border: none; 
    color: var(--text-main); 
    font-family: var(--font-mono); 
    font-size: 1rem; 
    width: 100%; 
    
    /* Force dark mode behavior for these inputs */
    color-scheme: dark;
}

input:focus, select:focus { outline: none; color: black}

/* Custom Dropdown Arrow for Dark Mode */
select {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2394a3b8%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0px top 50%;
    background-size: 0.65rem auto;
    padding-right: 1.5rem;
    appearance: none;
}

select option { 
    background-color: var(--bg-panel);
    color: var(--text-main); 
}


/* Color Coded Top Borders */
#card-housing { border-top: 3px solid var(--c-housing); }
#card-health { border-top: 3px solid var(--c-health); }

/* Main Grid */
.main-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; padding: 2rem; height: 100%; overflow: hidden; }
.panel { background: var(--bg-panel); border-radius: 12px; border: 1px solid #333; display: flex; flex-direction: column; overflow: hidden; }
.panel-header { padding: 1rem; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }
.ledger-panel { overflow-y: auto; }
.hud-panel { padding: 1.5rem; display: flex; flex-direction: column; gap: 2rem; }

/* Sub Labels & Split Inputs */
.sub-label { font-size: 0.7rem; color: #555; margin-top: 4px; }
.med-labels { display: flex; justify-content: space-between; font-size: 0.65rem; color: #777; margin-bottom: 2px; }
.med-group { display: flex; gap: 10px; }
.med-box { flex: 1; display: flex; flex-direction: column; }
.med-box input { border-bottom: 1px solid #444; text-align: center; padding: 4px; }

/* --- LEDGER SUMMARY --- */
.ledger-summary {
    padding: 1rem;
    border-top: 1px solid #333;
    display: flex;
    justify-content: space-between; /* Pushes text left, money right */
    align-items: center;
    background: rgba(0,0,0,0.2);
    margin-top: auto; /* Push to bottom of panel if flex */
}

.ledger-summary span:first-child {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.ledger-summary .mono-val {
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-mono);
}

/* --- TOGGLE SWITCH --- */
.toggle-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.toggle-switch input { display: none; } /* Hide default checkbox */

.toggle-slider {
    width: 32px;
    height: 18px;
    background-color: #333;
    border-radius: 9px;
    position: relative;
    transition: background-color 0.2s;
    border: 1px solid #444;
}

/* The Knob */
.toggle-slider::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: #888;
    border-radius: 50%;
    top: 1px;
    left: 1px;
    transition: transform 0.2s, background-color 0.2s;
}

/* Checked State */
.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent-success); /* Green background */
    border-color: var(--accent-success);
}

.toggle-switch input:checked + .toggle-slider::after {
    transform: translateX(14px);
    background-color: white;
}

.toggle-switch input:checked ~ .toggle-label {
    color: var(--text-main);
}

/* --- BRAND COLUMN (Stacked Logo + Actions) --- */
.brand-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: max-content; /* Don't shrink */
}

.action-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* --- STATIC FOOTER --- */
.app-footer {
    padding: 1rem 2rem;
    background: var(--bg-panel);
    border-top: 1px solid #333;
    color: #666;
    font-size: 0.75rem;
    text-align: center;
    margin-top: auto; /* Pushes to bottom */
}