/*
 * BIGA shared theme.
 * Loaded last on every page, so it only restyles (colors, type, spacing, radius)
 * on top of style.css / style_docum.css / style_2traits.css. No layout logic or
 * behavior lives here. Selectors are prefixed with body#page-top or #mainNav to
 * win over the older stylesheets without !important where possible.
 */

:root {
    --biga-purple: #2a6fb0;
    --biga-purple-dark: #1d4f80;
    --biga-purple-soft: #e9f1fa;
    --biga-purple-line: #c6d9ee;
    --biga-teal: #0A7D91;
    --biga-text: #1f2430;
    --biga-muted: #475060;
    --biga-border: #d8e0e8;
    --biga-surface: #f1f5f9;
    --biga-navy: #1d3557;
    --biga-green: #2e8b57;
    --biga-amber: #d98e04;
    --biga-radius: 10px;
    --biga-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
html body#page-top {
    background: #fff !important;
    color: var(--biga-text);
    font-family: var(--biga-font);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body#page-top .content-wrapper,
body#page-top .container-fluid,
body#page-top .card,
body#page-top .panel,
body#page-top table,
body#page-top .form-control,
body#page-top .btn,
body#page-top p,
body#page-top li,
body#page-top td,
body#page-top th,
body#page-top label {
    font-family: var(--biga-font);
}
body#page-top .content-wrapper { background: #fff; padding: 24px 28px 48px; }

body#page-top a { color: var(--biga-teal); }
body#page-top a:hover, body#page-top a:focus { color: var(--biga-purple-dark); }

body#page-top h1, body#page-top h2, body#page-top h3, body#page-top h4 {
    color: var(--biga-text);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
/* Only top/bottom spacing, and never on .anchor headings (Quick Start / Documentation),
   whose own margins offset them past the side menu and fixed top bar. */
body#page-top h1:not(.anchor), body#page-top h2:not(.anchor) { margin-top: 8px; margin-bottom: 18px; }
body#page-top h3:not(.anchor) { margin-top: 28px; margin-bottom: 14px; }
body#page-top h4:not(.anchor), body#page-top h5:not(.anchor) { margin-top: 22px; margin-bottom: 10px; }
body#page-top h5, body#page-top h6 { font-weight: 600; }

body#page-top hr { border-color: var(--biga-border); margin: 28px 0; }
body#page-top code { color: #a8326b; background: #faf2f6; border-radius: 4px; padding: 1px 5px; }

/* ---------- Top navigation ---------- */
#mainNav.bg-dark { background-color: #24232b !important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
#mainNav .navbar-nav .nav-top > .nav-link,
#mainNav .navbar-nav .nav-top > .nav-link .nav-link-text {
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--biga-font);
    font-size: 14px;
    transition: color 0.15s ease;
}
#mainNav .navbar-nav .nav-top > .nav-link:hover,
#mainNav .navbar-nav .nav-top > .nav-link:hover .nav-link-text,
#mainNav .navbar-nav .nav-top.active > .nav-link,
#mainNav .navbar-nav .nav-top.active > .nav-link .nav-link-text {
    color: #fff;
}

/* Top-bar links keep their light-on-dark color even where a page lacks .nav-top */
#mainNav .navbar-nav:not(.navbar-sidenav) > .nav-item > .nav-link { color: rgba(255, 255, 255, 0.72); }
#mainNav .navbar-nav:not(.navbar-sidenav) > .nav-item > .nav-link:hover,
#mainNav .navbar-nav:not(.navbar-sidenav) > .nav-item.active > .nav-link { color: #fff; }

/* Never let the theme font replace the icon font */
body#page-top .fa, #mainNav .fa { font-family: FontAwesome !important; }

/* ---------- Left side menu (tutorials, job pages) ---------- */
@media (min-width: 768px) {
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav {
        background: var(--biga-surface);
        border-right: 1px solid var(--biga-border);
        padding-top: 8px;
    }
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
        color: var(--biga-muted);
        font-family: var(--biga-font);
        font-size: 14px;
        border-left: 3px solid transparent;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link:hover {
        color: var(--biga-purple-dark);
        background: var(--biga-purple-soft);
    }
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a {
        color: var(--biga-purple-dark) !important;
        background-color: var(--biga-purple-soft);
        border-left-color: var(--biga-purple);
        font-weight: 500;
    }
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav .sidenav-second-level,
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav .sidenav-third-level {
        background: #fff;
    }
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a,
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a {
        color: var(--biga-muted);
        font-family: var(--biga-font);
    }
    #mainNav.navbar-dark .navbar-collapse .sidenav-toggler { background-color: var(--biga-surface); }
}

