/* Charte PilotageLogistique : accent « C - Bordeaux Route »
   (C:\ConfigAI\PilotageLogistique\CHARTE_GRAPHIQUE.md). Finitions a l'etape D12.

   Arabe (de droite a gauche) : uniquement des proprietes CSS logiques
   (inline-start / inline-end, block-start / block-end), jamais left / right,
   pour que toute la mise en page s'inverse avec dir="rtl" (I18N_GLOBAL.md). */

:root {
    --accent: #9F1239;
    --accent-moyen: #BE123C;
    --accent-texte: #ffffff;
    --fond: #f4f1f2;
    --bureau: #e7e1e3;
    --surface: #ffffff;
    --texte: #1f1a1c;
    --texte-doux: #5f5559;
    --bord: #d9d0d3;
    --danger: #DC2626;
    --succes: #15803d;
    --danger-fond: #fef2f2;
    --focus: #BE123C;
    --survol: #f3e3e7;
    --titre-inactif: #e4dde0;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent: #FB7185;
        --accent-moyen: #f43f5e;
        --accent-texte: #1f1a1c;
        --fond: #17131a;
        --bureau: #1d181f;
        --surface: #221c24;
        --texte: #f1eaee;
        --texte-doux: #b3a7ad;
        --bord: #3a3038;
        --danger: #F87171;
        --succes: #4ade80;
        --danger-fond: #3a1d22;
        --focus: #FB7185;
        --survol: #3a2a31;
        --titre-inactif: #2d2630;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    block-size: 100%;
    background: var(--fond);
    color: var(--texte);
    /* Polices de repli chinoises (I18N_GLOBAL.md). */
    font-family: "Segoe UI", system-ui, -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 14px;
}

html:lang(zh) body { line-height: 1.8; }

button, input, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.chargement { block-size: 100vh; }

/* ── Connexion ──────────────────────────────────────────────────────────── */

.page-connexion {
    min-block-size: 100vh;
    display: grid;
    place-items: center;
    padding: 16px;
}

.carte-connexion {
    inline-size: min(360px, 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px 28px 20px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-block-start: 4px solid var(--accent);
    border-radius: 6px;
}

.carte-connexion h1 {
    margin: 0;
    text-align: center;
    font-size: 1.5rem;
    color: var(--accent);
}

.slogan {
    margin: -8px 0 8px;
    text-align: center;
    color: var(--texte-doux);
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--texte-doux);
}

.champ input {
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 4px;
    color: var(--texte);
}

.message-erreur {
    margin: 0;
    padding: 8px 10px;
    background: var(--danger-fond);
    border: 1px solid var(--danger);
    border-radius: 4px;
    color: var(--danger);
}

.bouton-principal {
    padding: 10px;
    background: var(--accent);
    border: none;
    border-radius: 4px;
    color: var(--accent-texte);
    font-weight: 600;
    cursor: pointer;
}

.bouton-principal:hover:not(:disabled) { background: var(--accent-moyen); }
.bouton-principal:disabled { opacity: .6; cursor: default; }

.pied-connexion {
    display: flex;
    justify-content: flex-end;
    padding-block-start: 8px;
    border-block-start: 1px solid var(--bord);
}

/* Demo publique : comptes a essayer. */
.comptes-demo {
    padding: 10px 12px;
    background: var(--fond);
    border: 1px dashed var(--accent);
    border-radius: 4px;
    font-size: .9rem;
}

.comptes-demo h2 { margin: 0 0 4px; font-size: 1rem; color: var(--accent); }
.comptes-demo p { margin: 0 0 8px; color: var(--texte-doux); }
.comptes-demo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.comptes-demo li { display: flex; flex-direction: column; align-items: flex-start; }
.comptes-demo li .bouton-lien { font-weight: 600; }
.comptes-demo code { font-size: .85rem; }

/* ── Selecteur de langue ────────────────────────────────────────────────── */

.langue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--texte-doux);
}

.langue select {
    padding: 2px 4px;
    background: var(--surface);
    color: var(--texte);
    border: 1px solid var(--bord);
    border-radius: 4px;
}

/* ── Bureau ─────────────────────────────────────────────────────────────── */

.bureau {
    block-size: 100vh;
    display: flex;
    flex-direction: column;
}

/* Barre de titre, comme la legende de la fenetre principale Delphi. */
.barre-titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    min-block-size: 34px;
    padding: 3px 10px;
    background: var(--accent);
    color: var(--accent-texte);
}

.marque { font-weight: 700; white-space: nowrap; }

/* ── Barre de menus (TMainMenu de l'appli Delphi) ─────────────────────── */

