@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap");

body:has(.river-layout) {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.18), transparent 24%),
    radial-gradient(circle at top right, rgba(91, 33, 182, 0.12), transparent 22%),
    #070a12 !important;
  color: #f4f7fb;
  font-family: "Manrope", "Segoe UI", sans-serif;
}

body:has(.river-layout) > .container-fluid {
  padding: 0 !important;
}

body:has(.river-layout) .footer,
body:has(.river-layout) > nav,
body:has(.river-layout) > .navbar,
body:has(.river-layout) .navbar.fixed-top,
body:has(.river-layout) .navbar.sticky-top {
  display: none !important;
}

body:has(.river-layout) a {
  text-decoration: none;
}

.river-layout {
  display: flex;
  min-height: 100vh;
  background: transparent !important;
}

.river-main {
  flex: 1;
  min-width: 0;
  padding: 2rem 2rem 2.5rem !important;
  overflow-x: hidden;
}

.river-main > div,
.river-main > section,
.river-main > main {
  position: relative;
}

.list-page,
.issue-page,
.void-page,
.redeem-page,
.revoke-page {
  min-height: 100%;
  background: transparent !important;
}

.list-wrapper,
.issue-wrapper,
.void-wrapper,
.redeem-wrapper,
.revoke-wrapper {
  max-width: 1440px !important;
}

.topbar,
.list-header,
.issue-header,
.void-header,
.redeem-header,
.revoke-header {
  margin-bottom: 1.5rem !important;
  padding: 0.25rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.topbar .eyebrow,
.eyebrow,
.meta-pill,
.summary-label,
.list-header p,
.issue-header p,
.void-header p,
.redeem-header p,
.revoke-header p,
.topbar p,
.panel-intro,
.section-title small,
.section-title p,
.helper-text,
.summary-note,
.active-company-type,
.pager-meta,
.toolbar-meta .text-muted,
.per-page-form label,
.field-label label {
  color: #8f9bad !important;
}

.topbar h1,
.list-header h1,
.issue-header h1,
.void-header h1,
.redeem-header h1,
.revoke-header h1,
.panel h2,
.section-title h5,
.section-title h3,
.section-title h2,
.issuer-card h3,
.issuer-table-header h3,
.summary-card strong,
.summary-value,
.stat-value,
.detail-item strong,
.record-row-title,
.mobile-voucher-code,
.mobile-transaction-id,
.transaction-id {
  color: #f7fafc !important;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
}

.topbar h1,
.list-header h1,
.issue-header h1,
.void-header h1,
.redeem-header h1,
.revoke-header h1 {
  font-size: clamp(2rem, 3vw, 3rem) !important;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 0.45rem !important;
}

.list-card,
.issue-card,
.void-card,
.redeem-card,
.revoke-card,
.panel,
.summary-card,
.stat-card,
.action-card,
.issuer-card,
.issuer-table-card,
.table-shell,
.mobile-voucher-card,
.mobile-transaction-card,
.detail-item,
.record-row,
.settings-modal-dialog,
.result-modal-card {
  background: rgba(21, 24, 33, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: blur(18px);
}

.list-card,
.issue-card,
.void-card,
.revoke-card,
.redeem-card,
.panel,
.issuer-table-card,
.issuer-card {
  padding: 1.75rem !important;
}

.summary-card,
.detail-item,
.mobile-voucher-stat,
.mobile-transaction-stat,
.mobile-detail-item,
.mobile-transaction-detail-item,
.confirm-voucher-item,
.confirm-transaction-item,
.voucher-modal-panel,
.record-row-body,
.info-card,
.override-panel,
.redeemable-box,
.active-company-panel {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

.summary-card span,
.detail-item span,
.mobile-voucher-stat span,
.mobile-transaction-stat span,
.mobile-detail-item span,
.mobile-transaction-detail-item span,
.confirm-voucher-item span,
.confirm-transaction-item span,
.voucher-modal-item span,
.issuer-table th,
.record-row-meta,
.table td,
.table th,
.issuer-card p,
.issuer-card-footnote,
.action-desc,
.summary-note,
.helper-text,
.info-card li,
.info-card h5,
.form-check-label,
.text-muted {
  color: #98a5b8 !important;
}

.section-block,
.form-actions,
.record-row-body,
.voucher-modal-row + .voucher-modal-row,
.mobile-voucher-details,
.mobile-transaction-details,
.issuer-table th,
.issuer-table td,
.table td,
.table th,
.pagination .page-link,
.confirm-modal .modal-header,
.confirm-modal .modal-footer,
.confirm-modal .modal-body,
.settings-launch-row {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.section-icon,
.stat-icon,
.action-icon,
.issuer-card-icon,
.river-brand-logo {
  background: rgba(56, 209, 138, 0.12) !important;
  color: #66eda4 !important;
  box-shadow: none !important;
}

.table-shell,
.table-responsive,
table,
.table {
  background: transparent !important;
}

.table thead th,
th {
  background: rgba(255, 255, 255, 0.02) !important;
  color: #8f9bad !important;
}

.table tbody tr:hover td,
.table-hover > tbody > tr:hover > * {
  background: rgba(56, 209, 138, 0.05) !important;
}

.voucher-link,
.mobile-voucher-toggle,
.mobile-transaction-toggle,
.record-row-toggle,
.topbar .eyebrow,
.eyebrow {
  color: #74efaa !important;
}

.status-pill,
.type-pill,
.mobile-meta-pill,
.amount-chip {
  background: rgba(56, 209, 138, 0.12) !important;
  color: #86f3b6 !important;
  border: 1px solid rgba(56, 209, 138, 0.16) !important;
}

.empty-state {
  background: rgba(56, 209, 138, 0.08) !important;
  border: 1px solid rgba(56, 209, 138, 0.2) !important;
  color: #d8ffe8 !important;
}

.field-input input,
.field-input select,
.per-page-form select,
.settings-company-select select,
.settings-select select,
.settings-select input,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 48px;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f7fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.field-input input::placeholder,
.settings-select input::placeholder {
  color: #728095;
}

.field-input select:focus,
.field-input input:focus,
.per-page-form select:focus,
.settings-company-select select:focus,
.settings-select select:focus,
.settings-select input:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: rgba(86, 227, 151, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(56, 209, 138, 0.12) !important;
  outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  color: #f7fafc !important;
}

.select2-dropdown {
  background: #171a23;
  color: #f7fafc;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.select2-results__option {
  color: #e7edf7;
}

.select2-results__option--highlighted[aria-selected] {
  background: rgba(56, 209, 138, 0.2) !important;
  color: #ffffff !important;
}

.pagination .page-link {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #f4f7fb !important;
}

.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #2f8f68, #44c783) !important;
  color: #08110c !important;
  border-color: transparent !important;
}

.fixed-top-btn {
  bottom: 24px !important;
  right: 24px !important;
}

.alert {
  border-radius: 18px;
}

@media (max-width: 992px) {
  .river-main {
    padding: 1.25rem 1rem 6.5rem !important;
  }

  .list-card,
  .issue-card,
  .void-card,
  .redeem-card,
  .revoke-card,
  .panel,
  .issuer-table-card,
  .issuer-card {
    border-radius: 22px !important;
    padding: 1.25rem !important;
  }

  .list-header h1,
  .issue-header h1,
  .void-header h1,
  .redeem-header h1,
  .revoke-header h1,
  .topbar h1 {
    font-size: 2rem !important;
  }
}

@media (max-width: 768px) {
  .fixed-top-btn {
    right: 16px !important;
    bottom: 108px !important;
  }
}