/* =============================================================
   JC Steele Service Portal — Font & Style Consistency Fix v3
   =============================================================

   PURPOSE
   - Enforce Rubik consistently across Semantic UI, Bootstrap, and Vue views
   - Improve readability and visual consistency
   - Make the font size toggle work better across the site
   - Reduce layout side effects from overly broad container styling
   - Keep the brand look clean and readable

   LOAD ORDER
   Load this AFTER:
   1. semantic.min.css
   2. compiled-app.css
   3. any vendor theme CSS
   ============================================================= */


/* =============================================================
   1. ROOT VARIABLES
   ============================================================= */

:root {
  --steele-font-body: rubik-regular-webfont, "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --steele-font-medium: rubik-medium-webfont, "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --steele-font-bold: rubik-bold-webfont, "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --steele-font-light: rubik-light-webfont, "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;

  --steele-red: #ed1d24;
  --steele-red-dark: #af331c;
  --steele-dark: #342a2b;
  --steele-gray-bg: #f2f2f3;
  --steele-gray-light: #f8f8f8;
  --steele-text: #333333;
  --steele-text-muted: #666666;
  --steele-border: #dddddd;
  --steele-panel-bg: rgba(255, 255, 255, 0.95);

  --steele-base-font-size: 13px;
}


/* =============================================================
   2. GLOBAL FONT SIZE + BASE TYPOGRAPHY
   ============================================================= */

html {
  font-size: var(--steele-base-font-size) !important;
}

body {
  position: relative !important;
  font-family: var(--steele-font-light) !important;
  font-size: 1rem !important;
  line-height: 1.5;
  color: var(--steele-text);
  background-color: #f0efed !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--steele-font-medium) !important;
  font-weight: 400 !important;
  color: var(--steele-text);
  line-height: 1.25;
}

h1 { font-size: 2rem !important; }
h2 { font-size: 1.5rem !important; }
h3 { font-size: 1.25rem !important; }
h4 { font-size: 1.1rem !important; }
h5 { font-size: 1rem !important; }
h6 { font-size: 0.95rem !important; }

p,
li,
td,
th,
label,
small,
input,
textarea,
select,
button,
a,
span,
div {
  font-size: inherit;
}

strong,
b {
  font-family: var(--steele-font-medium) !important;
}

a {
  color: inherit;
}


/* =============================================================
   3. SEMANTIC UI FONT OVERRIDES
   ============================================================= */

/* Buttons */
.ui.button,
.ui.buttons .button,
.ui.buttons .or {
  font-family: var(--steele-font-medium) !important;
  font-size: 1rem !important;
}

/* Form inputs and textareas */
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.form textarea,
.ui.input > input {
  font-family: var(--steele-font-body) !important;
  font-size: 1rem !important;
}

/* Form labels */
.ui.form .field > label {
  font-family: var(--steele-font-medium) !important;
}

/* Dropdowns */
.ui.dropdown,
.ui.dropdown .menu > .item,
.ui.dropdown > .text,
.ui.selection.dropdown,
.ui.search.dropdown > input.search {
  font-family: var(--steele-font-body) !important;
  font-size: 1rem !important;
}

/* Menu / Navigation */
.ui.menu,
.ui.menu .item,
.ui.menu .dropdown.item > .menu > .item {
  font-family: var(--steele-font-medium) !important;
}

/* Tables */
.ui.table,
.ui.table th,
.ui.table td,
.ui.table thead th {
  font-family: var(--steele-font-body) !important;
  font-size: 1rem !important;
}

.ui.table thead th {
  font-family: var(--steele-font-medium) !important;
}

/* Modal / Popup / Dimmer */
.ui.modal,
.ui.modal > .header,
.ui.modal > .content,
.ui.modal > .actions,
.ui.popup,
.ui.popup > .header {
  font-family: var(--steele-font-body) !important;
}

.ui.modal > .header,
.ui.modal .ui.header,
.ui.popup > .header {
  font-family: var(--steele-font-medium) !important;
}

