/**
 * S-Cloud — Theme SharePoint (Microsoft Fluent-inspired)
 *
 * Reproduit fidelement le look de SharePoint Online :
 *   - Header / banner lavande clair
 *   - Toolbar avec actions horizontales
 *   - Quick filter chips Word/Excel/PPT/PDF
 *   - Liste fichiers : Nom | Modified | Modified By (avatar chip)
 *   - Tuiles : grandes vignettes documents + dossiers jaunes
 *   - Couleurs Fluent : violet #5C2D91, gris clair #F3F2F1
 *
 * Charge en complement de sc-views.css (ne remplace pas, surcharge).
 */

/* ════════════════════════════════════════════════════════════════════
 *  ICONES FICHIERS (SVG generes par sp_file_icon)
 * ════════════════════════════════════════════════════════════════════ */
.sp-file-icon {
    display: inline-block;
    vertical-align: middle;
}

/* Icone dossier SVG */
.sp-folder-icon {
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / .08));
}

/* ════════════════════════════════════════════════════════════════════
 *  AVATAR PILL CHIP (Modified By)
 * ════════════════════════════════════════════════════════════════════ */
.sp-avatar-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 2px;
    border-radius: 999px;
    background: #F3F2F1;
    color: #242424;
    font-size: .78rem;
    line-height: 1.4;
    max-width: 100%;
    border: 1px solid transparent;
    transition: background .12s;
}
.sp-avatar-chip:hover { background: #E5E4E2; }
.sp-avatar-chip-ic {
    width: 24px; height: 24px; border-radius: 50%;
    background: #5C2D91; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600;
    flex-shrink: 0;
    background-position: center;
}
.sp-avatar-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* ════════════════════════════════════════════════════════════════════
 *  EXPLORER / LIBRARY SHAREPOINT-STYLE
 *  Reproduit la page Documents partages d'un site SharePoint
 * ════════════════════════════════════════════════════════════════════ */

/* Banner header lavande (au-dessus du nom de l'espace) */
.sp-site-banner {
    background: linear-gradient(180deg, #F4E8F4 0%, #F8F0F8 100%);
    border-bottom: 1px solid #E1D5E9;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: -16px -16px 0;
}
.sp-site-banner-icon {
    width: 48px; height: 48px;
    background: #038387;
    color: #fff;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    flex-shrink: 0;
}
.sp-site-banner-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #242424;
    line-height: 1.2;
}
.sp-site-banner-sub {
    font-size: .85rem;
    color: #605E5C;
    margin-top: 2px;
}

/* Tabs sous le banner (Home / Documents / Recycle bin) */
.sp-site-tabs {
    background: linear-gradient(180deg, #F8F0F8 0%, #ffffff 100%);
    border-bottom: 1px solid #EDEBE9;
    padding: 0 24px;
    display: flex;
    gap: 24px;
    margin: 0 -16px;
}
.sp-site-tab {
    padding: 12px 4px;
    font-size: .9rem;
    color: #605E5C;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    transition: all .12s;
}
.sp-site-tab:hover { color: #242424; }
.sp-site-tab.is-active {
    color: #5C2D91;
    border-bottom-color: #5C2D91;
    font-weight: 600;
}

/* Toolbar (Share / Copy link / Download / Create or upload) */
.sp-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 20px;
    background: #ffffff;
    border-bottom: 1px solid #EDEBE9;
    flex-wrap: wrap;
}
.sp-toolbar-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: #323130;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: .85rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s;
}
.sp-toolbar-action:hover {
    background: #F3F2F1;
    color: #323130;
}
.sp-toolbar-action--primary {
    background: #5C2D91;
    color: #fff;
    font-weight: 600;
}
.sp-toolbar-action--primary:hover { background: #4B2475; color: #fff; }
.sp-toolbar-spacer { flex: 1; }

/* Breadcrumb SharePoint (icone dossier + chevron + nom) */
.sp-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: auto;
    padding: 6px 8px;
    font-size: 1.05rem;
    font-weight: 600;
}
.sp-breadcrumb-item { color: #242424; text-decoration: none; }
.sp-breadcrumb-sep { color: #605E5C; }

/* Quick filter chips (Word, Excel, PPT, PDF) */
.sp-filter-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #ffffff;
    border-bottom: 1px solid #EDEBE9;
    flex-wrap: wrap;
}
.sp-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 999px;
    background: #F3F2F1;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .12s;
    color: #323130;
    text-decoration: none;
}
.sp-filter-chip:hover { background: #E5E4E2; }
.sp-filter-chip.is-active { border-color: #5C2D91; background: #F4EFFC; }
.sp-filter-chip-view {
    padding: 4px 12px 4px 14px;
    width: auto; border-radius: 16px;
    font-size: .85rem;
    font-weight: 500;
    gap: 6px;
}

/* ════════════════════════════════════════════════════════════════════
 *  LISTE FICHIERS SHAREPOINT (3 colonnes : Name | Modified | Modified By)
 * ════════════════════════════════════════════════════════════════════ */
.sp-list {
    background: #ffffff;
    border-top: 1px solid #EDEBE9;
}

.sp-list-header {
    display: grid;
    grid-template-columns: 1fr 200px 200px 60px;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid #EDEBE9;
    font-size: .8rem;
    font-weight: 600;
    color: #605E5C;
    background: #FAFAFA;
}
/* Variante AVEC colonne checkbox (explorer fichiers/dossiers) */
.sp-list--with-check .sp-list-header,
.sp-list--with-check .sp-list-row {
    grid-template-columns: 28px 1fr 200px 200px 60px;
}
.sp-list--with-check.is-compact .sp-list-header,
.sp-list--with-check.is-compact .sp-list-row {
    grid-template-columns: 24px 1fr 180px 180px 50px;
}
.sp-list-header-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}
.sp-list-header-cell:hover { color: #242424; background: #F0EEFA; border-radius: 4px; }
.sp-list-header-cell[data-sort]:hover { text-decoration: underline; }
.sp-list-header-cell .sp-sort { opacity: .6; font-size: 10px; margin-left: 2px; }
.sp-list-header-cell[aria-sort] { color: #5C2D91; font-weight: 700; }
.sp-list-header-cell[aria-sort] .sp-sort { opacity: 1; color: #5C2D91; }

.sp-list-row {
    display: grid;
    grid-template-columns: 1fr 200px 200px 60px;
    gap: 16px;
    padding: 6px 20px;
    border-bottom: 1px solid #F3F2F1;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: #242424;
    transition: background .08s;
}
.sp-list-row:last-child { border-bottom: none; }
.sp-list-row:hover { background: #F5F5F5; }
.sp-list-row.is-selected { background: #F3F0FC; }

.sp-list-row-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.sp-list-row-icon .sp-file-icon { width: 24px; height: 30px; }
.sp-list-row-icon .sp-folder-icon { width: 28px; height: 22px; }

.sp-list-row-main {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
}
.sp-list-row-name {
    font-size: .9rem;
    color: #242424;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-list-row:hover .sp-list-row-name {
    color: #0078D4;
    text-decoration: underline;
}
.sp-list-row-meta {
    font-size: .85rem;
    color: #605E5C;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════
 *  TUILES SHAREPOINT (grandes vignettes documents + dossiers jaunes)
 * ════════════════════════════════════════════════════════════════════ */
.sp-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    padding: 24px 20px;
    background: #ffffff;
}

.sp-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: #242424;
    cursor: pointer;
    transition: background .12s;
    position: relative;
}
.sp-tile:hover { background: #F5F5F5; }
.sp-tile.is-selected { background: #F3F0FC; outline: 2px solid #5C2D91; outline-offset: -2px; }

.sp-tile-thumb {
    width: 100%;
    aspect-ratio: 1 / 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAFAFA;
    border-radius: 4px;
    position: relative;
}
.sp-tile-thumb .sp-file-icon {
    width: 70%;
    height: auto;
    max-height: 90%;
}
.sp-tile-thumb .sp-folder-icon {
    width: 80%;
    height: auto;
}
.sp-tile-thumb img.sp-tile-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sp-tile-name {
    font-size: .82rem;
    color: #242424;
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    width: 100%;
}
.sp-tile:hover .sp-tile-name {
    color: #0078D4;
    text-decoration: underline;
}
.sp-tile-meta {
    font-size: .72rem;
    color: #605E5C;
    text-align: center;
    line-height: 1.2;
}

/* Selection circle au survol (style SharePoint) */
.sp-tile-check {
    position: absolute;
    top: 8px; right: 8px;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid #C8C6C4;
    background: #ffffff;
    opacity: 0;
    transition: opacity .12s;
}
.sp-tile:hover .sp-tile-check { opacity: 1; }
.sp-tile.is-selected .sp-tile-check {
    opacity: 1;
    background: #5C2D91;
    border-color: #5C2D91;
}

/* Badge extension (cliquable → filtre rapide) */
.sp-ext-badge {
    display: inline-flex;
    align-items: center;
    font-size: .64rem;
    font-weight: 700;
    padding: .1rem .3rem;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    background: #EEF2FF;
    color: #4F46E5;
    border: 1px solid #C7D2FE;
    transition: background .1s, color .1s;
    letter-spacing: .03em;
}
.sp-ext-badge:hover  { background: #C7D2FE; }
.sp-ext-badge.is-active { background: #4F46E5; color: #fff; border-color: #4F46E5; }

/* Sur desktop : badge caché par défaut (les chips rapides suffisent) */
@media (min-width: 992px) {
    .sp-ext-badge { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
 *  MODE MOBILE — adaptations
 * ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .sp-list-header,
    .sp-list-row {
        grid-template-columns: 1fr 100px;
    }
    /* Masquer les colonnes Modifié et Modifié par sur mobile */
    .sp-list-header-cell:nth-child(3),
    .sp-list-header-cell:nth-child(4),
    .sp-list-header-cell:nth-child(5),
    .sp-list-row-meta:nth-child(3),
    .sp-list-row-meta:nth-child(4),
    .sp-list-row-meta:nth-child(5) { display: none; }

    /* ✅ Nom de fichier intégral sur mobile (pas d'ellipsis) */
    .sp-list-row-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
        line-height: 1.35;
    }
    /* Afficher le badge ext sur mobile */
    .sp-ext-badge { display: inline-flex; }

    .sp-tiles {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 12px;
        padding: 12px 8px;
    }
    .sp-toolbar { padding: 8px 12px; }
    .sp-site-banner { padding: 10px 16px; margin: -16px -8px 0; }
    .sp-site-banner-title { font-size: 1.15rem; }
    .sp-site-tabs { padding: 0 12px; gap: 16px; margin: 0 -8px; }
}

/* ════════════════════════════════════════════════════════════════════
 *  Modes d'affichage (4 modes du view_toggle universel)
 *  list = défaut · compact = list dense · autofit = petites tuiles · tiles = grandes tuiles
 * ════════════════════════════════════════════════════════════════════ */
.sp-list.is-compact .sp-list-row { padding: 3px 16px; }
.sp-list.is-compact .sp-list-row-name { font-size: .82rem; }
.sp-list.is-compact .sp-list-row-meta { font-size: .78rem; }
.sp-list.is-compact .sp-list-row-icon { width: 24px; height: 24px; }
.sp-list.is-compact .sp-list-row-icon svg { width: 18px; height: 18px; }
.sp-list.is-compact .sp-list-header { padding: 6px 16px; }

.sp-tiles.is-autofit { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding: 12px; }
.sp-tiles.is-autofit .sp-tile-thumb { width: 64px; height: 64px; }
.sp-tiles.is-autofit .sp-tile-thumb svg { width: 64px; height: 64px; }
.sp-tiles.is-autofit .sp-tile-name { font-size: .82rem; }
.sp-tiles.is-autofit .sp-tile-meta { font-size: .7rem; }

/* ════════════════════════════════════════════════════════════════════
 *  PRÉSENCE EN LIGNE — dot vert sur avatar (v2.2.16)
 * ════════════════════════════════════════════════════════════════════ */
.sp-avatar-chip-ic-wrap { position: relative; display: inline-flex; }
.sp-avatar-online-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    background: #16A34A;       /* vert online */
    border: 1.5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.2);
    animation: scOnlinePulse 2s infinite;
}
@keyframes scOnlinePulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.2); }
    50%      { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.0); }
}
.sp-avatar-chip.is-online .sp-avatar-chip-name {
    font-weight: 600;
}