/* ============================================================================
   RAIS Admin — modern UI overrides
   Global restyle layer: rebrands to the RAIS purple and refreshes cards,
   tables, buttons, forms, badges, the sidebar and navbar across every page.
   Purely visual — no markup or behaviour is changed.
   ============================================================================ */

:root {
  --rais-primary: #6D28D9;
  --rais-primary-rgb: 109, 40, 217;
  --rais-primary-2: #8B5CF6;
  --rais-primary-dark: #5b21b6;
  --rais-primary-soft: #ede9fe;
  --rais-radius: 14px;
  --rais-radius-sm: 10px;
  --rais-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
  --rais-shadow-hover: 0 10px 28px rgba(16, 24, 40, 0.1);

  /* Re-point Bootstrap's primary so variable-driven components follow the brand */
  --bs-primary: #6D28D9;
  --bs-primary-rgb: 109, 40, 217;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------------- Colors */
.text-primary { color: var(--rais-primary) !important; }
.bg-primary { background-color: var(--rais-primary) !important; }
.border-primary { border-color: var(--rais-primary) !important; }

.bg-label-primary {
  background-color: var(--rais-primary-soft) !important;
  color: var(--rais-primary) !important;
}

.bg-gradient-primary,
.bg-primary.bg-gradient {
  background-image: linear-gradient(135deg, var(--rais-primary), var(--rais-primary-2)) !important;
}

a, .link-primary { color: var(--rais-primary); }
a:hover, .link-primary:hover { color: var(--rais-primary-dark); }

.badge.bg-primary { background-color: var(--rais-primary) !important; }

/* ---------------------------------------------------------------- Buttons */
.btn { border-radius: var(--rais-radius-sm); font-weight: 600; }

.btn-primary {
  background-color: var(--rais-primary) !important;
  border-color: var(--rais-primary) !important;
  box-shadow: 0 4px 12px rgba(var(--rais-primary-rgb), 0.25);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--rais-primary-dark) !important;
  border-color: var(--rais-primary-dark) !important;
}
.btn-primary:focus,
.btn-primary.focus { box-shadow: 0 0 0 0.2rem rgba(var(--rais-primary-rgb), 0.25) !important; }

.btn-outline-primary {
  color: var(--rais-primary) !important;
  border-color: rgba(var(--rais-primary-rgb), 0.5) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--rais-primary) !important;
  border-color: var(--rais-primary) !important;
  color: #fff !important;
}

.btn-label-primary {
  background-color: var(--rais-primary-soft) !important;
  color: var(--rais-primary) !important;
  border-color: transparent !important;
}
.btn-label-primary:hover {
  background-color: var(--rais-primary) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------------ Cards */
.card {
  border: 1px solid rgba(16, 24, 40, 0.05);
  border-radius: var(--rais-radius);
  box-shadow: var(--rais-shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card .card-header {
  padding: 1.1rem 1.25rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.05);
}
.card .card-header.border-bottom { border-bottom: 1px solid rgba(16, 24, 40, 0.06) !important; }

/* Dashboard / report stat cards get a subtle lift on hover */
.card.h-100:hover,
.card.cursor-pointer:hover { box-shadow: var(--rais-shadow-hover); }

/* --------------------------------------------------------------- Tables */
.table {
  --bs-table-hover-bg: rgba(var(--rais-primary-rgb), 0.04);
}
.table > thead {
  background-color: rgba(16, 24, 40, 0.02);
}
.table > thead > tr > th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #6f6b7d;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08) !important;
  padding-block: 0.85rem;
}
.table > tbody > tr > td {
  padding-block: 0.85rem;
  vertical-align: middle;
  border-color: rgba(16, 24, 40, 0.05);
}
.table-hover > tbody > tr { transition: background-color 0.12s ease; }

/* --------------------------------------------------------------- Badges */
.badge {
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 6px;
  padding: 0.35em 0.65em;
}
.badge.rounded-pill { border-radius: 50rem; }

/* ---------------------------------------------------------------- Forms */
.form-control,
.form-select {
  border-radius: var(--rais-radius-sm);
  border-color: rgba(16, 24, 40, 0.14);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--rais-primary) !important;
  box-shadow: 0 0 0 0.18rem rgba(var(--rais-primary-rgb), 0.16) !important;
}
.form-label { font-weight: 600; color: #5d596c; }

.input-group .input-group-text {
  border-radius: var(--rais-radius-sm);
  background-color: rgba(16, 24, 40, 0.02);
  border-color: rgba(16, 24, 40, 0.14);
}

.form-check-input:checked {
  background-color: var(--rais-primary);
  border-color: var(--rais-primary);
}
.form-check-input:focus { border-color: var(--rais-primary); box-shadow: 0 0 0 0.18rem rgba(var(--rais-primary-rgb), 0.16); }

/* ------------------------------------------------------ Dropdowns / menus */
.dropdown-menu {
  border: 1px solid rgba(16, 24, 40, 0.06);
  border-radius: var(--rais-radius);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.12);
  padding: 0.4rem;
}
.dropdown-menu .dropdown-item { border-radius: 8px; padding: 0.5rem 0.75rem; }
.dropdown-menu .dropdown-item:hover { background-color: rgba(var(--rais-primary-rgb), 0.08); }
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: var(--rais-primary);
  color: #fff;
}