/* Segment / Card / Message */
.ui.segment,
.ui.card,
.ui.cards > .card,
.ui.message,
.ui.message .header {
  font-family: var(--steele-font-body) !important;
}

.ui.message .header,
.ui.card > .content > .header,
.ui.cards > .card > .content > .header {
  font-family: var(--steele-font-medium) !important;
}

/* Header component */
.ui.header,
.ui.header .sub.header {
  font-family: var(--steele-font-medium) !important;
}

/* Statistic */
.ui.statistic > .value,
.ui.statistic > .label,
.ui.statistics .statistic > .value,
.ui.statistics .statistic > .label {
  font-family: var(--steele-font-medium) !important;
}

/* Label / Badge */
.ui.label {
  font-family: var(--steele-font-medium) !important;
}

/* Checkbox / Radio / Toggle */
.ui.checkbox label,
.ui.checkbox + label {
  font-family: var(--steele-font-body) !important;
}

/* Accordion */
.ui.accordion .title,
.ui.accordion .title:not(.ui) {
  font-family: var(--steele-font-medium) !important;
}

/* Tab */
.ui.tabular.menu .item {
  font-family: var(--steele-font-medium) !important;
}

/* Steps */
.ui.steps .step .title,
.ui.steps .step .description {
  font-family: var(--steele-font-body) !important;
}

.ui.steps .step .title {
  font-family: var(--steele-font-medium) !important;
}

/* Breadcrumb */
.ui.breadcrumb,
.ui.breadcrumb a {
  font-family: var(--steele-font-body) !important;
}

/* List */
.ui.list .list > .item,
.ui.list > .item,
.ui.list .list > .item .header,
.ui.list > .item .header {
  font-family: var(--steele-font-body) !important;
}


/* =============================================================
   4. VUETABLE CONSISTENCY
   ============================================================= */

.vuetable,
.vuetable th,
.vuetable td,
.vuetable-pagination,
.vuetable-pagination-info {
  font-family: var(--steele-font-body) !important;
}

.vuetable th {
  font-family: var(--steele-font-medium) !important;
}


/* =============================================================
   5. BOOTSTRAP COMPONENT FONT OVERRIDES
   ============================================================= */

.btn,
.form-control,
.nav-link,
.navbar-nav .nav-link,
.dropdown-item,
.modal-title,
.modal-body,
.breadcrumb-item,
.page-link,
.card-title,
.card-body,
.list-group-item,
.badge,
.alert,
.table,
.table th,
.table td,
.pagination,
.b-form-btn-label-control.form-control {
  font-family: var(--steele-font-body) !important;
  font-size: 1rem !important;
}

.btn,
.nav-link,
.modal-title,
.card-title,
.badge,
.table th {
  font-family: var(--steele-font-medium) !important;
}


/* =============================================================
   6. PAGE-SPECIFIC TABLE CONSISTENCY
   ============================================================= */

#account table,
#savedRFQ table,
.saved-carts table {
  font-family: var(--steele-font-body) !important;
  border-collapse: separate;
  border-spacing: 0 10px;
}

#account table thead th,
#savedRFQ table thead th,
.saved-carts table thead th {
  font-family: var(--steele-font-medium) !important;
  font-weight: 400;
  font-size: 1em;
  color: rgba(0, 0, 0, 0.87);
  border: 0;
}

#account table tbody td,
#savedRFQ table tbody td,
.saved-carts table tbody td {
  font-family: var(--steele-font-body) !important;
  font-size: 1em;
  vertical-align: middle;
  padding: 12px 10px;
}

#account h2,
#savedRFQ h2 {
  font-family: var(--steele-font-medium) !important;
  font-weight: 400;
}

#account .btn,
#savedRFQ .btn,
.saved-carts .btn {
  font-family: var(--steele-font-medium) !important;
  letter-spacing: 0.02em;
}


