/* Replicates the WPF settings window (uFace.xaml): a header strip (MENU | section), a category
   sidebar with a profile/Save/Enable block at its foot, and a content pane whose sections use the
   WPF "bordered box with a floating chip header" look. Colours come from the shared --wpf-* vars
   (app.css), lifted from the WPF AppDarkTheme, so this reads as the same product.

   GLOBAL (not scoped) deliberately: the settings pages are separate components (one per WPF
   PageView, mirroring the Gui's Views folder), and Blazor's scoped CSS does not cascade from a
   parent component into its children - a shared stylesheet is the one way they can share this
   vocabulary. */

/* The settings surface lives in the centre dock tab and fills it. Typed from uFace.xaml's own
   attributes (FontFamily Tahoma, FontSize 11) so the pages lay out at the reference's real
   proportions rather than at whatever the browser's 16px root gives - that font size is what
   makes the two-column pages fit at all, so it belongs on the surface itself rather than on the
   window wrapper it used to have. A pane narrower than the reference's ~700px content column
   scrolls rather than reflowing, keeping the pixel-faithful pages intact. */
.pane-body.flush { display: flex; min-height: 0; }

/* ===== Accounts editor (the WPF AccountsEditorWindow) =====================
   A 250px tree with its own add/remove toolbar beside a property form, and a Save/Cancel
   foot. Fills the centre pane rather than floating at the reference's 720x500. */
