/* =============================================================================
   EPPM Tender Intelligence — feuille de style
   Charte reprise du prototype validé avec la Direction Commerciale EPPM.
   Encodage : UTF-8 sans BOM.
   ============================================================================= */

:root {
    --eppm-blue: #187CC2;
    --eppm-blue-dark: #125F97;
    --eppm-blue-darker: #0E4A78;
    --eppm-blue-pale: #EAF3FA;
    --eppm-blue-pale-2: #DCEBF7;
    --eppm-red: #E12125;
    --eppm-red-pale: #FDEAEA;
    --eppm-text: #2B2B2B;
    --eppm-muted: #6B7785;
    --eppm-muted-2: #98A2AC;
    --eppm-border: #E1E6EB;
    --eppm-surface: #FFFFFF;
    --eppm-surface-alt: #F4F7FA;
    --eppm-success: #1E8E5A;
    --eppm-success-pale: #E7F5EE;
    --eppm-amber: #C97A1A;
    --eppm-amber-pale: #FBF1E4;
    --eppm-radius: 8px;
    --eppm-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

body {
    margin: 0;
    background: var(--eppm-surface-alt);
    color: var(--eppm-text);
    font-family: var(--eppm-font);
    -webkit-font-smoothing: antialiased;
}

/* --- Bandeau ------------------------------------------------------------- */

.ti-topbar {
    background: var(--eppm-blue);
    color: #fff;
    padding: 12px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.ti-brand { display: flex; align-items: center; gap: 14px; }

/* Le logo est desormais un SVG a fond transparent : cinq elements et une
   dizaine de regles en moins, un trace net a toute resolution, et le meme
   fichier reutilisable pour les documents et le favicon. */
.ti-logo { display: block; height: 38px; width: auto; flex-shrink: 0; }

.ti-login-brand .ti-logo { height: 46px; }
.ti-brand-name { font-size: 16px; font-weight: 600; }
.ti-brand-sub { font-size: 11.5px; color: rgba(255,255,255,.82); margin-top: 1px; }

.ti-topbar-right { display: flex; align-items: center; gap: 14px; }
.ti-user { font-size: 12.5px; color: rgba(255,255,255,.9); }

/* --- Onglets ------------------------------------------------------------- */

.ti-subnav {
    background: #fff;
    border-bottom: 1px solid var(--eppm-border);
    padding: 0 24px;
    display: flex;
    gap: 2px;
    overflow-x: auto;
}

.ti-tab {
    padding: 13px 18px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--eppm-blue);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.ti-tab:hover { background: var(--eppm-blue-pale); }
.ti-tab.active { color: #fff; background: var(--eppm-blue); border-radius: 4px 4px 0 0; }

/* --- Structure de page --------------------------------------------------- */

.ti-main { padding: 16px 24px 60px; }
.ti-page-head { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0 2px; flex-wrap: wrap; gap: 8px; }
.ti-page-title { font-size: 18px; font-weight: 600; margin: 0; }

/* Blazor place le focus sur le titre a chaque navigation (FocusOnNavigate) :
   c'est ce qui permet a un lecteur d'ecran d'annoncer la nouvelle page. Ce
   focus est programmatique, il ne doit donc pas dessiner de cadre. La regle
   :focus-visible preserve le cadre lorsque le focus vient reellement du
   clavier — l'accessibilite au clavier n'est pas degradee. */
h1:focus { outline: none; }
h1:focus-visible { outline: 2px solid var(--eppm-blue); outline-offset: 3px; border-radius: 3px; }
.ti-results-count { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--eppm-muted); }

.ti-info-bar {
    margin: 12px 0 0;
    padding: 11px 15px;
    background: var(--eppm-blue-pale);
    border: 1px solid var(--eppm-blue-pale-2);
    border-inline-start: 3px solid var(--eppm-blue);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.6;
}

.ti-info-amber { background: var(--eppm-amber-pale); border-inline-start-color: var(--eppm-amber); border-color: #F0DFC5; }

.ti-app { display: flex; gap: 20px; padding-top: 16px; align-items: flex-start; }
.ti-filters { width: 268px; flex-shrink: 0; background: #fff; border: 1px solid var(--eppm-border); border-radius: var(--eppm-radius); padding: 18px; position: sticky; top: 16px; }
.ti-filters h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--eppm-muted); margin: 0 0 10px; font-weight: 700; }
.ti-fgroup { margin-bottom: 20px; }
.ti-range-val { font-size: 12px; color: var(--eppm-blue-dark); font-weight: 700; margin-top: 4px; }
.ti-grid-area { flex: 1; min-width: 0; }

.ti-card { background: #fff; border: 1px solid var(--eppm-border); border-radius: var(--eppm-radius); padding: 18px; margin-bottom: 16px; }
.ti-card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--eppm-blue-dark); margin: 0 0 12px; }
.ti-card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--eppm-muted); margin: 18px 0 8px; }

