/* ============================================================
   Catalis Report Controls
   ============================================================ */

/* Three-panel flex bar — each rpt-panel is a bordered group */
.rpt-controls-bar {
    display: flex;
    width: 100%;
    gap: 10px;
    align-items: stretch;   /* all panels same height */
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* Bordered panel — one per logical group */
.rpt-panel {
    background: rgba(30, 33, 41, 0.85);
    border: 1px solid #585d6e;
    border-radius: 5px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex-shrink: 0;
}

/* Quick preset buttons — pill group */
.rpt-presets {
    display: flex;
    gap: 0;
    border: 1px solid #585d6e;
    border-radius: 5px;
    overflow: hidden;
}

.rpt-preset-btn {
    flex: 1;
    padding: 4px 11px;
    font-size: 0.76rem;
    font-weight: 600;
    text-align: center;
    border: none;
    border-right: 1px solid #585d6e;
    background: rgba(42, 45, 54, 0.7);
    color: #c4c9d4;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.rpt-preset-btn:last-child { border-right: none; }

.rpt-preset-btn:hover {
    background: rgba(158, 218, 41, 0.08);
    color: #c5ef6e;
}

.rpt-preset-btn.active {
    background: rgba(158, 218, 41, 0.2);
    color: #9eDA29;
    font-weight: 700;
}

/* Date grid — two date-cells side by side, filling the panel */
.rpt-date-grid {
    display: flex;
    gap: 10px;
    flex: 1;
}

.rpt-date-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.rpt-date-label {
    font-size: 0.70rem;
    color: #c4c9d4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
}

/* Both date and time inputs fill their cell at the same width */
.rpt-date-input,
.rpt-time-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.81rem;
    padding: 3px 5px;
    background: rgba(42, 45, 54, 0.9);
    border: 1px solid #585d6e;
    border-radius: 4px;
    color: #e0e0e0;
}

.rpt-date-input:focus,
.rpt-time-input:focus {
    outline: none;
    border-color: #9eDA29;
}

/* Progress bar */
.rpt-progress-wrap {
    position: relative;
    height: 4px;
    background: rgba(88, 93, 110, 0.3);
    border-radius: 2px;
    margin-bottom: 10px;
    overflow: hidden;
}

.rpt-progress-bar {
    height: 100%;
    background: #9eDA29;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.rpt-progress-label {
    position: absolute;
    right: 4px;
    top: -14px;
    font-size: 0.7rem;
    color: #949ba2;
}

/* ============================================================
   Filter section — panel-styled, sits above the table
   ============================================================ */

.rpt-filter-section {
    background: rgba(30, 33, 41, 0.85);
    border: 1px solid #585d6e;
    border-radius: 5px;
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

/* Wrapper that stacks the label above a filter control */
.rpt-filter-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Small label above a filter control */
.rpt-filter-label {
    font-size: 0.62rem;
    color: #c4c9d4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    padding-left: 1px;
}

/* Vertical separator between column picker and the row filters */
.rpt-filter-sep {
    width: 1px;
    align-self: stretch;
    background: #585d6e;
    margin: 0 4px;
    flex-shrink: 0;
}

/* Trailing group — floats to the far right of the filter bar */
.rpt-filter-trailing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    margin-left: auto;
    justify-content: flex-end;
}

/* Row count shown at the right end of the filter bar */
.rpt-row-count {
    font-size: 0.72rem;
    color: #9eDA29;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}

/* Reset filters — minimal link style */
.rpt-reset-btn {
    font-size: 0.72rem;
    color: #c4c9d4;
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 6px;
    transition: color 0.15s;
    white-space: nowrap;
    align-self: center;
}

.rpt-reset-btn:hover { color: #ef5350; }

/* ============================================================
   Totals — stacked pairs of stat boxes
   ============================================================ */

.rpt-totals-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    flex: 1;
}

.rpt-totals-pair {
    display: flex;
    gap: 5px;
    flex: 1;
}

/* Hidden but space-reserved when no filter is active */
.rpt-totals-pair.rpt-dim {
    visibility: hidden;
}

.rpt-stat {
    flex: 1;
    min-width: 0;
    padding: 3px 10px;
    background: rgba(30, 33, 41, 0.6);
    border: 1px solid #585d6e;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.rpt-stat-label {
    font-size: 0.63rem;
    color: #c4c9d4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.rpt-stat-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #9eDA29;
    line-height: 1.25;
    white-space: nowrap;
}

/* ============================================================
   Catalis Report Table — Radzen DataGrid dark overrides
   ============================================================ */

/* Make the ENTIRE grid area dark, including the column picker header */
.rpt-grid-wrap .rz-data-grid,
.rpt-grid-wrap .rz-data-grid > *,
.rpt-grid-wrap .rz-data-grid > div {
    background: #2a2d36 !important;
    background-color: #2a2d36 !important;
    color: #e0e0e0 !important;
}

.rpt-grid-wrap .rz-data-grid {
    border: 1px solid #585d6e !important;
    font-size: 0.82rem;
}

/* ── Header ── */
.rpt-grid-wrap th,
.rpt-grid-wrap thead tr th,
.rpt-grid-wrap .rz-datatable-thead th,
.rpt-grid-wrap .rz-header-cell,
.rpt-grid-wrap .rz-column-header,
.rpt-grid-wrap [class*="column-header"] {
    background: #1e2129 !important;
    background-color: #1e2129 !important;
    color: #9eDA29 !important;
    font-weight: 600;
    font-size: 0.77rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #585d6e !important;
    border-right: 1px solid rgba(88, 93, 110, 0.2) !important;
    padding: 8px 10px !important;
}

.rpt-grid-wrap th:hover,
.rpt-grid-wrap thead tr th:hover,
.rpt-grid-wrap .rz-header-cell:hover,
.rpt-grid-wrap .rz-column-header:hover {
    background: #252834 !important;
    background-color: #252834 !important;
}

/* ── Sort icons ── */
.rpt-grid-wrap .rz-sortable-column-header-text,
.rpt-grid-wrap .rz-column-title-content,
.rpt-grid-wrap .rzi-sort-asc,
.rpt-grid-wrap .rzi-sort-desc {
    color: #9eDA29 !important;
}

/* ── Data rows ── */
.rpt-grid-wrap td,
.rpt-grid-wrap tbody tr td,
.rpt-grid-wrap .rz-data-row td,
.rpt-grid-wrap .rz-row td {
    background: #2a2d36 !important;
    background-color: #2a2d36 !important;
    border-bottom: 1px solid rgba(88, 93, 110, 0.15) !important;
    border-right: none !important;
    padding: 5px 10px !important;
    vertical-align: middle;
    color: #e0e0e0 !important;
}

.rpt-grid-wrap .rz-cell-data,
.rpt-grid-wrap td .rz-cell-data {
    color: #e0e0e0 !important;
}

.rpt-grid-wrap .rz-datatable-even td,
.rpt-grid-wrap .rz-even-row td,
.rpt-grid-wrap tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.025) !important;
    background-color: rgba(255, 255, 255, 0.025) !important;
}