.acc { display: flex; flex-direction: column; }
.acc-side {
    width: 250px; flex: 0 0 auto; display: flex; flex-direction: column;
    border-right: 1px solid var(--wpf-border); padding: 6px; gap: 6px; min-height: 0;
}
.acc-tools { display: flex; flex-wrap: wrap; gap: 4px; flex: 0 0 auto; }
.acc-tools .eb { padding: 2px 6px; height: 22px; }
.acc-tools .eb.danger { border-color: #B22222; color: #E23B3B; }
.acc-tools .eb:disabled { opacity: 0.45; cursor: default; }

.acc-tree { flex: 1 1 auto; overflow: auto; border: 1px solid var(--wpf-border); background: var(--wpf-panel); }
.acc-node { padding: 2px 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-node:hover { background: var(--wpf-panel-alt); }
.acc-node.sel { background: var(--wpf-selected); color: var(--wpf-accent); }
.acc-node.party { font-weight: 700; }
.acc-node.child { padding-left: 22px; }

.acc-form { padding: 8px 10px; }
/* Label column matches the reference's 140px. */
.acc-grid { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 5px 0; align-items: center; }
.acc-grid .lbl { color: var(--wpf-muted); }
.acc-grid .ei { width: 100%; box-sizing: border-box; }
.acc-secret { display: flex; gap: 4px; min-width: 0; }
.acc-secret .eb { padding: 2px 8px; height: 22px; flex: 0 0 auto; }

.acc-note { color: var(--wpf-muted); margin-top: 12px; line-height: 1.5; }
.acc-empty { color: var(--wpf-muted); text-align: center; margin-top: 40%; }
.acc-problems { margin-top: 10px; border: 1px solid #7A3030; background: #2A1616; color: #E27A7A; padding: 6px 8px; }
.acc-problems div + div { margin-top: 3px; }

.acc-foot {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    padding: 6px 8px; border-top: 1px solid var(--wpf-border); background: var(--wpf-panel-cap);
}
.acc-foot .eb { width: 90px; justify-content: center; }
.acc-dirty { color: var(--wpf-gold); margin-right: auto; }

.cfg {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--wpf-bg);
    color: var(--wpf-text);
    font-family: Tahoma, 'Segoe UI', sans-serif;
    font-size: 11px;
}

.cfg-missing { color: var(--wpf-gold); padding: 0.8rem; }

/* Header strip ------------------------------------------------------------ */
.cfg-head { flex: 0 0 auto; display: flex; height: 24px; }
.cfg-head-menu {
    width: 132px; flex: 0 0 auto;
    display: flex; align-items: center; padding-left: 0.75rem;
    font-weight: bold; color: var(--wpf-accent);
    background: var(--wpf-panel-cap);
    border-right: 1px solid var(--wpf-border);
    border-bottom: 1px solid var(--wpf-border);
}
.cfg-head-section {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0.6rem;
    font-size: 0.9rem; font-weight: 600; color: var(--wpf-muted);
    background: var(--wpf-panel);
    border-bottom: 1px solid var(--wpf-border);
}
.cfg-head-status { display: flex; gap: 0.7rem; font-size: 0.72rem; font-weight: 400; }
.cfg-head-status .on { color: var(--wpf-accent); }
.cfg-head-status .off { color: var(--wpf-muted); }
.cfg-head-status .saved { color: var(--wpf-gold); }

/* Body: sidebar + content ------------------------------------------------- */
.cfg-body { flex: 1 1 auto; display: flex; min-height: 0; }

.cfg-side {
    width: 132px; flex: 0 0 auto;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--wpf-border);
    background: var(--wpf-bg);
}
.cfg-nav { flex: 1 1 auto; overflow: auto; list-style: none; margin: 0; padding: 2px 0; }
.cfg-nav li {
    padding: 0.24rem 0.7rem; color: var(--wpf-text);
    cursor: pointer; white-space: nowrap; user-select: none;
}
.cfg-nav li:hover { background: var(--wpf-panel-alt); }
/* The WPF NavigationTree's selected item is white text on the lighter row, not accent-tinted. */
.cfg-nav li.active { background: var(--wpf-selected); color: #EAF0F5; }

.cfg-side-bottom { flex: 0 0 auto; padding: 4px; display: flex; flex-direction: column; gap: 5px; }
.cfg-prof {
    display: flex; flex-direction: column; gap: 4px;
    padding: 3px; background: #1B1E22; border: 1px solid #2E3238;
}
.cfg-save {
    height: 24px; background: var(--wpf-panel-cap); color: var(--wpf-accent);
    border: 1px solid var(--wpf-border); cursor: pointer;
}
.cfg-save:hover { border-color: var(--wpf-accent-muted); }
/* Enable follows the engine's real running state: red bordered/red text while stopped (the WPF
   AccentButtonStyle unchecked look), accent while running. */
.cfg-enable {
    height: 26px; background: transparent; color: #E23B3B;
    border: 1px solid #B22222; cursor: pointer; font-weight: 600;
}
.cfg-enable:hover { background: rgba(226, 59, 59, 0.08); }
.cfg-enable.on { background: transparent; color: var(--wpf-accent); border-color: var(--wpf-accent-muted); }
.cfg-enable.on:hover { background: rgba(144, 238, 0, 0.08); }

/* Content pane ------------------------------------------------------------ */
/* Padding matches the reference pages' own Margin="6", not a web-ish gutter - the extra
   space came straight out of the two-column pages' column width, where a long group caption
   ("Friends list [help in combat / block PvP counter-attack]") then overhung its frame. */
.cfg-content {
    flex: 1 1 auto; min-width: 0; overflow: auto;
    padding: 4px 6px 10px;
    background: var(--wpf-bg);
    position: relative;
}
/* The pages are pixel-faithful ports of fixed-size WPF views, so in a pane narrower than the
   reference's own ~700px content column the right answer is to SCROLL, not to reflow: without
   this floor the flex rows just squeeze, overlapping labels and clipping inputs. */
.cfg-content > * { min-width: 700px; }
.cfg-content > .cfg-page-title {
    color: var(--wpf-accent); font-weight: 700; font-size: 0.95rem; margin: 6px 0 2px 2px;
}

/* Section: bordered box with a floating chip header (the WPF GroupBox look) -
   the chip is accent text in a bordered dark tab sitting over the frame's top edge. */
.sect {
    position: relative;
    border: 1px solid var(--wpf-border);
    background: var(--wpf-panel);
    margin-top: 16px;
    padding: 14px 10px 10px;
}
.sect > .sect-h {
    position: absolute; top: -10px; left: 8px;
    padding: 1px 5px; background: #1E2226;
    border: 1px solid var(--wpf-line);
    color: var(--wpf-accent); font-weight: 700; font-size: 0.76rem;
    max-width: calc(100% - 10px); box-sizing: border-box;
}

/* The gold guidance banner several pages open with (Party settings, Target search, Combat zone). */
.infobox {
    border: 1px solid var(--wpf-border);
    background: var(--wpf-panel);
    color: var(--wpf-gold);
    padding: 6px 8px; margin: 8px 0 2px;
    font-size: 0.78rem; line-height: 1.45;
}

/* Two-column page layout (Relax, Party settings) */
.cols { display: flex; gap: 10px; align-items: flex-start; }
.col { display: flex; flex-direction: column; min-width: 0; }
.col.grow { flex: 1 1 auto; }

/* Toggle-button row: red when off, accent when on (Autoattack/Heal/Buffs/Events) */
.tglrow { display: flex; gap: 6px; }
.tgl {
    flex: 1 1 0; text-align: center; padding: 7px 4px;
    background: var(--wpf-panel-cap);
    border: 1px solid #7A3030; color: #E27A7A; cursor: pointer;
}
.tgl:hover { border-color: #A24444; }
.tgl.on { border-color: var(--wpf-accent-muted); color: var(--wpf-accent); }
.tgl.on:hover { border-color: var(--wpf-accent); }

/* Big Activity/Enable button on the General page */
.cfg-bigtoggle {
    display: block; width: 100%; padding: 8px;
    background: var(--wpf-panel-cap);
    border: 1px solid #B22222; color: #E23B3B; cursor: pointer; font-weight: 600;
}
.cfg-bigtoggle:hover { border-color: #D04040; }
.cfg-bigtoggle.on { border-color: var(--wpf-accent-muted); color: var(--wpf-accent); }

/* Checkbox rows ----------------------------------------------------------- */
/* nowrap: these labels carry operators ("HP <=", "No target >") that read as a unit - letting
   a flex row break them mid-label turns one control into two lines and misaligns the row. */
.chk { display: flex; align-items: center; gap: 7px; color: var(--wpf-text); padding: 2px 0; cursor: pointer; white-space: nowrap; }
.chk input { accent-color: var(--wpf-accent); flex: 0 0 auto; }
.lbl { white-space: nowrap; }
.chk + .cfg-input { margin-top: 5px; }
.chk.dis, .chk[title*="not yet used"] { }

/* Inputs ------------------------------------------------------------------ */
.cfg-input {
    background: var(--wpf-panel-cap); color: var(--wpf-text);
    border: 1px solid var(--wpf-border); padding: 2px 4px; height: 24px;
}
.cfg-input:focus { outline: none; border-color: var(--wpf-accent); }
.cfg-wide { display: block; width: 100%; box-sizing: border-box; }
.cfg-input.n4 { width: 3.4rem; }
.cfg-input.n5 { width: 4.4rem; }
.cfg-input.n6 { width: 5.6rem; }
.cfg-input.cond { width: 6.8rem; }
.cfg-input.w8 { width: 8rem; }
.cfg-input.w9 { width: 9rem; }

/* Attack rules table ------------------------------------------------------ */
.cfg-note { color: var(--wpf-muted); font-size: 0.76rem; margin: 0 0 8px; }
.cfg-tablewrap { overflow-x: auto; }
.cfg-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.cfg-table th {
    text-align: left; color: var(--wpf-muted); font-weight: 600;
    padding: 0.15rem 0.4rem; border-bottom: 1px solid var(--wpf-border); white-space: nowrap;
}
.cfg-table td { padding: 0.12rem 0.4rem; border-bottom: 1px solid var(--wpf-line); white-space: nowrap; }
.cfg-table input[type=checkbox] { accent-color: var(--wpf-accent); }
.cfg-empty { color: var(--wpf-muted); }
.cfg-x {
    background: transparent; border: 1px solid #7A3030; color: #E27A7A;
    width: 22px; height: 22px; cursor: pointer; line-height: 1;
}
.cfg-x:hover { background: #C03030; color: #fff; }
.cfg-add {
    margin-top: 10px; background: var(--wpf-panel-cap); color: var(--wpf-text);
    border: 1px solid var(--wpf-border); padding: 4px 12px; cursor: pointer;
}
.cfg-add:hover { border-color: var(--wpf-accent-muted); color: var(--wpf-accent); }

/* Placeholder pages ------------------------------------------------------- */
.cfg-todo { color: var(--wpf-muted); font-size: 0.82rem; line-height: 1.5; }
.cfg-todo strong { color: var(--wpf-text); }

/* ===== Control-for-control rule pages: list on top, editor below ===== */
.pg { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 6px; }

/* Sub-tabs (the WPF FlatTabItemStyle strip) */
.subtabs { flex: 0 0 auto; display: flex; border-bottom: 1px solid var(--wpf-border); margin-bottom: 6px; }
.subtab { padding: 3px 12px; color: var(--wpf-muted); cursor: pointer; border: 1px solid transparent; border-bottom: none; user-select: none; }
.subtab:hover { color: var(--wpf-text); }
.subtab.active { color: var(--wpf-accent); background: var(--wpf-panel); border-color: var(--wpf-border); }

/* Rules list (the WPF ListView/GridView) */
.rlist { flex: 1 1 auto; min-height: 90px; overflow: auto; border: 1px solid var(--wpf-border); background: var(--wpf-panel); }
.rgrid { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.rgrid th { position: sticky; top: 0; text-align: left; color: var(--wpf-muted); font-weight: 600; background: var(--wpf-panel-cap); padding: 3px 6px; border-bottom: 1px solid var(--wpf-border); }
.rgrid td { padding: 2px 6px; border-bottom: 1px solid var(--wpf-line); white-space: nowrap; }
.rgrid tbody tr { cursor: default; }
.rgrid tr { cursor: pointer; }
.rgrid tr:hover td { background: var(--wpf-panel-alt); }
.rgrid tr.sel td { background: var(--wpf-selected); }
.rgrid tr.sel td.c-nm span { color: var(--wpf-accent); }
.c-nm { width: 42%; }
.c-nm input { accent-color: var(--wpf-accent); margin-right: 6px; vertical-align: middle; }
.c-nm img { width: 16px; height: 16px; margin-right: 5px; vertical-align: middle; }
.c-st { color: var(--wpf-muted); }
.c-pr { width: 62px; }
.c-dl { width: 62px; }
.rempty { color: var(--wpf-muted); padding: 8px; font-size: 0.8rem; }

/* Add row (Type / Name / Add / X) */
.arow { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin-top: 6px; }
/* Not scoped to .arow: the editor rows use "grow" too (the buff-name box is a wide input in
   the reference), and while this lived under .arow those stayed at their content width. */
.grow { flex: 1 1 auto; min-width: 0; }

/* Editor box below the list */
.edbox { flex: 0 0 auto; margin-top: 6px; padding: 8px; border: 1px solid var(--wpf-border); background: var(--wpf-panel-alt); }
.edgrid { display: flex; gap: 20px; align-items: flex-start; }
.edcell { display: flex; flex-direction: column; gap: 3px; }
.crow { display: flex; gap: 6px; align-items: center; }
.frow, .frow2 { display: flex; gap: 6px; align-items: center; }
.mt { margin-top: 6px; }

/* Vertical priority trackbar (WPF Slider, 0-4, 4 at top) */
.edprio { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-left: auto; }
.vslider { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 84px; accent-color: var(--wpf-accent); }
.prio-val { color: var(--wpf-accent); font-weight: 600; }

/* Self buff editor: stacked rows on the left, priority trackbar on the right */
.pg-title { flex: 0 0 auto; font-weight: 600; color: var(--wpf-text); margin: 0 0 6px 2px; font-size: 0.82rem; }
.bgrid { display: flex; gap: 12px; align-items: stretch; }
.brows { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.frow.wrap { flex-wrap: wrap; row-gap: 4px; }
.spacer { flex: 1 1 auto; }
/* The three Cond groups share one row in the reference's ~700px content column, so they are
   sized to fit it rather than to the combo's longest label (which the dropdown shows in full
   anyway). */
.cgrp { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; }
.cgrp:last-child { margin-right: 0; }
.ei.center { text-align: center; }
.ei.cond { width: 6.8rem; }
.ei.bcond { width: 105px; min-width: 0; }
.ei.bcondv { width: 38px; }

/* ===== Attack page: pixel-faithful canvas (1:1 with uFace.dfm fight tab) =====
   The WPF AttackPageView is an explicit 1:1 copy of the Delphi dfm - the two fixed-height
   regions (the Type/Name/Add/X strip and the settings panel) are Canvases carrying the
   reference's own pixel coordinates. Replicated here with absolute positioning at the same
   numbers so every control sits exactly where EasyBot puts it. */
.apg { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 6px; gap: 4px; }
.apg-title { flex: 0 0 auto; color: var(--wpf-text); font-size: 0.8rem; margin: 0 0 2px 2px; }

/* FightLV: Skills-Actions-Items | Target | Settings | Priority | Replay */
.alist { flex: 1 1 auto; min-height: 120px; overflow: auto; border: 1px solid var(--wpf-border); background: var(--wpf-panel); }
.agrid { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.agrid th { position: sticky; top: 0; text-align: left; color: var(--wpf-muted); font-weight: 600; background: var(--wpf-panel-cap); padding: 3px 6px; border-bottom: 1px solid var(--wpf-border); white-space: nowrap; }
.agrid td { padding: 2px 6px; border-bottom: 1px solid var(--wpf-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agrid tr { cursor: pointer; }
.agrid tr:hover td { background: var(--wpf-panel-alt); }
.agrid tr.sel td { background: var(--wpf-selected); }
.agrid tr.sel td.a-nm span { color: var(--wpf-accent); }
.a-nm { width: 30%; }
.a-nm input { accent-color: var(--wpf-accent); margin-right: 6px; vertical-align: middle; }
.a-nm img { width: 16px; height: 16px; margin-right: 5px; vertical-align: middle; }
.a-tg { width: 12%; color: var(--wpf-muted); }
.a-st { color: var(--wpf-muted); max-width: 0; }
.a-pr { width: 56px; }
.a-rp { width: 60px; }

/* The two pixel canvases. .awrap scrolls if the pane is narrower than the reference's 640px. */
.awrap { flex: 0 0 auto; overflow-x: auto; }
.apanel { display: inline-block; padding: 4px; border: 1px solid var(--wpf-border); background: var(--wpf-panel-alt); }
.acv { position: relative; }
.acv.addrow { width: 640px; height: 28px; }
.acv.panel { width: 640px; height: 153px; }
.acv > * { position: absolute; }

.acv .lbl { color: var(--wpf-text); font-size: 0.72rem; line-height: 1; }
.acv .ai { background: var(--wpf-panel-cap); color: var(--wpf-text); border: 1px solid var(--wpf-border); height: 21px; padding: 1px 3px; box-sizing: border-box; font-size: 0.72rem; }
.acv select.ai { height: 22px; padding: 1px; }
.acv .ai:focus { outline: none; border-color: var(--wpf-accent); }
.acv .chk { color: var(--wpf-text); font-size: 0.72rem; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; height: 18px; cursor: pointer; }
.acv .chk input { accent-color: var(--wpf-accent); margin: 0 2px 0 0; width: 13px; height: 13px; }
.acv .ab { background: var(--wpf-panel-cap); color: var(--wpf-text); border: 1px solid var(--wpf-border); height: 22px; cursor: pointer; font-size: 0.72rem; box-sizing: border-box; }
.acv .ab:hover { border-color: var(--wpf-accent-muted); color: var(--wpf-accent); }

/* Empty group-box frames (InlineGroupBoxStyle): a border with a small floating header notch.
   Unlike the page GroupBox chips these headers are plain light text (see the WPF attack panel). */
.aframe { border: 1px solid var(--wpf-border); box-sizing: border-box; pointer-events: none; }
.aframe-h { position: absolute; padding: 0 3px; background: var(--wpf-panel-alt); color: var(--wpf-text); font-size: 0.62rem; white-space: nowrap; }

.acv .vpri { writing-mode: vertical-lr; direction: rtl; accent-color: var(--wpf-accent); padding: 0; }

/* Shared editor controls */
.lbl { color: var(--wpf-muted); font-size: 0.78rem; }
.ei { background: var(--wpf-panel-cap); color: var(--wpf-text); border: 1px solid var(--wpf-border); padding: 2px 4px; height: 22px; }
.ei:focus { outline: none; border-color: var(--wpf-accent); }
/* Number boxes, in px so they track the window's 11px font rather than the 16px root. n4 was
   missing entirely - only .cfg-input.n4 existed - so every .ei.n4 fell back to the browser's
   default ~141px input and squeezed its neighbours out of the row. */
.ei.n4 { width: 46px; }
.ei.n5 { width: 56px; }
.ei.n6 { width: 74px; }
.eb { background: var(--wpf-panel-cap); color: var(--wpf-text); border: 1px solid var(--wpf-border); padding: 2px 12px; height: 24px; cursor: pointer; }
.eb:hover { border-color: var(--wpf-accent-muted); color: var(--wpf-accent); }

/* ===== Type scale =========================================================
   Everything above sizes text in rem, which is ROOT-relative and so ignores the window's
   own 11px Tahoma - the reference's actual font. These overrides put the whole settings
   surface back on that inherited 11px, keeping only the two places uFace.xaml itself
   makes bigger (the section caption, FontSize 13) or the app deliberately makes smaller
   (the header's live-state note). Written last so they win the cascade at equal
   specificity, rather than editing forty individual declarations. */
.cfg .cfg,
.cfg .lbl,
.cfg .chk,
.cfg .ei,
.cfg .eb,
.cfg .cfg-input,
.cfg .cfg-note,
.cfg .cfg-todo,
.cfg .cfg-empty,
.cfg .infobox,
.cfg .subtab,
.cfg .pg-title,
.cfg .apg-title,
.cfg .rgrid,
.cfg .agrid,
.cfg .cfg-table,
.cfg .cfg-nav li,
.cfg .sect > .sect-h,
.cfg .acv .lbl,
.cfg .acv .chk,
.cfg .acv .ai,
.cfg .acv .ab,
.cfg .aframe-h { font-size: 11px; }

/* uFace's CurrentSectionText is FontSize 13, SemiBold - the one deliberate step up. */
.cfg .cfg-head-section { font-size: 13px; }
.cfg .cfg-head-status { font-size: 10px; }

/* Controls inherit the window font rather than the browser's form default. */
.cfg input, .cfg select, .cfg button, .cfg textarea {
    font-family: inherit;
    font-size: 11px;
}