/* ============================================================
   KAFNET — Stylesheet Utama
   Tema : Navy & Blue (mengikuti rancangan pos-2.png)
   Font : Plus Jakarta Sans + Poppins
   ============================================================ */

@font-face { font-family:'Plus Jakarta Sans'; src:url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Plus Jakarta Sans'; src:url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --kf-primary:      #2563eb;
  --kf-primary-dark: #1d4ed8;
  --kf-primary-50:   #eff6ff;
  --kf-primary-100:  #dbeafe;
  --kf-sidebar:      #0d2647;
  --kf-sidebar-2:    #0a1e3a;
  --kf-sidebar-text: #93a8c4;
  --kf-sidebar-card: #16375f;
  --kf-green:  #10b981;  --kf-green-50:  #ecfdf5;
  --kf-orange: #f97316;  --kf-orange-50: #fff7ed;
  --kf-purple: #8b5cf6;  --kf-purple-50: #f5f3ff;
  --kf-red:    #ef4444;  --kf-red-50:    #fef2f2;
  --kf-amber:  #f59e0b;  --kf-amber-50:  #fffbeb;
  --kf-bg:     #f5f7fa;
  --kf-white:  #ffffff;
  --g50:#f8fafc; --g100:#f1f5f9; --g200:#e6ebf2; --g300:#cbd5e1;
  --g400:#94a3b8; --g500:#64748b; --g600:#475569; --g700:#334155; --g900:#0f172a;
  --sidebar-w: 266px;
  --header-h:  88px;
  --radius:    14px;
  --radius-sm: 10px;
  --shadow:    0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.05);
  --shadow-md: 0 8px 24px -8px rgba(15,23,42,.16);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; }
body { font-family:'Plus Jakarta Sans','Poppins',system-ui,-apple-system,sans-serif;
       background:var(--kf-bg); color:var(--g700); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--kf-primary); }
img { max-width:100%; }

/* ── Layout ─────────────────────────────────────────────── */
.kf-wrapper { display:flex; min-height:100vh; }
.kf-sidebar { width:var(--sidebar-w); background:linear-gradient(180deg,var(--kf-sidebar),var(--kf-sidebar-2));
  flex-shrink:0; position:fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:40;
  display:flex; flex-direction:column; transition:transform .25s; }