/* ---------------------------------------------------------------- Alerts */
.alert { border-radius: var(--rais-radius-sm); border: none; }

/* ------------------------------------------------------------- Pagination */
.pagination .page-item.active .page-link {
  background-color: var(--rais-primary);
  border-color: var(--rais-primary);
}
.pagination .page-link { color: var(--rais-primary); border-radius: 8px; margin: 0 2px; }
.pagination .page-link:focus { box-shadow: 0 0 0 0.18rem rgba(var(--rais-primary-rgb), 0.18); }

/* ---------------------------------------------------------------- Modals */
.modal-content { border: none; border-radius: var(--rais-radius); box-shadow: 0 24px 60px rgba(16, 24, 40, 0.2); }
.modal-header { border-bottom: 1px solid rgba(16, 24, 40, 0.06); }
.modal-footer { border-top: 1px solid rgba(16, 24, 40, 0.06); }

/* ----------------------------------------------------------- Progress bars */
.progress-bar { background-color: var(--rais-primary); }

/* =================================================================== Navbar */
.layout-navbar .navbar-detached {
  border-radius: var(--rais-radius);
  box-shadow: var(--rais-shadow);
  border: 1px solid rgba(16, 24, 40, 0.04);
}

/* ================================================================== Sidebar */
#layout-menu {
  border-inline-end: 1px solid rgba(16, 24, 40, 0.05);
}

#layout-menu .app-brand-text { color: var(--rais-primary); letter-spacing: -0.3px; }

#layout-menu .menu-inner > .menu-item,
#layout-menu .menu-sub > .menu-item { margin: 1px 0; }

#layout-menu .menu-link {
  border-radius: var(--rais-radius-sm);
  margin-inline: 8px;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover (non-active) */
#layout-menu .menu-item:not(.active) > .menu-link:hover {
  background-color: rgba(var(--rais-primary-rgb), 0.06) !important;
  color: var(--rais-primary-dark) !important;
}

/* Active top-level link — tonal purple pill */
#layout-menu .menu-item.active > .menu-link {
  background: linear-gradient(135deg, rgba(var(--rais-primary-rgb), 0.16), rgba(var(--rais-primary-rgb), 0.07)) !important;
  color: var(--rais-primary) !important;
  box-shadow: none !important;
  font-weight: 700;
}
#layout-menu .menu-item.active > .menu-link .menu-icon { color: var(--rais-primary) !important; }

/* Open (expanded) parent toggle stays subtle, not filled */
#layout-menu .menu-item.open:not(.active) > .menu-toggle {
  background-color: rgba(var(--rais-primary-rgb), 0.04) !important;
}

