/**
 * Masar Design System — shared utilities
 *
 * WHY: Task First + Consistency Before Creativity + VOC phone-first.
 * Load AFTER masar-page-hero-stats-unified.css (see teacher/student layouts).
 * Opt-in: class="masar-ds" on page root (debt-gated). Brand/Auth/JS/routes untouched.
 *
 * Sections:
 *   S1-A/B/C — UX-001 / UX-002 / UX-003
 *   S2-A/C   — UX-004 / UX-006
 *   S2.5     — Stabilization (regressions / paint / responsive gaps only)
 *   S3-A     — UX-008 pilot (Student Attendance list; not teacher mark UI)
 *   S3-B     — UX-008 consumer #2 (Teacher Tasks; tab-content scoped to .tasks-container)
 */

/* ─── Tokens ─── */
:root {
    --masar-elev-0: none;
    --masar-elev-1: 0 1px 3px rgba(21, 49, 75, 0.08);
    --masar-elev-2: 0 4px 12px rgba(21, 49, 75, 0.12);

    --masar-space-xs: 0.25rem;
    --masar-space-s: 0.5rem;
    --masar-space-m: 0.75rem;
    --masar-space-l: 1rem;
    --masar-space-xl: 1.5rem;
    --masar-space-section: 2rem;
    --masar-space-heading: 1rem;

    --masar-radius-control: 0.5rem;
    --masar-radius-surface: 0.75rem;

    --masar-transition-fast: 0.15s ease;
    --masar-transition: 0.2s ease;

    --masar-focus-ring: 0 0 0 3px rgba(255, 153, 0, 0.35);
    --masar-focus-outline: 2px solid var(--masar-brand-orange, #ff9900);
}

.masar-elev-0 { box-shadow: var(--masar-elev-0) !important; }
.masar-elev-1 { box-shadow: var(--masar-elev-1) !important; }
.masar-elev-2 { box-shadow: var(--masar-elev-2) !important; }

.masar-space-section { margin-block: var(--masar-space-section); }
.masar-space-heading { margin-block-end: var(--masar-space-heading); }
.masar-gap-s { gap: var(--masar-space-s) !important; }
.masar-gap-m { gap: var(--masar-space-m) !important; }
.masar-gap-l { gap: var(--masar-space-l) !important; }

/* Focus / hover / reduced motion (shared hygiene) */
.masar-ds a:focus-visible,
.masar-ds button:focus-visible,
.masar-ds .btn:focus-visible,
.masar-ds .form-control:focus-visible,
.masar-ds .form-select:focus-visible,
.masar-ds .tab-btn:focus-visible,
.masar-ds .msl-btn:focus-visible,
.masar-ds .sidebar-link:focus-visible {
    outline: var(--masar-focus-outline);
    outline-offset: 2px;
    box-shadow: var(--masar-focus-ring);
}

.masar-ds .btn,
.masar-ds .msl-btn,
.masar-ds .tab-btn,
.masar-ds .btn-soft {
    transition: background-color var(--masar-transition-fast),
                border-color var(--masar-transition-fast),
                color var(--masar-transition-fast),
                box-shadow var(--masar-transition-fast);
}

.masar-ds .btn:hover,
.masar-ds .msl-btn:hover,
.masar-ds .tab-btn:hover,
.masar-ds .btn-soft:hover,
.masar-ds .stat-card:hover,
.masar-ds .msl-card:hover {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .masar-ds,
    .masar-ds *,
    .masar-ds *::before,
    .masar-ds *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .masar-ds .masar-page-hero,
    .masar-ds .stat-card,
    .masar-ds .msl-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   S1-A · UX-001 — Quieter chrome before the task (Audit + VOC crowding)
   ========================================================================== */

/* Kill entrance opacity traps from unified hero/stats (Task visibility) */
.masar-ds .masar-page-hero,
.masar-ds .page-header.masar-page-hero,
.masar-ds .masar-stats-unified .stat-card,
.masar-ds .quick-stats .stat-card,
.masar-ds .stats-grid .stat-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.masar-ds .masar-page-hero,
.masar-ds .page-header.masar-page-hero {
    box-shadow: var(--masar-elev-1);
    border-radius: var(--masar-radius-surface);
    padding: var(--masar-space-l) var(--masar-space-xl);
    margin-bottom: var(--masar-space-l);
    min-height: 0;
}

.masar-ds .masar-page-hero::before {
    opacity: 0.12;
    width: 120px;
    height: 120px;
}

.masar-ds .page-header:not(.masar-page-hero) {
    box-shadow: var(--masar-elev-1);
    border-radius: var(--masar-radius-surface);
    margin-bottom: var(--masar-space-l);
}

.masar-ds .section-header {
    margin-bottom: var(--masar-space-m);
    gap: var(--masar-space-s);
}

.masar-ds .filter-row,
.masar-ds .quick-actions-bar {
    box-shadow: var(--masar-elev-0);
    border: 1px solid rgba(21, 49, 75, 0.08);
    border-radius: var(--masar-radius-surface);
    padding: var(--masar-space-m);
    margin-bottom: var(--masar-space-m);
}

/* KPI strip — soft elevation + readable icons (match masar-page-hero-stats-unified) */
.masar-ds .masar-stats-unified,
.masar-ds .quick-stats.masar-stats-unified,
.masar-ds .stats-grid.masar-stats-unified {
    gap: var(--masar-space-m);
    margin-bottom: var(--masar-space-l);
}

.masar-ds .masar-stats-unified .stat-card,
.masar-ds .stat-card {
    box-shadow: 0 4px 18px rgba(21, 49, 75, 0.1) !important;
    border: 1px solid rgba(255, 153, 0, 0.12);
    border-radius: 18px;
    background: #fff;
}

.masar-ds .masar-stats-unified .stat-card::before,
.masar-ds .stat-card::before {
    display: none !important; /* remove decorative accent bars / glows */
}

.masar-ds .masar-stats-unified .stat-card:hover,
.masar-ds .stat-card:hover {
    box-shadow: 0 8px 24px rgba(21, 49, 75, 0.14) !important;
    transform: none !important;
}

.masar-ds .masar-stats-unified .stat-card:hover .stat-icon,
.masar-ds .stat-card:hover .stat-icon,
.masar-ds .masar-stats-unified .stat-card:hover .stat-number,
.masar-ds .masar-stats-unified .stat-card:hover .stat-value {
    transform: none !important;
}

.masar-ds .masar-stats-unified .stat-card__inner,
.masar-ds .stat-card .stat-card__inner {
    padding: var(--masar-space-m) var(--masar-space-l);
}

.masar-ds .masar-stats-unified .stat-number,
.masar-ds .masar-stats-unified .stat-value,
.masar-ds .stat-card .stat-number {
    font-size: clamp(1.55rem, 4vw, 2rem) !important;
    line-height: 1.15;
}

.masar-ds .masar-stats-unified .stat-label,
.masar-ds .masar-stats-unified .stat-title,
.masar-ds .stat-card .stat-label,
.masar-ds .stat-card__eyebrow {
    font-size: 0.9rem !important;
    opacity: 0.9;
}

.masar-ds .masar-stats-unified .stat-icon,
.masar-ds .stat-card .stat-icon {
    width: 54px !important;
    height: 54px !important;
    font-size: 1.35rem !important;
    box-shadow: 0 6px 18px rgba(21, 49, 75, 0.22);
}

.masar-ds .attendance-stats-bar {
    box-shadow: var(--masar-elev-0);
    border: 1px solid rgba(21, 49, 75, 0.08);
    gap: var(--masar-space-s);
    padding: var(--masar-space-s);
    margin-bottom: var(--masar-space-m);
}

.masar-ds .attendance-stats-bar .stat-item-box {
    box-shadow: none;
    border-radius: var(--masar-radius-control);
    padding: var(--masar-space-s) var(--masar-space-m);
}

.masar-ds .attendance-stats-bar .stat-item-box:hover {
    box-shadow: none;
    transform: none;
}

.masar-ds .section-card,
.masar-ds .main-grid .section-card {
    box-shadow: 0 8px 24px rgba(21, 49, 75, 0.12);
    border-radius: 18px;
    border: 1px solid rgba(21, 49, 75, 0.08);
}

.masar-ds .dashboard-container {
    display: flex;
    flex-direction: column;
    gap: var(--masar-space-l);
}

.masar-ds .dashboard-container > .masar-page-hero,
.masar-ds .dashboard-container > .page-header,
.masar-ds .dashboard-container > .masar-stats-unified,
.masar-ds .dashboard-container > .quick-stats,
.masar-ds .dashboard-container > .stats-grid {
    margin-bottom: 0;
}

.masar-ds.attendance-container .page-header {
    padding: var(--masar-space-m) var(--masar-space-l);
}

.masar-ds.attendance-container .page-header h1 {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    margin-bottom: var(--masar-space-xs);
}

.masar-ds.attendance-container .tabs-container {
    margin-bottom: var(--masar-space-m);
    gap: var(--masar-space-s);
}

.masar-ds.attendance-container .filter-grid {
    gap: var(--masar-space-m);
}

.masar-ds.attendance-container .tab-btn.active {
    box-shadow: var(--masar-elev-0);
}

.masar-ds .scroll-indicator {
    display: none !important; /* decorative chrome */
}

/* ==========================================================================
   S1-B · UX-002 — Phone-first (VOC 14/15) — denser chrome @ <576px
   ========================================================================== */
@media (max-width: 575.98px) {
    .masar-ds .masar-page-hero,
    .masar-ds .page-header.masar-page-hero {
        padding: var(--masar-space-m);
        border-radius: var(--masar-radius-control);
    }

    .masar-ds .masar-page-hero__title,
    .masar-ds .page-header.masar-page-hero h1,
    .masar-ds .page-header h1 {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .masar-ds .masar-page-hero__lead,
    .masar-ds .page-header.masar-page-hero .masar-page-hero__lead {
        font-size: 0.85rem;
    }

    .masar-ds .masar-stats-unified,
    .masar-ds .quick-stats.masar-stats-unified,
    .masar-ds .stats-grid.masar-stats-unified {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--masar-space-s);
        margin-bottom: var(--masar-space-m);
    }

    /* Odd last KPI: avoid orphan half-row (S2.5 responsive) */
    .masar-ds .masar-stats-unified .stat-card:last-child:nth-child(odd),
    .masar-ds .quick-stats.masar-stats-unified .stat-card:last-child:nth-child(odd),
    .masar-ds .stats-grid.masar-stats-unified .stat-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .masar-ds .masar-stats-unified .stat-card__inner,
    .masar-ds .stat-card .stat-card__inner {
        padding: var(--masar-space-s);
    }

    .masar-ds .masar-stats-unified .stat-number,
    .masar-ds .masar-stats-unified .stat-value,
    .masar-ds .stat-card .stat-number {
        font-size: 1.35rem !important;
    }

    .masar-ds .masar-stats-unified .stat-icon,
    .masar-ds .stat-card .stat-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.15rem !important;
    }

    .masar-ds .filter-row,
    .masar-ds .quick-actions-bar {
        padding: var(--masar-space-s);
    }

    .masar-ds .dashboard-container {
        gap: var(--masar-space-m);
    }

    .masar-ds.attendance-container .page-header {
        padding: var(--masar-space-s) var(--masar-space-m);
    }

    .masar-ds.attendance-container .section-header {
        margin-bottom: var(--masar-space-s);
    }

    .masar-ds.attendance-container .tabs-container .tab-btn {
        min-height: 44px;
        padding: var(--masar-space-s) var(--masar-space-m);
        font-size: 0.875rem;
    }

    .masar-ds.attendance-container .filter-item .form-control,
    .masar-ds.attendance-container .filter-item .form-select,
    .masar-ds.attendance-container .filter-actions .btn {
        min-height: 44px;
    }
}

/* ==========================================================================
   S1-C · UX-003 — Primary task prominence (visual hierarchy only)
   ========================================================================== */

/* Dashboards @ phone: content/work blocks before KPI strip (DOM unchanged) */
@media (max-width: 575.98px) {
    .masar-ds .dashboard-container > .page-header,
    .masar-ds .dashboard-container > .masar-page-hero {
        order: 0;
    }

    .masar-ds .dashboard-container > .main-grid {
        order: 1;
    }

    .masar-ds .dashboard-container > .masar-stats-unified,
    .masar-ds .dashboard-container > .quick-stats,
    .masar-ds .dashboard-container > .stats-grid {
        order: 2;
    }
}

/* Attendance: mark path weight — list/search before secondary tools feel */
.masar-ds.attendance-container .search-box-container .compact-search-input {
    min-height: 44px;
    border-radius: var(--masar-radius-control);
}

.masar-ds.attendance-container .section-title {
    font-size: 1rem;
    font-weight: 600;
}

/* Landing: primary CTA already first in hero flow — keep hover calm only */
.masar-ds.ms-landing-body .msl-btn--primary {
    box-shadow: var(--masar-elev-1);
}

/* ==========================================================================
   S2-A · UX-004 — Existing notifications: visual emphasis only (no new product)
   VOC ~80% dissatisfied → badge/unread hierarchy; backend redesign deferred
   ========================================================================== */

.masar-ds .notifications-list {
    display: flex;
    flex-direction: column;
    gap: var(--masar-space-m);
}

/* Unread float above read without changing DOM/API */
.masar-ds .notification-card.notification-unread {
    order: -1;
    border-inline-start: 3px solid var(--masar-brand-orange, #ff9900);
    box-shadow: var(--masar-elev-1);
    background: #fff;
}

.masar-ds .notification-card.notification-read {
    order: 0;
    opacity: 0.88;
    border-inline-start: 3px solid transparent;
    box-shadow: var(--masar-elev-0);
}

.masar-ds .notification-badge-new {
    background: rgba(255, 153, 0, 0.16) !important;
    color: var(--masar-brand-navy, #15314b) !important;
    border: 1px solid rgba(255, 153, 0, 0.35);
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Unread KPI card (when present) — slightly stronger than other stats */
.masar-ds .notifications-stats-wrap .stat-card:nth-child(2) {
    border-color: rgba(255, 153, 0, 0.35);
}

/* Floating bg on notification pages uses body::before (same as other pages) */

@media (max-width: 575.98px) {
    .masar-ds .notification-card {
        padding: var(--masar-space-m);
    }

    .masar-ds .notification-title {
        font-size: 0.95rem;
    }

    /* Phone: hero → filters → list → KPI chrome */
    .masar-ds.student-notifications-page > .notifications-hero,
    .masar-ds.teacher-notifications-page > .notifications-hero {
        order: 0;
    }

    .masar-ds.student-notifications-page > .filters-section,
    .masar-ds.teacher-notifications-page > .filters-section {
        order: 1;
    }

    .masar-ds.student-notifications-page > .notifications-list,
    .masar-ds.teacher-notifications-page > .notifications-list {
        order: 2;
    }

    .masar-ds.student-notifications-page > .masar-chrome-toggle,
    .masar-ds.teacher-notifications-page > .masar-chrome-toggle,
    .masar-ds.student-notifications-page > .masar-chrome-collapse,
    .masar-ds.teacher-notifications-page > .masar-chrome-collapse {
        order: 3;
    }
}

/* ==========================================================================
   S2-C · UX-006 — Task execution pages (density via same system; no logic)
   ========================================================================== */

@media (max-width: 575.98px) {
    .masar-ds.tasks-container,
    .masar-ds.grades-container {
        display: flex;
        flex-direction: column;
    }

    .masar-ds.tasks-container > .page-header,
    .masar-ds.tasks-container > .masar-page-hero,
    .masar-ds.grades-container > .page-header,
    .masar-ds.grades-container > .masar-page-hero {
        order: 0;
    }

    .masar-ds.tasks-container > .tasks-toolbar,
    .masar-ds.tasks-container > .tasks-tabs,
    .masar-ds.tasks-container > .filters-section,
    .masar-ds.grades-container > .grades-export-bar,
    .masar-ds.grades-container > .filters-section {
        order: 1;
    }

    .masar-ds.tasks-container > .tasks-list,
    /* Teacher Tasks only: Student Tasks uses .tasks-list; .tab-content is not used elsewhere under .tasks-container */
    .masar-ds.tasks-container > .tab-content,
    .masar-ds.grades-container > .grades-courses {
        order: 2;
    }

    .masar-ds.tasks-container > .masar-chrome-toggle,
    .masar-ds.tasks-container > .masar-chrome-collapse,
    .masar-ds.grades-container > .masar-chrome-toggle,
    .masar-ds.grades-container > .masar-chrome-collapse {
        order: 3;
    }
}

/* ==========================================================================
   S2.5 — Stabilization (Approve → Sprint 2.5): paint / responsive only
   ========================================================================== */

/* Prefer opaque sticky chrome over blur on attendance (lower paint cost) */
@media (max-width: 575.98px) {
    .masar-ds.attendance-container .attendance-stats-bar,
    .masar-ds.attendance-container .sticky-actions {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #fff;
    }
}

/* Empty / no-results blocks stay with the list on notification pages */
.masar-ds.student-notifications-page > #notificationsEmpty,
.masar-ds.student-notifications-page > #notificationsNoResults,
.masar-ds.teacher-notifications-page > #notificationsEmpty,
.masar-ds.teacher-notifications-page > #notificationsNoResults {
    order: 2;
}

/* ==========================================================================
   S3-A · UX-008 pilot — Student Attendance (list path only)
   Scoped with :not(.course-page-container) so Teacher mark UI is unchanged.
   ========================================================================== */

@media (max-width: 575.98px) {
    /* Reuse same eye-path as tasks/grades: filters + course list before KPI chrome */
    .masar-ds.attendance-container:not(.course-page-container) > .student-page-header,
    .masar-ds.attendance-container:not(.course-page-container) > .masar-page-hero {
        order: 0;
    }

    .masar-ds.attendance-container:not(.course-page-container) > .filters-section {
        order: 1;
    }

    .masar-ds.attendance-container:not(.course-page-container) > .attendance-courses {
        order: 2;
    }

    .masar-ds.attendance-container:not(.course-page-container) > .masar-chrome-toggle,
    .masar-ds.attendance-container:not(.course-page-container) > .masar-chrome-collapse {
        order: 3;
    }
}