/* =====================================================
   PP5 SaaS system layer
   Shared product UI tokens and cross-screen component rules.
   Loaded after page-local styles so it can normalize the app safely.
   ===================================================== */

:root {
    color-scheme: light;

    /* 8px spacing system */
    --pp5-space-half: 0.25rem;
    --pp5-space-1: 0.5rem;
    --pp5-space-2: 1rem;
    --pp5-space-3: 1.5rem;
    --pp5-space-4: 2rem;
    --pp5-space-5: 2.5rem;
    --pp5-space-6: 3rem;
    --pp5-space-8: 4rem;

    /* Anuphan — premium Thai UI typeface */
    --pp5-font-sans: 'Anuphan', 'Noto Sans Thai', system-ui, -apple-system, sans-serif;
    --pp5-type-xs: 0.8125rem;
    --pp5-type-sm: 0.9375rem;
    --pp5-type-md: 1rem;
    --pp5-type-lg: 1.125rem;
    --pp5-type-xl: 1.3125rem;
    --pp5-type-2xl: 1.625rem;
    --pp5-type-3xl: 2rem;
    --pp5-type-caption: var(--pp5-type-xs);
    --pp5-type-label: var(--pp5-type-sm);
    --pp5-type-body: var(--pp5-type-md);
    --pp5-type-lead: var(--pp5-type-lg);
    --pp5-type-heading: var(--pp5-type-xl);
    --pp5-type-display: var(--pp5-type-2xl);
    --pp5-type-stat: var(--pp5-type-3xl);

    /* School brand — orange · red · white */
    --pp5-bg: #fffbf7;
    --pp5-bg-subtle: #fff7ed;
    --pp5-surface: #ffffff;
    --pp5-surface-muted: #fff7ed;
    --pp5-surface-elevated: #ffffff;
    --pp5-sidebar-bg: #fff7ed;
    --pp5-border: #fed7aa;
    --pp5-border-subtle: #ffedd5;
    --pp5-border-strong: #fdba74;
    --pp5-ink: #431407;
    --pp5-ink-soft: #7c2d12;
    --pp5-muted: #78716c;
    --pp5-muted-strong: #57534e;
    --pp5-text-primary: var(--pp5-ink);
    --pp5-text-muted: var(--pp5-muted);

    --pp5-primary: var(--site-button-color, #ea580c);
    --pp5-primary-hover: var(--site-progress-color, #c2410c);
    --pp5-accent: #dc2626;
    --pp5-accent-hover: #b91c1c;
    --pp5-accent-soft: #fee2e2;
    --pp5-primary-soft: #ffedd5;
    --pp5-primary-border: #fdba74;
    --pp5-success: #15803d;
    --pp5-success-soft: #ecfdf5;
    --pp5-warning: #c2410c;
    --pp5-warning-soft: #fff7ed;
    --pp5-danger: #b91c1c;
    --pp5-danger-soft: #fef2f2;
    --pp5-info: #0369a1;
    --pp5-info-soft: #f0f9ff;

    /* Radius and elevation */
    --pp5-radius-xs: 0.375rem;
    --pp5-radius-sm: 0.5rem;
    --pp5-radius-md: 0.75rem;
    --pp5-radius-lg: 1rem;
    --pp5-radius-pill: 999px;
    --pp5-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --pp5-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --pp5-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --pp5-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.1);
    --pp5-shadow-card-hover: 0 12px 28px rgba(15, 23, 42, 0.1);
    --pp5-focus-ring: 0 0 0 3px color-mix(in oklch, var(--pp5-primary) 24%, transparent);

    /* Motion and layers */
    --pp5-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --pp5-duration-fast: 140ms;
    --pp5-duration-med: 220ms;
    --pp5-z-dropdown: 120;
    --pp5-z-sticky: 80;
    --pp5-z-backdrop: 1000;
    --pp5-z-modal: 1010;
    --pp5-z-toast: 1100;
    --pp5-z-tooltip: 1200;
}

html {
    background: var(--pp5-bg);
    text-size-adjust: 100%;
}

body {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: var(--pp5-bg) !important;
    color: var(--pp5-ink) !important;
    font-family: var(--pp5-font-sans) !important;
    font-size: var(--pp5-type-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6, p, span, label, button, a, th, td, input, select, textarea, small) {
    letter-spacing: 0 !important;
}

:where(h1, h2, h3) {
    color: var(--pp5-ink);
    text-wrap: balance;
}

:where(p, li, td, dd) {
    text-wrap: pretty;
}

::selection {
    background: var(--pp5-primary-soft);
    color: var(--pp5-ink);
}

:focus-visible {
    outline: 2px solid transparent !important;
    outline-offset: 2px;
    box-shadow: var(--pp5-focus-ring) !important;
}

::placeholder {
    color: var(--pp5-muted) !important;
    opacity: 1 !important;
}

/* Remove previous clay/decorative layer without rewriting legacy files. */
body,
.student-dashboard,
.admin-page,
.teacher-admin-page,
.teacher-overview-page {
    background-image: none !important;
}

#login-view {
    background: var(--pp5-bg) !important;
    background-image: none !important;
}

.hero-gradient {
    background: var(--pp5-bg) !important;
    background-image: none !important;
}

.text-gradient {
    background: none !important;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--pp5-ink) !important;
}

/* App shell */
.admin-header,
.student-app-header,
.teacher-overview-header,
header.bg-white {
    background: color-mix(in oklch, var(--pp5-surface) 92%, transparent) !important;
    border-bottom: 1px solid var(--pp5-border) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(1.1) blur(10px);
}

.admin-header {
    min-height: 64px !important;
    padding-block: var(--pp5-space-1) !important;
    padding-inline: var(--pp5-space-2) !important;
}

.admin-header__left,
.admin-header .admin-header__left {
    min-width: 0 !important;
}