.ti-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 10px; }
.ti-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.ti-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--eppm-muted); }
.ti-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* --- Score et quadrants -------------------------------------------------- */

.ti-score { display: inline-flex; align-items: center; gap: 8px; }
.ti-score-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 999px; color: #fff; }
.ti-score-label { font-size: 11.5px; font-weight: 600; }

.ti-q-top .ti-score-value, .ti-dot.ti-q-top, .ti-bar-fill.ti-q-top { background: var(--eppm-success); }
.ti-q-partner .ti-score-value, .ti-dot.ti-q-partner, .ti-bar-fill.ti-q-partner { background: var(--eppm-amber); }
.ti-q-opportunistic .ti-score-value, .ti-dot.ti-q-opportunistic, .ti-bar-fill.ti-q-opportunistic { background: var(--eppm-blue); }
.ti-q-low .ti-score-value, .ti-dot.ti-q-low, .ti-bar-fill.ti-q-low { background: var(--eppm-muted-2); }

.ti-q-top .ti-score-label { color: var(--eppm-success); }
.ti-q-partner .ti-score-label { color: var(--eppm-amber); }
.ti-q-opportunistic .ti-score-label { color: var(--eppm-blue-dark); }
.ti-q-low .ti-score-label { color: var(--eppm-muted); }

/* --- Décomposition du score ---------------------------------------------- */

.ti-breakdown { margin-bottom: 20px; }
.ti-breakdown-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid var(--eppm-border); margin-bottom: 8px; }
.ti-breakdown-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--eppm-muted); font-weight: 700; }
.ti-breakdown-total { font-size: 16px; font-weight: 800; color: var(--eppm-blue-dark); font-variant-numeric: tabular-nums; }
.ti-breakdown-row { display: grid; grid-template-columns: 1fr 46px 90px 34px 44px; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; }
.ti-breakdown-label { display: flex; align-items: center; gap: 6px; }
.ti-breakdown-weight { color: var(--eppm-muted); font-variant-numeric: tabular-nums; text-align: end; }
.ti-breakdown-bar { background: var(--eppm-surface-alt); border-radius: 3px; height: 7px; overflow: hidden; }
.ti-breakdown-fill { background: var(--eppm-blue); height: 100%; }
.ti-breakdown-value { font-variant-numeric: tabular-nums; text-align: end; font-weight: 600; }
.ti-breakdown-contrib { font-variant-numeric: tabular-nums; text-align: end; color: var(--eppm-blue-dark); font-size: 11.5px; }

/* --- Grille -------------------------------------------------------------- */

.ti-cell-title { display: flex; flex-direction: column; gap: 2px; }
.ti-cell-ref { font-size: 11px; color: var(--eppm-muted-2); letter-spacing: .04em; }
.ti-deadline-urgent { color: var(--eppm-red); font-weight: 600; }
.ti-deadline-soon { color: var(--eppm-amber); font-weight: 600; }

