/*
  idx4 "Industrial Spec Sheet" theme — ported from dirtfield.ai idx4-review.php.
  Reskins the Metronic light theme: paper white surfaces, safety-orange primary,
  ink borders, machined hairline rules, squared corners, JetBrains Mono labels.
  Loaded after application.css so it wins the cascade. Light theme only.
*/

:root,
[data-bs-theme=light] {
    --idx4-orange: #ff7900;
    --idx4-orange-deep: #e56500;
    --idx4-orange-soft: rgba(255, 121, 0, 0.08);
    --idx4-orange-row-hover: #fff4eb;
    --idx4-ink: #14161a;
    --idx4-steel: #3c4148;
    --idx4-mute: #6c727a;
    --idx4-mute-2: #9aa0a8;
    --idx4-paper: #fafaf7;
    --idx4-paper-2: #f2f1ec;
    --idx4-plate: #ffffff;
    --idx4-line: rgba(20, 22, 26, 0.12);
    --idx4-line-strong: rgba(20, 22, 26, 0.28);
    --idx4-mono: "JetBrains Mono", SFMono-Regular, Menlo, monospace;
    --framework-datatable-row-hover-bg: var(--idx4-orange-row-hover);
}

[data-bs-theme=light] {
    /* Primary → safety orange */
    --bs-primary: var(--idx4-orange);
    --bs-primary-rgb: 255, 121, 0;
    --bs-primary-active: var(--idx4-orange-deep);
    --bs-primary-light: var(--idx4-orange-soft);
    --bs-primary-inverse: #ffffff;
    --bs-text-primary: var(--idx4-orange-deep);
    --bs-link-color: var(--idx4-orange-deep);
    --bs-link-color-rgb: 229, 101, 0;
    --bs-link-hover-color: var(--idx4-orange);
    --bs-link-hover-color-rgb: 255, 121, 0;
    --bs-component-active-bg: var(--idx4-orange);

    /* Surfaces */
    --bs-body-bg: var(--idx4-paper);
    --bs-body-color: var(--idx4-ink);
    --bs-app-bg-color: var(--idx4-paper);
    --bs-app-blank-bg-color: var(--idx4-paper);
    --bs-secondary-bg: var(--idx4-paper-2);
    --bs-tertiary-bg: var(--idx4-paper-2);
    --bs-light: var(--idx4-paper-2);
    --bs-light-rgb: 242, 241, 236;
    --bs-gray-100: var(--idx4-paper-2);

    /* Cards → data plates */
    --bs-card-bg: var(--idx4-plate);
    --bs-card-border-color: var(--idx4-line-strong);
    --bs-card-box-shadow: 0 1px 0 rgba(20, 22, 26, 0.05), 0 14px 40px rgba(20, 22, 26, 0.07);
    --bs-card-border-radius: 0;
    --bs-card-cap-bg: var(--idx4-plate);

    /* Header + sidebar chrome */
    --bs-app-header-base-bg-color: rgba(250, 250, 247, 0.95);
    --bs-app-header-base-border-bottom: 2px solid var(--idx4-ink);
    --bs-app-header-base-box-shadow: none;
    --bs-app-header-minimize-bg-color: rgba(250, 250, 247, 0.95);
    --bs-app-header-minimize-border-bottom: 2px solid var(--idx4-ink);
    --bs-app-header-minimize-box-shadow: none;
    --bs-app-sidebar-base-bg-color: var(--idx4-paper-2);
    --bs-app-sidebar-light-bg-color: var(--idx4-paper-2);
    --bs-app-sidebar-base-border-end: 2px solid var(--idx4-ink);
    --bs-app-sidebar-light-box-shadow: none;
    --bs-app-sidebar-light-menu-heading-color: var(--idx4-mute);
    --bs-app-sidebar-light-menu-link-bg-color-active: var(--idx4-orange-soft);
    --bs-app-footer-bg-color: var(--idx4-paper-2);
    --bs-app-footer-border-top: 1px solid var(--idx4-line-strong);
    --bs-app-footer-box-shadow: none;

    /* Squared corners everywhere the framework reads radius vars */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-2xl: 0;

    --bs-border-color: var(--idx4-line);
    --bs-gray-200: #e8e7e2;
    --bs-gray-300: #d8d7d0;
}

::selection {
    background: var(--idx4-orange);
    color: #fff;
}

/* ---------- SQUARED COMPONENTS ---------- */

