/* The management workstation, drawn the way MetaTrader 4 Manager and
   Administrator look in their Windows 7 screenshots (platform-sdks/MT4/Docs):
   grey window faces, white panes, the system blue on whatever is selected,
   tabs along the bottom of the docked windows, and nothing that is not there
   to be read or pressed. One set of colours serves every surface. */
:root {
  --face: #f0f0f0;
  --face-raised: #f7f7f7;
  --pane: #ffffff;
  --line: #a0a0a0;
  --line-soft: #d5d5d5;
  --line-faint: #ebebeb;
  --zebra: #f4f4f4;
  --select: #3399ff;
  --select-soft: #cce8ff;
  --select-soft-line: #99d1ff;
  --hover: #e5f1fb;
  --hover-line: #7eb4ea;
  --text: #000000;
  --text-dim: #5f5f5f;
  --text-faint: #8a8a8a;
  --caption: linear-gradient(#fbfcfd, #e9eef4);
  --title: linear-gradient(#e4edf8, #cddcee);
  --button: linear-gradient(#fbfbfb, #e3e3e3);
  --button-hover: linear-gradient(#f3f9fe, #d4eafb);
  --button-line: #8c8c8c;
  --field-line: #abadb3;
  --up: #1340c8;
  --down: #d0191a;
  --warn-text: #8a5a00;
  --warn-fill: #fff8e1;
  --warn-line: #e6cf8e;
  --error-text: #a01010;
  --error-fill: #fdecec;
  --error-line: #e0a0a0;

  font-family: Tahoma, "Segoe UI", Verdana, sans-serif;
  font-size: 11px;
  color: var(--text);
  background: var(--face);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }

/* ---------------------------------------------------------------------------
   The frame. This is a web page, not an emulated desktop: it owns the whole
   viewport and has no title bar of its own. The status bar is the last grid
   row, so it sits on the bottom edge at every window size. Nothing has a
   minimum width: the window is the frame, every region inside it is fixed, and
   only the contents of a list or a page ever scroll.
   ------------------------------------------------------------------------ */
.desktop-app {
  height: 100%;
  display: grid;
  grid-template-rows: 27px minmax(0, 1fr) 22px;
  background: var(--face);
  overflow: hidden;
}

/* Which workspace is on screen. The two are one application, so they are
   tabs on its top edge rather than two windows. */
.top-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 3px 6px 0; background: var(--face); border-bottom: 1px solid var(--line); overflow: hidden; }
.top-tabs > button:not(.logout) { height: 23px; min-width: 112px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#f6f6f6, #e2e2e2); color: var(--text-dim); }
.top-tabs > button:not(.logout):hover { background: linear-gradient(#f5fafe, #dcecfa); color: var(--text); }
.top-tabs > button.active { height: 24px; margin-bottom: -1px; background: var(--face); color: var(--text); font-weight: bold; }
.top-tabs .operator { margin: 0 10px 6px auto; color: var(--text-dim); }
.top-tabs button.logout { height: 21px; min-width: 84px; margin-bottom: 3px; padding: 0 10px; border: 1px solid var(--button-line); border-radius: 3px; background: var(--button); }
.top-tabs button.logout:hover { border-color: var(--hover-line); background: var(--button-hover); }

.workspace { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: 21px 32px minmax(0, 1fr); overflow: hidden; }

/* ---------------------------------------------------------------------------
   Menus
   ------------------------------------------------------------------------ */
.classic-menu { display: flex; align-items: stretch; padding: 0 2px; background: var(--face); }
.menu-root { position: relative; display: flex; }
.menu-root > button { border: 1px solid transparent; background: transparent; padding: 0 8px; margin: 1px 0; }
.menu-root > button:hover, .menu-root > button.open { border-color: var(--hover-line); background: var(--hover); }
.menu-drop, .context-menu { margin: 0; padding: 2px; list-style: none; border: 1px solid #979797; background: #f5f5f5 linear-gradient(90deg, #f1f1f1 26px, #e2e3e3 26px, #e2e3e3 27px, #fff 27px, #fff 28px, #f5f5f5 28px); box-shadow: 2px 2px 4px rgba(0, 0, 0, .25); }
.menu-drop { position: absolute; z-index: 45; top: 20px; left: 0; min-width: 220px; }
.context-menu { position: fixed; z-index: 40; min-width: 200px; }
.menu-drop li button, .context-menu li button { width: 100%; height: 22px; display: flex; align-items: center; border: 1px solid transparent; border-radius: 3px; background: transparent; padding: 0 16px 0 0; text-align: left; white-space: nowrap; }
.menu-drop li button:hover:not(:disabled), .context-menu li button:hover:not(:disabled) { border-color: #aeccf1; background: linear-gradient(#f2f7fd, #dcebfc); }
.menu-drop li button:disabled, .context-menu li button:disabled { color: var(--text-faint); }
.menu-drop li button:disabled svg, .context-menu li button:disabled svg { opacity: .45; }
.menu-gutter { width: 22px; height: 20px; flex: 0 0 22px; display: grid; place-items: center; margin-right: 10px; border: 1px solid transparent; border-radius: 2px; }
.menu-gutter.checked { border-color: #a8c8ec; background: #e0edfb; }
.context-separator { height: 1px; margin: 3px 2px 3px 30px; background: #e0e0e0; }

/* ---------------------------------------------------------------------------
   The toolbar: icon and label, flat until pointed at, grouped by hairlines.
   ------------------------------------------------------------------------ */
.toolbar { display: flex; align-items: center; gap: 1px; padding: 2px 4px; background: linear-gradient(#fafafa, #ebebeb); border-top: 1px solid #fff; border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.tool-button { height: 26px; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; border: 1px solid transparent; border-radius: 3px; background: transparent; padding: 0 7px 0 5px; white-space: nowrap; }
.tool-button:hover:not(:disabled) { border-color: var(--hover-line); background: var(--button-hover); }
.tool-button:active:not(:disabled) { background: #c4e0f8; }
.tool-button:disabled { color: var(--text-faint); }
.tool-button:disabled svg { opacity: .4; filter: grayscale(.6); }
.tool-separator { width: 1px; height: 20px; flex: 0 0 1px; margin: 0 4px; background: var(--line-soft); box-shadow: 1px 0 #fff; }
.tool-icon { width: 18px; height: 18px; display: grid; place-items: center; }
/* Every icon slot is a grid cell holding one duotone SVG, so the glyph never
   shifts a row's height the way a text glyph did. */
.pane-icon, .tab-icon, .row-icon { display: grid; place-items: center; }

/* The way the desk trades is the first thing on the Manager toolbar and the
   loudest: each half wears its own palette colour when it is the one in force,
   tinted rather than filled so its icon stays visible. */
.trade-mode-switch { display: flex; flex: 0 0 auto; margin-right: 6px; border: 1px solid var(--button-line); border-radius: 3px; overflow: hidden; background: var(--pane); }
.trade-mode { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 7px; border: 0; background: transparent; color: var(--text-dim); font-weight: bold; white-space: nowrap; }
.trade-mode + .trade-mode { border-left: 1px solid var(--button-line); }
.trade-mode:hover:not(:disabled):not(.active) { background: var(--hover); }
.trade-mode:disabled { opacity: .45; }
.trade-mode.client.active { background: #e2f4e3; color: #0b7413; box-shadow: inset 0 -2px #0e8a17; }
.trade-mode.manager.active { background: #fcebdf; color: #b34a00; box-shadow: inset 0 -2px #cc5500; }
/* A trading dialog repeats the way it trades under its title, in the same colours. */
.trade-mode-banner { display: flex; align-items: center; gap: 6px; padding: 5px 10px; font-weight: bold; }
.trade-mode-banner.client { background: #e2f4e3; color: #0b7413; border-bottom: 1px solid #9fd3a4; }
.trade-mode-banner.manager { background: #fcebdf; color: #b34a00; border-bottom: 1px solid #ecb48e; }

/* ---------------------------------------------------------------------------
   Docked windows
   ------------------------------------------------------------------------ */
.pane { border: 1px solid var(--line); background: var(--pane); min-width: 0; min-height: 0; overflow: hidden; }
.pane-title { height: 20px; display: flex; align-items: center; gap: 5px; padding: 0 6px; background: var(--caption); border-bottom: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; }
.danger-title { color: #8e1515; }

/* A window's tabs along its bottom edge: the one on top is white and joined
   to the page above it, the others are words on the window face. */
.bottom-tabs { height: 22px; display: flex; align-items: flex-start; gap: 0; padding: 0 3px; background: var(--face); border-top: 1px solid var(--line); overflow: hidden; }
.bottom-tabs button { height: 20px; display: inline-flex; align-items: center; gap: 5px; margin-top: -1px; padding: 0 10px; border: 1px solid transparent; border-top: 0; border-radius: 0 0 3px 3px; background: transparent; color: var(--text-dim); white-space: nowrap; }
.bottom-tabs button:hover:not(.active) { color: var(--text); background: var(--hover); }
.bottom-tabs button.active { height: 21px; border-color: var(--line); background: var(--pane); color: var(--text); }
.bottom-tabs button:not(.active) + button:not(.active) { box-shadow: -1px 0 0 -4px var(--line-soft); }
.tab-page { min-width: 0; min-height: 0; overflow: hidden; display: grid; }
.tab-page > * { min-width: 0; min-height: 0; }

/* ---------------------------------------------------------------------------
   Administrator: the navigator and the section panel
   ------------------------------------------------------------------------ */
/* The navigator lists a fixed set of sections, so its column is sized to the
   longest label and never scrolls: a second scrollbar beside the one that
   matters is noise. */
.admin-body { display: grid; grid-template-columns: 178px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 3px; padding: 3px; min-height: 0; overflow: hidden; }
.navigator { display: grid; grid-template-rows: 20px minmax(0, 1fr); }
.tree { padding: 4px 0 8px 4px; overflow: hidden; }
.tree-root, .tree-item { width: calc(100% - 4px); display: flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 2px; background: transparent; text-align: left; white-space: nowrap; overflow: hidden; }
.tree-root { height: 22px; padding: 0 4px; font-weight: bold; }
.tree-item { position: relative; height: 21px; padding: 0 4px 0 6px; }
.tree-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tree-root:hover, .tree-item:hover { border-color: #bcdcf4; background: var(--hover); }
.tree-root.selected, .tree-item.selected { border-color: var(--select-soft-line); background: var(--select-soft); }
/* The dotted connectors of a Windows tree: one line down the branch, a tick
   to each section. */
.tree-branch { position: relative; margin-left: 12px; padding-left: 12px; }
.tree-branch::before { content: ""; position: absolute; left: 0; top: 0; bottom: 11px; border-left: 1px dotted var(--line); }
.tree-item::before { content: ""; position: absolute; left: -12px; top: 10px; width: 10px; border-top: 1px dotted var(--line); }
.tree-icon { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; }

/* The one scrollable region in the workspace. Its title stays put and its
   content row is what scrolls, so a wide list is reachable without the
   window frame moving. */
.admin-main { display: grid; grid-template-rows: 20px minmax(0, 1fr); min-width: 0; min-height: 0; }
.admin-main.with-request { grid-template-rows: 20px minmax(0, 1fr) auto; }
.admin-main > :not(.pane-title):not(.request-panel) { min-width: 0; min-height: 0; overflow: auto; }

/* The server node lists what each section administers, as MT4's root node does. */
.server-overview { overflow: auto; }
.list-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.list-table th { height: 22px; padding: 0 6px; text-align: left; font-weight: normal; background: linear-gradient(#fff, #f1f2f4); border-right: 1px solid var(--line-soft); border-bottom: 1px solid #c4c4c4; }
.list-table td { height: 20px; padding: 0 6px; }
.list-table tbody tr:nth-child(even) { background: var(--zebra); }
.list-table .number { text-align: right; font-variant-numeric: tabular-nums; width: 70px; }
.list-table td:first-child { width: 200px; }
.list-table td:first-child .row-icon { display: inline-grid; vertical-align: -3px; margin-right: 6px; }
.overview-row { cursor: default; }
.overview-row:hover { background: var(--hover) !important; }

/* The server settings: one property a line, under the subject it belongs to. */
.property-layout { overflow: auto; padding: 10px; }
.property-grid { max-width: 780px; border: 1px solid #c4c4c4; }
.property-head, .property-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.property-head span { height: 22px; display: flex; align-items: center; padding: 0 6px; background: linear-gradient(#fff, #f1f2f4); border-bottom: 1px solid #c4c4c4; }
.property-head span + span { border-left: 1px solid var(--line-soft); }
.property-group { height: 20px; display: flex; align-items: center; padding: 0 6px; font-weight: bold; color: #1f4f86; background: #eef3f9; border-bottom: 1px solid var(--line-faint); }
.property-row { min-height: 20px; border-bottom: 1px solid var(--line-faint); }
.property-row:hover { background: var(--hover); }
.property-name { padding: 3px 6px 3px 18px; border-right: 1px solid var(--line-faint); color: var(--text-dim); }
.property-value { padding: 3px 6px; overflow-wrap: anywhere; }
.property-actions { display: flex; gap: 6px; margin-top: 10px; }

/* ---------------------------------------------------------------------------
   The request row under a list that grows without bound: one line, as MT4's.
   Its answer is frozen, so this row is the only thing that changes what the
   list above it shows.
   ------------------------------------------------------------------------ */
.request-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 30px; padding: 3px 6px; border-top: 1px solid var(--line-soft); background: var(--face); }
.request-icon { display: grid; place-items: center; }
.request-field { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.request-field > span { color: var(--text-dim); }
.request-field input:not([type="checkbox"]), .request-field select { height: 21px; padding: 0 4px; border: 1px solid var(--field-line); border-radius: 0; background: var(--pane); }
.request-field input:focus, .request-field select:focus { outline: 0; border-color: var(--select); }
.request-field.wide input { width: 220px; }
.request-field.short input { width: 64px; }
.request-field input.timestamp-input.minutes { width: 124px; }
.request-field.check { flex-direction: row-reverse; }
.request-field small { color: var(--text-dim); }
.request-state { margin-left: auto; color: var(--text-dim); white-space: nowrap; }
.request-state.failed { color: var(--error-text); white-space: normal; max-width: 420px; }
.request-panel > button { min-width: 88px; }

/* ---------------------------------------------------------------------------
   Lists
   ------------------------------------------------------------------------ */
.grid-frame { position: relative; width: 100%; height: 100%; min-height: 0; }
.empty-grid { position: absolute; inset: 22px 0 0; display: grid; place-items: center; padding: 12px; color: var(--text-faint); text-align: center; pointer-events: none; }
.pane > .empty-grid, .tab-page > .empty-grid { position: static; height: 100%; }
.ag-root-wrapper { border: 0 !important; border-radius: 0 !important; }
.ag-header { background: linear-gradient(#ffffff, #f1f2f4) !important; }
.ag-header-cell-label { gap: 3px; }
.ag-cell { font-variant-numeric: tabular-nums; }
.ag-row-selected { color: #fff; }
.ag-row-selected .ag-cell svg { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)); }
.ag-row-selected:hover::before { background-color: var(--select) !important; }
.cell-center, .header-center .ag-header-cell-label { justify-content: center; text-align: center; }
.cell-center { display: flex; align-items: center; }
/* A boolean cell is its flag icon; sit it on the text baseline the row uses. */
.ag-cell svg { vertical-align: text-bottom; }
.lead-cell { display: flex; align-items: center; gap: 5px; min-width: 0; }
.lead-cell .row-icon { flex: 0 0 14px; }
.bar-cell { position: relative; display: block; height: 100%; }
.bar-cell::before { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; border-left: 1px solid #c8c8c8; }
.bar-cell .bar { position: absolute; top: 5px; bottom: 5px; }
.bar-cell .bar.long { background: #5276d6; }
.bar-cell .bar.short { background: #d65a5a; }

/* A read-only table inside a property sheet. */
.read-only-table-wrap { min-width: 0; overflow: auto; border: 1px solid #c4c4c4; background: var(--pane); }
.read-only-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.read-only-table th { height: 22px; padding: 0 6px; text-align: left; font-weight: normal; background: linear-gradient(#fff, #f1f2f4); border-right: 1px solid var(--line-soft); border-bottom: 1px solid #c4c4c4; }
.read-only-table td { height: 20px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.read-only-table tbody tr:nth-child(even) { background: var(--zebra); }
.read-only-table .number { text-align: right; }
.read-only-table .empty-table { height: 80px; color: var(--text-faint); text-align: center; }
.read-only-table tr.summary-row td { background: #e8e8e8; font-weight: bold; }

/* ---------------------------------------------------------------------------
   Manager: Market Watch, the list windows, Margin Calls and the Toolbox
   ------------------------------------------------------------------------ */
.manager-body { display: grid; grid-template-columns: 252px minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 64%) minmax(0, 36%); gap: 3px; padding: 3px; min-height: 0; }
/* The View menu switches the service windows off, exactly as MT4's does. */
.manager-body.no-market-watch { grid-template-columns: minmax(0, 1fr) 300px; }
.manager-body.no-margin-calls { grid-template-columns: 252px minmax(0, 1fr); }
.manager-body.no-market-watch.no-margin-calls { grid-template-columns: minmax(0, 1fr); }
.manager-body.no-toolbox { grid-template-rows: minmax(0, 1fr); }
.manager-body.no-market-watch .risk-toolbox { grid-column: 1 / 3; }
.manager-body.no-margin-calls .risk-toolbox { grid-column: 2 / 3; }
.manager-body.no-market-watch.no-margin-calls .risk-toolbox { grid-column: 1 / 2; }
.manager-center { display: grid; grid-template-rows: minmax(0, 1fr) 22px; }
.margin-calls { display: grid; grid-template-rows: 20px minmax(0, 1fr); }
.risk-toolbox { grid-column: 2 / 4; display: grid; grid-template-rows: minmax(0, 1fr) 22px; }
/* Requests is two lists, one over the other: what waits, and what routing did. */
.split-lists { display: grid; grid-template-rows: minmax(0, 2fr) minmax(0, 3fr); }
.split-list { display: grid; grid-template-rows: 20px minmax(0, 1fr); min-height: 0; }
.split-list + .split-list { border-top: 1px solid var(--line); }
.list-caption { display: flex; align-items: center; gap: 5px; padding: 0 6px; background: var(--caption); border-bottom: 1px solid var(--line-soft); }
.list-with-request { display: grid; grid-template-rows: minmax(0, 1fr) auto; }

.market-watch { grid-row: 1 / 3; display: grid; grid-template-rows: 20px minmax(0, 1fr) 22px; }
.quote-table { display: grid; grid-template-rows: 22px minmax(0, 1fr); min-height: 0; }
.quote-head, .quote-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px; align-items: center; }
.quote-head.with-spread, .quote-row.with-spread { grid-template-columns: minmax(0, 1fr) 66px 66px 42px; }
.quote-head.with-time, .quote-row.with-time { grid-template-columns: minmax(0, 1fr) 62px 62px 74px; }
.quote-head.with-spread.with-time, .quote-row.with-spread.with-time { grid-template-columns: minmax(0, 1fr) 58px 58px 36px 72px; }
.quote-head { padding: 0 6px 0 4px; background: linear-gradient(#fff, #f1f2f4); border-bottom: 1px solid #c4c4c4; }
.quote-head span { height: 22px; display: flex; align-items: center; }
.quote-head span:not(:first-child) { justify-content: flex-end; }
.quote-list { overflow: auto; min-height: 0; }
.quote-row { height: 20px; padding: 0 6px 0 4px; cursor: default; font-variant-numeric: tabular-nums; }
.quote-row:nth-child(even) { background: var(--zebra); }
.quote-row:hover { background: var(--hover); }
.quote-row > span { text-align: right; overflow: hidden; white-space: nowrap; }
.quote-row .quote-symbol { display: flex; align-items: center; gap: 4px; text-align: left; font-weight: bold; }
.quote-row .row-icon { width: 13px; height: 13px; flex: 0 0 13px; }
.quote-row .bid, .quote-row .ask { color: #303030; }
.quote-row.up .bid, .quote-row.up .ask { color: var(--up); }
.quote-row.down .bid, .quote-row.down .ask { color: var(--down); }
.quote-row.unquoted .quote-symbol { color: var(--text-faint); }
.quote-row.selected, .quote-row.selected:hover { color: #fff; background: var(--select); }
.quote-row.selected .bid, .quote-row.selected .ask, .quote-row.selected .quote-symbol { color: #fff; }
.spread, .quote-time { color: var(--text-dim); }
.tick-chart { display: grid; grid-template-rows: 20px minmax(0, 1fr); min-height: 0; background: var(--pane); }
.tick-chart-symbol { display: flex; align-items: center; padding: 0 6px; font-weight: bold; }
.tick-chart-plot { min-height: 0; overflow: hidden; }
/* uPlot's own layout rules, which the tick chart needs and its package ships
   only as a stylesheet: the plot, its overlay and its axes are positioned
   inside one wrapper. */
.tick-chart .uplot { width: min-content; font: 10px Tahoma, sans-serif; line-height: 1.5; }
.tick-chart .u-wrap { position: relative; user-select: none; }
.tick-chart .u-over, .tick-chart .u-under, .tick-chart .u-axis { position: absolute; }
.tick-chart .u-under { overflow: hidden; }
.tick-chart .uplot canvas { display: block; position: relative; width: 100%; height: 100%; }
.tick-chart .u-axis.u-off, .tick-chart .u-select.u-off { display: none; }
.symbols-window { width: min(640px, 92vw); max-height: 84vh; display: grid; grid-template-rows: 26px auto minmax(0, 1fr) auto; }
.symbols-body { display: grid; gap: 8px; }
.symbol-group { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.symbol-group legend label { display: flex; align-items: center; gap: 6px; }
.symbol-group .symbol-name { min-width: 64px; font-weight: bold; }
.symbol-group .symbol-description { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   The status bar
   ------------------------------------------------------------------------ */
.statusbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 130px) minmax(0, 96px) minmax(0, 190px); align-items: center; padding: 0 2px; background: var(--face); border-top: 1px solid var(--line-soft); }
.statusbar span { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statusbar span + span { border-left: 1px solid var(--line-soft); }
.connection.online { color: #087d19; }
.connection.offline { color: #a21a1a; }
.connection.connecting { color: #8a6d00; }

/* ---------------------------------------------------------------------------
   Windows: login, dialogs, property sheets
   ------------------------------------------------------------------------ */
.login-desktop, .boot-screen { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(160deg, #2c6aa8, #154c80 70%); }
.boot-screen { color: #fff; font-size: 13px; }
.window { border: 1px solid #707070; border-radius: 4px 4px 0 0; background: var(--face); box-shadow: 0 6px 24px rgba(0, 20, 50, .35); overflow: hidden; }
.window-title { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 9px; color: #1a1a1a; font-size: 12px; background: var(--title); border-bottom: 1px solid #a9b8cc; }
.window-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-title button { width: 28px; min-width: 0; height: 18px; flex: 0 0 28px; margin-left: auto; padding: 0; border: 1px solid #8f9fb3; border-radius: 3px; background: linear-gradient(#fbfbfb, #dfe5ec); line-height: 14px; font-size: 13px; }
.window-title button:hover:not(:disabled) { color: #fff; border-color: #8a1b1b; background: linear-gradient(#e88a7d, #c42b1c); }

.login-window { width: 380px; display: grid; grid-template-columns: 84px 1fr; gap: 10px 4px; padding-bottom: 14px; border-radius: 4px 4px 0 0; }
.login-window .window-title { grid-column: 1 / 3; }
.login-logo { grid-row: 2 / 5; width: 52px; height: 52px; justify-self: center; margin-top: 4px; display: grid; place-items: center; color: #fff; font-size: 28px; font-weight: bold; border-radius: 6px; background: linear-gradient(135deg, #3b86d6, #154c80); box-shadow: inset 0 1px rgba(255, 255, 255, .4); }
.login-intro { grid-column: 2; margin: 2px 14px 2px 0; color: var(--text-dim); line-height: 15px; }
.login-window label { display: grid; grid-template-columns: 62px 1fr; gap: 6px; align-items: center; margin-right: 14px; grid-column: 2; }
.login-window label > span { text-align: right; }
.login-window input { height: 22px; padding: 0 5px; border: 1px solid var(--field-line); background: var(--pane); }
.login-window input:focus { outline: 0; border-color: var(--select); }
.login-window .error-strip, .login-window .dialog-buttons { grid-column: 1 / 3; margin: 0 14px; }

/* Buttons, everywhere a window or a row of controls has them. The selectors
   carry no weight of their own (:where), so a button's own class — the title
   bar's close box, a tab, Deposit and Withdrawal — always says the last word. */
:where(.window, .property-actions, .request-panel) button:where(:not(.tool-button):not(.trade-mode):not(.tab)) {
  height: 23px; min-width: 75px; padding: 0 10px;
  border: 1px solid var(--button-line); border-radius: 3px; background: var(--button);
}
:where(.window, .property-actions, .request-panel) button:where(:not(.tool-button):not(.trade-mode):not(.tab)):hover:not(:disabled) { border-color: #3c7fb1; background: var(--button-hover); }
:where(.window, .property-actions, .request-panel) button:where(:not(.tool-button):not(.trade-mode):not(.tab)):active:not(:disabled) { background: #c4e0f8; }
:where(.window, .property-actions, .request-panel) button:where(:not(.tool-button):not(.trade-mode):not(.tab)):disabled { color: var(--text-faint); border-color: #c4c4c4; background: #f4f4f4; }
.default-button { border-color: #3c7fb1 !important; box-shadow: inset 0 0 0 1px #9ccbf0; }
input:where(:not([type="checkbox"]):not([type="color"])), select, textarea { border-radius: 0; }

.error-strip { padding: 5px 8px; color: var(--error-text); background: var(--error-fill); border: 1px solid var(--error-line); }
.dialog-buttons { display: flex; justify-content: flex-end; align-items: center; gap: 7px; padding-top: 6px; }
.dialog-buttons .button-gap { flex: 1; }

/* A window opens high in the screen and stays where it opened: whatever grows
   inside it grows downwards, so nothing moves out from under the pointer. */
.modal-shade { position: fixed; z-index: 20; inset: 0; display: grid; place-items: start center; padding-top: max(20px, 7vh); background: rgba(20, 35, 55, .28); }

/*
 * MT4-style property sheets.
 *
 * The original Administrator and Manager use modal property sheets rather
 * than inline editing: a title naming the record, tabs, a white page per tab
 * opening with its subject's picture and what the page is for, labels
 * right-aligned against their boxes, and OK / Cancel at the foot.
 */
.entity-editor {
  width: min(860px, calc(100vw - 44px));
  max-height: calc(100vh - max(20px, 7vh) - 12px);
  display: grid;
  grid-template-rows: 26px auto minmax(200px, 1fr) auto;
}
.entity-editor:has(> .trade-mode-banner) { grid-template-rows: 26px auto auto minmax(200px, 1fr) auto; }
.entity-editor.single-page { grid-template-rows: 26px minmax(160px, 1fr) auto; }
/* A property sheet keeps one size across its pages, as a Windows property
   sheet does, so changing tabs never moves OK and Cancel. */
.entity-editor:not(.single-page) .editor-page { min-height: min(340px, calc(100vh - 190px)); }
.entity-editor.single-page:has(> .trade-mode-banner) { grid-template-rows: 26px auto minmax(160px, 1fr) auto; }

/* A property sheet's tabs: Windows 7 notebook tabs, the open one white and
   joined to its page, the others a step lower behind it. */
.editor-tabs { min-width: 0; display: flex; align-items: flex-end; gap: 0; padding: 6px 8px 0 10px; overflow: hidden; background: var(--face); }
.editor-tabs button.tab { position: relative; flex: 0 0 auto; height: 20px; margin: 0 -1px -1px 0; padding: 0 9px; border: 1px solid #898c95; border-radius: 2px 2px 0 0; background: linear-gradient(#f4f4f4, #e1e1e1); }
.editor-tabs button.tab:hover:not(.active) { background: linear-gradient(#f3f9fe, #d6ebfb); }
.editor-tabs button.tab.active { z-index: 1; height: 23px; margin-left: -2px; margin-right: -3px; padding: 0 11px; border-bottom-color: var(--pane); background: var(--pane); }
.editor-tabs button.tab.active:first-child { margin-left: -2px; }

.editor-page { min-height: 0; display: flex; flex-direction: column; margin: 0 8px; border: 1px solid #898c95; background: var(--pane); }
.editor-page > .editor-body { flex: 1 1 auto; }
.editor-page > .editor-intro, .editor-page > .editor-hint { flex: 0 0 auto; }
.single-page .editor-page { margin-top: 8px; }
.editor-intro { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px 6px; }
.editor-intro p { margin: 0; color: #333; line-height: 15px; }
.intro-icon { width: 40px; height: 40px; display: grid; place-items: center; }
.editor-body { min-height: 0; overflow: auto; padding: 8px 14px 12px; }
.editor-hint { min-height: 34px; padding: 6px 14px 7px 66px; color: var(--text-dim); line-height: 14px; border-top: 1px solid var(--line-faint); background: #fafafa; }
.editor-note { margin: 0 0 8px; padding: 5px 8px; border: 1px solid var(--warn-line); background: var(--warn-fill); color: var(--warn-text); }

/* The fields of a page in two columns, each a right-aligned label against its
   box. A box is as wide as what it holds; the column only bounds it. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 5px 22px; }
.form-field { min-width: 0; display: grid; grid-template-columns: 138px minmax(0, 1fr); align-items: center; gap: 2px 8px; }
.field-label { line-height: 14px; text-align: right; color: #1a1a1a; }
.form-field.has-help > .field-label, .check-field.has-help .check-label { cursor: help; }
.form-field.has-help:not(.check-field) > .field-label::after,
.check-field.has-help .check-label::after { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 0 2px 4px; border-radius: 50%; background: #6d9bd4; vertical-align: middle; }
/* A box of checkboxes reads down its own columns, without a label column. */
.field-group .check-field { grid-template-columns: 0 minmax(0, 1fr); gap: 0 4px; padding-left: 8px; }
.field-control { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.field-control > input:where(:not([type="checkbox"]):not([type="color"])),
.field-control > select,
.field-control > textarea { flex: 1 1 auto; width: 100%; min-width: 0; }
.field-control > input.size-short, .field-control > select.size-short { flex: 0 0 96px; width: 96px; }
.field-control > input.size-medium, .field-control > select.size-medium { flex: 0 1 180px; width: 180px; }
.field-control > input.timestamp-input { flex: 0 0 160px; width: 160px; }
.field-control > input.timestamp-input.minutes { flex: 0 0 128px; width: 128px; }
.field-control > .static-value { padding: 2px 0; font-variant-numeric: tabular-nums; }
.check-field > .field-control { gap: 6px; }
.check-label { color: #1a1a1a; }
.form-field input:where(:not([type="checkbox"]):not([type="color"])),
.form-field select,
.form-field textarea,
.nested-table input:where(:not([type="checkbox"])),
.nested-table select,
.time-control input,
.session-row input,
.session-row select,
.group-operations input,
.group-operations select,
.history-request input,
.history-request select {
  height: 21px;
  padding: 0 4px;
  color: var(--text);
  background: var(--pane);
  border: 1px solid var(--field-line);
}
.form-field textarea { min-height: 44px; height: auto; resize: vertical; padding: 3px 4px; }
.form-field input[type="checkbox"],
.check-group input[type="checkbox"],
.nested-table input[type="checkbox"],
.symbols-window input[type="checkbox"] { width: 13px; height: 13px; margin: 0; accent-color: #2f7fd1; }
.form-field input:disabled, .form-field select:disabled, .form-field textarea:disabled,
.nested-table input:disabled, .nested-table select:disabled { color: #6d6d6d !important; background: #f4f4f4 !important; border-color: #d0d0d0 !important; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus,
.nested-table input:focus, .nested-table select:focus, .time-control input:focus,
.session-row input:focus, .session-row select:focus,
.group-operations input:focus, .group-operations select:focus { outline: 0; border-color: var(--select); }
input.timestamp-input.invalid { border-color: #d05050 !important; background: #fff4f4 !important; }
input::placeholder { color: #a8a8a8; }
.field-wide { grid-column: 1 / -1; }
.field-unit { color: var(--text-dim); white-space: nowrap; }
.field-note { display: block; margin-top: 3px; color: var(--text-dim); line-height: 14px; }
.field-inert { flex: 0 0 auto; padding: 1px 5px; color: var(--warn-text); background: var(--warn-fill); border: 1px solid var(--warn-line); border-radius: 2px; white-space: nowrap; cursor: help; }
.check-group > .field-inert { justify-self: start; grid-column: 1 / -1; }

/* A box of related fields, as MT4 boxed Lots, Commissions and Timeouts. */
.field-group { min-width: 0; margin: 4px 0 2px; padding: 6px 10px 9px; border: 1px solid #d5dfe5; border-radius: 3px; }
.field-group legend { padding: 0 4px; color: #1f4f86; }

.time-control { display: grid; grid-template-columns: 46px 8px 46px auto; align-items: center; gap: 2px; justify-content: start; }
.time-control span { text-align: center; font-weight: bold; }
.time-control input { width: 100%; min-width: 0; }
.color-control { display: flex; align-items: center; gap: 7px; }
.color-control input[type="color"] { width: 44px; height: 21px; padding: 1px 2px; border: 1px solid var(--field-line); background: var(--pane); }
.color-control span { color: var(--text-dim); }

.check-group { min-width: 0; margin: 2px 0; padding: 7px 10px 9px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; border: 1px solid #d5dfe5; border-radius: 3px; }
.check-group legend { padding: 0 4px; color: #1f4f86; }
.check-group label { min-width: 0; display: flex; align-items: center; gap: 6px; }

/* The description line at the foot of a page: what the field pointed at does. */
.editor-hint { height: 74px; overflow: auto; padding: 6px 14px 7px; color: #333; line-height: 15px; border-top: 1px solid var(--line-faint); background: #f8f9fb; }
.editor-hint strong { color: #1a1a1a; }
.hint-idle { color: var(--text-faint); }

.nested-table-wrap { min-width: 0; overflow-x: auto; padding-bottom: 2px; }
.nested-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--pane); border: 1px solid #c4c4c4; }
.nested-table th { height: 22px; padding: 0 5px; white-space: nowrap; text-align: left; font-weight: normal; background: linear-gradient(#fff, #f1f2f4); border-right: 1px solid var(--line-soft); border-bottom: 1px solid #c4c4c4; }
.nested-table th small { color: var(--text-dim); }
.nested-table td { height: 24px; padding: 1px 2px; border-right: 1px solid var(--line-faint); border-bottom: 1px solid var(--line-faint); }
.nested-table input:not([type="checkbox"]), .nested-table select { width: 100%; min-width: 0; }
/* The row buttons stay in view while a wide rule table scrolls under them. */
.nested-table td:last-child, .nested-table th:last-child { width: 30px; text-align: center; white-space: nowrap; position: sticky; right: 0; background: var(--pane); box-shadow: -1px 0 0 var(--line-soft); }
.nested-table.reorderable td:last-child, .nested-table.reorderable th:last-child { width: 82px; }
.nested-table td:last-child button, .session-row button.row-remove { width: 22px !important; min-width: 0 !important; height: 19px !important; padding: 0 !important; vertical-align: middle; }
.nested-table td:last-child button + button { margin-left: 2px; }
.nested-table td:last-child button svg { display: block; margin: auto; }
.nested-table td:last-child button:disabled svg { opacity: .35; }
button.row-remove { color: #8d1515; font-size: 13px; }
.add-button { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; }

/* A group's symbol rules: the list, its buttons beside it, and the chosen
   rule set out underneath. */
.rule-list { display: grid; gap: 8px; }
.rule-list-top { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; align-items: start; }
.rule-list-top .read-only-table-wrap { max-height: 150px; }
.rule-buttons { display: grid; gap: 5px; }
.rule-buttons button { min-width: 0 !important; width: 100%; }
.rule-table tbody tr { cursor: default; }
.rule-table tbody tr:hover td { background: var(--hover); }
.rule-table tbody tr.selected td, .week-table tbody tr.selected td { color: #fff; background: var(--select); }
.rule-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.rule-detail .field-group:first-child { grid-column: 1 / -1; }
.rule-detail .field-group:first-child .form-grid { grid-template-columns: minmax(0, 1fr) auto auto; }
.rule-detail .field-group:not(:first-child) .form-grid { grid-template-columns: minmax(0, 1fr); }
.rule-detail .form-field { grid-template-columns: 112px minmax(0, 1fr); }
.rule-detail .field-group:first-child .form-field.field-wide { grid-column: auto; }
.rule-detail .field-group:first-child .check-field { grid-template-columns: 0 auto; padding-left: 12px; }

.table-field { display: block; }
.table-field > span { display: block; margin-bottom: 4px; text-align: left !important; font-weight: bold; }
.dialog-action { min-height: 110px; padding: 18px; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; border: 1px solid #d5dfe5; border-radius: 3px; }
.dialog-action p { max-width: 540px; margin: 0; line-height: 16px; color: #444; }
.dialog-action button { min-width: 150px !important; }
.password-action { display: flex; align-items: center; gap: 14px; }
.password-action p { flex: 1; margin: 0; color: #444; line-height: 15px; }
.history-request { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 8px; border: 1px solid #d5dfe5; border-radius: 3px; background: #fafbfc; }
.history-request .history-title { font-weight: bold; }
.history-request input.timestamp-input { width: 128px; }
.history-request .error-strip { flex: 1 0 100%; }

.sessions-editor { min-width: 0; display: grid; gap: 8px; }
.sessions-editor fieldset { min-width: 0; margin: 0; padding: 6px 10px 8px; border: 1px solid #d5dfe5; border-radius: 3px; }
.sessions-editor legend { padding: 0 4px; color: #1f4f86; }
.week-table tbody tr { cursor: default; }
.week-table tbody tr:hover td { background: var(--hover); }
.week-table td:first-child { width: 110px; }
.session-columns { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.session-columns h4 { margin: 0 0 5px; color: #333; font-size: 11px; font-weight: normal; text-decoration: underline; text-decoration-color: #c8d3de; text-underline-offset: 3px; }
.session-list { min-width: 0; }
.session-none { margin-bottom: 4px; color: var(--text-faint); }
/* The mode, the two clocks, how long the session lasts, and Remove — one line. */
.session-row { min-width: 0; display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.session-row .session-mode { flex: 0 0 104px; width: 104px; }
.session-clocks { display: flex; align-items: center; gap: 3px; min-width: 0; color: var(--text-dim); }
.session-clocks span { padding: 0 1px; }
.session-row input.clock-box { flex: 0 0 38px; width: 38px; text-align: right; padding: 0 2px; }
/* The length of the session, beside the boxes that produced it. This is what
   shows an operator that the closing minute is worked in full. */
.session-duration { flex: 0 0 auto; height: 21px; display: flex; align-items: center; padding: 0 4px; white-space: nowrap; color: #1f4f86; font-weight: bold; cursor: help; }

/* Group Operations: the accounts, and the operations as buttons beside them. */
.group-operations { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 10px; min-height: 220px; }
.group-operations > .read-only-table-wrap { max-height: 320px; }
.group-operation-buttons { display: grid; align-content: start; gap: 5px; }
.group-operation-buttons button { width: 100%; }
.operation-field { display: grid; gap: 2px; margin-top: 4px; color: var(--text-dim); }
.operation-field select, .operation-field input { width: 100%; }
.operation-gap { height: 8px; }

/* Money in and money out, in the colours MT4 gives its Deposit and
   Withdrawal buttons. */
.window button.deposit-button { min-width: 96px; border-color: #4a78c2; background: linear-gradient(#e9f0fd, #b9cdf3); }
.window button.withdraw-button { min-width: 96px; border-color: #c25050; background: linear-gradient(#fdeaea, #f2b8b8); }

.entity-editor > .dialog-buttons, .confirm-window > .dialog-buttons { padding: 9px 8px 9px; background: var(--face); }

.confirm-window { width: min(460px, calc(100vw - 44px)); }
.confirm-body { min-height: 92px; padding: 18px 18px 10px; display: grid; grid-template-columns: 40px 1fr; align-items: start; gap: 14px; background: var(--pane); border-bottom: 1px solid var(--line-faint); }
.confirm-body p { margin: 2px 0 8px; line-height: 16px; }
.confirm-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #17120a; font-size: 21px; font-weight: bold; background: radial-gradient(circle at 35% 30%, #fde68a, #f2c94c 60%, #d8a821); border: 1px solid #a8841f; border-radius: 50%; }
.confirm-icon.info { color: #fff; background: radial-gradient(circle at 35% 30%, #8cc4f5, #2f7fd1 65%); border-color: #1d5fa8; font-family: Georgia, serif; }
.confirm-detail { color: var(--text-dim); }
.confirm-body > .error-strip { grid-column: 1 / -1; }
.danger-button { color: #8e1010; font-weight: bold; }

.field-inert { color: var(--warn-text); }

@media (max-width: 760px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .field-wide { grid-column: 1; }
  .check-group { grid-template-columns: minmax(0, 1fr); }
  .session-columns { grid-template-columns: minmax(0, 1fr); }
}

.about-facts { border-collapse: collapse; margin-top: 4px; }
.about-facts td { padding: 2px 12px 2px 0; }
.about-facts td:first-child { color: var(--text-dim); }

/* A holiday's date reads across one line, year, month and day. */
.editor-holiday .field-group .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.editor-holiday .field-group .form-field { grid-template-columns: 50px minmax(0, 1fr); }

/* MT4 Manager's find box on the toolbar: a login, a name or an order. */
.find-box { display: flex; align-items: center; gap: 4px; margin-left: auto; padding-left: 8px; }
.find-box input { width: 190px; height: 22px; padding: 0 5px; border: 1px solid var(--field-line); background: var(--pane); }
.find-box input:focus { outline: 0; border-color: var(--select); }
.find-box.missed input { border-color: #d05050; background: #fff4f4; }

/* The Manager's journal row shares its window with the tab strip's count, so
   its boxes are narrower and it says nothing the tab already says. */
.request-panel.compact { gap: 4px 9px; }
.request-panel.compact .request-field.wide input { width: 140px; }
.request-panel.compact .request-field select { max-width: 112px; }
.request-panel.compact .request-field input.timestamp-input.minutes { width: 114px; }

/* The grey Total line under Summary and Exposure, as MT4 drew it. */
.ag-grid-pinned-bottom-rows { border-top: 1px solid #c4c4c4; }
.ag-row.ag-row-pinned { background-color: #e6e6e6 !important; font-weight: bold; }

/* On a laptop's screen the side windows give the lists the width MT4's
   narrower columns never needed. */
@media (max-width: 1500px) {
  .manager-body { grid-template-columns: 232px minmax(0, 1fr) 226px; }
  .manager-body.no-market-watch { grid-template-columns: minmax(0, 1fr) 226px; }
  .manager-body.no-margin-calls { grid-template-columns: 232px minmax(0, 1fr); }
  .quote-head, .quote-row { grid-template-columns: minmax(0, 1fr) 64px 64px; }
  .admin-body { grid-template-columns: 164px minmax(0, 1fr); }
}

/* A window with a field or two is as narrow as MT4's small dialogs, its fields
   in one column. */
.entity-editor.editor-password, .entity-editor.editor-security { width: min(540px, calc(100vw - 44px)); }
.editor-password .form-grid, .editor-security .form-grid { grid-template-columns: minmax(0, 1fr); }
.entity-editor.editor-tick { width: min(680px, calc(100vw - 44px)); }
.quote-nudge { display: flex; gap: 6px; }
.quote-nudge button { min-width: 70px !important; }