/* ═══════════════════════════════════════════════════════════
 * Bajaj Downloads — Frontend Styles
 * v2.0.0 — Redesigned layout per mockups
 * ═══════════════════════════════════════════════════════════ */

/* ── CSS Variables ────────────────────────────────────────── */
.bd-wrapper {
    --bd-primary: #0077C8;
    --bd-primary-dark: #005fa3;
    --bd-primary-light: #EBF5FF;
    --bd-sidebar-bg: #F5F7FA;
    --bd-border: #E5E8ED;
    --bd-border-light: #F0F2F5;
    --bd-text: #1A1A1A;
    --bd-text-secondary: #555;
    --bd-text-muted: #999;
    --bd-doc-icon: #C9A96E;
    --bd-doc-bg: #FFF8EE;
    --bd-radius: 12px;
    --bd-radius-sm: 8px;
}

/* ── Tab Panel Title ───────────────────────────────────────── */
.bd-tab-panel-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--bd-text);
    margin: 0 0 0px 0;
    padding-bottom: 12px;
    /* border-bottom: 2px solid var(--bd-primary); */
    line-height: 1.3;
}

.bd-tab-bottom-paragraph {
    margin-top: 24px;
    color: var(--bd-text-secondary);
    font-size: 16px;
    line-height: 1.5;
}

.bd-tab-bottom-paragraph p {
    margin: 0 0 16px;
}

.bd-tab-bottom-paragraph p:last-child {
    margin-bottom: 0;
}

/* ── Reset & Wrapper ──────────────────────────────────────── */
.bd-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 32px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.5;
    color: var(--bd-text);
}

.bd-wrapper *,
.bd-wrapper *::before,
.bd-wrapper *::after {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
 * SIDEBAR
 * ═══════════════════════════════════════════════════════════ */
.bd-sidebar {
    width: 30%;
    min-width: 260px;
    flex-shrink: 0;
    position: sticky;
    top: 30px;
    align-self: flex-start;
}

.bd-sidebar-card {
    background: var(--bd-sidebar-bg);
    border-radius: var(--bd-radius);
    padding: 28px 24px;
}

.bd-sidebar-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bd-text);
    margin: 0 0 24px 0;
    line-height: 1.3;
}

.bd-sidebar-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bd-tab-item {
    padding: 13px 16px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 400;
    color: var(--bd-text-secondary);
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
    margin-bottom: 2px;
    border-radius: 0 6px 6px 0;
}

.bd-tab-item:hover {
    color: var(--bd-text);
    background: rgba(0, 0, 0, 0.03);
}

.bd-tab-item.active {
    border-left-color: var(--bd-primary);
    font-weight: 700;
    color: var(--bd-text);
    background: rgba(0, 119, 200, 0.04);
}

/* ── Mobile Sidebar Dropdown ──────────────────────────────── */
.bd-sidebar-mobile-select {
    display: none;
}

.bd-tab-select {
    width: 100%;
    padding: 14px 52px 14px 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--bd-text);
    background: #fff;
    border: 1.5px solid var(--bd-border);
    border-radius: var(--bd-radius);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='40' viewBox='0 0 26 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 20C2 13.3726 7.37258 8 14 8C20.6274 8 26 13.3726 26 20C26 26.6274 20.6274 32 14 32C7.37258 32 2 26.6274 2 20Z' fill='%23EEF8FF'/%3E%3Cpath d='M10.2197 18.4697C10.5126 18.1768 10.9874 18.1768 11.2803 18.4697L14 21.1893L16.7197 18.4697C17.0126 18.1768 17.4874 18.1768 17.7803 18.4697C18.0732 18.7626 18.0732 19.2374 17.7803 19.5303L14.5303 22.7803C14.2374 23.0732 13.7626 23.0732 13.4697 22.7803L10.2197 19.5303C9.92678 19.2374 9.92678 18.7626 10.2197 18.4697Z' fill='%230086DD'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 26px 40px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.bd-tab-select:focus {
    border-color: var(--bd-primary);
    box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.12);
}

/* ═══════════════════════════════════════════════════════════
 * CONTENT AREA
 * ═══════════════════════════════════════════════════════════ */
.bd-content {
    width: 70%;
    flex-grow: 1;
    min-width: 0;
}

/* Full width content when sidebar is hidden */
.bd-no-sidebar .bd-content {
    width: 100%;
}

