/* ===== Base & Typography ===== */
#arabiclab-breadcrumb { display: none; }

.alfr-dashboard {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #4B5563;
    min-height: 100vh;
}

.alfr-dashboard h1,
.alfr-dashboard h2,
.alfr-dashboard h3,
.alfr-dashboard h4,
.alfr-dashboard h5,
.alfr-dashboard h6 {
    color: #1F2937;
    letter-spacing: -0.01em;
}

/* ===== Dashboard Header ===== */
.alfr-page-header {
    padding-bottom: 12px;
    border-bottom: 1px solid #DCE8E2;
    margin-bottom: 2rem !important;
}

.alfr-page-header h2 {
    font-size: 34px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 8px !important;
}

.alfr-page-header h2 i {
    color: #0F766E;
    font-size: 32px !important;
}

.alfr-page-subtext {
    font-size: 16px;
    color: #6B7280;
    margin: 0;
    line-height: 1.6;
}

/* ===== Section Labels ===== */
.alfr-section-label {
    font-size: 22px;
    font-weight: 600;
    color: #1F2937;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

/* ===== Cards ===== */
.alfr-dashboard .card {
    border: 1px solid #DCE8E2;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.alfr-dashboard .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
}

.alfr-dashboard .card-body {
    padding: 24px;
}

/* ===== Guardian Cards ===== */
.alfr-guardian-card {
    overflow: hidden;
}

.guardian-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #DCE8E2;
}

.guardian-icon-wrapper {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #E8F5F2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guardian-icon-wrapper i {
    color: #0F766E;
    font-size: 20px;
}

.guardian-header-text h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 2px;
    color: #1F2937;
}

.guardian-header-text p {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
    line-height: 1.5;
}

.guardian-entries-container {
    padding: 4px 0;
}

.guardian-entry {
    padding: 18px 24px;
    border-bottom: 1px solid #F0EFE8;
    transition: background 0.15s ease;
}

.guardian-entry:last-child {
    border-bottom: none;
}

.guardian-entry:hover {
    background: #F4FAF8;
}

.guardian-avatar-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.guardian-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #E8F5F2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guardian-avatar i {
    color: #0F766E;
    font-size: 24px;
}

.guardian-avatar-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}

.guardian-info {
    flex: 1;
    min-width: 0;
}

.guardian-name {
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.guardian-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    background: #E8F5F2;
    color: #0F766E;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.guardian-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Guardian action buttons now match children action button style */
.guardian-actions .btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.guardian-actions .btn:hover {
    background: #E8F5F2;
    border-color: #DCE8E2;
    color: #0F766E;
}

.guardian-actions .btn i {
    font-size: 14px;
}

/* ===== Children Cards ===== */
.children-section-card {
    overflow: hidden;
}

.children-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #DCE8E2;
}

.children-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
}

.children-section-title i {
    color: #0F766E;
    font-size: 20px;
}

.children-count-badge {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 999px;
    background: #E8F5F2;
    color: #0F766E;
}

/* Every child is its own outlined card. The identity header and the section
   dividers already draw hairlines inside a card, so a hairline between cards
   was indistinguishable from a divider within one. */
.children-cards-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}

.child-card {
    padding: 18px 20px;
    background: #FFFFFF;
    border: 1px solid #DCE8E2;
    border-radius: 12px;
    transition: background 0.15s ease;
}

.child-card-inner {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.child-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.child-avatar-wrapper {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
}

.child-avatar-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    /* Avatars sit in flex rows (child headers, selector cards). Without this a
       long name beside them squeezes the box out of round — and the <img>
       resists shrinking where the placeholder div does not, so the two end up
       different sizes in the same slot. */
    flex-shrink: 0;
}

.child-avatar-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #E8F5F2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.child-avatar-placeholder i {
    color: #0F766E;
    font-size: 24px;
}


.child-name {
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
}

.child-meta {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
    line-height: 1.5;
}

/* Username chip next to the child's display name */
.child-username {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F3F4F6;
    color: #6B7280;
    line-height: 1.4;
    word-break: break-all;
}


/* Boy/girl icon beside the age on the identity line. `contain` keeps a
   replacement PNG whole if it is not square. */
.child-gender-icon {
    flex: none;
    width: 16px;
    height: 16px;
    object-fit: contain;
}


/* Interests — School shares the layout: a name plus pills, wrapping as needed */
.child-interests-row,
.child-school-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}


/* School name — the value itself, a shade darker than the section label */
.child-school-name {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    line-height: 1.4;
}


.interest-pill {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 999px;
    background: #E8F5F2;
    color: #0F766E;
    line-height: 1.4;
}


/* Magic login link row — full-width, below the card content */
.child-magic-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 8px 10px;
    background: #F7F9F8;
    border: 1px solid #E8EDEA;
    border-radius: 8px;
}

.child-magic-link-label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    white-space: nowrap;
}

.child-magic-link-label i {
    font-size: 13px;
    color: #0F766E;
}

.alfr-magic-link-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #DCE8E2;
    border-radius: 6px;
    background: #FFFFFF;
    color: #4B5563;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    text-overflow: ellipsis;
    cursor: text;
}

.alfr-magic-link-input:focus {
    outline: none;
    border-color: #0F766E;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
}

.alfr-magic-link-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid #DCE8E2;
    border-radius: 6px;
    color: #6B7280;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.alfr-magic-link-btn:hover {
    background: #E8F5F2;
    border-color: #0F766E;
    color: #0F766E;
}

.alfr-magic-link-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 575.98px) {
    .child-magic-link-row {
        flex-wrap: wrap;
    }

    .child-magic-link-label {
        flex-basis: 100%;
    }
}

/* "The old link will stop working" warning in the regenerate confirmation */
.alfr-regen-warning {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 13px;
    background: #FFFBEB;
    border: 1px solid #FEF3C7;
    border-radius: 8px;
    color: #92400E;
    font-size: 0.82rem;
    line-height: 1.55;
}

.alfr-regen-warning i {
    flex-shrink: 0;
    margin-top: 1px;
    color: #B45309;
    font-size: 15px;
    line-height: 1.4;
}

/* Payment alert row */
.child-payment-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 0;
    padding: 10px 14px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 10px;
    box-sizing: border-box;
}

.child-payment-alert-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #92400E;
    margin: 0;
    padding: 0;
}

.child-payment-alert-text i {
    font-size: 15px;
    color: #D97706;
}

.child-payment-alert .alfr-complete-payment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 16px;
    margin: 0;
    background: #F59E0B;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
    box-sizing: border-box;
}

.child-payment-alert .alfr-complete-payment-btn:hover {
    background: #D97706;
    color: #fff;
}

/* ===== Child Profile Notice ===== */
.child-profile-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 10px;
    margin-top: 12px;
    font-size: 13px;
    color: #9A3412;
    line-height: 1.5;
}

.child-profile-notice i {
    font-size: 16px;
    color: #F59E0B;
    flex-shrink: 0;
}

.child-profile-notice span {
    flex: 1;
}

/* ===== Profile / Plan Notice (edit-child modal) ===== */
.alfr-profile-plan-notice {
    margin-bottom: 16px;
}

.alfr-profile-plan-notice__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
}

.alfr-profile-plan-notice__item[hidden] {
    display: none;
}

.alfr-profile-plan-notice__item i {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.alfr-profile-plan-notice__item strong {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.alfr-profile-plan-notice__item p {
    margin: 0;
}

.alfr-profile-plan-notice__item--setup {
    background: #FFF7ED;
    border-color: #FED7AA;
    color: #9A3412;
}

.alfr-profile-plan-notice__item--setup i {
    color: #F59E0B;
}

.alfr-profile-plan-notice__item--edit {
    background: #ECFDF5;
    border-color: #A7F3D0;
    color: #065F46;
}

.alfr-profile-plan-notice__item--edit i {
    color: #0F766E;
}

/* ===== Child Subscription Notice ===== */
.child-subscription-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #FFF0F0;
    border: 1px solid #FECACA;
    border-radius: 10px;
    margin-top: 12px;
    font-size: 13px;
    color: #991B1B;
    line-height: 1.5;
}

.child-subscription-notice i {
    font-size: 16px;
    color: #EF4444;
    flex-shrink: 0;
}

.child-subscription-notice span {
    flex: 1;
}

/* ===== Upgrade Credit Notice ===== */
.child-upgrade-credit-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 10px;
    margin-top: 12px;
    font-size: 13px;
    color: #065F46;
    line-height: 1.5;
}

