/* Report designer (docs/report-designer.md). Look and feel after @aihive/components' Table (views bar, panels) and
   the dashboards. Logical properties (inline-start / inline-end) throughout, so the same rules serve Arabic and English. */

.rd-page {
  --rd-surface: #ffffff;
  --rd-ground: #f6f7f9;
  --rd-border: #e3e6ea;
  --rd-border-strong: #c9ced6;
  --rd-text: #1d2330;
  --rd-muted: #747c88;
  --rd-accent: #2e6da4;
  --rd-accent-soft: #eaf1f8;
  --rd-danger: #c9302c;
  --rd-radius: 8px;
  --rd-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  --rd-shadow-lifted: 0 12px 32px rgba(16, 24, 40, 0.16), 0 2px 8px rgba(16, 24, 40, 0.08);
  display: flex;
  gap: 16px;
  align-items: stretch;
  min-height: calc(100vh - 140px);
  color: var(--rd-text);
}

.rd-page *,
.rd-page *::before,
.rd-page *::after,
.rd-admin * {
  box-sizing: border-box;
}

.rd-muted {
  color: var(--rd-muted);
}

/* in RTL the "forward" chevrons point the other way */
[dir="rtl"] .rd-flip,
.rtl .rd-flip {
  transform: scaleX(-1);
}

.rd-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--rd-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.rd-icon-btn:hover:not([disabled]) {
  color: var(--rd-text);
  background: #eef0f3;
}

.rd-icon-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* ------------------------------------------------------------------- side list */

.rd-side {
  display: flex;
  flex-direction: column;
  flex: 0 0 260px;
  max-height: calc(100vh - 140px);
  position: sticky;
  top: 70px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow);
}

.rd-side-closed .rd-side {
  display: none;
}

.rd-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 6px;
}

.rd-side-head h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.rd-side-search,
.rd-picker-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 10px 8px;
  padding: 0 8px;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  color: var(--rd-muted);
}

.rd-side-search input,
.rd-picker-search input {
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--rd-text);
}

.rd-side-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 6px 8px;
}

.rd-side-group {
  margin-block-end: 10px;
}

.rd-side-title {
  padding: 6px 8px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rd-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.rd-side-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  text-align: start;
  color: var(--rd-text);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.rd-side-item:hover {
  background: #f1f3f5;
}

.rd-side-item.active {
  color: var(--rd-accent);
  background: var(--rd-accent-soft);
  font-weight: 600;
}

.rd-side-item .fa {
  flex: 0 0 auto;
  width: 16px;
  color: var(--rd-muted);
}

.rd-side-item.active .fa {
  color: var(--rd-accent);
}

.rd-side-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rd-side-meta {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: normal;
  color: var(--rd-muted);
}

.rd-side-flag {
  font-size: 11px;
}

.rd-side-empty,
.rd-side-loading {
  padding: 10px;
  color: var(--rd-muted);
  text-align: center;
}

.rd-side-foot {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--rd-border);
}

/* -------------------------------------------------------------------- main */

.rd-main {
  flex: 1;
  min-width: 0;
  position: relative;
}

.rd-side-open {
  position: absolute;
  top: 8px;
  inset-inline-start: -4px;
  z-index: 2;
}

.rd-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 360px;
  color: var(--rd-muted);
  text-align: center;
  background: var(--rd-surface);
  border: 1px dashed var(--rd-border-strong);
  border-radius: var(--rd-radius);
}

.rd-welcome > .fa {
  font-size: 42px;
  margin-block-end: 12px;
  color: var(--rd-border-strong);
}

.rd-welcome h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--rd-text);
}

.rd-report {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rd-side-closed .rd-report {
  padding-inline-start: 30px;
}

/* ----------------------------------------------------------------- toolbar */

.rd-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.rd-bar-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}

.rd-bar-title > .fa {
  color: var(--rd-muted);
}

.rd-bar-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.rd-count {
  color: var(--rd-muted);
}

.rd-elapsed {
  padding: 0 6px;
  font-size: 11px;
  color: var(--rd-muted);
  background: #f1f3f5;
  border-radius: 999px;
}

.rd-subtitle {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--rd-muted);
}

.rd-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.rd-sep {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: var(--rd-border);
}

.rd-menu-wrap {
  position: relative;
}

.rd-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  color: var(--rd-text);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.rd-bar-btn:hover:not([disabled]) {
  background: #eef0f3;
}

.rd-bar-btn.active {
  color: var(--rd-accent);
  background: var(--rd-accent-soft);
}

.rd-bar-btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

.rd-bar-btn .fa {
  color: inherit;
}

.rd-dirty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-end: 8px;
  padding: 2px 4px 2px 10px;
  background: #fff8e6;
  border: 1px solid #f3dfa8;
  border-radius: 999px;
}

[dir="rtl"] .rd-dirty,
.rtl .rd-dirty {
  padding: 2px 10px 2px 4px;
}

.rd-dirty-label {
  font-size: 12px;
  color: #8a6d1f;
  margin-inline-end: 4px;
}

.rd-dirty-btn {
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
  color: var(--rd-text);
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 999px;
  cursor: pointer;
}

.rd-dirty-btn.rd-accent {
  color: #fff;
  background: var(--rd-accent);
  border-color: var(--rd-accent);
}

/* ------------------------------------------------------------------ panels */

.rd-pop {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 1050;
  width: 340px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px;
  text-align: start;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-lifted);
}

.rd-pop-wide {
  width: 620px;
  max-width: calc(100vw - 40px);
}

.rd-pop-menu {
  width: 240px;
  padding: 6px;
}

.rd-pop-empty {
  padding: 8px 4px 12px;
  color: var(--rd-muted);
}

.rd-pop-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--rd-muted);
}

.rd-pop-label {
  display: block;
  margin: 6px 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rd-muted);
}

.rd-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  text-align: start;
  color: var(--rd-text);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.rd-menu-item:hover {
  background: #f1f3f5;
}

.rd-menu-item .fa {
  width: 16px;
  color: var(--rd-muted);
}

.rd-menu-item.rd-danger,
.rd-menu-item.rd-danger .fa {
  color: var(--rd-danger);
}

.rd-xlsx {
  color: #1d6f42 !important;
}

.rd-pdf {
  color: #c9302c !important;
}

.rd-menu-sub {
  margin: 4px 0;
  padding: 4px 8px 8px;
  border-top: 1px solid var(--rd-border);
  border-bottom: 1px solid var(--rd-border);
}