/* =============================================================
   7. LIMITED CATCH-ALL
   ============================================================= */

.fe,
.fe *:not(i):not(.icon):not([class*="Icons"]):not([class*="icons"]) {
  font-family: inherit;
}


/* =============================================================
   8. HEADER BAR + TOP NAV + GLOBAL BREADCRUMBS
   Keep these stable despite customer font toggle
   ============================================================= */

#header-wrapper,
#main-nav {
  position: relative;
}

/* Header utility area */
#header-wrapper .account-cont {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#header-wrapper .header-tools {
  width: 100%;
  text-align: right;
  margin-top: 6px;
}

#header-wrapper .header-tools .fsElementContent,
#header-wrapper .header-tools #google_translate_element {
  display: inline-block;
}

#google_translate_element {
  display: inline-block;
}

/* Header text */
#header-wrapper .hi-phone,
#header-wrapper .hi-phone a {
  font-size: 14px !important;
  font-family: var(--steele-font-medium) !important;
  white-space: nowrap !important;
}

#hc-items,
#hc-items .hc-link {
  font-size: 14px !important;
  font-family: var(--steele-font-medium) !important;
  white-space: nowrap !important;
}

#header-account,
#header-account .nav-link {
  font-size: 14px !important;
  font-family: var(--steele-font-medium) !important;
  white-space: nowrap !important;
}

/* Header spacing */
#header-wrapper .search-cont {
  padding-bottom: 10px;
}

#header-wrapper .company-selector-wrapper {
  margin-top: 6px;
  margin-bottom: 10px;
}

/* Make account dropdown open above route content */
#header-account .dropdown-menu {
  z-index: 1055;
}

/* Top nav */
#main-nav {
  background: #e5e5e5 !important;
  border-top: 1px solid #d3d3d3 !important;
  border-bottom: 1px solid #cfcfcf !important;
  margin-bottom: 0 !important;
  z-index: 1001;
}

#main-nav .navbar-nav {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}

#main-nav .nav-item {
  display: flex;
  align-items: stretch;
}

#main-nav .nav-link,
#main-nav li.nav-item a {
  font-size: 13px !important;
  font-family: var(--steele-font-medium) !important;
  text-transform: uppercase;
  color: var(--steele-dark) !important;
  background: #e5e5e5 !important;
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #f3f3f3;
  padding: 0.85rem 1.4rem !important;
  transition: background 0.2s ease, color 0.2s ease;
}

#main-nav .nav-link:hover,
#main-nav .nav-link:focus {
  background: var(--steele-red) !important;
  color: #fff !important;
  text-decoration: none;
}

#main-nav .nav-link.active-nav {
  background: var(--steele-red) !important;
  color: #fff !important;
}

/* Global breadcrumbs under nav */
#breadcrumb-wrapper {
  display: block;
  width: 100%;
  clear: both;
  position: relative;
  z-index: 1;
  background: #fff !important;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ddd;
  margin-top: 0;
  padding: 14px 0 14px;
}

#breadcrumb-wrapper .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

#globalBreadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 22px;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}

#globalBreadcrumbs a {
  color: var(--steele-text);
  text-decoration: none;
}

#globalBreadcrumbs a:hover {
  color: var(--steele-red);
  text-decoration: underline;
}

/* =============================================================
   9. CUSTOMER FONT SIZE TOGGLE
   ============================================================= */

html.font-size-normal {
  --steele-base-font-size: 13px;
}

html.font-size-medium {
  --steele-base-font-size: 15px;
}

html.font-size-large {
  --steele-base-font-size: 17px;
}

/* Keep header stable regardless of toggle */
html.font-size-medium #header-wrapper .hi-phone,
html.font-size-medium #header-wrapper .hi-phone a,
html.font-size-medium #hc-items,
html.font-size-medium #hc-items .hc-link,
html.font-size-medium #header-account,
html.font-size-medium #header-account .nav-link,
html.font-size-large #header-wrapper .hi-phone,
html.font-size-large #header-wrapper .hi-phone a,
html.font-size-large #hc-items,
html.font-size-large #hc-items .hc-link,
html.font-size-large #header-account,
html.font-size-large #header-account .nav-link {
  font-size: 14px !important;
}

