/* ============================================================
   reatozdrive-base.css — GAYA BERSAMA semua area (backend · club · publik)
   ------------------------------------------------------------
   Berisi:
     1. Dasar & variabel
     2. KOMPATIBILITAS: padanan kelas gaya lama (DashLite) yang masih
        dipakai view/route — supaya tidak perlu menyunting 50+ halaman
     3. Kerangka AppStack: sidebar, navbar, konten, footer (bentuk dasar)
     4. Komponen aplikasi (np-*): auth, dialog, kalender lomba, kuitansi, dll

   Berkas ini dimuat SETELAH app.css, jadi aturannya menang.

   Area-spesifik TIDAK di sini:
     · `reatozdrive-backend.css` — area `/backend/*` (warna sidebar backend)
     · `reatozdrive-club.css`    — area `/clubs/*` (warna sidebar per peran club)
     · `reatozdrive-publik.css`  — halaman publik/landing
   Ketiganya dimuat lewat `head-css.ejs` masing-masing kerangka.
   Diperbarui (last update): 2026-10-01 07:50 WIT
   ============================================================ */

/* ---------- 1. DASAR & VARIABEL ---------- */
:root {
  --np-primary: #3f80ea;
  --np-line: #e5e9f2;
  --np-soft: #6c757d;
  --np-sidebar-w: 260px;
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
.np-body { overflow-y: scroll; }
.content { padding: 1.5rem; }
.footer { padding: 1rem 1.5rem; font-size: .8rem; color: var(--bs-secondary-color); }
.np-content-body { min-height: 60vh; }

/* ---------- 2. KOMPATIBILITAS KELAS GAYA LAMA (DashLite) ---------- */
/* Ukuran teks */
.fs-12 { font-size: .75rem !important; }
.fs-13 { font-size: .8125rem !important; }
.fs-14, .fs-14px { font-size: .875rem !important; }
.fs-16 { font-size: 1rem !important; }
.fs-18 { font-size: 1.125rem !important; }
.fs-20 { font-size: 1.25rem !important; }
.fs-22 { font-size: 1.375rem !important; }
.text-soft { color: var(--bs-secondary-color) !important; }
.text-head { color: var(--bs-heading-color) !important; }
.text-muted { color: var(--bs-secondary-color) !important; }
.overline-title {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 600; color: var(--bs-secondary-color); margin-bottom: 0;
}
.lead-text { display: block; font-weight: 600; font-size: .95rem; color: var(--bs-heading-color); }
.sub-text { display: block; font-size: .78rem; color: var(--bs-secondary-color); }
.header-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.page-title-head { margin-bottom: 1rem; }

/* Judul & subjudul di dalam kartu */
.card .title, .card-inner .title, .card-title .title {
  font-size: 1rem; font-weight: 600; margin-bottom: .15rem; color: var(--bs-heading-color);
}
.card .subtitle, .card-inner .subtitle, .card-title .subtitle {
  font-size: .82rem; color: var(--bs-secondary-color); margin-bottom: 0;
}

/* Blok halaman */
.np-block { margin-bottom: 1.5rem; }
.np-block-head { margin-bottom: 1.25rem; }
.np-block-head-sm { margin-bottom: .9rem; }
.np-block-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.np-block-head-content { min-width: 0; }
.np-block-title { font-size: 1.35rem; font-weight: 600; margin: 0; color: var(--bs-heading-color); }
.np-block-head .page-title { font-size: 1.35rem; }

/* Kartu gaya lama */
.card-inner { padding: 1.25rem; }
.card-bordered { border: 1px solid var(--bs-border-color); box-shadow: 0 1px 4px rgba(16, 28, 44, .05); }
.card-title-group {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.card-tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Formulir */
.form-group { margin-bottom: 1rem; }
.form-control-wrap { position: relative; width: 100%; }
.form-label-group { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.form-note { display: block; font-size: .78rem; color: var(--bs-secondary-color); margin-top: .35rem; }
.form-horizontal .col-form-label { padding-top: .6rem; }

/* ---------- JARAK ANTAR-FIELD FORM (berlaku SEMUA form) ----------
   Sebelumnya tiap field berjarak ±2rem (32px): `1rem` dari `.form-group`
   + `1rem` gutter vertikal `gy-3` pada baris pembungkusnya. Terasa terlalu jauh.
   Sekarang tiap baris field hanya berjarak 2px atas/bawah (± 6px total dengan
   padding kontrol), dan gutter vertikal baris pembungkus field dinolkan.

   Penyasaran sengaja memakai rantai anak langsung (`.row > [col] > .form-group.row`)
   supaya baris grid lain — kartu info, dashboard, `row gy-4` halaman — TIDAK ikut
   dirapatkan. Baris tanpa `:has()` (browser lama) tetap dapat margin 2px-nya. */
.form-group.row { margin-top: 2px; margin-bottom: 2px; }
.row:has(> [class*="col-"] > .form-group.row) { --bs-gutter-y: 0; }

/* ---------- FOKUS INPUT — cukup GARIS (warna), tanpa "glow" ----------
   Bawaan AppStack/Bootstrap 5: border biru muda (#9fc0f5) + box-shadow ring
   `0 0 0 .25rem rgba(63,128,234,.25)` (terasa berat). Diganti: saat fokus
   hanya BORDER yang berubah jadi warna primer — tanpa ring/bayangan.
   Catatan: `.is-invalid`/`.is-valid` punya aturan sendiri dengan spesifisitas
   lebih tinggi, jadi penanda error/valid tetap terlihat. */
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible,
.form-check-input:focus,
.form-check-input:focus-visible,
textarea.form-control:focus,
.form-floating > .form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: none;
  outline: 0;
}

/* Tombol tutup di dalam header dialog juga jangan berglow saat fokus */
.modal-header .btn-close:focus,
.modal-header .btn-close:focus-visible { box-shadow: none; outline: 0; }

/* Checkbox/switch gaya lama -> perilaku Bootstrap 5 */
.custom-control { position: relative; display: block; min-height: 1.25rem; padding-left: 1.75rem; margin-bottom: .4rem; }
.custom-control-input { position: absolute; left: 0; top: .18rem; width: 1.15rem; height: 1.15rem; opacity: 0; z-index: 2; cursor: pointer; }
.custom-control-label { font-size: .85rem; margin-bottom: 0; cursor: pointer; }
.custom-control-label::before {
  content: ""; position: absolute; left: 0; top: .18rem; width: 1.15rem; height: 1.15rem;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .25rem;
}
.custom-control-input:checked ~ .custom-control-label::before { background: var(--bs-primary); border-color: var(--bs-primary); }
.custom-control-input:checked ~ .custom-control-label::after {
  content: ""; position: absolute; left: .37rem; top: .26rem; width: .38rem; height: .65rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* Fokus switch/checkbox gaya lama: cukup GARIS (warna primer), tanpa ring —
   mengikuti aturan fokus baru di bagian FORmulir (lihat blok "FOKUS INPUT"). */
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: none;
  border-color: var(--bs-primary);
}
.custom-switch { padding-left: 2.85rem; }
.custom-switch .custom-control-label::before { width: 2.35rem; height: 1.2rem; border-radius: 1rem; }
.custom-switch .custom-control-label::after {
  content: ""; position: absolute; left: .2rem; top: .34rem; width: .88rem; height: .88rem;
  border-radius: 50%; background: #fff; border: 0; transform: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s ease-in-out;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--bs-primary); border-color: var(--bs-primary); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(1.15rem); }

/* Tombol & tautan */
.btn-block { width: 100%; }
.btn-xs { padding: .18rem .5rem; font-size: .72rem; line-height: 1.4; }
.btn-dim { background: var(--bs-primary-bg-subtle); border-color: transparent; color: var(--bs-primary); }
.btn-dim:hover { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.btn-icon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.link { color: var(--bs-primary); text-decoration: none; }
.link:hover { text-decoration: underline; }
.link-sm { font-size: .8rem; }
.link-primary { color: var(--bs-primary) !important; }

/* Latar */
.bg-lighter { background-color: var(--bs-tertiary-bg) !important; }
.bg-dim { background-color: var(--bs-tertiary-bg) !important; }
.bg-primary-dim { background-color: var(--bs-primary-bg-subtle) !important; color: var(--bs-primary); }
.bg-success-soft { background-color: rgba(var(--bs-success-rgb), .14) !important; color: var(--bs-success); }
.bg-danger-soft { background-color: rgba(var(--bs-danger-rgb), .14) !important; color: var(--bs-danger); }
.bg-secondary-soft { background-color: rgba(var(--bs-secondary-rgb), .14) !important; }

/* Avatar pengguna (dipakai tabel & header) */
.user-avatar, .avatar-md {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; flex: 0 0 auto;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary); font-weight: 600; font-size: .85rem;
}
.user-avatar-sm { width: 30px !important; height: 30px !important; font-size: .75rem; }
.user-avatar-lg, .avatar-lg { width: 48px !important; height: 48px !important; font-size: 1rem; }
.avatar-md { width: 44px; height: 44px; }

/* Daftar gaya lama */

/* Tab gaya kartu */
.nav-tabs-card { border-bottom: 1px solid var(--bs-border-color); gap: .25rem; }
.nav-tabs-card .nav-link {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--bs-secondary-color); font-weight: 500; padding: .5rem .85rem;
}
.nav-tabs-card .nav-link:hover { color: var(--bs-body-color); }
.nav-tabs-card .nav-link.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); background: transparent; }