/* ---------- Cards & panels ---------- */
body#page-top .card,
body#page-top .panel {
    border: 1px solid var(--biga-border);
    border-radius: var(--biga-radius);
    box-shadow: 0 1px 2px rgba(20, 30, 40, 0.04);
    overflow: hidden;
}
body#page-top .panel { margin-bottom: 20px; }
body#page-top .panel .card { border: 0; box-shadow: none; border-radius: 0; margin-bottom: 0 !important; }
body#page-top .card-header,
body#page-top .panel-heading,
body#page-top .panel-default > .panel-heading {
    background: var(--biga-surface);
    border-bottom: 1px solid var(--biga-border);
    color: var(--biga-text);
    font-weight: 600;
}
body#page-top .card-header { padding: 12px 18px; }
body#page-top .card-body { padding: 18px 20px; }
body#page-top .panel-title,
body#page-top .panel-title > a {
    color: var(--biga-text);
    font-family: var(--biga-font);
    font-weight: 600;
}
body#page-top .panel-title > a { padding: 12px 16px; }
body#page-top .panel-danger > .panel-heading,
body#page-top .panel-required {
    background: var(--biga-purple-soft);
    border-color: var(--biga-purple-line);
}
body#page-top .panel-danger { border-color: var(--biga-purple-line); }
body#page-top .panel-danger > .panel-heading .panel-title,
body#page-top .panel-danger > .panel-heading .panel-title > a { color: var(--biga-purple-dark); }

/* ---------- Tables ---------- */
body#page-top .table { font-size: 14px; color: var(--biga-text); }
body#page-top .table > thead > tr > th,
body#page-top .table thead th,
body#page-top table.dataTable thead th {
    background: var(--biga-surface);
    color: var(--biga-text);
    font-weight: 600;
    border-bottom: 1px solid var(--biga-border);
    vertical-align: middle;
}
body#page-top .table > tbody > tr > td,
body#page-top .table > tbody > tr > th,
body#page-top .table td,
body#page-top .table th {
    border-color: var(--biga-border);
    padding: 10px 12px;
    vertical-align: middle;
}
body#page-top .table-bordered,
body#page-top .table-bordered > tbody > tr > td,
body#page-top .table-bordered > thead > tr > th { border-color: var(--biga-border); }
body#page-top .table-striped > tbody > tr:nth-of-type(odd) { background-color: #f7fafc; }
/* Row hover only on data/result tables, not on form layout tables (e.g. Build input files) */
body#page-top table.dataTable > tbody > tr:hover,
body#page-top .table-hover > tbody > tr:hover { background-color: #eef5fc; }

/* DataTables controls */
body#page-top .dataTables_wrapper .dataTables_filter input,
body#page-top .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--biga-border);
    border-radius: 8px;
    padding: 4px 10px;
    height: auto;
}
body#page-top .pagination > li > a,
body#page-top .page-link {
    color: var(--biga-purple-dark);
    border-color: var(--biga-border);
}
body#page-top .pagination > .active > a,
body#page-top .pagination > .active > a:hover,
body#page-top .page-item.active .page-link {
    background-color: var(--biga-purple);
    border-color: var(--biga-purple);
    color: #fff;
}

/* ---------- Forms & buttons ---------- */
body#page-top .form-control,
body#page-top .form-select,
body#page-top select,
body#page-top input[type="text"],
body#page-top input[type="email"],
body#page-top input[type="password"],
body#page-top input[type="number"],
body#page-top textarea {
    border: 1px solid #d5dadf;
    border-radius: 8px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body#page-top .form-control { min-height: 38px; font-size: 14px; }
body#page-top .form-control:focus,
body#page-top select:focus,
body#page-top input:focus,
body#page-top textarea:focus {
    border-color: var(--biga-purple);
    box-shadow: 0 0 0 3px rgba(42, 111, 176, 0.2);
    outline: none;
}
body#page-top input[type="radio"],
body#page-top input[type="checkbox"] { accent-color: var(--biga-purple); }