.rd-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 8px;
  color: var(--rd-accent);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.rd-add:hover {
  background: var(--rd-accent-soft);
}

.rd-add-select {
  margin-top: 8px;
}

.rd-filter-row,
.rd-sort-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0;
}

.rd-filter-col {
  flex: 0 0 150px;
  min-width: 0;
  padding-top: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rd-sort-row .rd-filter-col {
  flex: 1;
  padding-top: 2px;
}

.rd-sort-row {
  align-items: center;
}

.rd-sort-n {
  width: 18px;
  height: 18px;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  color: var(--rd-muted);
  background: #f1f3f5;
  border-radius: 50%;
}

.rd-filter-col .fa {
  width: 14px;
  color: var(--rd-muted);
}

.rd-filter-op {
  flex: 0 0 140px;
}

.rd-filter-value {
  flex: 1;
  min-width: 0;
}

.rd-range {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rd-range > * {
  flex: 1;
  min-width: 0;
}

.rd-range > span {
  flex: 0 0 auto;
}

.rd-remove {
  flex: 0 0 auto;
  margin-top: 1px;
}

.rd-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rd-list input {
  flex: 1 1 140px;
}

.rd-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  max-height: 140px;
  overflow-y: auto;
  padding-top: 4px;
}

.rd-suggest button {
  padding: 1px 8px;
  font-size: 12px;
  background: #f1f3f5;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.rd-suggest button.picked {
  color: var(--rd-accent);
  background: var(--rd-accent-soft);
  border-color: #c7d9ec;
}

.rd-picker {
  margin-top: 6px;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
}

.rd-picker .rd-picker-search {
  margin: 6px;
}

.rd-picker-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 0 4px 4px;
}

.rd-picker-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  text-align: start;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.rd-picker-list button:hover {
  background: #f1f3f5;
}

.rd-picker-list .fa {
  width: 14px;
  color: var(--rd-muted);
}

.rd-pop > .rd-picker-search {
  margin: 0 0 8px;
}

.rd-fields {
  max-height: 46vh;
  overflow-y: auto;
}

.rd-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 6px;
}

.rd-field:hover {
  background: #f6f7f9;
}

.rd-field > .fa {
  width: 14px;
  color: var(--rd-muted);
}

.rd-field-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rd-field-off .rd-field-name {
  color: var(--rd-muted);
}

.rd-fields-title {
  margin: 10px 4px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rd-muted);
}

.rd-col-menu {
  position: fixed;
  top: auto;
  inset-inline-end: auto;
  padding: 6px;
}

.rd-col-menu-head {
  padding: 2px 2px 6px;
}

/* -------------------------------------------------------- parameters / chips */

.rd-params {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  padding: 10px 12px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
}

.rd-param {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 150px;
}

.rd-param label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--rd-muted);
}

.rd-param input[type="checkbox"] {
  margin: 8px 0;
}

.rd-req {
  color: var(--rd-danger);
  margin-inline-start: 2px;
}

.rd-param-missing .form-control {
  border-color: #e4b9b8;
}

.rd-param-note {
  flex-basis: 100%;
  font-size: 12px;
  color: #8a6d1f;
}

.rd-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 10px;
  font-size: 12px;
  background: #f1f3f5;
  border-radius: 999px;
}

.rd-chip-filter {
  color: var(--rd-accent);
  background: var(--rd-accent-soft);
  cursor: pointer;
}

.rd-chip .fa-times {
  cursor: pointer;
  opacity: 0.6;
}

.rd-chip .fa-times:hover {
  opacity: 1;
}

.rd-link {
  padding: 0 4px;
  font-size: 12px;
  color: var(--rd-muted);
  background: transparent;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.rd-error {
  margin: 0;
}

/* -------------------------------------------------------------------- grid */

.rd-grid-wrap {
  position: relative;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow);
}

.rd-grid-scroll {
  position: relative;
  max-height: calc(100vh - 290px);
  min-height: 220px;
  overflow: auto;
  border-radius: var(--rd-radius);
}

.rd-grid {
  min-width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.rd-grid th,
.rd-grid td {
  padding: 7px 10px;
  /* report text is never cut: long values and headers wrap inside the column width */
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
  border-bottom: 1px solid #eef0f3;
}

.rd-grid thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-inline-end: 34px;
  font-weight: 600;
  color: #4a5260;
  background: #f8f9fb;
  border-bottom: 1px solid var(--rd-border);
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.rd-grid thead th:hover {
  background: #f1f3f5;
}

.rd-grid thead th.rd-sorted {
  color: var(--rd-accent);
}

.rd-grid .rd-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.rd-th-sort {
  margin-inline-start: 4px;
  font-size: 11px;
}

.rd-th-sort sub {
  bottom: 0;
}

.rd-th-menu {
  position: absolute;
  top: 50%;
  inset-inline-end: 8px;
  width: 20px;
  height: 22px;
  margin-top: -11px;
  padding: 0;
  color: var(--rd-muted);
  background: transparent;
  border: 0;
  border-radius: 4px;
  opacity: 0;
  cursor: pointer;
}

.rd-grid thead th:hover .rd-th-menu,
.rd-th-menu:focus {
  opacity: 1;
}

.rd-th-menu:hover {
  color: var(--rd-text);
  background: #e4e7eb;
}

.rd-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: -3px;
  width: 7px;
  z-index: 2;
  cursor: col-resize;
}

.rd-resize:hover {
  background: rgba(46, 109, 164, 0.25);
}

.rd-grid tbody tr:hover td {
  background: #f8fafc;
}

.rd-grid tr.rd-group td {
  font-weight: 600;
  background: #f4f6f9;
  border-top: 1px solid var(--rd-border);
}

.rd-group-count {
  display: inline-block;
  margin-inline-start: 4px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: normal;
  color: var(--rd-muted);
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 999px;
}

.rd-group-total {
  margin-inline-start: 8px;
}

.rd-grid tfoot td {
  position: sticky;
  bottom: 0;
  font-weight: 600;
  background: #f8f9fb;
  border-top: 2px solid var(--rd-border-strong);
  border-bottom: 0;
}

.rd-agg {
  font-variant-numeric: tabular-nums;
}

.rd-grid-empty {
  padding: 48px 12px;
  text-align: center;
  color: var(--rd-muted);
}

.rd-grid-empty .fa {
  font-size: 28px;
  margin-block-end: 8px;
}

.rd-grid-loading {
  position: absolute;
  top: 44px;
  inset-inline-start: 50%;
  font-size: 22px;
  color: var(--rd-accent);
}

