/* ==========================================================================
   THEME SAMCO — reskin ke palet crimson Inventory Gudang.
   Dimuat SETELAH bootstrap.min.css/app.min.css di partials/css.blade.php,
   jadi cukup redeclare custom property yang sudah dipakai vendor (menang
   tanpa !important berlebihan) + tambahan komponen yang perlu properti baru.
   Satu file, per-section, supaya gak ada aturan warna nyebar/bentrok di
   file lain (custom.css cuma nyisa hal yang beneran gak terkait tema).
   ========================================================================== */

/* Section 1 (token warna :root) sengaja dipindah ke <style> inline di
   partials/css.blade.php -- entah kenapa file eksternal ini konsisten
   "menelan" rule :root pertamanya (cssRules kehilangan 1 rule persis di
   posisi itu, padahal teks yang sama valid & jalan normal sebagai inline
   <style>; sudah dicoba cache-bust by mtime, tetap sama). Daripada debug
   lebih lama, token warna hidup di layout (sama kayak app.blade.php-nya
   Inventory Gudang -- inline <style> untuk :root itu memang polanya).
   ponytail: kalau nanti ketemu akar masalahnya, boleh dipindah balik ke sini. */

/* -----------------------------------------------------------------------
   2) TYPOGRAFI
   <strong> browser-default 700 = seberat heading; turunin biar teks padat
   (label:value berulang di modal konfirmasi/detail) gak kerasa "tebal
   semua". Heading/card-title tetap 600 (jelas beda level, bukan 700/800
   yang gampang kerasa berat di layar sempit).
   ----------------------------------------------------------------------- */
body, html {
  font-family: var(--bs-font-sans-serif) !important;
}
strong, b {
  font-weight: 600;
}
h1, h2, h3, h4, h5, h6,
.card-title, .page-title-box h4 {
  font-weight: 600;
}

/* -----------------------------------------------------------------------
   3) TOMBOL
   --bs-btn-* dibakar jadi hex literal pas compile Bootstrap, jadi harus
   di-redeclare per class (bukan otomatis ikut token di atas).
   PENTING: template ini pakai .btn-danger sebagai tombol branded biasa
   (Sign In di login, Back, kirim chat -- bukan cuma aksi hapus/destruktif,
   cek resources/views/auth/login.blade.php & pages/ticket/detail.blade.php).
   Beda dari konvensi Inventory Gudang (danger = lembut/pastel khusus
   hapus) -- di sini primary & danger sama-sama gradasi merah tebal biar
   tombol CTA di seluruh app konsisten "berani", gak ada yang keliatan
   pudar padahal itu tombol utama.
   ----------------------------------------------------------------------- */
