/* ===== QLVB custom styles ===== */

/* Shrink base typography ~1pt (16px -> 14.67px) across the whole project */
html {
    font-size: 91.6667%;
}

/* Table headers: normal case, not uppercase */
.table thead th {
    text-transform: none;
    font-size: inherit;
}

/* Sidebar / vertical navbar — dark navy */
.navbar-vertical {
    background-color: #0b3a7c;
    border-right-color: #0b3a7c;
}
.navbar-vertical .navbar-heading {
    color: rgba(255, 255, 255, 0.55);
}
.navbar-vertical .navbar-nav .nav-item .nav-link.active {
    background-color: #1e5bb4;
    box-shadow: inset 4px 0 0 #3498db;
}

.html {
    scroll-behavior: smooth;
}

/* Board 1 hero header */
.bg-primary.pt-10.pb-21 {
    min-height: 220px;
}

/* Docs list styles */
.doc-table td {
    vertical-align: middle;
}
.doc-number-cell {
    white-space: nowrap;
}

/* Status badges */
.badge.bg-soft-success {
    background-color: #d4edda;
    color: #155724;
}
.badge.bg-soft-danger {
    background-color: #f8d7da;
    color: #721c24;
}
.badge.bg-soft-warning {
    background-color: #fff3cd;
    color: #856404;
}
.badge.bg-soft-secondary {
    background-color: #e2e3e5;
    color: #383d41;
}
.badge.bg-soft-info {
    background-color: #d1ecf1;
    color: #0c5460;
}

/* HTMX indicators */
.htmx-indicator {
    opacity: 0;
    transition: opacity 0.25s ease-in;
}
.htmx-request .htmx-indicator {
    opacity: 1;
}
.htmx-request.htmx-indicator {
    opacity: 1;
}
#results-loading {
    position: sticky;
    top: 0;
}

/* Legal map */
#legal-map {
    width: 100%;
    height: 640px;
}
.map-legend {
    font-size: 0.8rem;
}
.map-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 1rem;
}
.map-legend .legend-line {
    display: inline-block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
}
.legend-line {
    display: inline-block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
}
.legend-arrow {
    --c: #92400e;
    position: relative;
    display: inline-block;
    width: 22px;
    height: 3px;
    background: var(--c);
    border-radius: 2px;
    flex-shrink: 0;
}
.legend-arrow::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid var(--c);
}

