/*
  =========================================
  RTJ Custom Style
  File ini khusus untuk mengubah tampilan.
  Pemula cukup edit warna di bagian :root
  =========================================
*/

:root {
  --rtj-utama: #0f766e;      /* warna utama (teal) */
  --rtj-gelap: #134e4a;      /* warna gelap */
  --rtj-muda: #5eead4;       /* aksen terang */
  --rtj-bg: #f3f6f8;         /* latar halaman */
  --rtj-kartu: #ffffff;      /* latar kartu */
  --rtj-teks: #1e293b;       /* teks utama */
  --rtj-abu: #64748b;        /* teks sekunder */
  --rtj-garis: #e2e8f0;      /* garis tipis */
  --rtj-radius: 16px;        /* sudut melengkung */
  --rtj-bayangan: 0 10px 30px rgba(15, 23, 42, 0.06);
}

/* ---------- umum ---------- */
body {
  background: var(--rtj-bg) !important;
  color: var(--rtj-teks);
}

/* Jangan kecilkan padding atas, biar konten tidak nabrak header tetap */
.page-content {
  padding: 100px 16px 60px !important;
}

.rtj-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.rtj-subtitle {
  color: var(--rtj-abu);
  margin-bottom: 20px;
}

.rtj-card {
  background: var(--rtj-kartu);
  border: 1px solid var(--rtj-garis);
  border-radius: var(--rtj-radius);
  box-shadow: var(--rtj-bayangan);
  margin-bottom: 20px;
  overflow: hidden; /* supaya sudut border & header tidak bolong */
}

