/* Report Builder - Modern card-based UI matching v3 daily alert design language */

:root {
    --rb-primary: #18988b;
    --rb-primary-tint: #e8f5f3;
    --rb-blue: #3b82f6;
    --rb-green: #10b981;
    --rb-purple: #8b5cf6;
    --rb-amber: #f59e0b;
    --rb-danger: #dc2626;
    --rb-gray-50: #f9fafb;
    --rb-gray-100: #f3f4f6;
    --rb-gray-200: #e5e7eb;
    --rb-gray-300: #d1d5db;
    --rb-gray-400: #9ca3af;
    --rb-gray-500: #6b7280;
    --rb-gray-600: #4b5563;
    --rb-gray-700: #374151;
    --rb-gray-900: #111827;
    --rb-radius: 8px;
    --rb-font: 'Lexend', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Layout */
.rb-page-container {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.report-builder {
    background: white;
    border-radius: var(--rb-radius);
    display: flex;
    overflow: hidden;
}

.report-builder > .row {
    flex: 1;
    flex-wrap: nowrap;
    align-items: flex-start;
}

/*
 * Sticky sidebar pattern: the page owns the scroll. The sidebar pins to the
 * viewport (just below the fixed navbar) and scrolls internally if its own
 * content is taller than the viewport. align-self: flex-start is critical —
 * without it, flexbox stretches the sidebar to match the long preview column
 * and sticky becomes a no-op.
 */
.rb-settings {
    border-right: 1px solid var(--rb-gray-200);
    background: var(--rb-gray-50);
    display: flex;
    flex-direction: column;
}

.rb-settings__inner {
    flex: 1;
    padding: 1.25rem 0.75rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rb-preview {
    padding: 1.25rem 2.5rem 1.25rem 1.25rem;
    background: white;
    position: relative;
}

/* Sidebar hide/show toggle — lives in the card header top-right, always the same spot */
.rb-settings {
    transition: flex-basis 0.25s ease, max-width 0.25s ease;
}

/* Card title becomes vertically centered when we mount the toggle into it
   (otherwise Bootstrap's d-flex default alignment lets the button sit too low). */
.card-title.rb-title-with-toggle {
    align-items: center;
}

/* Toggle is mounted inline into the card title by JS, next to "Report Builder" */
#rb-sidebar-toggle.rb-sidebar-toggle {
    position: relative;
    margin-left: 14px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--rb-gray-200);
    background: white;
    color: var(--rb-gray-500);
    padding: 0;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#rb-sidebar-toggle.rb-sidebar-toggle:hover {
    background: var(--rb-primary-tint);
    color: var(--rb-primary);
    border-color: var(--rb-primary);
}

/* Tooltip */
#rb-sidebar-toggle.rb-sidebar-toggle::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--rb-gray-900);
    color: white;
    font-family: var(--rb-font);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 10;
    text-transform: none;
    letter-spacing: normal;
}

#rb-sidebar-toggle.rb-sidebar-toggle:hover::after {
    opacity: 1;
}

.report-builder.rb-collapsed .rb-settings {
    flex: 0 0 0 !important;
    max-width: 0 !important;
    border-right: none;
    overflow: hidden;
    padding: 0;
}

.report-builder.rb-collapsed .rb-preview {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

/* Header */
.rb-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rb-header__title {
    font-family: var(--rb-font);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--rb-gray-900);
    margin: 0;
}

/* Badges */
.rb-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rb-badge--beta {
    background: var(--rb-primary);
    color: white;
}

.rb-badge--count {
    background: var(--rb-primary-tint);
    color: var(--rb-primary);
    font-size: 0.75rem;
}