#page-title,
.admin-header h1,
.student-app-header h1 {
    color: var(--pp5-ink) !important;
    font-size: var(--pp5-type-lg) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

#header-brand-meta,
.header-account-card__role,
.saas-score-toggle-subtitle {
    color: var(--pp5-muted) !important;
}

.admin-content,
.student-main-content,
.teacher-overview-page-shell {
    background: var(--pp5-bg) !important;
}

.admin-content {
    padding: var(--pp5-space-2) !important;
}

@media (min-width: 1024px) {
    .admin-content {
        padding: var(--pp5-space-3) !important;
    }
}

/* Sidebar and navigation */
#admin-sidebar.admin-sidebar,
.admin-sidebar {
    background: var(--pp5-sidebar-bg) !important;
    border-right: 1px solid var(--pp5-border) !important;
    box-shadow: none !important;
}

.admin-sidebar-nav {
    gap: var(--pp5-space-half) !important;
}

.sidebar-section-label,
.admin-sidebar-nav > p {
    color: var(--pp5-muted) !important;
    font-size: var(--pp5-type-xs) !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

#admin-sidebar .sidebar-link,
.sidebar-link {
    min-height: 44px !important;
    border: 1px solid transparent !important;
    border-radius: var(--pp5-radius-md) !important;
    background: transparent !important;
    color: var(--pp5-ink-soft) !important;
    box-shadow: none !important;
    transition:
        background-color var(--pp5-duration-fast) var(--pp5-ease-out),
        border-color var(--pp5-duration-fast) var(--pp5-ease-out),
        color var(--pp5-duration-fast) var(--pp5-ease-out),
        transform var(--pp5-duration-fast) var(--pp5-ease-out) !important;
}

#admin-sidebar .sidebar-link:hover:not(.active),
.sidebar-link:hover:not(.active) {
    background: var(--pp5-surface-muted) !important;
    border-color: var(--pp5-border) !important;
    color: var(--pp5-ink) !important;
}

#admin-sidebar .sidebar-link.active,
.sidebar-link.active {
    background: var(--pp5-primary-soft) !important;
    border-color: var(--pp5-primary-border) !important;
    color: var(--pp5-primary-hover) !important;
    box-shadow: none !important;
}

#admin-sidebar .sidebar-link.active svg,
.sidebar-link.active svg {
    color: var(--pp5-primary-hover) !important;
    background: transparent !important;
    border-color: transparent !important;
}

@media (max-width: 1023px) {
    #admin-sidebar.admin-sidebar,
    .admin-sidebar {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: var(--pp5-z-modal) !important;
        width: 100% !important;
        max-width: 100% !important;
        height: min(78dvh, 680px) !important;
        max-height: min(78dvh, 680px) !important;
        border-top: 1px solid var(--pp5-border) !important;
        border-right: 0 !important;
        border-radius: var(--pp5-radius-lg) var(--pp5-radius-lg) 0 0 !important;
        transform: translateY(104%) !important;
        transition: transform var(--pp5-duration-med) var(--pp5-ease-out) !important;
        overflow: hidden !important;
    }

    #admin-sidebar.admin-sidebar.open,
    .admin-sidebar.open {
        transform: translateY(0) !important;
    }

    #admin-sidebar .admin-sidebar-nav,
    .admin-sidebar-nav {
        height: 100% !important;
        overflow-y: auto !important;
        padding-bottom: calc(var(--pp5-space-3) + env(safe-area-inset-bottom)) !important;
    }

    #sidebar-overlay {
        z-index: var(--pp5-z-backdrop) !important;
        background: rgba(15, 23, 42, 0.42) !important;
        backdrop-filter: none !important;
    }
}

/* Account toolbar */
.pp5-admin-toolbar,
.pp5-teacher-toolbar {
    z-index: var(--pp5-z-tooltip) !important;
    gap: var(--pp5-space-half) !important;
}

.header-account-toggle,
.header-account-action,
.header-logout-btn,
.app-header-right a,
.app-header-right button {
    min-height: 40px !important;
    border: 1px solid var(--pp5-border) !important;
    border-radius: var(--pp5-radius-md) !important;
    background: var(--pp5-surface) !important;
    color: var(--pp5-ink-soft) !important;
    box-shadow: none !important;
}

.header-account-toggle:hover,
.header-account-action:hover {
    background: var(--pp5-surface-muted) !important;
    color: var(--pp5-ink) !important;
}

.header-account-toggle[aria-expanded="true"] {
    background: var(--pp5-primary-soft) !important;
    border-color: var(--pp5-primary-border) !important;
    color: var(--pp5-primary-hover) !important;
}

.header-account-dropdown {
    border: 1px solid var(--pp5-border) !important;
    border-radius: var(--pp5-radius-lg) !important;
    background: var(--pp5-surface) !important;
    box-shadow: var(--pp5-shadow-md) !important;
}

.header-account-card {
    border-bottom: 1px solid var(--pp5-border) !important;
}

.header-account-toggle__avatar,
.header-account-card__avatar,
.teacher-user-avatar {
    background: var(--pp5-primary) !important;
    box-shadow: none !important;
}

    /* Surfaces — exclude teacher workspace components (styled in pp5-teacher-modern.css) */
:where(
    .bg-white.rounded-xl,
    .bg-white.rounded-2xl,
    .bg-white.rounded-lg,
    .report-summary-panel,
    .report-card,
    .sys-card,
    .saas-exec-card,
    .saas-insight-card,
    .saas-stat-card,
    .saas-course-table,
    .saas-chart-shell,
    .saas-chart-canvas,
    .saas-empty-state,
    .club-modal-panel,
    .club-modal-section,
    .club-modal-info-card,
    .club-modal-list,
    .teacher-overview-header,
    .teacher-overview-card,
    .modal-content
) {
    background: var(--pp5-surface) !important;
    border: 1px solid var(--pp5-border) !important;
    border-radius: var(--pp5-radius-lg) !important;
    box-shadow: var(--pp5-shadow-sm) !important;
}

[data-stat-card] {
    background: var(--pp5-surface) !important;
    color: var(--pp5-ink) !important;
    border: 1px solid var(--pp5-border) !important;
}

:where(.rounded-2xl, .rounded-xl) {
    border-radius: var(--pp5-radius-lg) !important;
}

.club-modal-header,
.club-modal-body,
.club-modal-section--description,
.club-modal-list-item.is-me,
.saas-banner,
.hero-gradient {
    background: var(--pp5-surface) !important;
    background-image: none !important;
    border-color: var(--pp5-border) !important;
    box-shadow: none !important;
}

.club-modal-header {
    border-bottom: 1px solid var(--pp5-border) !important;
}

.club-modal-title,
.club-modal-subtitle,
.sys-card__title,
.saas-banner-title,
.saas-insight-title,
.saas-exec-value,
.saas-stat-value,
.course-head h2,
.report-page-head h2 {
    color: var(--pp5-ink) !important;
}

.club-modal-section-title,
.saas-banner-kicker,
.saas-exec-label,
.saas-insight-subtitle,
.sys-card__desc,
.course-head p,
.report-page-head p {
    color: var(--pp5-muted) !important;
    text-transform: none !important;
}

/* Buttons and command controls */
button:not(.swal2-styled):not(.rating-level-btn):not(.pp5-rating-circle-btn):not(.attribute-bulk-btn):not(.attendance-rating-status-btn):not(.attendance-checklist-status-btn):not(.attendance-mobile-status-btn):not(.modern-status-btn),
[role="button"]:not(.rating-level-btn):not(.pp5-rating-circle-btn),
.btn-primary,
.pp5-admin-btn,
.pp5-swal-btn,
.saas-banner-btn,
.club-modal-action-btn,
.club-quick-book-btn,
.report-act-btn,
.course-enter-btn {
    min-height: 40px;
    border-radius: var(--pp5-radius-md) !important;
    box-shadow: none !important;
    transition:
        background-color var(--pp5-duration-fast) var(--pp5-ease-out),
        border-color var(--pp5-duration-fast) var(--pp5-ease-out),
        color var(--pp5-duration-fast) var(--pp5-ease-out),
        transform var(--pp5-duration-fast) var(--pp5-ease-out) !important;
}

button:not(.swal2-styled):active,
[role="button"]:active,
.btn-primary:active {
    transform: translateY(1px);
}

.btn-primary,
.pp5-admin-btn--primary,
.pp5-swal-btn--primary,
.club-modal-action-btn--primary,
.club-quick-book-btn,
.saas-banner-btn--primary,
.course-enter-btn,
button.bg-orange-600,
a.bg-orange-600,
button.bg-blue-600,
a.bg-blue-600,
button.bg-indigo-600,
a.bg-indigo-600,
button.bg-emerald-600,
a.bg-emerald-600 {
    border-color: var(--pp5-primary) !important;
    background: var(--pp5-primary) !important;
    background-image: none !important;
    color: #fff !important;
}

.btn-primary:hover,
.pp5-admin-btn--primary:hover,
.pp5-swal-btn--primary:hover,
.club-modal-action-btn--primary:hover,
.club-quick-book-btn:hover,
.saas-banner-btn--primary:hover,
.course-enter-btn:hover {
    background: var(--pp5-primary-hover) !important;
    border-color: var(--pp5-primary-hover) !important;
    color: #fff !important;
}

.pp5-admin-btn--ghost,
.pp5-swal-btn--secondary,
.saas-banner-btn,
.club-modal-action-btn,
.report-act-btn {
    border: 1px solid var(--pp5-border) !important;
    background: var(--pp5-surface) !important;
    color: var(--pp5-ink-soft) !important;
}

.pp5-admin-btn--ghost:hover,
.pp5-swal-btn--secondary:hover,
.saas-banner-btn:hover,
.club-modal-action-btn:hover,
.report-act-btn:hover {
    background: var(--pp5-surface-muted) !important;
    color: var(--pp5-ink) !important;
}

.club-modal-action-btn--danger,
.header-account-action.is-danger,
.text-red-600,
.text-rose-600 {
    color: var(--pp5-danger) !important;
}

.club-modal-action-btn--danger:hover {
    background: var(--pp5-danger) !important;
    border-color: var(--pp5-danger) !important;
    color: #fff !important;
}

:disabled,
.disabled,
[aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: 0.58 !important;
}

/* Forms */
input,
select,
textarea,
.pp5-master-input,
.pp5-master-select,
.pp5-modern-select {
    min-height: 44px !important;
    border: 1px solid var(--pp5-border-strong) !important;
    border-radius: var(--pp5-radius-md) !important;
    background: var(--pp5-surface) !important;
    color: var(--pp5-ink) !important;
    box-shadow: none !important;
}

textarea {
    min-height: 96px !important;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--pp5-border-strong) !important;
}