.rpt-grid-wrap .rz-data-row:hover td,
.rpt-grid-wrap .rz-row:hover td,
.rpt-grid-wrap tbody tr:hover td {
    background: rgba(158, 218, 41, 0.05) !important;
    background-color: rgba(158, 218, 41, 0.05) !important;
    cursor: pointer;
}

.rpt-grid-wrap .rz-state-highlight td {
    background: rgba(158, 218, 41, 0.08) !important;
    background-color: rgba(158, 218, 41, 0.08) !important;
}

/* ── Column picker trigger (the "N columns showing" button) ── */
.rpt-grid-wrap .rz-multiselect,
.rpt-grid-wrap .rz-multiselect-trigger,
.rpt-grid-wrap .rz-column-picker-trigger,
.rpt-grid-wrap .rz-dropdown,
.rpt-grid-wrap .rz-dropdown-trigger {
    background: rgba(30, 33, 41, 0.9) !important;
    background-color: rgba(30, 33, 41, 0.9) !important;
    border: 1px solid #585d6e !important;
    color: #949ba2 !important;
    border-radius: 4px;
}

.rpt-grid-wrap .rz-multiselect-label,
.rpt-grid-wrap .rz-multiselect .rz-multiselect-label,
.rpt-grid-wrap .rz-dropdown-label {
    color: #949ba2 !important;
}

