/*
 * Khalifa IMS Style Guide — Custom Theme Overrides
 * Font: Poppins (loaded via app.css)
 */

:root {
  /* Solid Palette */
  --kims-green-primary: #15803D;
  --kims-red: #E4322B;
  --kims-yellow: #F4B942;
  --kims-dark-green: #0B4A29;
  --kims-cream: #FBB40E;
  --kims-yellow-hero: #FBB40E;
  --kims-bg-tagihan: #F8FAF7;

  /* Text Palette */
  --kims-text-black: #17211B;
  --kims-text-gray: #718077;

  /* Border Palette */
  --kims-border-gray-1: #C7D0CA;
  --kims-border-gray-2: #E5EAE6;
  --kims-border-gray-3: #EDF0EE;

  /* Badge Backgrounds */
  --kims-badge-success-bg: #E7F3EC;
  --kims-badge-error-bg: #FDEBEC;
  --kims-badge-pending-bg: #FDF3DF;
  --kims-badge-success-border: #A9D5BB;
  --kims-badge-error-border: #F7CDD0;
  --kims-badge-pending-border: #F8DFA6;

  /* Gradients */
  --kims-gradient-green: linear-gradient(135deg, #15803D 0%, #0B8A3C 100%);
  --kims-gradient-blue: linear-gradient(135deg, #22A2C9 0%, #1A7F9E 100%);

  /* Shadows */
  --kims-shadow-md: 0px 2px 8px 1px rgba(0, 0, 0, 0.06);
  --kims-shadow-big: 0px 6px 8px rgba(0, 0, 0, 0.08);

  /* Radius */
  --kims-radius-lg: 16px;
  --kims-radius-md: 12px;
  --kims-radius-sm: 8px;
  --kims-radius-xs: 6px;
  --kims-radius-2xs: 4px;
}

/* Token --kims-* di atas hanya punya nilai mode terang. Karena `body` di bawah
   memakainya langsung dan berkas ini dimuat setelah app.css, warna teks body
   ikut terkunci terang walau mode gelap menyala — kelihatan pada elemen yang
   mewarisi warna alih-alih menyetelnya sendiri.
   Blok ini memberi pasangan gelapnya; nilainya sama dengan token --sisto-*
   mode gelap di sisto-components.css. */
[data-bs-theme=dark] {
  --kims-text-black: #E8ECF3;
  --kims-text-gray: #A3ADA7;
  --kims-bg-tagihan: #08170F;
  --kims-border-gray-1: rgba(255, 255, 255, 0.12);
  --kims-border-gray-2: rgba(120, 200, 140, 0.14);
  --kims-border-gray-3: #122A1E;
  --kims-badge-success-bg: rgba(21, 128, 61, 0.16);
  --kims-badge-error-bg: rgba(228, 50, 43, 0.16);
  --kims-badge-pending-bg: rgba(244, 185, 66, 0.16);
  --kims-badge-success-border: rgba(21, 128, 61, 0.4);
  --kims-badge-error-border: rgba(228, 50, 43, 0.4);
  --kims-badge-pending-border: rgba(244, 185, 66, 0.4);
}

body {
  color: var(--kims-text-black);
  background-color: var(--kims-bg-tagihan);
}

.text-muted {
  color: var(--kims-text-gray) !important;
}

.card {
  border-color: var(--kims-border-gray-2);
  border-radius: var(--kims-radius-sm);
  box-shadow: var(--kims-shadow-md);
}

.card-header {
  border-bottom-color: var(--kims-border-gray-2);
}

.form-control,
.form-select {
  border-color: var(--kims-border-gray-1);
  border-radius: var(--kims-radius-2xs);
  color: var(--kims-text-black);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--kims-green-primary);
  box-shadow: 0 0 0 0.2rem rgba(21, 128, 61, 0.15);
}

.form-control:readonly {
  background-color: var(--kims-border-gray-3) !important;
}

.btn-primary {
  background-color: var(--kims-green-primary);
  border-color: var(--kims-green-primary);
  border-radius: var(--kims-radius-2xs);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--kims-dark-green);
  border-color: var(--kims-dark-green);
}

.btn-danger {
  background-color: var(--kims-red);
  border-color: var(--kims-red);
}

.btn-warning {
  background-color: var(--kims-yellow);
  border-color: var(--kims-yellow);
  color: var(--kims-text-black);
}

.badge-soft-success,
.alert-success {
  background-color: var(--kims-badge-success-bg) !important;
  border: 1px solid var(--kims-badge-success-border);
  color: var(--kims-dark-green);
}

.badge-soft-danger,
.alert-danger {
  background-color: var(--kims-badge-error-bg) !important;
  border: 1px solid var(--kims-badge-error-border);
  color: var(--kims-red);
}

.badge-soft-warning,
.alert-warning {
  background-color: var(--kims-badge-pending-bg) !important;
  border: 1px solid var(--kims-badge-pending-border);
  color: #B0790F;
}

.bg-kuning-muda {
  background-color: var(--kims-badge-pending-bg) !important;
}

.bg-biru-muda {
  background-color: #E4F4FA !important;
}

.bg-gradient-green-card {
  background: var(--kims-gradient-green);
}

.bg-gradient-blue-card {
  background: var(--kims-gradient-blue);
}

.shadow-kims-md {
  box-shadow: var(--kims-shadow-md);
}

.shadow-kims-big {
  box-shadow: var(--kims-shadow-big);
}

.rounded-kims-lg { border-radius: var(--kims-radius-lg) !important; }
.rounded-kims-md { border-radius: var(--kims-radius-md) !important; }
.rounded-kims-sm { border-radius: var(--kims-radius-sm) !important; }

table.dataTable tbody tr.selected,
table.dataTable tbody tr:hover {
  background-color: var(--kims-badge-success-bg) !important;
  color: var(--kims-text-black) !important;
}

table.dataTable tbody tr:hover > .sorting_1 {
  background-color: var(--kims-badge-success-bg) !important;
  color: var(--kims-text-black) !important;
}

#page-topbar.topbar-shadow {
  box-shadow: var(--kims-shadow-md);
}

.auth-page-wrapper .btn-primary {
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Sidebar — plain white background agar logo tidak kontras */
.app-menu.navbar-menu,
.navbar-menu .navbar-brand-box {
  background-color: #fff !important;
}

.navbar-menu {
  border-right: 1px solid var(--kims-border-gray-2);
  box-shadow: none;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar=light] .logo-dark,
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar=dark] .logo-dark {
  display: inline-block;
}

:is([data-layout=vertical], [data-layout=semibox])[data-sidebar=light] .logo-light,
:is([data-layout=vertical], [data-layout=semibox])[data-sidebar=dark] .logo-light {
  display: none;
}