/* Help text */
.rb-help-text {
    font-size: 0.85rem;
    color: var(--rb-gray-500);
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Search-backed source chip */
.rb-search-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--rb-gray-600, #475569);
    background: var(--rb-gray-100, #f1f5f9);
    border: 1px solid var(--rb-gray-200, #e2e8f0);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
}

.rb-search-chip i {
    color: var(--rb-teal, #0d9488);
}

/* Compact rendering of the reused Advanced Search form inside the edit modal */
.rb-adv-modal-form .form-group.row {
    margin-bottom: 0.55rem;
}

.rb-adv-modal-form label {
    margin-bottom: 0;
    font-size: 0.85rem;
    font-weight: 500;
}

.rb-adv-modal-form .form-control {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    height: auto;
    min-height: calc(1.5em + 0.5rem + 2px);
}

.rb-adv-modal-form select[multiple].form-control {
    min-height: 4.5rem;
}

.rb-adv-modal-form .text-muted.font-small,
.rb-adv-modal-form .font-small {
    font-size: 0.7rem;
    line-height: 1.25;
}

/* Tighten the label/field split a touch in the modal's narrower width */
#rbAdvModal .modal-body {
    padding-top: 0.75rem;
}

/* Unmatched bill warning */
.rb-unmatched-warning {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: #991b1b;
}

.rb-unmatched-warning i {
    color: #dc2626;
    margin-right: 0.25rem;
}

/* Report Title field (top of settings) */
.rb-title-field {
    margin-bottom: 0.75rem;
}

.rb-title-field__label {
    font-family: var(--rb-font);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--rb-gray-600);
    margin-bottom: 0.35rem;
    display: block;
}

.rb-title-field__label i {
    margin-right: 4px;
    color: var(--rb-primary);
}

.rb-title-field .form-control {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
}

/* Add subtitle link */
.rb-add-subtitle {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--rb-primary);
    margin-top: 0.35rem;
    text-decoration: none;
}

.rb-add-subtitle:hover {
    text-decoration: underline;
}

.rb-add-subtitle i {
    font-size: 0.65rem;
    margin-right: 2px;
}

.rb-subtitle-input {
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: var(--rb-gray-500) !important;
}

.rb-comments-input {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: var(--rb-gray-700) !important;
    resize: vertical;
}

/* Preview report title */
.rb-preview__report-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--rb-primary);
}

.rb-preview__report-title {
    font-family: var(--rb-font);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--rb-gray-900);
    margin: 0;
}

/* Preview subtitle */
.rb-preview__report-subtitle {
    font-family: var(--rb-font);
    font-size: 0.9rem;
    color: var(--rb-gray-500);
    margin: -0.75rem 0 0.75rem;
}

/* Preview report comments (legacy MO "Report Comments") */
.rb-preview__report-comments {
    font-family: var(--rb-font);
    font-size: 0.88rem;
    color: var(--rb-gray-700);
    line-height: 1.45;
    margin: -0.25rem 0 1rem;
}

/* Section Headers (v3 alert style) */
.rb-section-header {
    font-family: var(--rb-font);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    padding: 0.5rem 0.75rem;
    margin: 1rem 0 0.5rem;
    border-left: 4px solid var(--rb-primary);
    border-radius: 4px;
    background: var(--rb-primary-tint);
    color: var(--rb-gray-700);
}

.rb-section-header i {
    margin-right: 6px;
    color: var(--rb-primary);
}

/* Indent section content under headers */
.rb-section-header + .rb-field-toggles,
.rb-section-header + .rb-layout-toggle,
.rb-sort-group,
.rb-field-toggles {
    padding-left: 0.75rem;
}

.rb-title-field,
.rb-logo-selector,
.rb-layout-toggle {
    padding-left: 0.75rem;
}

/* Field toggles */
.rb-field-group {
    margin-bottom: 0.75rem;
}

.rb-field-group__title {
    font-family: var(--rb-font);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rb-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 0.375rem;
}

/* Two independent columns (not a grid) so a field with a visible sub-option only
   lengthens its own column instead of leaving a gap in the adjacent one. */
.rb-field-grid {
    column-count: 2;
    column-gap: 0.75rem;
}

.rb-toggle {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.82rem;
    color: var(--rb-gray-700);
    cursor: pointer;
    padding: 3px 0;
    margin: 0;
    user-select: none;
    break-inside: avoid;
}

.rb-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--rb-primary);
    cursor: pointer;
    flex-shrink: 0;
}

/* A parent toggle plus its nested sub-option(s): stacked vertically and kept
   together in one column so the sub renders directly beneath the field it
   modifies, not as a sibling item. */
.rb-toggle-field {
    display: flex;
    flex-direction: column;
    break-inside: avoid;
}

.rb-toggle--sub {
    margin-left: 1.375rem;
    font-size: 0.78rem;
    color: var(--rb-gray-600);
}

/* Nested radio sub-options (e.g. Caption mode under the Caption toggle). */
.rb-radio-group--sub {
    margin-left: 1.375rem;
    margin-top: 0.125rem;
    gap: 0.125rem;
}

.rb-radio-group--sub .rb-radio {
    font-size: 0.78rem;
    color: var(--rb-gray-600);
}