input:focus,
select:focus,
textarea:focus,
.pp5-modern-select:focus-within {
    border-color: var(--pp5-primary) !important;
    box-shadow: var(--pp5-focus-ring) !important;
    outline: none !important;
}

label,
.sys-label,
.pp5-master-label {
    color: var(--pp5-ink-soft) !important;
    font-size: var(--pp5-type-sm) !important;
    font-weight: 700 !important;
}

.pp5-master-help,
.text-gray-400,
.text-gray-500,
.text-slate-400,
.text-slate-500 {
    color: var(--pp5-muted) !important;
}

.ss-content {
    border: 1px solid var(--pp5-border) !important;
    border-radius: var(--pp5-radius-lg) !important;
    box-shadow: var(--pp5-shadow-md) !important;
}

.ss-content .ss-option {
    border-radius: var(--pp5-radius-sm) !important;
}

.ss-content .ss-option.ss-highlighted,
.ss-content .ss-option:hover {
    background: var(--pp5-primary-soft) !important;
    color: var(--pp5-primary-hover) !important;
}

/* Tables */
.pp5-table-shell,
.overflow-x-auto.pp5-table-shell {
    position: relative;
    max-width: 100%;
    border: 1px solid var(--pp5-border);
    border-radius: var(--pp5-radius-lg);
    background: var(--pp5-surface);
    overflow: auto;
    box-shadow: var(--pp5-shadow-sm);
    scrollbar-color: var(--pp5-border-strong) transparent;
}