.child-upgrade-credit-notice i {
    font-size: 16px;
    color: #10B981;
    flex-shrink: 0;
}

.child-upgrade-credit-notice span {
    flex: 1;
}

.child-upgrade-credit-notice code {
    background: #D1FAE5;
    border: 1px solid #6EE7B7;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* ===== Child Subscription Badge (selector card) ===== */
.child-subscription-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 2px 8px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #DC2626;
    line-height: 1.6;
}

/* ===== Points Badge (child selector card) ===== */
.alfr-points-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 2px 8px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #B45309;
    line-height: 1.6;
}

/* ===== Empty State ===== */
.alfr-empty-state {
    text-align: center;
    padding: 48px 24px;
}

.alfr-empty-state .empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #E8F5F2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.alfr-empty-state .empty-icon i {
    color: #0F766E;
    font-size: 28px;
}

.alfr-empty-state h5 {
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
    margin: 0 0 6px;
}

.alfr-empty-state p {
    font-size: 14px;
    color: #6B7280;
    margin: 0;
    line-height: 1.6;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Sidebar / Add Child Card ===== */
.alfr-sidebar-sticky {
    position: sticky;
    top: 24px;
}

.alfr-add-child-card {
    border: 1px solid #DCE8E2;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.alfr-add-child-card .card-body {
    padding: 28px 24px;
}

.alfr-add-child-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.alfr-add-child-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #E8F5F2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alfr-add-child-icon i {
    color: #0F766E;
    font-size: 22px;
}

.alfr-add-child-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
    margin: 0 0 4px;
}

.alfr-add-child-subtext {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
    line-height: 1.5;
}

.alfr-add-child-form {
    border-top: 1px solid #DCE8E2;
    padding-top: 20px;
}

/* ===== Forms ===== */
.alfr-dashboard .form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.alfr-dashboard .form-control,
.alfr-dashboard .form-select {
    height: 46px;
    border-radius: 12px;
    border: 1.5px solid #DCE8E2;
    padding: 0 14px;
    font-size: 14px;
    color: #1F2937;
    background: #FFFFFF;
    box-shadow: none;
    transition: all 0.15s ease;
}

.alfr-dashboard .form-control:focus,
.alfr-dashboard .form-select:focus {
    border-color: #0F766E;
    box-shadow: 0 0 0 4px rgba(83, 74, 183, 0.1);
    outline: none;
}

.alfr-dashboard .form-control::placeholder {
    color: #9CA3AF;
}

.alfr-dashboard textarea.form-control {
    height: auto;
    padding: 12px 14px;
}

.alfr-dashboard input[type="file"].form-control {
    padding: 10px 14px;
    height: auto;
}

.alfr-dashboard input[type="file"].form-control::file-selector-button {
    border-radius: 8px;
    border: 1px solid #DCE8E2;
    background: #F4FAF8;
    padding: 4px 14px;
    font-size: 13px;
    color: #4B5563;
    margin-right: 10px;
}

.alfr-dashboard input[type="file"].form-control:focus::file-selector-button {
    border-color: #0F766E;
}

/* Checkboxes */
.alfr-dashboard .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    margin-bottom: 0;
}

.alfr-dashboard .form-check-input {
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 6px;
    border: 2px solid #D1D5DB;
    background: #FFFFFF;
    cursor: pointer;
    transition: all 0.12s ease;
    flex-shrink: 0;
}

.alfr-dashboard .form-check-input:checked {
    background: #0F766E;
    border-color: #0F766E;
}

.alfr-dashboard .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(83, 74, 183, 0.12);
    border-color: #0F766E;
}

.alfr-dashboard .form-check-label {
    font-size: 14px;
    color: #4B5563;
    cursor: pointer;
    padding-top: 1px;
}

/* ===== Add Child Controls ===== */
.alfr-add-child-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alfr-add-child-controls .form-control {
    width: 90px;
    text-align: center;
    font-weight: 600;
    border-radius: 12px;
    border: 1.5px solid #DCE8E2;
    height: 46px;
    font-size: 16px;
}

.alfr-add-child-controls .form-control:focus {
    border-color: #0F766E;
    box-shadow: 0 0 0 4px rgba(83, 74, 183, 0.1);
}

.alfr-add-child-hint {
    font-size: 12px;
    color: #9CA3AF;
    margin: 12px 0 0;
    line-height: 1.5;
}

/* ===== Alerts ===== */
.alfr-dashboard .alert {
    border: none;
    border-radius: 14px;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

.alfr-dashboard .alert-success {
    background: #ECFDF5;
    color: #065F46;
    border-left: 4px solid #16A34A;
}

.alfr-dashboard .alert .btn-close {
    font-size: 14px;
    opacity: 0.5;
}

/* ===== Required Asterisk ===== */
.required {
    color: #DC2626;
    font-weight: 600;
}

/* ===== Password Match Message ===== */
.text-danger.small {
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* ===== Co-Guardian / Child Edit Forms ===== */
.alfr-dashboard .edit-form-card .card-body {
    background: #F4FAF8;
    border-radius: 18px;
}

/* ===== Row gap refinement ===== */
.alfr-dashboard .row.g-3 {
    --bs-gutter-y: 16px;
}

/* ===== Modal Overlay ===== */
.alfr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10555;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.alfr-modal-container {
    background: #FFFFFF;
    border-radius: 18px;
    width: 100%;
    max-width: 640px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

/* Every form-bearing modal (edit child, change password, add lessons) nests
   header + body + footer inside a <form>, which makes that form this
   container's only flex item. Left as a plain block it keeps its content
   height, overflows the container's max-height and is clipped by the
   container's overflow:hidden — taking the footer, and so the submit button,
   out of sight. As a flex column it shrinks to fit and hands the scrolling to
   .alfr-modal-body. */
.alfr-modal-container > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.alfr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #DCE8E2;
    flex-shrink: 0;
}

.alfr-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alfr-modal-title i {
    color: #0F766E;
    font-size: 20px;
}

.alfr-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: #6B7280;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.alfr-modal-close:hover {
    background: #F3F4F6;
    color: #1F2937;
    border-color: #DCE8E2;
}

.alfr-modal-subtext {
    font-size: 13px;
    color: #6B7280;
    margin: 0 0 16px;
    line-height: 1.6;
}

/* ===== Modal Body ===== */
.alfr-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    /* Required, not cosmetic: a column flex item's automatic minimum size is its
       content height, so without this the body refuses to shrink below its
       content, overflows the container's max-height and pushes the footer past
       the clipped bottom edge — the submit button ends up out of sight. */
    min-height: 0;
}

/* ===== Modal Footer ===== */
.alfr-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px;
    border-top: 1px solid #F0EFE8;
    /* Same reason the header has it: the footer keeps its height and stays put
       while the body scrolls under it. */
    flex-shrink: 0;
}

