/*
  Blade tool in the CNC configurator's Bauron look (2026-10-01).

  Loaded LAST in tool/index.html. app.js is obfuscated agency code, so the tool
  is restyled from outside: its own CSS custom properties are re-declared and
  the rules that hard-code a colour are overridden. Removing the <link> to this
  file restores the old look.

  Mirrors cnc-tools/css/themes/bauron.css on purpose (the user prefers it):
  light panel (#ffffff / #f0f0f0, text #404040), one accent #0b5394, 8px
  corners, Libre Franklin, small tracked caps for section labels, and a dark
  navy stage (#0a2038) for the work areas. The 2D and 3D areas stay dark
  because the tool's own toolbar icons are white artwork.
*/

:root,
html {
  --color-01: #ffffff;              /* was #1E2E35 - main ground */
  --color-02: #0b5394;
  --color-03: #0b5394;              /* the accent */
  --color-04: #f0f0f0;
  --color-05: #ececec;
  --color-06: #0076de;
  --blue-bg-color: #ffffff;
  --blue-border-color: #d8d8d8;
  --blue-border-color-opaque: #0b5394;
  --blue-border: 1px solid #d8d8d8;

  --rc-bg: #ffffff;
  --rc-surface: #f0f0f0;
  --rc-surface2: #ececec;
  --rc-border: #d8d8d8;
  --rc-text: #404040;
  --rc-text-muted: #5c5c5c;
  --rc-accent: #0b5394;
  --rc-accent-hover: #0076de;
  --rc-accent-dim: #073763;
  --rc-stage: #0a2038;
  --rc-font: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --rc-caps: 700 11px/1 var(--rc-font);
}

/* ---------- type ---------- */
html, body, button, input, select, textarea,
.custom_button, #app, #main_cont, #ui_cont, #sketch_editor_cont,
select-ui, select-header-ui {
  font-family: var(--rc-font) !important;
}
body { background: #e9ecef !important; }

/* ---------- page and panel ---------- */
#main_cont {
  background: var(--rc-bg) !important;
  border: 1px solid var(--rc-border) !important;
}
#ui_cont {
  background: var(--rc-bg) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 0 !important;
  color: var(--rc-text) !important;
}
#ui_cont label,
#ui_cont .checkbox_cont,
#ui_cont .radio_button_cont,
#ui_cont .slider_cont,
#ui_cont .dropdown_list_cont,
#ui_cont .ui_cont,
#ui_cont div {
  color: var(--rc-text) !important;
}
#ui_cont .divider {
  background: var(--rc-border) !important;
  height: 1px !important;
}

/* Section tabs: Blade / Teeth / Bevels / Holes / History - the CNC category bar. */
#ui_cont__tabs_headers_cont {
  background: var(--rc-surface) !important;
  border-bottom: 1px solid var(--rc-border) !important;
}
#ui_cont__tabs_headers_cont button {
  background: transparent !important;
  color: var(--rc-text-muted) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font: var(--rc-caps) !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
}
#ui_cont__tabs_headers_cont button:hover {
  color: var(--rc-text) !important;
  background: var(--rc-surface2) !important;
}
#ui_cont__tabs_headers_cont button.active_tab_header,
.active_tab_header {
  background: var(--rc-bg) !important;
  color: var(--rc-accent-dim) !important;
  border-bottom-color: var(--rc-accent) !important;
}

/* Fields */
#ui_cont input[type="text"],
#ui_cont input[type="number"],
#main_cont input[type="text"],
#main_cont input[type="number"] {
  background: #fff !important;
  color: var(--rc-text) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 6px !important;
}
#ui_cont input:focus { border-color: var(--rc-accent) !important; outline: none !important; }
select-header-ui,
#ui_cont select {
  background: #fff !important;
  color: var(--rc-text) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 6px !important;
}
select-ui * { color: var(--rc-text) !important; }

/* Help marks */
#ui_cont .hint_mark {
  background: var(--rc-surface) !important;
  color: var(--rc-accent) !important;
  border: 1px solid var(--rc-border) !important;
}