/* ── Sub-tabs ─────────────────────────────────────────────── */
.bd-sub-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 2px solid var(--bd-border);
    margin-bottom: 24px;
    padding-bottom: 0;
}

.bd-sub-tab {
    padding: 8px 0 12px;
    cursor: pointer;
    color: var(--bd-primary);
    font-size: 15px;
    font-weight: 600;
    position: relative;
    transition: color 0.2s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    user-select: none;
}

.bd-sub-tab:hover {
    color: var(--bd-primary-dark);
}

.bd-sub-tab.active {
    color: var(--bd-primary);
    border-bottom-color: var(--bd-primary);
}

/* Hide non-active sub-tab content */
.bd-subtab-content {
    display: none;
}

.bd-subtab-content.active {
    display: block;
}

/* ── Inner tabs (nested tabs within sections) ───────────── */
.bd-inner-tabs {
    display: flex;
    gap: 20px;
    border-bottom: 2px solid var(--bd-border);
    margin-bottom: 20px;
    margin-top: 12px;
    padding-bottom: 0;
}

.bd-inner-tab {
    padding: 10px 16px 12px;
    cursor: pointer;
    color: var(--bd-text-secondary);
    font-size: 15px;
    font-weight: 600;
    position: relative;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    user-select: none;
    background: #f8f9fa;
    border-radius: var(--bd-radius-sm) var(--bd-radius-sm) 0 0;
}

.bd-inner-tab:hover {
    color: var(--bd-primary);
    background: #f0f4f8;
}

.bd-inner-tab.active {
    color: var(--bd-primary);
    border-bottom-color: var(--bd-primary);
    background: #fff;
    font-weight: 700;
}

/* Hide non-active inner tab content */
.bd-inner-tab-content {
    display: none;
}

.bd-inner-tab-content.active {
    display: block;
}

.bd-no-inner-tabs {
    padding: 16px;
    background: #fff9e6;
    border: 1px solid #ffe066;
    border-radius: var(--bd-radius-sm);
    color: #856404;
    font-size: 14px;
    text-align: center;
}

/* If no sub-tabs, show all content */
.bd-tab-panel:not(:has(.bd-sub-tabs)) .bd-subtab-content {
    display: block;
}

/* ═══════════════════════════════════════════════════════════
 * ACCORDION
 * ═══════════════════════════════════════════════════════════ */
.bd-accordion {
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s ease;
}

.bd-accordion:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.bd-accordion-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 14px;
    background: #fff;
    transition: background 0.15s ease;
    user-select: none;
}

.bd-accordion-header:hover {
    background: #FAFBFC;
}

.bd-accordion-doc-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.bd-accordion-doc-icon svg {
    width: 20px;
    height: 26px;
}

.bd-accordion-title {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--bd-text);
    line-height: 1.4;
}

.bd-accordion-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.25s ease;
}

.bd-accordion-icon svg {
    width: 18px;
    height: 18px;
}

.bd-accordion.open .bd-icon-plus {
    display: none;
}

.bd-accordion.open .bd-icon-minus {
    display: block !important;
}

