/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-brand: 'Fredoka', var(--font-sans);

    /* Campo brand green — sampled from the logo's "CAMP" */
    --color-primary-50: #eafbf3;
    --color-primary-100: #cff5e3;
    --color-primary-200: #9fe9c9;
    --color-primary-300: #6bd9ae;
    --color-primary-400: #45cb98;
    --color-primary-500: #2fb885;
    --color-primary-600: #219a6d;
    --color-primary-700: #1c7d5a;
    --color-primary-900: #124b37;

    /* Campo brand purple — sampled from the logo's "O" */
    --color-accent-100: #ece1fd;
    --color-accent-500: #9b5cec;
    --color-accent-600: #8541d9;
    --color-accent-700: #6c2fb4;

    /* True logo hues, reserved for the wordmark/brand mark itself —
       UI chrome uses the deeper --color-primary-600/700 for contrast. */
    --color-logo-green: #6bd9ae;
    --color-logo-purple: #9b5cec;

    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;

    --color-danger: #ef4444;
    --color-danger-50: #fef2f2;
    --color-warning: #f59e0b;
    --color-warning-50: #fffbeb;
    --color-success: var(--color-primary-600);
    --color-success-50: var(--color-primary-50);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 16px -4px rgba(15, 23, 42, .10), 0 2px 6px -3px rgba(15, 23, 42, .06);
    --shadow-lg: 0 16px 40px -12px rgba(15, 23, 42, .18), 0 4px 10px -4px rgba(15, 23, 42, .08);

    --sidebar-width: 264px;

    /* Bootstrap variable overrides */
    --bs-primary: var(--color-primary-600);
    --bs-primary-rgb: 33, 154, 109;
    --bs-secondary: var(--color-slate-500);
    --bs-success: var(--color-success);
    --bs-success-rgb: 33, 154, 109;
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 239, 68, 68;
    --bs-warning: var(--color-warning);
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--color-slate-800);
    --bs-body-bg: var(--color-slate-50);
    --bs-border-color: var(--color-slate-200);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-link-color: var(--color-primary-600);
    --bs-link-color-rgb: 33, 154, 109;
    --bs-link-hover-color: var(--color-primary-700);
    --bs-link-hover-color-rgb: 28, 125, 90;
}

* { letter-spacing: -0.011em; }

body {
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-slate-900);
}

a { text-decoration: none; }

::selection { background: var(--color-primary-200); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    font-weight: 600;
    font-size: .875rem;
    border-radius: var(--radius-sm);
    padding: .55rem 1.1rem;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn-sm { padding: .35rem .75rem; font-size: .8125rem; border-radius: 8px; }
.btn:active { transform: translateY(0.5px); }

.btn-primary {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    box-shadow: 0 1px 2px rgba(79, 70, 229, .25), 0 1px 1px rgba(79,70,229,.08);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--color-primary-700);
    border-color: var(--color-primary-700);
}

.btn-outline-primary { color: var(--color-primary-600); border-color: var(--color-primary-200); }
.btn-outline-primary:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); }

.btn-outline-secondary { color: var(--color-slate-600); border-color: var(--color-slate-300); }
.btn-outline-secondary:hover { background: var(--color-slate-100); border-color: var(--color-slate-400); color: var(--color-slate-900); }

.btn-outline-danger { color: var(--color-danger); border-color: #fecaca; }
.btn-outline-danger:hover { background: var(--color-danger); border-color: var(--color-danger); }

.btn-outline-success { color: var(--color-primary-600); border-color: var(--color-primary-200); }
.btn-outline-success:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); }

