/* ============================================================================
   Anglocita CMS — lapisan tema Sneat
   ----------------------------------------------------------------------------
   Dipakai oleh SELURUH CMS, yaitu dua shell yang sama-sama memakai template
   Sneat (Bootstrap 5):

     panel admin        resources/views/layouts/admin.blade.php      21 halaman
     dashboard customer resources/views/layouts/dashboard.blade.php  11 halaman

   Keduanya memberi `class="cms-sneat"` pada <body>, dan SEMUA aturan di file
   ini di-scope ke `body.cms-sneat`. Itulah satu-satunya penanda yang
   menghubungkan file ini dengan sebuah halaman — jadi kalau nanti ada shell CMS
   baru, cukup tambahkan class itu.

   Isi halamannya sendiri masih ditulis dengan design system lama (class `ui-*`,
   `admin-*`, `cust-*`, `badge-*`) plus ratusan utility Tailwind. Menulis ulang
   semuanya berarti menyentuh ~10.700 baris Blade yang sebagian besar berupa
   template string di dalam JavaScript — risikonya jauh lebih besar daripada
   nilainya.

   Jadi file ini melakukan tiga hal, dan HANYA file ini yang boleh diedit saat
   menyesuaikan tampilan CMS:

     1. Mewarnai ulang Sneat dari ungu bawaannya (#696cff) ke maroon Anglocita
        (#A84052).
     2. Memetakan token lama (`--ui-*` milik app-ui.css, `--a-*` milik
        admin.css) ke nilai Sneat. Karena ratusan inline style di view memakai
        `style="color:var(--ui-text)"`, satu pemetaan di sini otomatis
        menyeragamkan semuanya tanpa menyentuh Blade.
     3. Menyelaraskan komponen lama (kartu, tombol, tabel, badge, modal, toast)
        ke bahasa visual Sneat: radius 0.375rem, shadow halus, border #e4e6e8.

   URUTAN MUAT (lihat kedua layout) — file ini WAJIB paling akhir:
     sneat/vendor/css/core.css
       -> Tailwind CDN (menyuntikkan <style> di ujung <head>)
       -> style.css, app-ui.css, cms-refine.css
          (+ admin.css, hanya di panel admin)
       -> select2-theme.css
       -> cms-sneat.css   <-- di sini
       -> @yield('styles') per halaman  <-- CATATAN: ini SETELAH file ini, jadi
          CSS per halaman menang. Lihat admin-dashboard.css.

   Nilai acuan Sneat (dari core.css, jangan diubah sembarangan):
     body bg #f5f5f9 | paper #fff      | border #e4e6e8
     text   #646e78 | heading #384551  | muted  #a7acb2
     radius 0.375rem | font-size 0.9375rem | padding kartu 1.5rem
   ========================================================================== */

/* ============================================================================
   1. WARNA PRIMARY — ungu Sneat  ->  maroon Anglocita
   ----------------------------------------------------------------------------
   Sneat hampir seluruhnya digerakkan CSS variable, jadi mengganti
   `--bs-primary` sudah menular ke menu aktif, .text-primary, .bg-primary,
   .bg-label-*, form-check, progress, dan seterusnya.

   Pengecualian: .btn-primary dan .btn-outline-primary menulis #696cff
   LANGSUNG ke variabel --bs-btn-*, sehingga keduanya harus ditulis ulang.
   Kalau nanti upgrade Sneat, periksa lagi apakah masih hanya dua ini.

   Catatan: --bs-* harus berada di :root, bukan di body. helpers.js membaca
   `getComputedStyle(document.documentElement)`, jadi variabel yang hanya
   didefinisikan di body tidak akan terlihat olehnya.
   ========================================================================== */
:root,
[data-bs-theme='light'] {
    --bs-primary: #a84052;
    --bs-primary-rgb: 168, 64, 82;
    --bs-primary-text-emphasis: #5f2530;
    --bs-primary-bg-subtle: #f7e9ec;
    --bs-primary-border-subtle: #eccdd3;

    /* Dipakai .link-primary dan tautan bawaan Bootstrap */
    --bs-link-color: #a84052;
    --bs-link-color-rgb: 168, 64, 82;
    --bs-link-hover-color: #8c3444;
    --bs-link-hover-color-rgb: 140, 52, 68;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #a84052;
    --bs-btn-border-color: #a84052;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8c3444;
    --bs-btn-hover-border-color: #8c3444;
    --bs-btn-focus-shadow-rgb: 168, 64, 82;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #742b39;
    --bs-btn-active-border-color: #742b39;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #a84052;
    --bs-btn-disabled-border-color: #a84052;
}

.btn-outline-primary {
    --bs-btn-color: #a84052;
    --bs-btn-border-color: #a84052;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #a84052;
    --bs-btn-hover-border-color: #a84052;
    --bs-btn-focus-shadow-rgb: 168, 64, 82;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #a84052;
    --bs-btn-active-border-color: #a84052;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #a84052;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #a84052;
    --bs-gradient: none;
}

/* ============================================================================
   2. TOKEN LAMA  ->  NILAI SNEAT
   ----------------------------------------------------------------------------
   Di-scope ke body.cms-sneat, bukan :root, karena app-ui.css juga dimuat oleh
   halaman publik (landing, katalog, undangan). Token di sana harus tetap
   memakai nilai aslinya; hanya halaman CMS yang ikut palet Sneat.
   ========================================================================== */
