/* ═══════════════════════════════════════════════════════════════════
   INSTITUT NOUN — school-clean.css
   Design system overrides for the "clean" theme (Bootstrap 4.1.3,
   Froala Design Blocks, FontAwesome, RemixIcon).
   Palette reused from public/assets/css/custom-theme-school.css
   (Teal ن brand #0891b2) so V1 and V2 stay visually consistent.
   Conservative: only CSS, no markup/logic changes required.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Brand — Teal (from ن logo) */
    --n-brand: #0891b2;
    --n-brand-dark: #0e7490;
    --n-brand-light: #67e8f9;
    --n-brand-pale: #ecfeff;
    --n-brand-glow: rgba(8, 145, 178, 0.12);

    /* Semantic */
    --n-success: #16a34a;
    --n-success-pale: #dcfce7;
    --n-warning: #ea580c;
    --n-warning-pale: #fff7ed;
    --n-danger: #dc2626;
    --n-danger-pale: #fef2f2;
    --n-info: #0891b2;
    --n-info-pale: #ecfeff;

    /* Warm neutrals — cream undertone, not cold gray */
    --n-bg: #faf9f7;
    --n-surface: #ffffff;
    --n-border: #e8e5e0;
    --n-border-light: #f0eeea;
    --n-text: #1c1917;
    --n-text-secondary: #57534e;
    --n-text-muted: #a8a29e;
    --n-text-faint: #d6d3d1;

    /* Radii */
    --n-radius: 0.625rem;
    --n-radius-lg: 0.875rem;
    --n-radius-xl: 1.25rem;
    --n-radius-full: 9999px;

    /* Shadows */
    --n-shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
    --n-shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
    --n-shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.06), 0 2px 4px -2px rgba(28, 25, 23, 0.04);
    --n-shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -4px rgba(28, 25, 23, 0.04);
    --n-shadow-brand: 0 4px 14px rgba(8, 145, 178, 0.2);
}

/* ──────────────────────────────
   TYPOGRAPHY — keep Roboto (already loaded), safe system fallback
   ────────────────────────────── */
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--n-text);
    background-color: var(--n-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--n-text);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.text-muted {
    color: var(--n-text-secondary) !important;
}

a {
    color: var(--n-brand);
}

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


/* ──────────────────────────────
   NAVBAR (top)
   ────────────────────────────── */
