/* ==========================================================================
   IFL — Investing For Living
   Tema gelap "terminal trading" merah-hitam — premium fintech edition
   --------------------------------------------------------------------------
   Daftar isi:
     01. Design tokens
     02. Base & tipografi
     03. Scrollbar
     04. Layout & pagehead
     05. Topbar mobile
     06. Sidebar & navigasi
     07. Kartu & stat cards
     08. Badge sinyal
     09. Tabel & DataTables chrome
     10. Form & tombol
     11. Alert
     12. Loading overlay
     13. Halaman login
     14. Util, animasi & aksesibilitas
   ========================================================================== */

/* ---------- 01. Design tokens ---------- */

:root {
  /* Palet dasar — lebih dalam & lebih halus */
  --ifl-bg: #0a0c10;
  --ifl-bg-soft: #0e1117;
  --ifl-panel: #141821;
  --ifl-panel-2: #191e29;
  --ifl-panel-hi: #1f2531;

  /* Aksen merah IFL */
  --ifl-red: #e63946;
  --ifl-red2: #ff4d5a;
  --ifl-red-deep: #c1121f;

  /* Teks */
  --ifl-text: #eceef2;
  --ifl-text-dim: #c3c9d2;
  --ifl-muted: #98a0ac;

  /* Hanya untuk nilai positif (P/L, sinyal beli) */
  --ifl-green: #3ddc84;

  /* Border & bayangan */
  --ifl-border: rgba(255, 255, 255, .07);
  --ifl-border-strong: rgba(255, 255, 255, .12);
  --ifl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .22);
  --ifl-shadow-md: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .32);
  --ifl-glow-red: 0 0 0 1px rgba(230, 57, 70, .35), 0 6px 24px rgba(230, 57, 70, .28);

  /* Geometri */
  --ifl-radius: 14px;
  --ifl-radius-sm: 9px;
  --ifl-sidebar-w: 256px;

  /* Tipografi */
  --ifl-font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ifl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Transisi standar */
  --ifl-ease: cubic-bezier(.22, .61, .36, 1);
  --ifl-t-fast: .18s;
  --ifl-t-med: .3s;
}

/* ---------- 02. Base & tipografi ---------- */

* { box-sizing: border-box; }

html, body {
  background: var(--ifl-bg);
  color: var(--ifl-text);
  font-family: var(--ifl-font-ui);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cahaya ambient sangat halus di belakang seluruh aplikasi */
body {
  background-image:
    radial-gradient(900px 480px at 85% -10%, rgba(230, 57, 70, .055), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(230, 57, 70, .04), transparent 55%);
  background-attachment: fixed;
}

::selection { background: rgba(230, 57, 70, .85); color: #fff; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; }

/* Angka tabel & statistik: monospace tabular agar rapi sejajar */
.table, .ifl-stat-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 03. Scrollbar (tipis & elegan) ---------- */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  border: 2px solid var(--ifl-bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(230, 57, 70, .65); }
html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }

/* ---------- 04. Layout & pagehead ---------- */

.ifl-main { margin-left: var(--ifl-sidebar-w); min-height: 100vh; }
.ifl-main-inner { padding: 1.5rem 1.75rem 3.5rem; max-width: 1600px; margin: 0 auto; }

@media (max-width: 991.98px) {
  .ifl-main { margin-left: 0; }
  .ifl-main-inner { padding: 1.1rem 1rem 3rem; }
}

/* Judul halaman: kecil, tegas, aksen bar gradient vertikal */
.ifl-pagehead { margin-bottom: 1.15rem; }
.ifl-pagehead h1 {
  position: relative;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.02em;
  padding-left: .95rem;
  margin-bottom: 0;
  animation: ifl-fadeup .45s var(--ifl-ease) both;
}
.ifl-pagehead h1::before {
  content: "";
  position: absolute;
  left: 0; top: .14em; bottom: .14em;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--ifl-red2), var(--ifl-red-deep));
  box-shadow: 0 0 12px rgba(230, 57, 70, .5);
}

/* ---------- 05. Topbar mobile (glassy) ---------- */