body.cms-sneat {
    /* --- token app-ui.css --- */
    --ui-brand: #a84052;
    --ui-brand-600: #8c3444;
    --ui-brand-700: #742b39;
    --ui-brand-50: #fdf7f8;
    --ui-brand-100: #f7e9ec;
    --ui-brand-200: #eccdd3;
    --ui-brand-300: #dca7b1;

    --ui-bg: #f5f5f9;
    --ui-surface: #fff;
    --ui-surface-2: #fafafc;
    --ui-border: #e4e6e8;
    --ui-border-strong: #d8dbde;
    --ui-text: #384551; /* heading Sneat */
    --ui-text-soft: #646e78; /* body Sneat */
    --ui-muted: #a7acb2; /* secondary Sneat */

    --ui-ok: #58a700;
    --ui-ok-bg: #eefbe4;
    --ui-warn: #b37800;
    --ui-warn-bg: #fff5e0;
    --ui-info: #0797b3;
    --ui-info-bg: #e2f8fd;
    --ui-danger: #e03d1c;
    --ui-danger-bg: #ffe9e4;

    /* Sneat memakai satu radius untuk hampir semua permukaan */
    --ui-r-sm: 0.375rem;
    --ui-r: 0.375rem;
    --ui-r-lg: 0.5rem;
    --ui-r-pill: 0.375rem;

    --ui-sh-xs: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.06);
    --ui-sh-sm: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
    --ui-sh-md: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
    --ui-sh-lg: 0 0.25rem 0.75rem 0 rgba(34, 48, 62, 0.14);
    --ui-ring: 0 0 0 0.15rem rgba(168, 64, 82, 0.16);

    /* --- token admin.css --- */
    --a-bg: #f5f5f9;
    --a-surface: #fff;
    --a-border: #e4e6e8;
    --a-border-strong: #d8dbde;
    --a-text: #384551;
    --a-text-soft: #646e78;
    --a-muted: #a7acb2;
    --a-accent: #a84052;
    --a-accent-soft: #f7e9ec;
    --a-accent-softer: #fdf7f8;
    --a-accent-strong: #8c3444;
    --a-radius: 0.375rem;
    --a-radius-sm: 0.375rem;
    --a-shadow-sm: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
    --a-shadow-md: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.1);
    --a-shadow-lg: 0 0.25rem 0.75rem 0 rgba(34, 48, 62, 0.14);
}

/* Kedua shell sudah menyetel font & latar sendiri: admin.css lewat
   `body.admin-body`, app-ui.css lewat `.cust-body`. Keduanya bernilai (0,1,1)
   dan (0,1,0) — di bawah atau setara dengan `body.cms-sneat` (0,1,1) — jadi
   aturan ini menang berkat urutan muat. Itulah sebabnya cms-sneat.css harus
   paling bawah. */
body.cms-sneat {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    letter-spacing: normal;
}

/* Playfair tetap dipakai untuk aksen brand, bukan untuk UI panel. */
body.cms-sneat .ui-display,
body.cms-sneat .admin-serif,
body.cms-sneat .font-serif {
    font-family: 'Playfair Display', Georgia, serif;
}

/* ============================================================================
   3. TABRAKAN BOOTSTRAP  <->  TAILWIND
   ----------------------------------------------------------------------------
   Keduanya dimuat bersamaan (lihat catatan di kepala file). Daftar di bawah
   adalah tabrakan yang benar-benar teramati, bukan dugaan.
   ========================================================================== */

/* `.border` ada di dua framework. Versi Bootstrap memakai shorthand
   `border: ... !important` sehingga ia juga memaksa border-color dan
   mengalahkan `border-gray-100` di sebelahnya. View admin memakai pasangan
   `class="border border-gray-100"` di 31 tempat, jadi arti Tailwind yang
   dipertahankan: `.border` hanya mengatur lebar. */
body.cms-sneat .border {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--bs-border-color) !important;
}
/* Karena `.border` di atas memaksa warna, utility warna border Tailwind yang
   membawa MAKNA (penanda terpilih / hover pada pemilih template) harus ikut
   dipaksa, kalau tidak umpan balik pilihan hilang sama sekali. Warna abu-abu
   sengaja dibiarkan seragam mengikuti border Sneat. */