.alfr-modal-footer .btn {
    height: 42px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.alfr-modal-footer .btn-secondary {
    background: transparent;
    border: 1px solid #DCE8E2;
    color: #6B7280;
}

.alfr-modal-footer .btn-secondary:hover {
    background: #E8F5F2;
    border-color: #D1D5DB;
    color: #0F766E;
}

.alfr-modal-footer .btn-primary {
    background: #0F766E;
    border: 1px solid #0F766E;
    color: #FFFFFF;
}

.alfr-modal-footer .btn-primary:hover {
    background: #0B5F59;
    border-color: #0B5F59;
}

.alfr-modal-footer .btn-primary:disabled {
    background: #9CA3AF;
    border-color: #9CA3AF;
    cursor: not-allowed;
    opacity: 0.7;
}

@media (max-width: 767.98px) {
    .alfr-modal-overlay {
        padding: 12px;
        align-items: flex-end;
    }

    .alfr-modal-container {
        max-height: 90vh;
        border-radius: 18px 18px 0 0;
    }

    .alfr-modal-header {
        padding: 16px 18px;
    }

    .alfr-modal-body {
        padding: 16px 18px;
    }

    .alfr-modal-footer {
        flex-direction: column;
        gap: 8px;
    }

    .alfr-modal-footer .btn {
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 991.98px) {
    /* ---- Page header ---- */
    .alfr-page-header h2 {
        font-size: 28px;
    }

    .alfr-section-label {
        font-size: 20px;
    }

    /* ---- Layout ---- */
    .alfr-sidebar-sticky {
        position: static;
        margin-top: 0;
    }

    /* ---- Guardian ---- */
    .guardian-card-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* ---- Children ---- */
    .children-section-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .child-name-row {
        flex-wrap: wrap;
    }

    .child-learning-stats {
        gap: 18px;
    }

    /* ---- Action buttons ---- */
    .child-card-inner {
        flex-wrap: wrap;
    }

    .child-actions-column {
        width: 100%;
    }

    .child-actions-column .alfr-action-btn.btn {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    /* ---- Page header ---- */
    .alfr-page-header h2 {
        font-size: 24px;
    }

    .alfr-page-header h2 i {
        font-size: 26px !important;
    }

    .alfr-page-subtext {
        font-size: 14px;
    }

    .alfr-dashboard .row.g-4 {
        --bs-gutter-y: 16px;
    }

    /* ---- Guardian cards ---- */
    .guardian-card-header {
        padding: 16px 18px;
    }

    .guardian-entry {
        padding: 14px 18px;
    }

    .guardian-avatar {
        width: 44px;
        height: 44px;
    }

    .guardian-avatar i {
        font-size: 20px;
    }

    .guardian-avatar-img {
        width: 44px;
        height: 44px;
    }

    .guardian-avatar-wrapper {
        flex-wrap: wrap;
    }

    .guardian-actions {
        width: 100%;
        flex-direction: row;
        margin-top: 10px;
    }

    .guardian-actions .btn {
        flex: 1;
        justify-content: center;
        height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }

    /* ---- Children card ---- */
    .child-card {
        padding: 16px 18px;
    }

    .children-cards-container {
        padding: 12px;
        gap: 12px;
    }

    .children-section-header {
        padding: 16px 18px;
    }

    .child-card-main {
        flex-wrap: wrap;
    }

    .child-avatar-wrapper {
        width: 44px;
        height: 44px;
    }

    .child-avatar-img,
    .child-avatar-placeholder {
        width: 44px;
        height: 44px;
    }

    .child-avatar-placeholder i {
        font-size: 20px;
    }

    .child-name-section {
        min-height: 44px;
    }

    .child-name {
        font-size: 15px;
    }

    .child-name-row {
        flex-wrap: wrap;
    }

    .child-learning-stats {
        gap: 16px;
    }

    /* Action buttons */
    .child-card-inner {
        flex-wrap: wrap;
    }

    .child-actions-column {
        width: 100%;
        gap: 6px;
    }

    .child-actions-column .alfr-action-btn.btn {
        flex: 1 1 0;
        min-width: 0;
        font-size: 11px !important;
    }

    /* Profile notice */
    .child-profile-notice {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Payment alert */
    .child-payment-alert {
        flex-wrap: wrap;
        gap: 8px;
    }

    .child-payment-alert-text {
        font-size: 12px;
    }

    .child-payment-alert .alfr-complete-payment-btn {
        font-size: 12px;
        height: 32px;
        padding: 0 12px;
    }

    /* Sidebar */
    .alfr-sidebar-sticky {
        position: static;
    }

    .alfr-add-child-card .card-body {
        padding: 20px 18px;
    }

    .alfr-dashboard .card-body {
        padding: 20px 18px;
    }

    /* Forms */
    .alfr-dashboard .form-control,
    .alfr-dashboard .form-select {
        height: 42px;
        font-size: 14px;
    }

    .alfr-dashboard .btn-primary,
    .alfr-dashboard .btn-secondary {
        height: 42px;
        font-size: 14px;
    }

    .alfr-action-btn {
        height: 30px;
        padding: 0 8px;
        font-size: 11px;
    }

    .alfr-add-child-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .alfr-add-child-controls .form-control {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    /* ---- Page header ---- */
    .alfr-page-header {
        margin-bottom: 1.25rem !important;
    }

    .alfr-page-header h2 {
        font-size: 20px;
    }

    .alfr-page-header h2 i {
        font-size: 22px !important;
    }

    .alfr-page-subtext {
        font-size: 13px;
    }

    /* ---- Guardian card ---- */
    .guardian-card-header {
        padding: 14px 16px;
    }

    .guardian-header-text h3 {
        font-size: 16px;
    }

    .guardian-header-text p {
        font-size: 12px;
    }

    .guardian-icon-wrapper {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .guardian-icon-wrapper i {
        font-size: 17px;
    }

    .guardian-entry {
        padding: 12px 16px;
    }

    .guardian-avatar-wrapper {
        flex-wrap: wrap;
    }

    .guardian-avatar {
        width: 38px;
        height: 38px;
    }

    .guardian-avatar i {
        font-size: 18px;
    }

    .guardian-name {
        font-size: 14px;
        flex-wrap: wrap;
    }

    .guardian-badge {
        font-size: 10px;
        padding: 2px 8px;
    }

    .guardian-actions {
        width: 100%;
        flex-direction: row;
        margin-top: 10px;
    }

    .guardian-actions .btn {
        flex: 1;
        justify-content: center;
        font-size: 11px;
        height: 30px;
        padding: 0 8px;
    }

    /* ---- Children card ---- */
    .children-section-header {
        padding: 14px 16px;
    }

    .children-section-title {
        font-size: 16px;
    }

    .child-card {
        padding: 14px 16px;
    }

    .children-cards-container {
        padding: 10px;
        gap: 10px;
    }

    .child-card-main {
        flex-direction: column;
        gap: 10px;
    }

    .child-avatar-wrapper {
        align-self: flex-start;
        width: 40px;
        height: 40px;
    }

    .child-avatar-img,
    .child-avatar-placeholder {
        width: 40px;
        height: 40px;
    }

    .child-avatar-placeholder i {
        font-size: 18px;
    }

    .child-info-wrap {
        gap: 6px;
    }

    /* Avatar stacks above the info column here, so there is nothing to
       center the name line against. */
    .child-name-section {
        min-height: 0;
    }

    .child-name {
        font-size: 15px;
    }

    .child-meta {
        font-size: 12px;
    }

    .child-username {
        font-size: 11px;
        padding: 2px 7px;
    }

    /* Learning stats */
    .child-learning-stats {
        gap: 14px;
        padding: 0;
    }

    .learning-stat {
        min-width: 0;
    }

    .learning-stat-label {
        font-size: 10px;
    }

    .learning-stat-value {
        font-size: 12px;
    }

    /* Interests */
    .child-interests-row,
    .child-school-row {
        gap: 4px;
    }

    .interests-label {
        font-size: 11px;
    }

    .interest-pill {
        font-size: 11px;
        padding: 3px 10px;
    }

    /* Action buttons */
    .child-card-inner {
        flex-wrap: wrap;
    }

    .child-actions-column {
        width: 100%;
        gap: 6px;
    }

    .child-actions-column .alfr-action-btn.btn {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 11px !important;
        height: 30px !important;
        padding: 0 8px !important;
        gap: 4px !important;
    }

    /* Profile notice */
    .child-profile-notice {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .child-profile-notice .alfr-action-btn {
        align-self: stretch;
        justify-content: center;
    }

    /* Payment alert */
    .child-payment-alert {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 12px;
        gap: 8px;
    }

    .child-payment-alert-text {
        font-size: 12px;
    }

    .child-payment-alert .alfr-complete-payment-btn {
        width: 100%;
        justify-content: center;
    }

    /* Sidebar / Add child card */
    .alfr-add-child-card .card-body {
        padding: 18px 16px;
    }

    .alfr-add-child-header {
        gap: 10px;
    }

    .alfr-add-child-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .alfr-add-child-icon i {
        font-size: 18px;
    }

    .alfr-add-child-header h3 {
        font-size: 16px;
    }

    .alfr-add-child-subtext {
        font-size: 12px;
    }

    .alfr-add-child-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .alfr-add-child-controls .form-control {
        width: 100%;
    }

    /* Empty state */
    .alfr-empty-state {
        padding: 36px 16px;
    }

    .alfr-empty-state .empty-icon {
        width: 52px;
        height: 52px;
    }

    .alfr-empty-state .empty-icon i {
        font-size: 22px;
    }

    /* Forms */
    .alfr-dashboard .form-control,
    .alfr-dashboard .form-select {
        height: 40px;
        font-size: 13px;
        border-radius: 10px;
    }

    .alfr-dashboard .form-label {
        font-size: 13px;
    }
}

/* ===== Extra-small phones (≤400px) ===== */
@media (max-width: 400px) {
    .alfr-page-header h2 {
        font-size: 18px;
    }

    .child-avatar-wrapper {
        width: 36px;
        height: 36px;
    }

    .child-avatar-img,
    .child-avatar-placeholder {
        width: 36px;
        height: 36px;
    }

    .child-learning-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .child-actions-column .alfr-action-btn.btn {
        flex: 1 1 100%;
        font-size: 10px !important;
    }

    .guardian-actions .btn {
        font-size: 10px;
        height: 28px;
        padding: 0 6px;
    }

    .guardian-name {
        font-size: 13px;
    }

    .alfr-dashboard .container {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ===== Learning Progress Page ===== */

/* ---------- Stats cards ---------- */
.alfr-progress-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}

.alfr-stat-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #DCE8E2;
    border-top: 3px solid #0F766E;
    border-radius: 18px;
    padding: 28px 24px 24px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.alfr-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg, rgba(15, 118, 110, 0.03) 0%, transparent 100%);
    pointer-events: none;
}

.alfr-stat-card:nth-child(1) { border-top-color: #0F766E; }
.alfr-stat-card:nth-child(2) { border-top-color: #16A34A; }
.alfr-stat-card:nth-child(3) { border-top-color: #F59E0B; }

.alfr-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.alfr-stat-icon {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #E8F5F2 0%, #D0EFE8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.alfr-stat-card:nth-child(2) .alfr-stat-icon {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
}

.alfr-stat-card:nth-child(3) .alfr-stat-icon {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
}

.alfr-stat-icon i {
    font-size: 22px;
}

.alfr-stat-card:nth-child(1) .alfr-stat-icon i { color: #0F766E; }
.alfr-stat-card:nth-child(2) .alfr-stat-icon i { color: #16A34A; }
.alfr-stat-card:nth-child(3) .alfr-stat-icon i { color: #D97706; }
.alfr-stat-card:nth-child(4) .alfr-stat-icon {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
}
.alfr-stat-card:nth-child(4) .alfr-stat-icon i { color: #7C3AED; }

.alfr-stat-value {
    font-size: 36px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.1;
    margin-bottom: 6px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.alfr-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    letter-spacing: 0.02em;
}

/* ---------- Child selector cards ---------- */
.alfr-child-selector-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.alfr-child-selector-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ---------- Progress link button ---------- */
.alfr-progress-link-btn {
    background: transparent;
    border: 1px solid #DCE8E2;
    border-radius: 8px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 500;
    color: #0F766E;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
    text-decoration: none;
}

.alfr-progress-link-btn:hover {
    background: #E8F5F2;
    border-color: #D1D5DB;
    color: #0B5F59;
}

.alfr-progress-link-btn i {
    font-size: 13px;
}

/* ---------- Card header row ---------- */
.alfr-add-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #DCE8E2;
    /* background: linear-gradient(180deg, #FAFCFB 0%, #FFFFFF 100%); */
}

/* ---------- Dropdown ---------- */
.alfr-dashboard .dropdown-toggle.btn-secondary {
    height: 40px;
    border-radius: 10px;
    font-size: 13px;
}

.alfr-dashboard .dropdown-menu {
    border: 1px solid #DCE8E2;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 6px;
}

.alfr-dashboard .dropdown-item {
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    color: #4B5563;
    transition: background 0.1s ease;
}

.alfr-dashboard .dropdown-item:hover {
    background: #E8F5F2;
    color: #0F766E;
}

/* ===== Progress Entries ===== */

.alfr-progress-entries {
    padding: 0;
}

/* ---------- Curriculum complete banner ---------- */
.alfr-progress-complete-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 44px 24px;
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    margin: 20px;
    border-radius: 16px;
    font-size: 17px;
    font-weight: 600;
    color: #065F46;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.08), 0 0 0 1px rgba(22, 163, 74, 0.1);
}

.alfr-progress-complete-banner i {
    font-size: 32px;
    color: #16A34A;
    animation: alfr-trophy-bounce 2s ease-in-out infinite;
}

@keyframes alfr-trophy-bounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-3deg); }
    75% { transform: scale(1.1) rotate(3deg); }
}

/* ---------- Sections ---------- */
.alfr-progress-section {
    padding: 20px 24px;
    border-bottom: 1px solid #F0EFE8;
}

.alfr-progress-section:last-child {
    border-bottom: none;
}

/* Profile update notice */
.alfr-profile-update-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 24px 14px;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 12px;
    font-size: 13px;
    color: #9A3412;
    line-height: 1.5;
}

.alfr-profile-update-notice i {
    font-size: 16px;
    color: #F97316;
    flex-shrink: 0;
    margin-top: 1px;
}

.alfr-profile-update-link {
    font-weight: 600;
    color: #C2410C;
    text-decoration: underline;
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

.alfr-profile-update-link:hover {
    color: #7C2D12;
}

.alfr-progress-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
    letter-spacing: 0.03em;
    margin-bottom: 14px;
}

.alfr-progress-section-label i {
    font-size: 17px;
    color: #0F766E;
}

.alfr-progress-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #E8F5F2;
    color: #0F766E;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
}

/* ---------- Current progress path (Level → Sub-Level → Step) ---------- */
.alfr-progress-path {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid #F0EFE8;
    background: #FAFCFB;
    flex-wrap: wrap;
}

.alfr-progress-path-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #FFFFFF;
    border: 1px solid #DCE8E2;
    border-radius: 12px;
    padding: 10px 16px;
    min-width: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.alfr-progress-path-item:hover {
    border-color: #0F766E;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.08);
}

.alfr-progress-path-label {
    font-size: 10px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.alfr-progress-path-value {
    font-size: 15px;
    font-weight: 600;
    color: #1F2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alfr-progress-path-arrow {
    font-size: 14px;
    color: #D1D5DB;
    flex-shrink: 0;
}

/* ---------- Step progress bar ---------- */
.alfr-step-progress-bar {
    margin: 0 24px 20px;
    height: 6px;
    background: #E8F5F2;
    border-radius: 3px;
    overflow: hidden;
}

.alfr-step-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0F766E 0%, #14B8A6 100%);
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================================================================
   Completed Lessons — Folder Tree
   Level → Sub-Level → Step → Lesson Type → Lessons
   ================================================================== */

/* ---------- Tree level (outermost: Level) ---------- */
.alfr-tree-level {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F0EFE8;
}

.alfr-tree-level:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.alfr-tree-level-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #F4F7F6 0%, #E8F0ED 100%);
    border-left: 4px solid #0F766E;
    margin-bottom: 16px;
    font-size: 15px;
}

.alfr-tree-level-header i {
    font-size: 18px;
    color: #0F766E;
    flex-shrink: 0;
}

/* ---------- Tree sublevel (nested under level) ---------- */
.alfr-tree-sublevel {
	margin-left: 0;
	margin-bottom: 14px;
	/* padding-left: 20px; */
	/* border-left: 2px solid #DCE8E2; */
}

.alfr-tree-sublevel:last-child {
    margin-bottom: 0;
}

.alfr-tree-sublevel-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	/* background: linear-gradient(135deg, #F0FAF5 0%, #E6F5EE 100%); */
	/* border-left: 3px solid #0D9488; */
	margin-bottom: 12px;
	font-size: 18px;
}

.alfr-tree-sublevel-header i {
    font-size: 16px;
    color: #0D9488;
    flex-shrink: 0;
}

/* ---------- Tree step (nested under sublevel) ---------- */
.alfr-tree-step {
    margin-left: 0;
    margin-bottom: 10px;
    padding-left: 20px;
    border-left: 2px solid #E5E7EB;
}

.alfr-tree-step:last-child {
    margin-bottom: 0;
}

.alfr-tree-step-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: #FAFBFC;
    border: none;
    border-left: 3px solid #9CA3AF;
    margin-bottom: 10px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.alfr-tree-step-header:hover {
    background: #F0F4F8;
}

.alfr-tree-step-chevron {
    font-size: 12px;
    color: #9CA3AF;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.alfr-tree-step.is-expanded > .alfr-tree-step-header .alfr-tree-step-chevron {
    transform: rotate(90deg);
}

.alfr-tree-step-header i {
    font-size: 15px;
    color: #6B7280;
    flex-shrink: 0;
}

/* Step body — hidden when collapsed */
.alfr-tree-step-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    max-height: 2000px;
    opacity: 1;
}

.alfr-tree-step.is-collapsed > .alfr-tree-step-body {
    max-height: 0;
    opacity: 0;
}

.alfr-tree-step.is-collapsed > .alfr-tree-step-header {
    margin-bottom: 0;
}

/* ---------- Tree lesson type (nested under step) ---------- */
.alfr-tree-lesson-type {
    margin-left: 0;
    margin-bottom: 8px;
    padding-left: 18px;
    border-left: 2px solid #F0EFE8;
}

.alfr-tree-lesson-type:last-child {
    margin-bottom: 0;
}

.alfr-tree-lesson-type-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #F9FAFB;
    border-left: 2px solid #D1D5DB;
    margin-bottom: 6px;
    font-size: 13px;
}

.alfr-tree-lesson-type-header i {
    font-size: 12px;
    color: #9CA3AF;
    flex-shrink: 0;
}

.alfr-tree-lesson-type-header .alfr-lesson-type {
    font-size: 13px;
    font-weight: 700;
}

/* ---------- Shared tree labels & values ---------- */
.alfr-tree-label {
    font-size: 11px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.alfr-tree-value {
    font-size: inherit;
    font-weight: 700;
    color: #1F2937;
}

/* ---------- Tree count badge ---------- */
.alfr-tree-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    background: #E8F5F2;
    color: #0F766E;
    margin-left: auto;
    flex-shrink: 0;
}

/* ---------- Lesson type label ---------- */
.alfr-lesson-type {
    font-weight: 600;
}

/* ---------- Interest heading (Current Lessons list) ----------
   The Current list groups by interest rather than by lesson type, so its
   header carries an interest name in place of the type chip — same weight and
   size as the type heading it replaced. */
.alfr-tree-lesson-type-header .alfr-progress-interest {
    font-size: 13px;
    font-weight: 700;
}

/* ---------- Category heading (tree) ----------
   A step is grouped by category (Arabic, Quran, …), one level above the
   interest headings it contains. It reads apart from an interest by its
   uppercase label and darker rail, so the two nesting levels do not blur. */
.alfr-tree-category {
    margin-left: 0;
    margin-bottom: 8px;
    padding-left: 14px;
    border-left: 2px solid #E0DDD2;
}

.alfr-tree-category:last-child {
    margin-bottom: 0;
}

.alfr-tree-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: #F3F4F6;
    border-left: 2px solid #9CA3AF;
    margin-bottom: 6px;
}

.alfr-tree-category-header i {
    font-size: 12px;
    color: #6B7280;
    flex-shrink: 0;
}

.alfr-tree-category-header .alfr-lesson-type {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* The step's state badge reuses the lesson-plan colours, but the state class
   sits on the collapsible .alfr-tree-step rather than .alfr-plan-step. */
.alfr-tree-step.is-completed .alfr-plan-step-state {
    background: #DCFCE7;
    color: #15803D;
}

.alfr-tree-step.is-current .alfr-plan-step-state {
    background: #E6F4F1;
    color: #0F766E;
}

.alfr-tree-step.is-ahead .alfr-plan-step-state {
    background: #F3F4F6;
    color: #6B7280;
}

.alfr-tree-step.is-ahead .alfr-plan-step-name {
    color: #4B5563;
}

/* The tree nests a category under a step and an interest under a category;
   on a phone the full-depth padding-left eats the width, so it is pulled in. */
@media (max-width: 575.98px) {
    .alfr-tree-category {
        padding-left: 8px;
    }

    .alfr-tree-lesson-type {
        padding-left: 10px;
    }
}

/* ---------- Completed lesson rows ---------- */
.alfr-progress-lessons-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.alfr-progress-lesson {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    /* border-radius: 8px;
    border-left: 3px solid transparent; */
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.alfr-progress-lesson:hover {
    background: #F4FAF8;
}

.alfr-progress-lesson.is-completed {
    border-left-color: #16A34A;
    background: linear-gradient(90deg, rgba(22, 163, 74, 0.025) 0%, transparent 40%);
}

.alfr-progress-lesson.is-pending {
    border-left-color: #D1D5DB;
}

.alfr-progress-lesson.is-pending:has(.bi-hourglass-split) {
    border-left-color: #F59E0B;
}

.alfr-progress-lesson-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alfr-progress-lesson-icon i {
    font-size: 18px;
}

.alfr-progress-lesson.is-completed .alfr-progress-lesson-icon i {
    color: #16A34A;
}

.alfr-progress-lesson.is-pending .alfr-progress-lesson-icon i {
    color: #D1D5DB;
}

.alfr-progress-lesson.is-pending .alfr-progress-lesson-icon .bi-hourglass-split {
    color: #F59E0B;
}

.alfr-progress-lesson-info {
    flex: 1;
    min-width: 0;
}

.alfr-progress-lesson-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alfr-progress-lesson.is-completed .alfr-progress-lesson-title {
    color: #1F2937;
}

/* Tree lesson rows — title fills available space */
.alfr-tree-lesson-type .alfr-progress-lessons-list {
    padding-left: 4px;
}

.alfr-progress-lesson > .alfr-progress-lesson-title {
    flex: 1;
    min-width: 0;
}

/* ---------- Lesson quiz score badge ---------- */
.alfr-progress-lesson-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ECFDF5;
    color: #047857;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid #A7F3D0;
}

/* ---------- Lesson status text ---------- */
.alfr-progress-lesson-status {
    font-size: 12px;
    font-weight: 500;
    color: #9CA3AF;
    white-space: nowrap;
    flex-shrink: 0;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.alfr-progress-lesson.is-completed .alfr-progress-lesson-status {
    color: #16A34A;
}

.alfr-progress-lesson.is-pending .alfr-progress-lesson-status {
    color: #9CA3AF;
}

.alfr-progress-lesson.is-pending:has(.bi-hourglass-split) .alfr-progress-lesson-status {
    color: #F59E0B;
}

/* ---------- Completed lesson info (title + breadcrumb path) ---------- */
.alfr-progress-lesson-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.alfr-progress-lesson-path {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #6B7280;
    white-space: nowrap;
    overflow: hidden;
}

.alfr-progress-lesson-path-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alfr-progress-lesson-path-item:first-child {
    flex-shrink: 0;
}

.alfr-progress-lesson-path-arrow {
    font-size: 8px;
    flex-shrink: 0;
    color: #D1D5DB;
}

/* ---------- Empty state within cards ---------- */
.alfr-progress-entries .alfr-empty-state {
    padding: 48px 24px;
    border: 2px dashed #DCE8E2;
    border-radius: 14px;
    margin: 20px;
    background: #FAFCFB;
}

.alfr-progress-entries .alfr-empty-state .empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E8F5F2 0%, #D0EFE8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.alfr-progress-entries .alfr-empty-state .empty-icon i {
    color: #0F766E;
    font-size: 30px;
    animation: alfr-empty-pulse 3s ease-in-out infinite;
}

@keyframes alfr-empty-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.7; }
}

/* ===== Modal polish ===== */

.alfr-modal-overlay {
    backdrop-filter: blur(4px);
}

.alfr-modal-container {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.alfr-modal-close {
    width: 38px;
    height: 38px;
}

.alfr-modal-footer .btn-primary {
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25);
}

.alfr-modal-footer .btn-primary:hover {
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.35);
}