.btn-outline-warning { color: #b45309; border-color: #fde68a; }
.btn-outline-warning:hover { color: #fff; }

.btn-link { font-weight: 600; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--color-slate-100);
    font-weight: 700;
    font-size: .9375rem;
    color: var(--color-slate-900);
    padding: 1rem 1.25rem;
}
.card-body { padding: 1.25rem; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* ==========================================================================
   Tables
   ========================================================================== */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table thead th {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-slate-500);
    font-weight: 700;
    border-bottom: 1px solid var(--color-slate-200);
    padding: .8rem 1.1rem;
    white-space: nowrap;
}
.table td {
    padding: .85rem 1.1rem;
    vertical-align: middle;
    color: var(--color-slate-700);
    font-size: .875rem;
    border-color: var(--color-slate-100);
}
.table-hover tbody tr { transition: background-color .1s ease; }
.table-hover tbody tr:hover { background-color: var(--color-slate-50); }
.table-sm td, .table-sm th { padding: .55rem .75rem; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-control, .form-select {
    border-color: var(--color-slate-300);
    border-radius: var(--radius-sm);
    padding: .55rem .85rem;
    font-size: .9rem;
    color: var(--color-slate-900);
}
.form-control::placeholder { color: var(--color-slate-400); }
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}
.form-control-sm, .form-select-sm { padding: .4rem .65rem; font-size: .825rem; border-radius: 8px; }
.form-label { font-weight: 600; font-size: .825rem; color: var(--color-slate-700); margin-bottom: .35rem; }
.form-text { color: var(--color-slate-500); font-size: .8125rem; }
.form-check-input:checked { background-color: var(--color-primary-600); border-color: var(--color-primary-600); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--color-primary-100); }

/* ==========================================================================
   Badges & alerts
   ========================================================================== */
.badge { font-weight: 700; font-size: .6875rem; letter-spacing: .02em; padding: .4em .7em; border-radius: 999px; }
.alert { border: 1px solid transparent; border-radius: var(--radius-md); font-size: .875rem; }
.alert-danger { background: var(--color-danger-50); border-color: #fecaca; color: #991b1b; }
.alert-success { background: var(--color-success-50); border-color: #a7f3d0; color: #065f46; }
.alert-warning { background: var(--color-warning-50); border-color: #fde68a; color: #92400e; }
.alert-info { background: var(--color-primary-50); border-color: var(--color-primary-200); color: var(--color-primary-900); }

code { background: var(--color-slate-100); color: var(--color-primary-700); padding: .15em .4em; border-radius: 6px; font-size: .85em; }

/* ==========================================================================
   App shell (parent + admin authenticated layouts)
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }

.app-sidebar {
    width: var(--sidebar-width);
    background: #fff;
    border-right: 1px solid var(--color-slate-200);
}
.app-sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 0; }

.app-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.35rem 1.25rem;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--color-slate-900);
    border-bottom: 1px solid var(--color-slate-100);
}
.app-sidebar-brand .brand-mark {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-logo-green), var(--color-logo-purple));
    border-radius: 10px;
    color: #fff;
    font-size: 1.05rem;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

/* Campo wordmark — the real logo, set in Fredoka so "O" keeps its natural
   thick-ring counter instead of reading as a plain filled circle. */
.brand-wordmark {
    font-family: var(--font-brand);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    color: var(--color-logo-green);
    white-space: nowrap;
}
.brand-wordmark .o { color: var(--color-logo-purple); }
.brand-wordmark-sm { font-size: 1.55rem; }
.brand-wordmark-lg { font-size: 2.25rem; }

.app-sidebar-nav { flex: 1; overflow-y: auto; padding: 1rem .85rem; }
.app-sidebar-nav .nav-section-label {
    font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--color-slate-400); padding: .75rem .6rem .35rem;
}
.app-sidebar-nav .nav-link {
    display: flex; align-items: center; gap: .65rem;
    color: var(--color-slate-600);
    font-weight: 600; font-size: .875rem;
    border-radius: 10px;
    padding: .55rem .7rem;
    margin-bottom: .1rem;
    transition: background-color .12s ease, color .12s ease;
}
.app-sidebar-nav .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; color: var(--color-slate-400); }
.app-sidebar-nav .nav-link:hover { background: var(--color-slate-100); color: var(--color-slate-900); }
.app-sidebar-nav .nav-link.active { background: var(--color-primary-50); color: var(--color-primary-700); }
.app-sidebar-nav .nav-link.active i { color: var(--color-primary-600); }
.app-sidebar-nav hr { border-color: var(--color-slate-100); margin: .75rem .5rem; }

.app-sidebar-footer {
    border-top: 1px solid var(--color-slate-100);
    padding: .9rem 1.1rem;
}

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-slate-200);
    padding: .85rem 1.5rem;
}
.app-topbar-title { font-weight: 700; font-size: 1.05rem; color: var(--color-slate-900); }
.app-sidebar-toggle {
    border: 1px solid var(--color-slate-200); background: #fff; border-radius: 10px;
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    color: var(--color-slate-700);
}