.pp5-data-table,
table.pp5-data-table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--pp5-surface);
    color: var(--pp5-ink);
}

.pp5-data-table thead th,
.pp5-data-table thead td {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--pp5-surface-muted) !important;
    color: var(--pp5-muted-strong) !important;
    border-bottom: 1px solid var(--pp5-border) !important;
    font-size: var(--pp5-type-xs) !important;
    font-weight: 800 !important;
    text-transform: none !important;
}

.pp5-data-table :where(th, td) {
    border-bottom: 1px solid var(--pp5-border) !important;
    vertical-align: middle;
}

.pp5-data-table tbody tr:hover > * {
    background: var(--pp5-surface-muted) !important;
}

@media (min-width: 768px) {
    .pp5-table-shell .pp5-data-table.pp5-sticky-first-col :is(thead th, thead td, tbody th, tbody td):first-child {
        position: sticky;
        left: 0;
        z-index: 4;
        background: var(--pp5-surface) !important;
        box-shadow: 1px 0 0 var(--pp5-border);
    }

    .pp5-table-shell .pp5-data-table.pp5-sticky-first-col thead :is(th, td):first-child {
        z-index: 5;
        background: var(--pp5-surface-muted) !important;
    }
}

.mobile-card-table {
    border: 0 !important;
}

@media (max-width: 767px) {
    .mobile-table-shell {
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .mobile-card-table thead {
        display: none;
    }

    .mobile-card-table,
    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table td {
        display: block;
        width: 100%;
    }

    .mobile-card-table tr {
        margin-bottom: var(--pp5-space-1);
        border: 1px solid var(--pp5-border);
        border-radius: var(--pp5-radius-lg);
        background: var(--pp5-surface);
        box-shadow: var(--pp5-shadow-sm);
        overflow: hidden;
    }

    .mobile-card-table tr[data-mobile-message="1"] {
        padding: var(--pp5-space-2);
    }

    .mobile-card-table td {
        display: grid;
        grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
        gap: var(--pp5-space-1);
        align-items: start;
        min-height: 42px;
        border-bottom: 1px solid var(--pp5-border) !important;
        padding: 0.75rem 0.875rem !important;
        color: var(--pp5-ink);
        text-align: right;
    }

    .mobile-card-table td::before {
        content: attr(data-label);
        color: var(--pp5-muted);
        font-size: var(--pp5-type-xs);
        font-weight: 800;
        text-align: left;
    }

    .mobile-card-table td:last-child {
        border-bottom: 0 !important;
    }
}

/* Dashboard and analytics */
#dashboard-view.dashboard-saas {
    background: var(--pp5-bg) !important;
}

#dashboard-view.dashboard-saas .saas-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--pp5-space-2);
    border-radius: var(--pp5-radius-lg) !important;
    padding: var(--pp5-space-2) !important;
}

#dashboard-view.dashboard-saas .saas-banner--ok,
#dashboard-view.dashboard-saas .saas-banner--alert {
    background: var(--pp5-surface) !important;
}

#dashboard-view.dashboard-saas .saas-banner--ok {
    border-color: color-mix(in oklch, var(--pp5-success) 28%, white) !important;
}

#dashboard-view.dashboard-saas .saas-banner--alert {
    border-color: color-mix(in oklch, var(--pp5-warning) 35%, white) !important;
}

#dashboard-view.dashboard-saas .saas-kpi-grid,
.saas-insight-metrics,
.club-attendance-kpi-grid {
    gap: var(--pp5-space-1) !important;
}

.saas-kpi-tile,
.saas-insight-metric,
.saas-risk-summary-box,
.club-attendance-kpi,
.saas-insight-status-box,
.saas-insight-brief-box {
    border: 1px solid var(--pp5-border) !important;
    border-radius: var(--pp5-radius-md) !important;
    background: var(--pp5-surface-muted) !important;
    box-shadow: none !important;
}

.saas-progress-track,
.saas-insight-progress-track {
    background: var(--pp5-bg-subtle) !important;
}

.saas-progress-fill,
.saas-insight-progress-fill,
.club-seat-fill--open,
.club-seat-fill--my,
.saas-progress-fill--success,
.saas-progress-wrap--attendance .saas-progress-fill {
    background: var(--pp5-primary) !important;
    background-image: none !important;
}

.saas-progress-fill--warning {
    background: var(--pp5-warning) !important;
}

.saas-progress-fill--danger {
    background: var(--pp5-danger) !important;
}

.saas-status-badge,
.saas-banner-chip,
.saas-insight-pill,
.club-modal-seat-info,
.club-modal-title span,
.club-modal-rank,
.saas-room-pill,
.status-badge {
    border-radius: var(--pp5-radius-pill) !important;
    box-shadow: none !important;
}

.saas-status-badge--success,
.saas-banner-chip--success,
.club-attendance-kpi--present {
    background: var(--pp5-success-soft) !important;
    border-color: color-mix(in oklch, var(--pp5-success) 32%, white) !important;
    color: color-mix(in oklch, var(--pp5-success) 78%, black) !important;
}

.saas-status-badge--warning,
.club-attendance-kpi--leave {
    background: var(--pp5-warning-soft) !important;
    border-color: color-mix(in oklch, var(--pp5-warning) 36%, white) !important;
    color: color-mix(in oklch, var(--pp5-warning) 68%, black) !important;
}

.saas-status-badge--danger,
.club-attendance-kpi--absent {
    background: var(--pp5-danger-soft) !important;
    border-color: color-mix(in oklch, var(--pp5-danger) 32%, white) !important;
    color: color-mix(in oklch, var(--pp5-danger) 72%, black) !important;
}

.saas-status-badge--neutral,
.club-attendance-kpi--rate {
    background: var(--pp5-surface-muted) !important;
    border-color: var(--pp5-border) !important;
    color: var(--pp5-muted-strong) !important;
}

/* Student dashboard */
.student-app-shell {
    background: var(--pp5-bg) !important;
}

