/* SchoolOne - thème partagé (École / Enseignant / Parent).
   Chaque panel surcharge --so-accent via un petit <style> inline
   (voir App\Support\PlatformColors::accentStyleTag). */

:root {
    --so-primary: #2563eb;
    --so-primary-dark: #1d4ed8;
    --so-accent: #2563eb;
    --so-success: #16a34a;
    --so-warning: #f59e0b;
    --so-danger: #dc2626;
    --so-gray: #6b7280;
    --so-bg: #f9fafb;
    --so-surface: #ffffff;
    --so-border: #e5e7eb;
    --so-text: #111827;
    --so-text-muted: #6b7280;
    /* Fond des sections (« frames ») des formulaires de création/édition. */
    --so-form-frame-bg: #ebe9e9;
    /* Dégradé sombre teinté de l'accent du panel — sidebar, barres d'outils
       et pied de tableau partagent tous ce même habillage. */
    --so-gradient: linear-gradient(
        165deg,
        color-mix(in srgb, var(--so-accent) 30%, #0d0d12) 0%,
        color-mix(in srgb, var(--so-accent) 55%, #0d0d12) 55%,
        color-mix(in srgb, var(--so-accent) 38%, #0d0d12) 100%
    );
}

.fi-body {
    background: var(--so-bg) !important;
    color: var(--so-text) !important;
}

/* ── Formulaires (création/édition) : en-têtes de section colorés ─── */
.fi-form .fi-section-header-heading {
    color: var(--so-primary) !important;
}

.fi-form .fi-section-header-icon {
    color: var(--so-primary) !important;
}

.fi-form .fi-section-content-ctn {
    background-color: var(--so-form-frame-bg) !important;
}

/* ── Sidebar : dégradé sombre teinté de l'accent du panel ─────────── */
.fi-sidebar {
    background: var(--so-gradient);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05), 12px 0 32px -20px rgba(0, 0, 0, 0.5);
}

.fi-sidebar-header {
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fi-brand-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
}

a.fi-brand-row:hover {
    opacity: 0.85;
}

.fi-brand-icon {
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fi-brand-text {
    line-height: 1.2;
}

.fi-brand-main {
    display: block;
    color: var(--so-text);
    font-weight: 700;
    font-size: 0.92rem;
}

.fi-brand-sub {
    display: block;
    color: var(--so-text-muted);
    font-size: 0.68rem;
}

/* Dans la sidebar (fond coloré), le bloc marque passe en blanc pour le contraste */
.fi-sidebar .fi-brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.fi-sidebar .fi-brand-main {
    color: #fff;
}

.fi-sidebar .fi-brand-sub {
    color: rgba(255, 255, 255, 0.7);
}

.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.6) !important;
}

.fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.8) !important;
}

.fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.fi-sidebar-item-button:hover {
    background: rgba(255, 255, 255, 0.13) !important;
}

.fi-sidebar-item {
    position: relative;
}

.fi-sidebar-item.fi-active::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #fff;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: rgba(255, 255, 255, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #fff !important;
}

.fi-sidebar .fi-icon-btn-icon {
    color: rgba(255, 255, 255, 0.55) !important;
}

.fi-sidebar .fi-icon-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.fi-sidebar .fi-icon-btn:hover .fi-icon-btn-icon {
    color: #fff !important;
}

/* ── Barre d'outils tableau et pied de page ──────────────────────── */
.fi-ta-header-toolbar {
    background: var(--so-gradient);
}

.fi-ta-header-toolbar .fi-icon-btn-icon {
    color: rgba(255, 255, 255, 0.75) !important;
}

.fi-ta-header-toolbar .fi-icon-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.fi-ta-header-toolbar .fi-icon-btn:hover .fi-icon-btn-icon {
    color: #fff !important;
}

.fi-ta-pagination {
    background: var(--so-gradient);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fi-ta-pagination .fi-pagination-overview {
    color: rgba(255, 255, 255, 0.9) !important;
}

.fi-pagination {
    grid-template-columns: 1fr auto;
}

.fi-pagination-overview {
    justify-self: start;
}

/* ── Tables : zébrage, en-tête, actions ───────────────────────────── */
.fi-ta-header-cell {
    background: color-mix(in srgb, var(--so-primary) 5%, white);
}

.fi-ta-row:nth-child(even) {
    background: var(--so-bg);
}

.fi-ta-row:hover {
    background: color-mix(in srgb, var(--so-primary) 6%, white) !important;
}

.fi-ta-actions-cell .fi-link {
    background: color-mix(in srgb, var(--so-primary) 10%, white);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

.fi-ta-actions-cell .fi-link,
.fi-ta-actions-cell .fi-link * {
    color: var(--so-primary-dark) !important;
    text-decoration: none !important;
}

.fi-ta-actions-cell .fi-link:hover {
    background: var(--so-primary);
}

.fi-ta-actions-cell .fi-link:hover,
.fi-ta-actions-cell .fi-link:hover * {
    color: #fff !important;
}

/* ── Cartes KPI colorées (dashboards, widgets) ───────────────────── */
.so-stats-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .so-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .so-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.so-stat-card {
    position: relative;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    color: #fff;
    overflow: hidden;
    min-height: 110px;
}

.so-stat-icon {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    width: 1.6rem;
    height: 1.6rem;
    opacity: 0.9;
}

.so-stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
}

.so-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.35rem;
    opacity: 0.9;
}

.so-stat-sub {
    font-size: 0.68rem;
    opacity: 0.75;
    margin-top: 0.35rem;
}

.so-stat-primary {
    background: linear-gradient(135deg, var(--so-primary-dark), var(--so-primary));
}

.so-stat-accent {
    background: linear-gradient(135deg, color-mix(in srgb, var(--so-accent) 70%, black), var(--so-accent));
}

.so-stat-success {
    background: linear-gradient(135deg, #15803d, var(--so-success));
}

.so-stat-warning {
    background: linear-gradient(135deg, #b45309, var(--so-warning));
}

.so-stat-danger {
    background: linear-gradient(135deg, #b91c1c, var(--so-danger));
}

.so-stat-gray {
    background: linear-gradient(135deg, #4b5563, var(--so-gray));
}

/* ── Bannière de bienvenue ────────────────────────────────────────── */
.so-welcome-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--so-accent) 70%, black), var(--so-accent));
    border-radius: 14px;
    padding: 1.15rem 1.4rem;
    color: #fff;
}

.so-welcome-sub {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.so-welcome-name {
    font-size: 1.2rem;
    font-weight: 700;
}

.so-welcome-school {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.85;
    margin-top: 0.2rem;
}

.so-welcome-date {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.9;
}