header .navbar {
    background-color: var(--n-surface);
    border-bottom: 1px solid var(--n-border);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

header .navbar .navbar-brand img {
    border-radius: 0.375rem;
}

header .navbar .nav-link {
    color: var(--n-text-secondary);
    font-weight: 500;
}

header .navbar .nav-link:hover,
header .navbar .nav-item.active .nav-link {
    color: var(--n-brand-dark);
}

header .navbar .dropdown-toggle::after {
    color: var(--n-text-muted);
    vertical-align: middle;
}

header .navbar .dropdown-menu {
    border: 1px solid var(--n-border);
    border-radius: var(--n-radius-lg);
    box-shadow: var(--n-shadow-lg);
    padding: 0.5rem;
    margin-top: 0.5rem;
}

header .navbar .dropdown-item {
    border-radius: var(--n-radius);
    padding: 0.5rem 0.75rem;
    color: var(--n-text-secondary);
    font-weight: 500;
}

header .navbar .dropdown-item:hover,
header .navbar .dropdown-item:focus {
    background-color: var(--n-brand-pale);
    color: var(--n-brand-dark);
}

header .navbar .dropdown-divider {
    border-color: var(--n-border-light);
}


/* ──────────────────────────────
   BUTTONS
   ────────────────────────────── */
.btn {
    font-weight: 600;
    border-radius: var(--n-radius);
    transition: all 0.15s ease;
}

.btn-primary,
.btn-info {
    background-color: var(--n-brand);
    border-color: var(--n-brand);
    box-shadow: var(--n-shadow-brand);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
    background-color: var(--n-brand-dark);
    border-color: var(--n-brand-dark);
    box-shadow: 0 6px 20px rgba(8, 145, 178, 0.3);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled):active {
    background-color: #164e63;
    border-color: #164e63;
}

.btn-outline-primary,
.btn-outline-info {
    color: var(--n-brand);
    border-color: var(--n-brand);
}

.btn-outline-primary:hover,
.btn-outline-info:hover {
    background-color: var(--n-brand);
    border-color: var(--n-brand);
    color: #fff;
}

.btn-success {
    background-color: var(--n-success);
    border-color: var(--n-success);
}

.btn-success:hover,
.btn-success:focus {
    background-color: #15803d;
    border-color: #15803d;
}

.btn-outline-success {
    color: var(--n-success);
    border-color: var(--n-success);
}

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

.btn-danger {
    background-color: var(--n-danger);
    border-color: var(--n-danger);
}

.btn-warning {
    background-color: var(--n-warning);
    border-color: var(--n-warning);
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #c2410c;
    border-color: #c2410c;
    color: #fff;
}

.btn.focus,
.btn:focus {
    box-shadow: 0 0 0 3px var(--n-brand-glow);
}


/* ──────────────────────────────
   BADGES
   ────────────────────────────── */
.badge {
    font-weight: 600;
    border-radius: var(--n-radius);
    padding: 0.35em 0.65em;
}

.badge-primary,
.badge-info {
    background-color: var(--n-brand);
}

.badge-success {
    background-color: var(--n-success);
}

.badge-warning {
    background-color: var(--n-warning);
    color: #fff;
}

.badge-danger {
    background-color: var(--n-danger);
}

.badge-light {
    background-color: var(--n-border-light);
    color: var(--n-text-secondary);
}

.badge-pill {
    border-radius: var(--n-radius-full);
}


/* ──────────────────────────────
   CARDS / fdb-box — redensified
   ────────────────────────────── */
.card {
    background-color: var(--n-surface);
    border: 1px solid var(--n-border-light);
    border-radius: var(--n-radius-lg);
    box-shadow: var(--n-shadow-sm);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--n-border-light);
    font-weight: 600;
}

.fdb-box {
    background-color: var(--n-surface);
    border: 1px solid var(--n-border-light) !important;
    border-radius: var(--n-radius-lg) !important;
    box-shadow: var(--n-shadow-sm) !important;
    padding: 1.5rem !important;
}

/* Bootstrap 4 padding utilities used historically for fdb-box spacing
   (pb-5 pt-5 = 3rem top/bottom) are overridden site-wide to a saner
   density once combined with .fdb-box; see macro.twig for the class
   changes (p-3) applied on the components that used the old spacing. */


/* ──────────────────────────────
   NAV TABS / PILLS
   ────────────────────────────── */
.nav-tabs {
    border-bottom-color: var(--n-border);
}

.nav-tabs .nav-link {
    color: var(--n-text-secondary);
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.nav-tabs .nav-link:hover {
    color: var(--n-brand-dark);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--n-brand-dark);
    background-color: transparent;
    border-color: transparent;
    border-bottom: 2px solid var(--n-brand);
    font-weight: 700;
}


/* ──────────────────────────────
   ALERTS
   ────────────────────────────── */
.alert {
    border: none;
    border-radius: var(--n-radius-lg);
}

.alert-primary,
.alert-info {
    background-color: var(--n-brand-pale);
    color: var(--n-brand-dark);
}

.alert-success {
    background-color: var(--n-success-pale);
    color: #15803d;
}

.alert-warning {
    background-color: var(--n-warning-pale);
    color: #9a3412;
}

.alert-danger {
    background-color: var(--n-danger-pale);
    color: #991b1b;
}


/* ──────────────────────────────
   FORM CONTROLS
   ────────────────────────────── */
.form-control {
    border: 1.5px solid var(--n-border);
    border-radius: var(--n-radius);
    color: var(--n-text);
    background-color: var(--n-surface);
}

.form-control:focus {
    border-color: var(--n-brand);
    box-shadow: 0 0 0 3px var(--n-brand-glow);
    color: var(--n-text);
    background-color: var(--n-surface);
}

.form-control::placeholder {
    color: var(--n-text-muted);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--n-brand);
    border-color: var(--n-brand);
}


/* ──────────────────────────────
   MODALS
   ────────────────────────────── */
