/* ws191 e-Camper theme: forest green park palette with OnTrack365 type.
   Added to every GUI page by LegacyPageController (LEGACY_THEME=green; "none" turns it off).
   It only restyles the existing markup: no page logic depends on it. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/montserrat-latin-800-italic.woff2") format("woff2"); }

:root {
  --ws-forest: #173f33; --ws-green: #1f5f4a; --ws-green-2: #2f7a62; --ws-mint: #e6f0eb; --ws-bg: #eff3f1;
  --ws-line: #d5e2dc; --ws-ink: #14261f; --ws-muted: #556b62; --ws-amber: #f5b301; --ws-amber-ink: #5c4100;
  --ws-red: #b3263d; --ws-orange: #f39a2b;
  --ws-font: Inter, "Segoe UI", Tahoma, Arial, sans-serif; --ws-head: Montserrat, "Segoe UI", Arial, sans-serif;
}

/* type: same sizes as before so the fixed-width screens keep their layout */
html.ws-theme body, html.ws-theme td, html.ws-theme th, html.ws-theme input, html.ws-theme select,
html.ws-theme textarea, html.ws-theme button { font-family: var(--ws-font) !important; }
html.ws-theme body { color: var(--ws-ink); }

/* header bar (was black with a patterned strip) */
html.ws-theme td[style*="background-color:#000"], html.ws-theme td[style*="background-color: #000"] { background-color: var(--ws-forest) !important; border-radius: 10px; padding: 4px !important; }
html.ws-theme table[background*="tbg.gif"] { background: var(--ws-forest) !important; border-radius: 8px; }
html.ws-theme table[background*="tbg.gif"] td[bgcolor="#FFFFFF"] { background: transparent !important; }

/* main menu */
html.ws-theme .dropbtn { background: transparent !important; color: #ffffff !important; font: 600 12px var(--ws-font) !important;
  letter-spacing: .3px; border-radius: 7px !important; height: 30px !important; padding: 0 10px !important; min-width: 66px; cursor: pointer; }