.rpt-grid-wrap .rz-multiselect-trigger-icon,
.rpt-grid-wrap .rz-dropdown-trigger-icon {
    color: #949ba2 !important;
}

/* ── Column picker panel (global — overlays outside wrapper) ── */
.rz-multiselect-panel,
.rz-column-picker-panel,
.rz-dropdown-panel {
    background: #252834 !important;
    border: 1px solid #585d6e !important;
    color: #e0e0e0 !important;
}

.rz-multiselect-panel .rz-multiselect-item,
.rz-column-picker-panel .rz-multiselect-item {
    color: #e0e0e0 !important;
}

.rz-multiselect-panel .rz-multiselect-item:hover,
.rz-column-picker-panel .rz-multiselect-item:hover {
    background: rgba(158, 218, 41, 0.08) !important;
}

.rz-multiselect-panel .rz-multiselect-item.rz-state-highlight,
.rz-column-picker-panel .rz-multiselect-item.rz-state-highlight {
    background: rgba(158, 218, 41, 0.15) !important;
    color: #9eDA29 !important;
}

.rz-multiselect-panel .rz-multiselect-filter-container input,
.rz-multiselect-panel .rz-multiselect-filter {
    background: rgba(30, 33, 41, 0.9) !important;
    border: 1px solid #585d6e !important;
    color: #e0e0e0 !important;
}

/* ── Scrollbar ── */
.rpt-grid-wrap ::-webkit-scrollbar { width: 6px; height: 6px; }
.rpt-grid-wrap ::-webkit-scrollbar-track { background: rgba(42, 45, 54, 0.5); }
.rpt-grid-wrap ::-webkit-scrollbar-thumb { background: rgba(88, 93, 110, 0.5); border-radius: 3px; }
.rpt-grid-wrap ::-webkit-scrollbar-thumb:hover { background: rgba(158, 218, 41, 0.4); }

/* Status badge */
.rpt-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}