/* Lain-lain */
.align-start { align-items: flex-start !important; }
.g-gs { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
.divider { height: 0; border-top: 1px solid var(--bs-border-color); margin: .75rem 0; }
.is-alt { background-color: var(--bs-tertiary-bg); }
.list-group-sm .list-group-item { padding: .5rem .75rem; font-size: .85rem; }
.pagination-rounded .page-link { border-radius: 6px; margin: 0 2px; }
.w-80px { width: 80px; }
.pull-right { float: right; }
.enabled, .disabled-soft { opacity: 1; }
.table-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Ikon (Font Awesome) di dalam tombol/teks */
.icon { line-height: 1; display: inline-block; }
.btn > .icon, .btn > i { vertical-align: -.125em; }
.btn .icon + span, .btn i + span { margin-left: .35rem; }

/* ---------- 3. KERANGKA APPSTACK ---------- */
/* Brand/logo di sidebar, navbar, dan halaman auth */
.sidebar .sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: .75rem 1.25rem; }
.sidebar .logo-img.np-logo { width: 190px; height: auto; max-height: 68px; object-fit: contain; display: block; }
.sidebar .logo-img.np-logo.np-brand-terang { display: none; }
.sidebar .logo-img.np-logo.np-brand-gelap { display: block; }
.navbar .logo-img.np-logo { height: 28px; width: auto; }