/* Sort/Group */
.rb-field-label {
    font-family: var(--rb-font);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rb-gray-600);
    margin-bottom: 4px;
    display: block;
}

.rb-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.rb-radio {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.82rem;
    color: var(--rb-gray-700);
    cursor: pointer;
    margin: 0;
}

.rb-radio input[type="radio"] {
    accent-color: var(--rb-primary);
    cursor: pointer;
}

/* Action Bar — sticky to the bottom of the sidebar's scroll area so
   Save/Export are always reachable, even when settings overflow. */
.rb-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0;
    margin-top: auto;
    border-top: 1px solid var(--rb-gray-200);
    background: var(--rb-gray-50);
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.rb-actions .btn-primary {
    background: var(--rb-primary);
    border-color: var(--rb-primary);
}

.rb-actions .btn-primary:hover {
    background: #147d72;
    border-color: #147d72;
}

/* Export dropdown items */
.rb-export-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
}

.rb-export-item i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.rb-export-icon--csv { color: #10b981; }
.rb-export-icon--excel { color: #217346; }
.rb-export-icon--word { color: #2b579a; }
.rb-export-icon--pdf { color: #e11d48; }
.rb-export-icon--print { color: #6b7280; }

/* Preview Header */
.rb-preview__note {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--rb-gray-400);
}

/* Bill Cards */
.rb-bill-card {
    border: 1px solid var(--rb-gray-200);
    border-left: 4px solid var(--rb-primary);
    border-radius: var(--rb-radius);
    margin-bottom: 0.875rem;
    background: white;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.rb-bill-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.rb-bill-card__header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rb-gray-100);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rb-bill-badge {
    color: var(--rb-primary);
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--rb-font);
    white-space: nowrap;
    text-decoration: none;
}

a.rb-bill-badge:hover {
    text-decoration: underline;
}

.rb-bill-card__title {
    font-family: var(--rb-font);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--rb-gray-900);
    text-decoration: none;
    line-height: 1.3;
}

a.rb-bill-card__title:hover {
    color: var(--rb-primary);
}

.rb-bill-card__body {
    padding: 0;
}

.rb-bill-card__field {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--rb-gray-50);
    display: flex;
    gap: 0.75rem;
}

.rb-bill-card__field:last-child {
    border-bottom: none;
}

.rb-bill-card__label {
    font-family: var(--rb-font);
    font-weight: 600;
    color: var(--rb-gray-400);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    flex-shrink: 0;
    padding-top: 2px;
}

.rb-bill-card__value {
    font-size: 0.85rem;
    color: var(--rb-gray-700);
    flex: 1;
    line-height: 1.45;
    word-break: break-word;
}

.rb-bill-card__value a {
    color: var(--rb-primary);
}

.rb-bill-card__value a:hover {
    color: #147d72;
}

.rb-bill-card__none,
.rb-bill-card__empty {
    color: var(--rb-gray-400);
    font-style: italic;
}

.rb-bill-card__none {
    font-size: 0.8rem;
}


/* Stacked layout: label on top, content below */
.rb-bill-card--stacked .rb-bill-card__field {
    flex-direction: column;
    gap: 0.2rem;
}

.rb-bill-card--stacked .rb-bill-card__label {
    width: auto;
    min-width: auto;
    max-width: none;
}

/* Layout toggle */
.rb-layout-toggle {
    margin-bottom: 0.5rem;
}

.rb-layout-toggle__btns {
    display: flex;
    gap: 0;
    border: 1px solid var(--rb-gray-200);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.rb-layout-toggle__btn {
    flex: 1;
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: var(--rb-font);
    border: none;
    background: white;
    color: var(--rb-gray-500);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.rb-layout-toggle__btn:not(:last-child) {
    border-right: 1px solid var(--rb-gray-200);
}

.rb-layout-toggle__btn--active {
    background: var(--rb-primary);
    color: white;
}

.rb-layout-toggle__btn:hover:not(.rb-layout-toggle__btn--active) {
    background: var(--rb-gray-100);
}

/* Fix Bootstrap .row/.col grid inside bill card values (e.g. Last Action date/text overlap) */
.rb-bill-card__value .row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.875rem;
    margin-left: 0;
    margin-right: 0;
}

.rb-bill-card__value .row > .col,
.rb-bill-card__value .row > [class*="col-"] {
    width: auto !important;
    flex: none;
    padding: 0;
}

.rb-bill-card__value .row > .col:first-child,
.rb-bill-card__value .row > [class*="col-"]:first-child {
    min-width: 78px;
    white-space: nowrap;
    flex-shrink: 0;
}

.rb-bill-card__value > .row > .col-sm-11,
.rb-bill-card__value > .row > .col:last-child {
    flex: 1;
}

/* Prevent Popper from setting a constrained max-height on the Export dropdown */
.report-builder .dropdown-menu,
.report-builder .dropup .dropdown-menu {
    max-height: none !important;
    overflow: visible !important;
}

.rb-share {
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
}

.rb-share .rb-toggle {
    font-size: 0.85rem;
    font-weight: 500;
}

.rb-share__link {
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: white;
    border: 1px solid var(--rb-gray-200);
    border-radius: 6px;
}

.rb-share__link .rb-field-label {
    margin-bottom: 0.25rem;
}

.rb-share__link-row {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.rb-share__link-row input {
    font-size: 0.75rem;
    color: var(--rb-gray-700);
    background: var(--rb-gray-50);
    flex: 1;
    min-width: 0;
    margin: 0;
}

.rb-share__copy {
    border: none;
    background: none;
    padding: 0 4px;
    color: var(--rb-gray-500);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}

.rb-share__copy:hover {
    color: var(--rb-primary);
}

.rb-share__hint {
    font-size: 0.72rem;
    color: var(--rb-gray-500);
    margin: 0.4rem 0 0;
    line-height: 1.35;
}

.rb-share__hint--warn {
    color: var(--rb-gray-600);
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    padding: 0.5rem 0.625rem;
    margin-top: 0.5rem;
}

.rb-share__hint--warn i {
    color: var(--rb-amber);
    margin-right: 4px;
}

.rb-share__hint--ok {
    color: var(--rb-gray-700);
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    padding: 0.5rem 0.625rem;
    margin-top: 0.5rem;
}

.rb-share__hint--ok i {
    color: #059669;
    margin-right: 4px;
}

/* "Email this report" panel. Same column rhythm as .rb-share. */
.rb-email-now {
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
}

.rb-email-now .form-control-sm {
    font-size: 0.8rem;
}

/* Email schedule panel. Mirrors .rb-share above -- same padding, same hint and
   toggle styles -- so the two blocks read as one column of settings. */
.rb-schedule {
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
}

/* Master switch everything else hangs off, so it carries the weight. This used
   to be a blanket `.rb-schedule .rb-toggle` rule, which gave the nested
   only-send option the same size and weight and made it read as a second master
   crammed between two unrelated blocks. */
.rb-schedule__master {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rb-gray-700);
}

.rb-schedule__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Caption for the timing controls: sits tight beneath them, since it describes
   what they add up to. */
.rb-schedule__next {
    font-size: 0.72rem;
    color: var(--rb-gray-500);
    line-height: 1.4;
    margin: 0.5rem 0 0;
}

.rb-schedule__next strong {
    color: var(--rb-gray-700);
    font-weight: 600;
}

.rb-schedule__next-sub {
    display: block;
    margin-top: 2px;
}

/* Options that change WHETHER a send happens, as opposed to when. Boxed like
   the recipients block so the panel reads as three distinct decisions: timing,
   conditions, content. */
.rb-schedule__options {
    margin-top: 0.75rem;
    padding: 0.5rem 0.625rem;
    background: white;
    border: 1px solid var(--rb-gray-200);
    border-radius: 6px;
}

.rb-toggle--option {
    align-items: flex-start;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Indent matches .rb-toggle--sub so the help text lines up under the label,
   clear of the checkbox. */
.rb-schedule__option-hint {
    font-size: 0.72rem;
    color: var(--rb-gray-500);
    line-height: 1.35;
    margin: 0.125rem 0 0 1.375rem;
}

.rb-schedule__note {
    margin-top: 0.75rem;
}

/* Secondary action, not a primary one: the old .rb-field-select-all__btn styling
   rendered it bold purple, heavier than the "Also send to" heading above it. */
.rb-schedule__add {
    border: none;
    background: none;
    padding: 0.25rem 0;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rb-primary);
    cursor: pointer;
}

.rb-schedule__add:hover {
    text-decoration: underline;
}

/* Email preview modal: wide enough to show the email at its real width.
   The body shell in email/scheduled-report.blade.php is max-width 700px, so
   anything narrower than roughly 780px makes the preview lie about the layout.

   Two classes on purpose. The base .rb-modal caps max-width at 480px and is
   defined LOWER in this file, so a single-class override loses on source order
   no matter what value it carries. */
.rb-modal.rb-preview-modal {
    width: 92%;
    max-width: 1000px;
    max-height: 90vh;
}

.rb-preview-modal__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    min-height: 0; /* lets the iframe shrink inside the flex column */
}

.rb-preview-modal__note {
    font-size: 0.75rem;
    color: var(--rb-gray-500);
    margin: 0;
    flex-shrink: 0;
}

/* Grows to fill whatever the modal height leaves after the header and note,
   rather than a fixed height that fights .rb-modal's max-height. */
.rb-preview-modal__frame {
    width: 100%;
    flex: 1;
    min-height: 55vh;
    border: 1px solid var(--rb-gray-200);
    border-radius: 6px;
    background: #f3f4f6;
}

/* ---------------------------------------------------------------------------
   Scheduled Reports management table
   --------------------------------------------------------------------------- */

/* The actions are POST forms (pause, send, delete all change state), but they
   have to look like the plain anchor icons on the My Reports list. Inline forms
   plus stripped button chrome gets them onto one line at the same weight. */
.rs-actions form {
    display: inline;
}

.rs-action {
    border: 0;
    background: none;
    padding: 0;
    line-height: 1;
    color: var(--rb-primary);
    cursor: pointer;
    vertical-align: baseline;
}

.rs-action:hover,
.rs-actions a:hover {
    opacity: 0.65;
}

.rs-action--danger {
    color: var(--rb-danger);
}

/* Rows carry two-line cells (date over time, stacked delivery attempts), so
   without this the single-line cells sit at the top and the row reads ragged. */
.rs-table td {
    vertical-align: middle;
}

.rb-schedule__field {
    min-width: 0;
}

/* Two per row, but only inside the grid. The note textarea reuses this class
   outside it and must stay full width. Without the max-width a lone trailing
   field (Time, when the frequency has no day picker) stretches to full width
   and reads as unbalanced against the pair above it. */
.rb-schedule__grid > .rb-schedule__field {
    flex: 1 1 calc(50% - 0.25rem);
    max-width: calc(50% - 0.25rem);
}

@media (max-width: 480px) {
    .rb-schedule__grid > .rb-schedule__field {
        flex-basis: 100%;
        max-width: 100%;
    }
}

.rb-schedule__field .rb-field-label {
    margin-bottom: 0.25rem;
}

.rb-schedule__field textarea {
    resize: vertical;
}

.rb-schedule__recipients {
    margin-top: 0.75rem;
    padding: 0.5rem 0.625rem;
    background: white;
    border: 1px solid var(--rb-gray-200);
    border-radius: 6px;
}

.rb-schedule__recipient-row {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    margin-top: 0.375rem;
}

.rb-schedule__recipient-row input {
    font-size: 0.75rem;
    flex: 1;
    min-width: 0;
    margin: 0;
}

.rb-schedule__remove {
    border: none;
    background: none;
    padding: 0 4px;
    color: var(--rb-gray-500);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}

.rb-schedule__remove:hover {
    color: var(--rb-danger);
}

.rb-schedule__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.75rem;
}

