/*
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%; }

/* Opening a modal locks the page with overflow:hidden, which removes the
   vertical scrollbar and makes the viewport ~15px wider. Flex rows then re-wrap
   — e.g. "Generate Policy" jumping up beside "Submit Security Policy" on the
   module cards. Reserving the scrollbar gutter keeps the width constant, so no
   layout shifts when any of the modals open or close. */
html {
    scrollbar-gutter: stable;
}

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;
}

/* Number Of Projects column — total with a hover/focus breakdown popover.
   CSS-only, so it needs no Bootstrap popover initialisation. */
.vm-projects {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}

.vm-projects-total {
    font-weight: 600;
}

.vm-projects-info {
    color: #7a8ba3;
    font-size: 12px;
    line-height: 1;
}

.vm-projects-pop {
    display: none;
    position: absolute;
    /* Sits beside the count, vertically centred on the row, so it extends only
       ~half its height up and down. That keeps it clear of both the header on
       the top rows and the pagination controls on the last rows. */
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    min-width: 150px;
    margin-left: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #d6e0ed;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    text-align: left;
    font-weight: 400;
}

.vm-projects:hover .vm-projects-pop,
.vm-projects:focus .vm-projects-pop,
.vm-projects:focus-within .vm-projects-pop {
    display: block;
}

.vm-pop-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-size: 12px;
    color: #1A2B45;
    padding: 2px 0;
}

.vm-pop-total {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #e1e8f0;
    font-weight: 600;
}

/* The popover always opens upward (see .vm-projects-pop above). table.table
   sets overflow:hidden for its rounded corners, which would crop it on the top
   rows, so this table is allowed to overflow instead. No ancestor clips —
   .card-body only sets padding and .dt-container has no overflow. */
table.table.organization-table {
    overflow: visible;
}

/* ─── 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; }