/* Submenu active leaf */
#layout-menu .menu-sub > .menu-item.active > .menu-link {
  color: var(--rais-primary) !important;
  font-weight: 600;
  background: transparent !important;
}
#layout-menu .menu-sub > .menu-item.active > .menu-link::before { background-color: var(--rais-primary) !important; }
#layout-menu .menu-sub > .menu-item > .menu-link:hover::before { background-color: var(--rais-primary) !important; }

/* Section headers */
#layout-menu .menu-header {
  margin-top: 1rem;
}
#layout-menu .menu-header .menu-header-text {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: rgba(16, 24, 40, 0.38);
}

/* =============================================================== Scrollbar */
.ps__thumb-y { background-color: rgba(var(--rais-primary-rgb), 0.25) !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, 0.18); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--rais-primary-rgb), 0.4); }

/* ============================================================ Dark style */
.dark-style {
  --rais-primary-soft: rgba(139, 92, 246, 0.16);
}
.dark-style .card { border-color: rgba(255, 255, 255, 0.06); }
.dark-style .table > thead { background-color: rgba(255, 255, 255, 0.03); }
.dark-style #layout-menu { border-inline-end-color: rgba(255, 255, 255, 0.06); }

/* ======================================================================
   Motion layer — admin-wide animations & micro-interactions
   ====================================================================== */
@keyframes raisFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes raisFadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes raisPop      { 0% { transform: scale(.94); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }
@keyframes raisSpin     { to { transform: rotate(360deg); } }
@keyframes raisShimmer  { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } }

/* NOTE: do NOT animate or transform `.content-wrapper > .container-xxl` — it wraps
   the page's Bootstrap modals, and any animation/transform/opacity/filter there
   creates a stacking context that traps modals *under* the .modal-backdrop, making
   them look dimmed/disabled. Page entrance is handled by `.rais-reveal` instead. */

/* Cards lift gently on hover for a tactile feel */
.card { transition: box-shadow .22s ease, transform .22s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--rais-shadow-hover); }

/* Buttons get a spring + press micro-interaction */
.btn { transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.99); }

/* Table rows wake up on hover */
.table-hover > tbody > tr,
.table > tbody > tr { transition: background-color .12s ease, transform .12s ease; }

/* Badges pop into place */
.badge { animation: raisPop .28s ease both; }

/* Reveal-on-scroll utility — JS toggles `.is-visible` */
.rais-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.21, .68, .3, 1);
  will-change: opacity, transform;
}
.rais-reveal.is-visible { opacity: 1; transform: none; }

/* ======================================================================
   Detail pages — stat tiles, info lists, profile header, timeline
   ====================================================================== */