.bd-accordion-body {
    padding: 0 20px 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.bd-accordion.open .bd-accordion-body {
    padding: 0 20px 20px;
    max-height: 5000px;
}

/* ── Divider between header & body when open ─── */
.bd-accordion.open .bd-accordion-header {
    border-bottom: 1px solid var(--bd-border-light);
}

/* ═══════════════════════════════════════════════════════════
 * FILTER DROPDOWNS
 * ═══════════════════════════════════════════════════════════ */
.bd-filters {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.bd-filter-group {
    display: flex;
    flex-direction: column;
    min-width: 180px;
    flex: 1;
    max-width: 380px;
}

.bd-filter-label {
    font-size: 13px;
    color: var(--bd-text-muted);
    margin-bottom: 6px;
    font-weight: 500;
}

.bd-filter-select,
.bd-filter-date {
    padding: 12px 40px 12px 16px;
    border: 1px solid #ddd;
    border-radius: var(--bd-radius-sm);
    font-size: 15px;
    font-weight: 500;
    background: #fff;
    min-width: 180px;
    color: var(--bd-text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.bd-filter-select:focus,
.bd-filter-date:focus {
    border-color: var(--bd-primary);
    box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.1);
}

.bd-filter-select:disabled {
    background: #f5f5f5;
    color: var(--bd-text-muted);
    cursor: not-allowed;
}

/* Custom dropdown arrow */
.bd-filter-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* ═══════════════════════════════════════════════════════════
 * EDIT LINKS (admin-only, for users with edit_download_permission)
 * ═══════════════════════════════════════════════════════════ */
a.bd-edit-link,
.bd-edit-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #6c757d;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

a.bd-edit-link:hover,
.bd-edit-link:hover {
    color: #0077C8;
    background: rgba(0, 119, 200, 0.08);
}

.bd-edit-link svg {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
 * DOWNLOAD ROWS
 * ═══════════════════════════════════════════════════════════ */
.bd-downloads-container {
    margin-top: 4px;
}

.bd-download-row {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: var(--bd-primary-light);
    border-radius: var(--bd-radius-sm);
    margin-bottom: 6px;
    gap: 14px;
    transition: background 0.15s ease;
}

.bd-download-row:hover {
    background: #DCE9F5;
}

.bd-download-title {
    font-size: 15px;
    flex-grow: 1;
    color: var(--bd-text);
    line-height: 1.4;
}

.bd-download-btn,
a.bd-download-btn {
    background: var(--bd-primary);
    color: #fff;
    padding: 9px 22px;
    border-radius: 24px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background 0.2s ease;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.bd-download-btn:hover ,
a.bd-download-btn:hover {
    background: var(--bd-primary-dark);
    color: #fff;
    text-decoration: none;
}

.bd-download-btn svg,
a.bd-download-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
 * LOADING & MESSAGES
 * ═══════════════════════════════════════════════════════════ */
.bd-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
    color: #666;
    font-size: 14px;
}

.bd-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #e0e0e0;
    border-top-color: var(--bd-primary);
    border-radius: 50%;
    animation: bd-spin 0.6s linear infinite;
}

@keyframes bd-spin {
    to { transform: rotate(360deg); }
}

.bd-no-results {
    padding: 16px 0;
    color: var(--bd-text-muted);
    font-size: 14px;
    font-style: italic;
}

.bd-no-data {
    padding: 40px 20px;
    text-align: center;
    color: var(--bd-text-muted);
    font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════
 * HISTORICAL NAV
 * ═══════════════════════════════════════════════════════════ */

.bd-hnav-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--bd-text);
    margin: 0 0 28px 0;
    line-height: 1.2;
}

/* ── Form Grid ─── */
.bd-hnav-form {
    margin-bottom: 32px;
}

.bd-hnav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 28px;
}

.bd-hnav-field {
    display: flex;
    flex-direction: column;
}

.bd-hnav-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--bd-text-muted);
    margin-bottom: 8px;
    text-transform: none;
}

.bd-hnav-field label .bd-required {
    color: #E53935;
    font-weight: 600;
}

.bd-hnav-select {
    width: 100%;
    padding: 13px 40px 13px 16px;
    border: 1px solid #ddd;
    border-radius: var(--bd-radius-sm);
    font-size: 15px;
    font-weight: 500;
    color: var(--bd-text);
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.bd-hnav-select:focus {
    border-color: var(--bd-primary);
    box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.1);
}

.bd-hnav-select:disabled {
    background-color: #f5f5f5;
    color: var(--bd-text-muted);
    cursor: not-allowed;
}

/* ── Date Picker Wrapper ─── */
.bd-hnav-date-wrap {
    position: relative;
}

.bd-hnav-date {
    width: 100%;
    padding: 13px 44px 13px 16px;
    border: 1px solid #ddd;
    border-radius: var(--bd-radius-sm);
    font-size: 15px;
    font-weight: 500;
    color: var(--bd-text);
    background: #fff;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bd-hnav-date:focus {
    border-color: var(--bd-primary);
    box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.1);
}

.bd-hnav-date-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* Style the alt-input generated by Flatpickr for hnav dates */
.bd-hnav-date-wrap input.flatpickr-input {
    width: 100%;
    padding: 13px 44px 13px 16px;
    border: 1px solid #ddd;
    border-radius: var(--bd-radius-sm);
    font-size: 15px;
    font-weight: 500;
    color: var(--bd-text);
    background: #fff;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bd-hnav-date-wrap input.flatpickr-input:focus {
    border-color: var(--bd-primary);
    box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.1);
}

/* ── Date Validation Error States ─── */
.bd-hnav-date-wrap.bd-date-error input.flatpickr-input,
.bd-hnav-date-wrap.bd-date-error .bd-hnav-date {
    border-color: #E53935;
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.10);
}

