/* =========================================================
   CONFORMID — LAYOUT GLOBAL (sidebar + topbar) & COMPOSANTS DE BASE
   S'appuie sur les tokens de static/css/tokens.css.
   ========================================================= */

body.app-body {
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
}

.app-shell { display: flex; min-height: 100vh; align-items: stretch; }

/* ---- Sidebar ---- */
.app-sidebar {
    width: var(--sidebar-width);
    flex: none;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--navy-2);
    display: flex;
    flex-direction: column;
    padding: 22px 14px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
}

.app-sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 0 8px 20px; border-bottom: 1px solid var(--sidebar-border); margin-bottom: 18px;
}
.app-sidebar-logo {
    width: 32px; height: 32px; border-radius: 8px; background: var(--navy-2);
    border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; flex: none;
}
.app-sidebar-logo-ring { width: 13px; height: 13px; border: 1.5px solid var(--gold); border-radius: 50%; position: relative; }
.app-sidebar-logo-ring::after {
    content: ""; position: absolute; left: 8px; top: 8px; width: 7px; height: 1.5px;
    background: var(--gold); transform: rotate(45deg); transform-origin: 0 0;
}
.app-sidebar-name { font-size: 15px; font-weight: 700; letter-spacing: .2px; color: var(--sidebar-text-active); }
.app-sidebar-name .accent { color: var(--gold); }
.app-sidebar-tagline { font-size: 8.5px; letter-spacing: 1.3px; color: var(--text-secondary); text-transform: uppercase; }

/* ---- Cartes simultanées des rôles métier ---- */
.app-sidebar-role-cards {
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;
}
.app-sidebar-role-card {
    background: #1b2436; border: 1px solid transparent; border-radius: 8px;
    padding: 11px 12px;
}
.app-sidebar-role-card.is-active { border-color: var(--gold); }
.app-sidebar-role-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 7px;
}
.app-sidebar-role-name {
    font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--sidebar-text);
}
.app-sidebar-role-active {
    color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase;
}
.app-sidebar-role-tiers {
    font-size: 13px; font-weight: 700; color: var(--sidebar-text-active);
}
.app-sidebar-role-selectors { display: flex; flex-direction: column; gap: 7px; }
.app-sidebar-role-selector { margin: 0; }
.app-sidebar-role-selector label {
    display: block; margin-bottom: 3px; color: var(--text-secondary);
    font-size: 9px; font-weight: 600;
}

/* Sélecteur de scope (form-select natif Bootstrap) : n'existe que
   dans .app-sidebar-role-card - override scopé par
   ancêtre, même pattern que .ds-form .form-select (creation.css). Le
   chevron Bootstrap par défaut est un SVG à trait foncé (%23343a40),
   invisible sur ce fond sombre : recopié ici avec un trait clair
   (%23f3f1ea, = --sidebar-text-active) sans changer sa taille/position. */
