/* ============================================================================
   staysy — roles.css (P21 — adapté à la grammaire Agendrix-exact)
   Définit les couleurs des 4 casquettes (admin_ycs / owner / manager / worker)
   en lien avec les variables théméables de app.css.
   ============================================================================ */

:root {
    /* Couleurs natives par rôle. Réutilisées par les pages pour les pictos
       de section, les data-section-role, les .ycs-hat[data-cap], etc. */
    --role-admin-ycs:  #4F6378;   /* Ardoise — modération plateforme */
    --role-owner:      #C36F4F;   /* Brique — territoire propriétaire */
    --role-manager:    #5C8C72;   /* Sauge — territoire conciergerie */
    --role-worker:     #B8924A;   /* Ocre — territoire terrain */
}

/* Body data-context : liseré subtil en haut */
body[data-context]::before {
    content: '';
    position: fixed; top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.6;
}
body[data-context="admin_ycs"]::before { background: var(--role-admin-ycs); }
body[data-context="owner"]::before     { background: var(--role-owner); }
body[data-context="manager"]::before   { background: var(--role-manager); }
body[data-context="worker"]::before    { background: var(--role-worker); }

/* Casquettes en topbar : couleur de fond actif par rôle */
.ycs-hat[data-cap="admin_ycs"].active {
    background: color-mix(in srgb, var(--role-admin-ycs) 10%, transparent);
    color: var(--role-admin-ycs);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role-admin-ycs) 25%, transparent);
}
.ycs-hat[data-cap="owner"].active {
    background: color-mix(in srgb, var(--role-owner) 10%, transparent);
    color: var(--role-owner);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role-owner) 25%, transparent);
}
.ycs-hat[data-cap="manager"].active {
    background: color-mix(in srgb, var(--role-manager) 12%, transparent);
    color: var(--role-manager);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role-manager) 25%, transparent);
}
.ycs-hat[data-cap="worker"].active {
    background: color-mix(in srgb, var(--role-worker) 12%, transparent);
    color: var(--role-worker);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role-worker) 25%, transparent);
}

/* Étiquettes mono-casquette en topbar (texte serif italique) */
.ycs-hat-label[data-cap="admin_ycs"] { color: var(--role-admin-ycs); }
.ycs-hat-label[data-cap="owner"]     { color: var(--role-owner); }
.ycs-hat-label[data-cap="manager"]   { color: var(--role-manager); }
.ycs-hat-label[data-cap="worker"]    { color: var(--role-worker); }

/* Sections de sidebar : pastille gauche colorée selon le territoire */
.sidebar-section[data-section-role] .sidebar-section-label {
    position: relative;
    padding-left: 18px;
}
.sidebar-section[data-section-role] .sidebar-section-label::before {
    content: '';
    position: absolute;
    left: 8px; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
}
.sidebar-section[data-section-role="admin_ycs"] .sidebar-section-label::before { background: var(--role-admin-ycs); }
.sidebar-section[data-section-role="owner"] .sidebar-section-label::before     { background: var(--role-owner); }
.sidebar-section[data-section-role="manager"] .sidebar-section-label::before   { background: var(--role-manager); }
.sidebar-section[data-section-role="worker"] .sidebar-section-label::before    { background: var(--role-worker); }

/* Item actif dans une section colorée : nuance le fond accent */
.sidebar-section[data-section-role="admin_ycs"] .sidebar-link.active { background: var(--role-admin-ycs); }
.sidebar-section[data-section-role="owner"] .sidebar-link.active     { background: var(--role-owner); }
.sidebar-section[data-section-role="manager"] .sidebar-link.active   { background: var(--role-manager); }
.sidebar-section[data-section-role="worker"] .sidebar-link.active    { background: var(--role-worker); }

/* Avatar utilisateur : nuance par rôle si data-cap */
.ycs-avatar[data-cap="admin_ycs"] { background: var(--role-admin-ycs); color: white; }
.ycs-avatar[data-cap="owner"]     { background: var(--role-owner); color: white; }
.ycs-avatar[data-cap="manager"]   { background: var(--role-manager); color: white; }
.ycs-avatar[data-cap="worker"]    { background: var(--role-worker); color: white; }