/* Tableau de bord Skolami : barre latérale dans le style de la Console Claude (couleurs : theme.css). */

/* ─── Barre latérale ─── */
.sk-sidebar
{
    width: 272px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--sk-sb-bg);
    border-right: 1px solid var(--sk-sb-border);
    color: var(--sk-sb-text);
    font-size: 13px;
    transition: width .25s cubic-bezier(.4, 0, .2, 1), transform .25s cubic-bezier(.4, 0, .2, 1), background-color .2s ease;
    will-change: width;
    overflow: hidden;
}
.sk-sidebar svg.lucide { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.75; }
.sk-sidebar .sk-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s ease .05s; }

/* En-tête : marque et bouton de réduction */
.sk-sb-head { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 0 14px; }
.sk-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--sk-sb-active-text); text-decoration: none; }
.sk-brand-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.sk-logo { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff;
           background: linear-gradient(135deg, #1a56c8 0%, #6d3fa8 55%, #b8364a 100%); }
.sk-sidebar .sk-logo svg.lucide { width: 16px; height: 16px; stroke-width: 2; }

.sk-icon-btn { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
               color: var(--sk-sb-muted); background: transparent; border: 0; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.sk-icon-btn:hover { background: var(--sk-sb-hover); color: var(--sk-sb-active-text); }
.sk-icon-btn:active { transform: scale(.96); }

.sk-sb-pad { padding: 0 8px 4px; display: flex; flex-direction: column; gap: 8px; }

/* Champ (établissement, recherche) */
.sk-field { width: 100%; height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 8px;
            background: var(--sk-field-bg); border: 1px solid var(--sk-field-border); color: var(--sk-sb-text);
            transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; cursor: pointer; text-align: left; }
.sk-field:hover { border-color: var(--sk-field-border-hover); }
.sk-field:focus-within, .sk-field[aria-expanded="true"] { border-color: var(--sk-field-border-hover); box-shadow: 0 0 0 3px var(--sk-sb-hover); }
.sk-field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--sk-sb-active-text); font-size: 13px; cursor: text; }
.sk-field input::placeholder { color: var(--sk-sb-muted); }
.sk-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sk-field .sk-muted { color: var(--sk-sb-muted); }
.sk-kbd { display: inline-flex; gap: 3px; flex-shrink: 0; }
.sk-kbd kbd { font-family: inherit; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 4px; border: 1px solid var(--sk-field-border);
              background: var(--sk-kbd-bg); color: var(--sk-sb-muted); }
.sk-school-mark { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
                  font-size: 10px; font-weight: 700; color: #fff; background: var(--sk-brand); overflow: hidden; position: relative; }
html.dark .sk-school-mark { color: #1f1e1d; }
.sk-school-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* Super administrateur intervenant sur un établissement (SidebarDashboard : school.support) */
.sk-support { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 8px 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
              color: #b45309; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .35); }
.sk-sidebar .sk-support svg.lucide { width: 15px; height: 15px; }
.sk-support button { flex-shrink: 0; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0 2px; }
html.dark .sk-support { color: #fbbf24; background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .3); }
.sk-pop-scroll { max-height: 280px; overflow-y: auto; }

/* Navigation */
.sk-sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 8px 8px; }
.sk-sb-nav ul, .sk-sb-foot ul { list-style: none; margin: 0; padding: 0; }
.sk-item { position: relative; width: 100%; height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 10px; margin: 1px 0; border-radius: 8px;
           color: var(--sk-sb-text); text-decoration: none; background: transparent; border: 0; cursor: pointer; font-size: 13px; text-align: left;
           transition: background-color .15s ease, color .15s ease; }
.sk-item:hover { background: var(--sk-sb-hover); color: var(--sk-sb-active-text); }
.sk-item:active { transform: scale(.99); }
.sk-item.active { background: var(--sk-sb-active); color: var(--sk-sb-active-text); font-weight: 600; }
.sk-item .sk-label { flex: 1; min-width: 0; }
.sk-item .sk-chevron { color: var(--sk-sb-muted); transition: transform .2s ease; }
.sk-item .sk-item-value { flex-shrink: 0; color: var(--sk-sb-muted); font-size: 13px; }

/* Groupes repliables : le contenu s'ouvre en douceur (grid 0fr → 1fr) */
.sk-group-children { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s cubic-bezier(.4, 0, .2, 1); }
.sk-group-children > ul { overflow: hidden; min-height: 0; }
.sk-group.open > .sk-group-children { grid-template-rows: 1fr; }
.sk-group.open > .sk-item .sk-chevron { transform: rotate(180deg); }
.sk-group.has-active > .sk-item { color: var(--sk-sb-active-text); font-weight: 600; }
.sk-sub { padding-left: 40px; height: 34px; font-size: 13px; }
.sk-sub.active { font-weight: 600; }

/* Compteurs */
.menu-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
              font-size: 11px; font-weight: 700; line-height: 1; color: #fff; background: #dc2626; flex-shrink: 0; pointer-events: none; }
.menu-badge[hidden] { display: none; }
.menu-badge[data-variant="info"]    { background: #2563eb; }
.menu-badge[data-variant="success"] { background: #059669; }
.menu-badge[data-variant="warning"] { background: #d97706; }
.menu-badge[data-variant="neutral"] { background: #6b7280; }
.menu-badge[data-dot="true"] { min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; }
.sk-group.open > .sk-item .sk-group-badge { display: none; }
@keyframes badgePulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); } 70% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
.menu-badge.pulse { animation: badgePulse 1.5s infinite; }

/* Pied : notifications, aide, compte */
.sk-sb-foot { border-top: 1px solid var(--sk-sb-border); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.sk-account { height: 52px; gap: 10px; padding: 0 8px; }
.sk-avatar { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
             font-size: 12px; font-weight: 700; color: var(--sk-sb-active-text); background: var(--sk-field-bg); border: 1px solid var(--sk-field-border); }
.sk-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk-account-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sk-account-text .sk-account-name { font-weight: 600; color: var(--sk-sb-active-text); font-size: 13px; }
.sk-account-text .sk-account-sub { color: var(--sk-sb-muted); font-size: 12px; }

/* ─── Barre réduite (icônes seules) ─── */
.sk-sidebar.collapsed { width: 60px; }
.sk-sidebar.collapsed .sk-label,
.sk-sidebar.collapsed .sk-chevron,
.sk-sidebar.collapsed .sk-kbd,
.sk-sidebar.collapsed .sk-item-value,
.sk-sidebar.collapsed .sk-field input,
.sk-sidebar.collapsed .sk-account-text,
.sk-sidebar.collapsed .sk-brand { display: none; }
.sk-sidebar.collapsed .sk-sb-head { justify-content: center; padding: 0; }
.sk-sidebar.collapsed .sk-field { justify-content: center; padding: 0; border-color: transparent; background: transparent; }
.sk-sidebar.collapsed .sk-field:hover { background: var(--sk-sb-hover); }
.sk-sidebar.collapsed .sk-item { justify-content: center; padding: 0; }
.sk-sidebar.collapsed .sk-group-children { display: none; }
.sk-sidebar.collapsed .sk-group.has-active > .sk-item { background: var(--sk-sb-active); }
.sk-sidebar.collapsed .menu-badge { position: absolute; top: 4px; right: 6px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; }
.sk-sidebar.collapsed .sk-group.open > .sk-item .sk-group-badge { display: inline-flex; }
.sk-sidebar.collapsed .sk-account { padding: 0; justify-content: center; }

/* Info-bulle de la barre réduite (IndexDashboard : une seule, positionnée au survol) */
.sk-rail-tip { position: fixed; z-index: 70; padding: 5px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none;
               background: var(--sk-tip-bg); color: var(--sk-tip-text); opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease; }
.sk-rail-tip.show { opacity: 1; transform: none; }

/* ─── Mobile : barre latérale en tiroir ─── */
.sk-mobile-bar { display: none; }
.sk-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .4); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
@media (max-width: 767px)
{
    .sk-mobile-bar { display: flex; height: 52px; align-items: center; gap: 8px; padding: 0 8px; background: var(--sk-sb-bg); border-bottom: 1px solid var(--sk-sb-border); color: var(--sk-sb-text); }
    .sk-mobile-bar svg.lucide { width: 20px; height: 20px; stroke-width: 1.75; }
    .sk-sidebar { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: 288px; max-width: 85vw; transform: translateX(-100%); }
    .sk-sidebar.drawer-open { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
    .sk-backdrop.show { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
}

/* ─── Écrans ─── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn .35s ease-out both; }
@media (prefers-reduced-motion: reduce)
{
    .sk-sidebar, .sk-group-children, .fade-in { transition: none; animation: none; }
}