/* ===== Modal Entrance Animation ===== */

.alfr-modal-overlay {
    animation: alfr-overlay-in 0.2s ease;
}

.alfr-modal-container {
    animation: alfr-modal-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes alfr-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes alfr-modal-in {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Closed state for modals hidden via display:none */
.alfr-modal-overlay[style*="display:none"],
.alfr-modal-overlay[style*="display: none"] {
    animation: none;
}

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .alfr-progress-path {
        gap: 8px;
    }
    .alfr-progress-path-item {
        padding: 8px 12px;
    }
    .alfr-progress-path-value {
        font-size: 13px;
    }
}

@media (max-width: 767.98px) {
    .alfr-progress-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .alfr-stat-card {
        padding: 20px 18px;
    }

    .alfr-stat-value {
        font-size: 28px;
    }

    .alfr-progress-section {
        padding: 16px 16px;
    }

    .alfr-progress-path {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 16px;
    }

    .alfr-progress-path-arrow {
        align-self: center;
        transform: rotate(90deg);
    }

    .alfr-progress-lesson {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }

    .alfr-progress-complete-banner {
        margin: 12px;
        padding: 28px 16px;
        font-size: 14px;
    }

    .alfr-progress-complete-banner i {
        font-size: 26px;
    }

    .alfr-progress-entries .alfr-empty-state {
        margin: 12px;
        padding: 36px 16px;
    }

    .alfr-step-progress-bar {
        margin: 0 16px 16px;
    }
}

/* ===== Reward Points page ===== */
.alfr-points-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 22px 24px;
    background: linear-gradient(135deg, #FFFDF5 0%, #FFF9E6 100%);
    border-bottom: 1px solid #F1E8CD;
}

.alfr-points-banner-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alfr-points-banner-icon i {
    font-size: 30px;
    color: #D97706;
}

.alfr-points-banner-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.alfr-points-banner-value {
    font-size: 34px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.15;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.alfr-points-banner-label {
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    letter-spacing: 0.02em;
}

.alfr-points-banner-sub {
    margin: 0;
    font-size: 13px;
    color: #9CA3AF;
    line-height: 1.5;
    max-width: 380px;
}

/* Log rows */
.alfr-points-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    border-bottom: 1px solid #F1F5F3;
}

.alfr-points-row:last-child {
    border-bottom: 0;
}

.alfr-points-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #F3F4F6;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.alfr-points-row--earn .alfr-points-row-icon {
    background: #FFFBEB;
    color: #D97706;
}