.rpt-status-approved   { background: rgba(27, 191, 137, 0.12); color: #1bbf89; border: 1px solid rgba(27, 191, 137, 0.3); }
.rpt-status-completed  { background: rgba(27, 191, 137, 0.12); color: #1bbf89; border: 1px solid rgba(27, 191, 137, 0.3); }
.rpt-status-processing { background: rgba(15, 131, 201, 0.12); color: #64B5F6; border: 1px solid rgba(15, 131, 201, 0.3); }
.rpt-status-declined   { background: rgba(219, 82, 75, 0.12);  color: #ef5350; border: 1px solid rgba(219, 82, 75, 0.3); }
.rpt-status-failed     { background: rgba(219, 82, 75, 0.12);  color: #ef5350; border: 1px solid rgba(219, 82, 75, 0.3); }
.rpt-status-refunded   { background: rgba(247, 175, 62, 0.12); color: #f7af3e; border: 1px solid rgba(247, 175, 62, 0.3); }
.rpt-status-reversed   { background: rgba(186, 104, 200, 0.12); color: #ce93d8; border: 1px solid rgba(186, 104, 200, 0.3); }
.rpt-status-chargeback { background: rgba(186, 104, 200, 0.12); color: #ce93d8; border: 1px solid rgba(186, 104, 200, 0.3); }
.rpt-status-default    { background: rgba(88, 93, 110, 0.15);  color: #c4c9d4; border: 1px solid rgba(88, 93, 110, 0.3); }

/* ============================================================
   Dark-theme overrides — Bootstrap components inside report panels
   ============================================================ */

/* btn-secondary inside report panels: dark bg, readable text */
.rpt-panel .btn-secondary,
.rpt-filter-section .btn-secondary,
.rpt-controls-bar .btn-secondary {
    background-color: rgba(42, 45, 54, 0.9) !important;
    border-color: #585d6e !important;
    color: #d0d5de !important;
    font-size: 0.8rem;
}

.rpt-panel .btn-secondary:hover,
.rpt-filter-section .btn-secondary:hover,
.rpt-controls-bar .btn-secondary:hover,
.rpt-panel .btn-secondary:focus,
.rpt-filter-section .btn-secondary:focus {
    background-color: rgba(55, 59, 72, 0.95) !important;
    border-color: #7a8090 !important;
    color: #e8ecf2 !important;
    box-shadow: none !important;
}

/* Dropdown menus inside report panels */
.rpt-panel .dropdown-menu,
.rpt-filter-section .dropdown-menu {
    background-color: #252834;
    border: 1px solid #585d6e;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.rpt-panel .dropdown-item,
.rpt-filter-section .dropdown-item {
    color: #d0d5de;
    font-size: 0.82rem;
    padding: 5px 14px;
}

.rpt-panel .dropdown-item:hover,
.rpt-filter-section .dropdown-item:hover {
    background-color: rgba(158, 218, 41, 0.08);
    color: #e8ecf2;
}

/* form-control inside report panels: dark bg, readable text + placeholder */
.rpt-panel .form-control,
.rpt-filter-section .form-control,
.rpt-controls-bar .form-control {
    background-color: rgba(42, 45, 54, 0.9);
    border-color: #585d6e;
    color: #e0e0e0;
}

.rpt-panel .form-control:focus,
.rpt-filter-section .form-control:focus,
.rpt-controls-bar .form-control:focus {
    background-color: rgba(42, 45, 54, 0.9);
    border-color: #9eDA29;
    color: #e0e0e0;
    box-shadow: 0 0 0 2px rgba(158, 218, 41, 0.15);
}

.rpt-panel .form-control::placeholder,
.rpt-filter-section .form-control::placeholder,
.rpt-controls-bar .form-control::placeholder {
    color: #8a9099;
    opacity: 1;
}

/* Amount range separator dash */
.rpt-amount-sep { color: #c4c9d4; }

/* ============================================================
   Table help modal
   ============================================================ */

.rpt-help-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #585d6e;
    background: rgba(42, 45, 54, 0.9);
    color: #c4c9d4;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
    line-height: 1;
}

.rpt-help-btn:hover {
    border-color: #9eDA29;
    color: #9eDA29;
    background: rgba(158, 218, 41, 0.08);
}

.rpt-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rpt-help-card {
    background: #252834;
    border: 1px solid #585d6e;
    border-radius: 8px;
    padding: 24px 28px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    position: relative;
}

.rpt-help-card h5 {
    color: #9eDA29;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 16px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.rpt-help-item {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    align-items: flex-start;
}

.rpt-help-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(158, 218, 41, 0.12);
    border: 1px solid rgba(158, 218, 41, 0.25);
    color: #9eDA29;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.rpt-help-text strong {
    display: block;
    color: #e0e0e0;
    font-size: 0.83rem;
    margin-bottom: 2px;
}

.rpt-help-text span {
    color: #c4c9d4;
    font-size: 0.78rem;
    line-height: 1.45;
}

.rpt-help-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: #c4c9d4;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    transition: color 0.15s;
}

/* ============================================================
   Section Heading — used above Radzen grids in result areas
   ============================================================ */

.rpt-section-heading {
    font-size: 1rem;
    font-weight: 600;
    color: #c4c9d4;
    margin: 16px 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #3a3d46;
}

/* ============================================================
   Summary Page Results — match controls bar visual language
   ============================================================ */

/* Cards get the same surface as rpt-panel so everything reads as one layer */
.rpt-summary-wrap .card {
    background: rgba(30, 33, 41, 0.85) !important;
    border: 1px solid #585d6e !important;
}

/* Bootstrap's text-muted (#6c757d) is near-invisible on bg-dark — brighten it */
.rpt-summary-wrap .text-muted {
    color: #b0b8c4 !important;
}

/* Slightly reduce table font size to match the compact controls bar feel */
.rpt-summary-wrap .table td,
.rpt-summary-wrap .table th {
    font-size: 0.82rem;
}

.rpt-help-close:hover { color: #ef5350; }