/* Document tree (html render, thay Cytoscape) — organogram: gốc trên, railway, 8 nhánh ngang cấp nhau */
.doc-tree {
    background: #fff;
    font-size: 0.9rem;
    min-width: 0;
    overflow-x: auto;
}
.doc-tree-root-badge {
    display: inline-block;
    border: 2px solid var(--bs-primary);
    border-radius: 0.5rem;
    padding: 0.35rem 1rem;
    background-color: #e3f3fe;
}
.doc-tree-root-badge strong {
    color: var(--bs-primary);
    font-size: 0.95rem;
}
.doc-tree-stem {
    width: 3px;
    height: 18px;
    margin: 0 auto;
    background: #cbd5e1;
}
.doc-tree-rail {
    height: 0;
    border-top: 3px solid #cbd5e1;
    margin: 0 6.25%;
    min-width: 630px;
}
.doc-tree-branch {
    text-align: center;
    min-width: 84px;
}
.doc-tree-arrow,
.doc-tree-doc-arrow {
    --c: #92400e;
    position: relative;
    width: 3px;
    background: #cbd5e1;
    margin-left: auto;
    margin-right: auto;
}
.doc-tree-arrow {
    height: 16px;
    margin-top: 0;
    margin-bottom: 8px;
}
.doc-tree-doc-arrow {
    height: 12px;
    margin-top: 0;
    margin-bottom: 8px;
}
.doc-tree-arrow::after,
.doc-tree-doc-arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid var(--c);
}
.doc-tree-branch-box {
    --bc: #92400e;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.15rem;
    border-radius: 0.5rem;
    border: 2px solid var(--bc);
    background-color: #f8fafc;
    background-color: color-mix(in srgb, var(--bc) 12%, #fff);
}
.doc-tree-branch-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bc);
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.doc-tree-branch-count {
    font-size: 0.7rem;
    color: var(--bc);
    margin-top: 2px;
}
.doc-tree-docs {
    margin: 0;
    padding: 0;
    list-style: none;
}
.doc-tree-doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2px;
}
.doc-tree-doc-box {
    --bc: #92400e;
    width: 100%;
    padding: 0.25rem 0.15rem;
    border-radius: 0.35rem;
    background-color: #f8fafc;
    background-color: color-mix(in srgb, var(--bc) 12%, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-tree-doc-box a {
    color: var(--bc);
    font-size: 0.62rem;
    font-weight: 600;
}

/* Section tree */
.section-tree .section-node {
    border-left: 2px solid #dee2e6;
    padding-left: 1rem;
    margin-left: 0.25rem;
}
.section-tree .section-node .section-heading {
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
}
.section-tree .section-node .section-heading:hover {
    color: var(--bs-primary);
}
.section-content {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: 1.25rem;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: #e2e3e5;
}
.timeline .timeline-item {
    position: relative;
    padding-bottom: 1.25rem;
}
.timeline .timeline-item::before {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bs-primary);
}

/* ECharts containers */
.chart-container {
    width: 100%;
    height: 320px;
}

/* Freeze top stats of internal tab */
.impact-kpis .kpi-card {
    border-left: 3px solid var(--bs-primary);
}

/* Sidebar width is px (max-width:250px) while #page-content offset is rem — with the
   reduced root font-size the rem offset shrank below 250px, so the top header slid over
   the sidebar brand. Pin the offset in px to keep them aligned. */
#page-content {
    margin-left: 250px;
}
#db-wrapper.toggled #page-content {
    margin-left: 0;
}
@media (max-width: 576px) {
    #page-content {
        margin-left: 0;
    }
    #db-wrapper.toggled #page-content {
        margin-left: 250px;
    }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    #page-content {
        margin-left: 0;
    }
    #db-wrapper.toggled #page-content {
        margin-left: 250px;
    }
}

/* ===== Select2 — match Bootstrap 5 form-select look ===== */
.select2-container .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    border-color: #ced4da;
    border-radius: 0.375rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + 0.75rem);
    padding-left: 0.75rem;
    color: #212529;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem);
}
.select2-container .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    outline: 0;
}

/* ===== DataTables — CoolAdmin-like ===== */
.dt-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.dt-container > .dt-length {
    align-self: flex-end;
}
.dt-container .dt-length label,
.dt-container .dt-info {
    color: #6c757d;
    font-size: 0.85rem;
    margin-bottom: 0;
}
.dt-container .dt-length .form-select {
    width: 70px;
    display: inline-block;
}
.dt-container .dt-paging nav {
    display: flex;
    justify-content: flex-end;
}
.dt-container .page-link {
    min-width: 34px;
    text-align: center;
    color: #1e293b;
    border-radius: 4px;
    margin: 0 2px;
}
.dt-container .page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
    font-weight: 600;
    color: #fff;
}
.dt-container .dataTable thead th {
    font-weight: 600;
    color: #1e293b;
    border-bottom: 2px solid #dee2e6;
}
.dt-container .dataTable thead th .dt-column-header {
    font-weight: inherit;
}

/* Section content + JSON diff blocks */
.content-box {
    white-space: pre-wrap;
    word-break: break-word;
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid #eee;
    font-size: 0.875rem;
}
.json-block {
    background: #272822;
    color: #f8f8f2;
    padding: 0.625rem 0.75rem;
    border-radius: 0.375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow-y: auto;
}
.json-block pre {
    margin: 0;
}

@media (max-width: 991.98px) {
    #legal-map {
        height: 480px;
    }
}