/* ═══════════════════════════════════════════════════════════════════
   iManage — Demo Switch  (composant de bascule utilisateur sans mdp)
═══════════════════════════════════════════════════════════════════ */

/* ── Trigger (logo Digits dans footer) ── */
#demo_switch_trigger {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    transition: background var(--transition-fast);
    user-select: none;
}
#demo_switch_trigger:hover {
    background: rgba(255,255,255,.08);
}
#demo_switch_trigger.ds-active {
    background: rgba(255,255,255,.12);
}

/* Mode "spectateur" : logo Digits visible pour le branding mais non-interactif
   (réservé au demo admin daniel.elombat). Appliqué via cmo_dev.js. */
#demo_switch_trigger.no-demo {
    cursor: default;
    pointer-events: none;
}
#demo_switch_trigger.no-demo:hover {
    background: transparent;
}

/* Indicateur "mode démo actif" */
.ds-mode-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--status-warning);
    padding: 1px 6px 1px 5px;
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--status-warning) 27%, transparent); /* f59e0b44 */
    background: var(--status-warning-soft);
    margin-left: 6px;
    vertical-align: middle;
}
.ds-mode-indicator .ds-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--status-warning);
    animation: ds-pulse 1.8s ease-in-out infinite;
}
@keyframes ds-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* ── Panel flottant ── */
.ds-panel {
    position: fixed;
    z-index: 1090;
    width: 280px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    /* positionné dynamiquement en JS */
}

/* ── En-tête du panel ── */
.ds-panel-header {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--bs-border-color-translucent, #e9ecef);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ds-panel-header-icon {
    width: 30px; height: 30px;
    border-radius: var(--radius-md);
    background: var(--status-warning-soft);
    color: var(--status-warning);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-size-base);
    flex-shrink: 0;
}
.ds-panel-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--bs-body-color, #212529);
    line-height: 1.2;
}
.ds-panel-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
    padding: 2px 5px;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-base);
    line-height: 1;
}
.ds-panel-close:hover {
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-body-color, #212529);
}

/* ── Liste des utilisateurs ── */
.ds-user-list {
    max-height: 340px;
    overflow-y: auto;
    padding: 6px 0;
}
.ds-user-list::-webkit-scrollbar { width: 4px; }
.ds-user-list::-webkit-scrollbar-track { background: transparent; }
.ds-user-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-xs); }

/* Séparateur de rôle */
.ds-role-sep {
    padding: 6px 14px 2px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #9ca3af);
}
.ds-role-sep + .ds-role-sep {
    padding-top: 10px;
    border-top: 1px solid var(--bs-border-color-translucent, #e9ecef);
    margin-top: 4px;
}

/* Ligne utilisateur */
.ds-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
}
.ds-user-row:hover {
    background: var(--bs-tertiary-bg, #f8f9fa);
}
.ds-user-row.ds-current {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    cursor: default;
}
.ds-user-row.ds-switching {
    opacity: .6;
    pointer-events: none;
}
/* A11y : feedback clavier */
.ds-user-row:focus { outline: none; }
.ds-user-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

/* Avatar initiales */
.ds-avatar {
    width: 34px; height: 34px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: .3px;
}

/* Infos utilisateur */
.ds-user-info {
    flex: 1;
    min-width: 0;
}
.ds-user-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--bs-body-color, #212529);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ds-user-job {
    font-size: var(--font-size-xs);
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge "VOUS" */
.ds-badge-you {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--accent) 9%, transparent); /* 0F766E18 */
    color: var(--accent);
    border: 1px solid var(--accent-border);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Spinner de bascule */