/* Menu sidebar: warna mengikuti peran (lihat bagian 4) */
.sidebar-nav .sidebar-link { display: flex; align-items: center; gap: .7rem; padding: .55rem 1.25rem; font-size: .875rem; }
.sidebar-nav .sidebar-link .icon { width: 18px; text-align: center; font-size: .95rem; }
.sidebar-nav .sidebar-header { padding: 1.1rem 1.25rem .35rem; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; }
.sidebar-nav .sidebar-item.active > .sidebar-link { font-weight: 500; }

/* Kartu di dalam area konten */
.content .card { border: 1px solid var(--bs-border-color); box-shadow: 0 1px 4px rgba(16, 28, 44, .05); }
.content .card .card-header { background: transparent; border-bottom: 1px solid var(--bs-border-color); }
.content .card .card-header .header-title,
.content .card .card-header h4,
.content .card .card-header h5,
.content .card .card-header h6 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--bs-heading-color); }

/* Banner "Login sebagai Club" tampil di atas konten */
.np-impersonasi { margin: 0; }

/* ---------- THEME BUILDER ----------
   Tombol "builder" mengambang di sisi kanan layar (`.settings-toggle`) bawaan
   settings.js AppStack dihapus dari tampilan; pencetusnya = ikon topbar
   `data-lucide="sliders-horizontal"` (lihat `js/reatozdrive.js` → siapkanThemeBuilder).
   Panelnya sendiri (`.settings-panel`) tetap dipakai dan masih bisa ditutup lewat
   tombol X di dalamnya / klik di luar panel. */
.settings-toggle { display: none !important; }