/* Check boxes, radios, toggles */
#ui_cont .custom_checkbox,
#ui_cont .custom_radio_button {
  background: #fff !important;
  border: 1px solid #b9bec7 !important;
}
#ui_cont .custom_checkbox.checked,
#ui_cont .custom_checkbox:checked,
#ui_cont .custom_radio_button:checked {
  background: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
}
#ui_cont .toggler,
#ui_cont .toggler_checkmark { background: var(--rc-accent) !important; }

/* Sliders: the CNC configurator's thin track and solid accent thumb. */
input[type="range"] { accent-color: var(--rc-accent); }
input[type="range"]::-webkit-slider-runnable-track {
  background: var(--rc-border) !important;
  height: 4px !important;
  border-radius: 2px !important;
}
input[type="range"]::-moz-range-track {
  background: var(--rc-border) !important;
  height: 4px !important;
  border-radius: 2px !important;
}
input[type="range"]::-webkit-slider-thumb {
  background: var(--rc-accent) !important;
  border: 0 !important;
  box-shadow: none !important;
}
input[type="range"]::-moz-range-thumb {
  background: var(--rc-accent) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- buttons ---------- */
.custom_button,
button.custom_button {
  background: var(--rc-accent) !important;
  border: 1px solid var(--rc-accent) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font: var(--rc-caps) !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
.custom_button:hover,
button.custom_button:hover {
  background: var(--rc-accent-hover) !important;
  border-color: var(--rc-accent-hover) !important;
}
.custom_button:active,
button.custom_button:active { background: var(--rc-accent-dim) !important; }
/* Exit and Report a Bug are secondary: outlined, like the CNC export buttons. */
#exit_button,
#bug_report_button,
#bug_report_button_02 {
  background: #fff !important;
  color: var(--rc-accent) !important;
  border: 1px solid var(--rc-accent) !important;
}
#exit_button:hover,
#bug_report_button:hover,
#bug_report_button_02:hover {
  background: var(--rc-accent) !important;
  color: #fff !important;
}
.custom_button:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--rc-accent-hover) !important;
  outline-offset: 1px;
}

/* ---------- work areas: the dark navy stage ---------- */
#blade_main_cont { background: var(--rc-stage) !important; }
#sketch_editor_cont { background: var(--rc-stage) !important; }
/* 3D: a faint RapidCAD mark behind the model, like the CNC tool. The renderer
   is transparent (alpha:true, no clear colour), so the container's background
   shows through. The mark is pre-faded (16% alpha) in the PNG and sits low
   (82%) because a disc blade fills the centre. */
#threed_viewer_cont {
  background: var(--rc-stage) url("../assets/images/rapidcad-watermark.png") no-repeat center 82% !important;
  background-size: min(55%, 460px) auto !important;
}

/* ---------- logo: RapidCAD in ink on the light header ----------
   app.js writes the tenant logo into an inline style, hence !important. */
#logo,
.logo {
  background-image: url("../assets/images/rapidcad-lockup-ink.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  width: 190px !important;
  height: 42px !important;
  top: 18px !important;
}
/* Each screen's own credit: the main screen's is fixed to the window; the
   custom-blade sketch editor's stays inside that editor (fixed, it painted
   over the main screen while the editor was hidden underneath). */
#sketch_editor_cont > .logo_tagline {
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  right: 20px !important;
  bottom: 20px !important;
  width: 212px !important;
  height: 19px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: url("../assets/images/powered-by-rapidcad-light.png") no-repeat right center / contain !important;
  pointer-events: none;
}
#main_cont > .logo_tagline {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 50 !important;
  padding: 8px 12px !important;
  background-color: rgba(10, 16, 30, 0.72) !important;
  background-origin: content-box !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 172px !important;
  height: 35px !important;
  box-sizing: border-box !important;
}

/* ---------- the tool's own copyright band: not needed ---------- */
#footer { display: none !important; }

/* Icon buttons on the stage (undo, redo, reset, 3D preview, zoom) are white
   artwork on a background taken from --color-01, which this theme makes white;
   give them the stage instead so the icons show. */
#main_cont .custom_image_button {
  background-color: transparent !important;
  border-color: transparent !important;
}
#main_cont .custom_image_button:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
}
/* The "hide/show left panel" toggle sits on the stage as an image checkbox;
   its box took --color-01 (now white) and hid the arrow icon. */