.rd-busy tbody {
  opacity: 0.45;
  transition: opacity 0.15s;
}

.rd-dragging,
.rd-dragging * {
  cursor: grabbing !important;
}

.rd-drop-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 3;
  background: var(--rd-accent);
  pointer-events: none;
}

/* ------------------------------------------------------------------- pager */

.rd-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--rd-muted);
}

.rd-page-size {
  width: auto;
}

.rd-pager-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
}

.rd-page-no {
  padding: 0 8px;
}

/* ------------------------------------------------------------------ dialogs */

.rd-dialog-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.rd-dialog-actions .pull-right {
  margin-inline-start: auto;
  float: none !important;
}

.rd-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.rd-admin-head p {
  margin: 0;
}

.rd-admin-table td,
.rd-admin-table th {
  vertical-align: middle !important;
}

.rd-admin-table code {
  font-size: 11px;
}

.rd-admin-scroll {
  max-height: 46vh;
  overflow: auto;
}

.rd-click {
  cursor: pointer;
}

@media (max-width: 900px) {
  .rd-page {
    flex-direction: column;
  }

  .rd-side {
    position: static;
    flex-basis: auto;
    max-height: 280px;
  }

  .rd-pop-wide {
    width: calc(100vw - 40px);
  }

  .rd-filter-row {
    flex-wrap: wrap;
  }

  .rd-filter-col,
  .rd-filter-op {
    flex-basis: 45%;
  }
}

/* --------------------------------------------------------- filter builder */

.rd-fb-dock {
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow);
}

.rd-fb-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rd-border);
}

.rd-fb-icon {
  color: var(--rd-accent);
}

.rd-fb-title {
  font-weight: 600;
}

.rd-fb-match {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 8px;
  padding-inline-start: 12px;
  color: var(--rd-muted);
  border-inline-start: 1px solid var(--rd-border);
}

.rd-fb-match select {
  width: auto;
  height: 28px;
  padding: 0 8px;
}

.rd-fb-spacer {
  flex: 1;
}

.rd-fb-clear {
  color: var(--rd-muted);
}

.rd-fb-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
}

.rd-fb-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 16px;
  color: var(--rd-accent);
  background: var(--rd-accent-soft);
  border-radius: 50%;
}

.rd-fb-empty-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.rd-fb-items {
  padding: 10px 14px 6px;
}

.rd-fb-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}

.rd-fb-connector {
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  min-height: 30px;
  font-size: 12px;
  color: var(--rd-muted);
}

.rd-fb-connector select {
  width: 100%;
  height: 30px;
  padding: 0 6px;
}

.rd-fb-word {
  padding: 3px 10px;
  font-size: 12px;
  color: var(--rd-muted);
  background: #f1f3f5;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.rd-fb-word:hover {
  color: var(--rd-accent);
  background: var(--rd-accent-soft);
}

.rd-fb-field {
  flex: 0 0 200px;
  min-width: 0;
}

.rd-fb-op {
  flex: 0 0 160px;
}

.rd-fb-value {
  flex: 1;
  min-width: 0;
  max-width: 520px;
}

.rd-fb-row .rd-remove {
  margin-top: 1px;
}

.rd-fb-group {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  background: #f8f9fb;
  border: 1px solid var(--rd-border);
  border-inline-start: 3px solid #c7d9ec;
  border-radius: var(--rd-radius);
}

.rd-fb-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rd-muted);
}

.rd-fb-group-empty {
  padding: 4px 0;
  font-size: 12px;
  color: var(--rd-muted);
}

.rd-fb-group .rd-fb-connector {
  flex-basis: 60px;
}

.rd-fb-group .rd-fb-field {
  flex-basis: 180px;
}

.rd-fb-group .rd-fb-op {
  flex-basis: 140px;
}

.rd-fb-add-inline {
  padding-inline-start: 0;
}

.rd-fb-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fafbfc;
  border-top: 1px solid var(--rd-border);
  border-radius: 0 0 var(--rd-radius) var(--rd-radius);
}

.rd-fb-foot .btn .fa {
  margin-inline-end: 4px;
}

.rd-fb-summary {
  font-size: 12px;
}

.rd-chip-logic {
  margin: 0 2px;
  font-size: 11px;
  color: var(--rd-muted);
}

@media (max-width: 900px) {
  .rd-fb-row {
    flex-wrap: wrap;
  }

  .rd-fb-field,
  .rd-fb-op,
  .rd-fb-value {
    flex-basis: 100%;
    max-width: none;
  }
}

/* ------------------------------------------------------- grouping panel */

.rd-gp-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.rd-gp-section {
  padding: 12px 14px;
}

.rd-gp-section + .rd-gp-section {
  border-inline-start: 1px solid var(--rd-border);
}

.rd-gp-section-title {
  margin-bottom: 8px;
  font-weight: 600;
}

.rd-gp-sub {
  font-weight: normal;
  font-size: 12px;
}

.rd-gp-empty {
  padding: 4px 0 10px;
  font-size: 12px;
}

.rd-gp-level,
.rd-gp-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

.rd-gp-n {
  flex: 0 0 22px;
  height: 22px;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  color: var(--rd-accent);
  background: var(--rd-accent-soft);
  border-radius: 50%;
}

.rd-gp-col {
  flex: 0 0 150px;
}

.rd-gp-titlein {
  flex: 1;
  min-width: 0;
}

.rd-gp-titlein {
  min-width: 160px;
}

.rd-gp-preview {
  padding: 0 0 6px;
  padding-inline-start: 28px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--rd-muted);
}

.rd-gp-preview .fa {
  margin-inline-end: 4px;
  font-size: 11px;
}

.rd-gp-body {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.rd-gp-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.rd-gp-add select {
  width: auto;
  min-width: 200px;
}

.rd-gp-tokens {
  font-size: 11px;
}

.rd-gp-stat-label {
  flex: 1 1 150px;
  min-width: 0;
}

.rd-gp-stat-fn {
  flex: 0 0 150px;
}

.rd-gp-stat-col {
  flex: 0 1 140px;
  min-width: 0;
}

.rd-gp-stat-fmt {
  flex: 0 0 100px;
}

.rd-gp-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.rd-gp-quick .btn .fa {
  margin-inline-end: 4px;
}

@media (max-width: 1100px) {
  .rd-gp-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .rd-gp-section + .rd-gp-section {
    border-inline-start: 0;
    border-top: 1px solid var(--rd-border);
  }
}

/* ------------------------------------------------- nested groups in grid */

.rd-grid td.rd-group-cell {
  white-space: normal;
  overflow: visible;
}

.rd-group-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.rd-group-toggle {
  color: var(--rd-muted);
  font-size: 11px;
}

.rd-grid tr.rd-group-l0 td {
  background: #eef3f9;
}

.rd-grid tr.rd-group-l1 td {
  background: #f4f6f9;
  font-weight: 600;
}

.rd-grid tr.rd-group-l2 td {
  background: #f9fafb;
  font-weight: 500;
}

.rd-group-stats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-inline-start: 4px;
}