.ifl-topbar {
  background: rgba(12, 14, 19, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--ifl-border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.ifl-brand-sm { font-weight: 800; letter-spacing: 1.5px; color: var(--ifl-red2); }
.ifl-brand-sm span { color: var(--ifl-muted); font-weight: 500; font-size: .8rem; letter-spacing: .2px; }
.ifl-topbar .btn-outline-light {
  --bs-btn-color: var(--ifl-text-dim);
  --bs-btn-border-color: var(--ifl-border-strong);
  --bs-btn-hover-bg: rgba(230, 57, 70, .15);
  --bs-btn-hover-border-color: rgba(230, 57, 70, .5);
  --bs-btn-hover-color: #fff;
  border-radius: 8px;
}

/* ---------- 06. Sidebar & navigasi ---------- */

.ifl-sidebar {
  width: var(--ifl-sidebar-w) !important;
  background: linear-gradient(180deg, #12151c 0%, #0d1015 100%);
  border-right: 1px solid var(--ifl-border);
  box-shadow: 8px 0 32px rgba(0, 0, 0, .28);
  /* B1.2: offcanvas mobile selalu setinggi viewport dinamis & di atas topbar
     sticky (topbar-main z-index 1020 → backdrop 1040, offcanvas 1045) */
  --bs-offcanvas-zindex: 1045;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
}
.offcanvas-backdrop { z-index: 1040; }
.ifl-sidebar-inner {
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  /* B1.2: kolom flex — nav yang menggulir, brand & footer terkunci di viewport */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Gradient di inner juga, karena Bootstrap memaksa .offcanvas-lg transparan di desktop */
  background:
    radial-gradient(320px 200px at 50% -40px, rgba(230, 57, 70, .09), transparent 70%),
    linear-gradient(180deg, #12151c 0%, #0d1015 100%);
  color: var(--ifl-text);
}
/* B1.2: area menu menggulir halus (momentum) — semua grup DATA/ANALISA/AKUN
   terjangkau di layar pendek; footer tidak pernah keluar viewport */
.ifl-sidebar-inner .ifl-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ifl-sidebar-inner .ifl-brand,
.ifl-sidebar-inner .ifl-sidebar-footer { flex: 0 0 auto; }
@media (min-width: 992px) {
  .ifl-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030; overflow-y: auto; }
  .ifl-sidebar-inner { min-height: 100vh; min-height: 100dvh; }
  /* Bootstrap menyembunyikan .offcanvas-header di breakpoint besar — brand harus tetap tampil */
  .ifl-sidebar .offcanvas-header { display: flex; }
}

/* Brand block */
.ifl-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.05rem 1.15rem;
  border-bottom: 1px solid var(--ifl-border);
}
.ifl-logo {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 11px;
  filter: drop-shadow(0 0 14px rgba(240, 75, 54, .35));
}
.ifl-brand-text strong { display: block; font-size: .85rem; line-height: 1.25; font-weight: 700; letter-spacing: .01em; }
.ifl-brand-text small { color: var(--ifl-muted); font-size: .62rem; letter-spacing: .02em; text-transform: none; line-height: 1.3; display: block; }

/* Navigasi */
.ifl-nav { padding: .5rem .75rem .75rem; }

/* v9 B9b.2: grup menu collapsible (accordion Bootstrap).
   Semua grup selalu terlihat tanpa scroll sidebar; ukuran dikompakkan agar
   17 tautan + 3 header grup + brand + footer muat di viewport 844px. */
.ifl-nav-block { margin-bottom: 2px; }

/* Tombol header grup menu (DATA / ANALISA / AKUN) */
.ifl-nav-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  margin: .5rem 0 .15rem;
  padding: .18rem .55rem;
  border: 0;
  background: transparent;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(152, 160, 172, .62);
  user-select: none;
  cursor: pointer;
  border-radius: 8px;
  transition: color var(--ifl-t-fast) var(--ifl-ease),
              background var(--ifl-t-fast) var(--ifl-ease);
}
.ifl-nav-block:first-child .ifl-nav-group { margin-top: .05rem; }
.ifl-nav-group:hover, .ifl-nav-group:focus-visible {
  color: var(--ifl-text-dim);
  background: rgba(255, 255, 255, .035);
}
.ifl-nav-caret {
  font-size: .68rem;
  transition: transform var(--ifl-t-fast) var(--ifl-ease);
}
.ifl-nav-group.collapsed .ifl-nav-caret { transform: rotate(-90deg); }

/* Daftar tautan per grup */
.ifl-nav-items { list-style: none; margin: 0; padding: 0; }

.ifl-nav .nav-link {
  position: relative;
  color: var(--ifl-muted);
  border-radius: 10px;
  padding: .42rem .7rem;
  margin-bottom: 1px;
  display: flex; align-items: center; gap: .65rem;
  font-size: .88rem;
  font-weight: 500;
  transition: background var(--ifl-t-fast) var(--ifl-ease),
              color var(--ifl-t-fast) var(--ifl-ease),
              transform var(--ifl-t-fast) var(--ifl-ease);
}
.ifl-nav .nav-link i {
  font-size: 1rem;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: rgba(152, 160, 172, .85);
  transition: background var(--ifl-t-fast) var(--ifl-ease), color var(--ifl-t-fast) var(--ifl-ease);
}
.ifl-nav .nav-link:hover {
  background: rgba(255, 255, 255, .045);
  color: var(--ifl-text);
  transform: translateX(3px);
}
.ifl-nav .nav-link:hover i { color: var(--ifl-text-dim); }

/* State aktif: bar aksen merah + gradient + ikon pill berwarna */
.ifl-nav .nav-link.active {
  background: linear-gradient(90deg, rgba(230, 57, 70, .24), rgba(230, 57, 70, .06) 70%, transparent);
  color: #fff;
  font-weight: 600;
}
.ifl-nav .nav-link.active::before {
  content: "";
  position: absolute;
  left: -.15rem; top: 22%; bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ifl-red2), var(--ifl-red-deep));
  box-shadow: 0 0 10px rgba(230, 57, 70, .6);
}
.ifl-nav .nav-link.active i {
  color: #fff;
  background: linear-gradient(140deg, var(--ifl-red), var(--ifl-red-deep));
  box-shadow: 0 0 10px rgba(230, 57, 70, .45);
}