.alfr-points-row--redeem .alfr-points-row-icon {
    background: #FEF2F2;
    color: #DC2626;
}

.alfr-points-row--adjustment .alfr-points-row-icon {
    background: #F3F4F6;
    color: #6B7280;
}

.alfr-points-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.alfr-points-row-text {
    font-size: 14px;
    font-weight: 500;
    color: #1F2937;
    line-height: 1.45;
}

.alfr-points-row-date {
    font-size: 12px;
    color: #9CA3AF;
}

.alfr-points-row-amount {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: #16A34A;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.alfr-points-row--redeem .alfr-points-row-amount {
    color: #DC2626;
}

.alfr-points-row--adjustment .alfr-points-row-amount {
    color: #6B7280;
}

/* Pagination */
.alfr-points-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
}

.alfr-points-page-info {
    font-size: 13px;
    color: #6B7280;
}

/* ===== Milestones (child progress) ===== */
.alfr-milestones {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 24px;
}

.alfr-milestone-zone {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alfr-milestone-zone-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.alfr-milestone-zone-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #4B5563;
}

.alfr-milestone-zone-title i {
    font-size: 16px;
    color: #0F766E;
}

.alfr-milestone-count {
    padding: 2px 12px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #B45309;
    white-space: nowrap;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.alfr-milestone-pending-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    color: #B45309;
}