.rd-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rd-text);
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 999px;
  white-space: nowrap;
}

.rd-stat-label {
  font-weight: normal;
  color: var(--rd-muted);
}

.rd-grid tfoot tr.rd-stats-row td {
  bottom: 0;
  white-space: normal;
  border-top: 1px solid var(--rd-border);
}

.rd-stats-title {
  margin-inline-end: 8px;
  font-weight: 600;
}

.rd-stats-row .rd-stat {
  margin: 2px 2px;
}

/* side list: the collapse button sits at the start of the header */
.rd-side-head {
  justify-content: flex-start;
  gap: 6px;
}

/* filter rows: actions, and the group's own all/any */
.rd-fb-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0;
}

.rd-fb-group-logic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rd-fb-group-logic select {
  width: auto;
  height: 26px;
  padding: 0 6px;
  font-weight: normal;
}

.rd-fb-howto {
  font-size: 12px;
}

.rd-fb-howto .fa {
  color: #c99a2e;
  margin-inline-end: 4px;
}

/* grouping panel: side by side only when both halves fit, rows shrink and wrap instead of overflowing */
.rd-gp-body {
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
}

.rd-gp-section {
  min-width: 0;
}

.rd-gp-section + .rd-gp-section {
  border-inline-start: 0;
  box-shadow: inset 1px 0 0 var(--rd-border), inset -1px 0 0 transparent;
}

.rd-gp-level,
.rd-gp-stat {
  flex-wrap: wrap;
  min-width: 0;
}

.rd-gp-col {
  flex: 0 1 150px;
  min-width: 110px;
}

.rd-gp-titlein {
  flex: 1 1 140px;
  min-width: 120px;
}

.rd-gp-stat-label {
  flex: 1 1 140px;
  min-width: 120px;
}

.rd-gp-stat-fn {
  flex: 0 1 150px;
  min-width: 120px;
}

.rd-gp-stat-col {
  flex: 0 1 140px;
  min-width: 110px;
}

.rd-gp-stat-fmt {
  flex: 0 1 100px;
  min-width: 90px;
}

.rd-gp-empty {
  overflow-wrap: anywhere;
}

/* the two sections always stack: each row gets the full width and never wraps into the other */
.rd-gp-body {
  grid-template-columns: minmax(0, 1fr);
}

.rd-gp-section + .rd-gp-section {
  box-shadow: none;
  border-top: 1px solid var(--rd-border);
}

.rd-gp-level,
.rd-gp-stat {
  max-width: 980px;
}

/* checkbox with its label, in either direction (bootstrap's .checkbox is absolutely positioned and breaks in RTL) */
.rd-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}

.rd-check input[type="checkbox"] {
  position: static;
  margin: 0;
}

/* lines up with fields that have a label above them */
.rd-check-aligned {
  margin-top: 30px;
}

/* bootstrap's .checkbox inside the designer's dialogs, in either direction (also covers templates cached before .rd-check) */
.rd-admin .checkbox {
  margin-top: 30px;
}

.rd-admin .checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
}

.rd-admin .checkbox input[type="checkbox"] {
  position: static;
  margin: 0;
}

/* =================================================================== report studio
   Catalog, studio (data pane, preview, properties), the type renderers and the studio's dialogs. */

.rd-page.rs-page {
  display: block;
  --rs-table: #2e6da4;
  --rs-pivot: #7a4fbf;
  --rs-chart: #1f9d7a;
  --rs-document: #c9772b;
}

/* dialogs render outside the page: same palette */
.rs-save,
.rs-history,
.rs-new,
.rs-packages,
.rd-admin {
  --rd-surface: #ffffff;
  --rd-ground: #f6f7f9;
  --rd-border: #e3e6ea;
  --rd-border-strong: #c9ced6;
  --rd-text: #1d2330;
  --rd-muted: #747c88;
  --rd-accent: #2e6da4;
  --rd-accent-soft: #eaf1f8;
  --rd-radius: 8px;
}

.rd-flip-ltr {
  transform: scaleX(-1);
}

[dir="rtl"] .rd-flip-ltr,
.rtl .rd-flip-ltr {
  transform: none;
}

.rs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  color: var(--rd-muted);
  background: #f1f3f5;
  border-radius: 999px;
  white-space: nowrap;
}

.rs-badge-draft {
  color: #8a5a00;
  background: #fff3d6;
}

.rs-badge-live {
  color: #1e7a3c;
  background: #e2f5e8;
}

.rs-badge-warn {
  color: #fff;
  background: #d9822b;
}

.rd-bar-btn.rd-accent-btn {
  color: #fff;
  background: var(--rd-accent);
}

.rd-bar-btn.rd-accent-btn:hover:not([disabled]) {
  color: #fff;
  background: #255a88;
}

/* ------------------------------------------------------------------ catalog */

.rs-catalog {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rs-catalog-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.rs-catalog-title h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
}

.rs-catalog-title h2 .fa {
  color: var(--rd-accent);
}

.rs-catalog-title p {
  margin: 0;
}

.rs-catalog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rs-catalog-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 12px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow);
}

.rs-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 280px;
  min-width: 0;
  padding: 0 10px;
  height: 36px;
  background: var(--rd-ground);
  border: 1px solid var(--rd-border);
  border-radius: 8px;
}

.rs-search .fa {
  color: var(--rd-muted);
}

.rs-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

.rs-type-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rs-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  color: var(--rd-text);
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: 999px;
  cursor: pointer;
}

.rs-chip-btn.active {
  color: #fff;
  background: var(--rd-accent);
  border-color: var(--rd-accent);
}

.rs-catalog-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--rd-muted);
  background: var(--rd-surface);
  border: 1px dashed var(--rd-border-strong);
  border-radius: var(--rd-radius);
}

.rs-catalog-empty > .fa {
  font-size: 42px;
  color: var(--rd-border-strong);
}

