:root {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
  color: #101010;
  background: #3b6ea5;
  font-synthesis: none;
}

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

/* 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 here has a minimum width. The window is the frame, every region
   inside it is fixed, and the only thing that ever scrolls is the contents of
   the section panel — see .admin-main below. */
.desktop-app {
  height: 100%;
  display: grid;
  grid-template-rows: 29px 1fr 22px;
  background: #d4d0c8;
  overflow: hidden;
}

.window-title {
  color: white;
  font-weight: bold;
  background: linear-gradient(90deg, #0b4f9c, #4c92d8 65%, #9bc5ee);
  text-shadow: 1px 1px #173b62;
}

.login-logo {
  display: grid; place-items: center; color: white; font-weight: bold;
  background: linear-gradient(135deg, #2d70d2, #0a3070); border: 1px solid white;
}

.top-tabs { display: flex; align-items: end; gap: 2px; padding: 4px 6px 0; border-bottom: 1px solid #888; background: #ece9d8; overflow: hidden; }
.top-tabs button { height: 24px; min-width: 108px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #888; border-bottom: 0; background: #d4d0c8; }
.top-tabs button.active { background: white; font-weight: bold; position: relative; top: 1px; }
.top-tabs .operator { margin: 0 8px 6px auto; color: #374151; }
.top-tabs button.logout { min-width: 78px; height: 21px; margin-bottom: 3px; border: 1px solid #999; }

.workspace { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: 20px 35px minmax(0, 1fr); overflow: hidden; }
.classic-menu { display: flex; background: #f3f0e5; border-bottom: 1px solid #aaa; }
.menu-root { position: relative; }
.menu-root > button { height: 21px; border: 0; background: transparent; padding: 2px 9px; }
.menu-root > button:hover, .menu-root > button.open { color: white; background: #316ac5; }
.menu-drop { position: absolute; z-index: 45; top: 21px; left: 0; min-width: 210px; margin: 0; padding: 2px; list-style: none; border: 1px solid #8b8b8b; background: #f6f5f0; box-shadow: 2px 2px 5px rgba(0, 0, 0, .3); }
.menu-drop li button { width: 100%; height: 21px; display: flex; align-items: center; border: 0; background: transparent; padding: 2px 12px 2px 2px; text-align: left; }
.menu-drop li button:hover:not(:disabled) { color: white; background: #316ac5; }
.menu-drop li button:disabled { color: #999; }
.menu-gutter { width: 19px; height: 19px; flex: 0 0 19px; display: grid; place-items: center; margin-right: 6px; border: 1px solid transparent; }
.menu-gutter.checked { border-color: #7e9db9; border-radius: 2px; background: #fffbd7; }
.menu-drop li button:hover:not(:disabled) .menu-gutter.checked,
.context-menu li button:hover:not(:disabled) .menu-gutter.checked { border-color: #b9cee2; background: rgba(255, 255, 255, .22); }
.toolbar { display: flex; align-items: center; gap: 1px; padding: 2px 5px; border-bottom: 1px solid #888; background: linear-gradient(#f9f8f2, #d8d5c9); overflow: hidden; }
.tool-button { min-width: 52px; height: 29px; display: flex; align-items: center; gap: 3px; border: 1px solid transparent; background: transparent; padding: 2px 5px; }
.tool-button:hover:not(:disabled) { border-color: #7e9db9; background: #fffbd7; }
.tool-button:disabled { opacity: .45; }
.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 { display: grid; place-items: center; }

.pane { border: 1px solid #8e8e8e; background: white; min-width: 0; min-height: 0; overflow: hidden; }
.pane-title { height: 22px; display: flex; align-items: center; gap: 5px; padding: 3px 6px; font-weight: bold; background: linear-gradient(#f8f7f1, #d7d4ca); border-bottom: 1px solid #9d9d9d; }

/* The navigator lists a fixed set of sections whose longest label needs 116px,
   so the column is sized to that rather than to a desktop tree pane's habit.
   The width it gives back is width the section panel keeps, which matters most
   on the narrow screens where there is least of it. */
.admin-body { display: grid; grid-template-columns: 160px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 3px; padding: 3px; min-height: 0; overflow: hidden; }
/* The navigator is a fixed list of sections, so it is sized by the window and
   never scrolls: a second scrollbar beside the one that matters is noise. */
.navigator { padding-bottom: 8px; overflow: hidden; }
.tree-root { width: 100%; display: flex; align-items: center; gap: 7px; padding: 6px 6px 4px; border: 0; background: white; font-weight: bold; text-align: left; }
.tree-root:hover { background: #e9f1fb; }
.tree-root.selected { color: white; background: #316ac5; }
.tree-item { width: 100%; height: 23px; display: flex; align-items: center; gap: 7px; border: 0; padding: 2px 8px 2px 16px; background: white; text-align: left; }
.tree-item:hover { background: #e9f1fb; }
.tree-item.selected { color: white; background: #316ac5; }
.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, in both directions, so a wide list is reachable
   without the window frame moving. */
.admin-main { display: grid; grid-template-rows: 22px minmax(0, 1fr); min-width: 0; min-height: 0; }
.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; padding: 4px; }
.server-overview .read-only-table { min-width: 0; }
.overview-row { cursor: pointer; }
.overview-row:hover { background: #e9f1fb; }
.overview-row .tree-icon { display: inline-grid; vertical-align: -3px; margin-right: 7px; }

/* The parameter strip under every list that grows without bound. Its answer is
   frozen, so the panel is the only thing that changes what is on screen. */
.admin-main:has(.request-panel) { grid-template-rows: 22px minmax(0, 1fr) auto; }
.request-panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; padding: 6px 8px; border-top: 1px solid #9d9d9d; background: linear-gradient(#f8f7f1, #ebe8dd); }
.request-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 12px; flex: 1; }
.request-field { display: flex; flex-direction: column; gap: 2px; }
.request-field > span { font-size: 10px; color: #444; }
.request-field.wide { min-width: 220px; }
.request-field.wide input { width: 100%; }
.request-field .field-help { max-width: 210px; }
.request-periods { display: flex; align-items: center; gap: 3px; }
.request-periods span { font-size: 10px; color: #444; }
.request-periods button { padding: 2px 6px; }
.request-actions { display: flex; align-items: center; gap: 8px; }
.request-state { font-size: 10px; color: #2b6a2b; }

/* MT4 drives its lists from a right-click menu mirroring the Edit menu. */
.context-menu { position: fixed; z-index: 40; min-width: 190px; margin: 0; padding: 2px; list-style: none; border: 1px solid #8b8b8b; background: #f6f5f0; box-shadow: 2px 2px 5px rgba(0, 0, 0, .3); }
.context-menu li button { width: 100%; height: 21px; display: flex; align-items: center; border: 0; background: transparent; padding: 2px 14px 2px 2px; text-align: left; }
.context-menu li button:hover:not(:disabled) { color: white; background: #316ac5; }
.context-menu li button:disabled { color: #999; }
.context-separator { height: 1px; margin: 3px 6px; background: #c8c6bd; }
.workspace-tabs, .market-tabs { display: flex; align-items: end; background: #ece9d8; border-bottom: 1px solid #999; padding-left: 3px; }
.workspace-tabs button, .market-tabs button { height: 23px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #999; border-bottom: 0; background: #d9d6cc; padding: 2px 12px; margin-right: 1px; }
.workspace-tabs button.active, .market-tabs button.active { position: relative; top: 1px; background: white; font-weight: bold; }

.property-layout { overflow: auto; padding: 8px; }
.property-grid { border: 1px solid #aaa; max-width: 900px; }
.property-row { min-height: 23px; display: grid; grid-template-columns: 250px 1fr; border-bottom: 1px solid #ddd; }
.property-row:nth-child(even) { background: #f4f7fb; }
.property-name { padding: 4px 6px; border-right: 1px solid #bbb; font-weight: bold; }
.property-value { padding: 4px 6px; overflow-wrap: anywhere; }
.property-layout > button { margin-top: 8px; min-width: 75px; }

.manager-body { display: grid; grid-template-columns: 255px minmax(0, 1fr) 315px; grid-template-rows: minmax(0, 62%) minmax(0, 38%); 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) 315px; }
.manager-body.no-margin-calls { grid-template-columns: 255px 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; }
.market-watch { grid-row: 1 / 3; display: grid; grid-template-rows: 22px 22px minmax(0, 1fr) 23px; }
.manager-center { display: grid; grid-template-rows: 25px minmax(0, 1fr); }
.manager-center:has(.request-panel) { grid-template-rows: 25px minmax(0, 1fr) auto; }
.manager-center:has(.read-only-table-wrap) { grid-template-rows: 25px minmax(0, 1fr) 22px minmax(90px, 30%); }
.margin-calls { display: grid; grid-template-rows: 22px 1fr; }
.risk-toolbox { grid-column: 2 / 4; display: grid; grid-template-rows: 24px minmax(0, 1fr); }
.risk-toolbox:has(.toolbox-actions) { grid-template-rows: 24px 28px minmax(0, 1fr); }
.risk-toolbox .toolbox-actions {
  position: static;
  padding: 3px 5px;
  justify-content: flex-start;
  background: #ece9d8;
  border-bottom: 1px solid #aaa;
}
.toolbox-tabs button { display: inline-flex; align-items: center; gap: 5px; }
.danger-title { color: #8e1515; }

.quote-head, .quote-row { display: grid; grid-template-columns: 1fr 70px 70px; align-items: center; }
.quote-head.with-spread, .quote-row.with-spread { grid-template-columns: 1fr 62px 62px 40px; }
.quote-head.with-time, .quote-row.with-time { grid-template-columns: 1fr 62px 62px 62px; }
.quote-head.with-spread.with-time, .quote-row.with-spread.with-time { grid-template-columns: 1fr 56px 56px 34px 58px; }
.quote-row { cursor: default; }
.quote-row.selected { color: white; background: #316ac5; }
.quote-row.selected .bid, .quote-row.selected .ask { color: white; }
.spread, .quote-time { color: #555; text-align: right; }
.symbols-window { width: min(560px, 92vw); max-height: 80vh; display: grid; grid-template-rows: 24px minmax(0, 1fr) 40px; }
.quote-head { padding: 3px 5px; font-weight: bold; background: #ece9d8; border-bottom: 1px solid #999; }
.quote-list { overflow: auto; }
.quote-row { height: 22px; padding: 2px 5px; border-bottom: 1px solid #edf0f3; }
.quote-row:nth-child(even) { background: #f4f7fb; }
.bid { color: #154fa0; }
.ask { color: #c32626; }
.tick-chart { overflow: hidden; border-top: 1px solid #aaa; background: white; }
.tick-chart .uplot { font: 9px Tahoma, sans-serif; }

.grid-frame { width: 100%; height: 100%; min-height: 0; }
.empty-grid { display: grid; place-items: center; width: 100%; height: 100%; color: #777; background: repeating-linear-gradient(0deg, #fff, #fff 21px, #f6f8fa 22px); }
.instructions { padding: 40px; text-align: center; }
.ag-root-wrapper { border: 0 !important; border-radius: 0 !important; }
.ag-header-cell { border-right: 1px solid #bbb; }
/* A boolean cell is its flag icon; sit it on the text baseline the row uses. */
.ag-cell svg { vertical-align: text-bottom; }


.statusbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 120px) minmax(0, 100px) minmax(0, 190px); gap: 2px; padding: 2px 3px; background: #d4d0c8; border-top: 1px solid white; }
.statusbar span { padding: 2px 6px; border: 1px inset #eee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection.online { color: #087d19; }
.connection.offline { color: #a21a1a; }
.connection.connecting { color: #8a6d00; }

.login-desktop, .boot-screen { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle, #5d91c7, #174d83); }
.boot-screen { color: white; font-size: 14px; }
.window { border: 2px outset #e8e5db; background: #d4d0c8; box-shadow: 4px 5px 15px #1238; }
.window-title { height: 25px; padding: 5px 7px; }
.window-title button { float: right; width: 18px; height: 18px; line-height: 13px; padding: 0; }
.login-window { width: 365px; padding-bottom: 12px; display: grid; grid-template-columns: 95px 1fr; gap: 9px 10px; }
.login-window .window-title { grid-column: 1 / 3; }
.login-logo { grid-row: 2 / 4; width: 58px; height: 58px; justify-self: center; font-size: 34px; }
.login-window label { display: grid; grid-template-columns: 60px 1fr; gap: 5px; align-items: center; margin-right: 12px; }
.login-window input { height: 22px; border: 2px inset white; }
.login-window .error-strip, .login-window .dialog-buttons { grid-column: 1 / 3; margin: 0 12px; }
.error-strip { padding: 5px 7px; color: #9b1414; background: #ffe4e4; border: 1px solid #d78888; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 7px; padding-top: 6px; }
.dialog-buttons button { min-width: 75px; height: 23px; }
.default-button { border: 2px solid #333; }

.modal-shade { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; background: #1236; }
.modal-window { width: min(720px, 80vw); }
.modal-body { padding: 12px; display: grid; gap: 5px; }
.modal-body textarea { width: 100%; min-height: 270px; resize: vertical; padding: 7px; font: 12px Consolas, monospace; border: 2px inset white; }
.modal-window > .dialog-buttons { padding: 3px 12px 12px; }

/*
 * MT4-style entity property sheets.
 *
 * The original Administrator and Manager use modal property sheets rather
 * than inline editing.  Keep the compact Windows layout here, but allow the
 * streamlined model's weekly sessions and symbol-rule tables to scroll
 * inside the dialog instead of making the whole workstation overflow.
 */
.entity-editor {
  width: min(920px, calc(100vw - 44px));
  max-height: calc(100vh - 52px);
  display: grid;
  grid-template-rows: 25px 29px minmax(260px, 1fr) auto;
  overflow: hidden;
}

.entity-editor .window-title,
.confirm-window .window-title { display: flex; align-items: center; }
.entity-editor .window-title span,
.confirm-window .window-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-editor .window-title button,
.confirm-window .window-title button { flex: 0 0 18px; margin-left: auto; }

.editor-tabs {
  min-width: 0;
  display: flex;
  align-items: end;
  gap: 1px;
  padding: 4px 7px 0;
  overflow-x: auto;
  overflow-y: hidden;
  background: #d4d0c8;
  border-bottom: 1px solid #777;
}
.editor-tabs button {
  flex: 0 0 auto;
  height: 24px;
  min-width: 74px;
  padding: 2px 12px;
  border: 1px solid #888;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(#eeeae0, #cac6bb);
}
.editor-tabs button:hover { background: linear-gradient(#fffef9, #ddd9ce); }
.editor-tabs button.active {
  position: relative;
  top: 1px;
  z-index: 1;
  height: 25px;
  padding-top: 1px;
  font-weight: bold;
  background: #f4f1e8;
}

.editor-body {
  min-height: 0;
  overflow: auto;
  padding: 12px 13px 14px;
  background: #f4f1e8;
  border-bottom: 1px solid #aaa69c;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px 22px;
}
.form-field {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(122px, .85fr) minmax(120px, 1fr);
  align-items: center;
  gap: 3px 8px;
}
.form-field > span:first-child { line-height: 15px; }
.form-field > span:first-child small { color: #555; font-weight: normal; }
.form-field > input:not([type="checkbox"]),
.form-field > select,
.form-field > textarea,
.form-field > .time-control {
  width: 100%;
  min-width: 0;
}
.form-field input:not([type="checkbox"]),
.form-field select,
.form-field textarea,
.nested-table input:not([type="checkbox"]),
.nested-table select,
.time-control input {
  height: 22px;
  padding: 2px 4px;
  color: #111;
  background: white;
  border: 2px inset white;
}
.form-field textarea {
  min-height: 62px;
  height: auto;
  resize: vertical;
  padding: 4px 5px;
}
.form-field input[type="checkbox"],
.check-group input[type="checkbox"],
.nested-table input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #316ac5;
}
.form-field > input[type="checkbox"] { justify-self: start; }
.form-field input:disabled,
.form-field select:disabled,
.nested-table input:disabled,
.nested-table select:disabled {
  color: #666;
  background: #e1ded6;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.nested-table input:focus,
.nested-table select:focus,
.time-control input:focus { outline: 1px dotted #111; outline-offset: -4px; }
.field-wide { grid-column: 1 / -1; }
.form-field.field-wide { grid-template-columns: 170px minmax(0, 1fr); }
.field-help {
  grid-column: 2;
  display: block;
  color: #595959;
  line-height: 15px;
}

.time-control {
  display: grid;
  grid-template-columns: minmax(46px, 1fr) 8px minmax(46px, 1fr);
  align-items: center;
  gap: 2px;
}
.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: 23px; padding: 1px 2px; border: 2px inset white; }
.color-control span { color: #555; font-family: Consolas, monospace; }

.check-group {
  min-width: 0;
  margin: 1px 0;
  padding: 10px 10px 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 7px 15px;
  border: 1px groove white;
}
.check-group legend { padding: 0 5px; font-weight: bold; }
.check-group label { min-width: 0; display: flex; align-items: center; gap: 6px; }

.nested-table-wrap { min-width: 0; overflow-x: auto; padding-bottom: 2px; }
.nested-table {
  min-width: 2200px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: white;
  border: 1px solid #888;
}
.nested-table th {
  height: 23px;
  padding: 3px 5px;
  white-space: nowrap;
  text-align: left;
  font-weight: normal;
  background: linear-gradient(#faf9f4, #d8d5ca);
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #888;
}
.nested-table td { height: 25px; padding: 1px 2px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.nested-table tbody tr:nth-child(even) { background: #f1f5fa; }
.nested-table input:not([type="checkbox"]),
.nested-table select { width: 100%; min-width: 0; height: 21px; }
.nested-table td:last-child,
.nested-table th:last-child { width: 30px; text-align: center; }
.nested-table td:last-child button { width: 23px; height: 20px; padding: 0; color: #8d1515; }
.compact-flags { display: flex; align-items: center; gap: 5px; }
.compact-flags label { display: flex; align-items: center; gap: 2px; font-size: 9px; }
.nested-table-wrap > button,
.session-list > button { margin-top: 5px; min-width: 84px; height: 22px; }

.table-field { display: block; }
.table-field > span { display: block; margin-bottom: 5px; font-weight: bold; }
.read-only-table-wrap { min-width: 0; overflow: auto; border: 1px inset white; background: white; }
.read-only-table { width: 100%; min-width: 650px; border-collapse: collapse; white-space: nowrap; }
.read-only-table th {
  height: 23px;
  padding: 3px 6px;
  text-align: left;
  font-weight: normal;
  background: linear-gradient(#faf9f4, #d8d5ca);
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #888;
}
.read-only-table td { height: 22px; padding: 2px 6px; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e8e8e8; }
.read-only-table tbody tr:nth-child(even) { background: #f1f5fa; }
.read-only-table .empty-table { height: 90px; color: #777; text-align: center; }
.dialog-action {
  min-height: 150px;
  padding: 28px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  border: 1px groove white;
}
.dialog-action p { max-width: 540px; margin: 0; line-height: 16px; color: #444; }
.dialog-action button { min-width: 145px; height: 24px; }

.sessions-editor { min-width: 0; display: grid; gap: 9px; }
.sessions-editor fieldset { min-width: 0; margin: 0; padding: 7px 9px 9px; border: 1px groove white; }
.sessions-editor legend { padding: 0 5px; font-weight: bold; }
.session-columns { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.session-columns h4 { margin: 0 0 4px; color: #174d85; font-size: 11px; }
.session-list { min-width: 0; }
/* Mode, the four clock boxes, how long the session lasts, and Remove. */
.session-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(56px, 1.2fr) repeat(4, minmax(40px, 1fr)) auto auto;
  align-items: end;
  gap: 4px;
  margin-bottom: 4px;
}
.session-row label { min-width: 0; display: grid; gap: 2px; color: #555; font-size: 10px; }
.session-row input { width: 100%; min-width: 0; height: 21px; padding: 1px 3px; border: 2px inset white; }
.session-row button { height: 21px; padding: 1px 6px; }
/* 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 {
  height: 21px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  white-space: nowrap;
  color: #174d85;
  font-weight: bold;
  cursor: help;
}

.entity-editor > .dialog-buttons,
.confirm-window > .dialog-buttons {
  padding: 8px 12px 10px;
  background: #d4d0c8;
}
.entity-editor > .window-title button,
.entity-editor > .dialog-buttons button,
.entity-editor .editor-body button,
.confirm-window button,
.nested-table-wrap > button,
.session-list > button {
  border: 1px outset white;
  background: #d4d0c8;
}
.entity-editor > .window-title button:active:not(:disabled),
.entity-editor > .dialog-buttons button:active:not(:disabled),
.entity-editor .editor-body button:active:not(:disabled),
.confirm-window button:active:not(:disabled),
.nested-table-wrap > button:active,
.session-list > button:active { border-style: inset; }
.entity-editor .default-button { border: 2px solid #333; }

.confirm-window { width: min(440px, calc(100vw - 44px)); overflow: hidden; }
.confirm-body {
  min-height: 92px;
  padding: 18px 18px 12px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: start;
  gap: 12px;
  background: #f4f1e8;
}
.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: 22px;
  font-weight: bold;
  background: #f2c94c;
  border: 1px solid #8d7425;
  border-radius: 50%;
  box-shadow: inset 1px 1px white;
}
.confirm-detail { color: #5d5d5d; }
.confirm-body > .error-strip { grid-column: 1 / -1; }
.danger-button { color: #7e1010; font-weight: bold; }

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

/* The page itself never scrolls, at any window size. A narrow or short window
   shrinks the fixed regions and the section panel's own scrollbar takes over. */
.request-error { max-width: 340px; color: #a11; font-size: 10px; }
.field-inert { display: block; color: #8a5a00; }
.editor-note { margin: 0 0 8px; padding: 5px 7px; border: 1px solid #e0c98a; background: #fdf6e3; color: #6b4e00; }