.btn {
  border-radius: 8px;
  font-weight: 600;
}
.btn-primary,
.btn-danger {
  --bs-btn-bg: var(--ig-red);
  --bs-btn-border-color: var(--ig-red-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ig-red-hover);
  --bs-btn-hover-border-color: var(--ig-red-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ig-red-dark);
  --bs-btn-active-border-color: var(--ig-red-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--ig-red);
  --bs-btn-disabled-border-color: var(--ig-red-dark);
  background-image: linear-gradient(135deg, var(--ig-red) 0%, var(--ig-red-dark) 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(127, 29, 29, .18);
}
.btn-info {
  --bs-btn-bg: var(--ig-info);
  --bs-btn-border-color: var(--ig-info-hover);
  --bs-btn-hover-bg: var(--ig-info-hover);
  --bs-btn-hover-border-color: var(--ig-info-hover);
  --bs-btn-active-bg: var(--ig-info-hover);
  --bs-btn-active-border-color: var(--ig-info-hover);
}
.btn-success {
  --bs-btn-bg: var(--ig-success);
  --bs-btn-border-color: var(--ig-success-hover);
  --bs-btn-hover-bg: var(--ig-success-hover);
  --bs-btn-hover-border-color: var(--ig-success-hover);
  --bs-btn-active-bg: var(--ig-success-hover);
  --bs-btn-active-border-color: var(--ig-success-hover);
}
.btn-warning {
  --bs-btn-bg: var(--ig-warning);
  --bs-btn-border-color: var(--ig-warning-hover);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ig-warning-hover);
  --bs-btn-hover-border-color: var(--ig-warning-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ig-warning-hover);
  --bs-btn-active-color: #fff;
}
.btn-secondary {
  --bs-btn-bg: var(--ig-secondary);
  --bs-btn-border-color: var(--ig-secondary-hover);
  --bs-btn-hover-bg: var(--ig-secondary-hover);
  --bs-btn-hover-border-color: var(--ig-secondary-hover);
  --bs-btn-active-bg: var(--ig-secondary-hover);
  --bs-btn-active-border-color: var(--ig-secondary-hover);
}
.btn-outline-primary,
.btn-outline-danger {
  --bs-btn-color: var(--ig-red);
  --bs-btn-border-color: var(--ig-red);
  --bs-btn-hover-bg: var(--ig-red);
  --bs-btn-hover-border-color: var(--ig-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ig-red);
  --bs-btn-active-border-color: var(--ig-red);
}

/* -----------------------------------------------------------------------
   4) BADGE STATUS
   .bg-* dipakai Helper::buildBadgeStatus() -- warna solid Bootstrap
   ketara/mentereng, diganti pastel biar gak "teriak" di tabel padat.
   ----------------------------------------------------------------------- */