.alfr-milestone-pending-note i {
    font-size: 13px;
    color: #F59E0B;
}

.alfr-milestone-juzzes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.alfr-milestone-juzz {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
    color: #9CA3AF;
    font-size: 13px;
    font-weight: 700;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.alfr-milestone-juzz i {
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 9px;
    line-height: 1;
}

.alfr-milestone-juzz.is-verified {
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
    border-color: #F59E0B;
    color: #92400E;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.alfr-milestone-juzz.is-verified i {
    color: #D97706;
}

.alfr-milestone-juzz.is-pending {
    background: #FFFFFF;
    border: 1px dashed #FBBF24;
    color: #B45309;
}

.alfr-milestone-juzz.is-pending i {
    color: #F59E0B;
}

.alfr-milestone-suras {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.alfr-sura-chip {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
    color: #9CA3AF;
    font-size: 11px;
    font-weight: 700;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.alfr-sura-chip.is-completed {
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
    border-color: #FCD34D;
    color: #92400E;
}

.alfr-sura-chip.is-completed i {
    font-size: 10px;
    color: #D97706;
}

.alfr-milestone-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-top: 2px;
    font-size: 12px;
    color: #6B7280;
}

.alfr-milestone-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.alfr-milestone-legend-key {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
    flex-shrink: 0;
}

.alfr-milestone-legend-key.is-verified {
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
    border-color: #F59E0B;
}

.alfr-milestone-legend-key.is-pending {
    background: #FFFFFF;
    border: 1px dashed #FBBF24;
}

@media (max-width: 767.98px) {
    .alfr-milestones {
        padding: 16px 18px;
    }

    .alfr-milestone-juzz {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }

    .alfr-sura-chip {
        min-width: 30px;
        height: 30px;
    }
}

@media (max-width: 575.98px) {
    .alfr-milestone-juzz {
        width: 38px;
        height: 38px;
    }

    .alfr-milestone-juzzes {
        gap: 6px;
    }

    .alfr-sura-chip {
        min-width: 28px;
        height: 28px;
        font-size: 10px;
    }

    .alfr-milestone-suras {
        gap: 5px;
    }
}

/* ===== Section Rail (child progress dashboard) =====
   Section picker down the left of the child progress view: it shows one
   card at a time (the view's script does the switching, the links fall
   back to plain anchors without it). Sits in normal flow, neither sticky
   nor elevated, and is sized to its own list — no empty panel trailing
   below the last item. Below lg it turns into a tap-to-open tray above
   the cards (see the responsive block at the end of this section). */

/* Rail column + card column. The rail is wide enough for the longest
   section label ("Current Progress", ~118px) without ellipsis, and
   minmax(0, …) lets long lesson titles wrap instead of widening the
   grid. start (not stretch) keeps the rail the height of its own list,
   so a tall card beside it doesn't leave an empty white panel below
   the menu. */
.alfr-progress-layout {
    --alfr-rail-width: 260px;
    display: grid;
    grid-template-columns: var(--alfr-rail-width) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.alfr-progress-main {
    min-width: 0;
}

.alfr-section-nav {
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid #DCE8E2;
    border-radius: 16px;
}

/* Disclosure header — only rendered as a control in the mobile block. */
.alfr-section-nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #0F766E;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.alfr-section-nav-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%);
    color: #FFFFFF;
    font-size: 15px;
}

.alfr-section-nav-toggle-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alfr-section-nav-caret {
    flex-shrink: 0;
    font-size: 13px;
    color: #94A3B8;
    transition: transform 0.2s ease;
}

.alfr-section-nav.is-open .alfr-section-nav-caret {
    transform: rotate(180deg);
}

.alfr-section-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.alfr-section-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #4B5563;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.alfr-section-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #F1F5F9;
    color: #64748B;
    font-size: 16px;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.alfr-section-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alfr-section-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #F1F5F9;
    color: #64748B;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* Section accents, mirroring the stat-card palette. Keyed off the section
   class rather than :nth-child because the milestones entry is optional. */
.alfr-section-nav-link.is-tone-teal .alfr-section-nav-icon {
    background: #E8F5F2;
    color: #0F766E;
}

.alfr-section-nav-link.is-tone-green .alfr-section-nav-icon {
    background: #ECFDF5;
    color: #16A34A;
}

.alfr-section-nav-link.is-tone-gold .alfr-section-nav-icon {
    background: #FFFBEB;
    color: #D97706;
}

.alfr-section-nav-link.is-tone-violet .alfr-section-nav-icon {
    background: #F5F3FF;
    color: #7C3AED;
}

.alfr-section-nav-link:hover {
    background: #F3F8F7;
    color: #0F766E;
}

/* The open section, marked by the switcher in the view's inline script. */
.alfr-section-nav-link.is-active {
    background: #E8F5F2;
    color: #0B5D57;
}

.alfr-section-nav-link.is-active .alfr-section-nav-icon {
    background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 16px -8px rgba(15, 118, 110, 0.75);
}

.alfr-section-nav-link.is-active .alfr-section-nav-count {
    background: #FFFFFF;
    color: #0F766E;
}

.alfr-section-nav-link:focus-visible,
.alfr-section-nav-toggle:focus-visible {
    outline: 2px solid #0F766E;
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    /* Below lg the rail can't hold a column of its own: it becomes a
       full-width tray above the cards, collapsed behind its header until
       tapped. `.is-collapsible` is added by the view's script, so with JS
       off the list simply stays expanded and the header never appears. */
    .alfr-progress-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .alfr-section-nav {
        padding: 6px;
        border-radius: 14px;
    }

    .alfr-section-nav.is-collapsible .alfr-section-nav-toggle {
        display: flex;
    }

    .alfr-section-nav.is-collapsible .alfr-section-nav-list {
        display: none;
    }

    .alfr-section-nav.is-collapsible.is-open .alfr-section-nav-list {
        display: flex;
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid #EDF3F1;
    }
}


/* ---------- Quran lesson timer chip (unlocked count-up / took-duration) ---------- */
.alfr-progress-lesson-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums; /* no width jitter while ticking */
    padding: 3px 10px;
    border-radius: 999px;
    background: #F5F3FF;
    color: #6D28D9;
    border: 1px solid #DDD6FE;
    white-space: nowrap;
    flex-shrink: 0;
}

.alfr-progress-lesson-time i {
    font-size: 11px;
    line-height: 1;
    color: #8B5CF6;
}


/* ==========================================================================
   Child identity header
   Shared by the My Family child card (parts/my-family-child-card.php) and the
   Learning Progress child view — see parts/child-header.php.
   ========================================================================== */

.alfr-child-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alfr-child-header-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Gender badge, anchored to the shared 52px avatar */

.alfr-avatar-initial {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: #0F766E;
}

.alfr-child-identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Username reads as plain text beside the age here. Scoped so the shared
   .child-username chip look stays intact everywhere else. */
.alfr-child-identity .child-username {
    background: none;
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    color: #6B7280;
}

.alfr-child-subline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.alfr-child-subline-sep {
    color: #A8A7A3;
}

.alfr-child-edit-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 10px;
    color: #6B7280;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.alfr-child-edit-btn:hover {
    background: #E8F5F2;
    border-color: #DCE8E2;
    color: #0F766E;
}

