/* ------------------------------------------------------------------------------------
   La fenetre du poste, dans la page.

   Chaque regle reprend un style de MainWindow.xaml (ToolBtn, SmallBtn, Section, Field...)
   ou le gabarit d'un controle de WPF. Les roles sont ceux des ressources de la fenetre
   (Paper, Chrome, Rule, Edge, Ink, Accent...) ; leurs teintes, dans le navigateur, sont
   celles de la charte Prophetix (--px-*, charte/prophetix-charte.css, chargee avant) :
   grege pour les fonds et les traits, violet pour ce qui est arme ou choisi.

   Les couleurs que le XAML ecrit en dur ne passent pas par ces regles : Css.Color
   (Components/Wpf/Css.cs) les ramene sur les memes variables. Le dessin du plan, trace par
   Skia, n'en depend pas : il garde les teintes du poste, dont l'orange de la selection.
   ------------------------------------------------------------------------------------ */

.wpf-root {
    --window: var(--px-fond);
    --panel: var(--px-surface);
    --paper: var(--px-surface);
    --chrome: var(--px-grege-clair);
    --chrome-2: color-mix(in srgb, var(--px-grege) 45%, var(--px-grege-clair));
    --rule: var(--px-grege);
    --edge: var(--px-grege-fonce);
    --edge-hover: var(--px-lilas);
    --hover: var(--px-lilas-clair);
    --press: var(--px-violet-clair);
    --ink: var(--px-encre);
    --ink-soft: var(--px-encre-douce);
    --ink-faint: color-mix(in srgb, var(--px-encre-douce) 50%, var(--px-surface));
    --ink-reverse: var(--px-grege);          /* texte sur un fond d'encre */
    --ink-reverse-soft: #AFA8C2;             /* texte secondaire du theme sombre de la charte */
    --accent: var(--px-primaire);
    --accent-soft: var(--px-violet-clair);
    --accent-ink: var(--px-primaire-survol);
    --accent-text: var(--px-primaire-texte);
    --focus: var(--px-focus);

    /* Les etats, assez sombres pour se lire en texte sur le blanc (5,2:1 au moins). */
    --ok: #1B7A43;
    --warn: #8B5E0A;

    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    font-family: var(--px-police);
    font-size: 12px;
    color: var(--ink);
    user-select: none;
    -webkit-user-select: none;
}

.wpf-root *, .wpf-root *::before, .wpf-root *::after { box-sizing: border-box; }

.wpf-root input, .wpf-root textarea { user-select: text; -webkit-user-select: text; }

/* Comme en WPF, ce qui vient apres se dessine par-dessus : chaque element est positionne,
   sans quoi une surface de dessin (positionnee) passerait au-dessus de ses voisins suivants. */
.wpf-root [data-w] { position: relative; }

.w-window { overflow: hidden; }

/* Un panneau sans fond laisse passer la souris ; ses enfants la reprennent. */
.w-nohit { pointer-events: none; }
.w-nohit > :not(.w-nohit):not(.w-dockrun):not(.w-dockfill) { pointer-events: auto; }
/* Les boites du DockPanel ne sont que de la mise en page : seuls les elements prennent la souris. */
.w-dockrun, .w-dockrest, .w-dockfill { pointer-events: none; }
.w-dockrun > :not(.w-nohit):not(.w-dockrest), .w-dockfill > :not(.w-nohit) { pointer-events: auto; }
.w-stack, .w-wrap, .w-dock, .w-grid, .w-uniform, .w-border, .w-cc, .w-deco, .w-tabbody { min-width: 0; min-height: 0; }
.w-dockfill > *, .w-dockrun > * { min-width: 0; }
.w-textb { line-height: 1.35; }
.w-ct { white-space: pre; }
.w-unknown { color: #c00; font-size: 10px; }

/* ----- Images (les icones vectorielles du poste) ----- */

.w-img { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.w-img svg, .w-img img { width: 100%; height: 100%; display: block; }
.w-img { width: 18px; height: 18px; }
.w-img.s-Ico { width: 18px; height: 18px; margin-right: 5px; }
.w-img.s-IcoBtn { width: 17px; height: 17px; }
.w-img.s-IcoSm { width: 16px; height: 16px; margin-right: 5px; }

/* ----- Boutons ----- */

.w-btn {
    font: inherit;
    font-size: 12px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--edge);
    border-radius: 4px;
    padding: 5px 9px;
    cursor: default;
    text-align: left;
    line-height: 1.2;
    align-items: center;
}
.w-btn > * { align-self: center; }
.w-btn:hover:not([disabled]) { background: var(--hover); border-color: var(--edge-hover); }
.w-btn:active:not([disabled]) { background: var(--press); }
.w-btn[disabled], .w-btn.w-off { opacity: 0.45; }
.w-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.w-btn.s-SmallBtn { margin: 0 3px 3px 0; padding: 4px 7px; }
.w-btn.s-WideBtn { margin-top: 8px; padding: 5px 8px; }
.w-btn.s-MiniBtn { width: 27px; height: 27px; padding: 0; margin-right: 4px; justify-items: center; }
.w-btn.s-MiniBtn > * { justify-self: center; }

.w-btn.s-ToolBtn, .w-btn.s-MetierBtn, .w-btn.s-StateBtn {
    background: transparent;
    border-color: transparent;
    padding: 5px 7px;
    margin-right: 1px;
}
.w-btn.s-ToolBtn:hover:not([disabled]), .w-btn.s-MetierBtn:hover:not([disabled]), .w-btn.s-StateBtn:hover:not([disabled]) {
    background: var(--hover); border-color: transparent;
}
.w-btn.s-ToolBtn:active:not([disabled]), .w-btn.s-MetierBtn:active:not([disabled]) { background: var(--press); }
.w-btn.s-ToolBtn.w-on, .w-btn.s-MetierBtn.w-on {
    background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink);
}
.w-btn.s-MetierBtn { font-weight: 600; padding: 4px 12px 4px 10px; margin-right: 4px; }
.w-btn.s-StateBtn.w-on { background: var(--press); border-color: var(--edge); }

