/**
 * S-Cloud — Chrome SharePoint (topbar + rail + footer + dropzone)
 *
 * Override agressif pour ressembler a SharePoint Online :
 *   - Topbar : 48px, fond blanc + bordure basse, logo + search center
 *   - Rail   : 56px fond blanc, icones dark, items espaces
 *   - Footer : tres discret, blanc
 *   - Dropzone invisible : permet drag-drop sans visuel
 */

/* ════════════════════════════════════════════════════════════════════
 *  TOPBAR — 48px style SharePoint (blanc, slim)
 * ════════════════════════════════════════════════════════════════════ */
/* v2.2.98 — Variable globale chrome : 15% navy mix
   85% blanc + 15% navy (#001F3F) = #D9DDE5
   Couleur unifiée pour topbar = sidebar = footer
   Différenciation visuelle via border 1px + ombre subtile */
:root {
    --c-chrome-bg: #D9DDE5;
    --c-chrome-border: rgba(15, 23, 42, .12);
    --c-chrome-text: #1F2937;
    --c-chrome-text-muted: #475569;
}

.app-topbar {
    background: var(--c-chrome-bg) !important;
    border-bottom: 1px solid var(--c-chrome-border) !important;
    box-shadow: 0 1px 2px rgb(0 0 0 / .08) !important;
    min-height: 48px !important;
    height: 48px !important;
    backdrop-filter: none !important;
    color: var(--c-chrome-text) !important;
}
.sc-rail {
    background: var(--c-chrome-bg) !important;
    border-right: 1px solid var(--c-chrome-border) !important;
    color: var(--c-chrome-text) !important;
}
.sc-topbar {
    min-height: 48px !important;
    height: 48px !important;
    background: var(--c-chrome-bg) !important;
    color: var(--c-chrome-text) !important;
    padding: 0 16px !important;
    gap: 12px;
}

/* Logo / brand */
.sc-topbar-brand,
.sc-topbar-logo {
    height: 28px !important;
    max-height: 28px !important;
}
.sc-topbar-logo img,
.app-topbar .sc-topbar img {
    height: 28px !important;
    width: auto !important;
}
.sc-topbar-app-name {
    font-size: .95rem;
    font-weight: 600;
    color: #242424;
    margin-left: 8px;
}

/* Search input central */
.sc-search-wrap {
    max-width: 560px;
    margin: 0 auto;
}
.sc-search-input,
.sc-search-wrap input.sc-search-input {
    /* v2.2.73 — sur fond chrome assombri, search input passe au blanc pour ressortir */
    background: #ffffff !important;
    border: 1px solid #B3B0AD !important;
    color: #242424 !important;
    height: 32px !important;
    padding: 4px 12px 4px 36px !important;
    border-radius: 4px !important;
    font-size: .85rem !important;
}
.sc-search-input::placeholder { color: #605E5C !important; }
.sc-search-input:focus {
    background: #ffffff !important;
    border-color: #5C2D91 !important;
    box-shadow: 0 0 0 2px rgb(92 45 145 / .15) !important;
}
.sc-search-icon {
    color: #484644 !important; /* v2.2.80 — contraste AA sur fond chrome #D2D0CE (5.8:1) */
    left: 12px !important;
}

/* Boutons topbar (cloche, avatar, etc.) */
.sc-topbar-icon-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #242424 !important;
    transition: background .12s;
}
.sc-topbar-icon-btn:hover {
    /* v2.2.93 — hover sur fond #D8E0EA : légèrement plus foncé */
    background: rgba(0,0,0,.08) !important;
    color: #5C2D91 !important;
}
/* v2.3.01 — Badge notification : pastille au COIN du bouton (déborde),
   ne couvre PAS l'icône cloche. Pattern Teams/Discord. */
.sc-topbar-icon-btn {
    position: relative !important;
    overflow: visible !important;
}
.sc-topbar-badge {
    position: absolute !important;
    top: -3px !important;            /* déborde vers le haut du bouton */
    right: -3px !important;          /* déborde vers la droite du bouton */
    background: #D13438 !important;
    color: #fff !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 0 2px #D9DDE5 !important;   /* anneau couleur chrome */
    z-index: 2 !important;
    pointer-events: none !important;            /* ne bloque pas le clic sur la cloche */
    box-sizing: border-box !important;
}

/* Avatar dropdown button */
.sc-avatar-btn {
    height: 32px !important;
    padding: 2px 8px 2px 2px !important;
    background: transparent !important;
    border: none !important;
}
.sc-avatar-btn:hover { background: #F3F2F1 !important; }
.sc-avatar-btn .sc-avatar,
.sc-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: .72rem !important;
}

/* Tenant selector pill */
.sc-tenant-selector {
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid #B3B0AD !important;
    color: #242424 !important;
    font-size: .82rem !important;
    max-width: 200px;
}
.sc-tenant-select {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    font-size: inherit !important;
    max-width: 160px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}
