:root { 
    --green: #17B84B; 
    --yellow: #FAC017; 
    --brown: #482818; 
    --cream: #EBE2DE; 
    --bg: #f8fafc; 
    --border: #e2e8f0; 
}

body { font-family: 'Inter', system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--brown); display: flex; height: 100vh; }

/* Sidebar Navigation */
nav { width: 260px; background: var(--cream); color: var(--brown); display: flex; flex-direction: column; flex-shrink: 0; box-shadow: 4px 0 10px rgba(0,0,0,0.05); }

.nav-head { background: white; padding: 20px; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid var(--border); }
.nav-head img { max-width: 100%; height: auto; max-height: 150px; }

.nav-btn { padding: 16px 30px; cursor: pointer; color: var(--brown); text-decoration: none; font-size: 0.95rem; transition: 0.2s; display: block; font-weight: 600; }
.nav-btn:hover { background: rgba(72, 40, 24, 0.05); }
.nav-btn.active { background: rgba(72, 40, 24, 0.1); border-right: 5px solid var(--brown); }

/* Main Content Area */
main { flex: 1; padding: 40px; overflow-y: auto; }
h1, h2, h3, h4, .day-label, label { color: var(--brown) !important; }

.card { background: white; padding: 30px; border-radius: 16px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 30px; border: 1px solid var(--border); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

input, select, textarea { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; box-sizing: border-box; margin-bottom: 10px; color: var(--brown); }

/* BUTTONS */
/* Green remains for 'Positive/Save' actions */
.btn-primary { background: var(--green); color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: 700; transition: 0.2s; }
.btn-primary:hover { opacity: 0.8; }

/* Blue buttons (now Brown) for 'Secondary/Add/Edit' actions */
.btn-blue { background: var(--brown); color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: 700; transition: 0.2s; }
.btn-blue:hover { opacity: 0.8; transform: translateY(-1px); }

#status-indicator { font-size: 0.7rem; padding: 10px; text-align: center; font-weight: bold; }
#status-indicator.connected { background: var(--brown); color: #FFF; }