/* ==========================================================================
   Risalah TV — compatibility layer

   The frontend views were written against Bootstrap 5 plus Porto's theme.css.
   theme.css was dropped in the redesign because it fought the new tokens, and
   Bootstrap's own components are built for a light background, so on the new
   dark ground they read as broken rather than merely different.

   This file re-dresses those inherited classes in the new design language, so
   every view that has not been rewritten yet is still coherent. It is a bridge,
   not a destination: as each view moves to .rt- components, its entries here
   become dead weight and can go.

   Load AFTER risalah.css. Everything is scoped to [data-rt] so the admin panel,
   which still uses the original Porto stylesheets, is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Porto text-scale and colour utilities
   -------------------------------------------------------------------------- */

[data-rt] .text-1 { font-size: 0.75rem; }
[data-rt] .text-2 { font-size: 0.8125rem; }
[data-rt] .text-3 { font-size: 0.9375rem; }
[data-rt] .text-4 { font-size: 1.0625rem; }
[data-rt] .text-5 { font-size: 1.25rem; }
[data-rt] .text-6 { font-size: 1.5rem; }

[data-rt] .font-weight-bold,
[data-rt] .fw-bold { font-weight: 600; }
[data-rt] .font-weight-normal { font-weight: 400; }

[data-rt] .text-dark,
[data-rt] .text-color-dark { color: var(--rt-text) !important; }
[data-rt] .text-muted,
[data-rt] .text-color-grey { color: var(--rt-text-dim) !important; }
[data-rt] .text-light,
[data-rt] .text-white { color: var(--rt-text) !important; }
[data-rt] .text-primary,
[data-rt] .text-color-primary { color: var(--rt-gold) !important; }
[data-rt] .text-danger { color: #e8705c !important; }
[data-rt] .text-success { color: var(--rt-emerald) !important; }

[data-rt] .bg-color-light,
[data-rt] .bg-light,
[data-rt] .bg-white { background-color: var(--rt-ink-2) !important; }
[data-rt] .bg-color-grey,
[data-rt] .bg-color-light-scale-1 { background-color: var(--rt-ink-3) !important; }
[data-rt] .bg-color-dark { background-color: var(--rt-ink) !important; }

[data-rt] .shadow-sm,
[data-rt] .box-shadow-1 { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; }

/* --------------------------------------------------------------------------
   Containers and page headers
   -------------------------------------------------------------------------- */

[data-rt] .container,
[data-rt] .container-fluid {
  width: 100%;
  max-width: var(--rt-shell);
  margin-inline: auto;
  padding-inline: var(--rt-s5);
}

[data-rt] .main { background: transparent; }

[data-rt] .page-header {
  padding-block: var(--rt-s7) var(--rt-s6);
  margin-bottom: var(--rt-s6);
  border-bottom: 1px solid var(--rt-rule-soft);
  background:
    radial-gradient(60% 130% at 20% 0%, rgba(46, 139, 107, 0.10), transparent 70%),
    var(--rt-ink-2) !important;
}
[data-rt] .page-header h1,
[data-rt] .page-header h2 {
  font-family: var(--rt-display);
  font-size: var(--rt-t-xl);
  font-weight: 700;
  color: var(--rt-text);
  margin: 0;
}
[data-rt] .page-header .breadcrumb {
  background: transparent;
  padding: 0;
  margin: var(--rt-s2) 0 0;
  font-size: var(--rt-t-xs);
  color: var(--rt-text-dim);
}
[data-rt] .breadcrumb a { color: var(--rt-gold); }

/* --------------------------------------------------------------------------
   Headings and text blocks
   -------------------------------------------------------------------------- */

[data-rt] h1, [data-rt] h2, [data-rt] h3,
[data-rt] h4, [data-rt] h5, [data-rt] h6 {
  font-family: var(--rt-display);
  font-weight: 700;
  color: var(--rt-text);
  line-height: 1.2;
}
[data-rt] p { color: inherit; }
[data-rt] hr { border-color: var(--rt-rule-soft); opacity: 1; }
[data-rt] blockquote {
  padding: var(--rt-s4);
  border-inline-start: 2px solid var(--rt-rule);
  background: var(--rt-ink-3);
  border-radius: var(--rt-radius);
  color: var(--rt-text);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

[data-rt] .card {
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  color: var(--rt-text);
}
[data-rt] .card-header {
  background: transparent;
  border-bottom: 1px solid var(--rt-rule-soft);
  padding: var(--rt-s4);
  font-weight: 600;
}
[data-rt] .card-body { padding: var(--rt-s4); }
[data-rt] .card-footer {
  background: transparent;
  border-top: 1px solid var(--rt-rule-soft);
  padding: var(--rt-s4);
}
[data-rt] .card-title {
  font-family: var(--rt-display);
  font-size: var(--rt-t-md);
  font-weight: 700;
  color: var(--rt-text);
}
[data-rt] .card-text { color: var(--rt-text-dim); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

[data-rt] .form-group { margin-bottom: var(--rt-s4); }

[data-rt] .form-label,
[data-rt] .control-label {
  display: block;
  margin-bottom: var(--rt-s1);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}

[data-rt] .form-control,
[data-rt] .form-select,
[data-rt] .custom-select-1 select,
[data-rt] select,
[data-rt] textarea,
[data-rt] input[type="text"],
[data-rt] input[type="email"],
[data-rt] input[type="password"],
[data-rt] input[type="number"],
[data-rt] input[type="tel"],
[data-rt] input[type="date"],
[data-rt] input[type="search"] {
  width: 100%;
  padding: 0.6rem var(--rt-s3);
  background: var(--rt-ink);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  color: var(--rt-text);
  font-family: var(--rt-body);
  font-size: var(--rt-t-sm);
  line-height: 1.5;
}
[data-rt] .form-control::placeholder,
[data-rt] textarea::placeholder { color: var(--rt-text-dim); }
[data-rt] .form-control:focus,
[data-rt] .form-select:focus,
[data-rt] select:focus,
[data-rt] textarea:focus {
  outline: none;
  border-color: var(--rt-gold);
  box-shadow: none;
  background: var(--rt-ink);
  color: var(--rt-text);
}
[data-rt] select option { background: var(--rt-ink-2); color: var(--rt-text); }

/* Date pickers and rich selects render their own popovers on a light ground;
   leave those alone rather than half-theming them. */
[data-rt] .datepicker,
[data-rt] .select2-container--default .select2-dropdown { color: #14251e; }

[data-rt] .form-check-input {
  background-color: var(--rt-ink);
  border-color: var(--rt-rule);
}
[data-rt] .form-check-input:checked {
  background-color: var(--rt-emerald);
  border-color: var(--rt-emerald);
}
[data-rt] .form-check-label { color: var(--rt-text); font-size: var(--rt-t-sm); }

[data-rt] .invalid-feedback,
[data-rt] .error-alert { color: #e8705c; font-size: var(--rt-t-xs); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

[data-rt] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-s2);
  padding: 0.6rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--rt-radius);
  font-family: var(--rt-body);
  font-size: var(--rt-t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}
[data-rt] .btn-primary,
[data-rt] .btn-success {
  background: var(--rt-gold);
  border-color: var(--rt-gold);
  color: #1a1205;
}
[data-rt] .btn-primary:hover,
[data-rt] .btn-success:hover {
  background: var(--rt-gold-lift);
  border-color: var(--rt-gold-lift);
  color: #1a1205;
}
[data-rt] .btn-secondary,
[data-rt] .btn-default,
[data-rt] .btn-light {
  background: transparent;
  border-color: var(--rt-rule);
  color: var(--rt-text);
}
[data-rt] .btn-secondary:hover,
[data-rt] .btn-default:hover,
[data-rt] .btn-light:hover { border-color: var(--rt-gold); color: var(--rt-gold); }

[data-rt] .btn-danger {
  background: var(--rt-vermilion);
  border-color: var(--rt-vermilion);
  color: #fff;
}
[data-rt] .btn-outline-primary {
  background: transparent;
  border-color: var(--rt-gold);
  color: var(--rt-gold);
}
[data-rt] .btn-sm { padding: 0.4rem 0.75rem; font-size: var(--rt-t-xs); }
[data-rt] .btn-lg { padding: 0.8rem 1.4rem; font-size: var(--rt-t-base); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

[data-rt] .table {
  width: 100%;
  color: var(--rt-text);
  border-color: var(--rt-rule-soft);
  --bs-table-bg: transparent;
  --bs-table-color: var(--rt-text);
  --bs-table-striped-bg: var(--rt-ink-3);
  --bs-table-striped-color: var(--rt-text);
  --bs-table-hover-bg: var(--rt-ink-3);
  --bs-table-hover-color: var(--rt-text);
}
[data-rt] .table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--rt-rule-soft);
  padding: var(--rt-s3);
}
[data-rt] .table thead th {
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-gold);
  border-bottom: 1px solid var(--rt-rule);
}
[data-rt] .table-responsive { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Alerts and badges
   -------------------------------------------------------------------------- */

[data-rt] .alert {
  padding: var(--rt-s3) var(--rt-s4);
  border-radius: var(--rt-radius);
  border: 1px solid var(--rt-rule-soft);
  background: var(--rt-ink-3);
  color: var(--rt-text);
  font-size: var(--rt-t-sm);
}
[data-rt] .alert-danger {
  background: color-mix(in srgb, var(--rt-vermilion) 16%, transparent);
  border-color: color-mix(in srgb, var(--rt-vermilion) 45%, transparent);
}
[data-rt] .alert-success {
  background: color-mix(in srgb, var(--rt-emerald) 16%, transparent);
  border-color: color-mix(in srgb, var(--rt-emerald) 45%, transparent);
}
[data-rt] .alert-warning,
[data-rt] .alert-info {
  background: color-mix(in srgb, var(--rt-gold) 14%, transparent);
  border-color: color-mix(in srgb, var(--rt-gold) 40%, transparent);
}

[data-rt] .badge {
  padding: 0.3em 0.6em;
  border-radius: var(--rt-radius);
  font-family: var(--rt-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
[data-rt] .badge.bg-primary,
[data-rt] .badge.badge-primary { background: var(--rt-gold) !important; color: #1a1205; }
[data-rt] .badge.bg-success { background: var(--rt-emerald) !important; }
[data-rt] .badge.bg-danger { background: var(--rt-vermilion) !important; }

/* --------------------------------------------------------------------------
   Tabs, pagination, modals
   -------------------------------------------------------------------------- */

[data-rt] .nav-tabs {
  border-bottom: 1px solid var(--rt-rule-soft);
  gap: var(--rt-s1);
}
[data-rt] .nav-tabs .nav-link {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: var(--rt-s3) var(--rt-s4);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
[data-rt] .nav-tabs .nav-link:hover { color: var(--rt-text); border-bottom-color: var(--rt-rule); }
[data-rt] .nav-tabs .nav-link.active {
  background: transparent;
  color: var(--rt-gold);
  border-bottom-color: var(--rt-gold);
}
[data-rt] .nav-pills .nav-link { color: var(--rt-text-dim); border-radius: var(--rt-radius); }
[data-rt] .nav-pills .nav-link.active { background: var(--rt-ink-3); color: var(--rt-gold); }
[data-rt] .tab-content { padding-top: var(--rt-s4); }

[data-rt] .pagination { gap: var(--rt-s1); }
[data-rt] .page-link {
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  color: var(--rt-text-dim);
  font-size: var(--rt-t-sm);
}
[data-rt] .page-link:hover { background: var(--rt-ink-3); color: var(--rt-gold); }
[data-rt] .page-item.active .page-link {
  background: var(--rt-gold);
  border-color: var(--rt-gold);
  color: #1a1205;
}

[data-rt] .modal-content {
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  color: var(--rt-text);
}
[data-rt] .modal-header,
[data-rt] .modal-footer { border-color: var(--rt-rule-soft); }
[data-rt] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* --------------------------------------------------------------------------
   Media blocks left over from the Porto theme
   -------------------------------------------------------------------------- */

[data-rt] .thumb-info,
[data-rt] .thumb-info-wrapper {
  display: block;
  border: 0;
  border-radius: var(--rt-radius);
  overflow: hidden;
  background: var(--rt-ink-3);
}
[data-rt] .thumb-info img { width: 100%; height: auto; display: block; }
[data-rt] .thumb-info-title {
  display: block;
  padding: var(--rt-s3);
  background: var(--rt-ink-2);
  color: var(--rt-text);
  font-family: var(--rt-display);
  font-size: var(--rt-t-sm);
  font-weight: 700;
}
[data-rt] .thumb-info-action,
[data-rt] .thumb-info-action-icon { display: none; }

[data-rt] .post-image,
[data-rt] .service-img {
  border-radius: var(--rt-radius);
  overflow: hidden;
  background: var(--rt-ink-3);
}
[data-rt] .post-image img,
[data-rt] .service-img img { width: 100%; height: auto; display: block; }

[data-rt] iframe { max-width: 100%; border: 0; border-radius: var(--rt-radius); }

/* Anything the theme left with a hard white background would punch a hole in
   the page; neutralise the common offenders. */
[data-rt] .featured-box,
[data-rt] .feature-box,
[data-rt] .list-p,
[data-rt] .box-content {
  background: var(--rt-ink-2) !important;
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius-lg);
  color: var(--rt-text);
}

/* --------------------------------------------------------------------------
   Owl carousel, where a view still uses it
   -------------------------------------------------------------------------- */

[data-rt] .owl-carousel .owl-nav button {
  color: var(--rt-gold) !important;
  background: var(--rt-ink-2) !important;
  border: 1px solid var(--rt-rule-soft) !important;
  border-radius: var(--rt-radius) !important;
}
[data-rt] .owl-carousel .owl-dots .owl-dot span { background: var(--rt-ink-4) !important; }
[data-rt] .owl-carousel .owl-dots .owl-dot.active span { background: var(--rt-gold) !important; }


/* --------------------------------------------------------------------------
   Image guards

   Several inherited views drop a bare <img> into a column with no width set.
   With Porto's theme.css gone nothing constrained them, so the join-us photo
   placeholder rendered at its natural size and filled the page. Any image
   inside the frontend shell is now bounded by its column.
   -------------------------------------------------------------------------- */

[data-rt] img { max-width: 100%; height: auto; }

/* The photo picker on join-us and the profile forms */
[data-rt] #profilePhoto,
[data-rt] #currentPhoto,
[data-rt] .img-preview,
[data-rt] .image-preview,
[data-rt] #imagePreview,
[data-rt] .profile-photo {
  display: block;
  width: 100%;
  max-width: 190px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  background: var(--rt-ink-3);
}

/* Fallback: any oversized standalone image in a form column */
[data-rt] form img:not(.rt-avatar img):not(.rt-card__art img) { max-width: 220px; }

[data-rt] .go-back {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  margin-bottom: var(--rt-s4);
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rt-text-dim);
}
[data-rt] .go-back:hover { color: var(--rt-gold); }
[data-rt] .go-back::before { content: "\2190"; }

/* The inherited card headers read as grey bars; give them the section-label
   treatment the rest of the site uses. */
[data-rt] .card-header.bg-color-grey,
[data-rt] .card-header.card-title {
  background: transparent !important;
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-gold);
}
[data-rt] .card-header i { margin-inline-end: var(--rt-s2); }

/* Required-field marker */
[data-rt] .required::after { content: " *"; color: var(--rt-vermilion); }


/* --------------------------------------------------------------------------
   Autofill

   Chrome paints its own near-white background on autofilled fields and will
   not let a background-color override it. The only reliable way to repaint
   them on a dark form is an inset box-shadow the size of the field, plus
   -webkit-text-fill-color for the text. Without this, every remembered email
   and password renders as a white slab in the middle of the page — which is
   exactly what was happening on join-us, donation and the sign-in panel.
   -------------------------------------------------------------------------- */

[data-rt] input:-webkit-autofill,
[data-rt] input:-webkit-autofill:hover,
[data-rt] input:-webkit-autofill:focus,
[data-rt] textarea:-webkit-autofill,
[data-rt] select:-webkit-autofill {
  -webkit-text-fill-color: var(--rt-text);
  -webkit-box-shadow: 0 0 0 40rem var(--rt-ink) inset;
          box-shadow: 0 0 0 40rem var(--rt-ink) inset;
  caret-color: var(--rt-text);
  border-color: var(--rt-rule-soft);
  transition: background-color 8000s ease-in-out 0s;
}
[data-rt] input:-webkit-autofill:focus { border-color: var(--rt-gold); }

/* --------------------------------------------------------------------------
   Input groups

   Bootstrap's .input-group relies on flex-wrap:nowrap and negative margins
   that came from the theme; without them the leading icon wrapped onto its own
   line and sat above the field as a floating square.
   -------------------------------------------------------------------------- */

[data-rt] .input-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
[data-rt] .input-group > .form-control,
[data-rt] .input-group > input,
[data-rt] .input-group > select {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
[data-rt] .input-group-text {
  display: flex;
  align-items: center;
  padding: 0 var(--rt-s3);
  background: var(--rt-ink-3);
  border: 1px solid var(--rt-rule-soft);
  border-inline-end: 0;
  border-start-start-radius: var(--rt-radius);
  border-end-start-radius: var(--rt-radius);
  color: var(--rt-gold);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   File inputs

   The native control renders as a white "Choose file" button. Restyle the
   button portion rather than hiding the control, so keyboard focus and the
   file name both still work.
   -------------------------------------------------------------------------- */

[data-rt] input[type="file"] {
  padding: 0.42rem var(--rt-s3);
  font-size: var(--rt-t-sm);
  color: var(--rt-text-dim);
  cursor: pointer;
}
[data-rt] input[type="file"]::file-selector-button {
  margin-inline-end: var(--rt-s3);
  padding: 0.42rem 0.9rem;
  background: var(--rt-ink-3);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  color: var(--rt-text);
  font-family: var(--rt-body);
  font-size: var(--rt-t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s var(--rt-ease), color 0.2s var(--rt-ease);
}
[data-rt] input[type="file"]::file-selector-button:hover {
  border-color: var(--rt-gold);
  color: var(--rt-gold);
}

/* --------------------------------------------------------------------------
   Profile photo picker (join-us, profile forms)
   -------------------------------------------------------------------------- */

[data-rt] .profile-image-outer-container {
  display: grid;
  justify-items: center;
  gap: var(--rt-s3);
}
/* The camera badge sits at the edge of the circle, so the circle itself must
   not clip. The rounding moves onto the image instead. Previously the badge
   was cut in half by the container's overflow:hidden. */
[data-rt] .profile-image-inner-container {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: transparent !important;
}
[data-rt] .profile-image-inner-container img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--rt-ink-3);
  border: 1px solid var(--rt-rule);
  filter: saturate(0.55) brightness(0.9);
}
[data-rt] .profile-image-button {
  position: absolute;
  inset-inline-end: 2px;
  bottom: 4px;
  width: 34px;
  height: 34px;
  border: 2px solid var(--rt-ink-2);
  pointer-events: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rt-gold) !important;
  color: #16100a;
  font-size: 0.72rem;
}
[data-rt] .profile-image-button i { color: #16100a !important; }
[data-rt] .profile-image-input { max-width: 20rem; }

/* Labels on long forms read better in sentence case than as rows of mono
   capitals; keep the mono treatment for section headings only. */
[data-rt] form .form-label,
[data-rt] form .control-label {
  font-family: var(--rt-body);
  font-size: var(--rt-t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--rt-text-dim);
}


/* ==========================================================================
   Daylight corrections

   Most bridge rules already read from tokens, so they follow the theme on
   their own. These are the ones that named a dark value outright, plus the
   handful of Bootstrap utilities whose meaning flips between grounds.
   ========================================================================== */

[data-theme="light"] .bg-color-light,
[data-theme="light"] .bg-light,
[data-theme="light"] .bg-white { background-color: #ffffff !important; }
[data-theme="light"] .bg-color-grey,
[data-theme="light"] .bg-color-light-scale-1 { background-color: var(--rt-ink-3) !important; }
[data-theme="light"] .bg-color-dark { background-color: var(--rt-text) !important; color: #ece7dc !important; }

[data-theme="light"] .text-light,
[data-theme="light"] .text-white { color: var(--rt-text) !important; }
[data-theme="light"] .text-danger { color: #a5372a !important; }

[data-theme="light"] .shadow-sm,
[data-theme="light"] .box-shadow-1 { box-shadow: var(--rt-lift-1) !important; }

/* Autofill: same trick, paper-coloured. */
[data-theme="light"] input:-webkit-autofill,
[data-theme="light"] input:-webkit-autofill:hover,
[data-theme="light"] input:-webkit-autofill:focus,
[data-theme="light"] textarea:-webkit-autofill,
[data-theme="light"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--rt-text);
  -webkit-box-shadow: 0 0 0 40rem #ffffff inset;
          box-shadow: 0 0 0 40rem #ffffff inset;
}

/* Fields on paper are white with an ink hairline, not a darker well. */
[data-theme="light"] .form-control,
[data-theme="light"] .form-select,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="search"] {
  background: #ffffff;
  border-color: var(--rt-rule);
}
[data-theme="light"] .form-control:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus { background: #ffffff; }
[data-theme="light"] select option { background: #ffffff; color: var(--rt-text); }

[data-theme="light"] .input-group-text { background: var(--rt-ink-3); }
[data-theme="light"] input[type="file"]::file-selector-button {
  background: var(--rt-ink-3);
  color: var(--rt-text);
}

[data-theme="light"] .btn-close { filter: none; }
[data-theme="light"] .btn-danger { color: #fff; }

/* Datepicker and select2 popovers already draw on white; leave them be. */
[data-theme="light"] .datepicker,
[data-theme="light"] .select2-container--default .select2-dropdown { color: var(--rt-text); }

/* The search / suggestion dropdowns */
[data-theme="light"] .rt-suggest__list,
[data-theme="light"] .rt-menu__panel { background: #ffffff; }

/* The modal keeps its own weight on paper */
[data-theme="light"] .rt-modal { background: rgba(22, 40, 31, 0.42); }
[data-theme="light"] .rt-modal__box { background: #ffffff; }

/* The photo picker circle */
[data-theme="light"] .profile-image-inner-container { background: var(--rt-ink-3) !important; }
[data-theme="light"] .profile-image-inner-container img { filter: none; }
[data-theme="light"] .rt-avatar img { filter: none; }


/* --------------------------------------------------------------------------
   Long forms (matrimony create / edit, join us)

   These have forty-odd fields in one unbroken run. Rewriting each field is a
   lot of risk for little gain, but giving the existing .card wrappers real
   weight and putting the rows on a grid turns the same markup into something
   a person can work through section by section.
   -------------------------------------------------------------------------- */

[data-rt] form .card { margin-bottom: var(--rt-s4); }
[data-rt] form .card-header {
  padding: var(--rt-s4) var(--rt-s5);
  border-bottom: 1px solid var(--rt-rule-soft);
}
[data-rt] form .card-header h4,
[data-rt] form .card-header .card-title {
  margin: 0;
  font-family: var(--rt-mono);
  font-size: var(--rt-t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rt-gold);
}
[data-rt] form .card-body { padding: var(--rt-s5); }

/* Bootstrap's horizontal form rows lost their alignment with the theme; this
   restores a readable label column without touching the markup. */
[data-rt] form .form-group.row { align-items: baseline; margin-bottom: var(--rt-s4); }
[data-rt] form .control-label.col-lg-4,
[data-rt] form label.col-lg-4 { padding-top: 0; }

[data-rt] form .row > [class*="col-"] { margin-bottom: var(--rt-s3); }
[data-rt] form .row > [class*="col-"]:last-child { margin-bottom: 0; }

/* Submit rows */
[data-rt] form .form-group:last-child { margin-bottom: 0; }
[data-rt] form button[type="submit"],
[data-rt] form input[type="submit"] { min-width: 12rem; }

/* Section separators inside a long form */
[data-rt] form hr { margin-block: var(--rt-s5); }

/* Radio / checkbox rows sit tighter than block fields */
[data-rt] .form-check { margin-bottom: var(--rt-s2); }
[data-rt] .form-check-inline { margin-inline-end: var(--rt-s4); }


/* --------------------------------------------------------------------------
   Lists emitted by scripts

   .list-icons / .list-p come out of quiz-take.js and the academy search
   script, so they never appear in a Blade file and are easy to miss.
   -------------------------------------------------------------------------- */

[data-rt] .list-icons,
[data-rt] .list-p {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rt-s2);
}
[data-rt] .list-icons li,
[data-rt] .list-p li {
  display: flex;
  align-items: baseline;
  gap: var(--rt-s3);
  padding: var(--rt-s3);
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  font-size: var(--rt-t-sm);
  color: var(--rt-text);
}
[data-rt] .list-icons i { color: var(--rt-gold); flex: none; }
[data-rt] .list-borders li + li { margin-top: 0; }


/* --------------------------------------------------------------------------
   jQuery UI slider and select2

   Both ship their own light-theme chrome. These are re-dressed rather than
   replaced, because the matrimony match form binds to their exact markup.
   -------------------------------------------------------------------------- */

[data-rt] .ui-slider {
  position: relative;
  height: 4px;
  margin: var(--rt-s4) 0 var(--rt-s5);
  background: var(--rt-ink-3);
  border: 0;
  border-radius: 2px;
}
[data-rt] .ui-slider .ui-slider-range {
  position: absolute;
  height: 100%;
  background: var(--rt-emerald);
  border: 0;
  border-radius: 2px;
}
[data-rt] .ui-slider .ui-slider-handle {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-inline-start: -10px;
  transform: translateY(-50%);
  background: var(--rt-gold-leaf);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--rt-lift-1);
  cursor: grab;
  outline: 0;
}
[data-rt] .ui-slider .ui-slider-handle:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-emerald) 40%, transparent);
}
[data-rt] .ui-slider .ui-slider-handle:active { cursor: grabbing; }

/* select2, single and multiple */
[data-rt] .select2-container--default .select2-selection--single,
[data-rt] .select2-container--default .select2-selection--multiple {
  min-height: 44px;
  padding: 0.3rem var(--rt-s2);
  background: var(--rt-ink-2);
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius);
}
[data-rt] .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px;
  color: var(--rt-text);
  padding-inline-start: var(--rt-s2);
}
[data-rt] .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
[data-rt] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 4px 4px 0 0;
  padding: 0.2rem 0.5rem;
  background: color-mix(in srgb, var(--rt-emerald) 16%, transparent);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  color: var(--rt-text);
  font-size: var(--rt-t-sm);
}
[data-rt] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--rt-text-dim);
  margin-inline-end: 4px;
}
[data-rt] .select2-dropdown {
  background: var(--rt-ink-2);
  border-color: var(--rt-rule);
  border-radius: var(--rt-radius);
}
[data-rt] .select2-container--default .select2-results__option {
  color: var(--rt-text);
  font-size: var(--rt-t-sm);
  padding: var(--rt-s3) var(--rt-s4);
}
[data-rt] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--rt-emerald);
  color: #fff;
}
[data-rt] .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--rt-ink);
  border: 1px solid var(--rt-rule-soft);
  border-radius: var(--rt-radius);
  color: var(--rt-text);
}

/* A native multi-select, if select2 has not attached, should at least not be a
   tall grey slab. */
[data-rt] select[multiple] {
  min-height: 8rem;
  padding: var(--rt-s2);
}
[data-rt] select[multiple] option { padding: var(--rt-s2) var(--rt-s3); border-radius: var(--rt-radius); }


/* The native file control next to a photo picker: hide the ugly grey button
   and let the circle itself be the target. The input stays in the flow for
   keyboard users rather than being display:none. */
[data-rt] .profile-image-outer-container .profile-image-input {
  width: 100%;
  max-width: 15rem;
  font-size: var(--rt-t-xs);
  border: 0;
  background: transparent;
  padding-inline: 0;
}
[data-rt] .profile-image-outer-container .profile-image-input::file-selector-button {
  padding: 0.4rem 0.85rem;
  background: transparent;
  border: 1px solid var(--rt-rule);
  color: var(--rt-text);
  font-size: var(--rt-t-xs);
}