.w-btn.s-PivotBtn {
    width: 13px; height: 13px; margin: 1px; padding: 0;
    background: var(--paper); border: 1px solid var(--edge); border-radius: 2px;
}
.w-btn.s-PivotBtn:hover:not([disabled]) { border-color: var(--accent); background: var(--paper); }
.w-btn.s-PivotBtn.w-on { background: var(--accent); border-color: var(--accent-ink); }

/* ----- Textes ----- */

.w-textb.s-Section { margin: 14px 0 5px 0; font-size: 12px; font-weight: 600; color: var(--ink); }
.w-textb.s-Field { margin: 6px 0 2px 0; font-size: 11px; color: var(--ink-soft); }
.w-textb.s-ToolLabel { font-size: 11px; color: var(--ink-soft); align-self: center; }
.w-textb.s-EmptyHint { font-size: 11.5px; color: var(--ink-soft); margin: 9px 10px 0 10px; white-space: pre-wrap; pointer-events: none; align-self: flex-start; }

.w-shape.s-ToolSep { width: 1px; height: 22px; background: var(--rule); margin: 4px 5px; align-self: center; }

/* ----- Champs ----- */

.w-tb {
    font: inherit;
    font-size: 12px;
    min-height: 24px;
    padding: 3px 6px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--edge);
    border-radius: 3px;
    outline: none;
    min-width: 0;
    width: 100%;
}
.w-tb[style*="width:"] { width: auto; }
.w-tb:hover { border-color: var(--edge-hover); }
.w-tb:focus { border-color: var(--accent); }
.w-tb[disabled] { background: var(--chrome); color: var(--ink-faint); }
textarea.w-tb { resize: vertical; }

/* ----- Cases a cocher ----- */

