:root {
    --primary-color: #3eb489;    /* Seafoam primary */
    --secondary-color: #6c757d;  /* Gray */
    --success-color: #198754;    /* Green */
    --danger-color: #c82333;     /* Red */
    --warning-color: #e0a800;    /* Gold/Yellow */
    --info-color: #0dcaf0;       /* Cyan */
    --light-color: #f8f9fa;      /* Background light */
    --dark-color: #212529;       /* Dark text */
    --accent-color: #2e8b57;     /* Darker seafoam for active states */
    --highlight-color: #a2f0d3;  /* Lighter seafoam highlight */
}

/* Body */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    background-color: var(--light-color);
}

/* Navbar */
.navbar {
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color), var(--highlight-color));
    background-size: 600% 600%;
    animation: gradientBG 15s ease infinite;
}
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
    color: #fff;
}

/* Sidebar */
.sidebar {
    min-height: calc(100vh - 56px);
    background: linear-gradient(180deg, var(--primary-color), var(--accent-color)); /* Seafoam gradient */
    padding: 20px 0;
    border-right: 1px solid #dee2e6;
}
.sidebar .nav-link {
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    margin: 5px 10px;
    text-decoration: none;
    transition: all 0.3s;
}
.sidebar .nav-link:hover {
    background-color: var(--highlight-color); /* Lighter seafoam highlight */
    color: #000;
}
.sidebar .nav-link.active {
    background-color: var(--accent-color); /* Darker seafoam for active */
    color: #fff;
}

/* Main Content */
.main-content {
    padding: 20px;
    background-color: var(--light-color);
    min-height: calc(100vh - 56px);
}

/* Cards */
.card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 20px;
    border: none;
}
.card-header {
    font-weight: 600;
    color: #fff;
    padding: 15px 20px;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}
.card.success .card-header {
    background: linear-gradient(90deg, #198754, #28a745);
}
.card.warning .card-header {
    background: linear-gradient(90deg, #e0a800, #ffc107);
}
.card.danger  .card-header {
    background: linear-gradient(90deg, #c82333, #dc3545);
}
.card.info    .card-header {
    background: linear-gradient(90deg, #0dcaf0, #17a2b8);
}

/* Stat Cards */
.stat-card {
    border-left: 5px solid var(--primary-color);
    background: linear-gradient(90deg, #e9f5ff, #ffffff);
    color: var(--dark-color);
    padding: 15px;
    border-radius: 0.5rem;
    transition: transform 0.3s, box-shadow 0.3s;
}
.stat-card.success { border-left-color: var(--success-color); background: linear-gradient(90deg, #d4edda, #ffffff);}
.stat-card.warning { border-left-color: var(--warning-color); background: linear-gradient(90deg, #fff3cd, #ffffff);}
.stat-card.danger  { border-left-color: var(--danger-color); background: linear-gradient(90deg, #f8d7da, #ffffff);}
.stat-card.info    { border-left-color: var(--info-color); background: linear-gradient(90deg, #d1ecf1, #ffffff);}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }

/* Buttons */
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.btn-primary:hover { background-color: var(--accent-color); border-color: var(--accent-color); }
.btn-success { background-color: #198754; border-color: #198754; }
.btn-warning { background-color: #e0a800; border-color: #e0a800; color: #212529; }
.btn-danger  { background-color: #c82333; border-color: #c82333; color: #fff; }

/* Table hover */
.table-hover tbody tr:hover { background: linear-gradient(90deg, #0dcaf0, #198754); color: #fff; }

/* Animations */
@keyframes gradientBG {
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}