/* Color Palette Definitions */
:root {
    /* Custom color palette */
    --primary-50: #fffeb3;
    --primary-100: #ffe28a;
    --primary-200: #6fcb9f;
    --primary-300: #fb2e01;
    --primary-400: #666547;
    --primary-500: #666547;
}

/* Generic utility classes for color usage */
.bg-primary-50 { background-color: var(--primary-50); }
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-500 { background-color: var(--primary-500); }

.text-primary-50 { color: var(--primary-50); }
.text-primary-100 { color: var(--primary-100); }
.text-primary-200 { color: var(--primary-200); }
.text-primary-300 { color: var(--primary-300); }
.text-primary-400 { color: var(--primary-400); }
.text-primary-500 { color: var(--primary-500); }

.border-primary-50 { border-color: var(--primary-50); }
.border-primary-100 { border-color: var(--primary-100); }
.border-primary-200 { border-color: var(--primary-200); }
.border-primary-300 { border-color: var(--primary-300); }
.border-primary-400 { border-color: var(--primary-400); }
.border-primary-500 { border-color: var(--primary-500); }

/* Neutral borders for subtle dividers */
.border-neutral { border-color: #e5e7eb; }
.border-t-neutral { border-top-color: #e5e7eb; }
.border-l-neutral { border-left-color: #e5e7eb; }
.border-b-neutral { border-bottom-color: #e5e7eb; }

/* Sidebar styling */
.sidenav {
    position: fixed;
    top: 4rem;
    left: 0;
    width: 14rem;
    height: 100vh;
    background-color: white;
    z-index: 40;
    padding: 1rem;
}

.sidenav a {
    color: var(--primary-500);
}

.sidenav a:hover {
    color: var(--primary-400);
}

.sidenav h2, .sidenav h3 {
    color: var(--primary-500);
}

/* Main content area */
.main-content {
    margin-left: 14rem;
    padding: 2rem;
}

/* Card styling */
.card-white {
    background-color: white;
    color: var(--primary-500);
}

.card-white h1, 
.card-white h2, 
.card-white h3,
.card-white p,
.card-white td,
.card-white th,
.card-white li,
.card-white a {
    color: var(--primary-500);
}

/* Table styling */
.table-header {
    background-color: var(--primary-400);
    color: white;
}

.table-header th {
    color: white;
}

.table-row:hover {
    background-color: var(--primary-100);
}

/* Button styling */
.btn-primary {
    background-color: var(--primary-400);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-500);
}

/* Flash messages */
.flash {
    background-color: var(--primary-400);
    color: white;
}

.flash-error {
    background-color: #dc2626;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .sidenav {
        position: static;
        width: 100%;
        height: auto;
    }
    
    .main-content {
        margin-left: 0;
        padding: 1rem;
    }
}