.app-content { flex: 1; padding: 1.75rem; max-width: 1400px; width: 100%; margin: 0 auto; }

.role-badge {
    font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .3em .65em; border-radius: 999px;
    background: var(--color-primary-50); color: var(--color-primary-700);
}

.user-chip { display: flex; align-items: center; gap: .6rem; }
.user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--color-slate-800); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem; flex-shrink: 0;
}

/* ==========================================================================
   Stat tiles
   ========================================================================== */
.stat-tile {
    background: #fff;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    transition: box-shadow .15s ease, transform .15s ease;
}
.stat-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-tile .stat-label { font-size: .8125rem; font-weight: 600; color: var(--color-slate-500); margin-bottom: .35rem; }
.stat-tile .stat-value { font-size: 1.75rem; font-weight: 800; color: var(--color-slate-900); letter-spacing: -.02em; line-height: 1; }
.stat-tile .stat-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; flex-shrink: 0;
    background: var(--color-primary-50); color: var(--color-primary-600);
}
.stat-tile.accent-success .stat-icon { background: var(--color-success-50); color: var(--color-primary-600); }
.stat-tile.accent-success .stat-value { color: var(--color-primary-600); }
.stat-tile.accent-purple .stat-icon { background: var(--color-accent-100); color: var(--color-accent-600); }
.stat-tile.accent-purple .stat-value { color: var(--color-accent-600); }
.stat-tile.accent-warning .stat-icon { background: var(--color-warning-50); color: #b45309; }
.stat-tile.accent-danger .stat-icon { background: var(--color-danger-50); color: var(--color-danger); }

/* ==========================================================================
   Auth pages
   ========================================================================== */
.auth-shell {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1200px 600px at 15% -10%, var(--color-primary-100), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, var(--color-accent-100), transparent 55%),
        var(--color-slate-50);
}
.auth-card {
    width: 100%; max-width: 440px;
    background: #fff;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem;
}
.auth-card.auth-card-wide { max-width: 540px; }
@media (max-width: 575.98px) {
    .auth-card { padding: 1.75rem; }
}
.auth-brand-mark {
    width: 52px; height: 52px; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-logo-green), var(--color-logo-purple));
    border-radius: 14px; color: #fff; font-size: 1.5rem;
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Calendar & program cards
   ========================================================================== */
.calendar-day-card { height: 100%; }
.calendar-item {
    display: block;
    border: 1px solid var(--color-slate-200);
    border-radius: var(--radius-md);
    padding: .75rem .85rem;
    margin-bottom: .6rem;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.calendar-item:last-child { margin-bottom: 0; }
.calendar-item:hover { border-color: var(--color-primary-300, var(--color-primary-200)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

/* ==========================================================================
   Misc utilities
   ========================================================================== */
.text-muted { color: var(--color-slate-500) !important; }
hr { border-color: var(--color-slate-200); }
.list-group-item { border-color: var(--color-slate-100); }

@media (max-width: 991.98px) {
    .app-content { padding: 1.25rem; }
}