/* tiptrans-theme.css — /clients Bootstrap 5 bridge / look-preservation layer.
 *
 * Loaded ONLY on pages that opt in via $useBootstrap (per-page rollout),
 * AFTER Bootstrap so it can re-assert the legacy look wherever Bootstrap
 * Reboot diverges. The migration is grid-only (grid_N -> col-*); legacy
 * component classes (.box, .text1, .yel, form.css) are intentionally kept.
 *
 * Visual design polish will grow here in a later phase.
 */

:root {
  --tt-yellow:      #fee600;
  --tt-yellow-deep: #d9c400;
  --tt-black:       #000;
  --tt-ink:         #1b1e23;
}

/* ---- Fonts: vendor modern Lato v25 (woff2), overriding the blurry 2011 v11
   faces from gfonts.css. Same fix applied in ttadmin: real 400/700/900, no
   local() so the system copy is never substituted. ---- */
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../../fonts/lato-v25-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../../fonts/lato-v25-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../../fonts/lato-v25-latin-900.woff2') format('woff2');
}

/* ---- Links: Bootstrap Reboot turns every <a> blue + underlined. Restore the
   legacy treatment (inherit text colour, yellow on hover). Keeps brand feel and
   avoids the unreadable yellow-on-white that a yellow link colour would give. ---- */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px green dotted;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
a:hover { color: var(--tt-yellow); }

/* ---- Field labels: .text1 / .text2 already define a bottom margin (17px / 5px)
   in style.css, but they are frequently rendered on inline <span>s where vertical
   margin is ignored, so the label sticks to the input below it. Make them block so
   the intended spacing applies (app-wide). ---- */
.text1, .text2 { display: block; }
.text2 { margin-bottom: 12px; } /* legacy 5px still reads as "stuck" to the input */

/* ---- Cards + title bars: adopt the admin look — slightly rounded card, with a
   compact 1rem / 900 / uppercase title and a thin deep-yellow underline (was 20px /
   12-20-14px / 4px-white). .box_title.err/.good keep their own bg via specificity. ---- */
.box { border-radius: var(--bs-border-radius, .375rem); }

/* ---- Legacy jquery.equalheights.js freezes a FIXED pixel height onto every .maxheight
   box at load/resize (= the tallest column at that moment). When content grows afterwards
   — e.g. saving a declaration row makes the INSURANCE block appear and the items list
   grow — that frozen height never recomputes, so the card stops growing and its content
   spills under the footer. The Bootstrap grid already equalises side-by-side columns via
   flex, so the JS height equalisation is redundant; neutralise its inline height (same fix
   ttadmin/css/redesign.css applies). theme.css only loads on $useBootstrap pages. ---- */
.maxheight { height: auto !important; }

/* Card body: Bootstrap's 12px gutter is tighter than the legacy 30px grid margin, so
   migrated content sat closer to the card's left edge (and top) than the original.
   Give the body more breathing room — was 15px 20px 21px. Pure whitespace, no reflow. */
.box_bot { padding: 20px 28px 22px; }
.box_title {
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: .03em;
  /* Horizontal padding == .box_bot (28px) so the title text sits DIRECTLY above the body
     text. Vertical stays compact. (Was .9rem ~14px, which left title and body misaligned.) */
  padding: .6rem 28px;
  color: var(--tt-ink);
  border-bottom: 1px solid var(--tt-yellow-deep);
  border-top-left-radius: var(--bs-border-radius, .375rem);
  border-top-right-radius: var(--bs-border-radius, .375rem);
}

/* ---- Unified "context container" indent: every card is title (.box_title) + body
   (.box_bot), and content lines up at the SAME 28px on every page so blocks never look
   like they have different padding. Two things broke that uniformity and are corrected here:
   (1) inner Bootstrap rows used only to lay out columns inside a body must not add a SECOND
   indent on top of the body's 28px. A normal .row's negative gutter cancels the first/last
   column's padding back to the body edge (inter-column gutters preserved); .row.mx-0 zeroed
   that negative margin and so pushed column-1 content 12px past the body padding — restore the
   negative margin for rows that are direct children of a body. (2) the legacy .small_margin
   (-20px) / .text1leva (-30px) left-margins were grid-era nudges that now drag headings out of
   alignment with the text beneath them — neutralise the HORIZONTAL nudge inside cards while
   keeping their vertical spacing. theme.css only loads on $useBootstrap pages, so legacy
   (non-BS) pages keep the original grid offsets untouched. The notify <p class="text1leva">
   lives OUTSIDE .box_bot, so its alignment (handled via #notificationBox) is unaffected. ---- */
