/* ============================================================
   ksirqu — penyesuaian di atas tema DashLite (dashlite.css)
   ============================================================ */

.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: 0.2px; }
.ksirqu-logo-ico { font-size: 1.6rem; }

/* Logo gambar (ksirqu_logo.png) */
.logo-img.ksirqu-logo { display: block; object-fit: contain; }
.nk-sidebar .logo-img.ksirqu-logo { width: 240px; height: auto; max-width: 100%; max-height: 96px; }
.nk-header-brand .logo-img.ksirqu-logo { height: 30px; width: auto; }
.nk-sidebar .nk-sidebar-head { height: auto; min-height: 96px; padding: 12px 18px; }
.ksirqu-auth-brand .ksirqu-auth-logo { display: inline-block; height: 64px; width: auto; max-width: 100%; }

/* Kompatibilitas konten lama */
.header-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.text-muted { color: #8094ae !important; }
.page-title-head { margin-bottom: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-label-group { display: flex; justify-content: space-between; margin-bottom: 4px; }
.fs-12 { font-size: .75rem; }
.fs-13 { font-size: .8125rem; }
.fs-16 { font-size: 1rem; }
.fs-14px { font-size: .875rem; }
.w-80px { width: 80px; }
.text-opacity-75 { opacity: .75; }

/* fs-* utility (demo premium: cards Welcome Back!) */
.fs-1 { font-size: 2.4rem; }
.fs-3 { font-size: 1.125rem; }
.fs-4 { font-size: 1.125rem; }
.fs-6 { font-size: .92rem; }
.fs-7 { font-size: .78rem; }
.bg-warning { background-color: #f4bd0e !important; }
.bg-info { background-color: #0fac81 !important; }
.bg-danger { background-color: #e85347 !important; }

/* Skin swatches di Preview Settings */
.nk-opt-item-bg.skin-swatch { height: 38px; border-radius: 5px; border: 1px solid rgba(16,28,44,.12); }
.skin-swatch.skin-default { background: #6576ff; }
.skin-swatch.skin-bluelite { background: #4e8ff7; }
.skin-swatch.skin-egyptian { background: #1683a8; }
.skin-swatch.skin-purple { background: #8549d4; }
.skin-swatch.skin-green { background: #0fac81; }
.skin-swatch.skin-red { background: #e85347; }
body.dark-mode .skin-swatch { border-color: #243049; }
[data-skin] { width: calc(33.333% - 7px); }

/* Dashboard stat/hero */
.ksirqu-stat { border-radius: 10px; overflow: hidden; }
.ksirqu-stat-ico { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.ksirqu-hero { background: linear-gradient(135deg, #6576ff, #4f63ff); color: #fff; border: 0; }

/* ============ Sidebar (skin DashLite) ============ */
.nk-sidebar { background: #101c2c; color: #b6c2d4; }
.nk-sidebar .logo { color: #fff; }
.nk-sidebar .logo .icon { color: #6576ff; }
.nk-sidebar .nk-menu-link { color: #b6c2d4; }
.nk-sidebar .nk-menu-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.nk-sidebar .nk-menu-item.active > .nk-menu-link,
.nk-sidebar .nk-menu-link.active { color: #fff; background: rgba(101,118,255,.9); box-shadow: 0 4px 12px rgba(101,118,255,.3); }
/* grup has-sub (collapse): saat dibuka hanya teks terang, tanpa blok/pill */
.nk-sidebar .nk-menu-item.has-sub.active > .nk-menu-link,
.nk-sidebar.is-dark .nk-menu-item.has-sub.active > .nk-menu-link,
.nk-sidebar.is-theme .nk-menu-item.has-sub.active > .nk-menu-link { color: #fff; background: transparent; box-shadow: none; }
.nk-sidebar .nk-menu-item.has-sub.active > .nk-menu-toggle:after,
.nk-sidebar.is-dark .nk-menu-item.has-sub.active > .nk-menu-toggle:after,
.nk-sidebar.is-theme .nk-menu-item.has-sub.active > .nk-menu-toggle:after { color: #fff; }
body.sidebar-white .nk-sidebar .nk-menu-item.has-sub.active > .nk-menu-link { color: #364a63; background: transparent; }
body.sidebar-theme .nk-sidebar .nk-menu-item.has-sub.active > .nk-menu-link { color: #fff; background: transparent; }
/* submenu ikut warna tema sidebar (transparan — kalahkan #faf8ff/is-dark/is-theme DashLite) */
.nk-sidebar .nk-menu-sub,
.nk-sidebar.is-dark .nk-menu-sub,
.nk-sidebar.is-theme .nk-menu-sub,
body.sidebar-white .nk-sidebar .nk-menu-sub { background: transparent !important; box-shadow: none !important; }
/* hilangkan garis vertikal penghubung submenu (semua varian) */
.nk-sidebar .nk-menu-sub:before,
.nk-sidebar.is-dark .nk-menu-sub:before,
.nk-sidebar.is-theme .nk-menu-sub:before { display: none !important; }
/* item submenu terpilih: TANPA blok warna, hanya teks lebih terang (+ dot) */
.nk-sidebar .nk-menu-sub .nk-menu-item.active > .nk-menu-link,
.nk-sidebar .nk-menu-sub .nk-menu-link.active,
.nk-sidebar.is-dark .nk-menu-sub .nk-menu-item.active > .nk-menu-link,
.nk-sidebar.is-dark .nk-menu-sub .nk-menu-link.active,
.nk-sidebar.is-theme .nk-menu-sub .nk-menu-item.active > .nk-menu-link,
.nk-sidebar.is-theme .nk-menu-sub .nk-menu-link.active { background: transparent !important; box-shadow: none !important; color: #fff; }
body.sidebar-white .nk-sidebar .nk-menu-sub .nk-menu-item.active > .nk-menu-link,
body.sidebar-white .nk-sidebar .nk-menu-sub .nk-menu-link.active { color: #6576ff; }
.nk-sidebar .nk-menu-sub .nk-menu-link,
.nk-sidebar.is-dark .nk-menu-sub .nk-menu-link,
.nk-sidebar.is-theme .nk-menu-sub .nk-menu-link { color: #b6c2d4; }
.nk-sidebar .nk-menu-sub .nk-menu-link:hover,
.nk-sidebar.is-dark .nk-menu-sub .nk-menu-link:hover,
.nk-sidebar.is-theme .nk-menu-sub .nk-menu-link:hover { color: #fff; }
body.sidebar-white .nk-sidebar .nk-menu-sub { background: transparent; }
body.sidebar-white .nk-sidebar .nk-menu-sub .nk-menu-link { color: #526484; }
body.sidebar-white .nk-sidebar .nk-menu-sub .nk-menu-link:hover { color: #364a63; }
body.sidebar-white .nk-sidebar .nk-menu-sub .nk-menu-link:before { background: #c4cefe; }
.nk-sidebar .nk-menu-sub .nk-menu-link:before,
.nk-sidebar.is-dark .nk-menu-sub .nk-menu-link:before,
.nk-sidebar.is-theme .nk-menu-sub .nk-menu-link:before { background: rgba(255,255,255,.35); }
.nk-sidebar .nk-menu-sub .nk-menu-item.active > .nk-menu-link:before,
.nk-sidebar .nk-menu-sub .nk-menu-link.active:before,
.nk-sidebar.is-dark .nk-menu-sub .nk-menu-item.active > .nk-menu-link:before,
.nk-sidebar.is-theme .nk-menu-sub .nk-menu-link.active:before { background: #fff !important; }

/* ============ Datatable: kolom aksi (terakhir) satu baris, anti tumpuk/overlap (GLOBAL) ============ */
/* Berlaku utk semua tabel DataTables (DT1 & DT2 punya class .dataTable); kolom aksi biasanya kolom terakhir. */
.nk-content table.dataTable th:last-child,
.nk-content table.dataTable td:last-child { white-space: nowrap; }
.nk-content table.dataTable td:last-child .d-flex { flex-wrap: nowrap !important; align-items: center; }
.nk-content table.dataTable td:last-child .btn { white-space: nowrap; }
/* users (kolom aksi 3 tombol) — kasih jaminan lebar minimum */
#users_datatable tbody td:last-child { min-width: 116px; }
.nk-sidebar .overline-title { color: #6b7f9e; }
.nk-sidebar .nk-quick-nav-icon, .nk-sidebar .nk-nav-toggle { color: #b6c2d4; }

/* varian sidebar dari customizer */
body.sidebar-white .nk-sidebar { background: #fff; color: #364a63; }
body.sidebar-white .nk-sidebar .logo { color: #364a63; }
body.sidebar-white .nk-sidebar .nk-menu-link { color: #526484; }
body.sidebar-white .nk-sidebar .nk-menu-link:hover { background: #f5f6fa; color: #364a63; }
body.sidebar-white .nk-sidebar .nk-menu-item.active > .nk-menu-link,
body.sidebar-white .nk-sidebar .nk-menu-link.active { color: #fff; }
body.sidebar-white .nk-sidebar .overline-title { color: #9db0c4; }
body.sidebar-theme .nk-sidebar { background: linear-gradient(180deg,#8549d4 0%,#6576ff 100%); color: #fff; }
body.sidebar-theme .nk-sidebar .nk-sidebar-link, body.sidebar-theme .nk-sidebar .nk-menu-link { color: rgba(255,255,255,.85); }
body.sidebar-theme .nk-sidebar .nk-menu-link.active { background: rgba(255,255,255,.18); }
body.sidebar-theme .nk-sidebar .overline-title { color: rgba(255,255,255,.7); }

/* ============ Sidebar scroll (head & foot tetap, menu scroll) ============ */
.nk-sidebar { display: flex; flex-direction: column; overflow: hidden; }
.nk-sidebar .nk-sidebar-element { max-height: none; }
.nk-sidebar .nk-sidebar-head, .nk-sidebar .nk-sidebar-foot { flex: 0 0 auto; }
.nk-sidebar .nk-sidebar-body {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.nk-sidebar .nk-sidebar-body .nk-sidebar-content {
  flex: 1 1 auto; min-height: 0; height: auto;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.nk-sidebar .nk-sidebar-content .nk-sidebar-menu { padding-bottom: 1rem; }
.nk-sidebar .nk-sidebar-content::-webkit-scrollbar { width: 6px; }
.nk-sidebar .nk-sidebar-content::-webkit-scrollbar-track { background: transparent; }
.nk-sidebar .nk-sidebar-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 6px; }
body.sidebar-white .nk-sidebar .nk-sidebar-content::-webkit-scrollbar-thumb { background: rgba(15,28,44,.22); }

/* UI style bordered */
body.ui-bordered .card, body.ui-bordered .card-bordered, body.ui-bordered .nk-sidebar, body.ui-bordered .nk-header { border-radius: 0; }

/* ============ Customizer / Preview Settings ============ */
.ksirqu-customizer.nk-customizer {
  position: fixed; top: 0; right: -360px; width: 340px; height: 100%;
  background: #fff; box-shadow: -8px 0 30px rgba(15,23,42,.18);
  z-index: 1300; display: flex; flex-direction: column; transition: right .3s ease;
}
body.ksirqu-customizer-open .ksirqu-customizer.nk-customizer { right: 0; }
.ksirqu-customizer-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 1290; }
.nk-customizer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #101c2c; color: #fff; font-weight: 700; font-size: .95rem; }
.nk-customizer-close { color: #b6c2d4; font-size: 1.2rem; }
.nk-customizer-close:hover { color: #fff; }
.nk-customizer-body { flex: 1; overflow-y: auto; padding: 20px; }
.nk-opt-set { margin-bottom: 26px; }
.nk-opt-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #6b7f9e; margin: 0 0 12px; }
.nk-opt-list { display: flex; flex-wrap: wrap; gap: 10px; }
.nk-opt-list.col-2x .nk-opt-item { width: calc(50% - 5px); }
.nk-opt-list.col-3x .nk-opt-item { width: calc(33.333% - 7px); }
.nk-opt-item {
  position: relative; text-align: center; cursor: pointer;
  border: 2px solid transparent; border-radius: 6px; padding: 4px;
}
.nk-opt-item.active { border-color: #6576ff; box-shadow: 0 0 0 2px rgba(101,118,255,.15); }
.nk-opt-item-bg {
  display: block; width: 100%; height: 56px; border-radius: 4px;
  background: #e5e9f2; border: 1px solid #e5e9f2; position: relative; overflow: hidden;
}
.nk-opt-item-bg.is-white { background: #fff; }
.nk-opt-item-bg.is-dark { background: #101c2c; }
.nk-opt-item-bg.is-theme { background: linear-gradient(135deg,#8549d4,#6576ff); }
.nk-opt-item-bg.is-light { background: #eef1f5; }
.nk-opt-item-label { display: block; margin-top: 6px; font-size: .78rem; font-weight: 600; color: #526484; }
.nk-opt-item.only-text .nk-opt-item-bg { height: 34px; background: transparent; border: 1px solid #dbdfea; }
.nk-opt-item.only-text.active .nk-opt-item-bg { border-color: #6576ff; }

/* ============ Dark mode ============ */
body.dark-mode, html.dark-mode body { background: #0b0f19; }
body.dark-mode .nk-header, body.dark-mode .card, body.dark-mode .card-bordered,
body.dark-mode .ksirqu-customizer.nk-customizer { background-color: #161e2d; border-color: #243049; }
body.dark-mode .nk-customizer-head { background: #101b2c; }
body.dark-mode .table, body.dark-mode .nk-block-title, body.dark-mode .card-title,
body.dark-mode .page-title, body.dark-mode .text-head { color: #e5e9f0; }
body.dark-mode .text-soft, body.dark-mode .text-muted, body.dark-mode .sub-text,
body.dark-mode .nk-opt-title, body.dark-mode .nk-opt-item-label { color: #8094ae !important; }
body.dark-mode .table-light th { background: #101b2c; color: #c6d0e0; }
body.dark-mode .form-control { background: #101b2c; border-color: #243049; color: #e5e9f0; }
body.dark-mode .nk-opt-item-bg { border-color: #243049; }

/* ============ DataTables polish (DashLite) ============ */
.dataTables_wrapper { font-size: .8125rem; color: #526484; }
.dataTables_wrapper .row { margin-left: 0; margin-right: 0; align-items: center; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: .75rem; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: .45rem; margin-bottom: 0; font-weight: 500; color: #526484; }
.dataTables_wrapper .dataTables_filter { text-align: right; justify-content: flex-end; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { height: 32px; border: 1px solid #dbdfea; border-radius: 6px; font-size: .8125rem; color: #526484; background-color: #fff; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { border-color: #6576ff; box-shadow: 0 0 0 3px rgba(101,118,255,.15); }

/* Header tabel bersih: sembunyikan panah ganda DataTables, tampilkan 1 utk arah aktif */
table.dataTable thead th.sorting::before, table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::before, table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::before, table.dataTable thead th.sorting_desc::after { content: none; }
table.dataTable thead th.sorting_asc::after { content: "\2191" !important; font-family: inherit; font-size: .7rem; margin-left: .4rem; opacity: .65; }
table.dataTable thead th.sorting_desc::after { content: "\2193" !important; font-family: inherit; font-size: .7rem; margin-left: .4rem; opacity: .65; }
table.dataTable thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .4px; color: #8094ae; white-space: nowrap; border-bottom: 1px solid #e5e9f2; }
table.dataTable tbody td { vertical-align: middle; }

/* Info + pagination rapi */
.dataTables_wrapper .dataTables_info { padding-top: .75rem; color: #8094ae; font-size: .78rem; }
.dataTables_wrapper .dataTables_paginate { padding-top: .75rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-block; min-width: 30px; padding: .25rem .45rem; margin-left: 3px;
  border: 1px solid #dbdfea; border-radius: 6px; color: #526484 !important;
  font-size: .78rem; text-align: center; background: transparent; cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #eef1f5; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #6576ff; border-color: #6576ff; color: #fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .5; pointer-events: none; }

/* Tombol aksi di baris: padat agar tidak tumpuk/overlap */
.dataTables_wrapper table.dataTable td .btn-sm,
.dataTables_wrapper table.dataTable td .btn-xs { padding: .18rem .5rem; font-size: .72rem; line-height: 1.4; white-space: nowrap; }
.dataTables_wrapper table.dataTable td .d-flex.gap-1 { white-space: nowrap; }

/* mode gelap utk wrapper datatables */
body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select,
body.dark-mode table.dataTable { background-color: #161e2d; color: #e5e9f0; }
body.dark-mode table.dataTable thead th { border-bottom-color: #243049; color: #8094ae; }
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button { border-color: #243049; color: #b6c2d4 !important; }
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #101b2c; }

/* ============ DataTables 2 (DashLite demo style) ============ */
.dt-container { font-size: .8125rem; color: #526484; }
.dt-container .dt-layout-row { margin-left: 0; margin-right: 0; align-items: center; }
.dt-search { text-align: left; padding: 0 0 .5rem; }
.dt-search label { display: flex; align-items: center; }
.dt-search input.dt-input, .dt-search input { height: 34px; min-width: 220px; border: 1px solid #dbdfea; border-radius: 6px; padding: .375rem .75rem; font-size: .8125rem; color: #526484; background-color: #fff; }
.dt-search input:focus { border-color: #6576ff; box-shadow: 0 0 0 3px rgba(101,118,255,.15); outline: none; }
.dt-length { text-align: right; padding: 0 0 .5rem; }
.dt-length label { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 0; font-weight: 500; color: #526484; }
.dt-length select { height: 32px; border: 1px solid #dbdfea; border-radius: 6px; padding: .2rem 1.6rem .2rem .75rem; font-size: .8125rem; color: #526484; background-color: #fff; }
.dt-length select:focus { border-color: #6576ff; box-shadow: 0 0 0 3px rgba(101,118,255,.15); outline: none; }
.dt-info { padding: .5rem 0 0; color: #8094ae; font-size: .78rem; }
.dt-paging { text-align: right; padding-top: .5rem; }
.dt-paging nav, .dt-paging ul { display: inline-flex; align-items: center; margin-bottom: 0; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.dt-paging .dt-paging-button { margin: 0; }
.dt-paging .page-link { border: 1px solid #dbdfea; border-radius: 6px; padding: .3rem .6rem; font-size: .8125rem; line-height: 1.4; color: #526484; background: transparent; min-width: 30px; text-align: center; }
.dt-paging .page-link:hover { background: #eef1f5; color: #364a63; }
.dt-paging .page-item.active .page-link { background: #6576ff; border-color: #6576ff; color: #fff; z-index: 0; }
.dt-paging .page-item.disabled .page-link { opacity: .5; color: #8094ae; background: transparent; pointer-events: none; }
table.dataTable { border-collapse: collapse !important; }
table.dataTable > thead > tr > th { border-bottom: 2px solid #e5e9f2; font-size: .7rem; text-transform: uppercase; letter-spacing: .4px; color: #8094ae; white-space: nowrap; padding: .7rem .75rem; }
table.dataTable > tbody > tr > td { padding: .6rem .75rem; vertical-align: middle; }
/* gelap utk DT2 */
body.dark-mode .dt-container { color: #e5e9f0; }
body.dark-mode .dt-search input, body.dark-mode .dt-length select { background-color: #161e2d; border-color: #243049; color: #e5e9f0; }
body.dark-mode table.dataTable { background-color: #161e2d; color: #e5e9f0; }
body.dark-mode table.dataTable > thead > tr > th { border-bottom-color: #243049; color: #8094ae; }
body.dark-mode .dt-paging .page-link { border-color: #243049; color: #b6c2d4; background: transparent; }
body.dark-mode .dt-paging .page-link:hover { background: #101b2c; color: #fff; }

/* ============ Perbaikan: header kartu datatable tidak collapse/overlap ============ */
.card .card-body > .d-flex.flex-wrap,
.card .card-body > div.d-flex { min-height: 52px; margin-bottom: .75rem !important; }
.card .card-body .dt-container { clear: both; }
.dt-container .dt-layout-row, .dt-container .row { flex-wrap: wrap; margin-left: 0; margin-right: 0; }
.dt-container .dt-layout-start, .dt-container .dt-layout-end,
.dt-container .dt-layout-cell { min-width: 0; }
.table-responsive { overflow-x: auto; }

/* ============ Auth ============ */
.ksirqu-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(900px 480px at 85% -10%, rgba(101,118,255,.25), transparent 60%), linear-gradient(160deg,#0f1429 0%,#101b2c 60%,#0b1220 100%); }
.ksirqu-auth-card { width: 100%; max-width: 440px; border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.ksirqu-auth-brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 800; font-size: 1.35rem; }
.ksirqu-auth-brand .icon { color: #6576ff; font-size: 1.9rem; }
.ksirqu-auth-note { color: #8094ae; font-size: .85rem; }
.btn-block { width: 100%; }

/* ============ Kartu legacy framework → pola DashLite (spt users) ============ */
.nk-content .card { border: 1px solid #e5e9f2; box-shadow: 0 1px 4px rgba(16, 28, 44, .05); }
.nk-content .card .card-header {
  background: #fff !important;
  /* netralkan sisa border dashed dari class legacy (.border-dashed) di sisi lain */
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #e5e9f2 !important;
  border-radius: calc(.5rem - 1px) calc(.5rem - 1px) 0 0;
  padding: 1rem 1.25rem;
}
.nk-content .card .card-header .header-title,
.nk-content .card .card-header h4,
.nk-content .card .card-header h5,
.nk-content .card .card-header h6 { margin: 0; font-size: 1rem; font-weight: 600; color: #364a63; }