/* ==========================================================================
   Design system — FunKids Nursery & School
   Brand: playful bubblegum pink on deep charcoal. No blue anywhere, by design.
   ========================================================================== */

:root {
    --brand: #ec4899;
    --brand-dark: color-mix(in srgb, var(--brand) 78%, black);
    --brand-darker: color-mix(in srgb, var(--brand) 58%, black);
    --brand-light: color-mix(in srgb, var(--brand) 18%, white);
    --brand-soft: color-mix(in srgb, var(--brand) 6%, white);

    --ink: #1c1917;
    --ink-2: #292524;
    --ink-3: #44403c;
    --muted: #78716c;
    --muted-light: #a8a29e;

    --surface: #ffffff;
    --page-bg: #faf9f7;
    --border: #eee7df;

    --radius: 1rem;
    --radius-sm: .6rem;
    --shadow-soft: 0 1px 2px rgba(28,25,23,.04), 0 8px 24px -12px rgba(28,25,23,.12);
    --shadow-brand: 0 10px 25px -8px rgba(249,115,22,.55);

    --bs-focus-ring-color: rgba(249,115,22,.25);
}

* { box-sizing: border-box; }

body {
    background: var(--page-bg);
    color: var(--ink);
}

a { color: var(--brand-dark); }
a:hover { color: var(--brand-darker); }

/* ---- Bootstrap primary recolor (CDN build hardcodes #0d6efd per-component,
   so we override the component-scoped custom properties it reads from). ---- */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-darker);
    --bs-btn-active-border-color: var(--brand-darker);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: 249,115,22;
    box-shadow: var(--shadow-brand);
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-dark);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    font-weight: 600;
}
.btn { border-radius: var(--radius-sm); }
.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.badge.bg-primary { background-color: var(--brand) !important; }
.badge.bg-info-subtle { background-color: var(--brand-light) !important; }
.badge.text-info-emphasis { color: var(--brand-darker) !important; }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand); }
.form-select:focus, .form-control:focus { border-color: var(--brand); }
.btn-check:checked + .btn-outline-primary { background-color: var(--brand); border-color: var(--brand); }
.dropdown-item:active, .dropdown-item.active { background-color: var(--brand-light); color: var(--brand-darker); }
.list-group-item.active { background-color: var(--brand); border-color: var(--brand); }
::selection { background: var(--brand-light); }

/* ---- Cards ---- */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

/* ---- App shell ---- */
.sidebar {
    width: 272px;
    height: 100vh;
    background: linear-gradient(180deg, var(--ink) 0%, #15120f 100%);
    color: var(--muted-light);
    position: fixed;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 1030;
}
.sidebar .brand {
    padding: 1.5rem 1.35rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    gap: .65rem;
}
.sidebar .brand .mark {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .75rem;
    background: linear-gradient(135deg, var(--brand), var(--brand-darker));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-brand);
    flex-shrink: 0;
}
.sidebar .brand .mark img { width: 1.4rem; height: 1.4rem; }
.sidebar .brand .name { color: #fff; font-weight: 700; line-height: 1.25; font-size: .95rem; }

.sidebar nav { padding: 1rem .8rem; }
.sidebar .nav-link {
    color: var(--muted-light);
    padding: .65rem .9rem;
    border-radius: .65rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .92rem;
    font-weight: 500;
    margin-bottom: .15rem;
    transition: background .15s ease, color .15s ease;
}
.sidebar .nav-link i { font-size: 1.05rem; width: 1.3rem; text-align: center; opacity: .85; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    box-shadow: 0 8px 18px -6px rgba(249,115,22,.65);
}
.sidebar .nav-link.active i { opacity: 1; }

.main-wrap { min-height: 100vh; }
.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: .85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.content { padding: 1.75rem; }

/* ---- Stat tiles ---- */
.stat-card {
    border-radius: var(--radius);
    color: #fff;
    padding: 1.35rem 1.4rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.stat-card::after {
    content: "";
    position: absolute;
    inset: auto -20% -60% auto;
    width: 10rem; height: 10rem;
    background: rgba(255,255,255,.12);
    border-radius: 50%;
}
.stat-card .stat-icon {
    width: 2.75rem; height: 2.75rem;
    border-radius: .8rem;
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}
.stat-grad-orange { background: linear-gradient(135deg, #fb923c, #c2410c); }
.stat-grad-green  { background: linear-gradient(135deg, #34d399, #047857); }
.stat-grad-violet { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.stat-grad-rose   { background: linear-gradient(135deg, #fb7185, #be123c); }
.stat-grad-amber  { background: linear-gradient(135deg, #fbbf24, #b45309); }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    [dir="rtl"] .sidebar { transform: translateX(100%); }
    .sidebar.show { transform: translateX(0); }
    .main-wrap { margin: 0 !important; }
}