.card,
.btn,
.form-control,
.form-select,
.input-group-text,
.badge,
.alert,
.dropdown-menu,
.menu-sub-dropdown,
.modal-content,
.nav-pills .nav-link,
.pagination .page-link,
.toast,
.popover,
.swal2-popup,
.select2-container--bootstrap5 .select2-selection,
.select2-container--bootstrap5 .select2-dropdown,
.daterangepicker,
.rounded,
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-4 {
    border-radius: 0 !important;
}

/* Keep true circles circular */
.rounded-circle,
.symbol-circle .symbol-label,
.symbol-circle img,
.badge-circle,
.bullet.rounded-circle,
.status-dot,
.merchant-health-ring,
.merchant-health-ring__inner,
.merchant-health-dot,
.form-check-input[type=radio] {
    border-radius: 50% !important;
}

.form-switch .form-check-input {
    border-radius: 3.125rem !important;
}

.bullet {
    border-radius: 0;
}

/* ---------- CHROME: HEADER / SIDEBAR / TOOLBAR ---------- */

.app-header {
    backdrop-filter: blur(16px);
}

/* Match the header's 2px ink rule (Metronic's light-sidebar rule outranks the border-end variable) */
[data-kt-app-layout=light-sidebar] .app-sidebar {
    border-right: 2px solid var(--idx4-ink);
}

.app-sidebar .menu .menu-item .menu-heading,
.app-sidebar .menu .menu-item .menu-section,
.menu-item .menu-section {
    font-family: var(--idx4-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--idx4-mute) !important;
}

.app-sidebar .menu .menu-item .menu-link {
    border-radius: 0;
}

.app-sidebar .menu .menu-item .menu-link.active {
    background: var(--idx4-orange-soft);
    box-shadow: inset 3px 0 0 var(--idx4-orange);
}

.app-sidebar .menu .menu-item .menu-link.active .menu-title,
.app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
    color: var(--idx4-orange-deep) !important;
}

.app-header .menu > .menu-item > .menu-link .menu-title {
    font-family: var(--idx4-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--idx4-steel);
}

.app-header .menu > .menu-item.here > .menu-link,
.app-header .menu > .menu-item.show > .menu-link,
.app-header .menu > .menu-item > .menu-link.active {
    background-color: transparent !important;
    box-shadow: inset 0 -2px 0 var(--idx4-orange);
    border-radius: 0;
}

.app-header .menu > .menu-item.here > .menu-link .menu-title,
.app-header .menu > .menu-item > .menu-link.active .menu-title {
    color: var(--idx4-orange-deep);
}

.app-toolbar {
    background: transparent;
}

/* Fixed toolbar scrolls over page content — needs a frosted-glass
   backdrop so the title/breadcrumb stay readable (matches page loader) */
[data-kt-app-toolbar-fixed="true"] .app-toolbar,
[data-kt-app-toolbar-fixed-mobile="true"] .app-toolbar {
    background: rgba(250, 250, 247, 0.82); /* --idx4-paper @ 82% */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--idx4-line);
}

.page-title .page-heading,
.page-title h1 {
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.breadcrumb,
.breadcrumb-item {
    font-family: var(--idx4-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---------- CARDS → DATA PLATES ---------- */

.card {
    border: 1px solid var(--idx4-line-strong);
    box-shadow: 0 1px 0 rgba(20, 22, 26, 0.05), 0 14px 40px rgba(20, 22, 26, 0.07);
}

.card .card-header {
    border-bottom: 2px solid var(--idx4-ink);
    background: var(--idx4-paper-2);
    min-height: 56px;
}

.card .card-header .card-title,
.card .card-header .card-title h2,
.card .card-header .card-title h3,
.card .card-header .card-label {
    font-family: var(--idx4-mono);
    font-size: 0.86rem !important;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--idx4-steel);
}

.card .card-footer {
    border-top: 1px solid var(--idx4-line);
    background: var(--idx4-paper-2);
}

/* ---------- BUTTONS ---------- */

.btn {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.btn.btn-primary {
    background-color: var(--idx4-orange);
    border: 2px solid var(--idx4-ink);
    color: #fff;
    box-shadow: 3px 3px 0 var(--idx4-ink);
    font-family: var(--idx4-mono);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.15s ease;
}

.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:active:not(.btn-active) {
    background-color: var(--idx4-orange-deep) !important;
    border-color: var(--idx4-ink) !important;
    color: #fff !important;
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--idx4-ink);
}

.btn.btn-light-primary {
    background-color: var(--idx4-orange-soft);
    color: var(--idx4-orange-deep);
    border: 1px solid var(--idx4-orange);
}

.btn.btn-light-primary:hover:not(.btn-active) {
    background-color: var(--idx4-orange) !important;
    color: #fff !important;
}

.btn.btn-secondary,
.btn.btn-light {
    background-color: var(--idx4-plate);
    border: 1px solid var(--idx4-line-strong);
    color: var(--idx4-ink);
}

.btn.btn-secondary:hover:not(.btn-active),
.btn.btn-light:hover:not(.btn-active) {
    background-color: var(--idx4-ink) !important;
    border-color: var(--idx4-ink) !important;
    color: var(--idx4-paper) !important;
}

.btn.btn-light:hover:not(.btn-active) i,
.btn.btn-light:hover:not(.btn-active) .svg-icon,
.btn.btn-secondary:hover:not(.btn-active) i {
    color: var(--idx4-paper) !important;
}

/* ---------- FORMS ---------- */

.form-label,
.fv-row label,
label.required {
    font-family: var(--idx4-mono);
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--idx4-steel) !important;
}

.form-control,
.form-select {
    border: 1px solid var(--idx4-line-strong);
    background-color: var(--idx4-plate);
    color: var(--idx4-ink);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--idx4-orange-deep);
    box-shadow: 0 0 0 0.2rem rgba(255, 121, 0, 0.16);
    background-color: #fff;
}