/* Copy settings from a saved report */
.rb-copy-settings {
    padding: 0 0.75rem;
    margin-bottom: 0.75rem;
}

/* This app carries no .form-select width rule, so a select sizes to its widest
   option — and report titles are long enough to blow past the settings column. */
.rb-copy-settings select {
    width: 100%;
    max-width: 100%;
}

.rb-copy-settings__hint {
    font-size: 0.72rem;
    color: var(--rb-gray-500);
    margin: 4px 0 0;
    line-height: 1.35;
}

.rb-copy-settings__applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 4px;
    background: var(--rb-primary-tint);
    font-size: 0.75rem;
    color: var(--rb-gray-700);
}

.rb-copy-settings__applied-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-copy-settings__applied-text i {
    color: var(--rb-primary);
    margin-right: 4px;
}

.rb-copy-settings__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.rb-copy-settings__btn {
    border: none;
    background: none;
    padding: 0;
    color: var(--rb-primary);
    font-family: var(--rb-font);
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
}

.rb-copy-settings__btn:hover {
    text-decoration: underline;
}

.rb-copy-settings__dismiss {
    border: none;
    background: none;
    padding: 0;
    color: var(--rb-gray-400);
    line-height: 1;
    cursor: pointer;
}

.rb-copy-settings__dismiss:hover {
    color: var(--rb-gray-600);
}