.app-sidebar-role-card .form-select {
    background-color: #232d40;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f3f1ea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 6px top 8px;
    background-size: 10px 8px;
    color: var(--sidebar-text-active);
    border: 1px solid var(--sidebar-border);
    cursor: pointer;
    /* Même police que .app-sidebar-role-tiers (encart mono-tiers) - le
       form-select-sm de Bootstrap réduit sinon la taille (.875rem) et ne
       touche jamais la graisse (400, non gras). Un nom de producteur long
       ("HOLDING TEXTILE HERMES") ne tient pas sur une ligne dans les 236px
       de la sidebar à cette taille/graisse - plutôt qu'une troncature,
       affichage sur plusieurs lignes (hauteur libre, jamais fixée) : le
       select reste natif et fonctionnel (onchange inchangé), seul son
       état fermé s'étire verticalement. Comportement non standardisé,
       vérifié sur Chromium/Edge uniquement : Firefox/Safari ignorent
       white-space ici et retombent sur une ligne unique tronquée, sans
       ellipsis - limitation connue et acceptée (usage Firefox/Safari jugé
       faible sur le parc utilisateurs). */
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    padding: 6px 20px 6px 8px;
    white-space: normal;
    word-break: break-word;
    height: auto;
}
.app-sidebar-role-card .form-select:hover { border-color: var(--sidebar-text); }
.app-sidebar-role-card .form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 89, 0.25);
    color: var(--sidebar-text-active);
    background-color: #232d40;
}
.app-sidebar-role-card .form-select option { background-color: #232d40; color: var(--sidebar-text-active); }
.app-sidebar-role-card .form-select:disabled { opacity: .6; cursor: not-allowed; }
.app-sidebar-role-links {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px;
}
.app-sidebar-role-links form { margin: 0; }
.app-sidebar-role-link {
    appearance: none; border: 1px solid var(--sidebar-border); border-radius: 5px;
    background: #232d40; color: var(--sidebar-text); cursor: pointer;
    font-family: inherit; font-size: 9.5px; font-weight: 600; padding: 4px 6px;
}
.app-sidebar-role-link:hover,
.app-sidebar-role-link.is-active { border-color: var(--gold); color: var(--sidebar-text-active); }
.app-sidebar-role-link:disabled { cursor: not-allowed; opacity: .45; }

.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav-item {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px;
    color: var(--sidebar-text); font-size: 13px; font-weight: 500; text-decoration: none;
}
.app-nav-item:hover { color: var(--sidebar-text-active); background: #1b2436; }
.app-nav-item.is-active { background: #232d40; color: var(--sidebar-text-active); font-weight: 600; }
.app-nav-item.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.app-nav-icon { width: 16px; height: 16px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; }

.app-sidebar-footer {
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sidebar-border);
    display: flex; flex-direction: column; gap: 2px;
}
.app-sidebar-footer .app-nav-item { color: var(--text-tertiary); font-size: 12.5px; }
.app-sidebar-footer button.app-nav-item {
    width: 100%; border: none; background: none; text-align: left; font-family: inherit; cursor: pointer;
}

/* ---- Colonne principale ---- */
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 32px; background: var(--surface); border-bottom: 1px solid var(--border-card);
    flex-wrap: wrap; gap: 12px;
}
.app-topbar-title { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0; }
.app-topbar-subtitle { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.app-topbar-actions { display: flex; align-items: center; gap: 16px; }
.app-topbar-bell {
    width: 34px; height: 34px; border-radius: 9px; background: var(--bg); border: 1px solid var(--border-card);
    display: flex; align-items: center; justify-content: center; font-size: 14px; color: inherit;
}
.app-user-chip { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.app-user-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff;
    font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none;
}
.app-user-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.app-user-role { font-size: 9.5px; color: var(--text-tertiary); letter-spacing: .4px; }

.app-content { padding: 24px 32px 32px; }
.app-messages { padding: 16px 32px 0; }

/* ---- En-tête anonyme (login déjà stylé à part, autres pages registration/*) ---- */
.app-anonymous-topbar { padding: 20px 32px; }
.app-anonymous-brand { font-size: 18px; font-weight: 700; color: var(--ink); text-decoration: none; }
.app-anonymous-brand .accent { color: var(--gold); }

/* ---- Design system : composants réutilisables ---- */
.ds-card { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 16px 18px; }
.ds-card-title { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 0; }

.ds-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ds-badge-info { background: var(--info-bg); color: var(--info); }
.ds-badge-warning { background: var(--warning-bg); color: var(--warning); }
.ds-badge-violet { background: var(--violet-bg); color: var(--violet); }
.ds-badge-danger { background: var(--danger-bg); color: var(--danger); }
.ds-badge-success { background: var(--success-bg); color: var(--success); }
.ds-badge-secondary { background: var(--border-soft); color: var(--text-secondary); }

.ds-btn-primary {
    display: inline-block; text-align: center; cursor: pointer;
    background: var(--blue); color: #fff; border: none; border-radius: var(--radius-control);
    padding: 10px 16px; font-weight: 700; font-size: 13.5px;
}
.ds-btn-primary:hover { background: var(--blue-hover); color: #fff; }
.ds-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.ds-btn-outline {
    display: inline-block; text-align: center; cursor: pointer;
    background: var(--surface); color: var(--ink); border: 1px solid var(--border);
    border-radius: var(--radius-control); padding: 10px 16px; font-weight: 600; font-size: 13.5px;
}
.ds-btn-outline:hover { background: var(--bg); color: var(--ink); }

/* Style premium écrans sponsoring (Tiers sponsorisés) : variante danger de
   .ds-btn-primary (même gabarit page, pas le gabarit .ds-row-action-btn
   plus petit) pour la confirmation d'une action destructive pleine page -
   aucun composant équivalent n'existait déjà (vérifié). Hover par opacité,
   même convention que .ds-row-action-btn:hover, pas de nouvelle couleur. */
.ds-btn-danger {
    display: inline-block; text-align: center; cursor: pointer;
    background: var(--danger); color: #fff; border: none; border-radius: var(--radius-control);
    padding: 10px 16px; font-weight: 700; font-size: 13.5px;
}
.ds-btn-danger:hover { opacity: .88; color: #fff; }
.ds-btn-danger:disabled { opacity: .6; cursor: not-allowed; }

/* Bloc de message pleine largeur (issue de preview/confirmation), même
   palette sémantique que .ds-badge-* mais en bloc plutôt qu'en pastille -
   aucun composant équivalent n'existait déjà (vérifié, les écrans
   sponsoring utilisaient .alert Bootstrap brut, hors charte). */
.ds-callout { border-radius: var(--radius-card); padding: 12px 16px; font-size: 12.5px; line-height: 1.5; }
.ds-callout-info { background: var(--info-bg); color: var(--ink); }
.ds-callout-warning { background: var(--warning-bg); color: var(--ink); }
.ds-callout-success { background: var(--success-bg); color: var(--ink); }

/* .text-warning Bootstrap rend la couleur d'accent Bootstrap par défaut,
   pas --warning (--b5762b) déjà utilisé par .ds-badge-warning - clash de
   teinte à côté d'un badge correctement teinté. */
.ds-text-warning { color: var(--warning); }

@media (max-width: 992px) {
    .app-sidebar { position: static; height: auto; }
    .app-shell { flex-direction: column; }
}