.bd-date-validation-msg {
    display: none;
    font-size: 12px;
    font-weight: 500;
    color: #E53935;
    margin-top: 6px;
    padding-left: 2px;
    line-height: 1.3;
    animation: bdValidationFadeIn 0.25s ease-out;
}

@keyframes bdValidationFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Submit Button ─── */
.bd-hnav-submit {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #0077C8 0%, #00A3FF 100%);
    color: #fff;
    border: none;
    border-radius: var(--bd-radius-sm);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: 0.02em;
}

.bd-hnav-submit:hover {
    opacity: 0.92;
    box-shadow: 0 4px 16px rgba(0, 119, 200, 0.3);
}

.bd-hnav-submit:active {
    opacity: 0.88;
}

.bd-hnav-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Results Area ─── */
.bd-hnav-results {
    margin-top: 32px;
}

/* ── Export Toolbar ─── */
.bd-hnav-results-toolbar {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 20px;
}
.bd-hnav-results-toolbar button {
    color:#fff;
}

.bd-hnav-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--bd-border);
    border-radius: 6px;
    background: #fff;
    color: var(--bd-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bd-hnav-export-btn:hover {
    border-color: var(--bd-primary);
    color: var(--bd-primary);
    background: var(--bd-primary-light);
}

.bd-hnav-export-btn svg {
    width: 18px;
    height: 18px;
}

/* ── Chart Container ─── */
.bd-hnav-chart-container {
    margin-bottom: 28px;
    padding: 16px;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: #fff;
}

.bd-hnav-chart-container canvas {
    width: 100% !important;
}

/* ── Data Table ─── */
.bd-hnav-table-container {
    overflow-x: auto;
    border-radius: var(--bd-radius-sm);
    border: 1px solid var(--bd-border);
}

.bd-hnav-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 900px;
}