@media (max-width: 640px) {
    .sc-tenant-selector { padding: 0 6px !important; max-width: 130px; }
    .sc-tenant-select { max-width: 110px; font-size: .78rem !important; }
}
.sc-tenant-selector:hover { background: #E5E4E2 !important; }
.sc-tenant-selector.is-supervising {
    background: #EFF6FC !important;
    color: #0078D4 !important;
    border-color: #C7E0F4 !important;
}
.sc-tenant-selector.is-scoped {
    background: #F4EFFC !important;
    color: #5C2D91 !important;
    border-color: #D8C4E5 !important;
}

/* ════════════════════════════════════════════════════════════════════
 *  RAIL VERTICAL — 56px style SharePoint (blanc, icones compactes)
 * ════════════════════════════════════════════════════════════════════ */
.sc-rail {
    /* v2.2.73 — chrome 20% plus sombre */
    width: 48px !important;
    background: #D2D0CE !important;
    border-right: 1px solid #B3B0AD !important;
    box-shadow: none !important;
    top: 48px !important;  /* sous le topbar 48px */
}
.app-main {
    margin-left: 56px !important;
    padding-top: 48px !important;
}

.sc-rail-link {
    width: 40px !important;
    height: 40px !important;
    margin: 4px auto !important;
    border-radius: 4px !important;
    background: transparent !important;
    border: none !important;
    color: #484644 !important; /* v2.2.80 — contraste AA sur fond chrome #D2D0CE (5.8:1) */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background .12s;
}
.sc-rail-link:hover {
    /* v2.2.73 — hover plus contrasté sur rail assombri */
    background: #BEBBB8 !important;
    color: #5C2D91 !important;
}
.sc-rail-link.is-active {
    background: #E1D4F0 !important;
    color: #5C2D91 !important;
    box-shadow: inset 3px 0 0 #5C2D91 !important;
}
.sc-rail-link.is-active .sc-rail-icon { color: #5C2D91 !important; }
.sc-rail-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
    color: inherit !important;
}
.sc-rail-icon svg { width: 20px !important; height: 20px !important; }
.sc-rail-divider {
    width: 32px !important;
    height: 1px !important;
    background: #A19F9D !important;
    margin: 6px auto !important;
}
.sc-rail-badge {
    position: absolute;
    top: 4px; right: 4px;
    background: #D13438 !important;
    color: #fff !important;
    border: 2px solid #fff;
    font-size: 9px;
    min-width: 14px;
    height: 14px;
    border-radius: 999px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Footer du rail (mon compte) */
.sc-rail-footer { padding-bottom: 8px; }

/* ════════════════════════════════════════════════════════════════════
 *  FLYOUTS (panneaux a droite du rail au survol)
 * ════════════════════════════════════════════════════════════════════ */
.sc-flyout {
    background: #ffffff !important;
    border: 1px solid #EDEBE9 !important;
    box-shadow: 0 6px 16px rgb(0 0 0 / .12) !important;
    border-radius: 6px !important;
    min-width: 260px;
}
.sc-flyout-title {
    color: #484644 !important; /* v2.2.80 — contraste AA sur fond chrome #D2D0CE (5.8:1) */
    font-size: .75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    padding: 10px 14px 6px !important;
    border-bottom: 1px solid #F3F2F1 !important;
}
.sc-flyout-item {
    color: #242424 !important;
    padding: 8px 14px !important;
    font-size: .87rem !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.sc-flyout-item:hover {
    background: #F3F2F1 !important;
    color: #5C2D91 !important;
}
.sc-flyout-divider {
    border-color: #F3F2F1 !important;
    margin: 4px 0 !important;
}
.sc-flyout-cta { color: #5C2D91 !important; font-weight: 600 !important; }

/* ════════════════════════════════════════════════════════════════════
 *  FOOTER — discret, blanc, hauteur reduite
 * ════════════════════════════════════════════════════════════════════ */
.app-footer {
    background: var(--c-chrome-bg) !important;
    border-top: 1px solid var(--c-chrome-border) !important;
    padding: 8px 16px !important;
    color: var(--c-chrome-text-muted) !important;
}
.app-footer,
.sc-footer { font-size: 11px !important; }
.sc-footer-brand strong { color: #5C2D91 !important; }
.sc-footer a { color: #484644 !important; text-decoration: none; } /* v2.2.80 — contraste AA */
.sc-footer a:hover { color: #5C2D91 !important; }

/* ════════════════════════════════════════════════════════════════════
 *  DROPZONE invisible (drag-drop fonctionne sans visuel)
 * ════════════════════════════════════════════════════════════════════ */
.sc-dropzone-hidden {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: transparent;
    z-index: -1;
}
.sc-dropzone-hidden.is-dragover {
    pointer-events: auto;
    z-index: 1000;
    background: rgba(92, 45, 145, .08);
    border: 3px dashed #5C2D91;
}

/* Conteneur principal sans padding excessif */
.app-content {
    padding-top: 12px !important;
    background: #ffffff !important;
}

/* Body fond blanc (SharePoint) */
body.app-layout {
    background: #ffffff !important;
}

/* ── Mobile / tablette portrait (< 992px) : sidebar cachée, topbar pleine largeur ── */
/* Aligné sur le même breakpoint que scloud.css (.sc-rail display:none à 991.98px)   */
/* Fix v2.3.04 : was 768px → gap topbar décalé sur tablettes 769–991px.              */
@media (max-width: 991.98px) {
    .app-topbar, .sc-topbar {
        min-height: 56px !important; height: 56px !important;
        padding: 0 10px !important;
        background: #D9DDE5 !important;
        left: 0 !important; top: 0 !important;
        width: 100% !important; right: 0 !important;
    }
    .sc-rail { display: none !important; }
    /* padding-top = topbar (56px) + safe area iOS (notch/barre de statut) */
    .app-main {
        margin-left: 0 !important;
        padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
    }
    /* Espace pour la bottom-nav (76px) + safe area iOS bas (home bar) */
    .app-content {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .app-footer { display: none !important; }  /* remplacé par la bottom-nav mobile */
    .sc-search-wrap { max-width: 100%; }
    .sc-topbar-app-name { display: none; }
    .sc-flyout { display: none !important; }   /* flyouts désactivés sur mobile */
}

/* ════════════════════════════════════════════════════════════════════
 *  v2.2.98 — Layout VSCode/Teams : SIDEBAR PLEINE HAUTEUR
 *
 *  La SIDEBAR occupe toute la hauteur du viewport (top:0 → bottom:0).
 *  TOPBAR et FOOTER sont collés à droite de la sidebar (left:48px).
 *  Pas d'overlap, pas d'espace, juste un border 1px de marquage.
 *
 *  +------+----------------------------------+
 *  |      |          TOPBAR                  |  ← left:64, top:0
 *  | RAIL +----------------------------------+
 *  |      |          MAIN CONTENT            |
 *  |      |                                  |
 *  |      +----------------------------------+
 *  |      |          FOOTER                  |  ← left:64, bottom:0
 *  +------+----------------------------------+
 * ════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    /* SIDEBAR : pleine hauteur, fixée à gauche */
    .sc-rail {
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 48px !important;
        padding-top: 8px !important;
        z-index: 1035 !important;       /* au-dessus de topbar/footer */
        height: 100vh !important;
    }

    /* TOPBAR : commence APRÈS la sidebar, pas d'overlap */
    .app-topbar {
        top: 0 !important;
        left: 48px !important;
        right: 0 !important;
        width: calc(100vw - 48px) !important;
        z-index: 1025 !important;
    }

    /* MAIN CONTENT : décalé à droite de la sidebar */
    .app-main {
        margin-left: 48px !important;
    }

    /* FOOTER : reste dans .app-main donc déjà décalé via margin-left:64 */
    .app-footer {
        position: relative !important;
        margin-left: 0 !important;
        width: 100% !important;
        z-index: 1020 !important;
    }

    /* Flyouts : position dynamique calculée en JS (layout.php) selon l'icône hover.
       On NE force PAS `top` ici — sinon le JS ne peut plus aligner verticalement. */
    .sc-flyout {
        left: 48px !important;
        z-index: 1024 !important;          /* sous topbar (1025), au-dessus du contenu */
        max-height: calc(100vh - 76px) !important;
        overflow-y: auto !important;
    }
}

/* (bloc mobile dupliqué supprimé — fusionné dans le bloc max-width:991.98px ci-dessus) */

/* ════════════════════════════════════════════════════════════════════
 *  v2.2.98 — ENFORCEMENT FINAL : chrome #D9DDE5 (15% navy mix)
 *  Topbar + Sidebar + Footer ont EXACTEMENT la même couleur.
 * ════════════════════════════════════════════════════════════════════ */
.app-topbar,
.app-topbar .sc-topbar,
.sc-rail,
.app-footer,
.app-footer .sc-footer,
.sc-mobile-nav {
    background: #D9DDE5 !important;
    background-color: #D9DDE5 !important;
}

/* Séparateurs 1px de marquage entre zones */
.app-topbar { border-bottom: 1px solid rgba(15, 23, 42, .12) !important; }
.app-footer { border-top:    1px solid rgba(15, 23, 42, .12) !important; }
.sc-rail    { border-right:  1px solid rgba(15, 23, 42, .12) !important; }

/* Texte chrome cohérent */
.app-topbar, .sc-topbar, .sc-rail, .app-footer { color: #1F2937 !important; }
.app-footer, .app-footer a { color: #475569 !important; }
.app-footer a:hover { color: var(--c-brand-600) !important; }