#toggle_left_panel_checkbox_cont,
#main_cont .custom_checkbox_with_image {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* =====================================================================
   Round 4 (2026-10-01): the CNC configurator's layout, not only its colours.
   Light grey page, the controls on one white card, ONE navy stage holding
   both work areas, a slim header row (logo left; Full screen, Export, Exit
   right). js/rapidcad-layout.js adds the stage panel (#rc-stage), the tab
   arrows, the button labels and the View menu these rules style.
   Below 1101px the tool switches to its own stacked phone layout, which is
   left as it was.
   ===================================================================== */
@media (min-width: 1101px) {
  body { background: #eceef1 !important; }

  /* The bottom strip was the hidden copyright band's 40px: give it back. */
  /* Opaque on purpose: the custom-blade sketch editor sits underneath and
     is hidden only by being covered. */
  #main_cont {
    height: 100% !important;
    padding: 72px 16px 16px 16px !important;
    background: #eceef1 !important;
    border: 0 !important;
  }

  /* Slim header row: logo on the left at the buttons' height. */
  #logo, .logo {
    top: 16px !important;
    left: 16px !important;
    width: 180px !important;
    height: 40px !important;
  }

  /* Controls on one white card. */
  #ui_cont {
    margin-top: 0 !important;
    margin-right: 16px;
    border: 1px solid var(--rc-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    z-index: 2;
  }

  /* One stage: the work areas go transparent over a single navy panel. */
  #blade_main_cont,
  #threed_viewer_cont {
    background: transparent !important;
    z-index: 1;
  }
  #blade_main_cont + #mobile_menu + #threed_viewer_cont,
  #threed_viewer_cont {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06);
  }
  #rc-stage {
    position: absolute;
    z-index: 0;
    border-radius: 8px;
    background: var(--rc-stage) url("../assets/images/rapidcad-watermark.png") no-repeat center center;
    background-size: min(50%, 620px) auto;
    pointer-events: none;
  }
  #rc-stage-ui {
    position: absolute;
    z-index: 6;
    pointer-events: none;
  }
  #rc-stage-ui > * { pointer-events: auto; }

  /* Bottom rows sit a little higher, clearing "Powered By" in the corner. */
  #ui_cont_02 { bottom: 34px !important; row-gap: 4px; }
  /* 2D row: the text buttons on one line, the icon buttons on the next,
     instead of wrapping wherever the 30-60px margins ran out. */
  #ui_cont_02 > button { margin: 4px 5px !important; order: 3; }
  #ui_cont_02 > .custom_button { order: 1; padding: 10px 18px !important; }
  #ui_cont_02::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  #close_threed_viewer_button_cont { bottom: 44px !important; }
  /* The View menu sits at the stage's bottom-right: keep the 3D row clear of
     it, and let the row wrap (in 3D only it also carries Report a Bug and
     Save, and ran under the menu). */
  html.rc-view-menu #close_threed_viewer_button_cont {
    box-sizing: border-box;
    padding: 0 200px 0 20px !important;
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* "Powered By RapidCAD": in the stage's bottom-right corner, no plate. */
  #main_cont > .logo_tagline {
    position: absolute !important;
    left: auto !important;
    top: auto !important;
    right: 36px !important;
    bottom: 28px !important;
    width: 212px !important;
    height: 19px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: url("../assets/images/powered-by-rapidcad-light.png") no-repeat right center / contain !important;
    opacity: 0.9;
    z-index: 7 !important;
    pointer-events: none;
  }

  /* ---------- header buttons: Full screen, Export, Exit ---------- */
  #exit_button {
    top: 19px !important;
    right: 16px !important;
    width: 88px !important;
    height: 34px !important;
    padding: 0 !important;
    z-index: 20;
  }
  #export_3d_buttons_cont {
    top: 19px !important;
    right: 112px !important;
    left: auto !important;
    max-height: none !important;
    background: transparent !important;
    align-items: flex-end;
    z-index: 21;
  }
  #threed_viewer_cont__toggle_fullscreen_checkbox_cont {
    top: 19px !important;
    right: 224px !important;
    z-index: 20;
  }
  html.rc-customer #threed_viewer_cont__toggle_fullscreen_checkbox_cont { right: 112px !important; }
}