.student-app-header #content-search,
#content-search,
#hero-search {
    border-radius: var(--pp5-radius-pill) !important;
    background: var(--pp5-surface) !important;
}

.club-card-modern,
.club-card-flat,
.table-card {
    border: 1px solid var(--pp5-border) !important;
    border-radius: var(--pp5-radius-lg) !important;
    background: var(--pp5-surface) !important;
    background-image: none !important;
    box-shadow: var(--pp5-shadow-sm) !important;
}

.table-card:not(.pointer-events-none):hover,
.club-card-modern:hover,
.course-summary-card:hover {
    transform: translateY(-1px);
    border-color: var(--pp5-border-strong) !important;
}

/* Teacher course surfaces — keep rich shadows; detail in pp5-teacher-modern.css */
.teacher-admin-page {
    --teacher-bg: var(--pp5-bg);
    --teacher-surface: var(--pp5-surface);
    --teacher-border: var(--pp5-border);
    --teacher-primary: var(--pp5-primary);
    --teacher-primary-dark: var(--pp5-primary-hover);
    --teacher-soft: var(--pp5-primary-soft);
    --teacher-radius-sm: var(--pp5-radius-sm);
    --teacher-radius-md: var(--pp5-radius-md);
    --teacher-radius-lg: var(--pp5-radius-lg);
    --teacher-shadow-card: 0 2px 6px rgba(15, 23, 42, 0.05), 0 10px 24px rgba(15, 23, 42, 0.04);
    --teacher-shadow-card-hover: 0 16px 40px rgba(15, 23, 42, 0.12), 0 6px 14px rgba(15, 23, 42, 0.06);
    --teacher-shadow-btn: 0 6px 18px color-mix(in oklch, var(--pp5-primary) 28%, transparent);
    --teacher-shadow-btn-hover: 0 10px 28px color-mix(in oklch, var(--pp5-primary) 34%, transparent);
}

.teacher-panel.course-detail-shell,
.course-detail-card,
.score-sheet-shell,
.attendance-sheet-shell {
    background: var(--pp5-surface) !important;
    border-color: var(--pp5-border) !important;
}

.course-tab,
.course-tab-btn,
.course-filter-chip,
.sys-tab {
    min-height: 40px !important;
    border-radius: var(--pp5-radius-md) !important;
    color: var(--pp5-ink-soft) !important;
}

.course-tab.is-active,
.course-tab-btn.active,
.course-filter-chip.is-active,
.sys-tab.is-active {
    background: var(--pp5-primary-soft) !important;
    border-color: var(--pp5-primary-border) !important;
    color: var(--pp5-primary-hover) !important;
}

.teacher-admin-page .warning-card,
.teacher-admin-page .risk-card {
    border-left-width: 1px !important;
    border-left-color: var(--pp5-border) !important;
}

/* Modals, alerts, overlays */
.modal-overlay,
.pp5-admin-modal-shell,
.pp5-modal-shell {
    background: rgba(15, 23, 42, 0.42) !important;
    backdrop-filter: none !important;
}

.pp5-admin-modal-panel,
.pp5-swal-modal,
.swal2-popup {
    border: 1px solid var(--pp5-border) !important;
    border-radius: var(--pp5-radius-lg) !important;
    background: var(--pp5-surface) !important;
    background-image: none !important;
    box-shadow: var(--pp5-shadow-md) !important;
}

.pp5-admin-modal-header,
.pp5-admin-modal-footer {
    background: var(--pp5-surface) !important;
    border-color: var(--pp5-border) !important;
}

.pp5-swal-title,
.swal2-title {
    color: var(--pp5-ink) !important;
}

/* Loading, empty, success, and upload states */
#loading-overlay,
#upload-loading-overlay {
    background: color-mix(in oklch, var(--pp5-bg) 82%, transparent) !important;
    backdrop-filter: none !important;
}

.animate-pulse,
.skeleton,
.login-form-skeleton {
    border-radius: var(--pp5-radius-md);
}

.saas-empty-state,
.club-modal-empty,
.saas-chart-fallback {
    border: 1px dashed var(--pp5-border-strong) !important;
    background: var(--pp5-surface-muted) !important;
    color: var(--pp5-muted-strong) !important;
}

/* System settings */
.sys-settings {
    max-width: 1040px !important;
}

.sys-tabs {
    gap: var(--pp5-space-half) !important;
    border-bottom: 1px solid var(--pp5-border) !important;
}

.sys-tab {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.sys-panel.is-active {
    display: block;
}

/* Reset password and overview pages */
.teacher-overview-page-shell,
body > main {
    width: 100%;
}

body > main .max-w-md,
.teacher-overview-header {
    border-radius: var(--pp5-radius-lg) !important;
}

.site-footer-shell {
    border-top: 1px solid var(--pp5-border) !important;
    background: var(--pp5-surface) !important;
    color: var(--pp5-muted) !important;
}

/* Touch and responsive quality */
@media (max-width: 640px) {
    body {
        font-size: 0.97rem;
    }

    .admin-header {
        min-height: 60px !important;
        padding-inline: var(--pp5-space-1) !important;
    }

    #page-title,
    .admin-header h1 {
        font-size: var(--pp5-type-md) !important;
    }

    .admin-content,
    .teacher-overview-page-shell {
        padding: var(--pp5-space-1) !important;
    }

    #dashboard-view.dashboard-saas .saas-banner {
        grid-template-columns: 1fr;
    }

    .saas-banner-actions,
    .pp5-admin-modal-footer {
        justify-content: stretch !important;
    }

    .saas-banner-actions > *,
    .pp5-admin-modal-footer > *,
    .pp5-admin-btn,
    .pp5-swal-btn {
        width: 100% !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    button,
    [role="button"],
    a,
    input,
    select,
    textarea {
        min-height: 44px;
    }
}

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

@media print {
    .admin-header,
    #admin-sidebar,
    .pp5-admin-toolbar,
    .pp5-teacher-toolbar,
    #sidebar-overlay {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .admin-content {
        padding: 0 !important;
    }
}