.rs-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.rs-section-title .fa {
  color: var(--rd-muted);
}

.rs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.rs-cards-small {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.rs-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  text-align: start;
  color: var(--rd-text);
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  box-shadow: var(--rd-shadow);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.rs-card:hover {
  border-color: var(--rd-border-strong);
  box-shadow: var(--rd-shadow-lifted);
  transform: translateY(-1px);
}

.rs-card-icon {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-size: 18px;
  color: var(--rs-table);
  background: #eaf1f8;
  border-radius: 10px;
}

.rs-card-pivot .rs-card-icon { color: var(--rs-pivot); background: #f1eafb; }
.rs-card-chart .rs-card-icon { color: var(--rs-chart); background: #e3f5ef; }
.rs-card-document .rs-card-icon { color: var(--rs-document); background: #fbf0e4; }
.rs-card-source .rs-card-icon { color: var(--rd-muted); background: #f1f3f5; }

.rs-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.rs-card-name {
  font-weight: 600;
  line-height: 1.35;
  padding-inline-end: 22px;
  overflow-wrap: anywhere;
}

.rs-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: var(--rd-muted);
}

.rs-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--rd-muted);
}

.rs-card-star {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  color: #c9ced6;
}

.rs-card-star .fa-star {
  color: #f0ad1d;
}

.rs-card-source {
  cursor: default;
}

.rs-card-types {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.rs-mini-btn {
  width: 30px;
  height: 26px;
  color: var(--rd-muted);
  background: var(--rd-ground);
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  cursor: pointer;
}

.rs-mini-btn:hover {
  color: #fff;
  background: var(--rd-accent);
  border-color: var(--rd-accent);
}

/* ------------------------------------------------------------------- studio */

.rs-studio {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rs-bar {
  position: sticky;
  top: 50px;
  z-index: 5;
  padding: 8px 12px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow);
}

.rs-bar .rd-bar-title {
  align-items: center;
}

/* the actions take their own row: the design/preview switch and exit at the start, everything else at the end */
.rs-bar .rd-bar-actions {
  flex: 1 1 100%;
  justify-content: flex-end;
}

.rs-bar .rs-design-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-end: auto;
}

.rs-bar .rs-design-mode .rs-canvas-switch {
  margin-inline-end: 0;
}

.rs-title-editable {
  cursor: text;
  border-bottom: 1px dashed transparent;
}

.rs-title-editable:hover {
  border-bottom-color: var(--rd-muted);
}

.rs-rename {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.rs-rename .form-control {
  width: 320px;
  max-width: 60vw;
  font-size: 16px;
  font-weight: 600;
}

.rs-rename-ok .fa-check {
  color: #1e8e3e;
}

.rs-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--rs-table);
  border-radius: 8px;
}

.rs-type-pivot { background: var(--rs-pivot); }
.rs-type-chart { background: var(--rs-chart); }
.rs-type-document { background: var(--rs-document); }

.rs-star .fa-star {
  color: #f0ad1d;
}

.rs-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.rs-designing .rs-body {
  grid-template-columns: 230px minmax(0, 1fr) 340px;
}

@media (max-width: 1280px) {
  .rs-designing .rs-body {
    grid-template-columns: 200px minmax(0, 1fr) 300px;
  }
}

@media (max-width: 991px) {
  .rs-designing .rs-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rs-fields,
.rs-props {
  position: sticky;
  top: 130px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 140px);
  min-width: 0;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow);
}

.rs-pane-title {
  padding: 10px 12px 6px;
  font-weight: 600;
}

.rs-pane-title .fa {
  color: var(--rd-muted);
}

.rs-fields .rs-dataset {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 8px;
  padding: 6px 8px;
  font-size: 12px;
  background: var(--rd-ground);
  border-radius: 6px;
}

.rs-fields .rd-side-search {
  margin: 0 12px 6px;
}

.rs-field-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 6px 6px;
}

.rs-field {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 2px 6px;
  border-radius: 6px;
}

.rs-field:hover {
  background: var(--rd-ground);
}

.rs-field.used .rs-field-name {
  font-weight: 600;
  color: var(--rd-accent);
}

.rs-field-type {
  width: 16px;
  text-align: center;
  color: var(--rd-muted);
}

.rs-field-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.rs-field-actions {
  display: none;
}

.rs-field:hover .rs-field-actions {
  display: inline-flex;
}

.rs-field-actions .rd-icon-btn {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

.rs-pane-hint {
  padding: 8px 12px;
  font-size: 11px;
  border-top: 1px solid var(--rd-border);
}

.rs-center {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.rs-problem {
  margin: 0;
}

/* the preview: in design it looks like the page it prints on */
.rs-canvas {
  position: relative;
  min-width: 0;
}

.rs-canvas.rs-paper {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.08);
}

.rs-canvas.rs-paper.rs-portrait {
  max-width: 900px;
  margin-inline: auto;
}

.rs-page-header,
.rs-page-footer {
  margin-bottom: 10px;
  font-size: 12px;
  text-align: center;
  color: var(--rd-muted);
}

.rs-page-footer {
  margin: 10px 0 0;
}

.rs-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.05);
  transform: rotate(-25deg);
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* properties */

.rs-type-switch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 10px 10px 6px;
}

.rs-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  font-size: 11px;
  color: var(--rd-muted);
  background: var(--rd-ground);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.rs-type-btn .fa {
  font-size: 16px;
}

.rs-type-btn.active {
  color: var(--rd-accent);
  background: var(--rd-accent-soft);
  border-color: #c6d9ec;
  font-weight: 600;
}

.rs-tabs {
  padding: 0 8px;
}

.rs-tabs > li > a {
  padding: 6px 10px;
  font-size: 13px;
}

.rs-props-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 14px;
}

.rs-prop {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rd-border);
}

.rs-prop:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.rs-prop-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-weight: 600;
}

.rs-prop-title .fa,
.rs-prop-title .rd-muted {
  font-weight: normal;
  color: var(--rd-muted);
}

.rs-prop .form-control + .form-control,
.rs-label {
  margin-top: 6px;
}

.rs-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--rd-muted);
  font-weight: normal;
}

.rs-full {
  width: 100%;
}

.rs-measure,
.rs-rule {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  margin-bottom: 8px;
  background: var(--rd-ground);
  border-radius: 8px;
}

.rs-measure-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.rs-measure .rs-measure-row,
.rs-rule .rs-measure-row {
  margin-bottom: 0;
}