/* The three header buttons share one look: white, accent outline, caps. */
#main_cont #export_3d_button,
#main_cont #threed_viewer_cont__toggle_fullscreen_checkbox_cont {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  background: #fff !important;
  border: 1px solid var(--rc-accent) !important;
  border-radius: 6px !important;
  color: var(--rc-accent) !important;
  font: var(--rc-caps) !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
#export_3d_button { width: 104px !important; }
#threed_viewer_cont__toggle_fullscreen_checkbox_cont { width: auto !important; min-width: 104px; }
#main_cont #export_3d_button:hover,
#main_cont #threed_viewer_cont__toggle_fullscreen_checkbox_cont:hover {
  background: var(--rc-accent) !important;
  color: #fff !important;
}
#export_3d_button::before,
#threed_viewer_cont__toggle_fullscreen_checkbox_cont::before,
#export_3d_buttons_cont > div > button::before {
  content: attr(data-rc-label);
  pointer-events: none;
}
#export_3d_button > span { display: none !important; }
#export_3d_button::after {
  content: "";
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg);
}
#threed_viewer_cont__toggle_fullscreen_checkbox_cont input {
  width: 100% !important;
  height: 100% !important;
  z-index: 2;
  cursor: pointer;
}
#threed_viewer_cont__toggle_fullscreen_checkbox_cont .custom_checkbox_checkmark { display: none !important; }

/* The export list: a white menu of format names under the button. */
#export_3d_buttons_cont > div {
  position: absolute;
  top: 40px;
  right: 0;
  min-width: 180px;
  max-height: 70vh;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--rc-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(10, 16, 30, 0.18);
  padding: 6px 0;
}
#main_cont #export_3d_buttons_cont > div > button {
  display: block;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 9px 16px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--rc-text) !important;
  font: 600 13px/1.2 var(--rc-font) !important;
  letter-spacing: 0 !important;
  text-align: left;
}
#main_cont #export_3d_buttons_cont > div > button:hover {
  background: #eef3fa !important;
  color: var(--rc-accent) !important;
}