.rb-field-select-all {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
}

.rb-field-select-all__btn {
    border: none;
    background: none;
    padding: 0;
    color: var(--rb-primary);
    font-family: var(--rb-font);
    font-weight: 600;
    cursor: pointer;
}

.rb-field-select-all__btn:hover {
    text-decoration: underline;
}

.rb-field-select-all__btn i {
    margin-right: 3px;
}

.rb-field-select-all__sep {
    color: var(--rb-gray-300);
}

/* News / Press Release items */
.rb-news-item {
    padding: 3px 0;
    line-height: 1.4;
}

.rb-news-item + .rb-news-item {
    border-top: 1px solid var(--rb-gray-50);
}

.rb-news-item__source {
    color: var(--rb-gray-500);
    font-style: italic;
    margin-left: 4px;
}

/* Truncation with Show more/less. Clip from first paint so there's no flash. */
.rb-truncate {
    position: relative;
    overflow: hidden;
    max-height: 7.3em; /* ~5 lines at line-height 1.45 */
}

.rb-truncate--fits,
.rb-truncate--expanded {
    max-height: none;
}

.rb-truncate--clipped:not(.rb-truncate--expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.6em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
}

/* Row-count truncation (used for History). Hiding/showing is handled in JS so
   separator <hr> elements between actions don't mis-count via :nth-child. */

