/* ========================================================================== statements.css — Statement Page Specific Styles Loaded exclusively on financial statement pages via bq_enqueue_statement_assets() Enqueued in via wp_enqueue_style — never inlined mid-body. ========================================================================== */ /* ------------------------------------------------------------------ Sub Navigation ------------------------------------------------------------------ */ .bq-sub-navigation { width: 100%; border-bottom: 1px solid #dee2e6; margin-bottom: 20px; } .bq-sub-navigation ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0; } .bq-sub-navigation li a { display: block; padding: 10px 16px; margin-bottom: -1px; text-decoration: none; color: #555; font-weight: 500; border-bottom: 3px solid transparent; transition: all 0.2s ease; } .bq-sub-navigation li:not(.active) a:hover { color: #0073aa; } .bq-sub-navigation li.active a { color: #0073aa; border-bottom-color: #0073aa; font-weight: 600; } /* ------------------------------------------------------------------ Historic Data Wrapper — Statement Override Adds min-height and relative positioning for the loader overlay on top of the base overflow-x: auto rule in style.css ------------------------------------------------------------------ */ .bq-historic-data-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; min-height: 600px; position: relative; border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; } /* ------------------------------------------------------------------ Statement Controls ------------------------------------------------------------------ */ .bq-statement-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; } .bq-statement-controls form { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; flex-grow: 0; margin-right: auto; } .bq-statement-controls .bq-control-container, .bq-statement-controls .control-group-right { display: flex; align-items: center; gap: 10px; } .control-group { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .control-group-right { display: flex; align-items: center; gap: 15px; margin-left: auto; flex-shrink: 0; justify-content: flex-end; } /* Consistent button height for all right-side controls */ .control-group-right .bq-icon-btn, .control-group-right .btn-download-table, .control-group-right .bq-value-toggle { height: 38px; } .control-group label { font-weight: 500; font-size: 14px; color: #333; } .control-group select { padding: 4px 10px; font-size: 14px; border: 1px solid #ddd; border-radius: 6px; background-color: #fff; height: 35px; } .control-group select:disabled { background-color: #f0f2f5; cursor: not-allowed; opacity: 0.7; } /* ------------------------------------------------------------------ Value Toggle ------------------------------------------------------------------ */ .bq-value-toggle { display: flex; background-color: #e9ecef; border-radius: 4px; padding: 2px; border: 1px solid #ddd; } .bq-value-toggle .toggle-btn { height: 100%; display: flex; align-items: center; border: none; background-color: transparent; padding: 3px 15px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 700; color: #555; transition: all 0.2s ease-in-out; z-index: 2; } .bq-value-toggle .toggle-btn.active { background-color: #fff; color: #0073aa; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* ------------------------------------------------------------------ Icon Button ------------------------------------------------------------------ */ .bq-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #ddd; background-color: #e9ecef; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease; padding: 0; } .bq-icon-btn:hover { background-color: #d8dde1; } .bq-icon-btn svg { width: 22px; height: 22px; fill: #555; } /* ------------------------------------------------------------------ Reverse Sequence Button ------------------------------------------------------------------ */ #reverse-sequence-btn { width: 38px; height: 38px; font-size: 0; position: relative; display: inline-flex; } #reverse-sequence-btn::before { content: '\21C4'; font-family: Arial, sans-serif; font-size: 18px; color: #333; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ------------------------------------------------------------------ Period Selector (Desktop button group) ------------------------------------------------------------------ */ .bq-period-selector { display: inline-flex; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; margin-left: 10px; } .bq-period-selector a { padding: 5px 12px; text-decoration: none; color: #333; background-color: #f7f7f7; border-right: 1px solid #ccc; font-size: 14px; line-height: 1.5; cursor: pointer; } .bq-period-selector a:last-child { border-right: none; } .bq-period-selector a:hover { background-color: #e9e9e9; } .bq-period-selector a.active { background-color: #0073aa; color: white; font-weight: bold; } /* ------------------------------------------------------------------ Period Select Mobile (hidden by default, shown at small breakpoints) ------------------------------------------------------------------ */ .bq-period-select-mobile { display: none; } /* ------------------------------------------------------------------ Data Loader Overlay ------------------------------------------------------------------ */ #bq-data-loader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.7); z-index: 100; display: flex; align-items: center; justify-content: center; } .bq-loader-spinner { border: 5px solid #f3f3f3; border-top: 5px solid #0073aa; border-radius: 50%; width: 50px; height: 50px; animation: bq-statement-spin 1s linear infinite; } @keyframes bq-statement-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ------------------------------------------------------------------ Statement Table — First Column Width ------------------------------------------------------------------ */ .bq-statement-table th:first-child, .bq-statement-table td:first-child { min-width: 300px !important; width: 300px !important; max-width: 300px !important; white-space: normal; } /* ------------------------------------------------------------------ Statement Table — Item Name ------------------------------------------------------------------ */ .bq-statement-table .item-name { display: inline-block; } /* ------------------------------------------------------------------ Statement Table — Subtotal / Grandtotal ------------------------------------------------------------------ */ .bq-statement-table .item-subtotal { font-weight: bold; } .bq-statement-table .item-grandtotal { font-weight: bold; } .bq-statement-table .item-grandtotal td { border-top: 1.5px solid #333; border-bottom: 1.5px solid #333; } /* ------------------------------------------------------------------ Statement Table — Indentation Levels ------------------------------------------------------------------ */ .bq-statement-table [class*="level-"] .bq-text-left { padding-left: 10px; } .bq-statement-table .level-1 .bq-text-left { padding-left: 30px; } .bq-statement-table .level-2 .bq-text-left { padding-left: 50px; } .bq-statement-table .level-3 .bq-text-left { padding-left: 70px; } .bq-statement-table .level-4 .bq-text-left { padding-left: 90px; } /* ------------------------------------------------------------------ Item Link (Bar Chart Icon) ------------------------------------------------------------------ */ .bq-data-table .item-name-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; cursor: pointer; } .bq-data-table .item-name-link:hover .item-name { color: #0073aa; } .bq-data-table .item-name-link:hover .item-link-icon { fill: #555; } .item-link-icon { width: 14px; height: 14px; fill: #b0b0b0; transition: fill 0.2s ease; flex-shrink: 0; } /* ------------------------------------------------------------------ Date Wrapper (Column Header Cells) ------------------------------------------------------------------ */ .bq-date-wrapper { display: block; line-height: 1.2; } .bq-month { font-size: 12px; font-weight: normal; } .bq-year { font-size: 14px; font-weight: bold; display: block; } /* ------------------------------------------------------------------ Sticky Header Wrapper ------------------------------------------------------------------ */ .bq-sticky-header-wrapper { position: fixed; top: 54px; max-width: 1600px; width: 100%; left: 1px; z-index: 999; display: none; background-color: #ffffff; border-bottom: 1px solid #dee2e6; border-left: 1px solid #ded9d9; border-right: 1px solid #ded9d9; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); overflow-x: hidden; overflow-y: hidden; box-sizing: border-box; } body.bq-popup-is-active .bq-sticky-header-wrapper { display: none !important; } .bq-sticky-header-wrapper table { border-collapse: collapse; table-layout: fixed; width: auto; margin: 0; font-size: 0.9em; position: relative; } .bq-sticky-header-wrapper th { padding: 6px 10px; text-align: left; background-color: #f8f9fa; font-weight: 600; color: #333; white-space: nowrap; border-right: none; } /* ------------------------------------------------------------------ Sticky Header Table — First Column Freeze Uses .bq-sticky-header-table (the element class) to override the peers-page reset in style.css which applies .bq-sticky-header-wrapper th:first-child { position: static !important }. statements.css is registered with bq-style as a dependency so it always loads after style.css — same-specificity !important rules here win via CSS source order. ------------------------------------------------------------------ */ .bq-sticky-header-table { table-layout: fixed; } .bq-sticky-header-table th:first-child { position: sticky !important; left: 0 !important; z-index: 11 !important; background-color: #f8f9fa !important; border-right: 1px solid #ddd !important; box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05) !important; min-width: 180px; max-width: 250px; } /* ------------------------------------------------------------------ Mobile Filter Row Visibility Shown at 768px and below, replacing the desktop frequency/period controls with the overlay-select equivalents. ------------------------------------------------------------------ */ .bq-mobile-filter-row { display: none; } @media (min-width: 769px) { .bq-mobile-filter-row { display: none !important; } } @media (max-width: 768px) { .bq-mobile-filter-row { display: block !important; } .bq-frequency-container, .bq-period-container { display: none !important; } } /* ------------------------------------------------------------------ Desktop / Mobile Label Toggling (Sub-nav abbreviations) ------------------------------------------------------------------ */ .desktop-label { display: inline; } .mobile-label { display: none; } @media (max-width: 768px) { .desktop-label { display: none !important; } .mobile-label { display: inline !important; } } /* ------------------------------------------------------------------ Mobile Overrides — 768px and below ------------------------------------------------------------------ */ @media (max-width: 768px) { .bq-sticky-header-wrapper { top: 56px; left: 0; padding-top: 5px; padding-bottom: 5px; background: #f8f9fa !important; } .bq-sticky-header-wrapper th { padding: 2px 4px !important; line-height: 1.1 !important; font-size: 13px !important; white-space: normal !important; } .bq-sub-navigation { margin-top: 0 !important; padding-top: 0 !important; } .bq-sub-navigation ul { justify-content: space-around; margin-top: -8px !important; margin-bottom: 5px; padding-top: 0 !important; } .bq-sub-navigation li a { display: inline-block; padding: 8px 12px; padding-top: 6px !important; padding-bottom: 6px !important; border-radius: 6px; } .bq-sub-navigation li.active a { background-color: #e5f1ff !important; color: #0052cc !important; border-radius: 6px; padding: 8px 14px; border-bottom: none !important; } .bq-statement-table th:first-child, .bq-statement-table td:first-child { width: 148px !important; min-width: 148px !important; max-width: 148px !important; } .bq-statement-table .level-1 .bq-text-left { padding-left: 20px; } .bq-statement-table .level-2 .bq-text-left { padding-left: 40px; } .bq-statement-table .level-3 .bq-text-left { padding-left: 60px; } .bq-statement-table .level-4 .bq-text-left { padding-left: 80px; } .bq-data-table .level-2 .bq-text-left, .bq-data-table .level-3 .bq-text-left { font-weight: 400 !important; padding-top: 4px !important; padding-bottom: 4px !important; color: #444 !important; } .bq-date-wrapper { display: inline-flex; flex-direction: column; line-height: 1.1; align-items: flex-end; padding-right: 5px; } .item-link-icon { display: none !important; } .bq-data-table thead tr { height: 28px !important; line-height: 1.1 !important; padding: 0 !important; } .bq-data-table thead th { padding: 2px 6px !important; font-size: 14px !important; line-height: 1.2 !important; vertical-align: middle !important; white-space: normal !important; } .bq-data-table tbody tr:first-child td { padding-top: 3px !important; } } /* ------------------------------------------------------------------ Small Mobile Overrides — 512px and below Statement controls switch to overlay-select with prefix labels. ------------------------------------------------------------------ */ @media (max-width: 512px) { .bq-sticky-header-wrapper { top: 56px; left: 10px; } .bq-period-selector { display: none; } .bq-period-container { position: relative; max-width: 150px; margin-left: 0; right: 0; margin-bottom: 10px; } .bq-frequency-container { position: relative; flex: 0 0 calc(50% - 5px); margin-bottom: 10px; } .bq-period-select-mobile { display: inline-block; width: 100px; padding: 6px 10px; padding-left: 80px; font-size: 14px; border-radius: 6px; border: 1px solid #ccc; background-color: #fff; text-align: right; color: #333; } .bq-period-select-mobile, .bq-frequency-container select { color: #333; } .bq-frequency-container select { width: 100%; padding-left: 75px; } .bq-statement-controls { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; padding: 0 5px; } .bq-statement-controls .bq-control-container, .bq-statement-controls .control-group-right { display: flex; align-items: center; gap: 10px; } .control-group-right { flex: 0 0 100%; display: flex; justify-content: space-between; gap: 8px; order: 3; height: 24px; } .bq-format-container, .bq-reverse-container, .bq-download-container { flex: 1; position: relative; } .bq-download-container #js-download-link, .bq-reverse-container #reverse-sequence-btn { width: 100%; text-align: center; border-radius: 6px; } .bq-format-container .bq-value-toggle { width: 100%; flex-wrap: nowrap; border-radius: 6px; display: flex; margin: 0; } .bq-format-container .bq-value-toggle button { flex-grow: 1; border-radius: 0; } .bq-format-container .bq-value-toggle button:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .bq-format-container .bq-value-toggle button:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .bq-statement-controls label { display: none !important; } .bq-period-container::before { content: "Period:"; position: absolute; top: 0; bottom: 0; left: 10px; z-index: 1; display: flex; align-items: center; color: #6c757d; font-weight: 500; font-size: 14px; pointer-events: none; } .bq-frequency-container::before { content: "Frequency:"; position: absolute; top: 0; bottom: 0; left: 10px; z-index: 1; display: flex; align-items: center; color: #6c757d; font-weight: 500; font-size: 14px; pointer-events: none; } }