.form-control.form-control-solid,
.form-select.form-select-solid {
    background-color: var(--idx4-paper-2);
    border: 1px solid var(--idx4-line);
    color: var(--idx4-ink);
}

.form-control.form-control-solid:focus,
.form-select.form-select-solid:focus {
    background-color: #fff;
    border-color: var(--idx4-orange-deep);
}

.form-check-input:checked {
    background-color: var(--idx4-orange);
    border-color: var(--idx4-orange-deep);
}

.select2-container--bootstrap5 .select2-selection {
    border: 1px solid var(--idx4-line-strong) !important;
    background-color: var(--idx4-plate);
}

/* Metronic copies the <select> classes onto .select2-selection,
   so solid selects can match .form-select-solid inputs */
.select2-container--bootstrap5 .select2-selection.form-select-solid {
    background-color: var(--idx4-paper-2);
    border-color: var(--idx4-line) !important;
}

.select2-container--bootstrap5.select2-container--focus .select2-selection.form-select-solid,
.select2-container--bootstrap5.select2-container--open .select2-selection.form-select-solid {
    background-color: #fff;
    border-color: var(--idx4-orange-deep) !important;
}

.select2-container--bootstrap5.select2-container--disabled .select2-selection {
    color: var(--bs-gray-500);
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-300) !important;
}

/* ---------- BADGES ---------- */

.badge {
    font-family: var(--idx4-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.45em 0.75em;
}

.badge-light-primary,
.badge.badge-light-primary {
    color: var(--idx4-orange-deep) !important;
    background-color: var(--idx4-orange-soft);
    border: 1px solid var(--idx4-orange);
}

.badge-primary {
    background-color: var(--idx4-orange);
    color: #fff;
}

.badge-light,
.badge-light-secondary {
    background-color: var(--idx4-paper-2);
    color: var(--idx4-steel);
    border: 1px solid var(--idx4-line-strong);
}

/* ---------- TABLES ---------- */

.table thead th,
.table thead td,
table.dataTable thead th,
table.dataTable thead td {
    font-family: var(--idx4-mono);
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--idx4-mute) !important;
    border-bottom: 2px solid var(--idx4-ink) !important;
}

.table tbody tr {
    border-bottom: 1px solid var(--idx4-line);
}

.table.table-row-dashed tr {
    border-bottom-style: dashed;
    border-bottom-color: var(--idx4-line-strong);
}

.table-hover tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: var(--idx4-orange-row-hover) !important;
}

.table-hover tbody tr:hover > *,
table.dataTable tbody tr:hover > * {
    background-color: var(--idx4-orange-row-hover) !important;
    box-shadow: inset 0 0 0 9999px var(--idx4-orange-row-hover) !important;
}

/* ---------- TABS ---------- */

.nav-line-tabs {
    border-bottom-color: var(--idx4-line-strong);
}

.nav-line-tabs .nav-item .nav-link {
    font-family: var(--idx4-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--idx4-mute);
}

.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item .nav-link:hover:not(.disabled) {
    color: var(--idx4-orange-deep);
    border-bottom: 2px solid var(--idx4-orange) !important;
}

