/*
Theme Name: Intertek Theme
Author: Pooja
Version: 1.0

Text Domain: intertek-theme
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, grid-layout, custom-colors, custom-background, custom-header, flexible-header, custom-menu, custom-logo, editor-style, sticky-post, featured-images, featured-image-header, footer-widgets, full-width-template, threaded-comments, theme-options, wide-blocks, block-styles, blog, portfolio, education, RTL-language-support, post-formats

*/

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
    --brand-navy:    #06213d;
    --brand-yellow:  #ffc700;
    --brand-teal:    #21b6d7;
    --brand-white:   #ffffff;
    --brand-bg:      #f4f6f9;
    --border-radius: 8px;
    --popup-shadow:  0 8px 32px rgba(0,0,0,.28);
    --font-main:     'NeoSansPro', Arial, sans-serif;
}

/* ─── Font ───────────────────────────────────────────────────── */
@font-face {
    font-family: 'NeoSansPro';
    src: url('./assets/fonts/NeoSansProLight.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body, .nav-menu li a {
    font-family: var(--font-main);
}

/* ─── Navigation ─────────────────────────────────────────────── */
.menubarr, .card-header-popup {
    background-color: var(--brand-navy) !important;
}

.menu-wrapper {
    display: flex;
    align-items: center;
    margin: 0 auto;
    height: 60px;
}

.main-navigation { margin-left: 15%; }

.logo img.custom-logo { max-height: 50px; width: auto; }

.nav-menu {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0; padding: 0;
    font-size: 14px;
}

.nav-menu li { position: relative; }

.nav-menu li a {
    text-decoration: none;
    color: var(--brand-yellow);
    font-weight: 500;
    padding: 8px 0;
    transition: color .3s;
    font-size: 16px;
}

.nav-menu li a:hover { color: #ffe999; }

.nav-menu li .sub-menu {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: var(--brand-navy);
    padding: 10px 0;
    min-width: 180px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    z-index: 999;
}

.nav-menu li:hover .sub-menu { display: block; }

.nav-menu li .sub-menu li a {
    color: #ffdd00;
    padding: 5px 15px;
    white-space: nowrap;
}

.nav-menu li .sub-menu li a:hover { color: #fff; }

nav { overflow: visible !important; }

/* ─── Global icon style ──────────────────────────────────────── */
table a, .fas { color: var(--brand-navy) !important; }

.fas {
    display: inline-flex !important;
    align-items: center;
    justify-content: center !important;
    width: 20px; height: 20px;
    background: var(--brand-navy);
    color: #fff !important;
    border-radius: 50%;
    font-size: 10px;
}

.fas:hover { background-color: var(--brand-teal); }

/* ─── Action buttons (Submit/Reset) ──────────────────────────────
   #action-buttons carries Bootstrap's .d-flex (display:flex !important),
   which overrides the inline `display:none` the JS uses to hide the
   Submit/Reset row. This lets the inline hide actually win, while the
   flex layout still applies when the row is shown. */
#action-buttons[style*="display: none"],
#action-buttons[style*="display:none"] {
    display: none !important;
}

/* ─── Overlay / backdrop ─────────────────────────────────────── */
#overlay,
.overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    z-index: 20;
    display: none;
}

.popup1, .popup2, .popup4, .popup5 {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 10;
}

body.popup-open { overflow: hidden; }

/* ─── Popup panels (all fixed-center dialogs) ────────────────── */
#import_popupForm,
#vendorsearch_popupForm,
#usersearch_popupForm,
#oesearch_popupForm,
#search_module_popup,
#create_organization,
#create_project,
#validation_popupForm,
#cancelvector_popupform,
#rerequestvector_popupform,
#form_creation_popup,
#rebranding_popup,
#upload_module_popupForm,
#popup, #popup8, #popup5,
#oe_popupForm, #oe2_popupForm, #oe_edit_form,
#create_user,
#edit_popupForm,
#edit_template_popup {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--brand-white);
    border-radius: 12px;
    width: 62%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 30;
    display: none;
    box-shadow: var(--popup-shadow);
    font-family: var(--font-main);
    animation: popupIn .2s ease;
}

