/* Student zero-data presentation. Never styles populated cards or public/auth views. */
#app-page {
    --empty-surface: #151e2f;
    --empty-border: rgba(120, 145, 190, .18);
    --empty-text: #f4f7fc;
    --empty-muted: #9aa7ba;
    --empty-accent: #436fdf; /* 4.59:1 with white action text. */
    --empty-accent-end: #665fe8;
    --empty-icon: #8faeff;
}
body:is(.light-theme, .light-mode, [data-theme="light"]) #app-page {
    --empty-surface: var(--surface, #ffffff);
    --empty-border: #dce3ee;
    --empty-text: #172033;
    --empty-muted: #647086;
    --empty-icon: #4264ca;
}

/* The repeated app ID deliberately outranks legacy two-ID empty-state rules
   (notably #tasks #tasks-list). It never targets populated or public views. */
body #app-page#app-page .empty-state.student-empty-state {
    box-sizing: border-box;
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: none;
    min-width: 0;
    min-height: 250px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center;
    gap: 0 !important;
    margin: 0 !important;
    padding: 40px 44px !important;
    background: var(--empty-surface) !important;
    border: 1px solid var(--empty-border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: none !important;
    color: var(--empty-text) !important;
    text-align: center;
    overflow-wrap: anywhere;
    animation: none;
}
body #app-page#app-page .student-empty-state::before,
body #app-page#app-page .student-empty-state::after,
body #app-page#app-page .student-empty-state .empty-state__title::after {
    content: none !important;
    display: none !important;
}
body #app-page#app-page .student-empty-state .empty-state__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    margin: 0 0 20px;
    background: rgba(77, 125, 243, .1);
    border: 1px solid rgba(77, 125, 243, .2);
    border-radius: 16px;
    color: var(--empty-icon);
    box-shadow: none;
}
body #app-page#app-page .student-empty-state .empty-state__icon svg {
    display: block;
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: none;
}
body #app-page#app-page .student-empty-state .empty-state__title {
    max-width: 560px !important;
    margin: 0 !important;
    color: var(--empty-text) !important;
    font-size: 23px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    letter-spacing: -.025em;
}
body #app-page#app-page .student-empty-state .empty-state__description {
    max-width: 520px;
    margin: 9px 0 0;
    color: var(--empty-muted);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}
body #app-page#app-page .student-empty-state .empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 100%;
    margin-top: 24px;
}
body #app-page#app-page .student-empty-state .empty-state__button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    max-width: 100%;
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: linear-gradient(110deg, var(--empty-accent), var(--empty-accent-end));
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    cursor: pointer;
    box-shadow: none;
    transition: filter 180ms ease, border-color 180ms ease;
}
body #app-page#app-page .student-empty-state .empty-state__button--secondary {
    background: transparent;
    color: var(--empty-text);
    border-color: rgba(140, 160, 200, .4);
}
body #app-page#app-page .student-empty-state .empty-state__button:hover { filter: brightness(.96); }
body #app-page#app-page .student-empty-state .empty-state__button:focus-visible {
    outline: 3px solid var(--empty-icon);
    outline-offset: 4px;
}
body #app-page#app-page .student-empty-state.empty-state--embedded {
    min-height: 190px !important;
    padding: 18px 24px !important;
    background: transparent !important;
    border: 0 !important;
}
body #app-page#app-page .student-empty-state.empty-state--compact {
    min-height: 170px !important;
    padding: 24px !important;
    background: transparent !important;
    border: 0 !important;
}
body #app-page#app-page .student-empty-state:is(.empty-state--compact, .empty-state--embedded) .empty-state__title {
    font-size: 19px !important;
}
body #app-page#app-page .student-empty-state.empty-state--embedded .empty-state__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
}
body #app-page#app-page .student-empty-state.empty-state--embedded .empty-state__actions { margin-top: 18px; }
body #app-page#app-page .gp-empty-subtask-icon svg {
    width: 24px; height: 24px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
body #app-page#app-page .student-empty-state.empty-state--compact .empty-state__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
}
/* Empty evaluation card: header and copy share the same left content edge. */
body #app-page#app-page .dashboard-next-evaluation.is-empty {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "header" "copy" !important;
}
body #app-page#app-page .dashboard-next-evaluation.is-empty > .student-empty-state {
    grid-area: copy;
    align-items: flex-start !important;
    padding: 0 !important;
    min-height: 0 !important;
    text-align: left;
}
body #app-page#app-page .dashboard-next-evaluation.is-empty .empty-state__actions {
    align-self: flex-start;
    justify-content: flex-start;
}

/* A zero-data CTA lives inside its empty state; filtered results keep headers. */
#app-page :is(#subjects, #tasks, #calendar, #evaluations, #grades, #attendance, #backpack):has([data-empty-kind="initial"]) > .section-header button,
#app-page #goals-projects-content:has(> [data-empty-kind="initial"]) > .gp-header .gp-header-actions,
#app-page .gp-stages-title:has(+ .gp-stage-list > .student-empty-state) > button,
#app-page #backpack:has([data-empty-kind="initial"]) .backpack-toolbar button[onclick="addResourceUI()"],
#app-page #calendar:has([data-empty-kind="initial"]) .calendar-sync-card > button {
    display: none !important;
}

/* Flat sidebar icon treatment only; preserve link backgrounds and active states. */
#app-page .sidebar .sidebar-icon,
#app-page .sidebar .sidebar-icon svg {
    box-shadow: none !important;
    filter: none !important;
}

@media (max-width: 767px) {
    #app-page #goals-projects-content:has(> [data-empty-kind="initial"]) > .gp-filters {
        flex-wrap: wrap;
        overflow: visible;
    }
    body #app-page#app-page .empty-state.student-empty-state {
        padding: 30px 28px !important;
        min-height: 240px !important;
    }
    body #app-page#app-page .student-empty-state .empty-state__icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }
    body #app-page#app-page .student-empty-state .empty-state__title { font-size: 20px !important; }
    body #app-page#app-page .student-empty-state .empty-state__actions { flex-direction: column; width: 100%; }
    body #app-page#app-page .student-empty-state .empty-state__button { width: 100%; }
    body #app-page#app-page .student-empty-state:is(.empty-state--compact, .empty-state--embedded) {
        min-height: 170px !important;
        padding: 26px 16px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    #app-page .student-empty-state, #app-page .student-empty-state * { animation: none !important; transition: none !important; }
}

/* Light sidebar: retain crisp glyphs on the existing colored tiles, without a halo. */
body:is(.light-theme, .light-mode, [data-theme="light"]) #app-page .sidebar .sidebar-icon {
    color: #fff !important;
}
body:is(.light-theme, .light-mode, [data-theme="light"]) #app-page .sidebar .theme-toggle {
    box-shadow: none !important;
}