/* Trailing separator after the final action looks wrong — hide it. */
.rb-bill-card__value--actions hr:last-child,
.rb-truncate-rows > hr:last-child {
    display: none !important;
}

.rb-truncate-toggle {
    border: none;
    background: none;
    padding: 4px 0 2px;
    color: var(--rb-primary);
    font-family: var(--rb-font);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rb-truncate-toggle:hover {
    text-decoration: underline;
}

.rb-truncate-toggle i {
    font-size: 0.65rem;
    transition: transform 0.15s ease;
}

.rb-truncate-toggle--expanded i {
    transform: rotate(180deg);
}

.rb-ai-disclaimer {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--rb-gray-400);
    margin-top: 4px;
}

/* Group Headers */
/* Solid primary fill so the group breaks are obvious when scrolling a long
   report; the old gray-100 bar was easy to scroll straight past. */
.rb-group-header {
    font-family: var(--rb-font);
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    padding: 0.625rem 0.875rem;
    margin: 1.25rem 0 0.625rem;
    background: var(--rb-primary);
    border-radius: 6px;
}

.rb-group-header__label {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin-right: 4px;
}

/* More indicator */
.rb-load-more {
    display: flex;
    justify-content: center;
    padding: 1rem;
    margin-top: 0.5rem;
}

/* Empty State */
.rb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    min-height: 300px;
}

.rb-empty-state__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--rb-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--rb-gray-400);
    font-size: 1.5rem;
}

.rb-empty-state__title {
    font-family: var(--rb-font);
    font-weight: 600;
    color: var(--rb-gray-700);
    margin-bottom: 0.5rem;
}

.rb-empty-state__text {
    color: var(--rb-gray-500);
    font-size: 0.9rem;
    max-width: 300px;
}

/* Skeleton loading */
.rb-skeleton-card {
    border: 1px solid var(--rb-gray-200);
    border-left: 4px solid var(--rb-gray-200);
    border-radius: var(--rb-radius);
    padding: 1rem;
    margin-bottom: 0.875rem;
}

.rb-skeleton {
    background: var(--rb-gray-200);
    border-radius: 4px;
    animation: rb-pulse 1.5s ease-in-out infinite;
}

.rb-skeleton--title {
    height: 18px;
    width: 60%;
    margin-bottom: 0.75rem;
}

.rb-skeleton--line {
    height: 12px;
    width: 90%;
    margin-bottom: 0.5rem;
}

.rb-skeleton--short {
    width: 45%;
}

@keyframes rb-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Collapsible section (Quick Start Templates) */
.rb-collapsible {
    margin-bottom: 0.75rem;
}

.rb-collapsible__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rb-gray-200);
    border-radius: 6px;
    background: white;
    font-family: var(--rb-font);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--rb-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.rb-collapsible__toggle:hover {
    border-color: var(--rb-primary);
    color: var(--rb-primary);
}

.rb-collapsible__toggle[aria-expanded="true"] .rb-collapsible__chevron {
    transform: rotate(180deg);
}

.rb-collapsible__chevron {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}