html.ws-theme .dropbtn a { color: #ffffff !important; }
html.ws-theme .dropdown:hover .dropbtn { background: var(--ws-green-2) !important; }
html.ws-theme .dropdown-content { background: #ffffff !important; border: 1px solid var(--ws-line); border-radius: 10px; padding: 6px 0;
  box-shadow: 0 12px 28px rgba(23,63,51,.18) !important; min-width: 190px !important; }
html.ws-theme .dropdown-content a { color: var(--ws-ink) !important; font: 500 13px var(--ws-font) !important; padding: 9px 16px !important; }
html.ws-theme .dropdown-content a:hover { background: var(--ws-mint) !important; color: var(--ws-green) !important; }

/* news ticker, user, search, clock in the bar */
html.ws-theme #tickfield { background: transparent !important; color: #d3e6dd !important; font: 500 12px var(--ws-font) !important; }
html.ws-theme #FindWide { border: 1px solid #3d6b5c; background: #24574a; color: #fff; border-radius: 6px; height: 24px; padding: 0 8px; }
html.ws-theme #FindWide::placeholder { color: #a9c9bb; }
html.ws-theme #tixt { font: 500 12px var(--ws-font); color: #d3e6dd !important; }

/* OnTrack365 wordmark that replaces the old pixel-font "Digital Mapping" banner */
.ws-mark { display: inline-flex; flex-direction: column; gap: 4px; }
.ws-mark b { font: italic 800 34px/1 var(--ws-head); color: var(--ws-forest); letter-spacing: -.5px; }
.ws-mark b span { color: var(--ws-orange); }
.ws-mark i { font: normal 500 13px var(--ws-font); color: var(--ws-muted); letter-spacing: .4px; }

/* buttons and inputs */
html.ws-theme input[type=submit], html.ws-theme input[type=button], html.ws-theme button:not(.dropbtn):not([class*="ws-"]) {
  background: #ffffff; color: var(--ws-green); border: 1px solid #b9cfc5; border-radius: 7px; cursor: pointer; font-weight: 600 !important; }
html.ws-theme input[type=submit]:hover, html.ws-theme input[type=button]:hover, html.ws-theme button:not(.dropbtn):not([class*="ws-"]):hover {
  background: var(--ws-mint); border-color: var(--ws-green-2); }
html.ws-theme input[type=submit]:disabled, html.ws-theme input[type=button]:disabled { opacity: .5; cursor: not-allowed; }
html.ws-theme #CmdQuit { background: var(--ws-forest) !important; color: #ffffff !important; border: 0 !important; border-radius: 10px !important;
  font: 600 14px var(--ws-font) !important; letter-spacing: .5px; }
html.ws-theme #CmdQuit:hover { background: var(--ws-green-2) !important; }
html.ws-theme input[type=text], html.ws-theme input[type=password], html.ws-theme input[type=email], html.ws-theme select, html.ws-theme textarea {
  border: 1px solid #c4d3cc; border-radius: 6px; }
html.ws-theme input:focus, html.ws-theme select:focus, html.ws-theme textarea:focus, html.ws-theme button:focus-visible {
  outline: 2px solid var(--ws-green-2); outline-offset: 1px; }

/* floating tool windows */
html.ws-theme #dragdiv, html.ws-theme #ListDiv { border-radius: 12px !important; overflow: hidden; border: 1px solid var(--ws-line) !important;
  box-shadow: 0 18px 40px rgba(23,63,51,.25); background: #ffffff !important; }
html.ws-theme #dragdiv tr[style*="#6C3"], html.ws-theme #dragdiv tr[style*="#6c3"] { background: var(--ws-forest) !important; }

/* ---------------------------------------------------------------- pitch grid tiles */
.ws-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font: 500 12px var(--ws-font); color: var(--ws-muted); margin: 4px 4px 10px; }
.ws-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ws-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; box-sizing: border-box; }
.ws-chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ws-line); background: #fff; color: var(--ws-green);
  font: 600 12px var(--ws-font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ws-chip[aria-pressed=true] { background: var(--ws-green); color: #fff; border-color: var(--ws-green); }
.ws-chip.ws-elec[aria-pressed=true] { background: #fff4cc; color: var(--ws-amber-ink); border-color: #c99400; }

.ws-board { display: grid; grid-template-columns: repeat(44, minmax(0, 1fr)); gap: 3px; padding: 8px; border-radius: 12px; background-color: #fbfdfc;
  background-image: radial-gradient(#d3dfd9 1px, transparent 1px); background-size: 13px 13px; border: 1px solid var(--ws-line); }
.ws-cell { position: relative; aspect-ratio: 1 / 1.15; border-radius: 5px; }
.ws-board.ws-editing .ws-cell:empty { outline: 1px dashed #b9cfc5; }
.ws-cell.ws-over { background: rgba(47,122,98,.18); outline: 2px dashed var(--ws-green-2) !important; }
.ws-tile { position: absolute; inset: 0; border-radius: 5px; border: 0; padding: 0 1px; display: flex; align-items: center; justify-content: center;
  font: 600 8px/1 var(--ws-font); letter-spacing: -.2px; white-space: nowrap; overflow: visible; cursor: pointer; color: #fff; box-sizing: border-box;
  background: var(--t); transition: transform .08s, box-shadow .12s, opacity .12s; }
.ws-tile .ws-lbl { overflow: hidden; max-width: 100%; text-overflow: clip; }
.ws-tile:hover { transform: scale(1.18); z-index: 5; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.ws-tile.ws-free { background: #fff; color: var(--t); box-shadow: inset 0 0 0 2px var(--t); }
.ws-tile.ws-off { background: repeating-linear-gradient(135deg, #e3e8e5 0 4px, #f3f6f4 4px 8px); color: #556b62; box-shadow: inset 0 0 0 1px #9fb3aa; }
.ws-tile.ws-sel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ws-ink); z-index: 6; }
.ws-tile[draggable=true] { cursor: grab; }
.ws-bolt { position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; pointer-events: none; }
.ws-board.ws-hl .ws-tile:not(.ws-has-elec) { opacity: .2; }
.ws-board.ws-hl .ws-tile.ws-has-elec { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ws-amber); }
.ws-board .ws-tile.ws-dim { opacity: .18; }
.ws-palette { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ws-pal { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ws-line);
  background: #fff; font: 500 12px var(--ws-font); color: var(--ws-ink); cursor: grab; }
.ws-pal img { width: 14px; height: 20px; object-fit: contain; }
.ws-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ws-forest); color: #fff; font: 500 13px var(--ws-font);
  padding: 12px 18px; border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.25); z-index: 100000; display: none; }

/* the old GUI pages style every <span> and every "place" square globally; undo that inside the new parts */
html.ws-theme .ws-mark span, html.ws-theme .ws-mark b, html.ws-theme .ws-mark i,
html.ws-theme .ws-tools span, html.ws-theme .ws-legend span, html.ws-theme .ws-palette span, html.ws-theme .ws-tile span,
html.ws-theme .ws-chip span { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
  color: inherit; clear: none !important; background: none; }
html.ws-theme .ws-mark { white-space: nowrap; }
html.ws-theme .ws-mark i { color: var(--ws-muted) !important; }
html.ws-theme .ws-mark b span { color: var(--ws-orange) !important; }
html.ws-theme .ws-board .ws-cell[id^="place"] { float: none !important; width: auto !important; height: auto !important; margin: 0 !important;
  padding: 0 !important; border: 0 !important; background-color: transparent !important; }
html.ws-theme .ws-tools .ws-chip span { opacity: .75; }
html.ws-theme .ws-legend span { display: inline-flex !important; align-items: center; gap: 6px; }
html.ws-theme .ws-palette > span { display: inline-flex !important; align-items: center; gap: 6px; }
html.ws-theme .ws-palette .ws-pal { padding: 0 10px !important; border: 1px solid var(--ws-line) !important; }
html.ws-theme #wsSelBox { padding: 0 !important; }
html.ws-theme span.ws-mark { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }