/* ==========================================================================
   Sync4DR Design System -- Legacy Compatibility Layer
   ---------------------------------------------------------------------------
   Restyles the OLD, un-converted content markup (the ~50 Contents/_*.php
   templates plumbed through management.php/index.php/download.php/etc, plus
   any other not-yet-converted page still wrapping content in <div
   id="container">) using the new design tokens, WITHOUT editing that markup.
   Loaded LAST on pages that also load the old Styles/layout.css for
   structural fallback -- see the CSS ORDER note in header.php. Every colour
   here comes from tokens.css; no hardcoded hex values.
   ========================================================================== */

/* --- Scroll container for wide tables ---------------------------------
   Old markup is a bare <table> with no .s4-table-wrap wrapper div to add
   scrolling to, so the nearest always-present ancestor scrolls instead. */

#content,
#container,
.s4-container {
  overflow-x: auto;
}

/* --- Tables ----------------------------------------------------------- */

#container table,
.s4-container table,
#content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-size: var(--fs-base);
  font-family: var(--font-body);
  color: var(--s4-text);
  background: var(--s4-bg);
  border: 1px solid var(--s4-border);
}

#container table thead th,
.s4-container table thead th,
#content table thead th,
#container table tbody th,
.s4-container table tbody th,
#content table tbody th {
  background: var(--s4-surface);
  color: var(--s4-text-muted);
  text-align: left;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--s4-border);
  vertical-align: middle;
}

#container table tbody td,
.s4-container table tbody td,
#content table tbody td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--s4-border);
  vertical-align: middle;
  color: var(--s4-text);
  background: var(--s4-bg);
}

#container table tbody tr.light,
.s4-container table tbody tr.light,
#content table tbody tr.light,
#container table tbody tr.dark,
.s4-container table tbody tr.dark,
#content table tbody tr.dark {
  background: var(--s4-bg);
}

#container table tbody tr:hover td,
.s4-container table tbody tr:hover td,
#content table tbody tr:hover td {
  background: var(--s4-surface);
}

/* --- Form controls ------------------------------------------------------- */

#container input[type="text"],
#container input[type="password"],
#container input[type="email"],
#container input[type="number"],
#container input[type="search"],
#container input[type="tel"],
#container input[type="url"],
#container input[type="date"],
#container select,
#container textarea,
.s4-container input[type="text"],
.s4-container input[type="password"],
.s4-container input[type="email"],
.s4-container input[type="number"],
.s4-container input[type="search"],
.s4-container input[type="tel"],
.s4-container input[type="url"],
.s4-container input[type="date"],
.s4-container select,
.s4-container textarea {
  display: inline-block;
  width: auto;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--s4-text);
  background: var(--s4-bg);
  border: 1px solid var(--s4-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  float: none;
}

#container textarea,
.s4-container textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  resize: vertical;
}

#container input[type="text"]:focus,
#container input[type="password"]:focus,
#container input[type="email"]:focus,
#container input[type="number"]:focus,
#container input[type="search"]:focus,
#container input[type="tel"]:focus,
#container input[type="url"]:focus,
#container input[type="date"]:focus,
#container select:focus,
#container textarea:focus,
.s4-container input[type="text"]:focus,
.s4-container input[type="password"]:focus,
.s4-container input[type="email"]:focus,
.s4-container input[type="number"]:focus,
.s4-container input[type="search"]:focus,
.s4-container input[type="tel"]:focus,
.s4-container input[type="url"]:focus,
.s4-container input[type="date"]:focus,
.s4-container select:focus,
.s4-container textarea:focus {
  outline: none;
  border-color: var(--s4-red);
  box-shadow: 0 0 0 3px var(--s4-red-light);
}

/* --- Buttons -------------------------------------------------------------
   min-height is intentionally lower than .s4-btn's 44px so dense legacy
   toolbars of many small buttons don't balloon in height. */

#container input[type="submit"],
#container input[type="button"],
#container button,
.s4-container input[type="submit"],
.s4-container input[type="button"],
.s4-container button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 var(--space-5);
  border: 1px solid var(--s4-red);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: #FFFFFF;
  background: var(--s4-red);
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

#container input[type="submit"]:hover,
#container input[type="button"]:hover,
#container button:hover,
.s4-container input[type="submit"]:hover,
.s4-container input[type="button"]:hover,
.s4-container button:hover {
  background: var(--s4-red-dark);
  border-color: var(--s4-red-dark);
}

#container input[type="submit"][value*="Delete" i],
#container input[type="button"][value*="Delete" i],
#container input[type="submit"][name*="Delete" i],
#container input[type="button"][name*="Delete" i],
.s4-container input[type="submit"][value*="Delete" i],
.s4-container input[type="button"][value*="Delete" i],
.s4-container input[type="submit"][name*="Delete" i],
.s4-container input[type="button"][name*="Delete" i] {
  background: var(--s4-danger);
  border-color: var(--s4-danger);
}

#container input[type="submit"][value*="Delete" i]:hover,
#container input[type="button"][value*="Delete" i]:hover,
#container input[type="submit"][name*="Delete" i]:hover,
#container input[type="button"][name*="Delete" i]:hover,
.s4-container input[type="submit"][value*="Delete" i]:hover,
.s4-container input[type="button"][value*="Delete" i]:hover,
.s4-container input[type="submit"][name*="Delete" i]:hover,
.s4-container input[type="button"][name*="Delete" i]:hover {
  background: #A5311F;
  border-color: #A5311F;
}

/* --- Legacy layout helpers ------------------------------------------------
   Neutralise the old fixed-width, float-based CleanBusiness template grid so
   it no longer fights the new fluid/responsive .s4-container. */

#container,
.wrapper {
  width: auto;
  max-width: 100%;
}

.fl_left,
.fl_right {
  max-width: 100%;
}

@media (max-width: 768px) {
  #column,
  #content,
  .fl_left,
  .fl_right {
    float: none;
    width: 100%;
  }
}

/* ==========================================================================
   WIDTH / DEAD-SPACE FIX (2026-07-21)
   --------------------------------------------------------------------------
   The legacy Styles/layout.css hard-codes `#content { float:left; width:630px }`
   and a ~300px sidebar. Inside the new 1280px container that left roughly 300px
   of dead space between the data table and the right-hand sub-nav on wide
   screens. Here the content column becomes FLUID so it consumes whatever space
   the sidebar does not, and the container itself is widened.
   These rules must win over layout.css -- legacy-compat.css is loaded last.
   ========================================================================== */

.s4-container {
    max-width: 1560px;          /* was 1280px */
}

/* 2026-10-29: the top bar, menu bar and breadcrumb bar get the same width as the content above, so the logo
   and the menu line up with the page content on wide screens (at 1280px they sat ~140px further in). */
.s4-topbar-inner,
.s4-nav-list,
.s4-breadcrumb-inner {
    max-width: 1560px;
}

/* Fluid main column: fill everything except the sidebar + a gutter. */
#content {
    float: left;
    width: calc(100% - 340px);  /* 300px sidebar + 40px gutter */
    max-width: none;
    min-width: 0;               /* let wide tables shrink instead of overflowing */
    box-sizing: border-box;
}

/* Right-hand sub-nav / tips column. */
#column {
    float: right;
    width: 300px;
    box-sizing: border-box;
}

#column .holder,
#column #featured,
#column .subnav,
#column div.imgholder {
    width: 100%;                /* were fixed 300/290/250/240px */
    box-sizing: border-box;
}

/* Stack the two columns on narrow screens instead of crushing the table. */
@media (max-width: 980px) {
    #content,
    #column {
        float: none;
        width: 100%;
    }
    #column {
        margin-top: var(--space-6);
    }
}