.badge {
  font-weight: 600;
  letter-spacing: .01em;
}
.badge.bg-primary { background-color: var(--ig-red-soft-bg) !important; color: var(--ig-red) !important; }
.badge.bg-danger { background-color: var(--ig-red-soft-bg) !important; color: var(--ig-red) !important; }
.badge.bg-info { background-color: #e9f5fb !important; color: #0b6a94 !important; }
.badge.bg-success { background-color: #eaf7ee !important; color: #1f8a49 !important; }
.badge.bg-warning { background-color: #fef6e3 !important; color: #92620c !important; }
.badge.bg-secondary { background-color: #eef0f4 !important; color: #4b5468 !important; }

/* -----------------------------------------------------------------------
   5) CARD
   Bootstrap default .card udah rapi (border tipis + radius kecil), cuma
   dihalusin: radius lebih besar, shadow lembut, header lebih kalem biar
   selaras sama card-body-nya alih-alih putih polos vs border tegas.
   ----------------------------------------------------------------------- */
/* Flat page, no boxed card: body dan container jadi putih polos, .card
   kehilangan border/shadow/radius-nya biar konten nempel langsung ke
   halaman (nggak ada lagi kesan "kotak mengambang" dgn gap ke sidebar). */
body, .page-content {
  background-color: #ffffff;
}
.card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid #f3dcdc;
  font-weight: 600;
}

/* -----------------------------------------------------------------------
   6) TABEL
   Header abu netral -> putih dengan teks merah tua, garis antar kolom
   tipis biar gampang di-scan tanpa berat visual dari header solid gelap.
   ----------------------------------------------------------------------- */
.table thead th,
table.dataTable thead th {
  background: #ffffff;
  color: var(--ig-red-dark);
  font-weight: 600;
  border-bottom: 2px solid #f2e3e3;
}
.table > :not(caption) > * > * {
  border-bottom-color: #f2f2f5;
}
.table-hover > tbody > tr:hover > * {
  background-color: #f8f5f5;
}
/* Tabel putih polos, no zebra -- garis tipis antar baris/kolom aja yang bedain. */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #ffffff;
  --bs-table-accent-bg: transparent;
}
.table-bordered,
.table-bordered > :not(caption) > * {
  border-color: #f2f2f5;
}
.table td, .table th {
  border: 1px solid #f2f2f5;
}

/* -----------------------------------------------------------------------
   7) PAGINATION
   --bs-pagination-* juga literal-baked, redeclare scoped ke .pagination.
   ----------------------------------------------------------------------- */
.pagination {
  --bs-pagination-color: var(--ig-red-dark);
  --bs-pagination-hover-color: var(--ig-red-dark);
  --bs-pagination-hover-bg: #fdf0f0;
  --bs-pagination-active-bg: var(--ig-red);
  --bs-pagination-active-border-color: var(--ig-red-dark);
  --bs-pagination-focus-color: var(--ig-red-dark);
  --bs-pagination-focus-bg: #fdf0f0;
}

/* -----------------------------------------------------------------------
   8) FORM
   Focus ring & checkbox/radio ikut merah, bukan teal bawaan template.
   .no-border dipakai form Profil (input polos tanpa border) -- HTML-nya
   pasang size="50" yang bikin lebar fixed dalam karakter (bukan
   responsive), jadi kepotong di kartu sempit; width:100% menang karena
   CSS selalu kalahkan atribut HTML.
   ----------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--ig-red);
  box-shadow: 0 0 0 .2rem rgba(185, 28, 28, .12);
}
.form-check-input:checked {
  background-color: var(--ig-red);
  border-color: var(--ig-red);
}
.no-border {
  border: 0;
  box-shadow: none;
  outline: 0;
  width: 100%;
}

/* -----------------------------------------------------------------------
   9) SIDEBAR & TOPBAR
   KOREKSI: sidebar Inventory Gudang itu PUTIH, bukan blok merah solid --
   merahnya cuma aksen (item aktif/hover, logo). `[data-sidebar=colored]`
   bawaan template ini (blok merah solid #e33232) sebelumnya saya kira
   "sudah cocok" krn sama-sama merah, padahal beda gaya total dari sumber
   aslinya. Di-override balik ke putih + border tipis + shadow lembut,
   item menu default abu netral, aktif/hover jadi pink pucat dgn teks
   merah tua dan ikon jadi lingkaran gradasi merah -- persis app.blade.php
   Inventory Gudang (.main-sidebar / .sidebar-menu li a).
   ----------------------------------------------------------------------- */
:root, [data-bs-theme=light] {
  /* #page-topbar baca var ini -- putih + border/shadow lembut. */
  --bs-header-bg: #ffffff;
  --bs-header-item-color: #475569;
  --bs-header-item-sub-color: #64748b;
  --bs-sidebar-bg: #ffffff;
  --bs-sidebar-menu-item-color: #475569;
  --bs-sidebar-menu-item-icon-color: #94a3b8;
  --bs-sidebar-menu-item-hover-color: var(--ig-red-dark);
  --bs-sidebar-border-color: #edf2f7;
}
#page-topbar {
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .02);
}
.noti-icon.active, .noti-dot {
  background-color: var(--ig-red) !important;
}
[data-sidebar=colored] .vertical-menu {
  background: #ffffff !important;
  box-shadow: 8px 0 32px rgba(15, 23, 42, .045);
  border-right: 1px solid #edf2f7;
}
[data-sidebar=colored] .navbar-brand-box {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9;
}
[data-sidebar=colored] .navbar-brand-box .logo-dark { display: block !important; }
[data-sidebar=colored] .navbar-brand-box .logo-light { display: none !important; }
[data-sidebar=colored] .vertical-menu-btn,
[data-sidebar=colored] #sidebar-menu ul li.menu-title {
  color: var(--ig-red-dark) !important;
}
/* Vendor's [data-sidebar=colored] hardcodes white text (color:#fffc) assuming
   a dark/red sidebar background -- now that the sidebar is white, that rule
   makes every non-active menu item invisible (white-on-white). Override back
   to the slate default. */