/* Footer sidebar */
.ifl-sidebar-footer {
  border-top: 1px solid var(--ifl-border);
  padding: .85rem 1.15rem;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .84rem;
  background: rgba(0, 0, 0, .18);
}
.ifl-user { color: var(--ifl-muted); display: inline-flex; align-items: center; gap: .45rem; }
.ifl-user i { color: var(--ifl-text-dim); }
.ifl-logout {
  color: var(--ifl-red2); text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; border-radius: 8px;
  transition: background var(--ifl-t-fast) var(--ifl-ease), color var(--ifl-t-fast) var(--ifl-ease);
}
.ifl-logout:hover { color: #fff; background: rgba(230, 57, 70, .22); }

/* ---------- 07. Kartu & stat cards ---------- */

.card, .ifl-card {
  position: relative;
  background: linear-gradient(180deg, var(--ifl-panel-2) 0%, var(--ifl-panel) 100%);
  border: 1px solid var(--ifl-border);
  border-radius: var(--ifl-radius);
  color: var(--ifl-text);
  box-shadow: var(--ifl-shadow-sm);
  animation: ifl-fadeup .5s var(--ifl-ease) both;
  transition: border-color var(--ifl-t-med) var(--ifl-ease), box-shadow var(--ifl-t-med) var(--ifl-ease);
}
.card:hover, .ifl-card:hover {
  border-color: var(--ifl-border-strong);
  box-shadow: var(--ifl-shadow-md);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--ifl-border);
  font-weight: 700;
  letter-spacing: .01em;
  padding: .75rem 1rem;
}

/* Stagger lembut untuk kartu-kartu pertama di layar */
.ifl-card:nth-child(1) { animation-delay: .03s; }
.ifl-card:nth-child(2) { animation-delay: .08s; }
.ifl-card:nth-child(3) { animation-delay: .13s; }
.ifl-card:nth-child(4) { animation-delay: .18s; }
.ifl-card:nth-child(5) { animation-delay: .23s; }
.ifl-card:nth-child(6) { animation-delay: .28s; }