/* ============ Kartu legacy framework → pola DashLite (spt users) ============ */
.content .card { border: 1px solid #e5e9f2; box-shadow: 0 1px 4px rgba(16, 28, 44, .05); }
.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;
}
.content .card .card-header .header-title,
.content .card .card-header h4,
.content .card .card-header h5,
.content .card .card-header h6 { margin: 0; font-size: 1rem; font-weight: 600; color: #364a63; }

/* ---------- MODE GELAP (data-bs-theme="dark") ---------- */
/* Kelas `.dark-mode` tetap dipakai halaman publik; backend memakai data-bs-theme
   dan kelas itu ikut dipasang oleh public/appstack/js/reatozdrive.js. */
body.dark-mode { background: #0b0f19; }
body.dark-mode .card, body.dark-mode .card-bordered { background-color: #161e2d; border-color: #243049; }
body.dark-mode .table, 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 { color: #8094ae !important; }
body.dark-mode .table-light th { background: #101b2c; color: #c6d0e0; }
body.dark-mode .form-control, body.dark-mode .form-select { background: #101b2c; border-color: #243049; color: #e5e9f0; }
body.dark-mode .bg-lighter, body.dark-mode .bg-dim, body.dark-mode .is-alt { background-color: #101b2c !important; }
body.dark-mode .custom-control-label::before { background: #101b2c; 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 ============ */
.np-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%); }
.np-auth-card { width: 100%; max-width: 440px; border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.np-auth-brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 800; font-size: 1.35rem; }
.np-auth-brand .icon { color: #6576ff; font-size: 1.9rem; }
.np-auth-note { color: #8094ae; font-size: .85rem; }
.btn-block { width: 100%; }

/* ============ Standar dialog SweetAlert2 (NpSwal) ============
   Semua dialog SELALU di tengah, lebar & tombol konsisten dengan DashLite.
   Dipakai oleh public/appstack/js/reatozdrive-swal.js (lihat juga shim Swal.fire). */
.np-swal { border-radius: 12px; padding: 26px 26px 22px; }
.np-swal .swal2-title,
.np-swal .np-swal-title { font-size: 1.15rem; font-weight: 700; color: #364a63; }
.np-swal .swal2-html-container { font-size: .92rem; color: #526484; margin-top: .5rem; }
.np-swal .swal2-actions { margin: 1.25rem 0 0; gap: .5rem; }
.np-swal .swal2-actions .btn { min-width: 96px; margin: 0; }
.np-swal .swal2-loading { margin: 1.25rem 0 0; }
.np-swal .swal2-footer { border-top: 1px solid #e5e9f2; margin-top: 1.25rem; padding-top: .75rem; font-size: .82rem; color: #8094ae; }
.np-swal .form-group:last-child { margin-bottom: 0; }
.np-swal .custom-control { padding-left: 2.4rem; }
body.dark-mode .np-swal .swal2-title,
body.dark-mode .np-swal .np-swal-title { color: #e9f0fa; }
body.dark-mode .np-swal .swal2-html-container { color: #b6c2d4; }
body.dark-mode .np-swal .swal2-footer { border-color: #243049; }
.swal2-container { z-index: 11000 !important; }

/* ============================================================
   KOMPATIBILITAS: `.gap-N` di dalam flex container
   ------------------------------------------------------------
   template lama mendefinisikan `.gap-2 { height: .75rem }` pada bagian utilitas
   "spacer" (baris ~41281), DI SAMPING `.gap-2 { gap: .75rem }` (baris ~8659).
   Akibatnya elemen `d-flex gap-2` (maksudnya: jarak antar item) ikut dipaksa
   tinggi 12px → isinya (tombol/toolbar) melimpah ke luar dan MENIMPA teks di
   bawahnya (kasus nyata: tombol hero halaman depan menimpa baris ATLET/LATIHAN/REKOR).
   Setiap `.gap-N` yang dipakai bersama `.d-flex` = jarak antar item, jadi tinggi
   spacer-nya harus diabaikan. Specificity 2 kelas > 1 kelas → menang tanpa !important.
   ============================================================ */
.d-flex.gap-0,
.d-flex.gap-1,
.d-flex.gap-2,
.d-flex.gap-3,
.d-flex.gap-4,
.d-flex.gap-5 {
  height: auto;
}

/* ============================================================
   KALENDER LOMBA (`views/backend/events.ejs`) — dipakai backend & club
   Grid bulanan bikinan sendiri (tanpa pustaka) supaya ringan di HP.
   ============================================================ */
.np-kalender-head h6 { white-space: nowrap; }
.np-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.np-kalender-hari {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 1px;
}
.np-kalender-hari > div {
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, #8091a7);
  padding: .35rem 0;
}

.np-kalender-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: rgba(128, 145, 167, .22);
  border: 1px solid rgba(128, 145, 167, .22);
  border-radius: 6px;
  overflow: hidden;
}
.np-kalender-sel {
  background: #fff;
  min-height: 108px;
  padding: 4px 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.np-kalender-sel.np-luar-bulan { background: #f7f8fb; }
.np-kalender-sel.np-luar-bulan .np-kalender-tgl { color: #b6c0cf; }
.np-kalender-sel.np-hari-ini { box-shadow: inset 0 0 0 2px rgba(101, 118, 255, .55); }

.np-kalender-tgl { font-size: .78rem; font-weight: 600; color: #526484; line-height: 1.1; }
.np-kalender-isi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.np-lomba-chip {
  border: 0;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: .68rem;
  line-height: 1.25;
  text-align: left;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.np-lomba-chip .np-chip-titik { display: none; }
.np-lomba-more {
  border: 0;
  background: transparent;
  font-size: .66rem;
  color: var(--bs-secondary-color, #8091a7);
  text-align: left;
  padding: 0 2px;
  cursor: pointer;
}

/* ---- HP: sel lebih pendek, chip jadi TITIK warna (tetap bisa diklik) ---- */
@media (max-width: 767.98px) {
  .np-kalender-sel { min-height: 62px; padding: 3px 4px; }
  .np-kalender-hari > div { font-size: .62rem; }
  .np-lomba-chip {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    display: inline-block;
  }
  .np-lomba-chip .np-chip-teks { display: none; }
  .np-lomba-chip .np-chip-titik { display: block; }
  .np-kalender-isi { flex-direction: row; flex-wrap: wrap; gap: 2px; }
  .np-kalender-legend { font-size: .72rem; gap: .5rem !important; }
  .np-filter-lomba, .np-filter-pengajuan { width: 100%; }
  .np-filter-lomba .form-select, .np-filter-pengajuan .form-select { width: 100%; }
  .np-kalender-head { gap: .5rem !important; }
}

/* Filter/toolbar di dalam tab kalender */
.np-filter-lomba .form-select, .np-filter-pengajuan .form-select { min-width: 150px; }
.np-tab-kompetisi.nav-tabs-card .nav-link span { display: inline-block; }

/* ============================================================
   BANNER "LOGIN SEBAGAI CLUB" (impersonasi oleh superadmin)
   Dipasang di shell-open.ejs saat `res.locals.impersonator` ada.
   ============================================================ */
.np-impersonasi {
  background: linear-gradient(90deg, #b45309, #d97706);
  color: #fff;
  padding: .5rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 10px rgba(180, 83, 9, .35);
}
.np-impersonasi-dalam { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.np-impersonasi-teks { font-size: .85rem; display: inline-flex; align-items: center; gap: .4rem; }
.np-impersonasi .btn-warning { background: #fffbeb; border-color: #fffbeb; color: #92400e; font-weight: 700; }
.np-impersonasi .btn-warning:hover { background: #fff; border-color: #fff; color: #78350f; }

/* ============================================================
   MOBILE (≤ 575.98px & ≤ 767.98px) — backend & area club
   ------------------------------------------------------------
   Tujuan: semua halaman (backend `/backend/*` dan club `/clubs/*`)
   nyaman dipakai di HP: form mudah diisi, tabel tidak terpotong,
   tombol aksi selalu terjangkau.
   ============================================================ */
@media (max-width: 575.98px) {
  /* --- Form: label di atas field, jarak nyaman, tinggi sentuh memadai --- */
  .np-block .form-group.row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .form-group.row > .col-form-label { text-align: left !important; padding-bottom: .15rem; }
  .form-label, .col-form-label { font-size: .82rem; font-weight: 600; }
  .form-control, .form-select, .form-control-wrap .form-control { font-size: .9rem; }
  .form-control, .form-select { min-height: 42px; } /* nyaman disentuh jari */
  textarea.form-control { min-height: 84px; }
  .form-note { font-size: .75rem; }
  .form-check-input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; }
  .form-check-label { font-size: .85rem; }

  /* --- Modal: penuh layar, header/footer menetap, isi bisa digulir --- */
  .modal-dialog.modal-fullscreen-sm-down .modal-body { padding: 1rem; }
  .modal-dialog.modal-fullscreen-sm-down .modal-header,
  .modal-dialog.modal-fullscreen-sm-down .modal-footer { padding: .85rem 1rem; }
  .modal-dialog.modal-fullscreen-sm-down .modal-footer { flex-wrap: wrap; gap: .5rem; }
  .modal-dialog.modal-fullscreen-sm-down .modal-footer .btn { flex: 1 1 auto; min-width: 44%; }

  /* --- Kartu & judul: hindari judul berdesakan dengan tombol --- */
  .np-block-head .page-title { font-size: 1.15rem; }
  .card-title-group { flex-wrap: wrap; }
  .card-tools { width: 100%; }
  .card-tools .d-flex { flex-wrap: wrap; gap: .5rem; width: 100%; }
  .card-tools .form-group, .card-tools .form-control-wrap, .card-tools .form-select { width: 100% !important; }
  .card-tools .form-select { min-width: 0 !important; }
  .card-inner { padding: 1rem; }

  /* --- Toolbar tombol: jangan meluber, boleh turun baris --- */
  .btn-group { flex-wrap: wrap; }
  .btn-group > .btn { flex: 1 1 auto; border-radius: 4px !important; margin: 2px 0; }
  .d-flex.flex-wrap.gap-2 .btn { flex: 0 1 auto; }

  /* --- Tabel: teks ringkas + tetap bisa digeser mendatar --- */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table td, .table th { font-size: .8rem; padding: .45rem .5rem; vertical-align: middle; }
  .table td .badge, .table th .badge { font-size: .68rem; }
  table.dataTable { width: 100% !important; }
  .dataTables_wrapper .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; text-align: left !important; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }
  .dataTables_wrapper .dataTables_length select { width: auto; }
  .dataTables_wrapper .dataTables_paginate { text-align: center; margin-top: .5rem; }
  .dataTables_wrapper .dt-buttons, .dt-buttons .btn { width: 100%; }

  /* --- Elemen khas tabel DashLite (user avatar + nama) --- */
  .user-avatar-sm { width: 34px !important; height: 34px !important; font-size: .8rem; }
    
  /* --- Sidebar mobile --- */
  .sidebar .sidebar-brand { min-height: 76px; padding: 8px 14px; }
  .sidebar .logo-img.np-logo { max-height: 64px; }
  .np-role-club { padding-left: .85rem !important; padding-right: .85rem !important; }

  /* Badge panjang (mis. "5–6 hari (1–2 sesi/hari → 8–12×)/pekan" pada legend jadwal)
     jangan memaksa halaman melebar — biarkan membungkus. */
  .badge { white-space: normal !important; max-width: 100%; word-break: break-word; }
  .badge.d-flex, .d-flex > .badge { flex-wrap: wrap; }
  .np-block .col-6, .np-block .col-md-4 { flex: 0 0 100%; max-width: 100%; }

  /* --- Banner "Login sebagai Club" --- */
  .np-impersonasi-dalam { gap: .5rem; }
  .np-impersonasi-teks { font-size: .78rem; }
  .np-impersonasi .btn { width: 100%; }
}

@media (max-width: 767.98px) {
  /* Dashboard: KPI & grafik bertumpuk rapi */
  .np-block .col-sm-6.col-xl-3, .np-block .col-xxl-3 { flex: 0 0 100%; max-width: 100%; }
  .card-inner .title { word-break: break-word; }
  /* Tabel panjang di dashboard (daftar) tetap bisa digeser */
  .np-block .table-responsive { margin-bottom: .25rem; }
}

/* Tabel: cegah teks panjang (email, catatan) menembus kolom di semua ukuran */
.table td, .table th { word-break: break-word; }

/* ============================================================
   LOGO BRAND SADAR TEMA (`views/backend/partials/brand-logo.ejs`)
   ------------------------------------------------------------
   `reatozdrive_logo.svg`      → tulisan "Swi" GELAP (#0f172a) = untuk latar TERANG
   `reatozdrive_logo_dark.svg` → tulisan "Swi" PUTIH            = untuk latar GELAP
   Partial memasang KEDUANYA lalu CSS ini memilih satu:
     • `.np-brand--gelap`  = latar PASTI gelap (sidebar per peran) → varian gelap,
     • `html/body.dark-mode` = tema gelap (tombol tema publik & skin DashLite)
       → otomatis berganti tanpa JavaScript (tidak berkedip saat halaman dimuat).
   ⚠️ Aturan memakai kelas `np-brand-terang` / `np-brand-gelap` pada IMG-nya
      (tanpa pembungkus baru). JANGAN menambahkan elemen pembungkus di dalam
      `.logo-link` DashLite: induk itu `inline-block` (shrink-to-fit) sehingga
      `max-width: 100%` milik `.logo-img.np-logo` menghitung lebar pembungkus
      yang masih 0 → logo jadi **0 px / hilang** (sudah terbukti di browser).
   ⚠️ Pemilih di bawah memakai `!important`: aturan UKURAN di view/CSS lain
      (mis. `.sidebar .logo-img.np-logo { display: block }`,
      `.np-auth-brand .np-auth-logo { display: block }`) punya spesifisitas
      LEBIH TINGGI daripada `img.np-brand-*`, sehingga tanpa `!important`
      KEDUA logo bisa tampil bersamaan (login/header) atau yang salah tampil.
      Aturan mana yang menang di antara mereka ditentukan spesifisitas +
      urutan: aturan `.np-brand--gelap` dan `dark-mode` ditulis paling akhir.
   ============================================================ */
img.np-brand-gelap { display: none !important; }
img.np-brand-terang { display: block !important; }

/* Latar selalu gelap (mis. sidebar) → pembungkusnya diberi kelas ini */
.np-brand--gelap img.np-brand-terang { display: none !important; }
.np-brand--gelap img.np-brand-gelap { display: block !important; }

/* Tema gelap aktif (html+body diberi kelas `dark-mode`) */
html.dark-mode img.np-brand-terang,
body.dark-mode img.np-brand-terang { display: none !important; }
html.dark-mode img.np-brand-gelap,
body.dark-mode img.np-brand-gelap { display: block !important; }

/* ---------- 5. KERANGKA TAMBAHAN (navbar, overlay, judul halaman) ---------- */
.min-w-0 { min-width: 0; }

/* Navbar atas */
.navbar.navbar-bg { padding: .5rem 1.5rem; border-bottom: 1px solid var(--bs-border-color); }
.navbar .navbar-nav .nav-link { font-size: .875rem; color: var(--bs-secondary-color); padding: .4rem .7rem; border-radius: .35rem; }
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-item.active > .nav-link { color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.navbar .navbar-nav .nav-link.dropdown-toggle { padding: .25rem .5rem; }
.navbar .nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: 0 .1rem; border-radius: .35rem; color: var(--bs-secondary-color);
  /* wajib: AppStack memberi padding .1rem .8rem pada .nav-icon → SVG di dalamnya
     terhimpit jadi ~8px. Nolkan padding agar ikon tampil dengan ukuran penuh. */
  padding: 0;
}
.navbar .nav-icon:hover { color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
/* Ikon topbar = Lucide (SVG) → ukuran proporsional & goresan lebih halus.
   Atribut width/height dari Lucide (24px) ditimpa CSS; sesuaikan di sini bila
   ingin lebih besar/kecil. */
.navbar .nav-icon svg { width: 19px; height: 19px; flex: 0 0 auto; stroke-width: 1.8; display: block; }
.navbar .dropdown-menu svg { width: 15px; height: 15px; flex: 0 0 auto; stroke-width: 1.9; }
.np-nav-user { display: inline-flex; align-items: center; gap: .5rem; }

/* Ikon tema: tampilkan bulan di mode terang, matahari di mode gelap */
html[data-bs-theme="dark"] .np-ico-gelap { display: none; }
html:not([data-bs-theme="dark"]) .np-ico-terang { display: none; }

/* Overlay sidebar (layar kecil) */
.np-sidebar-overlay {
  position: fixed; inset: 0; z-index: 1035;
  background: rgba(15, 23, 42, .5);
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.np-sidebar-overlay.show { opacity: 1; visibility: visible; }

/* Submenu sidebar */
.sidebar-dropdown .sidebar-link { padding-left: 2.75rem; font-size: .84rem; }
.sidebar-nav .sidebar-item { margin: 1px 0; }

/* Judul halaman (partials/page-title.ejs) */
.np-page-head { margin-bottom: 1.25rem; }
.np-page-head .page-title { font-size: 1.45rem; font-weight: 600; margin: 0; color: var(--bs-heading-color); }

/* Kartu sidebar CTA bawaan template tidak dipakai */
.sidebar-cta { display: none; }

/* Produk/CTA bawaan Theme Builder AppStack: sembunyikan tautan dokumentasi */
.settings-toggle-option[href*="docs-"] { display: none; }

@media (max-width: 991.98px) {
  .content { padding: 1rem; }
  .navbar.navbar-bg { padding: .5rem 1rem; }
  .np-page-head .page-title { font-size: 1.2rem; }
}

/* ---------- 6. MODAL (dialog) ----------
   AppStack (bootlab) menyesuaikan beberapa bagian modal Bootstrap sehingga terasa
   "aneh" di aplikasi ini:
     • `.modal-dialog-scrollable` dibuat setinggi layar → dialog kecil pun melar
       penuh (banyak ruang kosong);
     • tidak ada gaya untuk tombol tutup gaya lama (`.close`) → tampil sebagai
       tombol bawaan browser (kotak berbingkai);
     • padding header/body/footer lebih rapat, dan `justify-content` header bukan
       `space-between` (karena tombol tutupnya memang dibuat absolut).
   Bagian ini merapikannya. Tombol tutup sekarang memakai `.btn-close`
   (lihat views: `<button type="button" class="btn-close" data-bs-dismiss="modal">`). */

/* Dialog tanpa kelas ukuran: lebar wajar (modal-sm/lg/xl tetap dari app.css) */
.modal-dialog:not(.modal-sm):not(.modal-lg):not(.modal-xl):not(.modal-xxl) {
  --bs-modal-width: 520px;
}

/* Jangan paksa setinggi layar; cukup batasi tinggi maksimal lalu isi yang gulir */
.modal-dialog-scrollable { height: auto; }
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 4rem); }

/* Dialog selalu di posisi akhir animasi (translateY(0)); kalau tidak, dialog
   bisa tampak "tergeser ke atas" saat transisi tidak sempat berjalan
   (mis. tab tidak aktif / prefers-reduced-motion). */
.modal.show .modal-dialog { transform: none; }

/* Permukaan dialog mengikuti AppStack (`--bs-modal-bg` = `--bs-secondary-bg`:
   putih di mode terang, navy gelap di mode gelap) — tidak perlu ditimpa. */

.modal-content {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.55rem;
  box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.18);
}
html[data-bs-theme="dark"] .modal-content { box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.45); }

/* Header: padding kanan KECIL — tombol tutup (`btn-close`) ada di dalam aliran
   normal (Bootstrap: `margin-left: auto`), bukan absolut (yang absolut itu
   `.alert-dismissible .btn-close`). Karena padding bawaan tombol (.5rem) di-
   batalkan margin negatif Bootstrap (-.5rem), jarak sisi kanan ikon ke tepi
   dialog = **padding-right header**. Jadi 3.5rem membuat ikon X melayang 56px
   dari tepi (keluhan: "terlalu jauh"). Nilai sekarang ±14px. */
.modal-header {
  padding: 1rem 0.875rem 1rem 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.modal-title { font-size: 1.0625rem; font-weight: 600; }
.modal-body { padding: 1.25rem; }
.modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--bs-border-color);
  gap: 0.5rem;
}

/* Tombol tutup: area sentuh tetap nyaman, jarak ke tepi tetap rapat */
@media (max-width: 575.98px) {
  .modal-header { padding-right: 0.75rem; }
  .modal-fullscreen-sm-down .modal-content { border: 0; border-radius: 0; box-shadow: none; }
  .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1rem); }
}

/* ---------- CETAK (kuitansi, buku acara, laporan) ---------- */
@media print {
  .sidebar, .navbar, .footer, .np-impersonasi, .np-cetak-sembunyi { display: none !important; }
  .main { margin: 0 !important; }
  .content { padding: 0 !important; }
  .card { border: 0 !important; box-shadow: none !important; }
  a[href]:after { content: none !important; }
}