/* Level pill · sub-level/step · points chip */
.alfr-child-track-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 8px;
}

.alfr-level-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #CDE2FB;
    color: #184F95;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.alfr-level-pill i {
    font-size: 14px;
}

/* Sub-level and step crumbs. Same pill geometry as .alfr-level-pill so the
   trail reads as one component instead of a pill followed by loose text; the
   blue level pill, the chevrons and the 500/600 weight split carry the
   hierarchy. Surface matches .child-username — the card's other grey chip. */
.alfr-child-track {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: #F3F4F6;
    color: #3F4A5A;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.alfr-child-track i {
    font-size: 12px;
}

/* Names what the pill and crumbs beside it are: where the child is now, not a
   path already walked. */
.alfr-child-track-label {
    margin-right: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #A8A7A3;
}

/* Hierarchy: level › sub-level › step */
.alfr-child-track-sep {
    color: #B9BAB6;
    font-size: 11px;
}

.alfr-child-points-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: #FBDEA7;
    color: #734500;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
}

a.alfr-child-points-chip:hover {
    background: #F7CE86;
    color: #734500;
}

.alfr-child-points-chip i {
    font-size: 12px;
}

/* Sections. The top border is the hairline divider under whatever sits above;
   the header block itself carries none, so a card that ends on the identity
   block never draws a stray line. */
.alfr-child-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #E6E6E6;
}

.alfr-child-section-label {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #A8A7A3;
    letter-spacing: 0.02em;
}

/* Desktop: compact inline chips, no chevrons */
.alfr-child-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.alfr-child-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 32px;
    padding: 0 12px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    color: #1F2937;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.alfr-child-action:hover {
    background: #F7F9F8;
    border-color: #DCE8E2;
    color: #0F766E;
}

.alfr-child-action i {
    font-size: 13px;
    color: #6B7280;
}

.alfr-child-action:hover i {
    color: #0F766E;
}

/* Only shown once the actions become full-width rows (≤575.98px) */
.alfr-child-action-chevron {
    display: none;
}

/* ==========================================================================
   Child card — phone layout
   ========================================================================== */

@media (max-width: 767.98px) {
    .alfr-child-header-top {
        gap: 12px;
    }


    .alfr-child-edit-btn {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .alfr-level-pill,
    .alfr-child-points-chip {
        padding: 3px 9px;
        font-size: 11px;
    }

    .alfr-child-track {
        font-size: 12px;
    }

    .alfr-child-action {
        height: 30px;
        padding: 0 10px;
        font-size: 11px;
    }

}

@media (max-width: 575.98px) {
    .alfr-child-header {
        gap: 8px;
    }

    .alfr-child-header-top {
        gap: 10px;
    }


    .alfr-avatar-initial {
        font-size: 17px;
    }

    /* Beats the .child-username rule further up on specificity */
    .alfr-child-identity .child-username {
        font-size: 12px;
    }

    .alfr-child-edit-btn {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .alfr-child-track-row {
        gap: 6px 8px;
    }

    .alfr-child-track {
        padding: 2px 8px;
        font-size: 11px;
    }

    .alfr-child-track-label {
        font-size: 10px;
    }

    /* Chip reads "82" — the star and the number say enough at this width */
    .alfr-points-word {
        display: none;
    }

    .alfr-child-section {
        margin-top: 12px;
        padding-top: 10px;
    }

    .alfr-child-section-label {
        margin-bottom: 6px;
        font-size: 11px;
    }

    /* Account actions become full-width rows with a trailing chevron */
    .alfr-child-actions {
        flex-direction: column;
        gap: 8px;
    }

    .alfr-child-action {
        width: 100%;
        height: 44px;
        padding: 0 12px;
        justify-content: flex-start;
        gap: 10px;
        border-radius: 10px;
        font-size: 14px;
    }

    .alfr-child-action i {
        font-size: 16px;
    }

    /* After .alfr-child-action i, so it wins despite matching one element less */
    .alfr-child-action-chevron {
        display: inline-flex;
        margin-left: auto;
        font-size: 14px;
        color: #9CA3AF;
        order: 2;
    }

    /* Magic login link: field on its own line, buttons below it */
    .child-magic-link-row {
        flex-wrap: wrap;
    }

    .alfr-magic-link-input {
        flex: 1 1 100%;
        height: 36px;
        font-size: 12px;
    }

    .alfr-magic-link-btn {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 400px) {

    .alfr-child-action {
        height: 42px;
        font-size: 13px;
    }
}

/* ==========================================================================
   Lesson plan — [alfr_lesson_plan]
   ========================================================================== */

.alfr-plan-card {
    padding: 18px 20px;
}

/* Sub-level the plan belongs to: level pill › sub-level, then the tally */
.alfr-plan-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.alfr-plan-crumb-sep {
    color: #C4C4C0;
    font-size: 12px;
}

.alfr-plan-course {
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
}

.alfr-plan-summary {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6B7280;
}

.alfr-plan-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #E6E6E6;
    font-size: 12px;
    color: #6B7280;
}

.alfr-plan-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.alfr-plan-legend-item.is-completed i {
    color: #16A34A;
}

.alfr-plan-legend-item.is-pending i {
    color: #C4C4C0;
    font-size: 10px;
}

/* One interest's share of the sub-level */
.alfr-plan-interest-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.alfr-plan-interest-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
}

.alfr-plan-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: #E6F4F1;
    color: #0F766E;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}

.alfr-plan-books {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.alfr-plan-books-label {
    margin-right: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #A8A7A3;
    letter-spacing: 0.02em;
}

.alfr-plan-book-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 999px;
    color: #1F2937;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.alfr-plan-interest-empty {
    margin: 12px 0 0;
    font-size: 13px;
    color: #6B7280;
}

/* A step, in the order the child works through the sub-level */
.alfr-plan-step {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #E6E6E6;
}

.alfr-plan-step-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.alfr-plan-step-name {
    font-size: 13px;
    font-weight: 600;
    color: #1F2937;
}

.alfr-plan-step-state {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}

.alfr-plan-step.is-completed .alfr-plan-step-state {
    background: #DCFCE7;
    color: #15803D;
}

.alfr-plan-step.is-current .alfr-plan-step-state {
    background: #E6F4F1;
    color: #0F766E;
}

.alfr-plan-step.is-ahead .alfr-plan-step-state {
    background: #F3F4F6;
    color: #6B7280;
}

.alfr-plan-step.is-ahead .alfr-plan-step-name {
    color: #4B5563;
}

.alfr-plan-lessons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.alfr-plan-lesson {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #1F2937;
}

.alfr-plan-lesson i {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 12px;
}

.alfr-plan-lesson.is-completed i {
    color: #16A34A;
}

.alfr-plan-lesson.is-completed .alfr-plan-lesson-title {
    color: #6B7280;
}

.alfr-plan-lesson.is-pending i {
    color: #C4C4C0;
}

/* Rearranging the plan. Everything here styles a row or a step that the
   lesson-plan script has made draggable, so a page without it — or a plan
   with nothing left to move — renders exactly as before. */
.alfr-plan-message {
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    background: #F0FDF4;
    color: #0F766E;
    font-size: 13px;
}

.alfr-plan-message.is-error {
    border-color: #FECACA;
    background: #FEF2F2;
    color: #B91C1C;
}

.alfr-plan-lesson.is-movable {
    cursor: grab;
}

.alfr-plan-lesson.is-dragging {
    opacity: 0.45;
}

.alfr-plan-lesson.is-saving {
    opacity: 0.6;
}

/* Pushed to the end of the row, so it cannot shift the tick column that
   completed and pending lessons share. */
.alfr-plan-lesson .alfr-plan-lesson-handle {
    margin-left: auto;
    font-size: 13px;
    color: #C4C4C0;
}

.alfr-plan-lesson.is-movable:hover .alfr-plan-lesson-handle {
    color: #0F766E;
}

/* The step the lesson being dragged belongs on — the only one that will
   accept it, highlighted so the drop has somewhere to aim. */
.alfr-plan-step.is-drop-target {
    border-top-color: #0F766E;
    border-radius: 8px;
    background: #F0FDF4;
}

@media (max-width: 575.98px) {
    .alfr-plan-card {
        padding: 14px;
    }

    .alfr-plan-course,
    .alfr-plan-interest-name {
        font-size: 15px;
    }
}

/* ==================================================================
   Lesson tree — clean card list
   ================================================================== */

.alfr-step-card {
    border: 1px solid #E7EAE7;
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
}

.alfr-step-card:last-child {
    margin-bottom: 0;
}

.alfr-step-card.is-current {
    border-color: #BFD9D3;
}

.alfr-step-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: #FAFBF9;
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.alfr-step-card-header.is-open {
    background: #F2F8F6;
    cursor: default;
}

.alfr-step-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: #16A34A;
}