.barre-menus {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
    padding-inline: 4px;
    background: var(--surface);
    border-block-end: 1px solid var(--bord);
}

.menu { position: relative; display: flex; }

.titre-menu {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid transparent;
    cursor: default;
    white-space: nowrap;
}

.titre-menu:hover { background: var(--survol); }
.titre-menu.ouvert { background: var(--survol); border-color: var(--bord); border-block-end-color: transparent; }

.liste-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 1000;
    min-inline-size: 220px;
    margin: 0;
    padding: 3px 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--bord);
    box-shadow: 2px 3px 10px rgba(0, 0, 0, .25);
}

.entree-menu {
    padding-block: 4px;
    padding-inline: 24px 28px;
    white-space: nowrap;
    cursor: default;
}

.entree-menu.actif { background: var(--accent); color: var(--accent-texte); }

.separateur {
    block-size: 1px;
    margin: 3px 2px;
    background: var(--bord);
}

.session-utilisateur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    white-space: nowrap;
}

.barre-titre .langue { color: inherit; }

.utilisateur { font-weight: 600; }

.role {
    padding: 1px 8px;
    border: 1px solid currentColor;
    border-radius: 10px;
    font-size: .85em;
    opacity: .9;
}

.bouton-discret {
    padding: 3px 10px;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    cursor: pointer;
}

.bouton-discret:hover { background: rgba(255, 255, 255, .15); }

.zone-bureau {
    flex: 1;
    position: relative;
    /* Les z-index des fenetres restent sous la barre de menus deroulee. */
    isolation: isolate;
    overflow: hidden;
    background: var(--bureau);
    display: grid;
    place-items: center;
}

.accueil-bureau {
    max-inline-size: 460px;
    padding: 16px;
    text-align: center;
    color: var(--texte-doux);
}

.bienvenue { font-size: 1.2rem; font-weight: 600; color: var(--texte); }

/* ── Fenetres flottantes (fiches MDI de l'appli Delphi) ────────────────── */

.fenetre {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--bord);
    box-shadow: 2px 4px 14px rgba(0, 0, 0, .22);
}

.fenetre.active { border-color: var(--accent); box-shadow: 3px 6px 20px rgba(0, 0, 0, .32); }
.fenetre.agrandie { box-shadow: none; }

.titre-fenetre {
    display: flex;
    align-items: center;
    gap: 6px;
    min-block-size: 28px;
    padding-block: 2px;
    padding-inline: 8px 2px;
    background: var(--titre-inactif);
    color: var(--texte-doux);
    cursor: default;
    user-select: none;
    touch-action: none;
}

.fenetre.active .titre-fenetre { background: var(--accent); color: var(--accent-texte); }