/* Border warna untuk kartu form penawaran (biar beda section) */
.rtj-card-accent {
  border-width: 2px;
  border-style: solid;
}
.rtj-card-header-doc { border-color: #3b82f6; }
.rtj-card-header-doc .rtj-card-head { background: #eff6ff; color: #1e40af; }
.rtj-card-grup { border-color: #0f766e; }
.rtj-card-grup .rtj-card-head { background: #f0fdfa; color: #134e4a; }
.rtj-card-item { border-color: #f59e0b; }
.rtj-card-item .rtj-card-head { background: #fffbeb; color: #92400e; }
.rtj-card-estimasi { border-color: #8b5cf6; }
.rtj-card-estimasi .rtj-card-head { background: #f5f3ff; color: #5b21b6; }
.rtj-card-bagi { border-color: #ec4899; }
.rtj-card-bagi .rtj-card-head { background: #fdf2f8; color: #9d174d; }
.rtj-card-tips { border-color: #06b6d4; }
.rtj-card-tips .rtj-card-head { background: #ecfeff; color: #0e7490; }
.rtj-card-hasil { border-color: #64748b; }
.rtj-card-hasil .rtj-card-head { background: #f8fafc; color: #334155; }

/* Warna baris / sel Estimasi sesuai Excel Quo */
.rtj-row-excel-ungu > td,
.rtj-row-excel-ungu > th,
td.rtj-row-excel-ungu,
th.rtj-row-excel-ungu {
  background: #CCC0D9 !important;
}
.rtj-row-excel-hijau > td,
.rtj-row-excel-hijau > th,
td.rtj-row-excel-hijau,
th.rtj-row-excel-hijau {
  background: #C2D69B !important;
}
.rtj-row-excel-ungu strong,
.rtj-row-excel-ungu .fw-bold {
  color: #4c1d95;
}
.rtj-card-sph { border-color: #0f766e; }
.rtj-card-sph .rtj-card-head { background: #f0fdfa; color: #134e4a; }
.rtj-card-quo { border-color: #f59e0b; }
.rtj-card-quo .rtj-card-head { background: #fffbeb; color: #92400e; }

/* Tombol hapus modern (baris tabel) */
.btn-rtj-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
  border-radius: 10px;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn-rtj-del:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.btn-rtj-del:active {
  transform: scale(0.96);
}
.btn-rtj-del i {
  font-size: 16px;
  pointer-events: none;
}

/* Kolom aksi tabel — selalu rata kiri biar rapi */
td.rtj-aksi,
th.rtj-aksi,
.rtj-aksi {
  text-align: left !important;
  white-space: nowrap;
  vertical-align: middle !important;
}
td.rtj-aksi {
  display: table-cell;
}
.rtj-aksi-wrap {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

/* Tombol aksi ikon di tabel */
.btn-rtj-aksi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: #fff !important;
  margin: 0;
  vertical-align: middle;
  text-decoration: none !important;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: opacity .15s ease, transform .1s ease;
}
.btn-rtj-aksi:hover {
  opacity: 0.9;
  color: #fff !important;
  transform: translateY(-1px);
}
.btn-rtj-aksi i {
  font-size: 15px;
  pointer-events: none;
  line-height: 1;
}
.btn-rtj-aksi-detail { background: #0f766e; }
.btn-rtj-aksi-edit { background: #2563eb; }
.btn-rtj-aksi-sph { background: #16a34a; }
.btn-rtj-aksi-quo { background: #ca8a04; }
.btn-rtj-aksi-banding { background: #7c3aed; }
.btn-rtj-aksi-revisi { background: #ea580c; }
.btn-rtj-aksi-hapus { background: #dc2626; }

.rtj-card .card-body,
.rtj-card-body {
  padding: 22px;
}

/* Grid meta detail — kolom rata, label & value sejajar */
.rtj-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px;
  align-items: start;
}
.rtj-detail-field {
  min-width: 0;
}
.rtj-detail-field > small {
  margin-bottom: 2px;
  line-height: 1.3;
}
.rtj-detail-field > strong {
  display: block;
  line-height: 1.4;
  word-break: break-word;
}
.rtj-detail-span-2 { grid-column: span 2; }
.rtj-detail-span-3 { grid-column: 1 / -1; }
@media (max-width: 767.98px) {
  .rtj-detail-grid {
    grid-template-columns: 1fr;
  }
  .rtj-detail-span-2,
  .rtj-detail-span-3 {
    grid-column: auto;
  }
}

/* Grid meta detail — kolom rata, label & value sejajar */
.rtj-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 24px;
  align-items: start;
}
.rtj-detail-field {
  min-width: 0;
}
.rtj-detail-field > small {
  margin-bottom: 2px;
  line-height: 1.3;
}
.rtj-detail-field > strong {
  display: block;
  line-height: 1.4;
  word-break: break-word;
}
.rtj-detail-span-2 { grid-column: span 2; }
.rtj-detail-span-3 { grid-column: 1 / -1; }
@media (max-width: 767.98px) {
  .rtj-detail-grid {
    grid-template-columns: 1fr;
  }
  .rtj-detail-span-2,
  .rtj-detail-span-3 {
    grid-column: auto;
  }
}

.rtj-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--rtj-garis);
}

.rtj-card-head h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

/* Tombol teks — bentuk seragam (radius 12px) */
.rtj-btn,
.btn.rtj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 12px !important;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25;
  background: var(--rtj-utama);
  color: #fff !important;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s ease;
}

.rtj-btn:hover,
.btn.rtj-btn:hover {
  background: var(--rtj-gelap);
  color: #fff !important;
  transform: translateY(-1px);
}

.btn-sm.rtj-btn,
.rtj-btn.btn-sm {
  padding: 8px 14px;
  font-size: 0.8125rem;
  border-radius: 12px !important;
}

/* Spesifisitas lebih tinggi dari .btn.rtj-btn agar warna teks tidak tertimpa putih */
.rtj-btn.rtj-btn-soft,
.btn.rtj-btn.rtj-btn-soft {
  background: #ecfdf5 !important;
  color: #134e4a !important;
  border-color: #0f766e;
}

.rtj-btn.rtj-btn-soft:hover,
.btn.rtj-btn.rtj-btn-soft:hover {
  background: #d1fae5 !important;
  color: #134e4a !important;
  border-color: #0f766e;
}

.rtj-btn.rtj-btn-info,
.btn.rtj-btn.rtj-btn-info {
  background: #2563eb !important;
  color: #fff !important;
}

.rtj-btn.rtj-btn-info:hover,
.btn.rtj-btn.rtj-btn-info:hover {
  background: #1d4ed8 !important;
  color: #fff !important;
}

.rtj-btn.rtj-btn-success,
.btn.rtj-btn.rtj-btn-success {
  background: #16a34a !important;
  color: #fff !important;
}

.rtj-btn.rtj-btn-success:hover,
.btn.rtj-btn.rtj-btn-success:hover {
  background: #15803d !important;
  color: #fff !important;
}

.rtj-btn.rtj-btn-warning,
.btn.rtj-btn.rtj-btn-warning {
  background: #ea580c !important;
  color: #fff !important;
}

.rtj-btn.rtj-btn-warning:hover,
.btn.rtj-btn.rtj-btn-warning:hover {
  background: #c2410c !important;
  color: #fff !important;
}

.rtj-btn.rtj-btn-danger,
.btn.rtj-btn.rtj-btn-danger {
  background: #dc2626 !important;
  color: #fff !important;
}

.rtj-btn.rtj-btn-danger:hover,
.btn.rtj-btn.rtj-btn-danger:hover {
  background: #b91c1c !important;
  color: #fff !important;
}

.rtj-btn.rtj-btn-outline,
.btn.rtj-btn.rtj-btn-outline {
  background: #fff !important;
  color: #334155 !important;
  border-color: #94a3b8;
}

.rtj-btn.rtj-btn-outline:hover,
.btn.rtj-btn.rtj-btn-outline:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #64748b;
}

/* Chip / tombol modern (toolbar detail) */
.rtj-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rtj-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.rtj-chip i { font-size: 1rem; line-height: 1; }
.rtj-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); }
.rtj-chip-sm { padding: 6px 12px; font-size: 0.8125rem; }
.rtj-chip-muted {
  background: #f8fafc;
  color: #475569 !important;
  border-color: #e2e8f0;
}
.rtj-chip-muted:hover { background: #f1f5f9; color: #334155 !important; }
.rtj-chip-blue {
  background: #eff6ff;
  color: #1d4ed8 !important;
  border-color: #bfdbfe;
}
.rtj-chip-blue:hover { background: #dbeafe; color: #1e40af !important; }
.rtj-chip-orange {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fdba74;
}
.rtj-chip-green {
  background: #ecfdf5;
  color: #047857 !important;
  border-color: #a7f3d0;
}
.rtj-chip-green:hover { background: #d1fae5; color: #065f46 !important; }

/* Segmented tabs modern */
.rtj-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}
.rtj-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
a.rtj-seg-btn:hover { text-decoration: none !important; }
.rtj-seg-btn i { font-size: 1.05rem; }
.rtj-seg-btn:hover { color: #0f766e; background: rgba(255,255,255,0.7); }
.rtj-seg-btn.active {
  background: #fff;
  color: #0f766e;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

/* Tombol primary Minia (ungu) diganti hijau RTJ */
.btn-primary {
  background-color: var(--rtj-utama) !important;
  border-color: var(--rtj-utama) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--rtj-gelap) !important;
  border-color: var(--rtj-gelap) !important;
}

.bg-primary,
.bg-soft-primary {
  background-color: var(--rtj-utama) !important;
}

.text-primary {
  color: var(--rtj-utama) !important;
}

.rtj-input,
.rtj-card .form-control,
.rtj-card .form-select {
  border-radius: 12px !important;
  border-color: var(--rtj-garis) !important;
  padding: 10px 14px;
  min-height: 44px;
}

.rtj-input:focus,
.rtj-card .form-control:focus,
.rtj-card .form-select:focus {
  border-color: var(--rtj-utama) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important;
}

.rtj-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #ecfdf5;
  color: var(--rtj-gelap);
}

.rtj-badge-danger {
  background: #fef2f2;
  color: #b91c1c;
}

.rtj-badge-warn {
  background: #fffbeb;
  color: #b45309;
}

/* ---------- sidebar & topbar (putih) ---------- */
.navbar-brand-box {
  background: #ffffff !important;
  border-right: 1px solid var(--rtj-garis) !important;
  box-shadow: none !important;
}

.vertical-menu {
  background: #ffffff !important;
  border-right: 1px solid var(--rtj-garis) !important;
  top: 70px !important; /* mulai di bawah header, biar tidak nabrak */
}

#sidebar-menu ul li a {
  color: #334155 !important;
  border-radius: 12px;
  margin: 4px 12px;
  padding: 10px 14px !important;
}

#sidebar-menu ul li a i,
#sidebar-menu ul li a .bx {
  color: #64748b !important;
}

#sidebar-menu ul li a:hover,
#sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active > a {
  background: #ecfdf5 !important;
  color: var(--rtj-gelap) !important;
}

#sidebar-menu ul li a:hover i,
#sidebar-menu ul li a.active i,
#sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li a:hover .bx,
#sidebar-menu ul li a.active .bx,
#sidebar-menu ul li.mm-active > a .bx {
  color: var(--rtj-utama) !important;
}

#sidebar-menu .menu-title {
  color: #94a3b8 !important;
  padding-left: 26px !important;
}

.vertical-menu .logo-txt,
#page-topbar .logo-txt {
  color: var(--rtj-teks) !important;
  font-weight: 700 !important;
}

#page-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--rtj-garis);
  box-shadow: none !important;
  z-index: 1002;
}

#page-topbar .navbar-header {
  height: 70px;
}

.footer {
  background: transparent !important;
  border-top: 1px solid var(--rtj-garis) !important;
  color: var(--rtj-abu);
}

/* ---------- loading animation: ungu -> hijau ---------- */
.pace .pace-progress {
  background: linear-gradient(to right, #0f766e 0%, #14b8a6 50%, #5eead4 100%) !important;
  height: 3px;
}

.pace .pace-activity {
  background: #0f766e !important;
}

#preloader {
  background: #ffffff !important;
}

#status,
.spinner-chase .chase-dot:before,
.spinner-border {
  border-top-color: #0f766e !important;
  color: #0f766e !important;
}

/* ---------- dashboard ---------- */
.rtj-hero {
  background: linear-gradient(135deg, #0f766e 0%, #115e59 45%, #134e4a 100%);
  color: #fff;
  border-radius: var(--rtj-radius);
  padding: 28px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  animation: rtjFadeUp 0.45s ease;
}

.rtj-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(94, 234, 212, 0.18);
}

.rtj-hero h3 {
  margin: 0 0 8px;
  font-weight: 700;
  color: #fff !important;
}

.rtj-hero p {
  margin: 0;
  opacity: 0.9;
  max-width: 640px;
}

.rtj-dash-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.rtj-dash-hero-main {
  position: relative;
  z-index: 1;
  flex: 1 1 280px;
}

.rtj-dash-eyebrow {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 6px;
  font-weight: 600;
}

.rtj-dash-hero-meta {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.rtj-dash-hero-chip {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 12px 16px;
  min-width: 140px;
}

.rtj-dash-hero-chip span {
  display: block;
  font-size: 11px;
  opacity: 0.8;
  margin-bottom: 4px;
}

.rtj-dash-hero-chip strong {
  font-size: 1.05rem;
  font-weight: 700;
}

.rtj-stat {
  background: var(--rtj-kartu);
  border: 1px solid var(--rtj-garis);
  border-radius: var(--rtj-radius);
  padding: 20px;
  box-shadow: var(--rtj-bayangan);
  height: 100%;
  animation: rtjFadeUp 0.5s ease;
}

.rtj-stat .label {
  color: var(--rtj-abu);
  font-size: 13px;
  margin-bottom: 8px;
}

.rtj-stat .value {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
}

.rtj-stat-mini {
  padding: 16px 18px;
}

.rtj-stat-mini .value {
  font-size: 1.25rem;
}

.rtj-stat-mini .hint {
  font-size: 12px;
  margin-top: 4px;
  color: var(--rtj-abu);
}

.rtj-kpi {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--rtj-kartu);
  border: 1px solid var(--rtj-garis);
  border-radius: var(--rtj-radius);
  padding: 18px;
  box-shadow: var(--rtj-bayangan);
  height: 100%;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  animation: rtjFadeUp 0.5s ease;
  position: relative;
  overflow: hidden;
}

.rtj-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
  border-color: #cbd5e1;
  color: inherit;
}

.rtj-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.rtj-kpi-body {
  min-width: 0;
}

.rtj-kpi .label {
  color: var(--rtj-abu);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.3;
}

.rtj-kpi .value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--rtj-teks);
  word-break: break-word;
}

.rtj-kpi .hint {
  font-size: 12px;
  color: var(--rtj-abu);
  margin-top: 4px;
}

.rtj-kpi-warn .rtj-kpi-icon { background: #fff7ed; color: #c2410c; }
.rtj-kpi-ok .rtj-kpi-icon { background: #ecfdf5; color: #047857; }
.rtj-kpi-teal .rtj-kpi-icon { background: #f0fdfa; color: #0f766e; }
.rtj-kpi-blue .rtj-kpi-icon { background: #eff6ff; color: #1d4ed8; }

.rtj-kpi-warn { border-color: #fdba74; border-top: 3px solid #f59e0b; }
.rtj-kpi-ok { border-color: #86efac; border-top: 3px solid #16a34a; }
.rtj-kpi-teal { border-color: #5eead4; border-top: 3px solid #0f766e; }
.rtj-kpi-blue { border-color: #93c5fd; border-top: 3px solid #2563eb; }

.rtj-dash {
  --rtj-dash-gap: 20px;
}

.rtj-dash-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--rtj-dash-gap) / -2);
  margin-right: calc(var(--rtj-dash-gap) / -2);
  margin-bottom: var(--rtj-dash-gap);
}

.rtj-dash-row > [class*="col-"] {
  padding-left: calc(var(--rtj-dash-gap) / 2);
  padding-right: calc(var(--rtj-dash-gap) / 2);
  margin-bottom: 0;
}

.rtj-dash-row:last-child {
  margin-bottom: 0;
}

.rtj-dash .rtj-card {
  margin-bottom: 0;
}

.rtj-dash-card {
  animation: rtjFadeUp 0.55s ease;
  border-width: 1.5px;
  border-style: solid;
}

.rtj-dash-card .rtj-card-head {
  align-items: flex-start;
  border-bottom-color: transparent;
}

.rtj-dash-border-teal {
  border-color: #99f6e4;
  border-top: 3px solid #0f766e;
}
.rtj-dash-border-teal .rtj-card-head { background: #f0fdfa; }

.rtj-dash-border-green {
  border-color: #bbf7d0;
  border-top: 3px solid #16a34a;
}
.rtj-dash-border-green .rtj-card-head { background: #f0fdf4; }

.rtj-dash-border-violet {
  border-color: #ddd6fe;
  border-top: 3px solid #7c3aed;
}
.rtj-dash-border-violet .rtj-card-head { background: #f5f3ff; }

.rtj-dash-border-rose {
  border-color: #fecdd3;
  border-top: 3px solid #e11d48;
}
.rtj-dash-border-rose .rtj-card-head { background: #fff1f2; }

.rtj-dash-border-amber {
  border-color: #fde68a;
  border-top: 3px solid #f59e0b;
}
.rtj-dash-border-amber .rtj-card-head { background: #fffbeb; }

.rtj-dash-border-blue {
  border-color: #bfdbfe;
  border-top: 3px solid #2563eb;
}
.rtj-dash-border-blue .rtj-card-head { background: #eff6ff; }

.rtj-dash-border-slate {
  border-color: #cbd5e1;
  border-top: 3px solid #64748b;
}
.rtj-dash-border-slate .rtj-card-head { background: #f8fafc; }

.rtj-dash-border-cyan {
  border-color: #a5f3fc;
  border-top: 3px solid #0891b2;
}
.rtj-dash-border-cyan .rtj-card-head { background: #ecfeff; }

.rtj-dash-table thead th {
  background: #f8fafc;
  color: var(--rtj-abu);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--rtj-garis);
  padding: 12px 16px;
  white-space: nowrap;
}

.rtj-dash-table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--rtj-garis);
}

.rtj-dash-table tbody tr:last-child td {
  border-bottom: 0;
}

.rtj-dash-table tbody tr:hover {
  background: #f8fffd;
}

.rtj-dash-table a {
  color: var(--rtj-gelap);
}

.rtj-rank-name {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rtj-rank-no {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: #f0fdfa;
  color: var(--rtj-gelap);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rtj-rank-val {
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
  color: var(--rtj-teks);
}

.rtj-rank-bar {
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
}

.rtj-rank-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0f766e, #2dd4bf);
  border-radius: 999px;
  transition: width 0.6s ease;
}

.rtj-activity-card {
  max-width: 100%;
}

.rtj-activity-card .rtj-card-head {
  padding: 12px 16px;
}

.rtj-activity-scroll {
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.rtj-activity-scroll::-webkit-scrollbar {
  width: 6px;
}

.rtj-activity-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.rtj-activity li {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rtj-garis);
}

.rtj-activity li:last-child {
  border-bottom: 0;
}

.rtj-activity-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #f0fdfa;
  color: var(--rtj-utama);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.rtj-activity-body a {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--rtj-teks);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rtj-activity-body a:hover {
  color: var(--rtj-utama);
}

.rtj-activity-body .meta {
  font-size: 11px;
  color: var(--rtj-abu);
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.rtj-activity-body .rtj-badge {
  padding: 2px 7px;
  font-size: 10px;
}

.rtj-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rtj-chart {
  width: 100%;
}

.rtj-company {
  white-space: pre-line;
  color: var(--rtj-abu);
  margin: 0;
}

@media (max-width: 575.98px) {
  .rtj-kpi .value {
    font-size: 1.1rem;
  }
  .rtj-dash-hero {
    padding: 22px;
  }
}

/* ---------- tabel ---------- */
.rtj-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.rtj-table thead th {
  background: #f8fafc;
  color: var(--rtj-abu);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--rtj-garis);
  padding: 12px 14px;
}

.rtj-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--rtj-garis);
  vertical-align: middle;
}

.rtj-table tbody tr:hover {
  background: #f8fffd;
}

/* ---------- login ---------- */
.rtj-login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: #ecfeff;
}

.rtj-login-visual {
  position: relative;
  background:
    /* Spot terang di area logo + judul agar kontras */
    radial-gradient(ellipse 70% 55% at 18% 42%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 20% 20%, rgba(94, 234, 212, 0.35), transparent 40%),
    linear-gradient(160deg, #0f766e, #134e4a 60%, #0b3d3a);
  color: #fff;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.rtj-login-visual::before {
  content: "";
  position: absolute;
  inset: auto -20% -20% auto;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.rtj-login-visual > img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.95);
  padding: 8px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  position: relative;
  z-index: 1;
}

.rtj-login-visual h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin: 16px 0 10px;
  position: relative;
  z-index: 1;
  /* Bootstrap set h1 ke #495057 — pakai gelap di atas gradasi putih */
  color: #0f172a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.rtj-login-visual p {
  max-width: 420px;
  opacity: 0.9;
  position: relative;
  z-index: 1;
  color: #fff;
}

.rtj-login-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: #f8fafc;
}

.rtj-login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--rtj-garis);
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: var(--rtj-bayangan);
  animation: rtjFadeUp 0.45s ease;
}

.rtj-login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.rtj-login-brand img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.rtj-login-brand strong {
  display: block;
  font-size: 1.15rem;
}

.rtj-login-brand span {
  color: var(--rtj-abu);
  font-size: 13px;
}

.rtj-alert {
  background: #fef2f2;
  color: #b91c1c;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 14px;
}

.rtj-preview-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid var(--rtj-garis);
  padding: 10px;
}

@keyframes rtjFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991px) {
  .rtj-login-page {
    grid-template-columns: 1fr;
  }

  .rtj-login-visual {
    min-height: 220px;
    padding: 28px;
  }
}

/* Surat Jalan item progress */
.rtj-sj-partial { background: #fffbeb !important; }
.rtj-sj-full { background: #ecfdf5 !important; color: #065f46; }
.rtj-sj-selected { background: #eff6ff !important; }