.report-page { padding-top: 42px; padding-bottom: 60px; }
/* Cover the gap and side margins while report contents scroll under the fixed panel. */
.report-page::before {
    content: '';
    position: fixed;
    top: 76px; left: 0; right: 0; height: 94px;
    background: #fff;
    z-index: 999;
}
.secondary-navbar.report-toolbar {
    top: 88px; left: calc(var(--desktop-inset, 16px) - var(--desktop-offset, 0px)); right: auto;
    width: calc(var(--desktop-width, 100%) - 2 * var(--desktop-inset, 16px)); min-width: 0; height: 82px;
    margin: 0; padding: 0 18px; display: flex; gap: 20px; align-items: center; flex-wrap: nowrap;
    background: #fff !important; border: 1px solid #d5e0e7; border-radius: 10px;
    box-shadow: 0 3px 10px rgba(30, 50, 65, .06); z-index: 1000;
}
.report-toolbar .report-presets { display: flex; align-items: center; border: 0; border-radius: 0; padding: 3px; flex: 0 0 auto; }
.report-toolbar .report-preset { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 9px; padding: 12px 15px; background: transparent; color: #7b8790; font-weight: 400; font-size: 14px; white-space: nowrap; cursor: pointer; }
.report-toolbar .report-preset:hover { background: transparent; color: #1A89BC; }
.report-toolbar .report-preset.active { background: transparent; color: #1E96D8; font-weight: 700; }
.report-toolbar .report-preset .header-icon { width: 14px; height: 14px; color: #a1adb5; }
.report-toolbar .report-preset.active .header-icon { color: #6eadd0; }
.report-toolbar button:focus:not(:focus-visible) { outline: none; }
.report-toolbar button:focus-visible, .report-toolbar input:focus-visible { outline: 2px solid #1e96d8; outline-offset: 2px; }
.report-toolbar .report-range-form { position: relative; display: flex; flex: 0 0 auto; align-items: center; gap: 22px; margin-left: auto; padding-left: 26px; border-left: 1px solid #dfe5e9; }
.report-toolbar .report-date-field { display: flex; align-items: center; gap: 10px; margin: 0; }
.report-toolbar label { margin: 0; color: #344b59; font-size: 14px; white-space: nowrap; }
.report-toolbar .report-date-control { position: relative; display: flex; align-items: center; }
.report-toolbar .report-date-input { width: 168px; height: 44px; margin: 0; padding: 8px 42px 8px 12px; border: 1px solid #dce3e7; border-radius: 9px; background: #f8f9fa; color: #24353e; font-size: 14px; font-weight: 600; text-align: left; }
.report-toolbar .report-date-input[aria-invalid="true"] { border-color: #c74747; }
.report-toolbar .report-calendar-button { position: absolute; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 6px; background: transparent; color: #344b59; cursor: pointer; }
.report-toolbar .report-calendar-button:hover { background: #e8eef1; }
.report-toolbar .report-show { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 150px; height: 44px; padding: 0 20px; border: 0; border-radius: 9px; background: #078bd3; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.report-toolbar .report-show:hover { background: #067cbf; }
.report-toolbar button:disabled, .report-toolbar input:disabled { cursor: wait; opacity: .65; }
.report-range-error { position: absolute; right: 0; top: 46px; margin: 0; color: #b02c2c; font-size: 12px; }
.report-notifications { position: relative; flex: 0 0 48px; }
.report-notification-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: #eef7fb; color: #128ac0; cursor: pointer; }
.report-notification-button .header-icon { width: 24px; height: 24px; }
.report-notification-button .counter { position: absolute; top: -3px; right: -3px; left: auto; display: flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; border: 2px solid #fff; border-radius: 10px; background: #e48627; color: #fff; font-size: 11px; font-weight: 700; }
.report-notifications .dropdown-comment { top: 50px; left: 0; margin: 0; z-index: 1100; max-height: calc(100vh - 180px); overflow-y: auto; }
.header-icon-calendar { --header-icon: url('../images/fontawesome/calendar-days.svg'); }
.header-icon-bell { --header-icon: url('../images/fontawesome/bell.svg'); }
.header-icon-show { --header-icon: url('../images/fontawesome/play.svg'); }

/* The picker is appended to body by Bootstrap Datepicker, outside the toolbar. */
.datepicker.report-datepicker {
    padding: 3px 12px 12px; margin-top: 10px; border: 1px solid #1E96D8; border-radius: 14px;
    /* The first 54px cover the existing month navigation, including its spacing. */
    background: linear-gradient(to bottom, #1E96D8 54px, #fff 54px);
    color: #24353e; box-shadow: 0 6px 18px rgba(30, 50, 65, .12);
    font: 14px/1.4 Arial, sans-serif;
}
.datepicker.report-datepicker::before, .datepicker.report-datepicker::after { display: none; }
.datepicker.report-datepicker table { width: 276px; border-collapse: separate; border-spacing: 3px; }
.datepicker.report-datepicker table tr th, .datepicker.report-datepicker table tr td {
    width: 36px; height: 36px; padding: 0; border: 0 !important; border-radius: 8px; background-image: none;
}
.datepicker.report-datepicker .datepicker-switch { font-size: 15px; font-weight: 700; color: #fff; }
.datepicker.report-datepicker .prev, .datepicker.report-datepicker .next { font-size: 20px; color: #fff; background: #1A89BC; }
.datepicker.report-datepicker table tr th.dow { color: #72828b; font-size: 12px; font-weight: 500; }
.datepicker.report-datepicker table tr td.old, .datepicker.report-datepicker table tr td.new { color: #a3adb3; }
.datepicker.report-datepicker table tr td.day:hover,
.datepicker.report-datepicker table tr td span:hover { background: #e8f4fb; color: #1A89BC; }
.datepicker.report-datepicker table tr th.prev:hover,
.datepicker.report-datepicker table tr th.next:hover,
.datepicker.report-datepicker table tr th.datepicker-switch:hover { background: #1A89BC; color: #fff; }
.datepicker.report-datepicker table tr td.today,
.datepicker.report-datepicker table tr td.today:hover { background: #edf7f2; color: #075d43; font-weight: 700; }
.datepicker.report-datepicker table tr td.active,
.datepicker.report-datepicker table tr td.active:hover,
.datepicker.report-datepicker table tr td span.active,
.datepicker.report-datepicker table tr td span.active:hover {
    background: #1A89BC; color: #fff; text-shadow: none; font-weight: 700;
}
.datepicker.report-datepicker tfoot th.today { color: #087c59; background: #f2f7f5; font-weight: 600; }
.datepicker.report-datepicker tfoot th.today:hover { background: #e2f2eb; }

/* Opaque backing also covers the footer's outer margins during scrolling. */
.report-page::after {
    content: ''; position: fixed; bottom: 0; left: 0; right: 0; height: 100px;
    background: #fff; z-index: 999;
}
.bottom-navbar.report-footer {
    left: calc(var(--desktop-inset, 16px) - var(--desktop-offset, 0px)); right: auto; bottom: 12px;
    width: calc(var(--desktop-width, 100%) - 2 * var(--desktop-inset, 16px)); min-width: 0; height: 76px;
    padding: 0 18px; gap: 24px; flex-wrap: nowrap; background: #F1F1F1 !important;
    border: 1px solid #d5e0e7; border-radius: 10px;
    box-shadow: 0 -3px 10px rgba(30, 50, 65, .06); z-index: 1000;
}
.report-footer .report-footer-navigation { min-width: max-content; gap: 20px; }
.report-footer .navbar-nav { width: max-content; flex: 0 0 auto; gap: 8px; align-items: center; overflow: visible; }
.report-footer .top-nav-item, .report-footer .top-nav-item.active { padding: 0; background: none; flex: 0 0 auto; }
.report-footer .top-nav-item .top-menu-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-width: 72px; height: 48px; padding: 0 16px; border-radius: 8px;
    color: #526570 !important; font-size: 16px; font-weight: 600;
}
.report-footer .top-menu-link::before {
    content: ''; display: inline-block; flex: 0 0 19px; width: 19px; height: 19px;
    background-color: #84969f;
    -webkit-mask: url('../images/fontawesome/database.svg') center / contain no-repeat;
    mask: url('../images/fontawesome/database.svg') center / contain no-repeat;
}
.report-footer .top-menu-link:hover { background: #e7ecef; }
.report-footer .top-nav-item.active .top-menu-link { background: #e1eee8; color: #126447 !important; font-weight: 700; box-shadow: inset 0 -3px #09c58b; }
.report-footer .top-nav-item.active .top-menu-link::before { background-color: #438a70; }
.report-footer .report-footer-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 12px; padding-left: 24px; border-left: 1px solid #d5dde2; }
.report-footer .report-footer-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 20px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.report-footer .report-footer-actions .header-icon { width: 16px; height: 16px; }
.report-footer button:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.report-footer button:focus-visible { outline: 2px solid #1e96d8; outline-offset: 3px; }
.header-icon-export { --header-icon: url('../images/fontawesome/file-export.svg'); }
.header-icon-calculate { --header-icon: url('../images/fontawesome/calculator.svg'); }

/* Replace the icon during requests and suppress the legacy background GIF. */
.report-toolbar .report-show.load, .report-footer .btn.load { background-image: none !important; }
.report-toolbar .report-show.load .header-icon,
.report-footer .btn.load .header-icon {
    background-color: transparent;
    -webkit-mask: none; mask: none;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: report-button-spin .75s linear infinite;
}
@keyframes report-button-spin { to { transform: rotate(360deg); } }

@media (max-width: 1919px) {
    .secondary-navbar.report-toolbar, .bottom-navbar.report-footer { padding-right: 12px; padding-left: 12px; gap: 12px; }
    .report-toolbar .report-preset { padding-right: 9px; padding-left: 9px; gap: 7px; }
    .report-toolbar .report-range-form { gap: 12px; padding-left: 16px; }
    .report-toolbar .report-date-field { gap: 8px; }
    .report-toolbar .report-date-input { width: 150px; }
    .report-toolbar .report-show { min-width: 128px; padding-right: 14px; padding-left: 14px; gap: 8px; }
    .report-footer .report-footer-actions { padding-left: 16px; gap: 10px; }
    .report-footer .top-nav-item .top-menu-link { padding-right: 12px; padding-left: 12px; }
}