/* Phase 2: table control bar */
.pp5-table-toolbar,
.pp5-control-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pp5-space-1);
    padding: var(--pp5-space-1) var(--pp5-space-2);
    margin-bottom: var(--pp5-space-2);
    background: var(--pp5-surface-elevated);
    border: 1px solid var(--pp5-border-subtle);
    border-radius: var(--pp5-radius-md);
    box-shadow: var(--pp5-shadow-xs);
}

.pp5-table-toolbar__filters,
.pp5-control-bar__filters {
    display: flex;
    flex: 1 1 220px;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pp5-space-1);
    min-width: 0;
}

.pp5-table-toolbar__actions,
.pp5-control-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pp5-space-1);
    margin-left: auto;
}

.pp5-table-toolbar .pp5-control-input,
.pp5-control-bar .pp5-control-input {
    min-height: 40px;
    min-width: 10rem;
}

.pp5-saved-view-control {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pp5-saved-view-label {
    font-size: var(--pp5-type-caption);
    font-weight: 600;
    color: var(--pp5-text-muted);
    white-space: nowrap;
}

.pp5-saved-view-select {
    min-width: 9.5rem;
}

/* Phase 3: role-aware empty states */
.pp5-empty-state {
    padding: var(--pp5-space-3) var(--pp5-space-2);
    border: 1px dashed var(--pp5-border-subtle);
    border-radius: var(--pp5-radius-md);
    background: color-mix(in srgb, var(--pp5-surface-muted) 55%, transparent);
    text-align: center;
}

.pp5-empty-state__title {
    margin: 0;
    font-size: var(--pp5-type-lead);
    font-weight: 700;
    color: var(--pp5-text-primary);
}

.pp5-empty-state__reason,
.pp5-empty-state__role {
    margin: 0.35rem 0 0;
    font-size: var(--pp5-type-body);
    color: var(--pp5-text-muted);
    line-height: 1.5;
}

.pp5-empty-state__action {
    margin-top: var(--pp5-space-2);
}

/* Phase 3: autosave status banner */
.pp5-autosave-banner {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 100050;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--pp5-radius-pill);
    border: 1px solid var(--pp5-border-subtle);
    background: var(--pp5-surface-elevated);
    box-shadow: var(--pp5-shadow-md);
    font-size: var(--pp5-type-caption);
    font-weight: 600;
    color: var(--pp5-text-primary);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pp5-autosave-banner.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
}

.pp5-autosave-banner.is-saving {
    border-color: color-mix(in srgb, var(--pp5-info) 35%, var(--pp5-border-subtle));
}

.pp5-autosave-banner.is-saved {
    border-color: color-mix(in srgb, var(--pp5-success) 35%, var(--pp5-border-subtle));
}

.pp5-autosave-banner.is-error {
    border-color: color-mix(in srgb, var(--pp5-danger) 40%, var(--pp5-border-subtle));
    color: var(--pp5-danger);
}

.pp5-autosave-banner__icon::before {
    content: '';
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

.pp5-autosave-banner.is-saving .pp5-autosave-banner__icon::before {
    animation: pp5-autosave-pulse 1s ease-in-out infinite;
}

@keyframes pp5-autosave-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* Phase 3: permission hints */
.pp5-permission-hint.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

button[disabled][data-pp5-perm-hint="1"],
[aria-disabled="true"][data-pp5-perm-hint="1"] {
    cursor: not-allowed;
}

.admin-sidebar-nav .pp5-sidebar-section-label {
    padding: 0 0.75rem;
    margin: 1rem 0 0.35rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pp5-text-muted);
}

/* =====================================================
   PP5 Modern UI refresh — cards, badges, hover, depth
   ===================================================== */

html {
    background:
        radial-gradient(ellipse 80% 50% at 0% 0%, color-mix(in oklch, var(--pp5-primary) 6%, transparent), transparent 55%),
        radial-gradient(ellipse 70% 45% at 100% 0%, color-mix(in oklch, var(--pp5-info) 5%, transparent), transparent 50%),
        var(--pp5-bg);
}

/* —— Login —— */
#login-view::before,
#login-view::after {
    display: block !important;
    filter: blur(40px);
    opacity: 0.85;
}

.login-card-wrap {
    border-radius: var(--pp5-radius-lg) !important;
    padding: 1px !important;
    background: color-mix(in oklch, var(--pp5-primary) 18%, white) !important;
    box-shadow: var(--pp5-shadow-lg) !important;
    transition:
        transform var(--pp5-duration-med) var(--pp5-ease-out),
        box-shadow var(--pp5-duration-med) var(--pp5-ease-out);
}

.login-card-wrap:hover {
    transform: translateY(-3px);
    box-shadow: var(--pp5-shadow-card-hover) !important;
}

.login-card-wrap--info {
    background: color-mix(in oklch, var(--pp5-info) 16%, white) !important;
}

.login-card {
    border-radius: calc(var(--pp5-radius-lg) - 1px) !important;
    background: var(--pp5-surface) !important;
    border: 1px solid var(--pp5-border-subtle) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.login-card-accent {
    background: var(--pp5-primary) !important;
    box-shadow: none !important;
    height: 4px !important;
}

.login-card-accent--info {
    background: var(--pp5-info) !important;
}

.login-card-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: var(--pp5-radius-pill);
    background: var(--pp5-primary-soft);
    color: var(--pp5-primary-hover);
    font-weight: 700;
}

.login-primary-btn {
    box-shadow: none !important;
}

.login-primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--pp5-shadow-md) !important;
}

.login-card-tip {
    background: var(--pp5-warning-soft) !important;
    border: 1px solid color-mix(in oklch, var(--pp5-warning) 28%, white) !important;
    color: color-mix(in oklch, var(--pp5-warning) 72%, black) !important;
}

.login-list-dot {
    background: var(--pp5-primary) !important;
    box-shadow: 0 0 0 4px var(--pp5-primary-soft) !important;
}