.rb-collapsible__toggle i:first-child {
    margin-right: 6px;
}

/* Form controls — consistent styling for inputs and selects */
.report-builder .form-select,
.report-builder .form-control {
    font-size: 0.82rem;
    border: 1px solid var(--rb-gray-200);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    transition: border-color 0.15s ease;
}

/* Match buttons inside input-groups to the form-control height */
.report-builder .input-group .btn {
    font-size: 0.82rem;
    padding: 0.4rem 0.7rem;
    line-height: 1.5;
    border-width: 1px;
}

.report-builder .form-select:focus,
.report-builder .form-control:focus {
    border-color: var(--rb-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Bill source */
.rb-bill-source .form-select[multiple] {
    padding: 0;
}


.rb-bill-source .form-select[multiple] option {
    padding: 4px 8px;
}

/* Bill tags */
.rb-bill-tags {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.rb-bill-tag {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 4px 10px;
    background: var(--rb-primary-tint);
    color: var(--rb-primary);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 0;
}

.rb-bill-tag__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.rb-bill-tag__remove {
    border: none;
    background: none;
    color: var(--rb-primary);
    opacity: 0.5;
    cursor: pointer;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.rb-bill-tag__remove:hover {
    opacity: 1;
    color: #dc2626;
}

/* List picker button */
.rb-list-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px dashed var(--rb-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--rb-primary);
    font-family: var(--rb-font);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rb-list-picker-btn:hover {
    background: var(--rb-primary-tint);
}

/* Tracking list picker modal */
.rb-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10500;
}

.rb-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    background: white;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    z-index: 10501;
    display: flex;
    flex-direction: column;
}

.rb-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rb-gray-200);
}

.rb-modal__title {
    font-family: var(--rb-font);
    font-weight: 700;
    font-size: 1rem;
    color: var(--rb-gray-900);
    margin: 0;
}

.rb-modal__close {
    border: none;
    background: none;
    color: var(--rb-gray-400);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.rb-modal__close:hover {
    color: var(--rb-gray-700);
}

.rb-modal__body {
    padding: 0.75rem 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.rb-modal__list-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s ease;
    margin: 0;
}

.rb-modal__list-item:hover {
    background: var(--rb-gray-100);
}

.rb-modal__list-item input[type="checkbox"] {
    accent-color: var(--rb-primary);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.rb-modal__list-name {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rb-gray-800);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-modal__list-count {
    font-size: 0.75rem;
    color: var(--rb-gray-400);
    flex-shrink: 0;
}

.rb-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--rb-gray-200);
}

/* Review section */
.rb-review {
    padding: 0.5rem 0;
}

/* Logo Selector (compact row in left panel) */
.rb-logo-selector {
    margin-bottom: 0.75rem;
}

.rb-logo-selector__label {
    font-family: var(--rb-font);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--rb-gray-600);
    margin-bottom: 0.35rem;
    display: block;
}

.rb-logo-selector__label i {
    margin-right: 4px;
    color: var(--rb-primary);
}

.rb-logo-selector__current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: white;
    border: 1px solid var(--rb-gray-200);
    border-radius: 6px;
}

.rb-logo-selector__thumb {
    width: 36px;
    height: 28px;
    object-fit: contain;
    border-radius: 3px;
    background: var(--rb-gray-50);
    flex-shrink: 0;
}

