/* ============================================================
   Credit Risk BJBS — RED & WHITE brand + rich/modern polish
   on top of Materio. Identity: merah (syariah) + putih.
   ============================================================ */
:root {
  --bjbs-red:        #c8102e;   /* primary — syariah red       */
  --bjbs-red-dark:   #9e0c24;
  --bjbs-red-700:    #7a1020;   /* deep maroon (sidebar)       */
  --bjbs-red-soft:   rgba(200, 16, 46, .10);
  --bjbs-red-soft-2: rgba(200, 16, 46, .06);
  --bjbs-gold:       #c99a3c;   /* swoosh gold accent          */
  --bjbs-ink:        #2f2b3c;

  --bs-primary: #c8102e;
  --bs-primary-rgb: 200, 16, 46;
  --bs-link-color-rgb: 200, 16, 46;
  --bs-link-hover-color-rgb: 158, 12, 36;
}

/* ---- Body: layered, never-empty background ---- */
body {
  background-color: #f6f4f5 !important;
  background-image:
    radial-gradient(1100px 520px at 100% -8%, rgba(200,16,46,.08), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(201,154,60,.08), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23c8102e' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

/* ---- Primary recolor ---- */
.text-primary { color: var(--bjbs-red) !important; }
.bg-primary   { background-color: var(--bjbs-red) !important; }
.bg-label-primary { background-color: var(--bjbs-red-soft) !important; color: var(--bjbs-red) !important; }
.border-primary { border-color: var(--bjbs-red) !important; }
.bg-gradient-primary { background-image: linear-gradient(135deg, var(--bjbs-red) 0%, var(--bjbs-red-dark) 100%) !important; color:#fff; }

.btn-primary {
  --bs-btn-bg: var(--bjbs-red);
  --bs-btn-border-color: var(--bjbs-red);
  --bs-btn-hover-bg: var(--bjbs-red-dark);
  --bs-btn-hover-border-color: var(--bjbs-red-dark);
  --bs-btn-active-bg: var(--bjbs-red-dark);
  --bs-btn-active-border-color: #84091d;
  --bs-btn-disabled-bg: var(--bjbs-red);
  --bs-btn-disabled-border-color: var(--bjbs-red);
  background-image: linear-gradient(135deg, #d51933 0%, var(--bjbs-red-dark) 100%);
  box-shadow: 0 .35rem .9rem -.2rem rgba(200, 16, 46, .55);
}
.btn-primary:hover { box-shadow: 0 .5rem 1.1rem -.2rem rgba(200, 16, 46, .6); }
.btn-outline-primary {
  --bs-btn-color: var(--bjbs-red); --bs-btn-border-color: var(--bjbs-red);
  --bs-btn-hover-bg: var(--bjbs-red); --bs-btn-hover-border-color: var(--bjbs-red);
  --bs-btn-active-bg: var(--bjbs-red);
}
.btn-label-primary { background-color: var(--bjbs-red-soft); color: var(--bjbs-red); border: 0; }
.btn { border-radius: .55rem; font-weight: 500; }
.btn-sm { border-radius: .45rem; }

a { color: var(--bjbs-red); }
a:hover { color: var(--bjbs-red-dark); }
.form-check-input:checked { background-color: var(--bjbs-red); border-color: var(--bjbs-red); }
.form-control:focus, .form-select:focus { border-color: var(--bjbs-red); box-shadow: 0 0 0 .15rem rgba(200,16,46,.15); }
.page-item.active .page-link { background-color: var(--bjbs-red); border-color: var(--bjbs-red); }
.page-link { color: var(--bjbs-red); }
.progress-bar { background-color: var(--bjbs-red); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { color: #fff; }
.nav-pills .nav-link.active { background-color: var(--bjbs-red); }
.nav-tabs .nav-link.active { color: var(--bjbs-red); border-bottom-color: var(--bjbs-red); }

/* ---- Sidebar: gradient + branded, never plain ---- */
.bg-menu-theme {
  background-image: linear-gradient(195deg, #ffffff 0%, #fff6f7 55%, #fdeef0 100%) !important;
  border-right: 1px solid rgba(200,16,46,.08);
}
#layout-menu .app-brand {
  background: linear-gradient(135deg, var(--bjbs-red) 0%, var(--bjbs-red-700) 100%);
  margin: 0; border-radius: 0; justify-content: center; position: relative;
}
#layout-menu .app-brand .app-brand-link { background:#fff; border-radius:.6rem; padding:.45rem .85rem; box-shadow:0 .25rem .6rem rgba(0,0,0,.12); justify-content:center; margin:0 auto; }
#layout-menu .app-brand .app-brand-link img { margin:0 auto; display:block; }
#layout-menu .app-brand .layout-menu-toggle { position:absolute; right:.4rem; top:50%; transform:translateY(-50%); }
.menu-vertical .menu-item .menu-link { border-radius: .55rem; margin: .075rem .6rem; font-weight: 500; }
.menu-vertical .menu-item .menu-link:hover { background-color: var(--bjbs-red-soft-2); }
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background-image: linear-gradient(135deg, var(--bjbs-red) 0%, var(--bjbs-red-dark) 100%) !important;
  color: #fff !important;
  box-shadow: 0 .35rem .8rem -.2rem rgba(200,16,46,.6);
}
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon { color: #fff !important; }
.menu-vertical .menu-item.open > .menu-toggle { background-color: var(--bjbs-red-soft); color: var(--bjbs-red); }
.menu-vertical .menu-sub .menu-item.active > .menu-link { color: var(--bjbs-red) !important; font-weight: 600; }
.menu-vertical .menu-sub .menu-link::before { background-color: var(--bjbs-red); }
.menu-header { color: var(--bjbs-red); font-weight: 700; letter-spacing: .6px; opacity: .85; }
.menu-header::after { content:''; display:block; height:2px; width:26px; margin-top:.35rem; background:linear-gradient(90deg,var(--bjbs-red),transparent); border-radius:2px; }
#layout-menu .menu-icon { color: var(--bjbs-red); }

/* ---- Navbar ---- */
.layout-navbar { box-shadow: 0 .15rem .5rem rgba(47,43,61,.06); border-radius: .75rem; }

/* ---- Content width: fill wide/ultrawide, cap for readability on huge monitors ---- */
@media (min-width: 2400px) {
  .layout-page .container-fluid { max-width: 2400px; margin-left: auto; margin-right: auto; }
}

/* ---- Cards ---- */
.card {
  border: 0;
  border-radius: .85rem;
  box-shadow: 0 .25rem 1.1rem rgba(47, 43, 61, .08);
  transition: box-shadow .2s ease;
}
.card:hover { box-shadow: 0 .4rem 1.4rem rgba(47, 43, 61, .12); }
.card .card-header { background: transparent; font-weight: 600; }
.card-title { font-weight: 700; }
.card-header.bg-gradient-primary, .card-header.bg-primary { color:#fff; border-radius:.85rem .85rem 0 0; }

/* ---- Tables ---- */
table.dataTable thead th, .table thead th {
  text-transform: uppercase; font-size: .72rem; letter-spacing: .5px; font-weight: 700;
  color: var(--bjbs-red-dark);
  background: linear-gradient(180deg, #fff2f4 0%, #fde9ec 100%);
  border-bottom: 2px solid rgba(200,16,46,.15) !important; white-space: nowrap;
}
.table > tbody > tr { transition: background-color .15s ease; }
.table > tbody > tr:hover > * { background-color: rgba(200, 16, 46, .045); }
.table td, .table th { vertical-align: middle; }
.table-rounded { overflow: hidden; border-radius: .65rem; }
.dataTables_wrapper .dataTables_filter input { border-radius: .5rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--bjbs-red) !important; border-color: var(--bjbs-red) !important; color:#fff !important; border-radius:.4rem; }

/* ---- Badges ---- */
.badge { font-weight: 600; letter-spacing: .2px; padding: .35em .65em; }
.badge.rounded-pill { padding: .4em .8em; }

/* ---- Filter card ---- */
.filter-card { border-top: 3px solid var(--bjbs-red); }
.filter-card .card-header, .filter-card .card-title { color: var(--bjbs-red-dark); }
.filter-card .card-title i, .page-title i { color: var(--bjbs-red); }
/* consistent filter controls + buttons across every page (standard/wide/ultrawide) */
.filter-card .row { row-gap: .9rem; }
.filter-card .form-label { font-weight: 500; margin-bottom: .35rem; }
.filter-card .btn { min-width: 7rem; white-space: nowrap; }
.filter-card .btn.btn-icon { min-width: 0; }
/* safety net: if any Select2 remains inside an input-group, keep it inline (not stacked) */
.filter-card .input-group .select2-container { flex: 1 1 auto; width: auto !important; }

/* ---- Stat cards ---- */
.stat-card { position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 .65rem 1.6rem rgba(47,43,61,.18); }
.stat-card::after { content:''; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; background:var(--bjbs-red-soft-2); }
.stat-icon {
  width: 46px; height: 46px; border-radius: .75rem;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.45rem;
}
.stat-icon.gradient-red { background: linear-gradient(135deg, var(--bjbs-red), var(--bjbs-red-dark)); color:#fff; }

/* ---- Page header ---- */
.page-title { font-weight: 800; letter-spacing: -.2px; }
.breadcrumb .breadcrumb-item a { color: var(--bjbs-red); }
.breadcrumb .breadcrumb-item.active { color: #6f6b7d; }

/* ---- Welcome / hero banner ---- */
.welcome-banner {
  background: linear-gradient(120deg, var(--bjbs-red) 0%, var(--bjbs-red-dark) 55%, var(--bjbs-red-700) 100%);
  color: #fff; border-radius: 1rem; overflow: hidden; position: relative; border: 0;
}
.welcome-banner::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(420px 220px at 88% -20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(300px 200px at 10% 130%, rgba(201,154,60,.35), transparent 60%);
}
.welcome-banner .card-body { position: relative; z-index: 1; }
.welcome-banner .welcome-logo { background:#fff; border-radius:.7rem; padding:.6rem .9rem; display:inline-flex; align-items:center; box-shadow:0 .4rem 1rem rgba(0,0,0,.18); }

/* ---- Section heading divider ---- */
.section-title { font-weight: 800; color: var(--bjbs-ink); position: relative; padding-left: .8rem; }
.section-title::before { content:''; position:absolute; left:0; top:.15em; bottom:.15em; width:4px; border-radius:4px; background:linear-gradient(180deg,var(--bjbs-red),var(--bjbs-gold)); }

/* ---- Kol badges (shared helper) ---- */
.kol-badge { font-weight:700; }

/* ---- Auth ---- */
.bjbs-auth-bg {
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 10% 6%, rgba(200,16,46,.18), transparent 55%),
    radial-gradient(820px 500px at 92% 96%, rgba(201,154,60,.18), transparent 55%),
    radial-gradient(600px 400px at 95% 8%, rgba(200,16,46,.10), transparent 60%),
    linear-gradient(135deg, #fbeef0 0%, #f5f3f4 45%, #fdf4ec 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%23c8102e' fill-opacity='0.06'/%3E%3C/svg%3E");
  background-attachment: fixed;
}
.bjbs-auth-hero {
  background: linear-gradient(150deg, var(--bjbs-red) 0%, var(--bjbs-red-dark) 60%, var(--bjbs-red-700) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.bjbs-auth-hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(500px 320px at 85% 10%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(380px 260px at 10% 95%, rgba(201,154,60,.40), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 59 L59 0' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
}
.bjbs-auth-hero > * { position: relative; z-index: 1; }
.bjbs-auth-card { border-radius: 1.1rem; box-shadow: 0 1rem 3rem rgba(47,43,61,.22); overflow: hidden; }
.bjbs-auth-logo { max-width: 230px; height: auto; }
.bjbs-auth-feature i { color: var(--bjbs-gold); }

/* ---- Misc polish ---- */
.avatar-initial { font-weight: 700; }
.divider .divider-text { color: var(--bjbs-red); }
hr { opacity: .08; }
.list-group-item.active { background-color: var(--bjbs-red); border-color: var(--bjbs-red); }
.timeline .timeline-point { border-color: var(--bjbs-red); }