.w-check, .w-radio {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--ink);
    cursor: default;
    outline: none;
}
.w-check .w-box, .w-radio .w-box {
    width: 15px; height: 15px; flex: none;
    border: 1px solid var(--edge);
    border-radius: 3px;
    background: var(--paper);
    display: inline-flex; align-items: center; justify-content: center;
}
.w-radio .w-box { border-radius: 50%; }
.w-check .w-box svg { width: 9px; height: 8px; display: none; }
.w-check .w-box svg path { fill: none; stroke: var(--accent-text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.w-check:hover .w-box, .w-radio:hover .w-box { border-color: var(--edge-hover); }
.w-check.w-on .w-box { background: var(--accent); border-color: var(--accent-ink); }
.w-check.w-on .w-box svg { display: block; }
.w-radio.w-on .w-box { border-color: var(--accent-ink); box-shadow: inset 0 0 0 3px var(--paper); background: var(--accent); }
.w-check .w-cc, .w-radio .w-cc { margin-left: 7px; }
.w-check.w-off, .w-radio.w-off { opacity: 0.45; }
.w-check:focus-visible .w-box { outline: 2px solid var(--focus); }

/* ----- Listes deroulantes ----- */

.w-combo {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 24px;
    font-size: 12px;
    background: var(--paper);
    border: 1px solid var(--edge);
    border-radius: 3px;
    outline: none;
    min-width: 0;
}
.w-combo:hover { border-color: var(--edge-hover); }
.w-combo.w-open, .w-combo:focus { border-color: var(--accent); }
.w-combo.w-off { background: var(--chrome); color: var(--ink-faint); }
.w-combo-sel { flex: 1 1 auto; min-width: 0; padding: 2px 24px 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: stretch; display: flex; align-items: center; }
.w-combo-edit { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12px; border: 0; outline: none; background: transparent; padding: 2px 24px 2px 6px; color: var(--ink); }
.w-chev { position: absolute; right: 0; top: 0; bottom: 0; width: 22px; }
.w-chev::after {
    content: ""; position: absolute; right: 9px; top: 50%; margin-top: -2px;
    border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4.5px solid var(--ink-soft);
}
.w-combo.w-off .w-chev::after { border-top-color: var(--ink-faint); }

.w-drop {
    position: fixed;
    z-index: 1000;
    background: var(--paper);
    border: 1px solid var(--edge);
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(34, 28, 58, 0.16);
    overflow-y: auto;
    padding: 1px 0;
}
.w-opt { margin: 1px 2px; padding: 4px 7px; border-radius: 2px; white-space: nowrap; cursor: default; }
.w-opt:hover { background: var(--hover); }
.w-opt.w-sel { background: var(--accent-soft); color: var(--accent-ink); }

.w-finish { display: inline-flex; align-items: center; white-space: nowrap; }
.w-swatch { width: 18px; height: 12px; margin-right: 7px; border: 1px solid var(--ink-soft); flex: none; }

/* ----- Listes ----- */

.w-list {
    background: var(--paper);
    border: 1px solid var(--edge);
    padding: 2px;
    overflow-y: auto;
    outline: none;
}
.w-li { margin: 1px; padding: 4px 7px; border-radius: 3px; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-li:hover { background: var(--hover); }
.w-li.w-sel { background: var(--accent-soft); color: var(--accent-ink); }

/* ----- Arbre ----- */

.w-tree { background: var(--paper); border: 1px solid var(--edge); padding: 2px 0; outline: none; }
.w-tvi { display: flex; flex-direction: column; }
.w-tvi-row { display: flex; align-items: center; padding: 1px 2px; cursor: default; white-space: nowrap; }
.w-tvi-row:hover { background: var(--hover); }
.w-tvi-row.w-sel { background: var(--accent-soft); color: var(--accent-ink); }
.w-tvi-x { width: 16px; height: 16px; flex: none; position: relative; }
.w-tvi-x:not(.leaf)::after {
    content: ""; position: absolute; left: 5px; top: 4px;
    border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid var(--ink-soft);
}
.w-tvi-x.open::after { transform: rotate(90deg); left: 4px; top: 5px; }
.w-tvi-h { display: inline-flex; align-items: center; min-width: 0; }
.w-tvi-kids { padding-left: 16px; display: flex; flex-direction: column; }

/* ----- Onglets du panneau lateral ----- */

.w-tabs { min-height: 0; }
.w-tabstrip {
    display: flex; flex: none;
    background: var(--chrome-2);
    border-bottom: 1px solid var(--rule);
    padding: 6px 6px 0 6px;
}
.w-tab {
    padding: 6px 13px;
    margin-right: 3px;
    border-bottom: 2px solid transparent;
    color: var(--ink-soft);
    font-size: 12px;
    cursor: default;
    white-space: nowrap;
}
.w-tab:hover:not(.w-sel) { background: var(--hover); }
/* L'onglet choisi prend le fond du panneau qu'il ouvre, et le trait de l'accent. */
.w-tab.w-sel { background: var(--panel); border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
.w-tabbody { flex: 1 1 auto; min-height: 0; }

/* ----- Volets repliables ----- */

.w-exp.s-Fold { margin-top: 14px; }
.w-exp-head {
    display: flex; align-items: center;
    padding: 4px 2px; border-radius: 3px;
    font-size: 12px; font-weight: 600; color: var(--ink);
    cursor: default; outline: none;
}
.w-exp-head:hover { background: var(--hover); }
.w-exp-chev { width: 6px; height: 10px; margin: 0 8px 0 1px; position: relative; flex: none; transition: transform 0.12s; }
.w-exp-chev::before {
    content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 6px;
    border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
    transform: translate(-2px, 2px) rotate(-45deg);
}
.w-exp.w-open .w-exp-chev { transform: rotate(90deg); }

/* ----- Menus ----- */

.w-menubar {
    display: flex;
    align-items: stretch;
    background: var(--chrome);
    border-bottom: 1px solid var(--rule);
    padding: 1px 4px;
    font-size: 12px;
}
.w-mtop { position: relative; padding: 4px 9px; border-radius: 3px; cursor: default; white-space: nowrap; }
.w-mtop:hover, .w-mtop.w-open { background: var(--hover); }
.w-mtop.w-off { color: var(--ink-faint); }

.w-mdrop {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1100;
    min-width: 220px;
    background: var(--paper);
    border: 1px solid var(--edge);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(34, 28, 58, 0.18);
    padding: 3px;
    display: flex;
    flex-direction: column;
    font-weight: normal;
}
.w-ctx { position: fixed; }
.w-mi {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr auto 14px;
    align-items: center;
    column-gap: 6px;
    padding: 4px 6px;
    border-radius: 3px;
    white-space: nowrap;
    cursor: default;
}
.w-mi:hover:not(.w-off), .w-mi.w-open { background: var(--hover); }
.w-mi.w-off { color: var(--ink-faint); }
.w-mi-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.w-mi-icon svg { width: 16px; height: 16px; }
.w-mi-icon svg path[d^="M0.6"] { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.w-mi-g { color: var(--ink-soft); font-size: 11px; padding-left: 18px; }
.w-mi.w-sub > .w-mi-arrow::after {
    content: ""; display: inline-block;
    border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid var(--ink-soft);
}
.w-msub {
    position: absolute;
    left: 100%;
    top: -4px;
    z-index: 1101;
    min-width: 200px;
    background: var(--paper);
    border: 1px solid var(--edge);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(34, 28, 58, 0.18);
    padding: 3px;
    display: flex;
    flex-direction: column;
}
.w-msep { height: 1px; background: var(--rule); margin: 4px 6px; }
.w-sep { height: 1px; background: var(--rule); margin: 4px 0; }

/* ----- Surfaces de dessin ----- */

.w-draw, .w-gl { outline: none; touch-action: none; }
.w-draw canvas, .w-skia { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.w-glc { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }

/* ----- Barres de defilement et separateurs ----- */

.w-sb { background: var(--chrome-2); position: relative; }
.w-sb.v { width: 15px; }
.w-sb.h { height: 15px; }
.w-sb-track { position: absolute; inset: 2px; }
.w-sb-thumb { position: absolute; background: var(--edge); border-radius: 6px; }
.w-sb.v .w-sb-thumb { left: 2px; right: 2px; }
.w-sb.h .w-sb-thumb { top: 2px; bottom: 2px; }
.w-sb-thumb:hover { background: var(--edge-hover); }

.w-gs { background: transparent; }
.w-gs.v { cursor: col-resize; }
.w-gs.h { cursor: row-resize; }
.w-gs:hover { background: rgba(75, 55, 161, 0.18); }   /* le violet de la charte, voile */

.w-scroll { scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }

.w-popup { position: fixed; z-index: 1050; }

/* ----- Boite de message ----- */

.w-modal {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(22, 18, 43, 0.28);   /* la nuit de la charte, voilee */
    display: flex; align-items: center; justify-content: center;
}
.w-msgbox {
    background: var(--paper);
    border-radius: 6px;
    box-shadow: 0 16px 48px rgba(22, 18, 43, 0.3);
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
    border-top: 3px solid var(--accent);
}
/* Un filet, pas du texte : l'anis de la charte peut y signaler l'avertissement. */
.w-msgbox.warn { border-top-color: var(--px-anis); }
.w-msgbox.err { border-top-color: #C0392B; }
.w-msg-cap { padding: 12px 16px 4px 16px; font-weight: 600; font-size: 13px; }
.w-msg-text { padding: 6px 16px 12px 16px; white-space: pre-wrap; overflow: auto; font-size: 12.5px; line-height: 1.45; user-select: text; }
.w-msg-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px 14px 16px; border-top: 1px solid var(--rule); }
.w-msg-btns .w-btn { min-width: 84px; text-align: center; }
.w-msg-main { background: var(--accent); border-color: var(--accent-ink); color: var(--accent-text); }
.w-msg-main:hover:not([disabled]) { background: var(--accent-ink); border-color: var(--accent-ink); }