.rb-logo-selector__name {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--rb-gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.rb-logo-selector__change {
    color: var(--rb-primary) !important;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.rb-logo-selector__remove {
    color: var(--rb-gray-400) !important;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.rb-logo-selector__remove:hover {
    color: #dc2626 !important;
}

.rb-logo-selector__btn {
    width: 100%;
    justify-content: center;
}

/* Logo Modal (wider than list picker) */
.rb-logo-modal {
    max-width: 560px;
}

/* Logo Grid */
.rb-logo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.rb-logo-card {
    border: 2px solid var(--rb-gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
    background: white;
}

.rb-logo-card:hover {
    border-color: var(--rb-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.rb-logo-card--selected {
    border-color: var(--rb-primary);
    box-shadow: 0 0 0 2px var(--rb-focus-ring, rgba(24, 152, 139, 0.2));
}

.rb-logo-card__img-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    padding: 0.5rem;
    background: var(--rb-gray-50);
}

.rb-logo-card__img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.rb-logo-card__check {
    position: absolute;
    top: 4px;
    right: 4px;
    color: var(--rb-primary);
    font-size: 1.1rem;
}

.rb-logo-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem;
    border-top: 1px solid var(--rb-gray-100);
}

.rb-logo-card__name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rb-gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.rb-logo-card__delete {
    border: none;
    background: none;
    color: var(--rb-gray-300);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.rb-logo-card__delete:hover {
    color: #dc2626;
}

/* Logo empty state */
.rb-logo-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--rb-gray-400);
}

.rb-logo-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.rb-logo-empty p {
    font-size: 0.85rem;
    margin: 0;
}

/* Logo Upload */
.rb-logo-upload {
    border-top: 1px solid var(--rb-gray-200);
    padding-top: 0.75rem;
}

.rb-logo-upload__header {
    font-family: var(--rb-font);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--rb-gray-600);
    margin-bottom: 0.5rem;
}

.rb-logo-upload__header i {
    color: var(--rb-primary);
    margin-right: 4px;
}

.rb-logo-upload__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rb-logo-upload__row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.rb-logo-upload__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 2px dashed var(--rb-gray-300);
    border-radius: var(--rb-radius);
    background: var(--rb-gray-50);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    text-align: center;
}

.rb-logo-upload__dropzone:hover {
    border-color: var(--rb-primary);
    background: var(--rb-primary-tint);
}

.rb-logo-upload__dropzone-icon {
    font-size: 1.5rem;
    color: var(--rb-gray-400);
    margin-bottom: 0.35rem;
}

.rb-logo-upload__dropzone:hover .rb-logo-upload__dropzone-icon {
    color: var(--rb-primary);
}

.rb-logo-upload__dropzone-icon--success {
    color: var(--rb-green);
}

.rb-logo-upload__dropzone:hover .rb-logo-upload__dropzone-icon--success {
    color: var(--rb-green);
}

.rb-logo-upload__dropzone-text {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--rb-gray-600);
    display: block;
}

.rb-logo-upload__dropzone-hint {
    font-size: 0.72rem;
    color: var(--rb-gray-400);
    display: block;
    margin-top: 2px;
}

.rb-logo-upload__preview {
    max-height: 60px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 4px;
    margin-bottom: 0.25rem;
}

.rb-logo-upload__error {
    font-size: 0.78rem;
    color: #dc2626;
}

.rb-logo-upload__hint {
    font-size: 0.78rem;
    color: var(--rb-gray-700);
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    padding: 6px 10px;
}

.rb-logo-upload__hint i {
    color: var(--rb-amber);
    margin-right: 4px;
}

.rb-logo-upload .btn-primary {
    background: var(--rb-primary);
    border-color: var(--rb-primary);
}

.rb-logo-upload .btn-primary:hover {
    background: #147d72;
    border-color: #147d72;
}

/* Save confirmation banner */
.rb-save-banner {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.rb-save-banner i {
    color: #10b981;
    margin-right: 4px;
}

.rb-save-banner a {
    color: var(--rb-primary);
    font-weight: 600;
    margin-left: 0.25rem;
}

/* Preview logo */
.rb-preview__logo {
    text-align: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
}

.rb-preview__logo img {
    max-height: 100px;
    max-width: 60%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: inline-block;
}

/* Responsive */
@media (max-width: 991.98px) {
    .rb-settings {
        border-right: none;
        border-bottom: 1px solid var(--rb-gray-200);
    }

    .rb-settings__inner {
        max-height: none;
    }

    .rb-preview {
        max-height: none;
        min-height: 400px;
    }
}

/* MO bill filters (bill source panel). One row per filter, the day count
   inline with its sentence, in a quiet box so it reads as a filter, not a
   field toggle. */
.rb-mo-filters {
    background: var(--rb-gray-50);
    border: 1px solid var(--rb-gray-200);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}
.rb-mo-filters__title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rb-gray-500);
    margin-bottom: 0.25rem;
}
.rb-mo-filters__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.rb-mo-filters__row + .rb-mo-filters__row {
    margin-top: 0.25rem;
}
.rb-mo-filters__days {
    width: 4.5rem;
    padding: 1px 0.4rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--rb-gray-700);
    background-color: #fff;
    border: 1px solid var(--rb-gray-300);
    border-radius: 4px;
}
.rb-mo-filters__days:disabled {
    color: var(--rb-gray-400);
    background-color: var(--rb-gray-100);
}
.rb-mo-filters__unit {
    font-size: 0.82rem;
    color: var(--rb-gray-700);
}