/* Stat card */
.ifl-stat {
  position: relative;
  padding: .95rem 1.1rem;
  display: flex; flex-direction: column; gap: .25rem;
  overflow: hidden;
  transition: transform var(--ifl-t-med) var(--ifl-ease),
              border-color var(--ifl-t-med) var(--ifl-ease),
              box-shadow var(--ifl-t-med) var(--ifl-ease);
}
/* Aksen atas gradient (menggantikan inset kiri) */
.ifl-stat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 65%);
}
.ifl-stat.accent-red::before {
  background: linear-gradient(90deg, var(--ifl-red2), var(--ifl-red) 45%, transparent 90%);
  box-shadow: 0 0 14px rgba(230, 57, 70, .4);
}
.ifl-stat.accent-green::before {
  background: linear-gradient(90deg, #7cf0b4, var(--ifl-green) 45%, transparent 90%);
  box-shadow: 0 0 14px rgba(61, 220, 132, .35);
}
.ifl-stat:hover { transform: translateY(-2px); box-shadow: var(--ifl-shadow-md); }

.ifl-stat .ifl-stat-label {
  color: var(--ifl-muted);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.ifl-stat .ifl-stat-value {
  font-family: var(--ifl-font-mono);
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.ifl-stat .ifl-stat-sub { font-size: .79rem; color: var(--ifl-muted); }

/* Nilai positif/negatif (P/L) */
.text-pos { color: var(--ifl-green) !important; }
.text-neg { color: var(--ifl-red2) !important; }

/* Baris tabel yang bisa diklik */
.ifl-clickable { cursor: pointer; }

/* ---------- 08. Badge sinyal (pill + dot) ---------- */

.badge-sinyal {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  padding: .32em .8em;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.badge-sinyal::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  flex: 0 0 6px;
}
.sinyal-beli-kuat { background: rgba(61, 220, 132, .16); color: #6ff0ac; border: 1px solid rgba(61, 220, 132, .45); }
.sinyal-beli      { background: rgba(61, 220, 132, .09); color: #8fe7b6; border: 1px solid rgba(61, 220, 132, .28); }
.sinyal-netral    { background: rgba(152, 160, 172, .12); color: #b8bfc9; border: 1px solid rgba(152, 160, 172, .3); }
.sinyal-jual      { background: rgba(255, 77, 90, .1); color: #ff8a95; border: 1px solid rgba(255, 77, 90, .32); }
.sinyal-jual-kuat { background: rgba(230, 57, 70, .22); color: #ff9aa4; border: 1px solid rgba(230, 57, 70, .55); }

/* ---------- 09. Tabel & DataTables chrome ---------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ifl-text);
  --bs-table-border-color: var(--ifl-border);
  color: var(--ifl-text);
  margin-bottom: 0;
}
.table > :not(caption) > * > * {
  background: transparent;
  color: var(--ifl-text-dim);
  border-bottom-color: var(--ifl-border);
  padding: .58rem .75rem;
}
.table thead th {
  background: #0c0f15;
  color: var(--ifl-muted);
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  border-bottom: 2px solid rgba(230, 57, 70, .55) !important;
  white-space: nowrap;
  padding: .62rem .75rem;
}
.table tbody tr { transition: background var(--ifl-t-fast) var(--ifl-ease); }
.table-hover > tbody > tr:hover > * {
  background: rgba(230, 57, 70, .05);
  color: var(--ifl-text);
}
.table-ifl { font-size: .87rem; }
/* Zebra sangat halus */
.table-ifl > tbody > tr:nth-child(even) > * { background: rgba(255, 255, 255, .014); }
.table-ifl > tbody > tr:hover > * { background: rgba(230, 57, 70, .055); }

/* Ikon sort DataTables sedikit lebih terang */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after { opacity: .35; }
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after { opacity: .9; color: var(--ifl-red2); }

/* Chrome DataTables: length / filter */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--ifl-bg-soft);
  color: var(--ifl-text);
  border: 1px solid var(--ifl-border-strong);
  border-radius: 8px;
  padding: .35rem .6rem;
  outline: none;
  transition: border-color var(--ifl-t-fast) var(--ifl-ease), box-shadow var(--ifl-t-fast) var(--ifl-ease);
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ifl-red);
  box-shadow: 0 0 0 .18rem rgba(230, 57, 70, .18);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--ifl-muted);
  font-size: .84rem;
}

/* Pagination */
.dataTables_wrapper .pagination { gap: .25rem; }
.dataTables_wrapper .pagination .page-link {
  background: var(--ifl-bg-soft);
  border: 1px solid var(--ifl-border);
  color: var(--ifl-text-dim);
  border-radius: 8px !important;
  padding: .35rem .75rem;
  font-size: .84rem;
  transition: all var(--ifl-t-fast) var(--ifl-ease);
}
.dataTables_wrapper .pagination .page-link:hover {
  background: rgba(230, 57, 70, .14);
  border-color: rgba(230, 57, 70, .45);
  color: #fff;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
  background: linear-gradient(140deg, var(--ifl-red), var(--ifl-red-deep));
  border-color: var(--ifl-red);
  color: #fff;
  box-shadow: 0 0 12px rgba(230, 57, 70, .4);
}
.dataTables_wrapper .pagination .page-item.disabled .page-link {
  color: rgba(152, 160, 172, .45);
  background: rgba(255, 255, 255, .02);
}

/* ---------- 10. Form & tombol ---------- */

.form-control, .form-select {
  background-color: var(--ifl-bg-soft);
  border: 1px solid var(--ifl-border-strong);
  color: var(--ifl-text);
  border-radius: 9px;
  transition: border-color var(--ifl-t-fast) var(--ifl-ease), box-shadow var(--ifl-t-fast) var(--ifl-ease);
}
.form-control:focus, .form-select:focus {
  background-color: var(--ifl-bg-soft);
  color: var(--ifl-text);
  border-color: var(--ifl-red);
  box-shadow: 0 0 0 .2rem rgba(230, 57, 70, .16);
}
.form-control::placeholder { color: rgba(152, 160, 172, .5); }
.form-control:disabled, .form-control[readonly] { background-color: #0b0d12; color: var(--ifl-muted); }

.form-label {
  color: var(--ifl-muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: .4rem;
}
.form-text { color: var(--ifl-muted); font-size: .78rem; }

.input-group-text {
  background: var(--ifl-bg-soft);
  border: 1px solid var(--ifl-border-strong);
  color: var(--ifl-muted);
  border-radius: 9px;
}
.input-group > .input-group-text:not(.bg-transparent) { background: var(--ifl-panel-hi); }

.form-check-input {
  background-color: var(--ifl-bg-soft);
  border-color: var(--ifl-border-strong);
}
.form-check-input:checked { background-color: var(--ifl-red); border-color: var(--ifl-red); }
.form-check-input:focus { box-shadow: 0 0 0 .18rem rgba(230, 57, 70, .18); border-color: var(--ifl-red); }

/* Tombol utama: gradient merah + glow */
.btn-ifl {
  background: linear-gradient(140deg, var(--ifl-red2) 0%, var(--ifl-red) 45%, var(--ifl-red-deep) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 10px;
  padding: .55rem 1.15rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 8px rgba(230, 57, 70, .25);
  transition: all var(--ifl-t-fast) var(--ifl-ease);
}
.btn-ifl:hover, .btn-ifl:focus {
  background: linear-gradient(140deg, #ff5b67 0%, var(--ifl-red2) 45%, var(--ifl-red) 100%);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  box-shadow: var(--ifl-glow-red);
  transform: translateY(-1px);
}
.btn-ifl:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3);
}
.btn-ifl:disabled { opacity: .6; transform: none; box-shadow: none; }

/* Tombol outline halus */
.btn-outline-ifl {
  border: 1px solid rgba(230, 57, 70, .5);
  color: var(--ifl-red2);
  background: rgba(230, 57, 70, .06);
  font-weight: 600;
  border-radius: 10px;
  transition: all var(--ifl-t-fast) var(--ifl-ease);
}
.btn-outline-ifl:hover, .btn-outline-ifl:focus {
  background: linear-gradient(140deg, var(--ifl-red), var(--ifl-red-deep));
  border-color: var(--ifl-red);
  color: #fff;
  box-shadow: 0 0 14px rgba(230, 57, 70, .35);
}

/* Tombol Bootstrap umum dalam konteks gelap */
.btn-secondary, .btn-outline-secondary {
  --bs-btn-color: var(--ifl-text-dim);
  --bs-btn-bg: var(--ifl-panel-hi);
  --bs-btn-border-color: var(--ifl-border-strong);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #262d3a;
  --bs-btn-hover-border-color: rgba(255, 255, 255, .18);
  --bs-btn-active-bg: #262d3a;
  --bs-btn-active-border-color: rgba(255, 255, 255, .18);
  --bs-btn-active-color: #fff;
  border-radius: 10px;
}
.btn-outline-light { border-radius: 10px; }
.btn-danger {
  --bs-btn-bg: var(--ifl-red-deep);
  --bs-btn-border-color: var(--ifl-red-deep);
  --bs-btn-hover-bg: var(--ifl-red);
  --bs-btn-hover-border-color: var(--ifl-red);
  border-radius: 10px;
}

/* Dropdown gelap */
.dropdown-menu {
  background: var(--ifl-panel-2);
  border: 1px solid var(--ifl-border-strong);
  border-radius: 12px;
  box-shadow: var(--ifl-shadow-md);
}
.dropdown-item { color: var(--ifl-text-dim); }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(230, 57, 70, .12); color: #fff; }

/* ---------- 11. Alert ---------- */

.alert {
  border-radius: 12px;
  border-width: 1px;
  animation: ifl-fadeup .35s var(--ifl-ease) both;
}
.alert-success { background: rgba(61, 220, 132, .08); border: 1px solid rgba(61, 220, 132, .3); color: #9de8bd; }
.alert-danger  { background: rgba(230, 57, 70, .1); border: 1px solid rgba(230, 57, 70, .4); color: #ff9aa3; }
.alert-warning { background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .3); color: #ffd979; }
.alert-info    { background: rgba(120, 160, 255, .07); border: 1px solid rgba(120, 160, 255, .25); color: #c3d2f5; }
.btn-close { filter: invert(1) grayscale(1); opacity: .6; }
.btn-close:hover { opacity: 1; }

/* ---------- 12. Loading overlay (double ring elegan) ---------- */

.ifl-loading-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(8, 10, 13, .8);
  display: flex; flex-direction: column; gap: 1.1rem;
  align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ifl-spinner {
  position: relative;
  width: 58px; height: 58px;
  border: 3px solid rgba(230, 57, 70, .18);
  border-top-color: var(--ifl-red);
  border-radius: 50%;
  animation: ifl-spin .85s linear infinite;
}
/* Ring kedua berputar berlawanan arah */
.ifl-spinner::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 3px solid transparent;
  border-bottom-color: rgba(255, 77, 90, .75);
  border-radius: 50%;
  animation: ifl-spin-rev 1.15s linear infinite;
}
.ifl-loading-text {
  color: var(--ifl-muted);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 600;
  animation: ifl-pulse 1.6s ease-in-out infinite;
}

/* ---------- 13. Halaman login ---------- */

.ifl-login-wrap {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(230, 57, 70, .14), transparent 60%),
    radial-gradient(700px 480px at 88% 112%, rgba(230, 57, 70, .09), transparent 55%),
    var(--ifl-bg);
}
/* Pola grid/dot sangat halus + vignette */
.ifl-login-wrap::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 42%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 42%, #000 30%, transparent 75%);
  pointer-events: none;
}
/* Glow ambient merah di belakang kartu */
.ifl-login-wrap::after {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 57, 70, .16), transparent 65%);
  filter: blur(10px);
  pointer-events: none;
}

.ifl-login-card {
  position: relative;
  z-index: 1;
  width: 100%; max-width: 410px;
  background: linear-gradient(180deg, rgba(28, 33, 43, .82), rgba(18, 22, 29, .88));
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid var(--ifl-border-strong);
  border-radius: 20px;
  padding: 2.4rem 2.2rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 24px 64px rgba(0, 0, 0, .55);
  animation: ifl-fadeup .55s var(--ifl-ease) both;
}
.ifl-login-card h4 { font-weight: 800; letter-spacing: -.01em; }

.ifl-login-logo {
  width: 76px; height: 76px;
  margin: 0 auto 1rem;
  display: block;
  border-radius: 20px;
  filter: drop-shadow(0 0 26px rgba(240, 75, 54, .45));
  animation: ifl-logofloat 5s ease-in-out infinite;
}

/* ---------- 14. Util, animasi & aksesibilitas ---------- */

@keyframes ifl-fadeup {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Alias lama tetap tersedia */
@keyframes ifl-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ifl-spin {
  to { transform: rotate(360deg); }
}
@keyframes ifl-spin-rev {
  to { transform: rotate(-360deg); }
}
@keyframes ifl-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@keyframes ifl-logofloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

a { color: var(--ifl-red2); text-decoration: none; transition: color var(--ifl-t-fast) var(--ifl-ease); }
a:hover { color: #ff8a93; }

.text-muted, .ifl-muted { color: var(--ifl-muted) !important; }

code, pre { color: #ffb3ba; font-family: var(--ifl-font-mono); font-size: .86em; }

/* ---------- 15. Glosarium & tooltip (Kontrak C) ---------- */

/* Istilah bertooltip: garis bawah putus-putus + kursor bantuan */
.ifl-term {
  border-bottom: 1px dashed var(--ifl-muted);
  cursor: help;
  transition: color var(--ifl-t-fast) var(--ifl-ease),
              border-color var(--ifl-t-fast) var(--ifl-ease);
}
.ifl-term:hover, .ifl-term:focus-visible {
  color: var(--ifl-red2);
  border-bottom-color: var(--ifl-red2);
  outline: none;
}

/* Akordeon halaman Panduan agar menyatu dengan tema gelap */
.ifl-accordion .accordion-item {
  background: var(--ifl-panel);
  border: 1px solid var(--ifl-border);
}
.ifl-accordion .accordion-button {
  background: var(--ifl-panel-2);
  color: var(--ifl-text);
  font-weight: 700;
  box-shadow: none;
}
.ifl-accordion .accordion-button:not(.collapsed) {
  background: var(--ifl-panel-hi);
  color: var(--ifl-red2);
}
.ifl-accordion .accordion-button::after { filter: invert(1) brightness(1.4); }
.ifl-accordion .accordion-body { color: var(--ifl-text-dim); }

/* Chart container */
.ifl-chart-box { position: relative; min-height: 280px; }

/* Hormati preferensi gerak minimal */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ifl-card, .card, .alert, .ifl-pagehead h1, .ifl-login-card { animation: none !important; }
  .ifl-stat:hover, .ifl-nav .nav-link:hover, .btn-ifl:hover { transform: none; }
}

/* ---------- 16. Topbar utama: pencarian global + pill sinkron + akun ---------- */

.ifl-topbar-main {
  position: sticky;
  top: 0;
  z-index: 1020; /* di bawah offcanvas/backdrop Bootstrap (1045) */
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem 1.75rem;
  max-width: 1600px;
  margin: 0 auto;
  background: rgba(12, 14, 19, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--ifl-border);
}

/* Kotak pencarian emiten */
.ifl-search-wrap {
  position: relative;
  flex: 0 1 420px;
  min-width: 0;
}
.ifl-search-icon {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ifl-muted);
  font-size: .85rem;
  pointer-events: none;
}
.ifl-search-input {
  width: 100%;
  background: var(--ifl-bg-soft);
  border: 1px solid var(--ifl-border-strong);
  color: var(--ifl-text);
  border-radius: 10px;
  padding: .42rem 4.4rem .42rem 2.1rem; /* kanan: ruang chip Ctrl+K (B10c) */
  font-size: .86rem;
  outline: none;
  transition: border-color var(--ifl-t-fast) var(--ifl-ease),
              box-shadow var(--ifl-t-fast) var(--ifl-ease);
}
.ifl-search-input::placeholder { color: rgba(152, 160, 172, .5); }
.ifl-search-input:focus {
  border-color: var(--ifl-red);
  box-shadow: 0 0 0 .18rem rgba(230, 57, 70, .16);
}

/* Dropdown hasil pencarian */
.ifl-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--ifl-panel-2);
  border: 1px solid var(--ifl-border-strong);
  border-radius: 12px;
  box-shadow: var(--ifl-shadow-md);
  max-height: 340px;
  overflow-y: auto;
  z-index: 1025;
  padding: .3rem;
}
.ifl-search-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .85rem;
}
.ifl-search-item.active,
.ifl-search-item:hover { background: rgba(230, 57, 70, .14); }
.ifl-search-kode {
  font-weight: 700;
  color: var(--ifl-text);
  min-width: 52px;
}
.ifl-search-nama {
  color: var(--ifl-text-dim);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ifl-search-sektor {
  color: var(--ifl-muted);
  font-size: .72rem;
  flex: 0 0 auto;
}
.ifl-search-empty {
  padding: .55rem .7rem;
  color: var(--ifl-muted);
  font-size: .83rem;
}

/* v10 B10c: chip trigger Ctrl+K yang TERLIHAT di dalam kotak pencarian
   (riset: command palette tanpa trigger terlihat = fitur mati) */
.ifl-search-kbd {
  position: absolute;
  right: .45rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: .2rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: .75;
}
.ifl-search-kbd:hover,
.ifl-search-kbd:focus-visible { opacity: 1; }
.ifl-search-kbd kbd {
  background: var(--ifl-bg);
  border: 1px solid var(--ifl-border-strong);
  border-radius: 5px;
  color: var(--ifl-muted);
  font-size: .66rem;
  font-family: inherit;
  padding: .08rem .34rem;
  line-height: 1.5;
}

/* v10 B10c: elemen dropdown pencarian global (grup, aksi cepat, footer) */
.ifl-search-head {
  padding: .35rem .6rem .15rem;
  color: var(--ifl-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ifl-search-item .ifl-search-act-icon {
  color: var(--ifl-red-soft, #ff8a94);
  font-size: .9rem;
  min-width: 20px;
  text-align: center;
}
.ifl-search-item .ifl-search-act-hint {
  color: var(--ifl-muted);
  font-size: .72rem;
  flex: 0 0 auto;
}
.ifl-search-loading {
  padding: .55rem .7rem;
  color: var(--ifl-muted);
  font-size: .83rem;
}
.ifl-search-foot {
  border-top: 1px solid var(--ifl-border);
  margin-top: .25rem;
  padding: .35rem .6rem .25rem;
  color: var(--ifl-muted);
  font-size: .7rem;
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
}
.ifl-search-foot kbd {
  background: var(--ifl-bg);
  border: 1px solid var(--ifl-border-strong);
  border-radius: 4px;
  font-size: .64rem;
  padding: 0 .28rem;
  font-family: inherit;
}

/* Sisi kanan topbar: pill sinkron + user + tautan akun */
.ifl-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .84rem;
  white-space: nowrap;
}
.ifl-topbar-user {
  color: var(--ifl-muted);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.ifl-topbar-user i { color: var(--ifl-text-dim); }
.ifl-topbar-link {
  color: var(--ifl-text-dim);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .55rem;
  border-radius: 8px;
  transition: background var(--ifl-t-fast) var(--ifl-ease), color var(--ifl-t-fast) var(--ifl-ease);
}
.ifl-topbar-link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.ifl-topbar-logout { color: var(--ifl-red2); }
.ifl-topbar-logout:hover { color: #fff; background: rgba(230, 57, 70, .22); }

/* Pill status sinkronisasi */
.ifl-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .3em .85em;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: filter var(--ifl-t-fast) var(--ifl-ease);
}
.ifl-sync-pill:hover { filter: brightness(1.2); }
.ifl-sync-pill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  flex: 0 0 7px;
}
.ifl-sync-green  { background: rgba(61, 220, 132, .14); color: #6ff0ac; border-color: rgba(61, 220, 132, .4); }
.ifl-sync-yellow { background: rgba(255, 193, 7, .12); color: #ffd979; border-color: rgba(255, 193, 7, .35); }
.ifl-sync-grey   { background: rgba(152, 160, 172, .12); color: #b8bfc9; border-color: rgba(152, 160, 172, .3); }

/* Varian ringkas untuk navbar mobile (status data + cron tetap terlihat) */
.ifl-sync-pill-sm { font-size: .68rem; padding: .28em .7em; gap: .35em; }

/* v8 B4.3: badge alert proaktif di topbar (muncul hanya bila ada alert aktif) */
.ifl-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .3em .7em;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  background: rgba(255, 92, 92, .14);
  color: #ff9d9d;
  border: 1px solid rgba(255, 92, 92, .4);
  transition: filter var(--ifl-t-fast) var(--ifl-ease);
}
.ifl-alert-badge:hover { filter: brightness(1.25); color: #ffb3b3; }

/* Mobile: topbar utama menyusut jadi bar pencarian full-width
   (tautan akun via sidebar; pill status tetap tampil ringkas di navbar atas) */
@media (max-width: 991.98px) {
  .ifl-topbar-main {
    position: static;
    padding: .55rem 1rem;
    gap: .5rem;
  }
  .ifl-search-wrap { flex: 1 1 auto; }
  .ifl-topbar-right { display: none; }
  /* Target sentuh nyaman (≥40px) untuk jari — tetap kompak agar grup
     collapsible muat tanpa scroll pada viewport pendek (B9b.2) */
  .ifl-nav .nav-link { padding: .5rem .7rem; }
  .ifl-topbar .btn-outline-light { padding: .42rem .6rem; }
}

/* ---------- 17. Dashboard command center ---------- */

/* Bar sapaan */
.ifl-greet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  padding: .85rem 1.15rem;
}
.ifl-greet-title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.ifl-greet-sub { color: var(--ifl-muted); font-size: .86rem; }
.ifl-greet-side { font-size: .8rem; }

/* Judul seksi kecil antar-blok */
.ifl-section-title {
  color: var(--ifl-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .7rem;
}
.ifl-section-title i { color: var(--ifl-red2); }

/* Kartu aksi (Top Picks / Alert Buy Zone / Berita) */
.ifl-action-card { display: flex; flex-direction: column; }
.ifl-action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--ifl-border);
  font-weight: 700;
  font-size: .9rem;
}
.ifl-action-head i { color: var(--ifl-red2); }
.ifl-action-more {
  font-size: .76rem;
  font-weight: 600;
  color: var(--ifl-muted);
  white-space: nowrap;
}
.ifl-action-more:hover { color: var(--ifl-red2); }
.ifl-action-body { padding: .6rem 1rem .8rem; flex: 1 1 auto; }
.ifl-action-list { list-style: none; margin: 0; padding: 0; }
.ifl-action-list > li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--ifl-border);
  font-size: .86rem;
}
.ifl-action-list > li:last-child { border-bottom: 0; }
.ifl-action-mid { flex: 1 1 auto; font-size: .8rem; }
.ifl-news-list > li { display: block; padding: .45rem 0; }
.ifl-news-line {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.ifl-news-line a {
  color: var(--ifl-text-dim);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ifl-news-line a:hover { color: #fff; }
.ifl-news-item small { font-size: .75rem; }

/* ---------- 18. Aksesibilitas fokus ---------- */

:focus-visible {
  outline: 2px solid var(--ifl-red2);
  outline-offset: 2px;
  border-radius: 6px;
}
.ifl-search-input:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible { outline: none; }


/* ---------- 19. Freeze kolom & header untuk tabel lebar (v4) ---------- */

/* Tabel dengan data-ifl-scroll diubah DataTables menjadi kontainer scroll
   (.dataTables_scrollHead + .dataTables_scrollBody). Kolom pertama (kode
   emiten) dibekukan agar tetap terlihat saat scroll horizontal. */
.dataTables_scrollHead thead th,
.dataTables_scrollBody tbody td { white-space: nowrap; }

.dataTables_scrollHead thead th:first-child,
.dataTables_scrollBody tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--ifl-panel);
  box-shadow: 2px 0 0 var(--ifl-border-strong);
}
.dataTables_scrollBody tbody tr:nth-child(even) td:first-child { background: #161b25; }
.dataTables_scrollBody tbody tr:hover td:first-child { background: #1c222e; }
.dataTables_scrollHead thead th:first-child { z-index: 4; background: #0c0f15; }

/* Fallback untuk tabel polos (tanpa DataTables) di dalam .table-responsive:
   header & kolom pertama membeku saat scroll. */
.table-responsive .table-ifl:not([data-ifl-scroll]) thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #0c0f15;
  box-shadow: 0 2px 0 var(--ifl-border-strong);
}
.table-responsive .table-ifl:not([data-ifl-scroll]) thead th:first-child { z-index: 6; }

/* ---------- 20. Panel filter collapsible (v4) ---------- */

.ifl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap; /* mobile: judul + badge boleh turun baris dgn rapi */
  row-gap: .4rem;
}
.ifl-card-head h5, .ifl-card-head h6 { flex: 1 1 auto; min-width: 0; }
.ifl-collapse-btn {
  border: 1px solid var(--ifl-border);
  background: var(--ifl-panel-2);
  color: var(--ifl-muted);
  border-radius: 8px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .25s ease, color .2s, border-color .2s;
  flex: 0 0 auto;
}
.ifl-collapse-btn:hover { color: #fff; border-color: var(--ifl-red); }
.ifl-collapse-btn .bi { transition: transform .25s ease; }
.ifl-collapse-btn[aria-expanded="false"] .bi { transform: rotate(-180deg); }

/* Badge jumlah filter aktif pada tombol collapse (diisi via markup halaman) */
.ifl-filter-count {
  font-size: .68rem;
  background: rgba(230, 57, 70, .18);
  color: var(--ifl-red2);
  border-radius: 999px;
  padding: .1rem .5rem;
  font-weight: 600;
}

/* ---------- 22. Mobile UX (v7) ---------- */
@media (max-width: 767.98px) {
  /* Kontrol DataTables: search & page-length full-width, tidak terpotong */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: left;
    width: 100%;
    margin-bottom: .4rem;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin-left: 0;
    margin-top: .25rem;
  }
  .dataTables_wrapper .dataTables_info { padding-top: .5rem; }
  .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; }
  .dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: center; }
  /* Form upload file: input melebar penuh, tombol tidak terjepit */
  .input-group > .form-control[type="file"] { min-width: 0; font-size: .8rem; }
  /* Tabel di dalam kartu boleh discroll horizontal dengan sentuhan halus */
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ---------- 21. Kerapatan tampilan (v4 — lebih ringkas) ---------- */

.table-ifl { font-size: .84rem; }
.table-ifl > tbody > tr > td { padding: .38rem .55rem; }
.table-ifl > thead > tr > th { padding: .5rem .6rem; }
.ifl-card { border-radius: 12px; }
.ifl-main { padding-bottom: 2rem; }
@media (max-width: 991.98px) {
  .table-ifl { font-size: .8rem; }
}

/* ---------- 23. Tab navigasi halaman (SPEC v8 B4.1) ----------
   Barisan tab: satu baris, scroll horizontal di layar sempit
   (flex-nowrap + overflow-x-auto), aksen merah IFL. */
.ifl-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--ifl-border);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.ifl-tabs .nav-item { flex: 0 0 auto; }
.ifl-tabs .nav-link {
  white-space: nowrap;
  color: var(--ifl-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: .55rem .95rem;
  font-weight: 600;
  font-size: .92rem;
  transition: color .15s ease, border-color .15s ease;
}
.ifl-tabs .nav-link:hover,
.ifl-tabs .nav-link:focus-visible {
  color: var(--ifl-text);
  border-bottom-color: rgba(230, 57, 70, .35);
}
.ifl-tabs .nav-link.active {
  color: #fff;
  background: transparent;
  border-bottom-color: var(--ifl-red);
}
.ifl-tabs .nav-link .bi { margin-right: .3rem; }

/* Panel tab: napas dari barisan tab */
.tab-content > .tab-pane { padding-top: .25rem; }

/* Tombol loncat antar-tab (mis. "lihat tab Log") */
.ifl-tab-jump { color: var(--ifl-red2); text-decoration: none; }
.ifl-tab-jump:hover { color: #fff; text-decoration: underline; }