/* ============================================================
   Crudia UI — Portail client (centre d'aide public + demandes)
   Layout : Components/Layout/PortalLayout.razor ; pages : Components/Pages/Portal/*.
   Tokens uniquement (crudia-tokens.css). Les couleurs de marque du tenant arrivent sous forme de
   propriétés personnalisées posées sur .cr-portal (valeurs hex validées côté serveur) :
     --portal-brand, --portal-on-brand, --portal-accent, et, si la couleur primaire est assez
     contrastée, une surcharge locale de --cr-color-primary*, --cr-color-link, --cr-focus-ring.
   Toutes les règles sont préfixées .cr-portal / .cr-portal-* : sans effet hors du portail.
   ============================================================ */

.cr-portal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--cr-color-bg);
    font-family: var(--cr-font-family);
    color: var(--cr-color-text);
}

/* ---------- En-tête ---------- */
.cr-portal__header {
    position: sticky;
    top: 0;
    z-index: var(--cr-z-shell);
    background: var(--cr-color-surface);
    border-top: 3px solid var(--portal-accent, var(--portal-brand, var(--cr-color-surface)));
    border-bottom: 1px solid var(--cr-color-border);
}
.cr-portal__bar {
    display: flex;
    align-items: center;
    gap: var(--cr-space-6);
    max-width: 1040px;
    height: 52px;
    margin: 0 auto;
    padding: 0 var(--cr-space-8);
}
.cr-portal__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--cr-space-4);
    min-width: 0;
    color: var(--cr-color-text-strong);
    font-weight: var(--cr-font-weight-semibold);
    text-decoration: none;
}
.cr-portal__brand:hover { color: var(--cr-color-text-strong); text-decoration: none; }
.cr-portal__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--cr-radius-md);
    background: var(--portal-brand, var(--cr-color-primary));
    color: var(--portal-on-brand, var(--cr-color-text-inverse));
    font-size: var(--cr-font-size-md);
    font-weight: var(--cr-font-weight-bold);
}
.cr-portal__logo-img { display: block; max-height: 32px; max-width: 160px; object-fit: contain; }
.cr-portal__brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.cr-portal__brand-sub {
    padding-left: var(--cr-space-4);
    border-left: 1px solid var(--cr-color-border);
    color: var(--cr-color-text-secondary);
    font-weight: var(--cr-font-weight-regular);
    white-space: nowrap;
}

.cr-portal__nav { display: flex; align-items: center; gap: var(--cr-space-2); }
.cr-portal__nav-link {
    display: inline-flex;
    align-items: center;
    height: var(--cr-control-height-md);
    padding: 0 var(--cr-space-5);
    border-radius: var(--cr-radius-md);
    color: var(--cr-color-text-secondary);
    font-weight: var(--cr-font-weight-medium);
    white-space: nowrap;
}
.cr-portal__nav-link:hover { background: var(--cr-color-hover); color: var(--cr-color-text-strong); text-decoration: none; }
.cr-portal__nav-link.active { background: var(--cr-color-selected); color: var(--cr-color-text-strong); }

.cr-portal__actions { display: flex; align-items: center; gap: var(--cr-space-4); margin-left: auto; }
.cr-portal__user {
    display: inline-flex;
    align-items: center;
    gap: var(--cr-space-3);
    height: var(--cr-control-height-md);
    padding: 0 var(--cr-space-3);
    border: 0;
    border-radius: var(--cr-radius-md);
    background: transparent;
    color: var(--cr-color-text);
    font: inherit;
    cursor: pointer;
}
.cr-portal__user:hover { background: var(--cr-color-hover); }
.cr-portal__user:focus-visible { outline: none; box-shadow: var(--cr-focus-ring); }
.cr-portal__user .bi-chevron-down { font-size: var(--cr-font-size-xs); }
.cr-portal__user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-portal__user-card { min-width: 240px; padding: 10px 12px 8px; margin-bottom: var(--cr-space-2); border-bottom: 1px solid var(--cr-color-border-subtle); }

/* ---------- Contenu ---------- */
.cr-portal__main {
    flex: 1 1 auto;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 var(--cr-space-8) var(--cr-space-10);
    outline: none;
}

/* Les pages du portail utilisent CrPage : défilement du document (pas de conteneur défilant)
   et en-tête posé sur le fond, dans la colonne centrée. */
.cr-portal .cr-page { height: auto; min-height: 0; background: transparent; }
.cr-portal .cr-page-header { padding: var(--cr-space-8) 0 var(--cr-space-5); background: transparent; border-bottom: 0; }
.cr-portal .cr-page-toolbar { padding: 0 0 var(--cr-space-5); background: transparent; border-bottom: 0; }
.cr-portal .cr-page-body { overflow: visible; padding: 0; }

/* ---------- Pied de page ---------- */
.cr-portal__footer { background: var(--cr-color-surface); border-top: 1px solid var(--cr-color-border); }
.cr-portal__footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--cr-space-5);
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--cr-space-6) var(--cr-space-8);
    font-size: var(--cr-font-size-sm);
    color: var(--cr-color-text-secondary);
}
.cr-portal__footer-html { min-width: 0; overflow-wrap: anywhere; }
.cr-portal__footer-html p { margin: 0; }
.cr-portal__footer-html a { color: var(--cr-color-link); text-decoration: underline; }
.cr-portal__powered { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); white-space: nowrap; }