@keyframes popupIn {
    from { opacity: 0; transform: translate(-50%, -48%) scale(.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

#import_popupForm { left: 60%; }

/* ─── Vendor containers (inner popup wrappers) ───────────────── */
.vendor_container,
.vendor_container2,
.oe_container {
    background: var(--brand-white);
    border-radius: 12px;
    overflow: hidden;
}

.vendor_container2 h2,
.oe_container h2,
.vendor_container h2 {
    background: var(--brand-navy);
    color: var(--brand-yellow);
    margin: 0;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .02em;
}

.vendor_container .form-container,
.vendor_container2 .form-container,
.oe_container .form-container {
    padding: 24px 28px 20px;
}

/* ─── Card header (used in create/edit panels) ───────────────── */
.card-header-popup,
.card-header {
    background: var(--brand-navy) !important;
    color: var(--brand-yellow) !important;
    padding: 14px 20px !important;
    font-size: 17px;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
    border-bottom: 3px solid var(--brand-yellow);
}

.card-header-popup h4,
.card-header h4 {
    color: var(--brand-yellow) !important;
    margin: 0;
}

.card-body { padding: 20px 24px; }

.card-org, .card-search {
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.card-table, .collapsible {
    background-color: var(--brand-bg) !important;
}

/* ─── Close buttons ──────────────────────────────────────────── */
.close,
.close-btn,
.close-btn4,
.close-btn8,
.close-btn10 {
    position: absolute;
    top: 12px; right: 16px;
    cursor: pointer;
    font-size: 26px;
    color: var(--brand-yellow);
    line-height: 1;
    transition: color .2s, transform .2s;
    z-index: 2;
}

.close:hover,  .close-btn:hover,
.close-btn4:hover, .close-btn8:hover, .close-btn10:hover,
.close:focus,  .close-btn:focus,
.close-btn4:focus, .close-btn8:focus, .close-btn10:focus {
    color: #fff;
    transform: scale(1.15);
    text-decoration: none;
}

/* ─── Popup content (small modal variants) ───────────────────── */
.popup-content, .popup1-content, .popup2-content,
.popup4-content, .popup5-content, .popup8-content,
.custom-dialog {
    text-align: center;
    padding: 24px 20px;
}

.popup8 {
    max-height: 650px;
    overflow-y: auto;
    width: 650px;
    z-index: 1000;
}

/* ─── Form controls ──────────────────────────────────────────── */
.form-control, .form-select {
    border: 1.5px solid #c8d0db !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    transition: border-color .2s, box-shadow .2s;
    background-color: #fafbfc;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-teal) !important;
    box-shadow: 0 0 0 3px rgba(33,182,215,.18) !important;
    background-color: #fff;
    outline: none;
}

.form-label {
    font-weight: 600;
    font-size: 14px;
    color: #2c3e50;
    margin-bottom: 4px;
}

.input { background-color: #f8f8f8 !important; }

/* ─── Buttons — base ─────────────────────────────────────────── */
.btn,
button,
input[type="button"],
input[type="submit"] {
    font-size: 14px;
    padding: 9px 20px;
    border-radius: 6px !important;
    border: none;
    cursor: pointer;
    font-family: var(--font-main);
    font-weight: 600;
    letter-spacing: .02em;
    transition: background-color .2s, box-shadow .2s, transform .15s;
    line-height: 1.4;
}

.btn:hover, button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* Primary — yellow/navy (brand action) */
.btn-primary, .vendor-btn {
    background-color: var(--brand-yellow) !important;
    color: var(--brand-navy) !important;
    border: 2px solid var(--brand-yellow) !important;
}
.btn-primary:hover { background-color: #e6b300 !important; border-color: #e6b300 !important; }

/* Secondary — grey */
.btn-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
    border: 2px solid #6c757d !important;
}
.btn-secondary:hover { background-color: #5a6268 !important; border-color: #5a6268 !important; }

/* Success — green */
.btn-success {
    background-color: #198754 !important;
    color: #fff !important;
    border: 2px solid #198754 !important;
}
.btn-success:hover { background-color: #146c43 !important; border-color: #146c43 !important; }

/* Danger — red */
.btn-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
    border: 2px solid #dc3545 !important;
}
.btn-danger:hover { background-color: #b02a37 !important; border-color: #b02a37 !important; }

/* Warning — orange */
.btn-warning {
    background-color: #fd7e14 !important;
    color: #fff !important;
    border: 2px solid #fd7e14 !important;
}
.btn-warning:hover { background-color: #e06c0c !important; border-color: #e06c0c !important; }

/* Info — teal */
.btn-info {
    background-color: var(--brand-teal) !important;
    color: #fff !important;
    border: 2px solid var(--brand-teal) !important;
}
.btn-info:hover { background-color: #1a9ab8 !important; border-color: #1a9ab8 !important; }

/* Small variant */
.btn-sm {
    font-size: 13px !important;
    padding: 6px 14px !important;
}

/* ─── Tables ─────────────────────────────────────────────────── */
.table-header,
table.table th,
table.table td {
    border: 1px solid #d0d7e2 !important;
    text-align: center;
    vertical-align: middle;
    padding: 10px 12px !important;
    font-size: 15px;
}

table.table thead th,
table.table thead .table-header {
    background-color: var(--brand-navy) !important;
    color: var(--brand-yellow) !important;
    font-weight: 600;
    font-size: 15px;
    border-color: #0a3060 !important;
    white-space: nowrap;
}

table.table tbody tr:nth-child(even) { background-color: #f0f4f8; }
table.table tbody tr:hover { background-color: #ddeeff; transition: background .15s; }

table.table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #d0d7e2;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

/* DataTable overrides */
table#datatable thead th {
    background-color: var(--brand-navy) !important;
    color: var(--brand-yellow) !important;
    border-color: #0a3060 !important;
}

/* ─── Vendor/OE/Dependency search result tables ──────────────── */
.oe-details-table,
.oe-table-container table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    border: 1px solid #d0d7e2;
    border-radius: 6px;
    overflow: hidden;
}

.oe-details-table th {
    background: var(--brand-navy);
    color: var(--brand-yellow);
    padding: 10px 12px;
    font-weight: 600;
    text-align: center;
}

.oe-details-table td {
    border: 1px solid #d0d7e2;
    padding: 8px 10px;
    text-align: center;
}

.oe-details-table tr:nth-child(even) { background: #f0f4f8; }
.oe-details-table tr:hover { background: #ddeeff; }

/* ─── Vendor management / list cards ────────────────────────── */
.vendor-management-card, .list_organization {
    margin: 20px;
}

.button-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ─── Loader / dots ──────────────────────────────────────────── */
.loading {
    display: flex;
    align-items: center;
    font-size: 15px;
    color: var(--brand-navy);
    gap: 6px;
}

.dots { display: inline-block; margin-left: 8px; }

.dot {
    width: 7px; height: 7px;
    margin: 0 2px;
    background-color: var(--brand-navy);
    border-radius: 50%;
    display: inline-block;
    animation: blink 1.5s infinite;
}
.dot:nth-child(2) { animation-delay: .2s; }
.dot:nth-child(3) { animation-delay: .4s; }

@keyframes blink {
    0%,20% { opacity: .2; }
    50%     { opacity: 1; }
    100%    { opacity: .2; }
}

.loader {
    width: 48px; height: 48px;
    border: 5px solid #ddd;
    border-top: 5px solid var(--brand-teal);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}

@keyframes spin {
    to { transform: translate(-50%,-50%) rotate(360deg); }
}

/* ─── Progress ring ──────────────────────────────────────────── */
.progress-container {
    position: relative;
    width: 65px; height: 65px;
}

.progress-circle { display: none; }

.progress-bar {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: conic-gradient(#3498db var(--progress,0%), #e5e7eb 0);
    position: relative;
    -webkit-mask: radial-gradient(farthest-side, transparent 70%, #000 71%);
    mask: radial-gradient(farthest-side, transparent 70%, #000 71%);
    transition: background .8s ease-in-out;
}

.progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    pointer-events: none;
}

/* ─── Toggle switch ──────────────────────────────────────────── */
.switch {
    position: relative;
    display: inline-block;
    width: 90px; height: 34px;
}
.switch input { display: none; }

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ca2222;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px; width: 26px;
    left: 4px; bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider { background-color: #a0b92a; }
input:checked+.slider:before { transform: translateX(55px); }
input:focus+.slider { box-shadow: 0 0 1px #2196F3; }

.on, .off {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-size: 10px;
    color: white;
    font-family: Verdana, sans-serif;
}
input:checked+.slider .on  { display: block; }
input:checked+.slider .off { display: none; }
.on { display: none; }

/* ─── Error states ───────────────────────────────────────────── */
.errornew { border: 2px solid red !important; }

.error-tooltip {
    display: none;
    position: absolute;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 5px;
    border-radius: 3px;
    font-size: 12px;
}

.errornew:hover+.error-tooltip { display: block; }

.modulenameerror { color: red; font-size: 12px; margin-top: 5px; }

.error-message {
    color: red;
    font-weight: bold;
    font-size: .875rem;
}

/* ─── Info icon ──────────────────────────────────────────────── */
.info-icon {
    display: inline-block;
    width: 20px; height: 20px;
    margin-right: 5px;
}
.info-icon svg { fill: #007bff; width: 100%; height: 100%; }

/* ─── Legend row (icon key) ──────────────────────────────────── */
.server-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    gap: 20px;
}

.server-status-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.icon-legend {
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    background: #f9fbfd;
    border: 1px solid #e2e6ea;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.legend-title { font-weight: bold; margin-right: 10px; }

.second-row { margin-left: 90px; }

/* Base legend icon */
.legend-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-right: 6px;
}

.legend-icon.oe       { background: #0d6efd; }
.legend-icon.generate { background: #6610f2; }
.legend-icon.download { background: #212529; }
.legend-icon.upload   { background: #fd7e14; }
.legend-icon.verify   { background: #198754; }
.legend-icon.certify  { background: #6f42c1; }
.legend-icon.view     { background: #20c997; }
.legend-icon.cancel   { background: #dc3545; }
.legend-icon.rerequest{ background: #0d6efd; }
.legend-icon.checkstatus{ background: #ffc107; }
.legend-icon.edit     { background: #0d6efd; }
.legend-icon.delete   { background: #dc3545; }
.legend-icon.metadata { background: #198754; }
.legend-icon.resetpw  { background: #6f42c1; }

/* Disabled action icons: block clicks until the previous action in the
   Generate -> Download -> Upload -> Verify sequence is complete.
   The `disabled` attribute is not natively honored on <i>, so enforce it here. */
.legend-icon[disabled] {
    pointer-events: none;
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.icon { margin-right: 10px; }

/* ─── Vendor/Address search result rows (algoform vendor search popup) ─── */
.collapsible-container { margin-bottom: 10px; }
.collapsible-container .collapsible {
    width: 100%;
    text-align: left;
    background: #f1f3f5;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px 14px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
}
.collapsible-container .collapsible::after {
    content: '\25BC';
    position: absolute;
    right: 14px;
    font-size: 11px;
    transition: transform 0.2s ease;
}
.collapsible-container .collapsible.active::after {
    transform: rotate(180deg);
}
.collapsible-container .content {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px 0;
}
.vendor-result-item, .address-result-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f3f5;
}
.vendor-result-item:last-child, .address-result-item:last-child { border-bottom: none; }
.vendor-result-item:hover, .address-result-item:hover { background: #f8f9fa; }
.vendor-result-item input, .address-result-item input { margin-top: 4px; flex-shrink: 0; }
.vendor-result-item label, .address-result-item label { margin: 0; cursor: pointer; }
.vendor-result-item .result-name, .address-result-item .result-name { font-weight: 600; }
.vendor-result-item .result-meta, .address-result-item .result-meta { color: #6c757d; font-size: 0.85em; }

/* ─── Accordion / left menu ──────────────────────────────────── */
:root {
    --accordion-plus:  url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'%20fill='%23ffffff'%20stroke='%23ffffff'%20stroke-width='2'/%3E%3Cpath%20d='M12%208v8M8%2012h8'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    --accordion-minus: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'%20fill='%23ffffff'%20stroke='%23ffffff'%20stroke-width='2'/%3E%3Cpath%20d='M8%2012h8'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

.accordion-button::after {
    -webkit-transform: none !important;
    transform: none !important;
    width: 28px; height: 28px;
    margin-left: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    background-image: var(--accordion-plus) !important;
    border: 0;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: var(--accordion-minus) !important;
    background-color: var(--brand-navy) !important;
    border: none !important;
}

.accordion-button:not(.collapsed),
.accordion-button,
.list-group-item {
    background-color: var(--brand-navy) !important;
    color: #fff !important;
    font-size: 15px !important;
}

.accordion-button:focus { outline: none !important; box-shadow: none !important; }
.accordion-button:not(.collapsed) { box-shadow: none !important; }

.accordion, .accordion-item, .list-group {
    background: var(--brand-navy);
    border: none !important;
}

.list-group-item { border: none !important; }

.list-group-item a {
    color: #fff !important;
    text-decoration: none !important;
    margin-left: 6px;
}

.list-group-item a:hover,
.list-group-item a:focus,
.list-group-item a:active {
    text-decoration: none !important;
    color: #fff !important;
}

.list-group-item:first-child,
.list-group-item:last-child { border-radius: 0 !important; }

.list-group-item a.active {
    color: var(--brand-yellow) !important;
    font-weight: 700 !important;
    font-size: 18px;
}

#leftMenuAccordion {
    margin: 20px;
    font-family: var(--font-main) !important;
}

/* Bootstrap rounds the first/last accordion-item's outer corners by default;
   since the item's own navy background is clipped to that curve, the white
   page background behind it peeks through as a small triangular gap at each
   corner. Squaring off the corners keeps it a clean rectangle. */
#leftMenuAccordion,
#leftMenuAccordion .accordion-item,
#leftMenuAccordion .accordion-item:first-of-type,
#leftMenuAccordion .accordion-item:last-of-type,
#leftMenuAccordion .accordion-button,
#leftMenuAccordion .accordion-item:first-of-type .accordion-button,
#leftMenuAccordion .accordion-item:last-of-type .accordion-button,
#leftMenuAccordion .accordion-item:last-of-type .accordion-collapse,
#leftMenuAccordion .accordion-body,
#leftMenuAccordion .list-group {
    border-radius: 0 !important;
}

/* ─── Tab content ────────────────────────────────────────────── */
.tabContent { display: none; }
.tabContent.active, .active-tab { display: block; }

/* ─── Page layout ────────────────────────────────────────────── */
.heading { font-weight: bold !important; font-size: 22px; }

.form-headers { color: #000 !important; }

.labelclass     { font-weight: bold; }
.form-check-label { font-weight: 400; }

.dynamic-back-link {
    font-size: 18px;
    color: var(--brand-yellow);
    font-weight: bold;
}

.add-dependency-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-navy);
    font-weight: 600;
    text-decoration: none;
}

.add-dependency-link:hover {
    color: var(--brand-teal);
    text-decoration: none;
}

.mb-4 { margin-top: 25px !important; }

#tagdescription { width: 80%; }

/* ─── Form panel (algorithm params) ─────────────────────────── */
.form-panel { border-radius: .25rem; overflow: hidden; }

.mode-row {
    border: 1px solid #ccc;
    margin-bottom: 0;
    padding: 1rem 0;
    align-items: flex-start;
}

.mode-row > .col-md-2 {
    border-right: 1px solid #ccc;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    align-items: center;
    min-width: 150px;
}

@media (max-width: 767.98px) {
    .mode-row > .col-md-3,
    .mode-row > .col-md-6,
    .mode-row > .col-md-2 {
        border-left: none; border-right: none;
        border-top: 1px solid #eee;
    }
    .mode-row { padding: .75rem 0; }
}

.mode-row .form-control,
.mode-row .form-check,
.mode-row label { margin: 0; }

.mode-row .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

.mode-row .d-flex.gap-3,
.mode-row .d-flex.gap-2 { gap: .75rem; }

.payload-title { margin-bottom: .5rem; font-weight: 600; }
.payload-row .col-md-6 { margin-bottom: .5rem; }

.form-panel .card-body { font-size: .95rem; color: #222; }
.form-panel-header h5 { font-weight: 600; margin: 0; }

.form-panel-header {
    position: sticky;
    top: 0; z-index: 5;
    border-bottom: 1px solid #eee;
    background-color: #0a2540 !important;
    color: #fff !important;
}

.mode-row input.form-control,
.mode-row select.form-select { width: 100%; }

.card-body nav { margin-bottom: .75rem; }