html.font-size-medium #main-nav li.nav-item a,
html.font-size-large #main-nav li.nav-item a {
  font-size: 13px !important;
}

/* Toggle button */
#font-size-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--steele-dark);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: var(--steele-font-medium);
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: background 0.2s;
}

#font-size-toggle:hover {
  background: var(--steele-red-dark);
}

#font-size-toggle .font-icon {
  font-size: 16px;
  font-weight: bold;
  margin-right: 4px;
}

#font-size-toggle .size-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* =============================================================
   10. BACKGROUND IMAGE / TEXTURE
   ============================================================= */

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url("/Machine-Shop-Production-header.webp") repeat top left;
  background-size: auto;
  opacity: 0.05;
  pointer-events: none;
}


/* =============================================================
   11. HIDE OLD BANNERS
   ============================================================= */

#home-banner,
#home-banner img,
#account-banner {
  display: none !important;
}


/* =============================================================
   12. WHITE CONTENT PANELS
   Narrowed from broad .container coverage to more intentional areas
   ============================================================= */

/* Header remains clean */
#header-wrapper {
  background: #fff !important;
}

/* Keep only true outer structural containers transparent */
#header-wrapper .container,
#main-nav .container,
#footer .container,
#shoppingPO .container,
#breadcrumb .container,
#home-tiles .container,
#account-tiles .container {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Search page breadcrumb spacing fix */
#shopAssembly #breadcrumb {
  margin-bottom: 10px !important;
}

#shopAssembly #subAssemblyTop {
  margin-top: 0 !important;
}

/* Standard white page panels */
#createOrder > .container,
#chooseAssembly > .container,
#shopAssembly > .container,
#OrderHistory > .container,
#orderHistory > .container,
#documents > .container,
#Documents > .container,
#savedRFQ > .container,
#savedCarts > .container,
.saved-carts > .container,
#acctOrders #ao-table,
#acctQuotes #ao-table,
#acctInsights > .container,
#acctInsights .insights-inner-block,
#acctInsights #ao-table,
#account-content .content,
#home-content .content,
#loginForm,
#resetForm,
#contact-form,
#orderForm,
#searchPart,
#cartTop .container,
#finalizeTop .container,
#bottomTotals .container,
#orderDetails .container,
#requestAcct,
#acctLogin,
#infoCenter > .container,
#cartFinalize .container,
#cartSuccess .container {
  background: #fff !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Standard page spacing for all main content panels */
#createOrder > .container,
#chooseAssembly > .container,
#shopAssembly > .container,
#OrderHistory > .container,
#orderHistory > .container,
#documents > .container,
#Documents > .container,
#savedRFQ > .container,
#savedCarts > .container,
.saved-carts > .container,
#cartTop .container,
#finalizeTop .container,
#bottomTotals .container,
#orderDetails .container,
#requestAcct,
#acctLogin,
#infoCenter > .container,
#cartFinalize .container,
#cartSuccess .container,
#loginForm,
#resetForm,
#contact-form,
#orderForm,
#searchPart {
  padding: 30px 24px 15px !important;
}

/* Push only the first main content panel down below breadcrumbs */
#createOrder > #breadcrumb + .container,
#chooseAssembly > #breadcrumb + .container,
#shopAssembly > #breadcrumb + .container,
#OrderHistory > #breadcrumb + .container,
#orderHistory > #breadcrumb + .container,
#documents > #breadcrumb + .container,
#Documents > #breadcrumb + .container,
#savedRFQ > #breadcrumb + .container,
#savedCarts > #breadcrumb + .container,
.saved-carts > #breadcrumb + .container,
#cartTop > #breadcrumb + .container,
#finalizeTop > #breadcrumb + .container,
#bottomTotals > #breadcrumb + .container,
#orderDetails > #breadcrumb + .container,
#infoCenter > #breadcrumb + .container,
#cartFinalize > #breadcrumb + .container,
#cartSuccess > #breadcrumb + .container {
  margin-top: 20px !important;
}