.ds-spinner {
    width: 14px; height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ds-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ── État chargement / erreur ── */
.ds-state {
    padding: 18px 14px;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--bs-secondary-color, #6c757d);
}
.ds-state .ds-state-icon {
    font-size: var(--font-size-xl);
    margin-bottom: 6px;
    opacity: .5;
}

/* ── Dark mode ── */
[data-theme="dark"] .ds-panel {
    background: var(--bg-surface);
    border-color: var(--border);
    box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .ds-panel-header { border-color: var(--border); }
[data-theme="dark"] .ds-panel-title { color: var(--text-primary); }
[data-theme="dark"] .ds-panel-close { color: var(--text-secondary); }
[data-theme="dark"] .ds-panel-close:hover { background: var(--bg-content); color: var(--text-primary); }
[data-theme="dark"] .ds-user-row:hover { background: var(--bg-content); }
[data-theme="dark"] .ds-user-row.ds-current { background: color-mix(in srgb, var(--accent) 9%, transparent); }
[data-theme="dark"] .ds-user-name { color: var(--text-primary); }
[data-theme="dark"] .ds-user-job { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════
   v1.5.0 — Recherche, favoris, back, loader, chip navbar
═══════════════════════════════════════════════════════════════════ */

/* Search box */
.ds-search-wrap {
    position: relative;
    padding: 8px 10px 0;
}
.ds-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 4px;            /* compense le padding-top du wrap */
    font-size: var(--font-size-xs);
    color: var(--bs-secondary-color, #6c757d);
    pointer-events: none;
}
.ds-search {
    width: 100%;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--radius-md);
    padding: 6px 10px 6px 28px;
    font-size: var(--font-size-sm);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ds-search:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}

/* Étoile favoris (clickable inline) */
.ds-fav-toggle {
    background: none;
    border: none;
    padding: 0 6px 0 0;
    cursor: pointer;
    color: var(--text-tertiary);
    font-size: var(--font-size-base);
    line-height: 1;
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.ds-fav-toggle:hover { color: var(--status-warning); transform: scale(1.15); }
.ds-fav-toggle.is-fav { color: var(--status-warning); }
.ds-fav-toggle:focus { outline: none; }
.ds-fav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Badge "ADMIN" (inline dans le nom) */
.ds-badge-admin {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 1px 4px;
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--color-admin) 12%, transparent); /* 6366f120 */
    color: var(--color-admin);
    border: 1px solid color-mix(in srgb, var(--color-admin) 25%, transparent); /* 6366f140 */
    margin-left: 6px;
    vertical-align: 1px;
}

/* Séparateur de groupe "Favoris" */
.ds-role-sep-fav {
    color: var(--status-warning) !important;
    border-top-color: color-mix(in srgb, var(--status-warning) 25%, transparent) !important; /* f59e0b40 */
}
.ds-role-sep-fav .fa-star { margin-right: 4px; font-size: 9px; }

/* Loader bar (convention v3.4.7) */
.ds-loader-bar {
    position: relative;
    height: 2px;
    background: var(--bs-tertiary-bg, #f1f5f9);
    overflow: hidden;
}
.ds-loader-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    width: 40%;
    animation: ds-loader 1.2s ease-in-out infinite;
}
@keyframes ds-loader {
    from { transform: translateX(-100%); }
    to   { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
    .ds-loader-fill { animation-duration: 3s; }
}

/* Footer + bouton retour admin */
.ds-panel-footer {
    padding: 8px 10px;
    border-top: 1px solid var(--bs-border-color-translucent, #e9ecef);
}
.ds-back-btn {
    width: 100%;
    background: var(--status-warning-soft);
    border: 1px solid color-mix(in srgb, var(--status-warning) 25%, transparent); /* f59e0b40 */
    color: var(--status-warning);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ds-back-btn:hover { background: color-mix(in srgb, var(--status-warning) 15%, transparent); } /* f59e0b25 */
.ds-back-btn:disabled { opacity: .6; cursor: wait; }
.ds-back-btn:focus { outline: none; }
.ds-back-btn:focus-visible { outline: 2px solid var(--status-warning); outline-offset: 2px; }
.ds-back-btn .ds-spinner {
    border-color: color-mix(in srgb, var(--status-warning) 25%, transparent); /* f59e0b40 */
    border-top-color: var(--status-warning);   /* cohérent avec la teinte orange */
}

/* Chip navbar "Demo · admin xyz" (button cliquable → ouvre panel + back focus) */
.ds-session-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    background: color-mix(in srgb, var(--status-warning) 9%, transparent); /* f59e0b18 */
    color: var(--status-warning);
    border: 1px solid color-mix(in srgb, var(--status-warning) 25%, transparent); /* f59e0b40 */
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .2px;
    margin-right: 10px;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
    font-family: inherit;
}
.ds-session-chip:hover { background: color-mix(in srgb, var(--status-warning) 16%, transparent); transform: translateY(-1px); } /* f59e0b28 */
.ds-session-chip:focus { outline: none; }
.ds-session-chip:focus-visible { outline: 2px solid var(--status-warning); outline-offset: 2px; }
.ds-session-chip .fa-user-secret { font-size: 10px; }
.ds-session-chip .ds-chip-origin { font-weight: 700; }

/* Dark mode — v1.5.0 additions */
[data-theme="dark"] .ds-search {
    background: var(--bg-content);
    color: var(--text-primary);
    border-color: var(--border);
}
[data-theme="dark"] .ds-fav-toggle { color: var(--text-tertiary); }
[data-theme="dark"] .ds-badge-admin {
    background: color-mix(in srgb, var(--color-admin) 19%, transparent); /* 6366f130 */
    color: color-mix(in srgb, var(--color-admin) 55%, #fff); /* c7d2fe : admin éclairci */
    border-color: color-mix(in srgb, var(--color-admin) 38%, transparent); /* 6366f160 */
}
[data-theme="dark"] .ds-panel-footer { border-top-color: var(--border); }
[data-theme="dark"] .ds-back-btn {
    background: var(--status-warning-soft);
    color: color-mix(in srgb, var(--status-warning) 60%, #fff); /* fbbf24 : warning éclairci */
    border-color: color-mix(in srgb, var(--status-warning) 25%, transparent); /* f59e0b40 */
}
[data-theme="dark"] .ds-session-chip {
    background: var(--status-warning-soft);
    color: color-mix(in srgb, var(--status-warning) 60%, #fff); /* fbbf24 : warning éclairci */
    border-color: color-mix(in srgb, var(--status-warning) 25%, transparent); /* f59e0b40 */
}
[data-theme="dark"] .ds-loader-bar { background: var(--bg-surface); }
[data-theme="dark"] .ds-role-sep { color: var(--text-secondary); border-color: var(--border); }
[data-theme="dark"] .ds-user-list::-webkit-scrollbar-thumb { background: var(--border-strong); }