[data-sidebar=colored] #sidebar-menu ul li a,
[data-sidebar=colored] #sidebar-menu ul li a i {
  color: #475569 !important;
}
[data-sidebar=colored] #sidebar-menu ul li a:hover,
[data-sidebar=colored] #sidebar-menu ul li a.active,
[data-sidebar=colored] #sidebar-menu ul li a:hover i,
[data-sidebar=colored] #sidebar-menu ul li a.active i {
  color: var(--ig-red-dark) !important;
}
[data-sidebar=colored] #sidebar-menu > ul > li > a.active i,
[data-sidebar=colored] #sidebar-menu > ul > li > a:hover i {
  color: var(--ig-red-dark) !important;
}
/* Sidebar collapsed (icon-only) -> hover parent item ("Aset" dkk) buka
   flyout submenu. Vendor hardcode background-color:#ff0101 (merah nyala
   murni) buat trigger row-nya khusus varian [data-sidebar=colored] --
   beda banget dari token merah di atas. Disamakan ke pink pucat + teks
   merah tua, senada treatment hover di mode sidebar terbuka. */
body[data-sidebar=colored].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
  background-color: #fff7f7 !important;
  color: var(--ig-red-dark) !important;
}
[data-sidebar=colored] .vertical-collpsed .vertical-menu #sidebar-menu > ul ul,
body.vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
  background-color: #ffffff !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
  border: 1px solid #edf2f7;
}
[data-sidebar=colored] #sidebar-menu ul li ul.sub-menu li a {
  color: #64748b !important;
}
[data-sidebar=colored] #sidebar-menu ul li ul.sub-menu li a:hover {
  color: var(--ig-red-dark) !important;
}
#sidebar-menu ul li a,
#sidebar-menu ul li a i {
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
#sidebar-menu > ul > li > a {
  border-radius: 14px;
  margin: 2px 10px;
}
#sidebar-menu ul li a:hover,
#sidebar-menu ul li a.active {
  background: #fff7f7;
  color: var(--ig-red-dark) !important;
}
#sidebar-menu ul li a:hover i,
#sidebar-menu ul li a.active i {
  color: var(--ig-red-dark) !important;
}
/* Ikon jadi kotak-bulat kecil (30px) senada Inventory Gudang, bukan cuma
   glyph telanjang -- aktif/hover dapat lingkaran gradasi merah + ikon putih. */
#sidebar-menu > ul > li > a i {
  width: 30px;
  height: 30px;
  min-width: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f8fafc;
  margin-right: 10px;
  font-size: 15px;
}
#sidebar-menu > ul > li > a.active i,
#sidebar-menu > ul > li > a:hover i {
  color: var(--ig-red-dark) !important;
}

/* -----------------------------------------------------------------------
   10) DROPDOWN, ALERT, NAV-PILLS, SCROLLBAR
   Sisa komponen umum: dropdown radius/shadow lebih lembut, alert flash
   message pastel (bukan warna solid Bootstrap), nav-pills aktif merah,
   scrollbar tipis -- semua senada sama sistem card/badge di atas.
   ----------------------------------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
  --bs-dropdown-link-active-bg: var(--ig-red-soft-bg);
  --bs-dropdown-link-active-color: var(--ig-red-dark);
  --bs-dropdown-link-hover-bg: #faf5f5;
  padding: 8px 0;
}
.alert-primary, .alert-danger {
  --bs-alert-color: var(--ig-red-dark);
  --bs-alert-bg: var(--ig-red-soft-bg);
  --bs-alert-border-color: var(--ig-red-soft-border);
}
.nav-pills .nav-link.active {
  background-image: linear-gradient(135deg, var(--ig-red) 0%, var(--ig-red-dark) 100%);
  border: none;
}
html, body {
  scrollbar-width: thin;
  scrollbar-color: #c7ccd6 #f5f6fa;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f5f6fa; }
::-webkit-scrollbar-thumb { background-color: #c7ccd6; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background-color: #aab0bd; }