/* ---------- Accueil : recherche d'abord ---------- */
.cr-portal-search { padding: var(--cr-space-9) 0 var(--cr-space-8); }
.cr-portal-search__title { margin: 0 0 var(--cr-space-2); font-size: var(--cr-font-size-xxl); line-height: 28px; font-weight: var(--cr-font-weight-semibold); color: var(--cr-color-text-strong); }
.cr-portal-search__subtitle { margin: 0 0 var(--cr-space-6); color: var(--cr-color-text-secondary); }
.cr-portal-search__field { max-width: 640px; }
.cr-portal-search__field .cr-input { height: var(--cr-control-height-lg); font-size: var(--cr-font-size-lg); }

.cr-portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--cr-space-6); align-items: start; }
.cr-portal-aside { display: flex; flex-direction: column; gap: var(--cr-space-6); min-width: 0; }

/* Listes (articles, demandes) bord à bord dans un CrPanel Flush */
.cr-portal-list { list-style: none; margin: 0; padding: 0; }
.cr-portal-list > li { border-bottom: 1px solid var(--cr-color-border-subtle); }
.cr-portal-list > li:last-child { border-bottom: 0; }
.cr-portal-list__link { display: block; padding: 10px var(--cr-space-6); color: var(--cr-color-text); text-decoration: none; }
.cr-portal-list__link:hover { background: var(--cr-color-hover); text-decoration: none; color: var(--cr-color-text); }
.cr-portal-list__link:focus-visible { outline: none; box-shadow: inset var(--cr-focus-ring); }
.cr-portal-list__title { display: block; font-weight: var(--cr-font-weight-semibold); color: var(--cr-color-link); overflow-wrap: anywhere; }
.cr-portal-list__excerpt {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: var(--cr-font-size-sm);
    line-height: var(--cr-line-height-sm);
    color: var(--cr-color-text-secondary);
}
.cr-portal-list__row { display: flex; align-items: center; gap: var(--cr-space-4); min-width: 0; }
.cr-portal-list__row .cr-portal-list__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-portal-list__meta { flex-shrink: 0; font-size: var(--cr-font-size-sm); color: var(--cr-color-text-secondary); white-space: nowrap; }

.cr-portal-summary { display: flex; flex-wrap: wrap; gap: var(--cr-space-2) var(--cr-space-5); padding: var(--cr-space-5) var(--cr-space-6); border-bottom: 1px solid var(--cr-color-border-subtle); font-size: var(--cr-font-size-sm); color: var(--cr-color-text-secondary); }
.cr-portal-summary strong { color: var(--cr-color-text-strong); font-variant-numeric: tabular-nums; }

/* ---------- Article ---------- */
.cr-portal-article { max-width: 760px; }
.cr-portal-article__excerpt { margin: 0 0 var(--cr-space-6); font-size: var(--cr-font-size-lg); line-height: var(--cr-line-height-lg); color: var(--cr-color-text-secondary); }
.cr-portal-article__body { font-size: 15px; line-height: 1.6; }
.cr-portal-article__meta { margin-top: var(--cr-space-5); }
.cr-portal-vote { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cr-space-4); }
.cr-portal-vote__label { font-weight: var(--cr-font-weight-medium); color: var(--cr-color-text-strong); }
.cr-portal-vote__feedback { font-size: var(--cr-font-size-sm); color: var(--cr-color-text-secondary); }

/* ---------- Demande ---------- */
.cr-portal-ticket { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--cr-space-6); align-items: start; }
.cr-portal-ticket__main { display: flex; flex-direction: column; gap: var(--cr-space-6); min-width: 0; }
.cr-portal-ticket__conversation { padding: 0 var(--cr-space-6); }
.cr-portal-ticket__notice { padding: var(--cr-space-5) var(--cr-space-6); }
.cr-portal-csat { display: flex; flex-direction: column; gap: var(--cr-space-5); }
.cr-portal-csat__choices { display: flex; flex-wrap: wrap; gap: var(--cr-space-4); }
.cr-portal-csat__current { display: inline-flex; align-items: center; gap: var(--cr-space-3); font-weight: var(--cr-font-weight-medium); color: var(--cr-color-text-strong); }

/* ---------- Réactif ---------- */
@media (max-width: 899.98px) {
    .cr-portal-grid, .cr-portal-ticket { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639.98px) {
    .cr-portal__bar { gap: var(--cr-space-4); padding: 0 var(--cr-space-6); }
    .cr-portal__main { padding: 0 var(--cr-space-6) var(--cr-space-9); }
    .cr-portal__footer-inner { padding: var(--cr-space-6); }
    .cr-portal__brand-sub, .cr-portal__hide-sm { display: none; }
    .cr-portal__nav-link { padding: 0 var(--cr-space-4); }
    .cr-portal-search { padding: var(--cr-space-8) 0 var(--cr-space-6); }
}