/* —— Badge system —— */
.pp5-badge,
.saas-status-badge,
.status-badge,
.attendance-history-badge,
.score-mobile-unit-badge,
.score-mobile-exam-badge,
.course-room-badge,
.create-course-unit-badge,
[class*="rounded-full"][class*="bg-"][class*="text-"][class*="font-semibold"],
[class*="rounded-full"][class*="bg-"][class*="text-"][class*="font-bold"] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.2rem 0.62rem;
    border-radius: var(--pp5-radius-pill) !important;
    border: 1px solid transparent;
    font-size: var(--pp5-type-xs) !important;
    font-weight: 700 !important;
    line-height: 1.35;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
    transition:
        background-color var(--pp5-duration-fast) var(--pp5-ease-out),
        border-color var(--pp5-duration-fast) var(--pp5-ease-out),
        color var(--pp5-duration-fast) var(--pp5-ease-out);
}

.pp5-badge--neutral,
.saas-status-badge--neutral,
.attendance-history-badge {
    background: var(--pp5-surface-muted) !important;
    border-color: var(--pp5-border) !important;
    color: var(--pp5-muted-strong) !important;
}

.pp5-badge--success,
.saas-status-badge--success,
.bg-emerald-100.text-emerald-700,
.bg-green-100.text-green-700,
.attendance-history-badge.is-ok {
    background: var(--pp5-success-soft) !important;
    border-color: color-mix(in oklch, var(--pp5-success) 30%, white) !important;
    color: color-mix(in oklch, var(--pp5-success) 78%, black) !important;
}

.pp5-badge--warning,
.saas-status-badge--warning,
.bg-orange-100.text-orange-700,
.bg-amber-100.text-amber-700,
.attendance-history-badge.is-leave {
    background: var(--pp5-warning-soft) !important;
    border-color: color-mix(in oklch, var(--pp5-warning) 32%, white) !important;
    color: color-mix(in oklch, var(--pp5-warning) 70%, black) !important;
}

.pp5-badge--danger,
.saas-status-badge--danger,
.bg-red-100.text-red-700,
.bg-rose-100.text-rose-700,
.attendance-history-badge.is-absent {
    background: var(--pp5-danger-soft) !important;
    border-color: color-mix(in oklch, var(--pp5-danger) 30%, white) !important;
    color: color-mix(in oklch, var(--pp5-danger) 72%, black) !important;
}

.pp5-badge--info,
.bg-sky-100.text-sky-700,
.bg-blue-100.text-blue-700,
.bg-indigo-100.text-indigo-700,
.attendance-history-badge.is-total {
    background: var(--pp5-primary-soft) !important;
    border-color: color-mix(in oklch, var(--pp5-primary) 35%, white) !important;
    color: color-mix(in oklch, var(--pp5-primary) 78%, black) !important;
}

.pp5-badge--brand,
.saas-status-badge--brand {
    background: var(--pp5-primary-soft) !important;
    border-color: var(--pp5-border-strong) !important;
    color: var(--pp5-ink-soft) !important;
}

/* —— Interactive cards —— */
.pp5-card,
.pp5-stat-card,
[data-stat-card],
:where(
    .bg-white.rounded-xl,
    .bg-white.rounded-2xl,
    .teacher-panel,
    .course-summary-card,
    .report-card,
    .sys-card,
    .saas-exec-card,
    .saas-insight-card,
    .saas-stat-card,
    .club-card-modern,
    .club-card-flat,
    .table-card,
    .teacher-overview-card,
    .pp5-empty-state
) {
    transition:
        transform var(--pp5-duration-med) var(--pp5-ease-out),
        box-shadow var(--pp5-duration-med) var(--pp5-ease-out),
        border-color var(--pp5-duration-med) var(--pp5-ease-out),
        background-color var(--pp5-duration-med) var(--pp5-ease-out) !important;
}

@media (hover: hover) and (pointer: fine) {
    .pp5-card:hover,
    .pp5-stat-card:hover,
    [data-stat-card]:hover,
    .table-card:not(.pointer-events-none):hover,
    .club-card-modern:hover,
    .club-card-flat:hover,
    .course-summary-card:hover,
    .report-card:hover,
    .saas-insight-card:hover,
    .saas-stat-card:hover,
    .teacher-overview-card:hover,
  .bg-white.rounded-xl:hover,
  .bg-white.rounded-2xl:hover {
        transform: translateY(-2px);
        box-shadow: var(--pp5-shadow-card-hover) !important;
        border-color: color-mix(in oklch, var(--pp5-primary) 22%, var(--pp5-border)) !important;
    }
}

/* Admin KPI stat cards */
.pp5-stat-card,
[data-stat-card] {
    position: relative;
    overflow: hidden;
    padding: var(--pp5-space-2) !important;
    border-radius: var(--pp5-radius-lg) !important;
    border: 1px solid var(--pp5-border) !important;
    background: var(--pp5-surface) !important;
    color: var(--pp5-ink) !important;
    box-shadow: var(--pp5-shadow-sm) !important;
}

.pp5-stat-card::before,
[data-stat-card]::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--pp5-primary);
    opacity: 0.9;
}

.pp5-stat-card--info::before,
[data-stat-card="unique-offered"]::before {
    background: var(--pp5-info);
}

.pp5-stat-card--primary::before,
[data-stat-card="opened"]::before {
    background: var(--pp5-primary);
}

.pp5-stat-card--success::before,
[data-stat-card="rooms"]::before {
    background: var(--pp5-success);
}

.pp5-stat-card--neutral::before,
[data-stat-card="teachers"]::before {
    background: var(--pp5-muted);
}

.pp5-stat-card__label,
[data-stat-card] h3,
[data-stat-card] > p.text-sm {
    color: var(--pp5-muted) !important;
    font-size: var(--pp5-type-sm) !important;
    font-weight: 600 !important;
}

.pp5-stat-card__value,
[data-stat-card] .text-4xl,
[data-stat-card] [data-stat-value] {
    color: var(--pp5-ink) !important;
    font-size: var(--pp5-type-3xl) !important;
    font-weight: 800 !important;
    line-height: 1.15;
}