.bd-hnav-table thead th {
    background: var(--bd-primary);
    color: #fff;
    font-weight: 600;
    padding: 12px 10px;
    text-align: left;
    white-space: nowrap;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bd-hnav-table thead th:last-child {
    border-right: none;
}

.bd-hnav-table tbody td {
    padding: 10px 10px;
    color: var(--bd-text);
    border-right: 1px solid var(--bd-border-light);
    white-space: nowrap;
    font-size: 13px;
}

.bd-hnav-table tbody td:last-child {
    border-right: none;
}

.bd-hnav-table tbody tr:nth-child(even) {
    background: var(--bd-primary-light);
}

.bd-hnav-table tbody tr:nth-child(odd) {
    background: #fff;
}

.bd-hnav-table tbody tr:hover {
    background: #D6ECFC;
}

/* ═══════════════════════════════════════════════════════════
 * FLATPICKR THEME OVERRIDES
 * ═══════════════════════════════════════════════════════════ */
.flatpickr-calendar {
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid #e0e0e0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.flatpickr-months .flatpickr-month {
    background: var(--bd-primary, #0077C8);
    color: #fff;
    border-radius: 8px 8px 0 0;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: #fff;
    fill: #fff;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #fff;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--bd-primary, #0077C8);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

.flatpickr-current-month input.cur-year {
    color: #fff;
}

/* ── Hide the default year numeric input (replaced by .bd-year-select) ─── */
.flatpickr-current-month .numInputWrapper {
    display: none !important;
}

/* ── Year dropdown select ─── */
.flatpickr-current-month .bd-year-select {
    display: inline-block !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 8px 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 2px 22px 2px 8px;
    cursor: pointer;
    outline: none;
    height: 28px;
    line-height: 24px;
    background: rgb(2 119 200);
    border: 0 none;
}

.flatpickr-current-month .bd-year-select:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.flatpickr-current-month .bd-year-select:focus {
    border-color: rgba(255, 255, 255, 0.6);
}

.flatpickr-current-month .bd-year-select option {
    color: #333;
    background: #fff;
}

/* Ensure the month + year sit side by side */
.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 !important;
    width: 100% !important;
}

span.flatpickr-weekday {
    color: var(--bd-primary, #0077C8);
    font-weight: 600;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--bd-primary, #0077C8);
    border-color: var(--bd-primary, #0077C8);
    color: #fff;
}

.flatpickr-day.today {
    border-color: var(--bd-primary, #0077C8);
}

.flatpickr-day.today:hover {
    background: var(--bd-primary, #0077C8);
    color: #fff;
}

.flatpickr-day:hover {
    background: #e6f2fa;
}

/* ── Flatpickr "Today" & "Clear" action bar ─── */
.bd-flatpickr-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid #e0e0e0;
    background: #f9f9f9;
    border-radius: 0 0 8px 8px;
}

.bd-fp-btn {
    flex: 1;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
color:#fff;
}

.bd-fp-btn-today {
    background: var(--bd-primary, #0077C8);
    color: #fff;
}

.bd-fp-btn-today:hover {
    background: var(--bd-primary-dark, #005fa3);
}

.bd-fp-btn-clear {
    background: #e5e8ed;
    color: #fff;
}

.bd-fp-btn-clear:hover {
    background: #d0d4da;
}

/* Style the alt-input generated by Flatpickr (for date_picker accordions) */
.bd-flatpickr + .flatpickr-input,
input.bd-flatpickr.active + input,
.bd-wrapper input.flatpickr-input {
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: var(--bd-radius-sm, 8px);
    font-size: 15px;
    background: #fff;
    min-width: 200px;
    color: #333;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bd-wrapper input.flatpickr-input:focus {
    border-color: var(--bd-primary, #0077C8);
    box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.1);
}

/* ═══════════════════════════════════════════════════════════
 * RESPONSIVE
 * ═══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .bd-sidebar {
        min-width: 220px;
    }
}

@media (max-width: 768px) {
    .bd-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .bd-sidebar {
        width: 100%;
        min-width: unset;
        position: static;
    }

    .bd-sidebar-card {
        padding: 20px 16px;
    }

    /* Hide desktop tabs, show mobile dropdown */
    .bd-sidebar-tabs {
        display: none;
    }

    .bd-sidebar-mobile-select {
        display: block;
    }

    .bd-content {
        width: 100%;
    }

    .bd-filters {
        flex-direction: column;
        gap: 12px;
    }

    .bd-filter-group {
        min-width: unset;
        max-width: unset;
    }

    .bd-download-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .bd-download-btn,
    a.bd-download-btn {
        align-self: flex-start;
    }

    .bd-sub-tabs {
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bd-sub-tab {
        font-size: 14px;
        white-space: nowrap;
    }

    /* Historical NAV responsive */
    .bd-hnav-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bd-hnav-title {
        font-size: 22px;
    }

    .bd-hnav-results-toolbar {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .bd-accordion-header {
        padding: 14px 16px;
        gap: 10px;
    }

    .bd-accordion-title {
        font-size: 14px;
    }

    .bd-download-row {
        padding: 12px 14px;
    }

    .bd-filter-select,
    .bd-filter-date {
        min-width: unset;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
 * DAILY NAV LIST
 * ═══════════════════════════════════════════════════════════ */
.bd-daily-nav-list {
    width: 100%;
}

.bd-daily-nav-list .bd-accordion {
    margin-bottom: 10px;
}

.bd-daily-nav-list .bd-download-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--bd-primary-light);
    border-radius: var(--bd-radius-sm);
    gap: 16px;
}

.bd-daily-nav-list .bd-download-row:hover {
    background: #DCE9F5;
}

.bd-daily-nav-list .bd-download-title {
    font-size: 15px;
    flex-grow: 1;
    color: var(--bd-text);
    line-height: 1.4;
}

.bd-daily-nav-list .bd-download-btn,
.bd-daily-nav-list a.bd-download-btn {
    background: var(--bd-primary);
    color: #fff;
    padding: 10px 28px;
    border-radius: 24px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background 0.2s ease;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.bd-daily-nav-list .bd-download-btn:hover,
.bd-daily-nav-list a.bd-download-btn:hover {
    background: var(--bd-primary-dark);
    color: #fff;
    text-decoration: none;
}

.bd-daily-nav-list .bd-download-btn svg,
.bd-daily-nav-list a.bd-download-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
 * ETF NAV (standalone shortcode)
 *
 * Reuses .bd-hnav-* classes for selects, date pickers, buttons,
 * chart, table, and export toolbar. Only the grid layout differs:
 *   — Scheme Name spans full width
 *   — Two date pickers sit side-by-side below
 * ═══════════════════════════════════════════════════════════ */

.bd-etfnav-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

.bd-etfnav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 28px;
}

.bd-etfnav-field-full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .bd-etfnav-grid {
        grid-template-columns: 1fr;
    }
}