.box_bot > .row.mx-0 {
  margin-left: calc(-.5 * var(--bs-gutter-x, 1.5rem)) !important;
  margin-right: calc(-.5 * var(--bs-gutter-x, 1.5rem)) !important;
}
.box_bot .small_margin, .box_bot .text1leva { margin-left: 0; }

/* Orphan Bootstrap columns: the grid_N -> col-* migration sometimes left a .col-* as a
   generic block WITHOUT a .row parent. A lone .col keeps Bootstrap's half-gutter padding
   (~12px) but has no .row negative margin to cancel it, so its content sits 12px past the
   28px body edge (nested orphan cols compound it). Neutralise every column's gutter inside a
   body, then RESTORE it only for real .row > .col (where the row's negative margin balances
   it) — so orphan cols at any depth land on the 28px body edge while rowed columns keep their
   inter-column gutters. Pairs with the .box_bot > .row.mx-0 negative-margin restore above. */
.box_bot [class^="col-"], .box_bot [class*=" col-"] { padding-left: 0; padding-right: 0; }
.box_bot .row > [class^="col-"], .box_bot .row > [class*=" col-"] {
  padding-left: calc(.5 * var(--bs-gutter-x, 1.5rem));
  padding-right: calc(.5 * var(--bs-gutter-x, 1.5rem));
}
/* Alert/notice bars -> contained boxes aligned with the cards below, on $useBootstrap pages.
   (a) infoBox ($infoBox, now wrapped in .container by header.php) and (b) the notify()
   success/error boxes both render the coloured bar via .box_title.err/.good with a legacy 5px
   side margin -> drop it so edges line up with the container content (was margin:5px 5px 0 5px;
   keep the top gap). (c) notify() (inc-functions.php) additionally wraps its bar in the LEGACY
   float grid: .row#notificationBox > .grid_12, where grid_12 = float:left + margin-left:30px +
   a FIXED width:1170px, which overflows/shifts inside the fluid Bootstrap container. Neutralise
   it so the bar fills the container cleanly. theme.css only loads on $useBootstrap pages, so
   legacy (non-BS) pages keep their original grid behaviour untouched. */
.box_title.err, .box_title.good { margin-left: 0; margin-right: 0; border-radius: var(--bs-border-radius, .375rem); }
#notificationBox { display: block; margin-top: -17px; margin-left: 0; margin-right: 0; }
#notificationBox .grid_12 { float: none; width: auto; margin-left: 0; padding-left: 0; padding-right: 0; }
/* (d) full border-radius above makes the alerts rounded boxes (legacy .box_title only rounds the
   top, as a card header would). (e) margin-top:-17px cancels the legacy .text1leva margin-bottom
   spacer that sits above the notify, so the notify's gap from the bar above matches the infoBox's
   gap from the navbar. (f) the notify() success/error icon (1.png/0.png) used float+margin-top:-10px
   and overflowed the bar — flex-centre the icon+text and size the icon to the line so it sits
   cleanly inside the rounded bar. */
#notificationBox .box_title { display: flex; align-items: center; }
#notificationBox .box_title > div:first-child { margin-top: 0 !important; }
#notificationBox .box_title img { height: 20px; width: auto; display: block; }
/* (g) the global attention/fee infoBox renders in a bare .container between the navbar and
   the white .content, so the grey body (#e2e2e2) shows as an isolated strip behind it. Seat
   it on a full-width white band (header.php wraps it in .infobox-band) so it reads as part of
   the page surface, continuous with the content below, instead of a floating grey stripe. */