/* ---------- tabs: one row; History last; arrows when they do not fit ---------- */
#ui_cont__tabs_headers_cont {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  scroll-padding-inline: 30px;
}
#ui_cont__tabs_headers_cont::-webkit-scrollbar { display: none; }
#ui_cont__tabs_headers_cont > button { flex: 0 0 auto; }
#history_tab_header { order: 99; }
.rc-tabs-nav { position: relative; height: 0; z-index: 3; }
.rc-tabs-arrow {
  display: none;
  position: absolute;
  top: 0;
  width: 30px;
  height: 50px;
  padding: 0;
  border: 0;
  color: var(--rc-accent);
  font: 400 24px/1 var(--rc-font);
  cursor: pointer;
}
.rc-tabs-nav--on .rc-tabs-arrow { display: flex; align-items: center; justify-content: center; }
.rc-tabs-arrow--prev { left: -10px; background: linear-gradient(90deg, #f0f0f0 65%, rgba(240, 240, 240, 0)); }
.rc-tabs-arrow--next { right: 10px; background: linear-gradient(270deg, #f0f0f0 65%, rgba(240, 240, 240, 0)); }
.rc-tabs-arrow:hover { color: var(--rc-accent-hover); }
.rc-tabs-arrow:disabled { color: #b9bec7; cursor: default; }
.rc-tabs-nav--on + #ui_cont__tabs_headers_cont { padding: 0 30px; box-sizing: border-box; }

/* ---------- the View menu (2D + 3D / 2D only / 3D only) ---------- */
/* The View menu lives on the stage panel, which exists from 1101px up; on
   narrower screens the tool keeps its own two buttons. */
@media (min-width: 1101px) {
  html.rc-view-menu #close_threed_viewer_button,
  html.rc-view-menu #threed_viewer_cont__toggle_full_width_checkbox_cont { display: none !important; }
}
.rc-view {
  position: absolute;
  right: 20px;
  bottom: 44px;
}
.rc-view__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 34px 0 14px;
  background: var(--rc-accent);
  border: 1px solid var(--rc-accent);
  border-radius: 6px;
  color: #fff;
  font: var(--rc-caps);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
}
.rc-view__button:hover { background: var(--rc-accent-hover); border-color: var(--rc-accent-hover); }
.rc-view__button::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 12px;
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(-135deg);
}
.rc-view__button[aria-expanded="false"]::after { top: 10px; transform: rotate(45deg); }
.rc-view__caption { opacity: .7; }
.rc-view__menu {
  position: absolute;
  right: 0;
  bottom: 40px;
  min-width: 100%;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--rc-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(10, 16, 30, 0.28);
}
.rc-view__menu[hidden] { display: none; }
.rc-view__menu li {
  padding: 9px 16px;
  color: var(--rc-text);
  font: 600 13px/1.2 var(--rc-font);
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}
.rc-view__menu li:hover,
.rc-view__menu li:focus { background: #eef3fa; color: var(--rc-accent); }
.rc-view__menu li[aria-selected="true"] { color: var(--rc-accent); }
.rc-view__menu li[aria-selected="true"]::after { content: "  \2713"; }

/* ---------- Report a Bug: only on the customer screen ---------- */
html:not(.rc-customer) #bug_report_button,
html:not(.rc-customer) #bug_report_button_02 { display: none !important; }

/* ---------- holes: the stage shows through ----------
   app.js paints every hole, keyway and cut-out in the old ground colour as a
   presentation attribute; on the navy stage that read as a grey-green disc. */
#blade_main_cont svg [fill="#1E2E35" i],
#sketch_editor_cont svg [fill="#1E2E35" i] { fill: var(--rc-stage) !important; }

/* ---------- smaller "?" hints ---------- */
#ui_cont .hint_mark {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px;
  padding: 0 !important;
  font: 700 10px/1 var(--rc-font) !important;
  color: #8a929e !important;
  background: #fff !important;
  border: 1px solid #c9ced6 !important;
  border-radius: 50% !important;
  cursor: help;
}
#ui_cont .hint_mark:hover {
  color: var(--rc-accent) !important;
  border-color: var(--rc-accent) !important;
}

/* ---------- ticks in Bauron blue (was the old turquoise artwork) ---------- */
#ui_cont .custom_checkbox:not(.custom_checkbox_with_image) .custom_checkbox_checkmark,
#ui_cont .custom_radio_button .custom_radio_button_checkmark,
#sketch_editor_cont .custom_checkbox:not(.custom_checkbox_with_image) .custom_checkbox_checkmark {
  background: url("../assets/images/rapidcad-check.svg") no-repeat center / 14px 14px !important;
}

/* ---------- in / mm: a two-part switch with both units readable ----------
   Unchecked is mm. The moving part (.toggler_checkmark) carries the "mm"
   label; when "in" is chosen it slides left and that label is drawn in the
   right half instead, so both names are always on show. */
#app .toggler {
  isolation: isolate; /* keeps the layers below inside the switch */
  width: 84px !important;
  height: 28px !important;
  background: #eef0f3 !important;
  border: 1px solid var(--rc-border);
  border-radius: 6px !important;
  box-sizing: border-box;
}
#app .toggler:hover { background: #e4e8ee !important; }
#app .toggler input { z-index: 3; cursor: pointer; }
#app .toggler > label {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 50%;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #5c5c5c !important;
  font: 600 12px/1 var(--rc-font) !important;
}
#app .toggler_checkmark {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 50% !important;
  height: 100% !important;
  background: var(--rc-accent) !important;
  border-radius: 5px !important;
  transition: left .15s ease;
  z-index: 1;
}
#app .toggler:hover .toggler_checkmark { background: var(--rc-accent-hover) !important; }
#app .toggler input:checked ~ .toggler_checkmark { left: 0 !important; }
#app .toggler_checkmark span { display: none !important; }
#app .toggler_checkmark label {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font: 600 12px/1 var(--rc-font) !important;
}
#app .toggler input:checked ~ label { color: #fff !important; }
#app .toggler input:checked ~ .toggler_checkmark label { left: 100% !important; color: #5c5c5c !important; }