.alfr-step-check i,
.alfr-step-check i::before {
    line-height: 1;
    vertical-align: baseline;
}

.alfr-step-check.is-ahead {
    color: #C6CCC6;
}

.alfr-step-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0F766E;
    color: #FFFFFF;
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

.alfr-step-now i,
.alfr-step-now i::before {
    line-height: 1;
    vertical-align: baseline;
}

.alfr-step-name {
    font-weight: 600;
    color: #1C2023;
}

.alfr-step-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #0F766E;
    color: #FFFFFF;
    flex-shrink: 0;
}

.alfr-step-meta {
    margin-left: auto;
    font-size: 13px;
    color: #7A827C;
    flex-shrink: 0;
}

.alfr-step-caret {
    font-size: 13px;
    color: #9AA19B;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.alfr-step-card.is-open > .alfr-step-card-header .alfr-step-caret {
    transform: rotate(180deg);
}

.alfr-step-card-body {
    display: none;
    border-top: 1px solid #EFF1EF;
}

.alfr-step-card-body.is-open {
    display: block;
}

/* ---------- Category & interest headings ---------- */
.alfr-category {
    padding: 4px 0;
}

.alfr-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 6px;
    border-top: 1px solid #EFF1EF;
}

.alfr-category:first-child .alfr-category-header {
    border-top: none;
}

.alfr-category-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6B736F;
}

.alfr-category-count {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    background: #F0F2F0;
    color: #6B736F;
}

.alfr-interest-header {
    padding: 6px 16px 2px 52px;
}

.alfr-interest-label {
    font-size: 13px;
    font-weight: 600;
    color: #4A524E;
}

/* ---------- Lesson row ---------- */
.alfr-lesson-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid #F2F4F2;
}

.alfr-lesson-row:last-child {
    border-bottom: none;
}

.alfr-lesson-state {
	/* align-self: flex-start; */
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	/* display: inline-flex; */
	align-items: center;
	justify-content: center;
	font-size: 18px;
	/* line-height: 1; */
	color: #C6CCC6;
}

.alfr-lesson-state i,
.alfr-lesson-state i::before {
    line-height: 1;
    vertical-align: baseline;
}

.alfr-lesson-row.is-done .alfr-lesson-state {
    color: #16A34A;
}

.alfr-lesson-row.is-current .alfr-lesson-state {
    color: #0F766E;
}

.alfr-lesson-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.alfr-lesson-title {
    font-size: 15px;
    font-weight: 600;
    color: #23282B;
    line-height: 22px;
}

.alfr-lesson-row.is-done .alfr-lesson-title {
    color: #8A918C;
    text-decoration: line-through;
    text-decoration-color: #C9CDC9;
}

.alfr-lesson-row.is-current .alfr-lesson-title {
    color: #0F766E;
}

.alfr-lesson-sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: #9AA19B;
}

.alfr-lesson-subtitle {
    font-weight: 500;
    color: #7A827C;
}

.alfr-lesson-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.alfr-lesson-done-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    text-align: right;
}

.alfr-lesson-done {
    font-size: 13px;
    font-weight: 500;
    color: #16A34A;
}

/* The two clocks a done row reports: page time, then time since unlocked. */
.alfr-lesson-durations {
    font-size: 12px;
    color: #9AA19B;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.alfr-lesson-next {
    font-size: 13px;
    color: #9AA19B;
}

.alfr-lesson-now {
    font-size: 13px;
    font-weight: 600;
    color: #0F766E;
}

/* A row waiting on an earlier lesson of its own group: the title recedes so the
   block's open row is the one the eye lands on. */
.alfr-lesson-locked {
    font-size: 13px;
    color: #B4BAB4;
}

.alfr-lesson-row.is-locked .alfr-lesson-title {
    color: #9AA19B;
}

.alfr-lesson-row.is-locked .alfr-lesson-state {
    color: #C9CDC9;
}

.alfr-lesson-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #5B6260;
    font-variant-numeric: tabular-nums;
}

/* ---------- Steps ahead summary ---------- */
.alfr-step-ahead {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 4px 0;
    font-size: 13px;
    color: #8A918C;
}

.alfr-step-ahead i {
    color: #C2C8C2;
}

@media (max-width: 575.98px) {
    .alfr-lesson-row {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .alfr-lesson-main {
        flex-basis: calc(100% - 46px);
    }

    .alfr-lesson-right {
        margin-left: 34px;
        max-width: calc(100% - 34px);
    }

    .alfr-step-meta {
        margin-left: 0;
    }
}

/* Pending lesson completion reviews: the guardian's queue. A row pairs the
   lesson and its requested date with an approve button and a reject button
   carrying an optional reason. */
.alfr-section-nav-link.is-tone-red .alfr-section-nav-icon {
    background: #FEF2F2;
    color: #DC2626;
}

.alfr-review-requests {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px;
}

.alfr-review-request {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #FFFFFF;
}

.alfr-review-request-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 240px;
    min-width: 0;
}

.alfr-review-request-context {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6B736F;
}

.alfr-review-request-title {
    font-weight: 600;
    color: #111827;
    overflow-wrap: anywhere;
}

.alfr-review-request-meta {
    font-size: 13px;
    color: #6B7280;
}

.alfr-review-request-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
}

.alfr-review-request-actions form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}