body.cms-sneat .border-pink-200 { border-color: #eccdd3 !important; }
body.cms-sneat .border-pink-300,
body.cms-sneat .hover\:border-pink-300:hover { border-color: #dca7b1 !important; }
body.cms-sneat .hover\:border-pink-400:hover { border-color: #c2687a !important; }
body.cms-sneat .has-\[\:checked\]\:border-pink-500:has(:checked) { border-color: #a84052 !important; }
body.cms-sneat .border-0 {
    border-width: 0 !important;
}
body.cms-sneat .border-2 {
    border-width: 2px !important;
    border-style: solid !important;
}
body.cms-sneat .border-b {
    border-width: 0 0 1px 0 !important;
    border-style: solid !important;
}

/* Preflight Tailwind menyetel `background-color: transparent` untuk
   `[type='button']`. Selektor atribut punya spesifisitas yang sama dengan
   `.btn-primary`, dan Tailwind disuntikkan setelah core.css, jadi tombol
   Bootstrap ber-`type="button"` kehilangan warnanya. Kembalikan. */
body.cms-sneat .btn {
    background-color: var(--bs-btn-bg);
    background-image: var(--bs-gradient);
}
body.cms-sneat .btn:hover {
    background-color: var(--bs-btn-hover-bg);
}
body.cms-sneat .btn:disabled,
body.cms-sneat .btn.disabled {
    background-color: var(--bs-btn-disabled-bg);
}

/* Preflight Tailwind menghapus ukuran heading (`h1 { font-size: inherit }`),
   sedangkan Sneat mengandalkan h1–h6 mentah di beberapa komponen.

   Bentuk selektornya penting. `body:where(.cms-sneat) h1` bernilai (0,0,2):
   dua nama elemen, karena `:where()` tidak menyumbang spesifisitas. Itu tepat
   satu tingkat di atas preflight (`h1` = 0,0,1) sehingga ukuran bawaan kembali,
   tetapi masih KALAH dari satu class utility (`text-xl` = 0,1,0) sehingga view
   yang sudah menentukan ukurannya sendiri tetap dihormati.

   Jangan diubah menjadi `body.cms-sneat h1` — itu (0,1,1) dan akan menimpa
   `text-xl`/`font-bold` di seluruh view (judul 20px pernah membengkak jadi 30px
   karena ini). */
body:where(.cms-sneat) h1 { font-size: 2.125rem; font-weight: 500; }
body:where(.cms-sneat) h2 { font-size: 1.75rem; font-weight: 500; }
body:where(.cms-sneat) h3 { font-size: 1.5rem; font-weight: 500; }
body:where(.cms-sneat) h4 { font-size: 1.3125rem; font-weight: 500; }
body:where(.cms-sneat) h5 { font-size: 1.125rem; font-weight: 500; }
body:where(.cms-sneat) h6 { font-size: 0.9375rem; font-weight: 500; }
/* Catatan: `color` SENGAJA tidak disetel di sini. Reboot Bootstrap sudah
   memberi `h1..h6 { color: var(--bs-heading-color) }` pada (0,0,1), dan
   preflight Tailwind tidak menyentuh color — jadi menuliskannya ulang di sini
   hanya menaikkan spesifisitas jadi (0,0,2) tanpa mengubah hasil, sekaligus
   mempersulit permukaan gelap mengembalikan warna terangnya. Lihat blok
   "PERMUKAAN GELAP" di bawah. */
body:where(.cms-sneat) :is(h1, h2, h3, h4, h5, h6) {
    line-height: 1.375;
}

/* ---------- PERMUKAAN GELAP ----------
   Heading mendapat `color` LANGSUNG dari reboot Bootstrap, dan aturan langsung
   selalu mengalahkan warna yang DIWARISI dari induk — seberapa pun rendah
   spesifisitasnya. Akibatnya setiap heading di atas permukaan gelap jadi
   #384551 dan hampir tak terbaca. Dua tempat yang kena:

     dashboard/index.blade.php:12        <h1 class="ui-hero-title"> di .ui-hero
     dashboard/order-detail.blade.php:205 <h2> di kartu gradien .text-white

   Sebelum migrasi ini tidak muncul karena Bootstrap belum ikut dimuat.

   Seluruh selektor dibungkus `:where()` sehingga spesifisitasnya cuma (0,0,1)
   — dari `body`. Itu disengaja:
     - cukup untuk mengalahkan reboot (`h1` = 0,0,1) karena file ini dimuat
       setelah core.css;
     - TETAP KALAH dari satu class utility, jadi warna yang memang diniatkan
       view (mis. `text-pink-100` untuk baris redup di kartu gradien) tidak
       ikut dipaksa jadi putih. */
body:where(.cms-sneat) :where(.text-white, .ui-hero) :where(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

/* Reboot Bootstrap memberi list padding-left 2rem; preflight Tailwind
   menghapusnya. Di dalam dropdown/menu Sneat, versi Bootstrap yang benar. */
body.cms-sneat .menu-inner,
body.cms-sneat .dropdown-menu,
body.cms-sneat .navbar-nav {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

/* ============================================================================
   4. SHELL — brand, menu, navbar, footer
   ========================================================================== */

/* Sidebar Sneat berlatar putih, jadi logo yang dipakai adalah versi gelap
   (logo_vertical.png), bukan logo_vertical_white.png milik shell lama. */
.app-brand.demo {
    height: 64px;
    margin-top: 0.75rem;
    padding-inline: 1.5rem 1rem;
}
.app-brand-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    overflow: hidden;
}
.app-brand-logo-img {
    height: 26px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
/* Cadangan bila file logo hilang: tanda hati + wordmark. */
.app-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 0.375rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: #fff;
    font-size: 15px;
}
.app-brand-name {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bs-heading-color);
    line-height: 1.1;
}
.app-brand-sub {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Menu ditulis oleh renderAdminSidebar() di public/assets/js/config.js.
   Ikonnya Font Awesome, bukan Boxicons, karena FA sudah dipakai di ratusan
   tempat pada view — memuat Boxicons hanya untuk sidebar tidak sepadan. */
.menu-icon.fas,
.menu-icon.far,
.menu-icon.fab {
    width: 1.5rem;
    font-size: 1.125rem;
    text-align: center;
    line-height: 1;
    margin-inline-end: 0.5rem;
    flex: none;
}
.menu-header {
    padding: 0.75rem 1rem 0.375rem;
}

/* Judul halaman di navbar (menggantikan .admin-topbar h1 shell lama). */
.navbar-page-title {
    min-width: 0;
}
.navbar-page-title .pt-title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navbar-page-title .pt-crumb {
    display: block;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Blok identitas user + logout, diisi renderAdminSidebar(). */
.admin-sidebar-user .au-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    line-height: 1.2;
}
.admin-sidebar-user .au-role {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}
.avatar-initial-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-weight: 600;
    font-size: 0.9375rem;
}

.content-footer .footer-container {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

/* Hero sambutan di /dashboard (`.ui-hero` di app-ui.css). Gradien brand-nya
   SENGAJA dipertahankan: ini aksen brand, bukan chrome UI, dan Sneat sendiri
   memakai kartu sambutan berwarna di dashboard-nya. Yang diselaraskan hanya
   radius & padding supaya sebaris dengan kartu di bawahnya. */
body.cms-sneat .ui-hero {
    border-radius: 0.375rem;
    padding: 1.5rem;
}
body.cms-sneat .ui-hero-title {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 600;
}
body.cms-sneat .ui-hero-sub {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Warna teks hero. Judulnya sudah ditangani blok "PERMUKAAN GELAP" di seksi 3;
   dua baris pendukung ini diredupkan seperti desain aslinya. `.ui-kicker`
   perlu dinyatakan ulang karena di seksi 5 ia disetel ke --bs-secondary-color
   (abu) yang tidak terbaca di atas gradien. */
body.cms-sneat .ui-hero {
    color: #fff;
}
body.cms-sneat .ui-hero .ui-hero-sub,
body.cms-sneat .ui-hero .ui-kicker {
    color: rgba(255, 255, 255, 0.82);
}

/* Dashboard customer: batas lebar konten 1180px dari desain lama dipertahankan.
   Halaman customer isinya jauh lebih sedikit kolom daripada panel admin, dan
   tanpa batas ini baris teks jadi terlalu panjang di monitor lebar. Panel admin
   sengaja TIDAK diberi batas karena tabelnya butuh seluruh lebar.

   `:not([class*="max-w-"])` itu WAJIB. Sebagian halaman menyetel lebarnya
   sendiri lewat @section('content-class'): max-w-3xl di notifications, max-w-4xl
   di order & order-detail, max-w-5xl di analytics/checkin/guests/send-kit/voice,
   max-w-none di editor. Utility Tailwind itu bernilai (0,1,0) — tanpa penjaga
   ini, aturan di bawah (0,2,1) akan menimpa semuanya dan setiap halaman
   melebar jadi 1180px. Dengan `:not()`, aturan ini hanya jadi nilai bawaan
   ketika halaman TIDAK menentukan lebarnya sendiri. */
body.cms-sneat .cust-content:not([class*="max-w-"]) {
    max-width: 1180px;
}

/* Editor undangan memakai content-class="max-w-none !p-0" untuk tata letak dua
   panel setinggi layar. `.container-p-y` milik Sneat memakai !important dengan
   spesifisitas (0,3,0), jadi ia mengalahkan `.\!p-0` (0,1,0) dari Tailwind dan
   padding nol-nya tidak pernah kena. Dinyatakan ulang di sini pada (0,3,1). */
body.cms-sneat .cust-content.\!p-0,
body.cms-sneat .admin-content.\!p-0 {
    padding: 0 !important;
}

/* Playfair dipakai untuk judul halaman di dashboard customer — satu-satunya
   aksen brand yang dipertahankan dari shell lama (.cust-topbar h1). */
body.cms-sneat.cust-body .navbar-page-title .pt-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: normal;
}

/* ============================================================================
   5. JEMBATAN KOMPONEN — `ui-*` dalam bahasa visual Sneat
   ========================================================================== */

/* ---------- Kartu ---------- */
body.cms-sneat .ui-card {
    background: var(--bs-paper-bg, #fff);
    border: 0;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
}
body.cms-sneat .ui-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}
body.cms-sneat .ui-card-body {
    padding: 1.5rem;
}
body.cms-sneat .ui-card-hover {
    transition: box-shadow 0.2s ease;
}
body.cms-sneat .ui-card-hover:hover {
    transform: none;
    box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.12);
}

/* `.a-card` / `.a-card-pad` adalah kartu generasi admin.css, masih dipakai di
   invitation-detail (daftar ucapan). Disamakan dengan `.ui-card` di atas supaya
   satu halaman tidak memuat dua dialek kartu. */
body.cms-sneat .a-card {
    background: var(--bs-paper-bg, #fff);
    border: 0;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
}
body.cms-sneat .a-card-pad {
    padding: 1.5rem;
}

/* ---------- Kartu statistik ---------- */
body.cms-sneat .ui-stat {
    background: #fff;
    border: 0;
    border-radius: 0.375rem;
    padding: 1.5rem;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
    transition: box-shadow 0.2s ease;
}
body.cms-sneat .ui-stat:hover {
    transform: none;
    box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.12);
}
body.cms-sneat .ui-stat-ic {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.375rem;
    font-size: 1.125rem;
}
body.cms-sneat .ui-stat-ic.brand { background: #f7e9ec; color: #a84052; }
body.cms-sneat .ui-stat-ic.ok    { background: #eefbe4; color: #58a700; }
body.cms-sneat .ui-stat-ic.info  { background: #e2f8fd; color: #0797b3; }
body.cms-sneat .ui-stat-ic.warn  { background: #fff5e0; color: #b37800; }
body.cms-sneat .ui-stat-ic.violet { background: #ece9fd; color: #5b4bd0; }
body.cms-sneat .ui-stat-val {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    letter-spacing: normal;
}
body.cms-sneat .ui-stat-label {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}
body.cms-sneat .ui-trend {
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.45rem;
}
body.cms-sneat .ui-trend.up   { background: #eefbe4; color: #58a700; }
body.cms-sneat .ui-trend.down { background: #ffe9e4; color: #e03d1c; }
body.cms-sneat .ui-trend.flat { background: #eff0f2; color: var(--bs-secondary-color); }

/* ---------- Tombol ---------- */
body.cms-sneat .ui-btn {
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 400;
    padding: 0.543rem 1.25rem;
    line-height: 1.375;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.cms-sneat .ui-btn:hover {
    transform: none;
    box-shadow: none;
}
body.cms-sneat .ui-btn-primary {
    background: #a84052;
    border-color: #a84052;
    color: #fff;
}
body.cms-sneat .ui-btn-primary:hover {
    background: #8c3444;
    border-color: #8c3444;
}
body.cms-sneat .ui-btn-soft {
    background: color-mix(in sRGB, #fff 84%, #a84052);
    color: #a84052;
    border-color: transparent;
}
body.cms-sneat .ui-btn-soft:hover {
    background: #a84052;
    color: #fff;
}
body.cms-sneat .ui-btn-ghost {
    background: transparent;
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
body.cms-sneat .ui-btn-ghost:hover {
    background: rgba(34, 48, 62, 0.04);
    border-color: var(--bs-border-color);
    color: var(--bs-heading-color);
}
body.cms-sneat .ui-btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
}
body.cms-sneat .ui-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border-color: transparent;
    background: transparent;
    color: var(--bs-body-color);
}
body.cms-sneat .ui-icon-btn:hover {
    background: var(--bs-primary-bg-subtle);
    border-color: transparent;
    color: var(--bs-primary);
}

/* Tombol legacy dari style.css/admin.css */
body.cms-sneat .btn-pink {
    background: #a84052;
    color: #fff;
    border-radius: 0.375rem;
    padding: 0.543rem 1.25rem;
    font-weight: 400;
    font-size: 0.9375rem;
    box-shadow: none;
}
body.cms-sneat .btn-pink:hover {
    background: #8c3444;
    transform: none;
    box-shadow: none;
}
body.cms-sneat .btn-outline-pink {
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    border-radius: 0.375rem;
    padding: 0.543rem 1.25rem;
    font-weight: 400;
    font-size: 0.9375rem;
    background: #fff;
}
body.cms-sneat .btn-outline-pink:hover {
    border-color: #a84052;
    color: #a84052;
    background: #fdf7f8;
}

/* `.a-btn-ghost` — 14 pemakaian (tombol Kembali di header halaman, tombol
   upload di samping input, Import CSV / Paste di kirim-kit). Dipetakan ke
   `.ui-btn-ghost` + ukuran `.ui-btn-sm`, karena di semua pemakaiannya ia
   berdampingan dengan tombol `ui-btn-sm`.

   Di-scope ke body.cms-sneat dengan sengaja: `.a-btn-ghost` juga dipakai di
   resources/views/frontend/pesan.blade.php, halaman publik yang tidak memuat
   admin.css sama sekali, jadi jangan ditarik ke lingkup global dari sini. */
body.cms-sneat .a-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.375;
    background: transparent;
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.cms-sneat .a-btn-ghost:hover {
    background: rgba(34, 48, 62, 0.04);
    border-color: var(--bs-border-color);
    color: var(--bs-heading-color);
}

/* ---------- Thumbnail template + overlay pratinjau ----------
   Dipakai di admin/templates dan pemilih template di create-invitation. */
body.cms-sneat .tpl-thumb {
    background: var(--bs-primary-bg-subtle);
}
body.cms-sneat .tpl-thumb-empty {
    color: var(--bs-primary);
}
body.cms-sneat .tpl-preview-overlay {
    background: rgba(34, 48, 62, 0.5);
    backdrop-filter: blur(2px);
}
body.cms-sneat .tpl-preview-btn {
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 400;
    padding: 0.25rem 0.75rem;
    color: var(--bs-primary);
    box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
}
body.cms-sneat .tpl-preview-btn:hover {
    background: var(--bs-primary);
    color: #fff;
}

/* ---------- Input ---------- */
/* Catatan: JANGAN memasukkan `.dash-field` ke sini. Di admin-dashboard.css
   `.dash-field` adalah pembungkus flex (label + kontrol), bukan input —
   memberinya border & padding membuat filter dashboard terkotak ganda dan
   memampatkan Select2 di dalamnya. */
body.cms-sneat .ui-input,
body.cms-sneat .input-pink {
    border: 1px solid color-mix(in sRGB, #22303e 22%, #fff);
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.375;
    padding: 0.543rem 0.9375rem;
    color: var(--bs-heading-color);
    background: transparent;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
body.cms-sneat .ui-input:focus,
body.cms-sneat .input-pink:focus {
    outline: 0;
    border-color: #a84052;
    box-shadow: 0 0 0 0.15rem rgba(168, 64, 82, 0.16);
}
/* <select> mentah di beberapa halaman masih memakai panah bawaan browser,
   sehingga terlihat berbeda dari filter yang di-inject AdminTable (`.form-select`).
   Blok ini memberi mereka panah Sneat yang sama. SVG-nya disalin dari
   `--bs-form-select-bg-img` di core.css. */
body.cms-sneat select.ui-input,
body.cms-sneat select.input-pink {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.625rem;
    background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"%3e%3cpath d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="%2322303e" fill-opacity="0.9"/%3e%3c/svg%3e');
    background-repeat: no-repeat;
    background-position: right 0.9375rem center;
    background-size: 22px 24px;
}

body.cms-sneat .ui-label {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--bs-heading-color);
    margin-bottom: 0.25rem;
}
body.cms-sneat .ui-search input {
    height: auto;
    border: 1px solid color-mix(in sRGB, #22303e 22%, #fff);
    border-radius: 0.375rem;
    background: transparent;
    font-size: 0.9375rem;
    padding: 0.543rem 0.9375rem 0.543rem 2.35rem;
}
body.cms-sneat .ui-search input:focus {
    border-color: #a84052;
    box-shadow: 0 0 0 0.15rem rgba(168, 64, 82, 0.16);
    background: transparent;
}
body.cms-sneat .ui-search i {
    left: 0.85rem;
    color: var(--bs-secondary-color);
}

/* Search di navbar mengikuti gaya Sneat: tanpa border, menyatu dengan bar. */
.layout-navbar .ui-search input {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding-left: 2.1rem;
}
.layout-navbar .ui-search input:focus {
    border: 0;
    box-shadow: none;
}

/* ---------- Chip & badge ----------
   Sneat memakai gaya "label": latar tersaput 84% putih, teks berwarna penuh,
   radius 0.25rem, tanpa titik penanda. app-ui.css menambahkan titik lewat
   ::before — dimatikan di sini supaya konsisten dengan Sneat. */
body.cms-sneat .ui-chip {
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
}
body.cms-sneat .ui-chip-neutral { background: #eff0f2; color: var(--bs-body-color); }
body.cms-sneat .ui-chip-brand { background: #f7e9ec; color: #a84052; }

body.cms-sneat .badge {
    display: inline-block;
    padding: 0.4235em 0.77em;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    border: 0;
    gap: 0;
}
body.cms-sneat .badge::before {
    content: none;
}

/* statusBadge() di config.js menghasilkan `.badge.badge-<status>`.
   Warna mengikuti palet semantik Sneat. */
body.cms-sneat .badge-pending     { background: #fff5e0; color: #b37800; }
body.cms-sneat .badge-paid        { background: #e2f8fd; color: #0797b3; }
body.cms-sneat .badge-in_progress { background: #f7e9ec; color: #a84052; }
body.cms-sneat .badge-review      { background: #ece9fd; color: #5b4bd0; }
body.cms-sneat .badge-done        { background: #eefbe4; color: #58a700; }
body.cms-sneat .badge-cancelled   { background: #ffe9e4; color: #e03d1c; }
/* Buglist: in_progress & done berbagi warna dengan status pesanan di atas. */
body.cms-sneat .badge-open        { background: #ffe9e4; color: #e03d1c; }
body.cms-sneat .badge-need_test   { background: #fff5e0; color: #b37800; }
/* Tingkat keparahan bug */
body.cms-sneat .badge-low      { background: #eff0f2; color: #646e78; }
body.cms-sneat .badge-normal   { background: #e2f8fd; color: #0797b3; }
body.cms-sneat .badge-high     { background: #fff5e0; color: #b37800; }
body.cms-sneat .badge-critical { background: #ffe4e4; color: #c0261a; }

/* ---------- Tabel ---------- */
/* Tabel admin padat: beberapa tabel punya 8 kolom (mis. daftar pesanan).
   Dengan ukuran font body Sneat (0.9375rem) dan padding 1.25rem, isi sel
   membungkus dan tinggi baris membengkak jadi ~71px. Skala di bawah adalah
   varian rapat Sneat: font 0.875rem, padding-x 1rem — muat satu baris tanpa
   perlu scroll horizontal. */
body.cms-sneat .ui-table thead th,
body.cms-sneat table thead th {
    background: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-heading-color);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}
body.cms-sneat .ui-table tbody td,
body.cms-sneat table tbody td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-border-color);
    vertical-align: middle;
}
/* Kolom angka, aksi, dan sel audit tidak boleh terpecah dua baris. */
body.cms-sneat .ui-table td.text-right,
body.cms-sneat .ui-table td.text-center,
body.cms-sneat .ui-table th.text-right,
body.cms-sneat .ui-table th.text-center,
body.cms-sneat .a-audit-name,
body.cms-sneat .a-audit-date {
    white-space: nowrap;
}
body.cms-sneat .ui-table tbody tr:last-child td,
body.cms-sneat table tbody tr:last-child td {
    border-bottom: 0;
}
body.cms-sneat .ui-table tbody tr:hover,
body.cms-sneat table tbody tr:hover {
    background: rgba(34, 48, 62, 0.04);
}
body.cms-sneat .ui-table tbody tr:hover td {
    background: transparent;
}

/* Toolbar filter & pager yang disuntikkan AdminTable (config.js). */
body.cms-sneat .admin-table-toolbar {
    border-bottom: 1px solid var(--bs-border-color);
}
/* Ikon filter kecil sebagai penanda fungsi bar ini. Latarnya dibiarkan putih
   mengikuti permukaan kartu Sneat (versi lama memberinya strip abu). */
body.cms-sneat .admin-table-toolbar::before {
    content: '\f0b0'; /* fa-filter */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    margin-right: 0.125rem;
}
body.cms-sneat .admin-table-pager {
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

/* Sel audit (auditCell() di config.js) */
body.cms-sneat .a-userpill .av {
    border-radius: 50%;
    width: 1.625rem;
    height: 1.625rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-weight: 600;
}
body.cms-sneat .a-audit-name { font-size: 0.875rem; color: var(--bs-heading-color); font-weight: 400; }
body.cms-sneat .a-audit-date { font-size: 0.75rem; color: var(--bs-secondary-color); }
body.cms-sneat .a-audit-empty { color: var(--bs-secondary-color); }

/* ---------- Empty state & skeleton ---------- */
body.cms-sneat .ui-empty {
    padding: 3rem 1.25rem;
}
body.cms-sneat .ui-empty-ic {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.375rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: 1.375rem;
}
body.cms-sneat .ui-empty-title { font-size: 1rem; font-weight: 500; color: var(--bs-heading-color); }
body.cms-sneat .ui-empty-sub { font-size: 0.875rem; color: var(--bs-secondary-color); }
body.cms-sneat .ui-skel { background: #eff0f2; border-radius: 0.375rem; }
body.cms-sneat .ui-skel-card { border-radius: 0.375rem; }

/* ---------- Alert, segment, progress, avatar ---------- */
body.cms-sneat .ui-alert {
    border-radius: 0.375rem;
    border: 0;
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
}
body.cms-sneat .ui-alert-info { background: #e2f8fd; color: #0797b3; }
body.cms-sneat .ui-alert-ok   { background: #eefbe4; color: #58a700; }
body.cms-sneat .ui-alert-warn { background: #fff5e0; color: #b37800; }

body.cms-sneat .ui-segment {
    background: #eff0f2;
    border-radius: 0.375rem;
    padding: 0.25rem;
    gap: 0.25rem;
}
body.cms-sneat .ui-segment button {
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 400;
    padding: 0.375rem 0.875rem;
}
body.cms-sneat .ui-segment button.active {
    background: #fff;
    color: var(--bs-primary);
    box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
}
body.cms-sneat .tab-btn {
    border-radius: 0.375rem !important;
    border: 1px solid var(--bs-border-color) !important;
    font-weight: 400;
}

body.cms-sneat .ui-progress {
    height: 0.5rem;
    background: #eff0f2;
    border-radius: 0.375rem;
}
body.cms-sneat .ui-progress > span {
    background: var(--bs-primary);
}
body.cms-sneat .ui-avatar {
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-weight: 600;
    font-size: 0.875rem;
}

/* ---------- Judul & teks ---------- */
body.cms-sneat .ui-kicker {
    color: var(--bs-secondary-color);
    letter-spacing: 0.09em;
    font-weight: 500;
}
body.cms-sneat .ui-h1 {
    font-family: var(--bs-body-font-family);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--bs-heading-color);
    letter-spacing: normal;
}
body.cms-sneat .ui-section-title {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--bs-heading-color);
    letter-spacing: normal;
}
body.cms-sneat .ui-section-title .ic { color: var(--bs-primary); }
body.cms-sneat .ui-link { color: var(--bs-primary); font-size: 0.875rem; font-weight: 400; }
body.cms-sneat .ui-link:hover { color: #8c3444; }

/* ---------- Modal ----------
   Modal dibuka/ditutup dengan `classList.toggle('hidden')`, bukan API modal
   Bootstrap. Jadi yang disesuaikan hanya tampilannya, bukan mekanismenya —
   mengubah mekanisme berarti menyentuh puluhan fungsi JS di 22 view. */
body.cms-sneat .modal-overlay {
    background: rgba(34, 48, 62, 0.5);
    backdrop-filter: blur(2px);
    /* WAJIB dinaikkan. Sneat mengangkat shell-nya jauh ke atas selama <body>
       BELUM ber-class `.modal-open`:

         body:not(.modal-open) .layout-content-navbar .layout-navbar        1075
         .layout-menu-fixed body:not(.modal-open) … .layout-menu            1080

       Itu mekanisme modal Bootstrap: begitu Bootstrap membuka modal, ia
       menambahkan `.modal-open` ke <body> dan kedua aturan berhenti cocok,
       sehingga navbar & sidebar turun ke bawah backdrop.

       Modal di panel ini BUKAN modal Bootstrap — dibuka/ditutup dengan
       `classList.toggle('hidden')` di puluhan fungsi JS pada 21 view. Jadi
       `.modal-open` tidak pernah ditambahkan, dan dengan z-index 50 dari
       style.css hasilnya: navbar tetap terang serta sidebar menyembul di kiri
       sementara sisa halaman meredup.

       Menaikkan angkanya di sini jauh lebih murah daripada menyuntikkan
       toggle `.modal-open` ke setiap fungsi buka/tutup modal. 1090 sudah di
       atas seluruh z-index shell Sneat (tertinggi 1085).

       Dropdown Select2 tidak perlu diurus di sini: applySelect2() di config.js
       menyetel `dropdownParent` ke `.modal-content` terdekat, jadi dropdown
       ikut berada di dalam konteks penumpukan modal. */
    z-index: 1090;
}
body.cms-sneat .modal-content {
    border-radius: 0.375rem;
    border: 0;
    box-shadow: 0 0.25rem 0.75rem 0 rgba(34, 48, 62, 0.14);
    padding: 1.5rem;
}

/* ---------- Toast ---------- */
body.cms-sneat .toast,
.toast {
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.75rem 0 rgba(34, 48, 62, 0.14);
    font-size: 0.9375rem;
    font-weight: 400;
    padding: 0.75rem 1.125rem;
}

/* ---------- Loader ---------- */
body.cms-sneat .loader {
    border-color: var(--bs-primary-bg-subtle);
    border-top-color: var(--bs-primary);
}

/* ---------- Select2 mengikuti .form-control Sneat ----------
   Dibungkus `:where()` supaya spesifisitasnya nol. Dashboard sudah punya
   ukuran Select2 rapat sendiri (`.dash-field .select2-...` di
   admin-dashboard.css) dan itu HARUS tetap menang; tanpa `:where()` aturan
   di bawah lebih spesifik dan membuat teks filter dashboard terpotong. */
:where(body.cms-sneat) .select2-container--default .select2-selection--single {
    border: 1px solid color-mix(in sRGB, #22303e 22%, #fff);
    border-radius: 0.375rem;
    height: auto;
    padding: 0.543rem 0.9375rem;
}
:where(body.cms-sneat) .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bs-heading-color);
    font-size: 0.9375rem;
    line-height: 1.375;
    padding: 0;
}
:where(body.cms-sneat) .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 0.5rem;
}
:where(body.cms-sneat) .select2-container--default.select2-container--focus .select2-selection--single,
:where(body.cms-sneat) .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #a84052;
    box-shadow: 0 0 0 0.15rem rgba(168, 64, 82, 0.16);
}
.select2-dropdown {
    border-color: var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.75rem 0 rgba(34, 48, 62, 0.14);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--bs-primary);
}
.select2-container--default .select2-results__option[aria-selected='true'] {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

/* ============================================================================
   6. NORMALISASI UTILITY TAILWIND WARISAN
   ----------------------------------------------------------------------------
   Halaman-halaman lama (master, templates, landing-content, create-invitation)
   masih memakai `bg-white rounded-2xl border border-gray-100 shadow-sm p-6` dan
   kerabatnya. cms-refine.css sudah memetakan sebagiannya ke token `--ui-*`,
   dan karena token itu kini bernilai Sneat, hasilnya otomatis ikut. Sisanya —
   yang menyangkut bentuk, bukan warna — diselesaikan di sini.
   ========================================================================== */
body.cms-sneat .rounded-2xl,
body.cms-sneat .rounded-xl,
body.cms-sneat .rounded-lg,
body.cms-sneat .rounded-md,
body.cms-sneat .rounded {
    border-radius: 0.375rem !important;
}
/* `rounded-full` tetap bundar — dipakai avatar, titik, dan toggle. */
body.cms-sneat .shadow-sm {
    box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08) !important;
}
body.cms-sneat .bg-white {
    background-color: #fff !important;
}
/* Kartu Tailwind lama: buang border, pakai shadow seperti .card Sneat. */
body.cms-sneat .bg-white.rounded-2xl.border,
body.cms-sneat .bg-white.rounded-xl.border {
    border-color: transparent !important;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08) !important;
}
body.cms-sneat .bg-pink-500 { background-color: #a84052 !important; }
body.cms-sneat .bg-pink-50  { background-color: #f7e9ec !important; }
body.cms-sneat .text-pink-500,
body.cms-sneat .text-pink-600 { color: #a84052 !important; }
body.cms-sneat .text-pink-400 { color: #c2687a !important; }
body.cms-sneat .hover\:bg-pink-600:hover { background-color: #8c3444 !important; }

/* ---------- Kartu langkah bernomor: create-invitation & kirim-kit ----------
   Kedua halaman membangun formulirnya dari 14 blok
   `div.bg-white.rounded-2xl.border.border-gray-100.shadow-sm.p-6`, masing-masing
   dibuka `h2.font-semibold.text-gray-800` dengan chip nomor
   `span.w-7.h-7.bg-pink-500.text-white.rounded-full`.

   Blok ini sebelumnya ada di admin.css. Dipindahkan ke sini supaya tampilan
   ditentukan satu file, tetapi BENTUK selektornya dipertahankan apa adanya:
   enam class (0,6,0) memang diperlukan untuk mengalahkan aturan `.bg-white`,
   `.rounded-2xl`, dan `.border` di atas — yang semuanya memakai !important.
   Karena itu deklarasi di bawah juga tetap memakai !important. */
body.cms-sneat .admin-content .bg-white.rounded-2xl.border.border-gray-100.shadow-sm.p-6 {
    border-radius: 0.375rem !important;
    /* Kartu Sneat tidak berborder; kedalaman dibawa shadow. */
    border-color: transparent !important;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08) !important;
    padding: 1.5rem !important;
    transition: box-shadow 0.2s ease;
}
body.cms-sneat .admin-content .bg-white.rounded-2xl.border.border-gray-100.shadow-sm.p-6:hover {
    box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.12) !important;
    border-color: transparent !important;
}

/* Judul langkah — disamakan dengan `.ui-card-head` + `.ui-section-title`. */
body.cms-sneat .admin-content h2.font-semibold.text-gray-800 {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--bs-heading-color);
    letter-spacing: normal;
    margin-bottom: 1.25rem !important;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Chip nomor langkah: rata (bukan gradien + shadow brand). Ukuran dibiarkan
   mengikuti `w-7 h-7` (1.75rem) dari markup, tidak dipaksa 30px lagi. */
body.cms-sneat .admin-content h2 .bg-pink-500.rounded-full {
    background: var(--bs-primary) !important;
    box-shadow: none;
    font-weight: 500;
    flex-shrink: 0;
}

/* Label & kontrol di dalam kartu langkah mengikuti metrik form Sneat.
   `.input-pink` sudah ditangani di seksi 5; aturan ini menjaring input/select/
   textarea telanjang yang tidak memakai class apa pun. */
body.cms-sneat .admin-content .bg-white.rounded-2xl.border.border-gray-100.shadow-sm.p-6 label {
    font-weight: 400;
    color: var(--bs-heading-color);
}
body.cms-sneat .admin-content .bg-white.rounded-2xl.border.border-gray-100.shadow-sm.p-6 input:not([type=checkbox]):not([type=radio]),
body.cms-sneat .admin-content .bg-white.rounded-2xl.border.border-gray-100.shadow-sm.p-6 select,
body.cms-sneat .admin-content .bg-white.rounded-2xl.border.border-gray-100.shadow-sm.p-6 textarea {
    border: 1px solid color-mix(in sRGB, #22303e 22%, #fff);
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
body.cms-sneat .admin-content .bg-white.rounded-2xl.border.border-gray-100.shadow-sm.p-6 input:not([type=checkbox]):not([type=radio]):focus,
body.cms-sneat .admin-content .bg-white.rounded-2xl.border.border-gray-100.shadow-sm.p-6 select:focus,
body.cms-sneat .admin-content .bg-white.rounded-2xl.border.border-gray-100.shadow-sm.p-6 textarea:focus {
    border-color: #a84052;
    box-shadow: 0 0 0 0.15rem rgba(168, 64, 82, 0.16);
    outline: none;
}

/* ============================================================================
   7. RESPONSIF
   ========================================================================== */
@media (max-width: 767.98px) {
    .navbar-page-title .pt-crumb {
        display: none;
    }
    .navbar-page-title .pt-title {
        font-size: 0.9375rem;
    }
}

/* Blok kode/tabel lebar tidak boleh melebarkan seluruh halaman. Item flex &
   grid punya min-width:auto secara bawaan, jadi kontainer perlu diizinkan
   menyusut dan scroll horizontal diserahkan ke pembungkus tabel. */
body.cms-sneat .container-xxl,
body.cms-sneat .content-wrapper,
body.cms-sneat .card,
body.cms-sneat .ui-card {
    min-width: 0;
}
body.cms-sneat .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}