.infobox-band { background: #fff; }

/* ---- Buttons: match the admin button geometry exactly (Bootstrap .btn defaults +
   Lato 600): 1rem / .375rem .75rem / rounded .375rem. Keeps the clients' black fill +
   yellow hover (= admin .btn-dark). !important defeats the legacy input{border-radius:0}. ---- */
.btn, input.yel, #form input.yel {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  padding: .375rem .75rem;
  border-radius: var(--bs-border-radius, .375rem) !important;
}
/* Primary submit (.yel) = admin .btn-primary: yellow fill + ink text + deep-yellow
   border, black on hover. (Legacy made it black with a leaked yellow input-border.) */
input.yel, #form input.yel {
  background-color: var(--tt-yellow);
  color: var(--tt-ink);
  border: 1px solid var(--tt-yellow-deep);
}
input.yel:hover, #form input.yel:hover {
  background-color: var(--tt-black);
  color: #fff;
}

/* file-picker "Choose file" (.btn_small) = admin .btn-dark; keep its height matched
   to the filename input, just round it, give the cramped text room, and add a gap. */
.btn_small { border-radius: var(--bs-border-radius, .375rem); font-weight: 600; }
/* Low-emphasis secondary: a MUTED neutral (slightly darker than the grey card) so it
   recedes and the yellow CONTINUE stays the single loud primary. (White + border read
   as a prominent button and competed with the primary.) */
.fileUpload.btn_small {
  padding: 5px 14px;
  background-color: #e7eaee;
  color: var(--tt-ink);
  border: 1px solid #d4d9df;
  cursor: pointer;
}
.fileUpload.btn_small:hover { background-color: #dce0e6; border-color: #c2c8d0; }
.fileUpload { margin-left: 8px; }

/* Back-arrow accent: legacy 17px bottom margin left a big gap to its label and shoved
   the arrow up against the title; tighten it to the text and nudge it down a touch. */
.text1acc { margin-top: 6px; margin-bottom: 4px; }
#uploadFile { border-radius: var(--bs-border-radius, .375rem) !important; }

/* ---- Inputs: a fill LIGHTER than the grey card so fields clearly read as editable
   (was #f2f2f2 = same as the card, so they vanished), a calm grey border (was a loud
   permanent yellow), and the yellow only as a focus ring — the admin treatment.
   :not([type=submit]):not(.yel) keeps the yellow submit buttons out of this rule. ---- */
#form input:not([type="submit"]):not(.yel), #form textarea, #form select, input.short {
  background-color: #fcfdfe;
  border: 1px solid #d4d9df;
}
#form input:not([type="submit"]):not(.yel):focus, #form textarea:focus, #form select:focus, input.short:focus {
  background-color: #fff;
  border-color: var(--tt-yellow-deep);
  box-shadow: 0 0 0 .2rem rgba(254, 230, 0, .35);
  outline: none;
}

/* Checkboxes & radios sit inside #form too, so the blanket #form input rule (form.css:
   width:100%; height:41px; float:left; appearance:none; yellow border) — and the field
   fill/border above — inflate them into giant boxes (e.g. the declaration page's insurance
   opt-in). Legacy dodges this only where an inline appearance:radio override was hand-added;
   restore native rendering for ALL #form checkboxes/radios so they read as controls, not
   fields. theme.css loads only on $useBootstrap pages, so legacy pages are untouched. */
#form input[type="checkbox"], #form input[type="radio"] {
  width: auto;
  height: auto;
  float: none;
  -webkit-appearance: auto;
  appearance: auto;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 6px 0 0;
  vertical-align: middle;
  box-shadow: none;
}

/* Carrier rows (shipping-method page): each row is an inline-styled wrapper holding a
   .row of image | name | price. The inner row's negative gutter cancels against the
   first/last column padding, landing the carrier logo on the wrapper's exact left edge —
   so on the selected (yellow) row the logo sat flush against the highlight with no
   breathing room. A 14px horizontal inset on the wrapper pushes its content in while the
   highlight background still fills to the edge, giving the gap; the inner row's negative
   margin (untouched) keeps the inter-column gutters, so the name no longer glues to the
   logo and the price stays inset from the right edge. Vertical padding is uniform here
   (was inline and applied top+bottom only to the selected row, so that row breathed while
   the rest sat tight at the top). */