body#page-top .btn { border-radius: 8px; font-weight: 500; transition: background-color 0.15s ease, border-color 0.15s ease; }
body#page-top .btn-primary {
    background-color: var(--biga-purple);
    border-color: var(--biga-purple);
    color: #fff;
}
body#page-top .btn-primary:hover,
body#page-top .btn-primary:focus,
body#page-top .btn-primary:active {
    background-color: var(--biga-purple-dark);
    border-color: var(--biga-purple-dark);
    color: #fff;
}
body#page-top .btn-default,
body#page-top .btn-secondary {
    border-color: #d5dadf;
}

/* ---------- Alerts ---------- */

/* ---------- FAQ accordion ---------- */
body#page-top .faq-section { margin-bottom: 10px; }
body#page-top .faq-header {
    background-color: var(--biga-surface);
    border: 1px solid var(--biga-border);
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 600;
}
body#page-top .faq-content { padding: 6px 16px; }
body#page-top .toggle-btn {
    background-color: var(--biga-purple);
    border-radius: 6px;
    min-width: 30px;
}
body#page-top .toggle-btn:hover { background-color: var(--biga-purple-dark); }

/* ---------- Misc ---------- */
body#page-top .public,
body#page-top .pub_data { padding-top: 20px; padding-bottom: 32px; }
body#page-top .scroll-to-top { border-radius: 50%; background: rgba(42, 111, 176, 0.8); }
body#page-top .scroll-to-top:hover { background: var(--biga-purple-dark); }
body#page-top img { max-width: 100%; height: auto; }
#mainNav .navbar-brand img { max-width: none; }
body#page-top .modal-content { border-radius: var(--biga-radius); border: 0; }

/* ---------- Phones & small tablets ---------- */
@media (max-width: 991px) {
    #mainNav .navbar-collapse { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    #mainNav .navbar-collapse::-webkit-scrollbar { display: none; }
    #mainNav .nav-top .nav-link { white-space: nowrap; }
}
@media (max-width: 767px) {
    html body#page-top { font-size: 15px; }
    body#page-top .content-wrapper { padding: 16px 16px 40px; }
    body#page-top .public,
    body#page-top .pub_data { padding-left: 16px; padding-right: 16px; }
    body#page-top .card[style*="width"],
    body#page-top form[style*="width"] { width: 100% !important; max-width: 100%; }
    body#page-top .table { font-size: 13px; }
    body#page-top .card-body { padding: 14px; }
    body#page-top .card { min-width: 0 !important; }
    body#page-top .card[style*="margin-left"] { margin-left: 0 !important; margin-right: 0 !important; }
    body#page-top .card-body > div[style*="margin-left:auto"],
    body#page-top .card > div[style*="margin-left:auto"] { margin-left: 0 !important; margin-right: 0 !important; }
    body#page-top h1[style*="margin-left"], body#page-top h2[style*="margin-left"],
    body#page-top h3[style*="margin-left"], body#page-top h4[style*="margin-left"] { margin-left: 0 !important; }
    /* Side-menu items join the scrollable top bar on phones */
    #mainNav .navbar-collapse { overflow-x: auto !important; overflow-y: hidden; }
    #mainNav .navbar-nav { flex-wrap: nowrap; }
    #mainNav .navbar-sidenav > .nav-item > .nav-link { white-space: nowrap; color: rgba(255, 255, 255, 0.72) !important; padding: 8px 10px; }
    #mainNav .navbar-sidenav > .nav-item.active > .nav-link { color: #fff !important; }
    body#page-top .table-responsive-sm,
    body#page-top .dataTables_wrapper { overflow-x: auto; }
}

