/* =======================================================================
 *   main layout modes
 *   JS toggles .layout-overlay or .layout-split on #layout so we can switch
 *   between "overlay menu" and "side-by-side" with no server changes.
 *   ======================================================================= */

/* Default sidebar width for split mode.
 *   JS or the server can override by setting this variable on :root,
 *   or even on #layout, etc.
 */
:root {
  --menu-width: 160px;
  --top-left-reserved-width: 7.5em;
  --top-left-reserved-height: 3.2em;
}

/* ---------------- Overlay mode (current behavior) --------------------- */

#layout.layout-overlay {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
}


/* menu iframe floats over main window */
#layout.layout-overlay .acc_menu  {
position: absolute;
display: block;
left: 0;
top: 0;
bottom: 0;
width: var(--menu-width, 160px);
min-width: 80px;
max-width: 95vw;
height: 100%;
overflow: auto;
z-index: 98;
background: #fff;
box-shadow: 2px 0 6px rgba(0,0,0,0.2);
}

/* main content iframe fills the page underneath */
#layout.layout-overlay .main_window {
position: relative;
display: table-cell;
top: 0;
height: 100%;
width: 100%;
z-index: 1;
overflow: hidden;
}


/* the toggle button owns this top-left screen area. */
#layout.layout-overlay .toggle_acc {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 1000;
width: var(--top-left-reserved-width);
min-height: var(--top-left-reserved-height);
box-sizing: border-box;
padding: 2px;
margin: 0;
background: transparent;
}


/* ---------------- Split mode (two-pane side by side) ------------------ */

#layout.layout-split {
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw;
overflow: hidden;
position: relative;
}

/* left menu becomes a resizable sidebar */
#layout.layout-split .acc_menu {
position: relative;
display: block;

/* pull the width from CSS variable, fallback 160px if unset */
width: var(--menu-width, 160px);

max-width: 45%;
min-width: 80px;
height: 100%;
border-right: 1px solid #999;
overflow: auto;      /* scroll menu in split mode */
z-index: 2;
background: #fff;    /* solid background so it looks like a panel */
}

/* main window fills whatever space is left */
#layout.layout-split .main_window {
position: relative;
display: block;
flex: 1;
min-width: 0;        /* lets flexbox shrink this pane properly */
height: 100%;
border: 0;
overflow: hidden;
z-index: 1;
}

/* the toggle button owns this top-left screen area. */
#layout.layout-split .toggle_acc {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 1000;
width: var(--top-left-reserved-width);
min-height: var(--top-left-reserved-height);
box-sizing: border-box;
padding: 2px;
margin: 0;
background: transparent;
}

/* ---------------- Shared across both modes --------------------------- */

/* When the menu iframe is hidden via SwitchAcc() */
#layout .acc_menu[hidden] {
display: none !important;
/* In split mode, flexbox will auto-grow .main_window to full width.
 *     In overlay mode, .main_window was already full-screen. */
}

/* no ugly iframe borders */
#layout .acc_menu,
#layout .main_window {
border: 0;
}

/* Drag handle that updates --menu-width */
#layout .menu_resizer {
background: #ddd;
cursor: col-resize;
min-width: 6px;
width: 6px;
z-index: 99;
}

#layout .menu_resizer[hidden] {
display: none !important;
}

#layout .toggle_acc .submit {
margin: 0;
}

body:not(.menu):not(.login):not(.admin):not(.layout-shell)::before {
content: "";
float: left;
width: var(--top-left-reserved-width);
height: var(--top-left-reserved-height);
pointer-events: none;
}

#layout.layout-split .menu_resizer {
position: relative;
display: block;
height: 100%;
flex: 0 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background: #eee;
}

#layout.layout-overlay .menu_resizer {
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--menu-width, 160px) - 3px);
height: auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background: rgba(255,255,255,0.85);
}

/* Collapsible helper shared by timecard UI */
details.collapsible {
margin: 0.5em 0;
padding: 0.5em;
border: 1px solid #ccc;
background: #f5f5f5;
}

details.collapsible[open] {
background: #fff;
}

details.collapsible .collapsible__summary {
cursor: pointer;
font-weight: bold;
}

details.collapsible .collapsible__body {
margin-top: 0.5em;
}

#pre {
display: block;
text-align: center;
padding: 2px 5px;
margin: 0 0 5px 0;
min-height: 0;
box-sizing: border-box;
background-color: #f9f9f9;
border-bottom: 1px solid #ddd;
}

/* Hide only truly empty status bars; real messages still populate #pre. */
#pre:empty {
display: none;
}

/* =======================================================================
 *   shared base styles extracted from main_window.css
 *   colors live in default.css or one of the color theme files
 *   ======================================================================= */

A:link {
  text-decoration: none;
}

A:visited {
  text-decoration: none;
}

A:active {
  text-decoration: underline;
}

A:hover {
  text-decoration: none;
}

html,
body {
  height: 100%;
}

body {
  height: 100%;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 10pt;
}

div#body1 {
  height: 500px;
  width: 100%;
  margin: auto auto;
  display: none;
}

div#body2 {
  height: 500px;
  width: 100%;
  margin: auto auto;
  display: none;
}

td {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10pt;
}

th {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10pt;
}

.r-nowrap {
  white-space: nowrap;
  float: right;
}

.l-nowrap {
  white-space: nowrap;
  float: left;
}

.c-nowrap {
  white-space: nowrap;
  text-align: center;
}

.txt-right {
  text-align: right;
}

.txt-left {
  text-align: left;
}

.txt-center {
  text-align: center;
}

button {
  font-family: Verdana, Arial, Helvetica;
  font-size: 10pt;
  border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-style: solid;
  border-width: 1px;
}

.mobile {
  display: block;
}

.help {
  display: inline-block;
}

.help summary {
  cursor: pointer;
  font-weight: bold;
}

.login {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1.login {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

h3.login {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

table.login {
  padding: 20px;
}

div#login-box {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid;
}

div#Options {
  display: none;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.loginTable {
  display: table;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6px;
}

.loginTableRow {
  display: table-row;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;
  margin-bottom: 15px;
}

.loginTableCell {
  display: table-cell;
  text-align: center;
  font-family: Verdana, Arial, Helvetica;
}

.divider {
  width: 5px;
  height: auto;
  display: inline-block;
}

.indent {
  margin-left: 4em;
  margin-right: 4em;
}

td.login {
  text-align: center;
}

th.login {
  text-align: right;
}

@media all and (min-width: 768px) {
  button.login {
    font-family: Verdana, Arial, Helvetica;
    font-size: 10pt;
    border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-style: solid;
    border-width: 1px;
    padding: 10px;
  }

  h1.login {
    font-size: 18pt;
  }

  div#login-box {
    padding: 60px;
    margin-left: 30%;
    margin-right: 30%;
    margin-bottom: 10%;
  }

  .loginTable {
    display: table;
    padding: 6px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2px;
  }

  .loginTableRow {
    display: table-row;
    padding: 6px;
    margin-left: auto;
    margin-right: auto;
    border-collapse: separate;
    margin-bottom: 10px;
  }

  .loginTableCell {
    display: table-cell;
    text-align: center;
    padding: 6px;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10pt;
  }

  .mobile {
    display: none;
  }
}

body.menu {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.menuOut,
.menuOver {
  cursor: pointer;
  font-size: 11px;
  padding: 2px;
  text-align: left;
}

.submenu {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding-left: 5px;
}

.menuOut a,
.menuOver a {
  margin: 0px;
  font-size: 11px;
  padding: 0px;
  text-align: left;
  border: 0px solid;
}

.listtop {
  font-size: 10pt;
}

.listheading {
  font-size: 10pt;
  text-align: center;
}

.listheading-nowrap {
  font-size: 10pt;
  white-space: nowrap;
  text-align: center;
}

A.listheading:link,
A.listheading:active,
A.listheading:visited {
  text-decoration: none;
}

.listrow1,
.listrow0,
.listsubtotal,
.listsubtotal-r,
.listtotal,
.listtotal-r {
  font-size: 10pt;
}

.listrow1,
.listrow0 {
  vertical-align: top;
}

.listsubtotal-r,
.listtotal-r {
  white-space: nowrap;
  text-align: right;
}

textarea {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border-style: solid;
  border-width: 1px;
  font-size: 11px;
  font-weight: bold;
}

input {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border-style: solid;
  border-width: 1px;
  font-size: 11px;
  font-weight: bold;
}

select {
  font-family: Verdana, Arial, Helvetica;
  font-size: 10pt;
  border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-style: solid;
  border-width: 1px;
  padding: 2px;
}

.submit {
  font-family: Verdana, Arial, Helvetica;
  font-size: 10pt;
  border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-style: solid;
  border-width: 1px;
  padding: 3px;
  margin-bottom: 15px;
  margin-right: 15px;
}

.checkbox,
.radio {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10pt;
}

h2.confirm,
h2.error {
  font-size: 14pt;
}

.s-info {
  font-size: 14pt;
  padding: 3px;
  white-space: nowrap;
  text-align: center;
}

.valign-t {
  vertical-align: top;
}

@media screen {
  .noscreen {
    display: none;
  }
}

@media print {
  .noprint {
    display: none;
  }
}

.hidden {
  display: none;
}

.bTable {
  display: table;
  width: 100%;
  padding: 20px 12px;
  margin-bottom: 10px;
  margin-right: 10px;
}

.rTable {
  display: table;
  width: 100%;
}

.sTable {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  border-spacing: 10px;
}

.bTableRow,
.rTableRow,
.rTableRowLeft,
.rTableRowRight,
.rTableRowCenter,
.rTableRowTop {
  display: table-row;
}

.rTableRowLeft {
  float: left;
}

.rTableRowRight {
  float: right;
}

.rTableRowCenter,
.rTableRowTop {
  text-align: center;
}

.rTableHeading {
  display: table-header-group;
  font-weight: bold;
}

.rTableCell,
.rTableCellLeft,
.rTableHead {
  display: table-cell;
  padding: 3px 10px;
  font-family: Verdana, Arial, Helvetica;
  font-size: 10pt;
}

.rTableCellLeft {
  text-align: center;
}

.rTableHead {
  font-weight: bold;
}

.rTableFoot {
  display: table-footer-group;
  font-weight: bold;
}

.rTableBody {
  display: table-row-group;
}

#buttons,
#buttons .rTableBody,
#buttons .rTableRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#buttons {
  width: 100%;
}

#buttons .submit {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 8px 8px 0;
  white-space: nowrap;
}

#callback_options {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  width: auto;
  padding: 0;
  margin: 0 8px 8px 0;
}

#callback_options label {
  margin: 0 6px 8px 0;
}

.rTableListtop,
.rTableListheading {
  font-size: 10pt;
}

.rTableListtop {
  font-weight: bold;
  text-align: center;
}

A.rTableListheading:link,
A.rTableListheading:active,
A.rTableListheading:visited {
  text-decoration: none;
}

.rTableListrow1,
.rTableListrow0,
.rTableListtotal {
  display: table-row;
  font-size: 10pt;
}

.rTableListrow1,
.rTableListrow0 {
  vertical-align: top;
}

.rTableListsubtotal {
  display: table-cell;
  font-size: 10pt;
}

#searchOptLastRow {
  height: 35px;
  width: 500px;
  overflow: hidden;
}

hr {
  width: 100%;
  height: 3px;
  border-width: 0;
}

#page_loader_overlay {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: rgba(255, 255, 255, 0.55);
  cursor: wait;
}

#loader,
.page-loader-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10001;
  width: 120px;
  height: 120px;
  margin: -75px 0 0 -75px;
  border: 16px solid #5a7d9b;
  border-top: 16px solid #ffffee;
  border-bottom: 16px solid #eeeecc;
  border-radius: 50%;
  box-sizing: border-box;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.cornderlogo {
  border: 1px solid;
  padding: 1px;
}

pre {
  padding: 5px;
  margin: 5px;
  white-space: pre-wrap;
  white-space: pre-wrap;
  white-space: pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.menu_spacer {
  display: flex;
  height: 5px;
  padding: 5px;
  margin: 2px;
}

body.menu #spacer1.menu_spacer {
  height: var(--top-left-reserved-height);
  padding: 0;
  margin: 0;
}

.welcome {
  text-align: center;
  float: left;
  padding-left: 300px;
}

body.rf-calculator {
  font-size: 0.95rem;
  background: linear-gradient(180deg, #f7f3ea 0%, #f3efe7 100%);
  color: #1f1f1f;
}

.rf-calculator-shell {
  margin: 1rem auto 0;
  width: min(1100px, calc(100% - 2rem));
}

.rf-calculator-header {
  padding: 1.25rem 1.4rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background:
    radial-gradient(circle at top right, rgba(191, 157, 84, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(251, 247, 239, 0.94));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.rf-calculator-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a6235;
  margin-bottom: 0.35rem;
}

.rf-calculator-title {
  margin: 0;
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #1c1b17;
}

.rf-calculator-description {
  margin: 0.9rem 0 0;
  padding: 0.9rem 1rem;
  max-width: 74ch;
  border-left: 4px solid #a67c2c;
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}

#rf-wire-form-wrapper {
  margin-top: 1rem;
}

.rf-wire-table {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.35rem;
}

.rf-wire-header,
.rf-wire-form {
  display: table-row;
}

.rf-wire-cell {
  display: table-cell;
  padding: 0.35rem 0.5rem;
  vertical-align: top;
}

.rf-wire-header .rf-wire-cell {
  font-weight: 700;
  padding-bottom: 0.1rem;
}

.rf-wire-index {
  white-space: nowrap;
  width: 2rem;
}

.rf-wire-heading {
  text-align: left;
}

.rf-wire-table select,
.rf-wire-table input,
.rf-select {
  width: 100%;
  box-sizing: border-box;
}

.rf-summary-table {
  width: 100%;
  margin-top: 0.5rem;
}

.rf-section {
  margin-top: 1rem;
}

.rf-section-title {
  font-weight: 700;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.rf-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.rf-summary-field label,
.rf-stat-row label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.rf-summary-field input,
.rf-summary-input input {
  width: 100%;
  box-sizing: border-box;
}

.rf-summary-label {
  white-space: nowrap;
}

.rf-raceway-form {
  padding-bottom: 0.25rem;
}

.rf-raceway-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.rf-form-field {
  flex: 1 1 220px;
}

.rf-run-button {
  padding: 0.5rem 1rem;
  width: 100%;
}

.rf-fill-options {
  border: 1px solid;
  padding: 0.75rem;
  margin-top: 0.75rem;
}

.rf-fill-options legend {
  font-weight: bold;
}

.rf-radio {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.rf-raceway-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 1rem;
}

.rf-stat-row {
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) minmax(10rem, 1fr);
  gap: 0.75rem;
  align-items: end;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
}

.rf-stat-row label {
  margin: 0;
  line-height: 1.25;
}

.rf-stat-row input {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .rf-stat-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

#rf-debug-panel textarea {
  width: 100%;
}

.rf-footer-note {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
}