.ti-chip { display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: var(--eppm-surface-alt); border: 1px solid var(--eppm-border); color: var(--eppm-muted); margin-inline-start: 5px; }
.ti-chip-warn { background: var(--eppm-amber-pale); border-color: #F0DFC5; color: var(--eppm-amber); }
.ti-chip-auto { background: var(--eppm-blue-pale); border-color: var(--eppm-blue-pale-2); color: var(--eppm-blue-dark); }

.ti-empty { text-align: center; padding: 48px 16px; color: var(--eppm-muted); }
.ti-empty-big { font-size: 15px; font-weight: 600; color: var(--eppm-text); margin-bottom: 6px; }

/* --- Fiche détaillée ----------------------------------------------------- */

.ti-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 16px 0; flex-wrap: wrap; }
.ti-detail-ref { font-size: 11.5px; color: var(--eppm-muted-2); letter-spacing: .04em; text-transform: uppercase; }
.ti-detail-title { font-size: 20px; margin: 4px 0 2px; line-height: 1.35; }
.ti-detail-client { font-size: 13px; color: var(--eppm-muted); }
.ti-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.ti-dl { display: grid; grid-template-columns: 190px 1fr; gap: 6px 12px; font-size: 12.5px; margin: 0; }
.ti-dl dt { color: var(--eppm-muted); }
.ti-dl dd { margin: 0; }
.ti-summary { font-size: 12.5px; line-height: 1.65; color: var(--eppm-text); }
.ti-doc-list { list-style: none; padding: 0; margin: 0; font-size: 12.5px; }
.ti-doc-list li { padding: 6px 0; border-bottom: 1px solid var(--eppm-border); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ti-file-input { margin-top: 12px; font-size: 12.5px; }

.ti-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.ti-errors { margin-top: 12px; padding: 10px 12px; background: var(--eppm-red-pale); border-inline-start: 3px solid var(--eppm-red); border-radius: 6px; font-size: 12.5px; color: var(--eppm-red); }

/* --- Formulaire ---------------------------------------------------------- */

.ti-edit { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; padding-top: 12px; }
.ti-preview { position: sticky; top: 16px; }
.ti-preview-score { margin: 12px 0 18px; }
.ti-field { margin-bottom: 12px; }
.ti-field label { display: block; font-size: 12px; color: var(--eppm-muted); margin-bottom: 4px; }
.ti-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ti-hint { font-size: 11.5px; color: var(--eppm-muted-2); }

/* --- Critères ------------------------------------------------------------ */

.ti-criteria-head { display: flex; justify-content: space-between; align-items: baseline; }
.ti-criteria-row { display: grid; grid-template-columns: 1fr 110px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--eppm-border); }
.ti-criteria-label b { display: block; font-size: 13px; }
.ti-total-ok { font-size: 12.5px; font-weight: 700; color: var(--eppm-success); }
.ti-total-warn { font-size: 12.5px; font-weight: 700; color: var(--eppm-amber); }

/* --- Sources ------------------------------------------------------------- */

.ti-source-row { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--eppm-border); align-items: flex-start; }
.ti-source-row .ti-dot { margin-top: 6px; flex-shrink: 0; }
.ti-source-name { font-size: 13px; font-weight: 600; }
.ti-source-note { font-size: 12px; color: var(--eppm-muted); line-height: 1.55; margin-top: 2px; }
.ti-source-run { font-size: 11.5px; color: var(--eppm-muted-2); margin-top: 3px; }

.ti-dot.ti-src-open { background: var(--eppm-success); }
.ti-dot.ti-src-verify { background: var(--eppm-amber); }
.ti-dot.ti-src-closed { background: var(--eppm-muted-2); }

/* --- Statuts pipeline ---------------------------------------------------- */

.ti-status { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.ti-status-submitted { background: var(--eppm-blue-pale); color: var(--eppm-blue-dark); }
.ti-status-won { background: var(--eppm-success-pale); color: var(--eppm-success); }
.ti-status-lost { background: var(--eppm-surface-alt); color: var(--eppm-muted); }
.ti-status-other { background: var(--eppm-surface-alt); color: var(--eppm-muted-2); }
.ti-win { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--eppm-blue-dark); }

/* --- Tableau de bord ----------------------------------------------------- */

.ti-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.ti-kpi { background: #fff; border: 1px solid var(--eppm-border); border-radius: var(--eppm-radius); padding: 16px; display: flex; flex-direction: column; gap: 4px; border-top: 3px solid var(--eppm-blue); }
.ti-kpi-accent { border-top-color: var(--eppm-success); }
.ti-kpi-urgent { border-top-color: var(--eppm-red); }
.ti-kpi-success { border-top-color: var(--eppm-success); }
.ti-kpi-value { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--eppm-blue-darker); }
.ti-kpi-label { font-size: 11.5px; color: var(--eppm-muted); text-transform: uppercase; letter-spacing: .04em; }