[data-stat-card] .text-indigo-100,
[data-stat-card] .text-orange-100,
[data-stat-card] .text-emerald-100 {
    color: var(--pp5-muted) !important;
}

[data-stat-card] .absolute svg {
    opacity: 0.08 !important;
    color: var(--pp5-primary) !important;
}

/* —— Sidebar navigation —— */
#admin-sidebar,
.admin-sidebar {
    background: var(--pp5-sidebar-bg) !important;
    border-right: 1px solid var(--pp5-border-subtle) !important;
}

#admin-sidebar .sidebar-link,
.sidebar-link {
    border: 1px solid transparent !important;
    border-radius: var(--pp5-radius-md) !important;
    transition:
        background-color var(--pp5-duration-fast) var(--pp5-ease-out),
        border-color var(--pp5-duration-fast) var(--pp5-ease-out),
        color var(--pp5-duration-fast) var(--pp5-ease-out),
        transform var(--pp5-duration-fast) var(--pp5-ease-out) !important;
}

@media (hover: hover) {
    #admin-sidebar .sidebar-link:hover:not(.active),
    .sidebar-link:hover:not(.active) {
        background: color-mix(in oklch, var(--pp5-primary) 8%, white) !important;
        border-color: color-mix(in oklch, var(--pp5-primary) 14%, white) !important;
        transform: translateX(2px);
    }
}

#admin-sidebar .sidebar-link.active,
.sidebar-link.active {
    background: var(--pp5-primary-soft) !important;
    border-color: var(--pp5-primary-border) !important;
    box-shadow: var(--pp5-shadow-xs) !important;
    color: var(--pp5-primary-hover) !important;
    font-weight: 700 !important;
}

/* —— Tables —— */
table tbody tr {
    transition: background-color var(--pp5-duration-fast) var(--pp5-ease-out);
}

table tbody tr:hover > * {
    background: color-mix(in oklch, var(--pp5-primary) 5%, var(--pp5-surface-muted)) !important;
}

.pp5-data-table tbody tr:hover > * {
    background: color-mix(in oklch, var(--pp5-primary) 6%, var(--pp5-surface-muted)) !important;
}

/* —— Buttons —— */
@media (hover: hover) {
    button:not(.swal2-styled):not(.rating-level-btn):not(.pp5-rating-circle-btn):not(.attribute-bulk-btn):not(.attendance-rating-status-btn):not(.attendance-checklist-status-btn):not(.attendance-mobile-status-btn):not(.modern-status-btn):not(:disabled):hover,
    [role="button"]:not(.rating-level-btn):not(.pp5-rating-circle-btn):not([aria-disabled="true"]):hover,
    .btn-primary:hover,
    .pp5-admin-btn--primary:hover {
        transform: translateY(-1px);
        box-shadow: var(--pp5-shadow-md) !important;
    }
}

/* —— KPI tiles & insight metrics —— */
.saas-kpi-tile,
.saas-insight-metric,
.saas-risk-summary-box,
.club-attendance-kpi,
.saas-insight-status-box {
    transition:
        transform var(--pp5-duration-fast) var(--pp5-ease-out),
        box-shadow var(--pp5-duration-fast) var(--pp5-ease-out),
        border-color var(--pp5-duration-fast) var(--pp5-ease-out) !important;
}

@media (hover: hover) {
    .saas-kpi-tile:hover,
    .saas-insight-metric:hover,
    .club-attendance-kpi:hover {
        transform: translateY(-1px);
        border-color: color-mix(in oklch, var(--pp5-primary) 20%, var(--pp5-border)) !important;
        box-shadow: var(--pp5-shadow-sm) !important;
    }
}

/* —— Tabs & chips —— */
.course-tab,
.course-tab-btn,
.course-filter-chip,
.sys-tab {
    transition:
        background-color var(--pp5-duration-fast) var(--pp5-ease-out),
        border-color var(--pp5-duration-fast) var(--pp5-ease-out),
        color var(--pp5-duration-fast) var(--pp5-ease-out),
        transform var(--pp5-duration-fast) var(--pp5-ease-out) !important;
}

@media (hover: hover) {
    .course-tab:hover:not(.is-active),
    .course-tab-btn:hover:not(.active),
    .course-filter-chip:hover:not(.is-active),
    .sys-tab:hover:not(.is-active) {
        background: var(--pp5-surface-muted) !important;
        transform: translateY(-1px);
    }
}

/* —— Search inputs —— */
#content-search,
#hero-search,
.pp5-control-input,
.pp5-table-toolbar input {
    transition:
        border-color var(--pp5-duration-fast) var(--pp5-ease-out),
        box-shadow var(--pp5-duration-fast) var(--pp5-ease-out),
        background-color var(--pp5-duration-fast) var(--pp5-ease-out) !important;
}

#content-search:focus,
#hero-search:focus {
    border-color: var(--pp5-primary) !important;
    box-shadow: var(--pp5-focus-ring) !important;
}

/* —— Header status badge —— */
#header-status-badge {
    border: 1px solid transparent;
    transition: transform var(--pp5-duration-fast) var(--pp5-ease-out);
}

#header-status-badge:hover {
    transform: scale(1.02);
}

/* —— Modals —— */
.pp5-admin-modal-panel,
.pp5-swal-modal,
.swal2-popup,
.club-modal-panel {
    box-shadow: var(--pp5-shadow-lg) !important;
}

/* —— Empty states —— */
.pp5-empty-state {
    border-style: dashed !important;
    background: color-mix(in oklch, var(--pp5-primary) 4%, var(--pp5-surface-muted)) !important;
}

@media (prefers-reduced-motion: reduce) {
    .pp5-card:hover,
    .pp5-stat-card:hover,
    [data-stat-card]:hover,
    .table-card:hover,
    .club-card-modern:hover,
    .course-summary-card:hover,
    .login-card-wrap:hover,
    #admin-sidebar .sidebar-link:hover,
    button:hover {
        transform: none !important;
    }
}