/* ---------- drop-down lists: white list, dark text (was dark on dark) ---------- */
select-options-ui {
  background: #fff !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 28px rgba(10, 16, 30, 0.16);
  padding: 4px 0;
}
select-ui option-ui {
  color: var(--rc-text) !important;
  padding: 8px 12px !important;
}
select-ui option-ui:hover { background: #eef3fa !important; color: var(--rc-accent-dim) !important; }
select-ui .option-ui_active { color: var(--rc-accent) !important; font-weight: 600; }
select-ui .option-ui_disabled { color: #a6abb3 !important; }
select-header-ui::after { filter: brightness(0.35); }
#ui_cont select option,
#main_cont select option { background: #fff; color: var(--rc-text); }

/* ---------- the tool's own "You have not saved your work" dialog ----------
   The same card as the app's confirm dialogs and the CNC tool's
   "Leave without saving?" (js/rapidcad-leave-guard.js); rapidcad-layout.js
   sets the title, the text and the button names. */
#exit_pop_up_screen {
  background: rgba(10, 16, 30, 0.62) !important;
  backdrop-filter: none !important;
  z-index: 2147483000 !important;
}
#exit_pop_up_screen > div {
  width: 420px !important;
  background: #fff !important;
  color: #232a3b !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  padding: 24px 24px 20px !important;
  font-family: var(--rc-font);
}
#exit_pop_up_screen .rc-dialog-title {
  margin: 0 0 8px;
  font: 700 18px/1.3 var(--rc-font);
  letter-spacing: -0.01em;
  color: #161918;
}
#exit_pop_up_screen label {
  font: 400 14px/1.5 var(--rc-font) !important;
  color: #404040 !important;
  text-align: left !important;
}
#exit_pop_up_screen > div div {
  justify-content: flex-end !important;
  gap: 10px;
  flex-wrap: wrap;
}
#exit_pop_up_screen button {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 11px 16px !important;
}
#decline_exit_button { order: 1; }
#confirm_exit_button {
  order: 2;
  background: #fff !important;
  border: 1px solid #b3261e !important;
  color: #b3261e !important;
}
#confirm_exit_button:hover { background: #b3261e !important; color: #fff !important; }

/* ---------- readability sweep (round 4, item 39) ----------
   Measured with a contrast pass over every tab: these were the pieces whose
   text sat on a colour too close to its own. */
#ui_cont .hint_mark { color: #5f6773 !important; border-color: #b5bcc6 !important; }

/* Add Hole / Delete: white words drawn on pale-turquoise artwork. */
#ui_cont #add_hole_button,
#ui_cont .delete_hole_button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  background: var(--rc-accent) !important;
  border: 1px solid var(--rc-accent) !important;
  color: #fff !important;
  font: var(--rc-caps) !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
}
#ui_cont #add_hole_button span,
#ui_cont .delete_hole_button span { color: inherit !important; font: inherit !important; }
#ui_cont #add_hole_button::after { content: "+"; font: 700 16px/1 var(--rc-font); }
#ui_cont #add_hole_button:hover { background: var(--rc-accent-hover) !important; border-color: var(--rc-accent-hover) !important; }
#ui_cont .delete_hole_button {
  background: #fff !important;
  border-color: #b3261e !important;
  color: #b3261e !important;
}
#ui_cont .delete_hole_button:hover { background: #b3261e !important; color: #fff !important; }

/* Messages over the stage: accent ground, white text (was white on #19B5FE). */
#threed_viewer__export_stp_message_cont,
#threed_viewer_cont__ui_cont__generation_message,
#hint_message_cont,
#blade_restriction_message_cont,
.restriction_message_cont {
  background-color: var(--rc-accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-family: var(--rc-font) !important;
  box-shadow: 0 12px 32px rgba(10, 16, 30, 0.28);
}
#threed_viewer__export_stp_message_cont label,
#threed_viewer_cont__ui_cont__generation_message label { color: #fff !important; }
#threed_viewer__export_stp_message_cont .custom_button,
#threed_viewer_cont__ui_cont__generation_message .custom_button {
  background: #fff !important;
  color: var(--rc-accent) !important;
  border-color: #fff !important;
}
#copy_url_button { background-color: var(--rc-accent) !important; }
#operation_spinner { background-color: var(--rc-stage) !important; }

/* Report a Bug form: the white card of the other dialogs. */
#bug_report_cont {
  background: #fff !important;
  color: var(--rc-text) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