.rais-stat-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--rais-radius);
  padding: 1.1rem 1.25rem;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.05);
  box-shadow: var(--rais-shadow);
  transition: box-shadow .22s ease, transform .22s ease;
}
.rais-stat-card:hover { transform: translateY(-3px); box-shadow: var(--rais-shadow-hover); }
.rais-stat-card .rais-stat-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: #8b88a0;
}
.rais-stat-card .rais-stat-value { font-size: 1.4rem; font-weight: 700; color: #443c5c; letter-spacing: -.5px; line-height: 1.2; }
.rais-stat-card .rais-stat-icon {
  position: absolute; top: 1rem; right: 1rem;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px; font-size: 1.25rem;
  background: var(--rais-primary-soft); color: var(--rais-primary);
}
.rais-stat-card.is-accent { background: linear-gradient(135deg, var(--rais-primary), var(--rais-primary-2)); border: none; }
.rais-stat-card.is-accent .rais-stat-label { color: rgba(255, 255, 255, .82); }
.rais-stat-card.is-accent .rais-stat-value { color: #fff; }
.rais-stat-card.is-accent .rais-stat-icon { background: rgba(255, 255, 255, .2); color: #fff; }

/* Icon-led key/value lists */
.rais-detail-list { list-style: none; margin: 0; padding: 0; }
.rais-detail-list > li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px dashed rgba(16, 24, 40, 0.08);
}
.rais-detail-list > li:last-child { border-bottom: 0; }
.rais-detail-list .rais-detail-ico {
  flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 9px; background: rgba(var(--rais-primary-rgb), .08);
  color: var(--rais-primary); font-size: 1rem;
}
.rais-detail-list .rais-detail-body { min-width: 0; }
.rais-detail-list .rais-detail-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .3px; color: #a5a2b3; font-weight: 600; }
.rais-detail-list .rais-detail-value { font-weight: 600; color: #514d63; word-break: break-word; }

/* Profile header band */
.rais-profile-head {
  position: relative; text-align: center; padding: 1.5rem 1rem 1.25rem;
  border-radius: var(--rais-radius) var(--rais-radius) 0 0;
  background: linear-gradient(135deg, rgba(var(--rais-primary-rgb), .12), rgba(var(--rais-primary-rgb), .03));
}
.rais-avatar-ring {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
  border: 4px solid #fff; box-shadow: 0 6px 18px rgba(var(--rais-primary-rgb), .25);
  background: #fff;
}

/* Borrower rating (live credit score) shown under the profile name/role */
.rais-rating {
  display: inline-flex; align-items: center; gap: .15rem;
  font-size: 1.05rem; line-height: 1;
}
.rais-rating .rais-rating-empty { color: rgba(16, 24, 40, 0.22); }
.rais-rating .rais-rating-val {
  margin-left: .4rem; font-size: .78rem; font-weight: 700;
  color: rgba(16, 24, 40, 0.55);
}

/* Section eyebrow label */
.rais-eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--rais-primary); margin-bottom: .6rem; display: flex; align-items: center; gap: .4rem;
}

/* Repayment progress strip on the schedule card */
.rais-progress-wrap { background: rgba(16, 24, 40, 0.06); border-radius: 50rem; height: 10px; overflow: hidden; }
.rais-progress-wrap > span {
  display: block; height: 100%; border-radius: 50rem;
  background: linear-gradient(90deg, var(--rais-primary), var(--rais-primary-2));
  width: 0; transition: width 1s cubic-bezier(.21, .68, .3, 1);
}

/* Reduced-motion: respect the user's OS setting */
@media (prefers-reduced-motion: reduce) {
  .content-wrapper > .container-xxl,
  .card, .btn, .badge, .rais-reveal, .rais-stat-card, .rais-progress-wrap > span {
    animation: none !important;
    transition: none !important;
  }
  .rais-reveal { opacity: 1 !important; transform: none !important; }
}

/* ===================== Pill search (borrower profile tabs) ===================== */
.rais-search {
  max-width: 480px;
  background-color: #f4f4f8;
  border: 1px solid transparent;
  border-radius: 50rem;
  padding: 0.3rem 0.35rem 0.3rem 0.5rem;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.rais-search:focus-within {
  background-color: #fff;
  border-color: #6d28d9;
  box-shadow: 0 0 0 0.18rem rgba(109, 40, 217, 0.12);
}
.rais-search > .input-group-text {
  background: transparent;
  border: 0;
  color: #8a8d93;
  padding: 0 0.25rem 0 0.65rem;
  font-size: 1.05rem;
}
.rais-search > .form-control {
  background: transparent !important;
  border: 0;
  box-shadow: none !important;
  padding: 0.25rem 0.5rem;
  height: auto;
}
.rais-search > .form-control::placeholder { color: #a7aab1; }
.rais-search .btn-primary {
  border-radius: 50rem;
  padding: 0.4rem 1.4rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(109, 40, 217, 0.25);
}
.rais-search .btn-outline-secondary {
  border: 0;
  background: transparent;
  color: #9498a0;
  border-radius: 50%;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rais-search .btn-outline-secondary:hover {
  color: #6d28d9;
  background: rgba(109, 40, 217, 0.1);
}