.nav-pills .nav-link.active {
    background-color: var(--idx4-ink);
    color: var(--idx4-orange);
}

/* Pills styled as buttons (btn-active-primary) get an orange active
   background from Metronic — text must stay white, not orange */
.nav-pills .nav-link.btn-active-primary.active {
    background-color: var(--idx4-orange);
    color: #fff;
}

/* Inline page tabs (framework-toolbar-tabs-container) invert the scheme:
   framework.css forces a white pill, so text must be orange, not white */
.framework-toolbar-tabs-container .nav-pills .nav-link.btn-active-primary.active {
    background-color: var(--idx4-plate);
    color: var(--idx4-orange-deep);
}

/* ---------- MENUS / DROPDOWNS / MODALS ---------- */

.dropdown-menu,
.menu-sub-dropdown {
    border: 1px solid var(--idx4-line-strong);
    box-shadow: 4px 4px 0 rgba(20, 22, 26, 0.12);
}

/* ---------- HEADER INLINE SEARCH DROPDOWN ---------- */
/* Override Popper.js fixed positioning so the dropdown anchors
   directly below the search input instead of drifting right. */
#kt_header_search_inline {
    position: relative;
}

#kt_header_search_inline [data-kt-search-element="content"].menu-sub-dropdown {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: calc(100% + 4px) !important;
    transform: none !important;
    min-width: 325px;
}

.modal-content {
    border: 1px solid var(--idx4-line-strong);
    box-shadow: 6px 6px 0 rgba(20, 22, 26, 0.18);
}

.modal-header {
    border-bottom: 2px solid var(--idx4-ink);
    background: var(--idx4-paper-2);
}

.modal-header .modal-title,
.modal-header h2,
.modal-header h3 {
    font-family: var(--idx4-mono);
    font-size: 0.9rem !important;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--idx4-steel);
}

/* ---------- MISC ---------- */

.progress {
    background-color: var(--idx4-paper-2);
    border: 1px solid var(--idx4-line);
}

.progress .progress-bar,
.progress-bar.bg-primary {
    background: repeating-linear-gradient(
        -45deg,
        var(--idx4-orange),
        var(--idx4-orange) 6px,
        var(--idx4-orange-deep) 6px,
        var(--idx4-orange-deep) 12px
    ) !important;
}

.separator {
    border-bottom-color: var(--idx4-line-strong);
}

.text-hover-primary:hover,
.text-hover-primary:hover i {
    color: var(--idx4-orange-deep) !important;
}

.text-primary,
.link-primary {
    color: var(--idx4-orange-deep) !important;
}

.bg-light-primary {
    background-color: var(--idx4-orange-soft) !important;
}

.bg-primary {
    background-color: var(--idx4-orange) !important;
}

.spinner-border.text-primary {
    color: var(--idx4-orange) !important;
}

.page-loader {
    background: rgba(250, 250, 247, 0.08);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    backdrop-filter: blur(24px) saturate(200%);
}

.page-loader-inner {
    background-color: var(--idx4-paper);
    border: 1px solid var(--idx4-line-strong);
    border-radius: 0;
    padding: 20px 28px;
}

.scrolltop {
    background-color: var(--idx4-orange);
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--idx4-ink);
}

.symbol:not(.symbol-circle) .symbol-label,
.symbol:not(.symbol-circle) img {
    border-radius: 0 !important;
}

.symbol .symbol-label {
    background-color: var(--idx4-paper-2);
    border: 1px solid var(--idx4-line);
    color: var(--idx4-steel);
    font-family: var(--idx4-mono);
    font-weight: 700;
}

.timeline .timeline-line {
    border-left-color: var(--idx4-line-strong);
    border-left-style: dashed;
}

.timeline .timeline-icon {
    background: var(--idx4-plate);
    border: 1px solid var(--idx4-line-strong);
}

.tooltip {
    --bs-tooltip-bg: var(--idx4-ink);
    --bs-tooltip-color: var(--idx4-paper);
}

.tooltip .tooltip-inner {
    border-radius: 0;
    background-color: var(--idx4-ink);
    color: var(--idx4-paper);
    font-family: var(--idx4-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}

.alert {
    border-width: 1px;
    border-style: solid;
}

.alert-primary {
    background-color: var(--idx4-orange-soft);
    border-color: var(--idx4-orange);
    color: var(--idx4-orange-deep);
}

.freight-quote-toggle i {
    transition: transform 0.2s ease;
}

.freight-quote-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}