.ti-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ti-bar-row { display: grid; grid-template-columns: 150px 1fr 40px; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; }
.ti-bar-track { background: var(--eppm-surface-alt); border-radius: 3px; height: 10px; overflow: hidden; }
.ti-bar-fill { height: 100%; }
.ti-bar-value { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- Divers -------------------------------------------------------------- */

.ti-muted { color: var(--eppm-muted); }
.ti-mt-8 { margin-top: 8px; }
.ti-mb-12 { margin-bottom: 12px; }
.ti-btn-block { width: 100%; }
.ti-unauthorized { max-width: 560px; margin: 80px auto; text-align: center; }

.ti-footer { padding: 14px 24px; border-top: 1px solid var(--eppm-border); background: #fff; font-size: 11.5px; color: var(--eppm-muted-2); }

/* --- Support de l'arabe (droite à gauche) -------------------------------- */

html[dir="rtl"] .ti-topbar,
html[dir="rtl"] .ti-app { direction: rtl; }
html[dir="rtl"] .ti-filters { position: static; }

/* --- Adaptatif ----------------------------------------------------------- */

@media (max-width: 1100px) {
    .ti-detail-grid,
    .ti-dashboard-grid,
    .ti-edit { grid-template-columns: 1fr; }
    .ti-preview { position: static; }
}

@media (max-width: 820px) {
    .ti-app { flex-direction: column; }
    .ti-filters { width: 100%; position: static; }
    .ti-field-row { grid-template-columns: 1fr; }
}

/* --- Bandeau du mode démonstration --------------------------------------- */

.ti-demo-banner {
    background: var(--eppm-red);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    padding: 7px 16px;
    letter-spacing: .01em;
}

/* --- Page de connexion ---------------------------------------------------- */

.ti-login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(160deg, var(--eppm-blue-pale) 0%, var(--eppm-surface-alt) 60%);
    padding: 24px;
}

.ti-login-card {
    background: #fff;
    border: 1px solid var(--eppm-border);
    border-radius: var(--eppm-radius);
    border-top: 3px solid var(--eppm-blue);
    padding: 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 6px 28px rgba(14, 74, 120, .10);
}

.ti-login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.ti-login-app { font-size: 17px; font-weight: 600; color: var(--eppm-text); margin: 0; }
.ti-login-sub { font-size: 12.5px; color: var(--eppm-muted); margin-top: 2px; line-height: 1.5; }

.ti-input {
    width: 100%;
    background: #fff;
    border: 1px solid var(--eppm-border);
    color: var(--eppm-text);
    border-radius: 6px;
    padding: 9px 11px;
    font-size: 13.5px;
    font-family: var(--eppm-font);
}

.ti-input:focus { outline: 2px solid var(--eppm-blue); outline-offset: 1px; }

.ti-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--eppm-muted);
    margin: 4px 0 18px;
    cursor: pointer;
}

.ti-login-button {
    display: block;
    width: 100%;
    background: var(--eppm-blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 11px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: var(--eppm-font);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.ti-login-button:hover { background: var(--eppm-blue-dark); }

.ti-login-error {
    background: var(--eppm-red-pale);
    border-inline-start: 3px solid var(--eppm-red);
    border-radius: 6px;
    color: var(--eppm-red);
    font-size: 12.5px;
    padding: 10px 12px;
    margin-bottom: 18px;
}

.ti-login-field-error { display: block; color: var(--eppm-red); font-size: 11.5px; margin-top: 4px; }
.ti-login-footer { font-size: 11.5px; color: var(--eppm-muted-2); text-align: center; margin: 22px 0 0; }

.ti-logout {
    font-size: 12.5px;
    color: rgba(255,255,255,.9);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
    padding: 4px 12px;
}

.ti-logout:hover { background: rgba(255,255,255,.14); color: #fff; }


/* --- Droite a gauche (arabe) ---------------------------------------------
   Les proprietes logiques ci-dessus (border-inline-start, margin-inline-start,
   text-align: end) se mettent seules en miroir. Il reste les cas ou une valeur
   n'a pas d'equivalent logique. */

[dir="rtl"] .ti-topbar-right { flex-direction: row-reverse; }
[dir="rtl"] .ti-brand { flex-direction: row-reverse; }
[dir="rtl"] .ti-cell-ref { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] .ti-source-name a { direction: ltr; unicode-bidi: embed; }

/* Les references d'appel d'offres, les URL et les montants restent lus de
   gauche a droite meme en arabe : ce sont des identifiants techniques. */
[dir="rtl"] code,
[dir="rtl"] .ti-kpi-value { direction: ltr; unicode-bidi: embed; }

/* --- Bandeau d'anomalie de schema (administrateurs seulement) ------------- */

.ti-schema-banner {
    background: var(--eppm-red-pale);
    border-bottom: 1px solid #F3C9C9;
    border-inline-start: 4px solid var(--eppm-red);
    color: #8E1518;
    padding: 10px 24px;
    font-size: 12.5px;
    line-height: 1.6;
}

.ti-schema-banner ul { margin: 6px 0 0; padding-inline-start: 20px; }
.ti-schema-banner li { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; }