/* ==========================================================================
   Alif Back-office — design system (modern, light, professional, épuré)
   Font: Inter · Components: Syncfusion fluent2 · calm restful palette
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/InterVariable.woff2') format('woff2');
}

:root {
    /* Brand (harmonised with Syncfusion fluent2 blue) */
    --brand: #0f6cbd;
    --brand-hover: #115ea3;
    --brand-active: #0c3b5e;
    --brand-tint: #eef5fc;
    --brand-tint-strong: #dcebf9;

    /* Neutrals — calm cool grays */
    --bg: #f3f6f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: #e6ebf1;
    --border-strong: #d4dce6;

    /* Text */
    --text: #1f2b3d;
    --text-soft: #46556b;
    --text-muted: #7c8aa0;

    /* Feedback */
    --success: #0f8b5f;
    --success-tint: #e7f6ef;
    --warning: #b5730b;
    --warning-tint: #fbf1e0;
    --danger: #c8342e;
    --danger-tint: #fbeceb;

    /* Shape & depth */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-xs: 0 1px 2px rgba(16, 33, 60, .05);
    --shadow-sm: 0 1px 3px rgba(16, 33, 60, .07), 0 1px 2px rgba(16, 33, 60, .04);
    --shadow-md: 0 6px 18px rgba(16, 33, 60, .08), 0 2px 6px rgba(16, 33, 60, .05);

    /* Layout */
    --sidebar-w: 268px;
    --header-h: 64px;

    --font-sans: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Base ---------- */