.rs-measure-row > .form-control {
  flex: 1 1 110px;
  width: auto;
  min-width: 0;
}

.rs-measure-row > .form-control.rs-narrow,
.rs-narrow {
  flex: 0 0 auto;
  width: 90px;
}

.rs-inline-label {
  margin: 0;
  font-size: 12px;
  font-weight: normal;
  color: var(--rd-muted);
}

.rs-dim {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 2px 6px;
  margin-bottom: 4px;
  background: var(--rd-ground);
  border-radius: 6px;
}

.rs-dim-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-bucket {
  width: 100px;
  flex: 0 0 100px;
  height: 26px;
  padding: 0 4px;
}

.rs-total-check {
  margin: 0;
  font-weight: 600;
}

.rs-kinds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.rs-kind {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  font-size: 10px;
  color: var(--rd-muted);
  background: var(--rd-ground);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.rs-kind .fa {
  font-size: 16px;
}

.rs-kind.active {
  color: var(--rs-chart);
  background: #e3f5ef;
  border-color: #b9e3d5;
}

.rs-rule-style label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-weight: normal;
}

.rs-rule-style input[type="color"] {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--rd-border);
  border-radius: 4px;
  background: #fff;
}

.rs-rule-apply label {
  margin: 0;
  font-weight: normal;
  white-space: nowrap;
}

.rs-rule-targets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.rs-rule-target {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 2px 1px 8px;
  font-size: 12px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: 12px;
}

.rs-rule-targets .form-control {
  flex: 1 1 120px;
  width: auto;
  min-width: 0;
}

.rs-rule-sample {
  padding: 0 10px;
  border: 1px solid var(--rd-border);
  border-radius: 4px;
}

.rs-filter-tab .rd-fb-head {
  flex-wrap: wrap;
}

.rs-filter-tab .rd-fb-row {
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------- renderers */

.rs-pivot-table th.rs-pivot-corner {
  min-width: 200px;
}

.rs-pivot-table .rs-pivot-member {
  text-align: center;
  border-bottom: 1px solid var(--rd-border);
}

.rs-pivot-table .rs-pivot-measure {
  font-weight: normal;
  font-size: 12px;
  color: var(--rd-muted);
}

.rs-pivot-table tbody th.rs-pivot-head {
  font-weight: normal;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
  background: #fbfcfd;
  position: sticky;
  inset-inline-start: 0;
}

.rs-pivot-crumb {
  color: var(--rd-muted);
  font-size: 12px;
}

.rs-pivot-table tr.rs-pivot-sub th,
.rs-pivot-table tr.rs-pivot-sub td {
  font-weight: 600;
  background: #f3f6f9;
  cursor: pointer;
}

.rs-pivot-table tr.rs-pivot-grand th,
.rs-pivot-table tr.rs-pivot-grand td {
  font-weight: 700;
  background: #eaf1f8;
  border-top: 2px solid var(--rd-border-strong);
}

.rs-pivot-table .rs-pivot-total {
  font-weight: 600;
  background: #f7f9fb;
}

.rs-chart {
  position: relative;
}

.rs-chart-box {
  position: relative;
  height: 420px;
  padding: 10px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
}

.rs-paper .rs-chart-box {
  border: 0;
  padding: 0;
}

.rs-chart-table {
  margin-top: 12px;
  overflow-x: auto;
}

.rs-docs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rs-docs-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rs-doc {
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08);
}

.rs-doc-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.rs-doc-fields {
  display: grid;
  gap: 6px 18px;
  margin-bottom: 14px;
}

.rs-doc-field {
  display: flex;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dotted var(--rd-border-strong);
  min-width: 0;
}

.rs-doc-label {
  color: var(--rd-muted);
  overflow-wrap: anywhere;
}

.rs-doc-value {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.rs-doc-lines {
  width: 100%;
}

.rs-doc-lines tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--rd-border-strong);
}

.rs-doc-notes {
  margin: 12px 0 0;
  color: var(--rd-muted);
  white-space: pre-line;
}

.rs-doc-signatures {
  display: flex;
  gap: 24px;
  margin-top: 36px;
}

.rs-doc-signature {
  flex: 1;
  padding-top: 6px;
  text-align: center;
  color: var(--rd-muted);
  border-top: 1px solid var(--rd-text);
}

/* ------------------------------------------------------------------- dialogs */

.rs-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rs-scope {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  font-weight: normal;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  cursor: pointer;
}

.rs-scope input {
  display: none;
}

.rs-scope.active {
  color: var(--rd-accent);
  background: var(--rd-accent-soft);
  border-color: #c6d9ec;
  font-weight: 600;
}

.rs-scope.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rs-type-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.rs-type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px;
  text-align: start;
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  cursor: pointer;
}

.rs-type-card .fa {
  font-size: 20px;
  color: var(--rd-accent);
}

.rs-type-card span {
  font-size: 12px;
  color: var(--rd-muted);
}

.rs-type-card.active {
  background: var(--rd-accent-soft);
  border-color: var(--rd-accent);
}

.rs-dataset-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  margin: 8px 0 12px;
  overflow-y: auto;
}

.rs-dataset {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  text-align: start;
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  cursor: pointer;
}

.rs-dataset > span {
  display: flex;
  flex-direction: column;
}

.rs-dataset.active {
  background: var(--rd-accent-soft);
  border-color: var(--rd-accent);
}

.rs-changes {
  margin: 0 0 12px;
  padding-inline-start: 20px;
}

.rs-version {
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
}

.rs-version.published {
  border-color: #b8e0c4;
  background: #f6fbf7;
}

.rs-version-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.rs-version-no {
  font-weight: 700;
}

.rs-version-note {
  margin-top: 6px;
}

.rs-version-changes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
}

.rs-chip-small {
  padding: 0 8px;
  background: #f1f3f5;
  border-radius: 999px;
}

.rs-pane {
  padding-top: 12px;
}

.rs-pick-list {
  max-height: 260px;
  padding: 6px 8px;
  overflow-y: auto;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
}

.rs-pick {
  display: flex;
  margin: 0 0 4px;
  font-weight: normal;
}

.rs-preview {
  margin-top: 12px;
}

.rs-preview-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.rs-preview-message {
  font-size: 12px;
  color: var(--rd-muted);
}

.rs-action {
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: #f1f3f5;
  white-space: nowrap;
}