.titre-texte {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.boutons-fenetre { display: flex; }

.boutons-fenetre button {
    inline-size: 30px;
    block-size: 22px;
    padding: 0;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
}

.boutons-fenetre button:hover { background: rgba(127, 127, 127, .25); }
.boutons-fenetre .fermer:hover { background: #c42b1c; color: #ffffff; }

.corps-fenetre { flex: 1; min-block-size: 0; overflow: auto; padding: 12px; }

.ecran-bientot {
    display: grid;
    place-items: center;
    block-size: 100%;
    text-align: center;
    color: var(--texte-doux);
}

.message-principal { font-weight: 600; color: var(--texte); }

/* Poignees de redimensionnement : bord de fin, bord bas, coin. */
.poignee { position: absolute; touch-action: none; }
.poignee.fin { inset-block: 0; inset-inline-end: -3px; inline-size: 7px; cursor: ew-resize; }
.poignee.bas { inset-inline: 0; inset-block-end: -3px; block-size: 7px; cursor: ns-resize; }
.poignee.coin { inset-inline-end: -4px; inset-block-end: -4px; inline-size: 14px; block-size: 14px; cursor: nwse-resize; }
[dir="rtl"] .poignee.coin { cursor: nesw-resize; }

/* ── Barre des fenetres ouvertes ────────────────────────────────────────── */

.barre-fenetres {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-block-size: 34px;
    padding: 4px 6px;
    background: var(--surface);
    border-block-start: 1px solid var(--bord);
}

.bouton-fenetre {
    max-inline-size: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px 12px;
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: 3px;
    cursor: pointer;
}

.bouton-fenetre:hover { border-color: var(--accent); }
.bouton-fenetre.active { background: var(--survol); border-color: var(--accent); font-weight: 600; }
.bouton-fenetre.reduite { opacity: .7; }

/* ── Ecrans : barre d'outils, grille a gauche, fiche a droite ───────────── */

.ecran-utilisateurs { display: flex; flex-direction: column; block-size: 100%; gap: 8px; }

.barre-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.barre-outils button,
.boutons-fiche button:not(.bouton-principal) {
    padding: 4px 12px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 3px;
    cursor: pointer;
}

.barre-outils button:hover,
.boutons-fiche button:not(.bouton-principal):hover { border-color: var(--accent); }

.info-droits { color: var(--texte-doux); font-style: italic; }

.maitre-detail {
    flex: 1;
    min-block-size: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.grille-conteneur {
    flex: 3 1 360px;
    min-block-size: 160px;
    max-block-size: 100%;
    overflow: auto;
    border: 1px solid var(--bord);
    background: var(--surface);
}

.grille { inline-size: 100%; border-collapse: collapse; }

.grille th {
    position: sticky;
    inset-block-start: 0;
    padding: 5px 8px;
    background: var(--titre-inactif);
    text-align: start;
    font-weight: 600;
    white-space: nowrap;
}

.grille td {
    padding: 4px 8px;
    border-block-end: 1px solid var(--bord);
    white-space: nowrap;
    cursor: default;
}

.grille td.centre { text-align: center; }
.grille tbody tr:hover td { background: var(--survol); }
.grille tr.inactif td { color: var(--texte-doux); font-style: italic; }
.grille tr.selection td { background: var(--accent); color: var(--accent-texte); }

.fiche {
    flex: 2 1 300px;
    max-block-size: 100%;
    overflow: auto;
    padding-inline-end: 4px;
}

.titre-fiche { margin: 0 0 8px; font-size: 1.05rem; color: var(--accent); }

.champ-ligne {
    display: grid;
    grid-template-columns: minmax(110px, 38%) 1fr;
    align-items: center;
    gap: 8px;
    margin-block: 5px;
}

.champ-ligne > span { color: var(--texte-doux); }

.champ-ligne input:not(.case),
.champ-ligne select {
    inline-size: 100%;
    padding: 4px 6px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 3px;
    color: var(--texte);
}

.champ-ligne input:disabled,
.champ-ligne select:disabled { background: var(--fond); color: var(--texte-doux); }

.champ-ligne .case { justify-self: start; inline-size: 16px; block-size: 16px; }

.aide-champ { margin: 0 0 8px; color: var(--texte-doux); font-size: .9em; }
.aide-fiche { color: var(--texte-doux); padding: 8px; }

.message-fiche {
    margin: 8px 0;
    padding: 6px 10px;
    background: var(--danger-fond);
    border: 1px solid var(--danger);
    border-radius: 3px;
    color: var(--danger);
}

.message-fiche.ok { background: var(--survol); border-color: var(--succes); color: var(--succes); }

.photo-fiche { display: flex; align-items: flex-start; gap: 12px; margin-block: 4px 10px; }

.cadre-photo {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 112px;
    block-size: 112px;
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: 3px;
    overflow: hidden;
}

.cadre-photo img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.sans-photo { padding: 6px; color: var(--texte-doux); font-size: .85em; text-align: center; }

.actions-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.actions-photo .aide-champ { flex-basis: 100%; margin: 0; }

.actions-photo button,
.bouton-fichier {
    position: relative;
    padding: 4px 12px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 3px;
    cursor: pointer;
}

.actions-photo button:hover,
.bouton-fichier:hover { border-color: var(--accent); }
.bouton-fichier:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.bouton-fichier.inactif { opacity: .6; cursor: progress; }

/* Le champ fichier natif est cache : on clique sur son libelle. */
.bouton-fichier input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    overflow: hidden;
}

.ecran-sites { display: flex; flex-direction: column; block-size: 100%; gap: 8px; }

.recherche {
    flex: 1 1 220px;
    max-inline-size: 360px;
    padding: 4px 8px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 3px;
    color: var(--texte);
}

.compteur { color: var(--texte-doux); }

.onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-block-end: 8px;
    border-block-end: 1px solid var(--bord);
}

.onglets button {
    margin-block-end: -1px;
    padding: 5px 14px;
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: 3px 3px 0 0;
    color: var(--texte-doux);
    cursor: pointer;
}

.onglets button[aria-selected="true"] {
    background: var(--surface);
    border-block-end-color: var(--surface);
    color: var(--texte);
    font-weight: 600;
}

.champ-ligne.haut { align-items: start; }

/* Saisie predictive : ville et pays en majuscules. */
.champ-ligne input.majuscules { text-transform: uppercase; }

.champ-ligne textarea {
    inline-size: 100%;
    min-block-size: 96px;
    padding: 4px 6px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 3px;
    color: var(--texte);
    font: inherit;
    resize: vertical;
}

.sous-liste { display: flex; flex-direction: column; gap: 8px; }
.sous-grille { flex: none; min-block-size: 70px; max-block-size: 170px; }
.sous-fiche { padding-block-start: 6px; border-block-start: 1px solid var(--bord); }

.bouton-danger {
    padding: 4px 12px;
    background: var(--surface);
    border: 1px solid var(--danger);
    border-radius: 3px;
    color: var(--danger);
    cursor: pointer;
}

.bouton-danger:hover { background: var(--danger-fond); }

/* ── Transporteurs : tarification et tarif (vues/transport.rs) ──────────── */

/* Onglet Tarif : la liste des transporteurs laisse la place a la grille. */
.maitre-detail.plein > .grille-conteneur { display: none; }
.maitre-detail.plein > .fiche { flex-basis: 100%; }

.entete-fiche { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }

.bouton-lien {
    padding: 0;
    background: none;
    border: none;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

.champ-et-bouton { display: flex; gap: 6px; }
.champ-et-bouton input { flex: 1; min-inline-size: 0; }

.champ-et-bouton button {
    flex: none;
    padding: 4px 10px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 3px;
    cursor: pointer;
}

.champ-ligne input.montant { max-inline-size: 140px; text-align: end; }

.case-libellee { display: inline-flex; align-items: center; gap: 4px; }

.grille-tarif { flex: none; min-block-size: 90px; max-block-size: 240px; }
.grille th.nombre,
.grille td.nombre { text-align: end; }

.titre-sous-fiche { margin: 0 0 4px; font-size: 1rem; }

.colonnes-ligne-tarif { display: flex; flex-wrap: wrap; gap: 0 24px; }
.colonnes-ligne-tarif > div { flex: 1 1 300px; }
.nom-departement { margin-block: -2px 6px; padding-inline-start: 40%; min-block-size: 1.2em; }

.libelle-prix { margin: 8px 0 4px; color: var(--texte-doux); }

.grille-prix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 6px;
}

.grille-prix .prix { display: flex; flex-direction: column; gap: 2px; }
.grille-prix .prix span { color: var(--texte-doux); font-size: .85em; }

.grille-prix .prix input {
    inline-size: 100%;
    padding: 3px 5px;
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: 3px;
    color: var(--texte);
    text-align: end;
}

/* Double gerbage (35 a 66 europalettes) : colonnes distinguees. */
.grille-prix .prix.double input { background: var(--fond); }

/* ── Calculer prix (vues/chiffrage.rs) ───────────────────────────────────── */

.ecran-chiffrage { display: flex; flex-direction: column; block-size: 100%; gap: 6px; overflow: auto; }
.formulaire-chiffrage { flex: none; }
.grille-chiffrage { flex: none; max-block-size: none; }
.grille-chiffrage td.detail-calcul { white-space: normal; color: var(--texte-doux); }
.grille-chiffrage td.prix-total { font-weight: 600; }

/* Le moins cher de chaque depart. */
.grille tr.meilleur td.prix-total { color: var(--succes); }
.grille tr.meilleur td:first-child { border-inline-start: 3px solid var(--succes); }

.boutons-fiche { display: flex; gap: 8px; margin-block: 10px 6px; }
.boutons-fiche .bouton-principal { padding: 5px 16px; }

.audit { margin: 4px 0 0; color: var(--texte-doux); font-size: .85em; }

/* Pendant un glissement de fenetre (voir vues/fenetres.rs) : le curseur de la
   prise reste affiche partout, aucun texte n'est selectionne. */
html[data-glisse] { user-select: none; }
html[data-glisse] * { cursor: inherit !important; }
html[data-glisse="fin"] { cursor: ew-resize; }
html[data-glisse="bas"] { cursor: ns-resize; }
html[data-glisse="coin"] { cursor: nwse-resize; }
html[data-glisse="coin"][dir="rtl"] { cursor: nesw-resize; }

/* ── Envois (Enlevements, Livraisons) ───────────────────────────────────── */

.ecran-envois .barre-outils select { padding: 3px 6px; }
.sous-titre-fiche { margin: 14px 0 4px; font-size: .95rem; color: var(--accent); }
.transporteur-choisi { margin: 0 0 4px; font-weight: 600; }

/* ── Infos systeme ──────────────────────────────────────────────────────── */

.ecran-systeme { display: grid; gap: 2px; }
.ligne-systeme {
    display: grid;
    grid-template-columns: minmax(130px, 34%) 1fr;
    gap: 2px 10px;
    padding-block: 6px;
    border-block-end: 1px solid var(--bord);
}
.libelle-systeme { color: var(--texte-doux); }
.ligne-systeme meter { grid-column: 2; inline-size: 100%; block-size: 10px; }