html, body {
    font-family: var(--font-sans);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-color: var(--bg);
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.6;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5 {
    color: var(--text);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 .35em;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.075rem; font-weight: 620; }

p { color: var(--text-soft); }

a, .btn-link { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

::selection { background: var(--brand-tint-strong); }

/* Slim, calm scrollbars */
* { scrollbar-width: thin; scrollbar-color: #cdd6e2 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cdd6e2; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #b6c2d2; }

h1:focus { outline: none; }

/* ---------- Page header (title band above content) ---------- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-header h1 { margin-bottom: .25rem; }
.page-header p { margin: 0; color: var(--text-muted); font-size: .95rem; }

/* ---------- Buttons (Syncfusion) — softer, roomier ---------- */
.e-btn, .e-css.e-btn {
    border-radius: var(--radius-sm);
    font-weight: 550;
    letter-spacing: -0.01em;
    padding: 8px 16px;
    transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.e-btn.e-primary {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: var(--shadow-xs);
}
.e-btn.e-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.e-btn.e-success { background: var(--success); border-color: var(--success); }
.e-btn.e-danger  { background: var(--danger);  border-color: var(--danger); }
.e-btn.e-warning { background: var(--warning); border-color: var(--warning); }
.e-btn.e-small { padding: 5px 11px; font-size: .82rem; border-radius: 7px; }
.e-btn.e-flat { box-shadow: none; }
.e-grid td .e-btn.e-small { margin: 0 3px; }

/* ---------- Inputs (Syncfusion) — aligned & calm ---------- */
.e-input-group, .e-ddl.e-input-group, .e-float-input {
    border-radius: var(--radius-sm) !important;
}
.e-input-group.e-control-wrapper { border-color: var(--border-strong); }
.e-input-group.e-input-focus, .e-ddl.e-input-focus {
    box-shadow: 0 0 0 3px var(--brand-tint) !important;
    border-color: var(--brand) !important;
}
input.form-control, select.form-control, .e-input {
    border-radius: var(--radius-sm);
    border-color: var(--border-strong);
    color: var(--text);
    font-family: var(--font-sans);
}
input.form-control:focus, select.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
}

/* ---------- Grids (Syncfusion) — airy, professional ---------- */
.e-grid {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    font-family: var(--font-sans);
}
.e-grid .e-gridheader { border-top: 0; background: var(--surface-2); }
.e-grid .e-headercell, .e-grid .e-columnheader { background: var(--surface-2); }
.e-grid .e-headercelldiv {
    color: var(--text-muted);
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.e-grid .e-row .e-rowcell {
    color: var(--text-soft);
    border-color: var(--border);
    padding-top: 11px;
    padding-bottom: 11px;
}
.e-grid .e-row:hover .e-rowcell,
.e-grid .e-row:hover td.e-rowcell { background: var(--brand-tint) !important; }
.e-grid .e-altrow .e-rowcell { background: #fbfcfe; }
.e-grid .e-row.e-selectionbackground .e-rowcell,
.e-grid td.e-selectionbackground { background: var(--brand-tint-strong) !important; }

/* ---------- Dialogs (Syncfusion) — refined modal ---------- */
.e-dialog {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    overflow: hidden;
}
.e-dialog .e-dlg-header { font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
.e-dialog .e-dlg-header-content { border-bottom: 1px solid var(--border); padding: 18px 22px; }
.e-dialog .e-dlg-content { padding: 20px 22px; color: var(--text-soft); }
.e-dlg-overlay { background: rgba(23, 37, 58, .38); backdrop-filter: blur(2px); }

/* ---------- Forms inside dialogs — perfectly aligned ---------- */
.e-dialog .e-dlg-content .mb-2 { margin-bottom: 1rem !important; }
.e-dialog .e-dlg-content label,
.form-field label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-soft);
    margin-bottom: .4rem;
    letter-spacing: -0.005em;
}
.e-dialog .e-dlg-content .e-input-group,
.e-dialog .e-dlg-content input.form-control,
.e-dialog .e-dlg-content .e-richtexteditor { width: 100%; }
.e-dialog .e-dlg-content .mt-3 {
    display: flex; gap: .5rem; padding-top: .5rem;
    border-top: 1px solid var(--border); margin-top: 1.25rem !important;
}

/* checkbox rows */
label > input[type=checkbox] { margin-right: .5rem; transform: translateY(1px); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--radius-sm); border: 1px solid transparent; padding: .7rem 1rem; font-size: .9rem; }
.alert-danger  { background: var(--danger-tint);  color: #8f221d; border-color: #f2cecb; }
.alert-success { background: var(--success-tint); color: #0a6344; border-color: #c7ecdb; }
.alert-info    { background: var(--brand-tint);   color: var(--brand-active); border-color: var(--brand-tint-strong); }
.alert-warning { background: var(--warning-tint); color: #8a5709; border-color: #f0dcb8; }

/* ---------- Images in grids (logos / photos) ---------- */
.e-grid img { border-radius: 6px; }

/* ---------- Validation ---------- */
.valid.modified:not([type=checkbox]) { outline: none; }
.invalid { outline: 1px solid var(--danger); border-radius: var(--radius-sm); }
.validation-message { color: var(--danger); font-size: .85rem; }

/* ==========================================================================
   Login page (split screen) — modern, professional
   ========================================================================== */
.auth { min-height: 100vh; display: flex; background: var(--surface); }

/* Brand panel */
.auth-brand {
    position: relative;
    flex: 0 0 46%;
    max-width: 660px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 3.25rem;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(150deg, #1b8ae0 0%, #0f6cbd 42%, #0a487e 100%);
}
.auth-brand-top { display: flex; align-items: center; gap: .7rem; position: relative; z-index: 2; }
.auth-logo-mark {
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em;
    color: #0f6cbd; background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
.auth-logo-text { font-weight: 750; font-size: 1.35rem; letter-spacing: -.02em; }

.auth-brand-content { position: relative; z-index: 2; max-width: 31rem; }
.auth-headline { color: #fff; font-size: 2.2rem; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; margin-bottom: 1.1rem; }
.auth-tag { color: rgba(255, 255, 255, .86); font-size: 1.02rem; line-height: 1.65; margin-bottom: 2rem; }
.auth-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .95rem; }
.auth-points li { display: flex; align-items: center; gap: .75rem; color: rgba(255, 255, 255, .95); font-size: .96rem; font-weight: 500; }
.auth-check { flex: 0 0 auto; color: #fff; background: rgba(255, 255, 255, .2); border-radius: 50%; padding: 4px; box-sizing: content-box; }
.auth-brand-foot { position: relative; z-index: 2; color: rgba(255, 255, 255, .7); font-size: .8rem; }

/* decorative layers */
.auth-blob { position: absolute; border-radius: 50%; z-index: 1; }
.auth-blob-1 { width: 460px; height: 460px; right: -150px; top: -140px; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%); }
.auth-blob-2 { width: 380px; height: 380px; left: -130px; bottom: -150px; background: radial-gradient(circle at 40% 40%, rgba(140, 205, 255, .5), rgba(255, 255, 255, 0) 70%); }
.auth-grid-overlay {
    position: absolute; inset: 0; z-index: 1; opacity: .14;
    background-image: linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(circle at 72% 18%, #000 0%, transparent 62%);
    mask-image: radial-gradient(circle at 72% 18%, #000 0%, transparent 62%);
}

/* Form panel */
.auth-form-wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--surface); }
.auth-card { width: 100%; max-width: 400px; }
.auth-mobile-logo { display: none; align-items: center; gap: .6rem; margin-bottom: 2rem; }
.auth-mobile-name { font-weight: 600; color: var(--text); font-size: 1.05rem; }
.auth-mobile-name b { color: var(--brand); font-weight: 750; }

.auth-title { font-size: 1.85rem; font-weight: 700; letter-spacing: -.025em; margin-bottom: .35rem; color: var(--text); }
.auth-subtitle { color: var(--text-muted); font-size: .98rem; margin-bottom: 2rem; }

/* ---------- Boîtes de dialogue redimensionnables ---------- */
/* Portée par une classe et non par « .e-dlg-content » tout court : le back-office compte une
   quarantaine de boîtes, dont la plupart sont des formulaires courts qui n'ont rien à gagner à
   devenir des colonnes flex — et beaucoup à perdre si leurs champs se mettaient à s'étirer. */
.bo-dlg-flex .e-dlg-content { display: flex; flex-direction: column; }

/* min-height:0 est la ligne qui fait réellement le travail. Sans elle, un enfant flex refuse de
   descendre sous sa taille de contenu : la grille déborderait de la boîte au lieu de rétrécir
   avec elle, et la réduire n'aurait aucun effet visible. */
.bo-dlg-flex .e-dlg-content > .e-grid,
.bo-dlg-flex .e-dlg-content > .bo-dlg-corps { flex: 1 1 auto; min-height: 0; }

/* Le corps qui défile quand le contenu n'est pas une grille mais du texte de longueur inconnue. */
.bo-dlg-flex .e-dlg-content > .bo-dlg-corps { overflow-y: auto; }

/* Un enfant de colonne flex s'étire sur toute la LARGEUR par défaut : le bouton « Ajouter un
   droit » est devenu une bande pleine largeur à la seconde où la boîte est passée en flex.
   Constaté à l'essai, pas prévu. Les boutons reprennent leur largeur naturelle ; la grille, elle,
   doit bien s'étirer — d'où la règle ciblée plutôt qu'un align-items sur le conteneur. */
.bo-dlg-flex .e-dlg-content > .e-btn { align-self: flex-start; }

/* ---------- Sélecteur de langue de l'écran de connexion ---------- */
/* Les boutons portent la même classe .bo-lang-opt que ceux de la barre latérale, mais PAS les
   mêmes règles : celles du menu vivent dans NavMenu.razor.css, isolées par le CSS scopé de
   Blazor, et ne franchissent donc pas la frontière du composant. D'où cette reprise ici — ce
   n'est pas une duplication par négligence, c'est la conséquence de l'isolation. */
.auth-lang { display: flex; gap: .3rem; margin-bottom: 1.6rem; }
.auth-lang .bo-lang-opt {
    padding: .3rem .75rem; font-size: .75rem; font-weight: 600; letter-spacing: .03em;
    color: var(--text-muted); background: transparent; cursor: pointer;
    border: 1px solid rgba(0,0,0,.12); border-radius: var(--radius-sm, 6px);
}
.auth-lang .bo-lang-opt:hover { background: rgba(0,0,0,.04); }
/* La langue courante se lit à la COULEUR et à aria-pressed : le contraste seul ne dit rien à un
   lecteur d'écran. */
.auth-lang .bo-lang-opt.is-active { color: #fff; background: var(--brand); border-color: var(--brand); }

/* ---------- Écran de connexion en arabe ---------- */
/* dir="rtl" retourne le texte mais PAS les décalages écrits en dur : l'icône du champ est
   positionnée à gauche et la saisie réserve sa place par un padding gauche. Sans ces deux
   règles, l'icône se superposerait au texte arabe, qui commence à droite. */
.auth[dir="rtl"] .auth-input-ico { left: auto; right: .95rem; }
.auth[dir="rtl"] .auth-input .form-control { padding: 0 2.75rem 0 1rem; }

.auth-form { display: flex; flex-direction: column; }
.auth-field { margin-bottom: 1.15rem; }
.auth-field label { display: block; font-size: .82rem; font-weight: 600; color: var(--text-soft); margin-bottom: .45rem; }
.auth-input { position: relative; }
.auth-input-ico { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.auth-input .form-control {
    width: 100%; height: 48px;
    padding: 0 1rem 0 2.75rem;
    border-radius: 11px;
    border: 1px solid var(--border-strong);
    font-size: .96rem;
    color: var(--text);
    background: var(--surface);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.auth-input .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); outline: none; }
.auth-input .form-control::placeholder { color: #aab4c4; }
[dir="rtl"] .auth-input-ico { left: auto; right: .95rem; }
[dir="rtl"] .auth-input .form-control { padding: 0 2.75rem 0 1rem; }

.auth-alert { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.25rem; }

.auth-submit {
    margin-top: .5rem; height: 50px;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    border: none; border-radius: 12px;
    color: #fff; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; cursor: pointer;
    background: linear-gradient(135deg, #1b8ae0, #0f6cbd);
    box-shadow: 0 8px 18px rgba(15, 108, 189, .32);
    transition: transform .12s ease, box-shadow .14s ease, filter .14s ease;
}
.auth-submit:hover { filter: brightness(1.03); box-shadow: 0 10px 22px rgba(15, 108, 189, .42); transform: translateY(-1px); }
.auth-submit:active { transform: translateY(0); }
.auth-submit svg { transition: transform .16s ease; }
.auth-submit:hover svg { transform: translateX(3px); }

.auth-foot { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 2rem; color: var(--text-muted); font-size: .8rem; }
.auth-form .validation-message { margin-top: .35rem; font-size: .82rem; }

@media (max-width: 860px) {
    .auth-brand { display: none; }
    .auth-mobile-logo { display: flex; }
    .auth-form-wrap { background: var(--bg); }
    .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 2rem 1.75rem; box-shadow: var(--shadow-md); }
}

/* ---------- Grid action icons (Actions columns) ---------- */
.grid-action {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0 2px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color .13s ease, color .13s ease, border-color .13s ease;
}
.grid-action:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.grid-action:active { transform: translateY(.5px); }
.grid-action-brand:hover   { color: var(--brand);   background: var(--brand-tint);   border-color: var(--brand-tint-strong); }
.grid-action-danger:hover  { color: var(--danger);  background: var(--danger-tint);  border-color: #f2cecb; }
.grid-action-success:hover { color: var(--success); background: var(--success-tint); border-color: #c7ecdb; }
.grid-action-warning:hover { color: var(--warning); background: var(--warning-tint); border-color: #f0dcb8; }

/* ==========================================================================
   Collapsible sidebar (checkbox #sb-toggle in MainLayout) + smooth animation
   ========================================================================== */
.sb-toggle { display: none; }

@media (min-width: 901px) {
    /* collapse the sidebar to an icon rail by shrinking its width variable */
    .sb-toggle:checked ~ .page { --sidebar-w: 76px; }

    .sb-toggle:checked ~ .page .brand { justify-content: center; padding-left: .5rem; padding-right: .5rem; gap: 0; }
    .sb-toggle:checked ~ .page .brand-text,
    .sb-toggle:checked ~ .page .brand-mark { display: none; }

    .sb-toggle:checked ~ .page .nav-scroll { padding-left: .55rem; padding-right: .55rem; }
    .sb-toggle:checked ~ .page .nav-group-label { display: none; }
    .sb-toggle:checked ~ .page .nav-group + .nav-group {
        border-top: 1px solid var(--border);
        margin-top: .45rem;
        padding-top: .45rem;
    }
    .sb-toggle:checked ~ .page .nav-text { display: none; }
    .sb-toggle:checked ~ .page .nav-link { justify-content: center; padding: .55rem; gap: 0; }

    .sb-toggle:checked ~ .page .nav-footer { justify-content: center; padding: .75rem 0; }
    .sb-toggle:checked ~ .page .nav-user-name,
    .sb-toggle:checked ~ .page .nav-logout-form { display: none; }
}

/* ---------- Error UI ---------- */
.blazor-error-boundary {
    background: #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; border-radius: var(--radius-sm);
}
.blazor-error-boundary::after { content: "Une erreur s'est produite."; }

/* ---------- KYC document review (Users console) ---------- */
.kyc-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; max-width: 900px; }
.kyc-doc-item { display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; border: 1px solid var(--border, #e6ebf1); border-radius: 10px; background: var(--surface, #fff); text-decoration: none; color: var(--text, #1f2b3d); transition: border-color .13s ease, box-shadow .13s ease; }
.kyc-doc-item:hover { border-color: var(--brand, #0f6cbd); box-shadow: 0 2px 8px rgba(16,33,60,.08); }
.kyc-doc-badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .18rem .5rem; border-radius: 999px; background: var(--brand-tint, #eef5fc); color: var(--brand, #0f6cbd); flex: 0 0 auto; }
.kyc-doc-label { flex: 1 1 auto; font-size: .88rem; }
.kyc-doc-open { font-size: .8rem; font-weight: 600; color: var(--brand, #0f6cbd); flex: 0 0 auto; }

/* ---------- Project detail / validation workflow (Projects console) ---------- */
.proj-head { margin-bottom: 1rem; }
.proj-head h1 { display: inline-flex; align-items: baseline; gap: .5rem; font-size: 1.5rem; margin: 0 .6rem 0 0; }
.proj-head h1 small { font-size: .85rem; font-weight: 500; color: var(--text-muted); }
.proj-owner { color: var(--text-soft); font-size: .9rem; margin-top: .25rem; }

.status-badge { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .22rem .6rem; border-radius: 999px; background: var(--brand-tint); color: var(--brand); vertical-align: middle; }
.status-badge.online, .status-badge.cloture, .status-badge.valide { background: var(--success-tint); color: var(--success); }
.status-badge.blocked, .status-badge.non_cloture, .status-badge.refuse { background: var(--danger-tint); color: var(--danger); }
.status-badge.en_attente_de_cloture, .status-badge.prevalidation, .status-badge.ready, .status-badge.encours { background: var(--warning-tint); color: var(--warning); }
.status-badge.draft { background: var(--brand-tint); color: var(--text-muted); }

.action-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1.25rem; }

.val-section { margin-bottom: 1.5rem; }
.val-section h3 { font-size: 1.05rem; margin-bottom: .6rem; color: var(--text); }

.val-item { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: .5rem; }
.val-item-main { display: flex; align-items: flex-start; gap: .6rem; flex: 1 1 260px; min-width: 0; }
.val-dot { flex: 0 0 auto; width: .6rem; height: .6rem; margin-top: .35rem; border-radius: 50%; background: var(--text-muted); }
.val-item.ok .val-dot { background: var(--success); }
.val-item.ko .val-dot { background: var(--danger); }
.val-item.ok { border-color: var(--success-tint); background: var(--success-tint); }
.val-item.ko { border-color: var(--danger-tint); background: var(--danger-tint); }
.val-label { font-weight: 600; color: var(--text); font-size: .9rem; }
.val-value { color: var(--text-soft); font-size: .85rem; word-break: break-word; }
.val-actions { display: flex; flex: 0 0 auto; gap: .4rem; }
.val-motif { flex: 1 1 100%; display: flex; gap: .5rem; align-items: flex-start; margin-top: .4rem; }
.val-motif textarea { min-height: 2.2rem; flex: 1 1 auto; }
.val-motif-shown { flex: 1 1 100%; font-size: .82rem; color: var(--danger); margin-top: .3rem; }

.modal-backdrop-custom { position: fixed; inset: 0; background: rgba(16, 33, 60, .45); display: flex; align-items: center; justify-content: center; z-index: 1050; }
.modal-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 1.25rem 1.5rem; width: 100%; max-width: 420px; }
.modal-card h3 { margin-top: 0; margin-bottom: .75rem; }
.modal-card .hint { color: var(--text-muted); font-size: .85rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* Onglets de validation projet (SfTab) */
.proj-val-tabs { margin-top: 1rem; }
.val-tab-count { font-size: .72em; opacity: .6; margin-left: .35rem; font-weight: 600; }
.proj-val-tabs .val-section { padding: .25rem 0; }

/* Panneau compte (page détail membre) */
.acct-panel { margin-bottom: 1.25rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.acct-panel h3 { margin: 0 0 .25rem; font-size: 1rem; }
.acct-panel .action-bar { margin: .5rem 0 0; }

.val-doc-link { display: inline-block; margin-top: .25rem; font-size: .85rem; font-weight: 600; color: var(--brand); }

/* ---------- Grille principale d'une page : elle occupe le reste de la fenetre ---------- */
/* La hauteur des SfGrid etait figee en pixels — 600 px pour vingt-quatre d'entre elles — et le
   bas de l'ecran restait vide : 258 px mesures sur /projects le 02/08/2026, sur une fenetre de
   888 px. La chaine de hauteur posee dans MainLayout.razor.css rend enfin possible de demander
   « le reste », et ces deux lignes le demandent.

   LE SELECTEUR EST VOLONTAIREMENT STRICT : « > », donc uniquement une grille placee DIRECTEMENT
   dans la zone de contenu, c'est-a-dire la grille qui EST la page. Celles des boites de dialogue,
   des volets et des panneaux imbriques gardent la taille qu'on leur a donnee — elles n'ont aucune
   raison de s'etirer, et plusieurs partagent leur ecran avec autre chose.

   flex-basis: auto conserve la hauteur declaree comme point de depart, si bien qu'aucune page
   n'a a etre modifiee : la grille part de sa taille actuelle et grandit. Le min-height empeche
   l'effet inverse sur une petite fenetre, ou la grille se comprimerait jusqu'a l'illisible. */
.content > .e-grid {
    flex: 1 1 auto;
    min-height: 320px;
    /* La grille devient elle-meme une colonne, sans quoi elle grandirait en laissant ses lignes
       a leur taille d'origine — un cadre etire autour d'un tableau qui ne bouge pas. */
    display: flex;
    flex-direction: column;
}

/* L'EN-TETE ET LA PAGINATION NE CEDENT PAS. Un element flex est compressible par defaut :
   sans cette ligne, l'en-tete se fait ecraser pour laisser la place aux lignes — mesure sur
   /projects, 77 px de contenu reduits a 55 px — et comme il est en overflow: hidden, la barre
   de filtres se retrouve coupee en deux sans le moindre signe. */
.content > .e-grid > .e-gridheader,
.content > .e-grid > .e-gridpager {
    flex: 0 0 auto;
}

/* Seule la zone des lignes absorbe la place restante. */
.content > .e-grid > .e-gridcontent {
    flex: 1 1 auto;
    min-height: 0;
}

/* LE !important EST ICI NECESSAIRE, ET C'EST LE SEUL ENDROIT. Syncfusion calcule la hauteur de
   sa zone defilante en JavaScript au moment du rendu et la POSE EN STYLE EN LIGNE (height: 360px
   mesure sur /users). Une feuille de style ne peut pas passer devant un style en ligne autrement.
   Sans cette ligne, la grille occupe bien toute la page mais s'arrete de remplir a la hauteur
   d'origine, et le vide se retrouve A L'INTERIEUR du cadre au lieu d'etre en dessous.

   Sans danger ici : aucune grille du back-office n'active la virtualisation, laquelle deduit du
   nombre de lignes visibles une hauteur exacte et se briserait a la voir changer sous elle. */
.content > .e-grid > .e-gridcontent > .e-content {
    height: 100% !important;
}

/* Logo des ecrans d'authentification. Meme regle que sur le site public : les deux pages de
   connexion doivent presenter la marque a l'identique. */
.auth-logo-img { height: 40px; width: auto; display: block; }