.modal-content {
    border: none;
    border-radius: var(--n-radius-lg);
    box-shadow: var(--n-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--n-border-light);
}

.modal-footer {
    border-top: 1px solid var(--n-border-light);
}


/* ──────────────────────────────
   EMPTY STATES (macro emptyState())
   ────────────────────────────── */
.n-empty-state {
    text-align: center;
    padding: 2.5rem 1.25rem;
    color: var(--n-text-secondary);
}

.n-empty-state-icon {
    font-size: 2.75rem;
    color: var(--n-text-faint);
    margin-bottom: 0.75rem;
    display: block;
}

.n-empty-state-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--n-text);
    margin-bottom: 0.25rem;
}

.n-empty-state-message {
    font-size: 0.9375rem;
    color: var(--n-text-secondary);
    margin: 0;
}


/* ──────────────────────────────
   FAMILY MEMBER CARDS (member/list.twig)
   ────────────────────────────── */
.n-member-card {
    display: block;
    text-decoration: none;
    background-color: var(--n-surface);
    border: 1px solid var(--n-border-light);
    border-radius: var(--n-radius-lg);
    box-shadow: var(--n-shadow-sm);
    padding: 1.25rem 1rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    color: var(--n-text);
}

.n-member-card:hover,
.n-member-card:focus {
    box-shadow: var(--n-shadow-md);
    transform: translateY(-2px);
    color: var(--n-brand-dark);
    text-decoration: none;
}

.n-member-card img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    margin: 0 auto 0.75rem;
    display: block;
    border: 2px solid var(--n-brand-pale);
}

.n-member-card h2 {
    font-size: 1.0625rem;
    margin: 0;
}


/* ──────────────────────────────
   MOBILE BOTTOM NAV
   ────────────────────────────── */
.n-nav-bottom {
    background-color: rgba(250, 249, 247, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--n-border);
    box-shadow: 0 -4px 20px rgba(28, 25, 23, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 1030;
}

.n-nav-bottom .n-nav-bottom-link {
    color: var(--n-text-muted);
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.375rem 0.25rem;
    min-width: 3.5rem;
}

.n-nav-bottom .n-nav-bottom-link i {
    font-size: 1.25rem;
    line-height: 1;
    display: block;
    margin-bottom: 0.125rem;
}

.n-nav-bottom .n-nav-bottom-link.active {
    color: var(--n-brand);
}

body.has-bottom-nav {
    padding-bottom: 4.25rem;
}

@media (min-width: 768px) {
    body.has-bottom-nav {
        padding-bottom: 0;
    }
}


/* ──────────────────────────────
   TOASTR (local vendor, loaded from /assets/vendor/libs/toastr/)
   ────────────────────────────── */
#toast-container > div {
    border-radius: var(--n-radius-lg) !important;
    box-shadow: var(--n-shadow-lg) !important;
    opacity: 0.98 !important;
}

.toast-success { background-color: var(--n-success) !important; }
.toast-error   { background-color: var(--n-danger) !important; }
.toast-warning { background-color: var(--n-warning) !important; }
.toast-info    { background-color: var(--n-brand) !important; }


/* ──────────────────────────────
   FOOTER
   ────────────────────────────── */
footer.fdb-block {
    background-color: var(--n-surface);
    border-top: 1px solid var(--n-border-light);
    color: var(--n-text-muted);
    font-size: 0.875rem;
}


/* ──────────────────────────────
   LOGIN PAGE
   ────────────────────────────── */
.n-login-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    opacity: 0.35;
    z-index: -1;
    object-fit: cover;
}

.n-login-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

.n-login-card {
    background: linear-gradient(160deg, var(--n-brand-dark), var(--n-brand));
    position: relative;
    z-index: 1;
    border: none !important;
    border-radius: var(--n-radius-xl);
    box-shadow: var(--n-shadow-lg);
}

.n-login-card .form-control {
    border: none;
    background-color: rgba(255, 255, 255, 0.94);
}

.n-login-card .form-control:focus {
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

.n-login-card p,
.n-login-card label {
    color: rgba(255, 255, 255, 0.92);
}