.rs-action-new { color: #1e7a3c; background: #e2f5e8; }
.rs-action-update { color: #2e6da4; background: #eaf1f8; }
.rs-action-conflict { color: #8a5a00; background: #fff3d6; }
.rs-action-error { color: #a12622; background: #fbe4e3; }
.rs-action-same { color: #747c88; }

.rs-source-warn {
  margin: 0 0 10px;
  padding: 8px 12px;
}

.rs-source-warn code {
  margin-inline-start: 6px;
}


/* dashboard widget */
.rs-widget {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.rs-widget-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.rs-widget .rs-chart,
.rs-widget .rs-chart-box {
  height: 100%;
  border: 0;
  padding: 0;
}

.rs-widget .rd-grid-wrap {
  max-height: 100%;
}

.rs-widget-open {
  position: absolute;
  top: -30px;
  inset-inline-end: 0;
  font-size: 12px;
}


/* dashboard widget settings: the report picker */
.rs-widget-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rs-widget-pick-list {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
}

.rs-widget-pick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  text-align: start;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #eef0f3;
}

.rs-widget-pick-item:last-child {
  border-bottom: 0;
}

.rs-widget-pick-item:hover {
  background: #f5f7fa;
}

.rs-widget-pick-item.active {
  background: #eaf2fd;
  font-weight: 600;
}

.rs-widget-pick-name {
  flex: 1;
  min-width: 0;
}

.rs-widget-pick-type {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}

.rs-widget-pick-check {
  color: #2f6fd6;
}

.rs-widget-pick-empty {
  margin: 0;
  padding: 12px;
  text-align: center;
}

.rs-widget-pick-hint {
  margin: 0;
  font-size: 12px;
}


/* ===================================================== design view: zones, chips, drag and drop, panes */

.rs-canvas-switch {
  display: inline-flex;
  margin-inline-end: 8px;
  padding: 2px;
  background: #eef0f3;
  border-radius: 8px;
}

.rs-canvas-switch button {
  height: 28px;
  padding: 0 12px;
  color: var(--rd-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.rs-canvas-switch button.active {
  color: var(--rd-accent);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
  font-weight: 600;
}

/* collapsible side panes */
.rs-designing .rs-body.rs-left-closed {
  grid-template-columns: 44px minmax(0, 1fr) 340px;
}

.rs-designing .rs-body.rs-right-closed {
  grid-template-columns: 230px minmax(0, 1fr) 44px;
}

.rs-designing .rs-body.rs-left-closed.rs-right-closed {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
}

.rs-pane-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rs-pane-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.rs-pane-closed {
  align-items: center;
}

.rs-pane-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  color: var(--rd-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.rs-pane-open span {
  writing-mode: vertical-rl;
  font-size: 12px;
}

.rs-pane-open:hover {
  color: var(--rd-accent);
}

/* fields can be dragged */
.rs-field[draggable="true"] {
  cursor: grab;
}

.rs-grip {
  color: #b5bcc6;
  font-size: 11px;
}

.rs-dragging {
  opacity: 0.45;
}

body.rs-drag-active .rs-zone,
body.rs-drag-active .rs-columns,
body.rs-drag-active .rs-doc-fields {
  outline: 2px dashed #9ec1e3;
  outline-offset: 2px;
}

.rs-drop-over {
  background: var(--rd-accent-soft) !important;
}

.rs-drop-before {
  box-shadow: inset 3px 0 0 var(--rd-accent);
}

.rs-drop-after {
  box-shadow: inset -3px 0 0 var(--rd-accent);
}

[dir="rtl"] .rs-drop-before,
.rtl .rs-drop-before {
  box-shadow: inset -3px 0 0 var(--rd-accent);
}

[dir="rtl"] .rs-drop-after,
.rtl .rs-drop-after {
  box-shadow: inset 3px 0 0 var(--rd-accent);
}

.rs-zone-y .rs-drop-before {
  box-shadow: inset 0 3px 0 var(--rd-accent) !important;
}

.rs-zone-y .rs-drop-after {
  box-shadow: inset 0 -3px 0 var(--rd-accent) !important;
}

/* zones and chips */
.rs-design {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 360px;
}

.rs-zone-line {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.rs-zone-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rd-muted);
}

.rs-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px;
  background: #fafbfc;
  border: 1px dashed var(--rd-border-strong);
  border-radius: 8px;
}

.rs-zone-y {
  flex-direction: column;
  align-items: stretch;
}

.rs-zone-hint {
  padding: 0 6px;
  font-size: 12px;
  color: var(--rd-muted);
}

.rs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  max-width: 100%;
  padding: 2px 4px 2px 8px;
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  box-shadow: var(--rd-shadow);
  cursor: grab;
}

.rs-chip.selected,
.rs-col.selected .rs-col-head,
.rs-doc-field-design.selected {
  border-color: var(--rd-accent);
  box-shadow: 0 0 0 2px #c6d9ec;
}

.rs-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-chip-sub {
  font-size: 11px;
  color: var(--rd-muted);
}

.rs-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-inline-start: auto;
  padding: 0;
  font-size: 11px;
  color: #a0a7b1;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.rs-chip-x:hover {
  color: #fff;
  background: var(--rd-danger);
}

/* table and document lines: columns as blocks with sample cells */
.rs-sheet {
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  overflow: hidden;
}

.rs-band {
  padding: 6px 8px;
  font-weight: 600;
  background: #eef3f8;
  border-bottom: 1px solid var(--rd-border);
}

.rs-columns {
  display: flex;
  align-items: stretch;
  min-height: 160px;
  overflow-x: auto;
  background: #fff;
}

.rs-columns-hint {
  flex: 1 0 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px;
  border: 1px dashed var(--rd-border-strong);
  border-radius: 6px;
}

.rs-col {
  display: flex;
  flex: 0 0 150px;
  flex-direction: column;
  min-width: 90px;
  border-inline-end: 1px solid var(--rd-border);
}

.rs-col-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  font-weight: 600;
  background: #f3f5f8;
  border: 1px solid transparent;
  border-bottom-color: var(--rd-border);
  cursor: grab;
}

.rs-col-cell {
  padding: 6px 8px;
  font-size: 12px;
  color: #9aa1ab;
  border-bottom: 1px solid #f0f2f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rs-num-col .rs-col-cell,
.rs-num-col .rs-col-total {
  text-align: end;
}

.rs-col-total {
  min-height: 30px;
  padding: 6px 8px;
  font-weight: 700;
  border-top: 2px solid var(--rd-border-strong);
}

.rs-sheet-stats {
  padding: 6px 8px;
  background: #fafbfc;
  border-top: 1px solid var(--rd-border);
}

/* pivot layout */
.rs-design-pivot {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 10px;
}

.rs-pd-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  color: var(--rd-muted);
  background: #f3f5f8;
  border-radius: 8px;
}

.rs-pd-rows .rs-zone {
  min-height: 200px;
  align-content: flex-start;
}

.rs-pd-sample {
  width: 100%;
  margin-top: 8px;
  font-size: 12px;
  color: #9aa1ab;
}

.rs-pd-sample td {
  padding: 6px 8px;
  text-align: end;
  border: 1px solid #f0f2f5;
}

.rs-pd-sample .rs-pd-total,
.rs-pd-sample tr.rs-pd-total td {
  font-weight: 700;
  color: var(--rd-text);
  background: #f7f9fb;
}

/* chart layout */
.rs-design-chart {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  grid-template-areas: "series series" "values plot" ". category";
  gap: 10px;
}

.rs-cd-series { grid-area: series; }
.rs-cd-values { grid-area: values; }
.rs-cd-category { grid-area: category; }

.rs-cd-values .rs-zone {
  min-height: 220px;
  align-content: flex-start;
}

.rs-cd-plot {
  grid-area: plot;
  position: relative;
  min-height: 240px;
  padding: 14px;
  background: #fbfcfd;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  overflow: hidden;
}

.rs-cd-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 200px;
}

.rs-cd-bars span {
  position: relative;
  width: 10%;
  background: #36a2eb;
  border-radius: 3px 3px 0 0;
  opacity: 0.75;
}

.rs-cd-bars span i {
  position: absolute;
  inset-inline: 0;
  top: 0;
  background: #ff9f40;
  border-radius: 3px 3px 0 0;
}

.rs-cd-horizontal .rs-cd-bars {
  transform: rotate(90deg) scaleX(-1);
}

.rs-cd-plot svg {
  position: absolute;
  inset: 20px 14px 30px;
  width: calc(100% - 28px);
  height: calc(100% - 50px);
}

.rs-cd-pie {
  width: 180px;
  height: 180px;
  margin: 10px auto;
  border-radius: 50%;
  background: conic-gradient(#36a2eb 0 35%, #ff6384 35% 60%, #4bc0c0 60% 82%, #ff9f40 82% 100%);
  opacity: 0.8;
}

.rs-cd-doughnut {
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 39%);
  mask: radial-gradient(circle, transparent 38%, #000 39%);
}

.rs-cd-kind {
  position: absolute;
  top: 8px;
  inset-inline-start: 12px;
  font-size: 12px;
  color: var(--rd-muted);
}

/* document layout */
.rs-doc-design .rs-doc-fields {
  display: grid;
  gap: 6px 18px;
  margin-bottom: 14px;
  min-height: 44px;
}

.rs-doc-field-design {
  position: relative;
  padding: 6px 26px 6px 8px;
  background: #fff;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
  cursor: grab;
}

.rs-doc-field-design .rs-chip-x {
  position: absolute;
  top: 6px;
  inset-inline-end: 4px;
}

.rs-doc-field-design .rs-doc-value {
  color: #9aa1ab;
  font-weight: normal;
}

.rs-design-document .rs-columns {
  margin-bottom: 10px;
  border: 1px solid var(--rd-border);
  border-radius: 6px;
}

/* properties: the selection and aligned rows */
.rs-selection {
  margin: -10px -12px 12px;
  padding: 10px 12px 12px;
  background: #f6f9fc;
  border-bottom: 1px solid #dfe8f1;
}

.rs-form > * + * {
  margin-top: 6px;
}

.rs-select-hint {
  margin: 0 0 12px;
  font-size: 12px;
}

.rs-grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.rs-grid2 > .rs-inline-label {
  text-align: center;
}

.rs-grid-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
}

.rs-grid2 .form-control,
.rs-grid-action .form-control,
.rs-measure > .form-control {
  width: 100%;
}

/* side by side: no stacking gap between neighbouring controls */
.rs-prop .rs-grid2 > .form-control,
.rs-prop .rs-grid-action > .form-control,
.rs-prop .rs-measure-row > .form-control {
  margin-top: 0;
}


/* the design view shrinks with its container (narrow screens, both side panes open) */
.rs-center,
.rs-canvas,
.rs-design,
.rs-design > div,
.rs-design-pivot > *,
.rs-design-chart > *,
.rs-zone-line > *,
.rs-zone {
  min-width: 0;
}

.rs-canvas.rs-paper {
  overflow-x: auto;
}

.rs-zone-line {
  grid-template-columns: minmax(80px, 130px) minmax(0, 1fr);
}

.rs-design-pivot {
  grid-template-columns: minmax(110px, 32%) minmax(0, 1fr);
}

.rs-design-chart {
  grid-template-columns: minmax(110px, 30%) minmax(0, 1fr);
}

.rs-chip {
  min-width: 0;
}

.rs-chip-sub {
  white-space: nowrap;
}

.rs-pd-sample {
  table-layout: fixed;
}

.rs-pd-sample td {
  overflow-wrap: anywhere;
}

@media (max-width: 1280px) {
  .rs-zone-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .rs-design-pivot,
  .rs-design-chart {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  .rs-design-chart > * {
    grid-area: auto;
  }

  .rs-pd-corner {
    display: none;
  }

  .rs-pd-rows .rs-zone,
  .rs-cd-values .rs-zone {
    min-height: 44px;
    flex-direction: row;
    align-items: center;
  }
}

/* chips stay inside their zone: the ng-repeat wrapper may shrink, the label takes the cut (ellipsis) */
.rs-zone > * {
  min-width: 0;
  max-width: 100%;
}

.rs-zone-y > * {
  display: flex;
}

.rs-zone-y .rs-chip {
  width: 100%;
}

.rs-chip > .fa,
.rs-chip-sub,
.rs-chip-x {
  flex-shrink: 0;
}

.rs-chip-label {
  flex: 1 1 auto;
}

/* toggle groups (sort direction, PDF orientation): the app theme paints every .btn-default the same, hiding which is on */
.rd-page .btn-group > .btn.btn-default {
  color: var(--rd-text) !important;
  background: #fff !important;
  border-color: var(--rd-border) !important;
  box-shadow: none;
}

.rd-page .btn-group > .btn.btn-default:hover {
  background: #eef0f3 !important;
}

.rd-page .btn-group > .btn.btn-default.active {
  color: #fff !important;
  background: var(--rd-accent) !important;
  border-color: var(--rd-accent) !important;
}