/* ---------- Color accents (other pages; homepage keeps its own purple) ---------- */
body#page-top:not(.home-page) h1,
body#page-top:not(.home-page) h2,
body#page-top:not(.home-page) h3 { color: var(--biga-navy); }
body#page-top:not(.home-page) h3 b, body#page-top:not(.home-page) h2 b { color: inherit; }
body#page-top:not(.home-page) .card { border-top: 3px solid var(--biga-purple); }
body#page-top:not(.home-page) .card-header,
body#page-top:not(.home-page) .panel-heading {
    background: linear-gradient(180deg, #f3f8fd 0%, #eaf2fa 100%);
    color: var(--biga-navy);
}
body#page-top:not(.home-page) .table > thead > tr > th,
body#page-top:not(.home-page) .table thead th,
body#page-top:not(.home-page) table.dataTable thead th {
    background: #e9f1fa;
    color: var(--biga-navy);
    border-bottom: 2px solid var(--biga-purple-line);
}
body#page-top:not(.home-page) .faq-header { background: #f3f8fd; border-left: 4px solid var(--biga-purple); }
body#page-top:not(.home-page) .toggle-btn { background-color: #0f8b8d; }
body#page-top:not(.home-page) .toggle-btn:hover { background-color: #0b6d6f; }
body#page-top .btn-success { background-color: var(--biga-green); border-color: var(--biga-green); }
body#page-top .btn-warning { background-color: var(--biga-amber); border-color: var(--biga-amber); color: #fff; }
body#page-top .btn-info { background-color: #0f8b8d; border-color: #0f8b8d; color: #fff; }

/* ---------- Alerts / message boxes ----------
   Solid colored bar on the left, a clear (not washed-out) tint, and dark text
   so every message type is easy to read. Same five colors as before. */
body#page-top .alert {
    --a-bar: #6c757d; --a-bg: #eef0f2; --a-line: #d3d7db; --a-text: #212529;
    background: var(--a-bg) !important;
    border: 1px solid var(--a-line) !important;
    border-left: 5px solid var(--a-bar) !important;
    border-radius: 6px;
    color: var(--a-text) !important;
    font-weight: 500;
    line-height: 1.5;
}
body#page-top .alert-info    { --a-bar: #0e7c95; --a-bg: #e0f1f6; --a-line: #a9d6e3; --a-text: #0a4352; }
body#page-top .alert-primary { --a-bar: #2a6fb0; --a-bg: #e2ecf8; --a-line: #b3cbeb; --a-text: #15365e; }
body#page-top .alert-warning { --a-bar: #d18f00; --a-bg: #fcefd2; --a-line: #eecf88; --a-text: #5c3d00; }
body#page-top .alert-success { --a-bar: #2e8b57; --a-bg: #e0f2e7; --a-line: #a9d7b9; --a-text: #144a2a; }
body#page-top .alert-danger  { --a-bar: #c0392b; --a-bg: #fae2df; --a-line: #eab3ad; --a-text: #6e1a13; }
body#page-top .alert-dark    { --a-bar: #3d4450; --a-bg: #e7e9ec; --a-line: #c7ccd2; --a-text: #1f2430; }
body#page-top .alert a,
body#page-top .alert .alert-link { color: var(--a-text) !important; text-decoration: underline; font-weight: 600; }
body#page-top .alert .fa { color: var(--a-bar); }
body#page-top .alert b, body#page-top .alert strong { color: var(--a-text); }

/* ---------- Detail fixes: collapsible panels and side menu ---------- */
/* Panel/card titles sit flush in their header bar (no stray gap above) */
body#page-top .panel-title,
body#page-top .card-title,
body#page-top .modal-title { margin: 0 !important; }
body#page-top .panel-heading { padding: 0; }
body#page-top .panel-title > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    font-size: 15px;
    text-decoration: none;
}
body#page-top .panel-title > a:hover { background: rgba(42, 111, 176, 0.06); }
body#page-top .panel-title .trigger:before,
body#page-top .panel-title > a.trigger:before { color: var(--biga-purple); font-size: 15px; }
body#page-top .panel { box-shadow: 0 1px 2px rgba(20, 30, 40, 0.05); }
body#page-top .panel-collapse > .panel-body { padding: 16px; border-top: 1px solid var(--biga-border); }
body#page-top .panel-collapse > .panel-body .card { border: 0 !important; box-shadow: none; }

/* Side menu: let long labels wrap neatly instead of overflowing a fixed 48px row */
@media (min-width: 768px) {
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item { height: auto !important; }
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
        height: auto !important;
        min-height: 46px;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 10px 8px 10px 12px !important;
        font-size: 13.5px;
        line-height: 1.35;
        white-space: normal;
    }
    /* Ignore stray spaces/  between icon and label so every label lines up */
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link { font-size: 0 !important; gap: 0 !important; }
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link > .nav-link-text { font-size: 13.5px; }
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link > .fa {
        flex: 0 0 18px;
        width: 18px;
        margin-right: 9px;
        font-size: 14px;
        text-align: center;
    }
}