.kf-main    { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.kf-header  { min-height:var(--header-h); background:var(--kf-white); border-bottom:1px solid var(--g200);
  display:flex; align-items:center; padding:0 1.75rem; gap:1rem; position:sticky; top:0; z-index:30; }
.kf-content { flex:1; padding:1.5rem 1.75rem; }
.kf-footer  { padding:1rem 1.75rem 1.5rem; font-size:.75rem; color:var(--g500);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.kf-footer .kf-heart { color:var(--kf-red); }

/* ── Sidebar ────────────────────────────────────────────── */
.kf-sidebar-logo { padding:1.4rem 1.25rem 1.1rem; }
.kf-sidebar-logo a { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.kf-logo-mark { width:42px; height:42px; flex-shrink:0; color:#38bdf8; }
.kf-logo-mark svg { width:42px; height:42px; }
.kf-logo-text strong { display:block; color:#fff; font-size:1.12rem; font-weight:800; letter-spacing:.5px; line-height:1.1; }
.kf-logo-text strong em { font-style:normal; color:#38bdf8; }
.kf-logo-text small { display:block; color:var(--kf-sidebar-text); font-size:.55rem; letter-spacing:1.4px; margin-top:2px; }

.kf-nav { padding:.25rem .75rem 1rem; flex:1; }
.kf-nav-group { padding:1.1rem .75rem .4rem; font-size:.62rem; text-transform:uppercase;
  letter-spacing:1.2px; color:rgba(147,168,196,.75); font-weight:700; }
.kf-nav-item { display:flex; align-items:center; gap:.75rem; padding:.65rem .75rem; margin-bottom:2px;
  color:#cbd8e8; text-decoration:none; font-size:.83rem; border-radius:var(--radius-sm);
  transition:background .15s, color .15s; }
.kf-nav-item > span:not(.kf-nav-badge) { flex:1; min-width:0; }
.kf-nav-item:hover  { background:rgba(255,255,255,.07); color:#fff; }
.kf-nav-item.active { background:var(--kf-primary); color:#fff; box-shadow:0 6px 16px -6px rgba(37,99,235,.9); font-weight:600; }
.kf-nav-item svg { width:18px; height:18px; flex-shrink:0; }
.kf-nav-badge { background:var(--kf-red); color:#fff; font-size:.62rem; font-weight:700; line-height:1;
  padding:3px 6px; border-radius:999px; }

.kf-sidebar-help { margin:.5rem .9rem 1.25rem; padding:.9rem; border-radius:var(--radius);
  background:var(--kf-sidebar-card); display:flex; gap:.7rem; align-items:flex-start; }
.kf-sidebar-help .ico { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; color:#93c5fd; flex-shrink:0; }
.kf-sidebar-help .ico svg { width:18px; height:18px; }
.kf-sidebar-help strong { display:block; color:#fff; font-size:.78rem; font-weight:600; }
.kf-sidebar-help small  { display:block; color:var(--kf-sidebar-text); font-size:.68rem; line-height:1.4; }

/* ── Header ─────────────────────────────────────────────── */
.kf-menu-btn { display:none; background:none; border:none; cursor:pointer; color:var(--g600); }
.kf-menu-btn svg { width:22px; height:22px; }
.kf-header-hamb { color:var(--g400); display:flex; }
.kf-header-hamb svg { width:22px; height:22px; }
.kf-header-titles { flex:1; min-width:0; }
.kf-header-titles h1 { font-size:1.25rem; font-weight:700; color:var(--g900); line-height:1.25; }
.kf-header-titles p  { font-size:.78rem; color:var(--g500); }
.kf-header-tools { display:flex; align-items:center; gap:1.1rem; }
.kf-icon-btn { color:var(--g500); display:flex; position:relative; background:none; border:none; cursor:pointer; padding:0; }
.kf-icon-btn svg { width:20px; height:20px; }
.kf-icon-btn:hover { color:var(--kf-primary); }
.kf-bell-badge { position:absolute; top:-7px; right:-9px; background:var(--kf-red); color:#fff;
  font-size:.58rem; font-weight:700; padding:1px 5px; border-radius:999px; line-height:1.5; }
.kf-header-user { display:flex; align-items:center; gap:.6rem; cursor:pointer; position:relative;
  padding-left:1.1rem; border-left:1px solid var(--g200); }
.kf-header-user .kf-hu-name { font-size:.83rem; font-weight:700; color:var(--g900); line-height:1.2; }
.kf-header-user .kf-hu-role { font-size:.7rem; color:var(--g500); line-height:1.2; }
.kf-header-user .kf-chev { color:var(--g400); width:16px; height:16px; }
.kf-avatar { width:40px; height:40px; border-radius:50%; background:var(--kf-primary); color:#fff;
  font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.9rem; }
.kf-avatar-sm { width:30px; height:30px; font-size:.72rem; }
.kf-dropdown { position:absolute; top:125%; right:0; background:#fff; border:1px solid var(--g200);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md); min-width:230px; z-index:50; overflow:hidden; }
.kf-dropdown-head { padding:.75rem 1rem; border-bottom:1px solid var(--g100); background:var(--kf-primary-50); }
.kf-dropdown-head strong { display:block; font-size:.82rem; color:var(--g900); }
.kf-dropdown-head small  { font-size:.68rem; color:var(--g500); }
.kf-dropdown a { display:flex; align-items:center; gap:.55rem; padding:.6rem 1rem; font-size:.8rem;
  color:var(--g700); text-decoration:none; }
.kf-dropdown a svg { width:15px; height:15px; }
.kf-dropdown a:hover { background:var(--g50); }
.kf-hidden { display:none !important; }

/* ── Page header ────────────────────────────────────────── */
.kf-page-header { margin-bottom:1.25rem; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.kf-page-header h1 { font-size:1.15rem; font-weight:700; color:var(--g900); }
.kf-page-header p  { font-size:.8rem; color:var(--g500); margin-top:.1rem; }
.kf-breadcrumb { display:flex; align-items:center; gap:.4rem; font-size:.74rem; color:var(--g500); margin-top:.2rem; }
.kf-breadcrumb a { color:var(--kf-primary); text-decoration:none; }
.kf-page-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ── Cards ──────────────────────────────────────────────── */
.kf-card { background:var(--kf-white); border-radius:var(--radius); box-shadow:var(--shadow);
  border:1px solid var(--g200); margin-bottom:1.25rem; }
.kf-card-header { padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap; position:relative; z-index:10; }
.kf-card-header h2 { font-size:1rem; font-weight:700; color:var(--g900); display:flex; align-items:center; gap:.5rem; }
.kf-card-header h2 svg { width:17px; height:17px; color:var(--kf-primary); }
.kf-card-header--line { border-bottom:1px solid var(--g200); }
.kf-card-body { padding:1.25rem; }
.kf-card-body.no-pad { padding:0; }
.kf-card-body.pt0 { padding-top:0; }
.kf-card-footer { padding:.9rem 1.25rem; border-top:1px solid var(--g100); display:flex;
  justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }

/* ── Stat cards ─────────────────────────────────────────── */
.kf-stat { background:var(--kf-white); border-radius:var(--radius); border:1px solid var(--g200);
  box-shadow:var(--shadow); padding:1.15rem 1.25rem; }
.kf-stat-top { display:flex; gap:.9rem; align-items:flex-start; }
.kf-stat-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; color:#fff; }
.kf-stat-icon svg { width:23px; height:23px; }
.kf-ic-blue   { background:var(--kf-primary); }
.kf-ic-green  { background:var(--kf-green); }
.kf-ic-orange { background:var(--kf-orange); }
.kf-ic-purple { background:var(--kf-purple); }
.kf-ic-red    { background:var(--kf-red); }
.kf-stat-label { font-size:.78rem; color:var(--g500); }
.kf-stat-value { font-size:1.5rem; font-weight:800; color:var(--g900); line-height:1.25; letter-spacing:-.5px; }
.kf-stat-value small { font-size:.72rem; font-weight:700; margin-left:.35rem; }
.kf-stat-foot { margin-top:.85rem; font-size:.72rem; color:var(--g500); }
.kf-stat-foot b { color:var(--g700); font-weight:600; }
.kf-up   { color:var(--kf-green); font-weight:700; }
.kf-down { color:var(--kf-red);   font-weight:700; }

/* ── Progress ───────────────────────────────────────────── */
.kf-progress { height:6px; background:var(--g200); border-radius:999px; overflow:hidden; flex:1; }
.kf-progress > span { display:block; height:100%; background:var(--kf-green); border-radius:999px; }
.kf-progress-row { display:flex; align-items:center; gap:.6rem; margin-top:.4rem; }
.kf-progress-row .pct { font-size:.72rem; font-weight:700; color:var(--g700); }

/* ── Tabel ──────────────────────────────────────────────── */
/* Wadah tabel menggulir sendiri (mendatar & menurun) agar baris judul
   dapat "menempel" di atas saat daftar panjang digulir. */
.kf-table-wrap { overflow:auto; max-height:calc(100vh - var(--header-h) - 168px); }
.kf-table-wrap.kf-no-sticky { overflow-x:auto; overflow-y:visible; max-height:none; }
/* Tabel lebar tetap terbaca: wadahnya yang menggulir, bukan teksnya yang terlipat. */
.kf-table { width:100%; min-width:520px; border-collapse:separate; border-spacing:0; font-size:.82rem; }
.kf-table th { position:sticky; top:0; z-index:5;
  background:var(--g50); padding:.75rem 1.25rem; text-align:left; font-weight:600;
  color:var(--g500); font-size:.76rem; white-space:nowrap;
  /* Bayangan luar di atas menutup celah pecahan piksel antara tepi wadah dan
     baris judul yang menempel — tanpa ini ujung atas baris di bawahnya mengintip.
     Bagian yang meluber ke atas ikut terpotong oleh overflow wadah.
     Dua shadow inset menggambar garis atas & bawah baris judul. */
  box-shadow:0 -6px 0 var(--g50),
             inset 0 1px 0 var(--g200), inset 0 -1px 0 var(--g200); }
.kf-table-wrap.kf-no-sticky .kf-table th { position:static; }
.kf-table td { padding:.8rem 1.25rem; border-bottom:1px solid var(--g100); color:var(--g700); vertical-align:middle; }
.kf-table tbody tr:last-child td { border-bottom:none; }
.kf-table tfoot th { position:static; box-shadow:inset 0 1px 0 var(--g200); }
.kf-table tbody tr:hover td { background:var(--g50); }
.kf-table .text-center { text-align:center; }
.kf-table .text-right  { text-align:right; }
.kf-table .nowrap { white-space:nowrap; }
.kf-table .kf-td-name { display:flex; align-items:center; gap:.6rem; }
.kf-mini-avatar { width:30px; height:30px; border-radius:50%; color:#fff; font-size:.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kf-strong { font-weight:600; color:var(--g900); }

/* ── Form ───────────────────────────────────────────────── */
.kf-form-group { margin-bottom:1rem; }
.kf-form-label { display:block; font-size:.78rem; font-weight:600; color:var(--g700); margin-bottom:.35rem; }
.kf-form-label .required { color:var(--kf-red); margin-left:2px; }
.kf-input, .kf-select, .kf-textarea {
  width:100%; padding:.55rem .8rem; border:1px solid var(--g300); border-radius:9px;
  font-size:.84rem; font-family:inherit; background:#fff; color:var(--g900);
  transition:border-color .15s, box-shadow .15s; }
.kf-input:focus, .kf-select:focus, .kf-textarea:focus {
  outline:none; border-color:var(--kf-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.kf-input:disabled, .kf-input[readonly] { background:var(--g100); color:var(--g500); }
.kf-textarea { resize:vertical; min-height:80px; }
.kf-form-hint { font-size:.71rem; color:var(--g500); margin-top:.25rem; }
.kf-form-row   { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.kf-form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
.kf-check-group { display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
.kf-check-item  { display:flex; align-items:center; gap:.35rem; font-size:.8rem; }
.kf-check-item input { accent-color:var(--kf-primary); width:15px; height:15px; }

/* ── Combo box dengan pencarian ─────────────────────────── */
.kf-cs { position:relative; display:block; }
.kf-cs-native { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.kf-cs-btn { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  width:100%; text-align:left; cursor:pointer; font-family:inherit; }
.kf-cs-btn::after { content:''; flex:0 0 auto; width:8px; height:8px; margin-right:2px;
  border-right:2px solid var(--g400); border-bottom:2px solid var(--g400);
  transform:rotate(45deg) translate(-2px,-2px); }
.kf-cs-btn:disabled { background:var(--g100); color:var(--g500); cursor:not-allowed; }
.kf-cs-btn[aria-expanded="true"] { border-color:var(--kf-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.kf-cs-teks { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kf-cs-btn.kf-cs-kosong .kf-cs-teks { color:var(--g500); }

.kf-cs-panel { position:absolute; z-index:60; left:0; top:calc(100% + 4px); min-width:100%;
  max-width:min(440px, 92vw); background:#fff; border:1px solid var(--g200);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md); overflow:hidden; }
.kf-cs.kf-cs-atas .kf-cs-panel { top:auto; bottom:calc(100% + 4px); }
.kf-cs-input { width:100%; border:none; border-bottom:1px solid var(--g200); padding:.55rem .8rem;
  font-size:.82rem; font-family:inherit; color:var(--g900); }
.kf-cs-input:focus { outline:none; background:var(--kf-primary-50); }
.kf-cs-list { list-style:none; margin:0; padding:.25rem; max-height:248px; overflow-y:auto; }
.kf-cs-item { padding:.45rem .65rem; font-size:.82rem; color:var(--g700); border-radius:7px;
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Item dua bagian: label di kiri, keterangan sekunder rata kanan */
.kf-cs-item.is-berdua { display:flex; align-items:baseline; gap:.75rem; }
.kf-cs-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.kf-cs-meta  { flex:0 0 auto; font-size:.72rem; color:var(--g500); font-variant-numeric:tabular-nums; }
.kf-cs-item.is-sorot .kf-cs-meta, .kf-cs-item.is-terpilih .kf-cs-meta { color:var(--kf-primary); }
.kf-cs-btn .kf-cs-meta { margin-left:auto; padding-left:.5rem; }
.kf-cs-btn .kf-cs-meta:empty { display:none; }
.kf-cs-item.is-sorot { background:var(--kf-primary-50); color:var(--kf-primary-dark); }
.kf-cs-item.is-terpilih { font-weight:700; color:var(--kf-primary-dark); }
.kf-cs-item.is-terpilih::after { content:'\2713'; float:right; margin-left:.5rem; }
.kf-cs-item.is-berdua.is-terpilih::after { float:none; order:3; }
.kf-cs-item.is-nonaktif { color:var(--g400); cursor:not-allowed; }
.kf-cs-empty { padding:.6rem .65rem; font-size:.76rem; color:var(--g500); }

/* Di dalam bilah alat, lebar mengikuti isi seperti <select> aslinya */
.kf-toolbar .kf-cs, .kf-card-header .kf-cs { display:inline-block; min-width:150px; }

/* ── Tombol ─────────────────────────────────────────────── */
.kf-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1rem; border-radius:9px;
  font-size:.8rem; font-weight:600; cursor:pointer; border:1px solid transparent; text-decoration:none;
  transition:background .15s, opacity .15s, border-color .15s; font-family:inherit; white-space:nowrap; }
.kf-btn svg { width:15px; height:15px; }
.kf-btn-primary   { background:var(--kf-primary); color:#fff; }
.kf-btn-primary:hover { background:var(--kf-primary-dark); }
.kf-btn-success   { background:var(--kf-green); color:#fff; }
.kf-btn-success:hover { background:#059669; }
.kf-btn-danger    { background:var(--kf-red); color:#fff; }
.kf-btn-danger:hover  { background:#dc2626; }
.kf-btn-secondary { background:#fff; color:var(--g700); border-color:var(--g300); }
.kf-btn-secondary:hover { background:var(--g100); }
.kf-btn-ghost { background:#fff; color:var(--g600); border-color:var(--g200); border-radius:999px; font-size:.76rem; padding:.4rem .9rem; }
.kf-btn-ghost:hover { background:var(--g50); color:var(--kf-primary); border-color:var(--kf-primary-100); }
.kf-btn-sm    { padding:.34rem .65rem; font-size:.73rem; }
.kf-btn-block { width:100%; justify-content:center; padding:.7rem; }
.kf-btn:disabled, .kf-btn.disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }
.kf-btn-icon { padding:.34rem; width:29px; height:29px; justify-content:center; }

/* ── Aksi cepat ─────────────────────────────────────────── */
.kf-quick { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.kf-quick a { display:flex; flex-direction:column; align-items:center; gap:.45rem; padding:.85rem .35rem;
  border:1px solid var(--g200); border-radius:var(--radius-sm); text-decoration:none;
  font-size:.68rem; font-weight:600; color:var(--g600); text-align:center; line-height:1.25;
  transition:border-color .15s, box-shadow .15s, transform .15s; }
.kf-quick a:hover { border-color:var(--kf-primary); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.kf-quick .qi { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.kf-quick .qi svg { width:16px; height:16px; }
.kf-qi-blue   { background:var(--kf-primary); color:#fff; }
.kf-qi-green  { background:var(--kf-green-50);  color:var(--kf-green); }
.kf-qi-cyan   { background:var(--kf-primary-50); color:#0ea5e9; }
.kf-qi-orange { background:var(--kf-orange-50); color:var(--kf-orange); }
.kf-qi-red    { background:var(--kf-red-50);    color:var(--kf-red); }
.kf-qi-teal   { background:var(--kf-green-50);  color:#0d9488; }

/* ── Daftar pengingat ───────────────────────────────────── */
.kf-remind { display:flex; align-items:center; gap:.65rem; padding:.6rem 0; border-bottom:1px solid var(--g100); }
.kf-remind:last-child { border-bottom:none; }
.kf-remind svg { width:18px; height:18px; flex-shrink:0; }
.kf-remind .txt { flex:1; font-size:.8rem; color:var(--g700); font-weight:600; }
.kf-remind .cnt { font-size:.7rem; color:var(--g500); white-space:nowrap; }
.kf-rem-warn { color:var(--kf-orange); }
.kf-rem-info { color:var(--kf-primary); }
.kf-rem-ok   { color:var(--kf-green); }

/* ── Info sistem ────────────────────────────────────────── */
.kf-info-row { display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  padding:.62rem 0; border-bottom:1px solid var(--g100); font-size:.8rem; }
.kf-info-row:last-of-type { border-bottom:none; }
.kf-info-row .k { color:var(--g500); }
.kf-info-row .v { color:var(--g900); font-weight:600; }
.kf-info-row .v.ok { color:var(--kf-green); }
.kf-info-row .v.bad { color:var(--kf-red); }

/* ── Ringkasan node (mini stat) ─────────────────────────── */
.kf-node-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.kf-node-stat { border:1px solid var(--g200); border-radius:var(--radius-sm); padding:.7rem .5rem;
  display:flex; flex-direction:column; align-items:center; gap:.2rem; text-align:center; }
.kf-node-stat .ic { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.kf-node-stat .ic svg { width:15px; height:15px; }
.kf-node-stat .n { font-size:1.15rem; font-weight:800; color:var(--g900); line-height:1.1; }
.kf-node-stat .l { font-size:.66rem; color:var(--g500); }

/* ── Badge ──────────────────────────────────────────────── */
.kf-badge { display:inline-flex; align-items:center; padding:.22rem .6rem; border-radius:8px;
  font-size:.7rem; font-weight:600; line-height:1.5; border:1px solid transparent; }
.kf-badge-green  { background:var(--kf-green-50);  color:#047857; border-color:#a7f3d0; }
.kf-badge-blue   { background:var(--kf-primary-50); color:#1d4ed8; border-color:#bfdbfe; }
.kf-badge-purple { background:var(--kf-purple-50); color:#6d28d9; border-color:#ddd6fe; }
.kf-badge-amber  { background:var(--kf-amber-50);  color:#b45309; border-color:#fde68a; }
.kf-badge-red    { background:var(--kf-red-50);    color:#b91c1c; border-color:#fecaca; }
.kf-badge-gray   { background:var(--g100); color:var(--g600); border-color:var(--g200); }
.kf-dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:.35rem; }

/* ── Alert ──────────────────────────────────────────────── */
.kf-alert { display:flex; align-items:flex-start; gap:.6rem; padding:.85rem 1rem; border-radius:var(--radius-sm);
  border-left:4px solid; margin-bottom:1rem; font-size:.82rem; }
.kf-alert-ico { width:18px; height:18px; flex-shrink:0; margin-top:2px; }
.kf-alert-success { background:var(--kf-green-50);  border-color:var(--kf-green);  color:#065f46; }
.kf-alert-error   { background:var(--kf-red-50);    border-color:var(--kf-red);    color:#991b1b; }
.kf-alert-warning { background:var(--kf-amber-50);  border-color:var(--kf-amber);  color:#92400e; }
.kf-alert-info    { background:var(--kf-primary-50); border-color:var(--kf-primary); color:#1e40af; }

/* ── Grid ───────────────────────────────────────────────── */
.kf-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.kf-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.kf-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.kf-dash   { display:grid; grid-template-columns:minmax(0,1fr) 288px; gap:1.25rem; align-items:start; }
.kf-dash-2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:1.25rem; align-items:start; }

/* ── Toolbar / search ───────────────────────────────────── */
.kf-toolbar { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.kf-search { display:flex; }
.kf-search input { border-radius:9px 0 0 9px; border-right:none; min-width:210px; }
.kf-search button { border-radius:0 9px 9px 0; }
.kf-header-search { position:relative; }
.kf-header-search input { border:1px solid var(--g200); background:var(--g50); border-radius:999px;
  padding:.45rem .9rem .45rem 2.1rem; font-size:.8rem; width:210px; font-family:inherit; }
.kf-header-search input:focus { outline:none; border-color:var(--kf-primary); background:#fff; }
.kf-header-search svg { position:absolute; left:.7rem; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--g400); pointer-events:none; }

/* ── Pagination ─────────────────────────────────────────── */
.kf-pagination ul { display:flex; gap:.25rem; flex-wrap:wrap; list-style:none; }
.kf-pagination a, .kf-pagination span { display:block; padding:.3rem .65rem; border:1px solid var(--g200);
  border-radius:8px; font-size:.75rem; color:var(--g700); text-decoration:none; background:#fff; }
.kf-pagination li.active a { background:var(--kf-primary); border-color:var(--kf-primary); color:#fff; }
.kf-pagination li.disabled a, .kf-pagination li.disabled span { opacity:.45; pointer-events:none; }

/* ── Empty state ────────────────────────────────────────── */
.kf-empty { text-align:center; padding:2.75rem 1rem; color:var(--g500); }
.kf-empty svg { width:44px; height:44px; color:var(--g300); margin-bottom:.6rem; }
.kf-empty p { font-size:.84rem; }

/* ── Definition list ────────────────────────────────────── */
.kf-dl { display:grid; grid-template-columns:170px 1fr; gap:.55rem 1rem; font-size:.83rem; }
.kf-dl dt { color:var(--g500); font-weight:600; }
.kf-dl dd { color:var(--g900); }

/* ── Modal ──────────────────────────────────────────────── */
.kf-modal { position:fixed; inset:0; background:rgba(13,38,71,.55); z-index:80; display:flex;
  align-items:flex-start; justify-content:center; padding:3rem 1rem; overflow-y:auto; }
.kf-modal-content { background:#fff; border-radius:var(--radius); width:100%; max-width:560px; box-shadow:var(--shadow-md); }
.kf-modal-header { padding:1rem 1.25rem; border-bottom:1px solid var(--g200); display:flex; justify-content:space-between; align-items:center; }
.kf-modal-header h3 { font-size:.95rem; font-weight:700; color:var(--g900); }
.kf-modal-body { padding:1.25rem; }
.kf-modal-footer { padding:.9rem 1.25rem; border-top:1px solid var(--g100); display:flex; justify-content:flex-end; gap:.5rem; }

/* ── Kasir / keranjang ──────────────────────────────────── */
.kf-cart-total { display:flex; justify-content:space-between; font-size:.85rem; padding:.35rem 0; }
.kf-cart-total.grand { border-top:1px dashed var(--g300); margin-top:.4rem; padding-top:.7rem;
  font-size:1.05rem; font-weight:800; color:var(--g900); }
.kf-pick { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem; }
.kf-pick button { text-align:left; background:#fff; border:1px solid var(--g200); border-radius:var(--radius-sm);
  padding:.7rem .8rem; cursor:pointer; font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.kf-pick button:hover { border-color:var(--kf-primary); box-shadow:var(--shadow-md); }
.kf-pick .nm { display:block; font-size:.8rem; font-weight:600; color:var(--g900); }
.kf-pick .pr { display:block; font-size:.75rem; color:var(--kf-primary); font-weight:700; margin-top:.15rem; }
.kf-pick .sb { display:block; font-size:.68rem; color:var(--g500); }

/* Teks khusus pembaca layar (judul kolom tanpa label tampak) */
.kf-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── Utilities ──────────────────────────────────────────── */
.kf-mt { margin-top:1.25rem; } .kf-mb { margin-bottom:1.25rem; } .kf-mb0 { margin-bottom:0 !important; }
.kf-muted { color:var(--g500); }
.kf-danger { color:var(--kf-red); }
.kf-success { color:var(--kf-green); }
.kf-text-right { text-align:right; }
.kf-text-center { text-align:center; }
.kf-flex { display:flex; gap:.5rem; align-items:center; }
.kf-flex-between { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.kf-w-full { width:100%; }
.kf-fw-700 { font-weight:700; }
.kf-small { font-size:.74rem; }
.kf-divider { border:none; border-top:1px solid var(--g200); margin:1rem 0; }
.kf-chart-box { position:relative; height:230px; }

/* ── Responsif ──────────────────────────────────────────── */
@media (max-width:1180px) {
  .kf-dash { grid-template-columns:1fr; }
  .kf-grid-4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:980px) {
  .kf-dash-2, .kf-grid-3 { grid-template-columns:1fr; }
  .kf-header-search { display:none; }
}
@media (max-width:768px) {
  .kf-grid-2, .kf-grid-3, .kf-grid-4, .kf-form-row, .kf-form-row-3,
  .kf-node-stats { grid-template-columns:1fr; }
  .kf-sidebar { transform:translateX(-100%); }
  .kf-sidebar.open { transform:none; box-shadow:var(--shadow-md); }
  .kf-main { margin-left:0; }
  .kf-menu-btn { display:block; }
  .kf-header-hamb { display:none; }
  .kf-header { padding:0 1rem; }
  .kf-content { padding:1rem; }
  .kf-header-user .kf-hu-meta { display:none; }
  .kf-node-stats { grid-template-columns:repeat(2,1fr); }
}

/* ── Print (nota) ───────────────────────────────────────── */
@media print {
  .kf-cs-panel { display:none !important; }
  .kf-table-wrap { overflow:visible !important; max-height:none !important; }
  .kf-table th { position:static !important; }
  .kf-sidebar, .kf-header, .kf-footer, .no-print { display:none !important; }
  .kf-main { margin-left:0; }
  .kf-content { padding:0; }
  body { background:#fff; }
  .kf-card { box-shadow:none; border:1px solid #ddd; }
}