#bug_report_text_input {
  background: #fff !important;
  color: var(--rc-text) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 6px !important;
  font-family: var(--rc-font) !important;
}
#close_bug_report_form_button {
  background: #fff !important;
  color: var(--rc-accent) !important;
}

/* "Hide / show the left panel": the tool's icon is drawn on a square of the
   old ground colour, and round 3's white checkbox rule had wiped it anyway, so
   the control was invisible. A small chevron button on the stage instead. */
#ui_cont #toggle_left_panel_checkbox_cont {
  width: 30px !important;
  height: 30px !important;
  left: calc(100% + 28px) !important;
  bottom: 14px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 0 !important;
  border-radius: 6px !important;
  z-index: 8 !important;
}
#ui_cont #toggle_left_panel_checkbox_cont:hover { background: rgba(255, 255, 255, 0.20) !important; }
#ui_cont #toggle_left_panel_checkbox_cont input { width: 100% !important; height: 100% !important; z-index: 2; }
#ui_cont #toggle_left_panel_checkbox_cont::before,
#ui_cont #toggle_left_panel_checkbox_cont .custom_checkbox_checkmark::before {
  content: "\2039";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 400 22px/1 var(--rc-font);
  padding-bottom: 3px;
}
#ui_cont #toggle_left_panel_checkbox_cont .custom_checkbox_checkmark {
  width: 100% !important;
  height: 100% !important;
  border-radius: 6px !important;
  background: #23405f !important;
}
#ui_cont #toggle_left_panel_checkbox_cont .custom_checkbox_checkmark::before { content: "\203A"; }

/* ---------- round 5: save at the stage's top-right; Report a Bug in the header ----------
   rapidcad-layout.js moves the tool's own buttons out of sight (.rc-moved) and
   puts stand-ins here. Below 1101px the stage panel does not exist, so the
   originals stay where the tool puts them. */
.rc-stage-save, .rc-head-report { display: none; }
@media (min-width: 1101px) {
  html.rc-actions-moved .rc-moved {
    position: absolute !important;
    left: -10000px !important;
    top: 0 !important;
  }
  .rc-stage-save {
    display: block;
    position: absolute;
    top: 16px;
    right: 20px;
    height: 34px;
    padding: 0 18px !important;
  }
  .rc-stage-save[hidden] { display: none; }
  html.rc-customer .rc-head-report {
    display: block;
    position: absolute;
    top: 19px;
    right: 112px;
    width: 132px;
    height: 34px;
    padding: 0 !important;
    z-index: 20;
    background: #fff !important;
    color: var(--rc-accent) !important;
    border: 1px solid var(--rc-accent) !important;
  }
  html.rc-customer .rc-head-report:hover { background: var(--rc-accent) !important; color: #fff !important; }
  html.rc-customer .rc-head-report[hidden] { display: none; }
  html.rc-customer #threed_viewer_cont__toggle_fullscreen_checkbox_cont { right: 252px !important; }
}

/* Report a Bug form: centred above everything (it opened behind the 2D
   drawing once the work areas gained a stacking order), with a title. */
#bug_report_cont {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(460px, calc(100vw - 32px)) !important;
  box-sizing: border-box;
  padding: 24px !important;
  z-index: 2147482000 !important;
  flex-direction: column;
  gap: 12px;
}
#bug_report_cont::before {
  content: "Report a bug";
  font: 700 18px/1.3 var(--rc-font);
  color: #161918;
}
#bug_report_text_input { min-height: 140px; width: 100% !important; box-sizing: border-box; padding: 10px 12px; }
#bug_report_cont > div { display: flex; justify-content: flex-end; gap: 10px; }
#bug_report_cont > div .custom_button { margin: 0 !important; }

/* Nothing of the editor before it has started. The Report a Bug form is
   display:flex in styles.css and sits above everything (z-index above), and
   app.js only hides it - with an inline style - once the design has loaded, so
   it flashed over the loading screen. Until app.js has touched it (no inline
   display yet) it stays hidden; app.js's own inline display wins after that.
   The Full screen button draws its label from data-rc-label, which
   rapidcad-layout.js sets after app.js; until then it was an empty white box. */
#bug_report_cont:not([style*="display"]) { display: none !important; }
#threed_viewer_cont__toggle_fullscreen_checkbox_cont:not([data-rc-label]) { visibility: hidden !important; }