/* ---------- Method panels whose title link also has .alert (Pairwise page) ----------
   Drop the message-box look (bar, tint, 20px bottom gap) and render a clean card header. */
body#page-top .panel-title > a.alert {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--biga-navy) !important;
    font-weight: 600;
    text-decoration: none;
    padding: 14px 18px !important;
}
body#page-top .panel-title > a.alert:hover { background: rgba(42, 111, 176, 0.06) !important; }
body#page-top .panel-title > a.alert .fa,
body#page-top .panel-title > a.alert.trigger:before { color: #0e7c95; }
body#page-top .panel:has(.panel-title > a.alert) {
    border: 1px solid var(--biga-border);
    border-left: 4px solid #0e7c95;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 14px;
}
body#page-top .panel:has(.panel-title > a.alert) > .panel-heading {
    background: #f4f9fb;
    border-bottom: 0;
}
body#page-top .panel:has(.panel-title > a.alert) > .panel-collapse.in > .panel-body,
body#page-top .panel:has(.panel-title > a.alert) > .panel-collapse.show > .panel-body { border-top: 1px solid var(--biga-border); }

/* ---------- Side menu in neutral gray (no blue tint) ---------- */
@media (min-width: 768px) {
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav,
    #mainNav.navbar-dark .navbar-collapse .sidenav-toggler { background: #f3f4f6 !important; }
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav { border-right: 1px solid #e1e3e6; }
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link:hover { background: #e8eaed; color: #1f2430; }
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav li.active a { background-color: #e4e6e9; color: #1f2430 !important; }
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav .sidenav-second-level,
    #mainNav.navbar-dark .navbar-collapse .navbar-sidenav .sidenav-third-level { background: #fafafb; }
}

/* ---------- Required section ("Build input files") in light lavender, black title ---------- */
body#page-top .panel-danger {
    border: 1px solid #e1e3e6 !important;
    border-radius: 10px;
}
body#page-top .panel-danger > .panel-heading,
body#page-top .panel-danger > .panel-heading .panel-required {
    background: #f3f4f6 !important;
    border-color: #e1e3e6 !important;
}
body#page-top .panel-danger > .panel-heading .panel-title,
body#page-top .panel-danger > .panel-heading .panel-title > a { color: #000 !important; }
body#page-top .panel-danger > .card { border-top: 3px solid #d9c8f0 !important; }
body#page-top .panel-danger .table-bordered,
body#page-top .panel-danger .table-bordered > tbody > tr > td,
body#page-top .panel-danger .table td { border-color: #e8eaed !important; }

/* ---------- Cleaner card / panel headers (Nov 2026) ----------
   Thin even border instead of a thick top strip that bends at the rounded
   corners; a short colored accent bar marks the title; wide tables scroll
   inside their card instead of being cut off. */
body#page-top:not(.home-page) .card { border-top: 1px solid var(--biga-border); }
body#page-top:not(.home-page) .card-header {
    position: relative;
    background: #f5f8fc;
    border-bottom: 1px solid var(--biga-border);
    color: var(--biga-navy);
    font-size: 15px;
    font-weight: 600;
    padding: 13px 18px 13px 22px;
}
body#page-top:not(.home-page) .card-header::before {
    content: "";
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: var(--biga-purple);
}
body#page-top:not(.home-page) .card-header > .fa:empty { display: none; }
body#page-top:not(.home-page) .card-body { overflow-x: auto; }

/* "Build input files" / "Parameter Settings": lavender header, black title, single thin line */
body#page-top .panel-danger { overflow: hidden; }
body#page-top .panel-danger > .panel-heading {
    position: relative;
    border-bottom: 1px solid #e1e3e6 !important;
}
body#page-top .panel-danger > .panel-heading::before {
    content: "";
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: #8e6cc9;
}
body#page-top .panel-danger > .panel-heading .panel-title > a { padding: 13px 18px 13px 22px; font-size: 15px; }
body#page-top .panel-danger > .card { border-top: 0 !important; }
body#page-top .panel-danger > .card > .card-body { padding-top: 16px; }