#form .carrier-row { padding: 10px 14px; }
/* The price is wrapped in <h6>, which legacy style.css gives a 24px right margin — that
   pushed the price 24px left of the row's right content edge, so it sat further from the
   edge than the logo did from the left. Cancel it here (carrier rows only) so the price
   lines up flush at the inset, mirroring the logo. (Pairs with the name column being a
   grow column — col-md — so the price column reaches the right edge in the first place.) */
#form .carrier-row h6 { margin-right: 0; }

/* ---- Consolidate page uses <form id="form2">, which legacy form.css styles on a separate,
   pre-Bootstrap track: selects get NO rule (raw native look), the textarea is a single
   1.5em line that grows on focus, and #form2 input.yel is the old black 20px button. None
   of the #form polish above reaches #form2, so the consolidate form looked unstyled. Bring
   its controls up to the #form look. Equal-specificity selectors win because theme.css
   loads last; it is $useBootstrap-only so legacy (non-BS) pages are untouched. ---- */
#form2 select, #form2 textarea, #form2 input:not([type="submit"]):not(.yel) {
  background-color: #fcfdfe;
  border: 1px solid #d4d9df;
  border-radius: var(--bs-border-radius, .375rem);
  box-sizing: border-box;
  font: 14px/20px 'Lato', sans-serif;
  color: var(--tt-ink);
}
#form2 select:focus, #form2 textarea:focus, #form2 input:not([type="submit"]):not(.yel):focus {
  background-color: #fff;
  border-color: var(--tt-yellow-deep);
  box-shadow: 0 0 0 .2rem rgba(254, 230, 0, .35);
  outline: none;
}
/* Carrier-preference select: full-width form field (matches #form selects). */
#form2 select { width: 100%; height: 41px; padding: 8px 12px; }
/* The compact in-table repack selects stay inline-sized, not stretched to the cell. */
#form2 .typeSelect { width: auto; height: auto; padding: 5px 10px; }
/* Textarea was one line tall (1.5em) and grew to 5em on focus — give it a normal box. */
#form2 textarea { width: 100%; height: 110px; padding: 9px 14px; resize: vertical; }
#form2 textarea:focus { height: 110px; }
/* Checkboxes (the table "Select" + the "Strict" toggle): legacy #form2 input forces
   width:100%/height:41px, which Chromium scales the native control to (the oversized blue
   box). Pin them to an explicit branded size instead of letting them stretch — accent-color
   ties the tick to the theme yellow so they read as styled, not raw defaults. */
#form2 input[type="checkbox"], #form2 input[type="radio"] {
  width: 18px; height: 18px; float: none; -webkit-appearance: auto; appearance: auto;
  accent-color: var(--tt-yellow-deep); cursor: pointer;
  background: none; border: 0; padding: 0; margin: 0 6px 0 0; vertical-align: middle; box-shadow: none;
}
/* Primary submit = the same yellow as the rest (overrides legacy black #form2 input.yel). */
#form2 input.yel {
  display: inline-block;
  font-size: 1rem; font-weight: 600; line-height: 1.5;
  padding: .375rem .75rem; margin-top: 10px;
  border-radius: var(--bs-border-radius, .375rem);
  background-color: var(--tt-yellow); color: var(--tt-ink);
  border: 1px solid var(--tt-yellow-deep); text-transform: none;
}
#form2 input.yel:hover { background-color: var(--tt-black); color: #fff; }
/* Package ID link read at the 12px .balanceHistory cell size — bump just that identifier. */
#form2 .balanceHistory td a strong { font-size: 15px; }

/* Legacy pages historically render at the old 1170px width; keep Bootstrap's
   container from feeling narrower on large screens. */
@media (min-width: 1200px) {
  .container { max-width: 1170px; }
}

/* Status/history tables scroll horizontally on small screens instead of
   overflowing the viewport. Pair with a .table-responsive wrapper. */
.table-responsive { margin-bottom: 0; }