/* Account dashboard exception */
#acctInsights > .container,
#account-content .content {
  padding: 2px 24px 16px !important;
}

#acctInsights .insights-inner-block,
#acctInsights #ao-table {
  background: #fff !important;
}

#acctInsights .insights-inner-block {
  border: 1px solid var(--steele-border) !important;
  border-radius: 6px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

/* Shared page title inside white panels */
.page-title {
  font-family: var(--steele-font-medium) !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  color: var(--steele-text) !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.25;
}

/* Order History panel */
#OrderHistory .content,
#orderHistory .content,
.order-history-panel {
  background: #fff !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  padding: 30px 24px 15px !important;
}

/* Tables */
table tbody tr {
  background: #fff;
}

#aboutUs table tbody tr,
#account table tbody tr,
#OrderHistory table tbody tr,
#ReportBug table tbody tr {
  background: var(--steele-gray-bg) !important;
}

/* Cards / segments */
.ui.segment,
.ui.card,
.ui.cards > .card,
.comp-listing .cl-content {
  background: #fff !important;
}

/* Modals */
.ui.modal,
.ui.modal > .content {
  background: #fff !important;
}

/* Keep purposefully colored sections untouched */
#home-tiles .tile,
#account-tiles .tile,
#emergencyCTA,
#shoppingPO,
.enterPO,
#finalizeCont,
#orderDetailsReorder,
#createAcct,
#contact-info,
#prevOrders,
.red-cta,
.download-assets,
#orderTotal,
#deleteModal .modal-content,
#about-image-bg,
#aboutUs .bg-dark-grey,
#aboutUs .bg-grey,
#cartSuccess .green-bg,
#cartSuccess .gradient-bg,
#orderDetails .green-bg,
#orderDetails .gradient-bg,
#orderDetails .order-status .shipped,
#orderDetails .order-status .pending,
#footer {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Footer stays dark */
#footer {
  background: var(--steele-dark) !important;
}

/* =============================================================
   DASHBOARD SECTION SPACING FIX
   ============================================================= */

.dashboard .sectionView {
  padding-top: 0 !important;
}

.dashboard #account-tiles > .container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =============================================================
   13. ACCESSIBILITY / READABILITY HELPERS
   ============================================================= */

.btn,
.ui.button,
input,
textarea,
select,
.ui.input > input,
.ui.dropdown,
.page-link,
.dropdown-item {
  font-size: 1rem !important;
}

.table th,
.table td,
.ui.table th,
.ui.table td {
  line-height: 1.4;
}

.alert,
.ui.message {
  line-height: 1.5;
}


/* =============================================================
   14. MOBILE SAFETY
   ============================================================= */

@media (max-width: 991.98px) {
  #font-size-toggle {
    bottom: 14px;
    left: 14px;
    padding: 6px 10px;
  }

  #font-size-toggle .size-label {
    font-size: 12px;
  }
}


/* =============================================================
   15. CONSISTENT PAGE WIDTH
   Ensure header, content, and footer all use the same max-width
   ============================================================= */

/* All .container elements share the same max-width */
#header-wrapper .container,
#main-nav .container,
#footer .container,
#breadcrumb-wrapper .container,
#globalBreadcrumbs .container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

/* Full-width colored bands should not exceed the viewport,
   but their inner .container constrains content */
#account-tiles,
#acctOrders,
#acctQuotes,
#acctInsights,
#account-content,
#home-content {
  width: 100%;
}

/* Remove the "ORDER HISTORY" title banner since it was hidden anyway */
#account-tiles {
  padding: 0 !important;
}

#account-tiles h1 {
  padding: 20px 0 10px;
}