/* ============================================================================
   aj-fitur-bisnis.css — halaman "Untuk bisnis" (features-business.html), dalam
   desain baru beranda.

   Kerangka bersama (token, navbar, hero ringkas, seksi isi, penutup, footer)
   dari aj-home4.css; kartu bertekstur (.ajf-key*), bento (.ajf-bento,
   .ajf-tile*), lembar stiker (.ajf-pack*, .ajf-sticker), token palet tiruan
   (--ajf-*) dan bayangan angkat (--ajf-lift) dari aj-fitur.css. Berkas ini:

     1   tata letak: dua kartu selebar baris, tinggi kartu, area bento
     2   bahan bersama tiruan (layar, ikon, ClientAvatar, kapsul)
     3–8 enam tiruan kartu utama: Anggota tim, akses per halaman,
         Ketersediaan, pesan jadwal + pilih staf, resource, penarikan dana
     9–12 tiruan bento: laman booking + kaki sidebar, Lihat sebagai, kartu
         Jadwal + kapsul pembuat Meet, pengalih akun

   Semua ukuran disalin dari kelas Tailwind komponen Vue-nya (nama komponennya
   di komentar markup per kartu). Tiruan memakai palet TERANG aplikasi
   (src/assets/main.css :root) di kedua tema halaman, seperti halaman Fitur;
   di tema gelap bayangannya garis tipis (--ajf-lift). Kelas ajb-* tidak
   bertabrakan dengan kelas global lain (dicek ke assets/css & assets/js).
   ========================================================================== */

/* ── 1. Tata letak ────────────────────────────────────────────────────────── */

/* Hero: "Satu link booking untuk / seluruh timmu" dua baris di layar lebar. */
.ajb-hero .h4-page-title {
    max-width: 13.5em;
}

/* Kartu yang tiruannya lebih tinggi dari kartunya (tabel, modal penarikan):
   tingginya tetap, tiruan menempel di atas dan bawahnya terpotong tepi kartu —
   seperti formulir & kalender di halaman Fitur. Tiruan yang harus utuh
   (.is-whole) memanjangkan kartunya bila perlu. */
.ajb-key .ajf-key-card {
    --ajb-h: var(--ajf-key-h);
    height: var(--ajb-h);
    min-height: 0;
    align-items: flex-start;
}

.ajb-key .ajf-key-card.is-whole {
    height: auto;
    min-height: var(--ajb-h);
    align-items: center;
}

.ajb-key .ajb-c-team {
    --ajb-h: 580px;
}

.ajb-key .ajb-c-access {
    --ajb-h: 660px;
    padding-top: 24px;
}

.ajb-key .ajb-c-roster {
    --ajb-h: 600px;
    justify-content: flex-start;
}

.ajb-key .ajb-c-book {
    --ajb-h: 560px;
}

/* Resource: tiruannya utuh tingginya — kartunya ikut memanjang di ponsel
   (kisi 2 × 2), di layar lebar tiruannya berdiri di tengah. */
.ajb-key .ajb-c-res {
    --ajb-h: 600px;
}

.ajb-key .ajb-c-money {
    --ajb-h: 600px;
}

@media (min-width: 600px) {
    .ajb-key .ajb-c-team {
        --ajb-h: 600px;
    }

    .ajb-key .ajb-c-roster {
        --ajb-h: 620px;
    }

    .ajb-key .ajb-c-res {
        --ajb-h: 560px;
    }
}

@media (min-width: 900px) {
    /* Kartu setengah baris: semuanya setinggi kartu akses (tiruan
       tertinggi yang harus utuh sampai Dompet), dan tetap setinggi itu
       supaya keterangan sebaris mulai di garis yang sama. */
    .ajb-key .ajf-key-list {
        --ajf-key-h: 700px;
    }

    .ajb-key .ajf-key-card.is-whole:not(.ajb-c-book) {
        height: var(--ajb-h);
    }

    .ajb-key .ajb-c-team,
    .ajb-key .ajb-c-access,
    .ajb-key .ajb-c-res,
    .ajb-key .ajb-c-money {
        --ajb-h: var(--ajf-key-h);
    }

    /* Ketersediaan & pesan jadwal selebar baris: tiruannya selebar aslinya. */
    .ajb-key .ajb-wide {
        grid-column: 1 / -1;
    }

    .ajb-key .ajb-c-roster {
        --ajb-h: 820px;
    }

    .ajb-key .ajb-c-book {
        --ajb-h: 680px;
        align-items: center;
    }
}

/* ≥ 1600 halaman Fitur tiga kolom; di sini tetap dua (dua kartu selebar
   baris). */
@media (min-width: 1600px) {
    .ajb-key .ajf-key-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Bento "Kerja bareng, tetap rapi": < 1200 satu kolom (urutan markup; kisi
   12 kolom halaman Fitur di 900–1199 terlalu sempit untuk sidebar & bilah
   Lihat sebagai); ≥ 1200 baris 1 laman booking + kartu profil 7/12 di samping
   kartu Jadwal 5/12, baris 2 Lihat sebagai & pengalih akun 6/12 — dua tiruan
   tertinggi sebaris. */
.ajb-bento .ajf-tile-card {
    --ajf-h: 440px;
}

.ajb-bento .ajf-tile[data-area='lihat'] .ajf-tile-card,
.ajb-bento .ajf-tile[data-area='akun'] .ajf-tile-card {
    --ajf-h: 560px;
}

@media (min-width: 900px) and (max-width: 1199px) {
    .ajb-bento {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 1200px) {
    .ajb-bento .ajf-tile[data-area='nama'] {
        grid-column: 1 / span 7;
        grid-row: 1;
    }

    .ajb-bento .ajf-tile[data-area='meet'] {
        grid-column: 8 / span 5;
        grid-row: 1;
    }

    .ajb-bento .ajf-tile[data-area='lihat'] {
        grid-column: 1 / span 6;
        grid-row: 2;
    }

    .ajb-bento .ajf-tile[data-area='akun'] {
        grid-column: 7 / span 6;
        grid-row: 2;
    }

    .ajb-bento .ajf-tile[data-area='nama'] .ajf-tile-card,
    .ajb-bento .ajf-tile[data-area='meet'] .ajf-tile-card {
        --ajf-h: 500px;
    }

    .ajb-bento .ajf-tile[data-area='lihat'] .ajf-tile-card,
    .ajb-bento .ajf-tile[data-area='akun'] .ajf-tile-card {
        --ajf-h: 720px;
    }
}

/* Penutup: kalimatnya dipatahkan seimbang. */
.h4-bisnis .h4-end-lead {
    text-wrap: balance;
}

/* Lembar stiker: empat kelompok, dua kolom dari 700px (tanpa baris selebar
   kisi seperti "Akun & aplikasi" di halaman Fitur). */
@media (min-width: 1100px) {
    .ajb-detail-grid .ajf-sticker {
        font-size: 16px;
    }
}

/* ── 2. Bahan bersama tiruan ──────────────────────────────────────────────── */

/* Layar aplikasi datar: sudut bulat, tanpa bingkai perangkat. */
.ajb-scr {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 16px;
    background: rgb(var(--ajf-canvas));
    box-shadow: var(--ajf-lift);
    color: rgb(var(--ajf-ink));
    font-family: var(--h4-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: normal;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    user-select: none;
}

.ajb-scr *,
.ajb-book *,
.ajb-res *,
.ajb-brand *,
.ajb-switch * {
    box-sizing: border-box;
}

.ajb-scr :where(p, ul, li, b, h1, h2, h3, table, th, td) {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

.ajb-scr ul {
    list-style: none;
}

.ajb-ri {
    display: block;
    flex: none;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.ajb-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ClientAvatar.vue: foto, atau inisial di lingkaran tint. */
.ajb-av {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 9999px;
    background: rgb(var(--ajf-tint));
    color: rgb(var(--ajf-brand));
    font-weight: 600;
    line-height: 1;
}

.ajb-av img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ajb-av.is-xs {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.ajb-av.is-sm {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

.ajb-av.is-md {
    width: 44px;
    height: 44px;
    font-size: 14px;
}

/* Judul halaman dasbor: text-[24px] font-[700] leading-tight. */
.ajb-h1 {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: rgb(var(--ajf-ink));
}

/* Label kelompok: px-1 text-[12px] font-[600] text-ink-soft. */
.ajb-cap {
    display: block;
    margin: 0 0 8px;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

/* Tombol bulat 40px (kembali, tambah): border-line bg-surface / bg-brand. */
.ajb-round {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 9999px;
    background: rgb(var(--ajf-surface));
    color: rgb(var(--ajf-ink));
    font-size: 20px;
}

.ajb-round.is-brand {
    border-color: rgb(var(--ajf-brand));
    background: rgb(var(--ajf-brand));
    color: #fff;
}

/* Kapsul "Kamu": bg-surface-muted / (tabel) bg-tint text-brand. */
.ajb-you {
    flex: none;
    padding: 1px 8px;
    border-radius: 9999px;
    background: rgb(var(--ajf-muted));
    color: rgb(var(--ajf-ink-soft));
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.ajb-you.is-tint {
    padding: 0 6px;
    background: rgb(var(--ajf-tint));
    color: rgb(var(--ajf-brand));
}

/* MenuRadio.vue */
.ajb-radio {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 9999px;
}

.ajb-radio.is-on {
    border-color: rgb(var(--ajf-brand));
}

.ajb-radio.is-on::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: rgb(var(--ajf-brand));
}

/* ── 3. Anggota tim (TeamIndex.vue) ───────────────────────────────────────── */

.ajb-team {
    width: min(100%, 480px);
    margin-inline: auto;
    padding: 20px 20px 24px;
}

.ajb-team-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ajb-team-titles {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.ajb-team-sub {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: rgb(var(--ajf-ink-soft));
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-team-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ajb-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 16px;
    background: rgb(var(--ajf-surface));
}

.ajb-member-main {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.ajb-member-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ajb-member-name {
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-member-sub {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-invited {
    flex: none;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgb(var(--ajf-warn-bg));
    color: rgb(var(--ajf-warn));
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

.ajb-member-chev {
    font-size: 24px;
    color: rgb(var(--ajf-ink-soft));
}

/* Ponsel: kepala tanpa keterangan, judul 18px (TeamIndex.vue di bawah lg). */
@media (max-width: 599px) {
    .ajb-team {
        padding: 16px 16px 20px;
    }

    .ajb-team .ajb-h1 {
        font-size: 18px;
    }

    .ajb-team-sub {
        display: none;
    }

    .ajb-team-head {
        margin-bottom: 16px;
    }
}

/* ── 4. Akses per halaman (MemberForm.vue + AccessTable.vue) ──────────────── */

.ajb-access {
    width: min(100%, 500px);
    margin-inline: auto;
    padding: 16px;
}

/* Kotak lipatan: rounded-xl border bg-surface, kepala p-3. */
.ajb-fold {
    overflow: hidden;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 12px;
    background: rgb(var(--ajf-surface));
}

.ajb-fold-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.ajb-fold-main {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.ajb-fold-title {
    display: block;
    font-weight: 600;
}

.ajb-fold-sum {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-fold-chev {
    font-size: 20px;
    color: rgb(var(--ajf-ink-soft));
    transform: rotate(180deg);
}

/* border-t border-line/70 bg-canvas/60 p-3 */
.ajb-fold-body {
    padding: 12px;
    border-top: 1px solid rgb(var(--ajf-line) / 0.7);
    background: rgb(var(--ajf-canvas) / 0.6);
}

.ajb-acc {
    overflow: hidden;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 12px;
    background: rgb(var(--ajf-surface));
}

.ajb-acc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgb(var(--ajf-line) / 0.7);
}

.ajb-acc-row:last-child {
    border-bottom: 0;
}

.ajb-acc-row.is-nested {
    padding-left: 28px;
}

.ajb-acc-ico {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgb(var(--ajf-canvas));
    color: rgb(var(--ajf-ink-soft));
    font-size: 18px;
}

.ajb-acc-row.is-none .ajb-acc-ico {
    color: rgb(var(--ajf-ink-faint));
}

.ajb-acc-main {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.ajb-acc-name {
    display: block;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-acc-row.is-none .ajb-acc-name {
    color: rgb(var(--ajf-ink-soft));
}

.ajb-acc-cap {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Sub-judul Arsip / Etalase: bg-canvas/60 px-3 py-2 text-[12px] font-[600]. */
.ajb-acc-sec {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgb(var(--ajf-line) / 0.7);
    background: rgb(var(--ajf-canvas) / 0.6);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-acc-sec .ajb-ri {
    font-size: 16px;
}

/* Kapsul tingkat (pillTone): h-9 rounded-full border pl-3 pr-2 14/600. */
.ajb-pill {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 8px 0 12px;
    border: 1px solid;
    border-radius: 9999px;
    font-weight: 600;
    white-space: nowrap;
}

.ajb-pill .ajb-ri {
    font-size: 16px;
}

.ajb-pill.is-edit {
    border-color: rgb(var(--ajf-brand) / 0.4);
    background: rgb(var(--ajf-tint));
    color: rgb(var(--ajf-brand));
}

.ajb-pill.is-money {
    border-color: rgb(var(--ajf-warn-line));
    background: rgb(var(--ajf-warn-bg));
    color: rgb(var(--ajf-warn));
}

.ajb-pill.is-view {
    border-color: rgb(var(--ajf-line));
    background: rgb(var(--ajf-surface));
    color: rgb(var(--ajf-ink));
}

.ajb-pill.is-none {
    border-color: rgb(var(--ajf-line));
    background: rgb(var(--ajf-canvas));
    color: rgb(var(--ajf-ink-soft));
}

/* ── 5. Ketersediaan (RosterIndex.vue + RosterTable.vue + RosterCell.vue) ── */

/* Halaman dasbor (px-7 di desktop) selebar kartu, seperti selebar layar:
   kepala & tombolnya utuh, tabelnya terpotong di dalam penggulungnya sendiri
   (overflow) dan bawahnya di tepi kartu. */
.ajb-roster {
    width: 100%;
    padding: 22px 28px 0;
}

.ajb-ros-head {
    display: flex;
    align-items: center;
    height: 36px;
    margin-bottom: 12px;
}

.ajb-ros-head .ajb-h1 {
    min-width: 0;
    margin-right: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* HeaderIconButton.vue: size-9 rounded-full border, ri-more-2-fill 18px. */
.ajb-icon-btn {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 8px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 9999px;
    background: rgb(var(--ajf-surface));
    font-size: 18px;
}

/* Tombol Libur & Template: h-9 rounded-full border px-3 14/600. */
.ajb-pill-btn {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 9999px;
    background: rgb(var(--ajf-surface));
    font-weight: 600;
    white-space: nowrap;
}

.ajb-pill-btn .ajb-ri {
    font-size: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-pill-btn.is-template {
    margin-left: 8px;
}

/* RosterWeekBar.vue + ToolbarButton.vue (Filter). */
.ajb-ros-week {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ajb-circle {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 9999px;
    background: rgb(var(--ajf-surface));
    font-size: 20px;
}

.ajb-circle[data-off] {
    opacity: 0.4;
}

.ajb-circle.is-home {
    font-size: 18px;
}

.ajb-ros-wtext {
    min-width: 0;
    flex: 1 1 auto;
    margin-left: 4px !important;
    overflow: hidden;
    color: rgb(var(--ajf-ink-soft));
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-ros-wtext b {
    font-weight: 700;
    color: rgb(var(--ajf-ink));
}

.ajb-toolbar {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 12px;
    background: rgb(var(--ajf-surface));
    color: rgb(var(--ajf-ink-soft));
    font-weight: 600;
}

.ajb-toolbar .ajb-ri {
    font-size: 16px;
}

/* Tabel: rounded-2xl border bg-surface, border-separate border-spacing-0. */
.ajb-ros-scroll {
    overflow: hidden;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 16px;
    background: rgb(var(--ajf-surface));
}

.ajb-ros-table {
    width: 100%;
    min-width: max-content;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

.ajb-ros-table th,
.ajb-ros-table td {
    font-weight: 400;
    text-align: left;
}

.ajb-ros-corner {
    padding: 0 !important;
    border-right: 1px solid rgb(var(--ajf-line));
    border-bottom: 1px solid rgb(var(--ajf-line));
}

/* Kepala tanggal: min-w-[112px] p-1.5; hari ini bergaris bawah brand. */
.ajb-ros-day {
    min-width: 112px;
    padding: 6px !important;
    border-bottom: 1px solid rgb(var(--ajf-line));
    vertical-align: middle;
}

.ajb-ros-day.is-today {
    box-shadow: inset 0 -2px 0 rgb(var(--ajf-brand));
}

.ajb-ros-dbtn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 6px 4px;
}

.ajb-ros-dname {
    display: flex;
    align-items: center;
    gap: 2px;
    font-weight: 700;
    white-space: nowrap;
    color: rgb(var(--ajf-ink));
}

.ajb-ros-day.is-today .ajb-ros-dname {
    color: rgb(var(--ajf-brand));
}

.ajb-ros-day.is-past .ajb-ros-dname {
    color: rgb(var(--ajf-ink-faint));
}

.ajb-ros-chev {
    font-size: 18px;
    color: rgb(var(--ajf-ink-faint));
}

.ajb-ros-dcount {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

/* Pita kelompok: bg-canvas, px-4 py-2 text-[12px] font-[600]. */
.ajb-ros-group {
    padding: 0 !important;
    border-bottom: 1px solid rgb(var(--ajf-line));
    background: rgb(var(--ajf-canvas));
}

.ajb-ros-group > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-ros-group i,
.ajb-ros-fgroup i {
    font-style: normal;
    color: rgb(var(--ajf-ink-faint));
}

.ajb-ros-group .ajb-ri,
.ajb-ros-fgroup .ajb-ri {
    font-size: 14px;
}

/* Kepala baris: lebar tetap 212px (236px ≥ 1280), p-1.5. */
.ajb-ros-row {
    padding: 6px !important;
    border-right: 1px solid rgb(var(--ajf-line));
    border-bottom: 1px solid rgb(var(--ajf-line));
    vertical-align: middle;
}

.ajb-ros-rbtn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 212px;
    padding: 6px;
}

.ajb-ros-rmain {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.ajb-ros-rline {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ajb-ros-rname {
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-ros-rsub {
    display: block;
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-ros-tile {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgb(var(--ajf-canvas));
    color: rgb(var(--ajf-ink-soft));
    font-size: 18px;
}

.ajb-ros-thumb {
    display: block;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgb(var(--ajf-muted));
    object-fit: cover;
}

.ajb-ros-table td {
    padding: 6px;
    border-bottom: 1px solid rgb(var(--ajf-line));
    vertical-align: top;
}

.ajb-ros-table tbody:last-child tr:last-child > * {
    border-bottom-width: 0;
}

/* RosterCell.vue */
.ajb-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    height: 100%;
    padding: 8px 12px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 12px;
    background: rgb(var(--ajf-canvas));
    color: rgb(var(--ajf-ink));
}

.ajb-cell.is-partial {
    border-color: rgb(var(--ajf-danger) / 0.4);
}

.ajb-cell.is-off {
    border-color: rgb(var(--ajf-danger) / 0.3);
    background: rgb(var(--ajf-danger-soft));
    color: rgb(var(--ajf-danger));
}

.ajb-cell.is-rest {
    border-style: dashed;
    background: transparent;
    color: rgb(var(--ajf-ink-faint));
}

.ajb-cell.is-past {
    opacity: 0.5;
}

.ajb-cell-line {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.ajb-cell-line .ajb-ri {
    font-size: 14px;
}

.ajb-cell-note {
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-cell-custom,
.ajb-cell-offnote {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    color: rgb(var(--ajf-brand));
}

.ajb-cell-offnote {
    color: rgb(var(--ajf-danger));
}

.ajb-cell.is-compact {
    min-height: 52px;
    padding: 6px 8px;
}

.ajb-cell.is-compact .ajb-cell-line {
    font-size: 12px;
    line-height: 16px;
}

/* Ponsel: sumbu dibalik (flipped) — kolom hari 76px, kolom staf 112px,
   lajur kanvas di antara kelompok. */
.ajb-ros-scroll.is-flip {
    border-radius: 0;
    border-width: 1px 0;
}

.ajb-ros-fcorner {
    width: 76px;
    min-width: 76px;
    padding: 0 !important;
    border-right: 1px solid rgb(var(--ajf-line));
    border-bottom: 1px solid rgb(var(--ajf-line));
}

.ajb-ros-fgroup {
    height: 32px;
    padding: 0 !important;
    border-bottom: 1px solid rgb(var(--ajf-line));
    background: rgb(var(--ajf-canvas));
}

.ajb-ros-fgroup > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-ros-gutter {
    width: 12px;
    min-width: 12px;
    padding: 0 !important;
    border-inline: 1px solid rgb(var(--ajf-line));
    background: rgb(var(--ajf-canvas));
}

.ajb-ros-fhead {
    width: 112px;
    min-width: 104px;
    padding: 4px !important;
    border-bottom: 1px solid rgb(var(--ajf-line));
    vertical-align: middle;
}

.ajb-ros-fbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    text-align: center;
}

.ajb-ros-fbtn .ajb-ros-tile,
.ajb-ros-fbtn .ajb-ros-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 16px;
}

.ajb-ros-fname {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ajb-ros-fname.is-me {
    color: rgb(var(--ajf-brand));
}

.ajb-ros-fday {
    padding: 4px !important;
    border-right: 1px solid rgb(var(--ajf-line));
    border-bottom: 1px solid rgb(var(--ajf-line));
    vertical-align: middle;
}

.ajb-ros-fday.is-today {
    box-shadow: inset 2px 0 0 rgb(var(--ajf-brand));
}

.ajb-ros-fday > span {
    display: block;
    padding: 0 6px;
}

.ajb-ros-fdname {
    display: flex !important;
    align-items: center;
    gap: 2px;
    padding-top: 4px !important;
    font-weight: 700;
    color: rgb(var(--ajf-ink));
}

.ajb-ros-fday.is-today .ajb-ros-fdname {
    color: rgb(var(--ajf-brand));
}

.ajb-ros-fday.is-past .ajb-ros-fdname {
    color: rgb(var(--ajf-ink-faint));
}

.ajb-ros-fddate {
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-ros-fdcount {
    margin-top: 2px;
    padding-bottom: 4px !important;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    color: rgb(var(--ajf-ink-faint));
}

.ajb-ros-table.is-flip td {
    padding: 4px;
}

/* Ponsel: halaman tanpa px-7, tabelnya selebar layar; Template tinggal
   ikon (`hidden sm:inline`), Filter tinggal ikon. */
@media (max-width: 599px) {
    .ajb-roster {
        padding: 16px 0 0;
    }

    .ajb-roster .ajb-ros-head,
    .ajb-roster .ajb-ros-week {
        padding-inline: 16px;
    }

    .ajb-roster .ajb-h1 {
        font-size: 18px;
    }

    .ajb-pill-btn.is-template {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .ajb-pill-btn.is-template span,
    .ajb-toolbar-label {
        display: none;
    }

    .ajb-toolbar {
        padding: 0 10px;
    }

    .ajb-ros-wtext {
        font-size: 13px;
    }
}

@media (min-width: 1280px) {
    .ajb-ros-rbtn {
        width: 236px;
    }
}

/* ── 6. Pesan jadwal (BookScheduleDesktop/Mobile + StaffChoiceBar) ─────────── */

.ajb-book {
    width: 100%;
    container-type: inline-size;
    color: rgb(var(--ajf-ink));
    font-family: var(--h4-text);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.ajb-book :where(p) {
    margin: 0;
}

/* Kartu: bt-panel md:rounded-2xl md:border md:bg-surface. Ponsel: halaman
   pesan langkah pertama sebagai layar datar. */
.ajb-book-panel {
    display: flex;
    width: min(100%, 420px);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 16px;
    background: rgb(var(--ajf-surface));
    box-shadow: var(--ajf-lift);
}

.ajb-book-center {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 16px 0 12px;
}

.ajb-book-right {
    display: none;
}

/* "Pilih staf" / "Pilih tanggal" / "Pilih waktu mulai": 16/600 tracking. */
.ajb-book-h {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.01em;
}

.ajb-staff {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 4px;
}

/* Ponsel: satu baris yang digeser (terpotong di tepi layar). */
.ajb-chips {
    display: flex;
    gap: 8px;
    margin: 0 -4px;
    padding: 0 4px 4px;
    overflow: hidden;
}

.ajb-chip {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 9999px;
    background: rgb(var(--ajf-surface));
    color: rgb(var(--ajf-ink));
    font: inherit;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
    transition:
        background-color 0.15s ease-out,
        border-color 0.15s ease-out,
        color 0.15s ease-out,
        transform 0.15s ease-out;
}

.ajb-chip:active {
    transform: scale(0.97);
}

.ajb-chip:focus-visible {
    outline: 2px solid rgb(var(--ajf-brand));
    outline-offset: 2px;
}

@media (hover: hover) {
    .ajb-chip:not(.is-on):hover {
        border-color: rgb(var(--ajf-brand) / 0.5);
    }
}

.ajb-chip.is-on {
    border-color: rgb(var(--ajf-brand));
    background: rgb(var(--ajf-brand));
    color: #fff;
}

.ajb-chip-ico {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: rgb(var(--ajf-tint));
    color: rgb(var(--ajf-brand));
    font-size: 14px;
}

.ajb-chip.is-on .ajb-chip-ico {
    background: rgb(255 255 255 / 0.2);
    color: #fff;
}

.ajb-chip-name {
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-chip-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ajb-chip-extra {
    max-width: 160px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-book-hdate {
    display: none;
}

/* Kalender v-calendar + .my-datepicker (src/assets/main.css): kepala 30px
   (+10 di atas), panah 24px abu, judul 700; label hari 14/700 ink-soft;
   minggu py-2; tanggal 40 × 40 radius 10, 600. Tersedia = outline highlight
   (tint + garis brand/45), terpilih = isian brand + halo, hari ini = titik. */
.ajb-cal {
    padding: 0 8px;
    transition: opacity 0.18s ease-out;
}

.ajb-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    margin-top: 10px;
    padding: 0 10px;
}

.ajb-cal-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
}

.ajb-cal-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 30px;
    color: #64748b;
}

.ajb-cal-arrow[data-off] {
    opacity: 0.25;
}

.ajb-cal-arrow svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.ajb-cal-weeks {
    margin: 12px 0 14px;
    padding: 6px 0;
}

.ajb-cal-wds,
.ajb-cal-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ajb-cal-wds span {
    padding: 4px 0 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-cal-week {
    padding: 8px 0;
}

.ajb-cal-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 600;
    color: rgb(var(--ajf-ink));
}

.ajb-cal-day.is-out {
    visibility: hidden;
}

.ajb-cal-day.is-disabled {
    color: #94a3b8;
}

.ajb-cal-day.is-open {
    border-color: rgb(var(--ajf-brand) / 0.45);
    background: rgb(var(--ajf-tint));
    color: rgb(var(--ajf-brand));
    font-weight: 700;
}

.ajb-cal-day.is-selected {
    border-color: rgb(var(--ajf-brand));
    background: rgb(var(--ajf-brand));
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgb(var(--ajf-brand) / 0.28);
}

/* Titik hari ini (attribute `dot: 'blue'`), sedikit di atas dasar kotak. */
.ajb-cal-day.is-today::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 9999px;
    background: #2563eb;
}

/* Kolom kanan: "Pilih waktu mulai", tanggal, lalu jam per bagian hari. */
.ajb-book-rhead {
    padding: 0 28px 16px;
    border-bottom: 1px solid rgb(var(--ajf-line));
}

.ajb-book-date {
    color: rgb(var(--ajf-ink-soft));
}

.ajb-slots {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    padding: 4px 28px 28px;
    transition: opacity 0.18s ease-out;
}

/* bt-slot-group: pb-2 pt-3 text-[12px] font-[600] ink-soft. */
.ajb-slot-group {
    padding: 12px 0 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-slot-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* bt-slot desktop: rounded-xl border py-3.5, border-brand/40 bg-tint 600 brand. */
.ajb-slot {
    display: block;
    padding: 14px 0;
    border: 1px solid rgb(var(--ajf-brand) / 0.4);
    border-radius: 12px;
    background: rgb(var(--ajf-tint));
    color: rgb(var(--ajf-brand));
    font-weight: 600;
    text-align: center;
}

.ajb-book.is-pending .ajb-cal,
.ajb-book.is-pending .ajb-slots {
    opacity: 0.4;
}

/* Kartu lebar: BookScheduleDesktop — kolom tengah 450px (staf turun baris,
   px-7; kalender lg:px-3), kolom kanan 340px. */
@container (min-width: 800px) {
    .ajb-book-panel {
        width: 792px;
    }

    .ajb-book-center {
        flex: none;
        width: 450px;
        padding: 28px 0;
        gap: 8px;
    }

    .ajb-staff {
        margin-bottom: 12px;
        padding: 0 28px 4px;
    }

    .ajb-staff .ajb-chips {
        flex-wrap: wrap;
        overflow: visible;
    }

    .ajb-book-hdate {
        display: block;
        padding: 0 28px;
    }

    .ajb-cal {
        padding: 0 12px;
    }

    .ajb-book-right {
        display: flex;
        flex: none;
        flex-direction: column;
        width: 340px;
        padding-top: 16px;
        border-left: 1px solid rgb(var(--ajf-line));
    }

    /* contain: size — daftar jamnya tidak ikut memanjangkan kartu; tingginya
       ditentukan kolom kalender, sisanya terpotong seperti di app. */
    .ajb-slots {
        contain: size;
    }
}

/* ── 7. Resource (ResourceModelPicker.vue + ResourceChoiceBar.vue) ───────── */

/* Kisi model ResourceModelPicker: grid-cols-2 gap-2 (kartu ±180px), dan
   lg:grid-cols-4 (±194px per kartu) begitu kartunya cukup lebar — ukuran
   aslinya, tidak diperkecil. Di bawahnya "Pilih kursi" halaman pesan. */
.ajb-key .ajb-c-res {
    container: ajb-res / inline-size;
}

.ajb-res {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.ajb-models {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: min(100%, 360px);
    padding: 12px;
}

@container ajb-res (min-width: 740px) {
    .ajb-models {
        grid-template-columns: repeat(4, minmax(0, 180px));
        width: auto;
    }
}

/* Kartu model: rounded-2xl border, terpilih border-brand bg-tint/60; gambar
   aspect-square; teks px-3 pb-3 (14/600 + contoh 12px) dan MenuRadio. */
.ajb-model {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 16px;
    background: rgb(var(--ajf-surface));
}

.ajb-model.is-on {
    border-color: rgb(var(--ajf-brand));
    background: rgb(var(--ajf-tint) / 0.6);
}

.ajb-model-img {
    display: block;
    aspect-ratio: 1;
}

.ajb-model-img img {
    display: block;
    width: 100%;
    height: 100%;
}

.ajb-model-text {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0 12px 12px;
}

.ajb-model-main {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.ajb-model-name {
    display: block;
    font-weight: 600;
}

.ajb-model-ex {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-model-text .ajb-radio {
    margin-top: 2px;
}

/* Halaman pesan: "Pilih kursi", chip turun baris (`wrap`). */
.ajb-pick {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(100%, 422px);
    padding: 16px 16px 14px;
    background: rgb(var(--ajf-surface));
}

/* Ponsel: satu baris yang digeser (terpotong di tepi); ≥ 600 `wrap`. */
@media (min-width: 600px) {
    .ajb-pick .ajb-chips {
        flex-wrap: wrap;
        overflow: visible;
    }
}

/* ── 8. Penarikan dana (WithdrawalStatus.vue di ModalTemplate 500px) ─────── */

.ajb-wd {
    width: min(100%, 500px);
    margin-inline: auto;
    border-radius: 8px;
    background: rgb(var(--ajf-surface));
}

.ajb-wd-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
    padding: 16px;
    border-bottom: 1px solid rgb(var(--ajf-line));
    text-align: center;
}

.ajb-wd-ok {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 12px 0 8px;
    border-radius: 9999px;
    background: rgb(var(--ajf-success) / 0.1);
    color: rgb(var(--ajf-success));
    font-size: 32px;
}

.ajb-wd-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
}

.ajb-wd-lead {
    color: rgb(var(--ajf-ink-soft));
}

.ajb-wd-lead span {
    white-space: nowrap;
}

.ajb-wd-acct {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px;
}

.ajb-wd-acct p {
    display: flex;
    flex-direction: column;
}

.ajb-wd-acct b {
    font-weight: 600;
}

.ajb-wd-acct span {
    font-size: 16px;
    line-height: 20px;
}

.ajb-wd-rule {
    margin: 16px;
    border-top: 1px solid rgb(var(--ajf-line));
}

/* rounded border bg-canvas p-3, gap-3 */
.ajb-wd-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 16px 16px;
    padding: 12px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 4px;
    background: rgb(var(--ajf-canvas));
}

.ajb-wd-boxtitle {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.ajb-wd-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ajb-wd-row.is-top {
    align-items: flex-start;
}

.ajb-wd-row b {
    flex: none;
    font-weight: 600;
}

.ajb-wd-end {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.ajb-wd-end .is-soft {
    color: rgb(var(--ajf-ink-soft));
}

.ajb-wd-by {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.ajb-wd-line {
    border-top: 1px solid rgb(var(--ajf-line));
}

.ajb-wd-row .is-total {
    font-size: 16px;
}

.ajb-wd-foot {
    display: flex;
    padding: 16px;
    border-top: 1px solid rgb(var(--ajf-line));
}

/* btn-light-secondary */
.ajb-btn-light {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 4px;
    background: rgb(var(--ajf-surface));
    font-weight: 600;
    text-align: center;
}

/* ── 9. Laman booking + kaki sidebar (ChooseService* + SideBarMember) ────── */

.ajb-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

/* Layar laman booking ponsel: banner h-72 di belakang kepala, gradien
   from-black/10 via-canvas via-60% to-canvas. */
.ajb-pub {
    width: min(100%, 390px);
    flex: none;
    isolation: isolate;
    padding-bottom: 16px;
    border-radius: 20px;
}

.ajb-pub-banner {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    height: 288px;
}

.ajb-pub-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ajb-pub-banner::after {
    content: '';
    position: absolute;
    inset: 0 0 -2px;
    background: linear-gradient(
        to bottom,
        rgb(0 0 0 / 0.1) 0%,
        rgb(var(--ajf-canvas)) 60%,
        rgb(var(--ajf-canvas)) 100%
    );
}

/* ThemeToggleButton subtle di atas banner gelap: text-white/85. */
.ajb-pub-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: rgb(255 255 255 / 0.85);
    font-size: 20px;
}

.ajb-pub-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px 8px;
    text-align: center;
}

.ajb-pub-avatar {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    object-fit: cover;
    box-shadow:
        0 0 0 4px #fff,
        0 6px 20px rgba(20, 30, 60, 0.22);
}

.ajb-pub-name {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 12px rgba(255, 255, 255, 0.8);
}

.ajb-pub-bio {
    max-width: 330px;
    margin-top: 8px;
    color: rgb(var(--ajf-ink-soft));
    line-height: 24px;
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.8);
}

/* SocialLinks.vue: tiga tautan = ikon saja, h-10 rounded-full border. */
.ajb-pub-socials {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 16px 0;
}

.ajb-pub-socials span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 9999px;
    background: rgb(var(--ajf-surface));
    font-size: 20px;
}

/* Kaki sidebar: sepotong rel sidebar (bg-surface, px-3 pb-3) berisi kartu
   SideBarMember: rounded-xl border p-2 pr-2.5, foto sm bercincin. */
.ajb-me {
    width: 232px;
    flex: none;
    padding: 12px;
    border-radius: 16px;
    background: rgb(var(--ajf-surface));
}

.ajb-me-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px 8px 8px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 12px;
    background: rgb(var(--ajf-surface));
}

.ajb-av.is-ring {
    box-shadow: 0 0 0 2px transparent;
}

.ajb-me-main {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.ajb-me-name {
    display: block;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-me-role {
    display: block;
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-me-chev {
    font-size: 18px;
    color: rgb(var(--ajf-ink-soft));
}

@media (min-width: 640px) {
    .ajb-brand {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 20px;
    }

    .ajb-me {
        margin-top: 236px;
    }
}

/* ── 10. Lihat sebagai (ViewAsBar.vue + sidebar) ──────────────────────────── */

.ajb-viewas {
    width: min(100%, 460px);
    margin-inline: auto;
    background: rgb(var(--ajf-canvas));
}

/* min-h-10 bg-brand px-4 py-1.5 text-on-accent, gap-3, tengah. */
.ajb-va-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 40px;
    padding: 6px 16px;
    background: rgb(var(--ajf-brand));
    color: #fff;
}

.ajb-va-bar > .ajb-ri {
    font-size: 18px;
}

.ajb-va-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-va-text b {
    font-weight: 700;
}

.ajb-va-text span {
    opacity: 0.8;
}

.ajb-va-done {
    flex: none;
    padding: 4px 12px;
    border-radius: 9999px;
    background: #fff;
    color: rgb(var(--ajf-brand));
    font-weight: 600;
}

.ajb-va-body {
    display: flex;
}

/* Rel sidebar terbuka: lg:w-[232px] border-r bg-surface. */
.ajb-side {
    display: flex;
    flex: none;
    flex-direction: column;
    width: 232px;
    border-right: 1px solid rgb(var(--ajf-line));
    background: rgb(var(--ajf-surface));
}

/* SideBarHeader.vue: h-[71px] border-b, logo 134 × 24 di pl-[26px]. */
.ajb-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 71px;
    padding: 0 12px 0 26px;
    border-bottom: 1px solid rgb(var(--ajf-line));
}

.ajb-side-logo {
    display: block;
    width: auto;
    height: 24px;
    color: #0a0a0a;
    --h4-logo-mark: #3030b0;
}

.ajb-side-fold {
    font-size: 20px;
    color: rgb(var(--ajf-ink-soft));
}

/* SideBarProfile.vue: pl-[26px] pr-3 pt-4 pb-1; foto 48 bercincin line. */
.ajb-side-prof,
.ajb-sw-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 12px 4px 26px;
}

.ajb-side-photo {
    display: block;
    width: 48px;
    height: 48px;
    margin-left: 2px;
    border-radius: 9999px;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgb(var(--ajf-line));
}

/* AccountSwitcher.vue pemicu: nama 16/600 + ⌄ 20px (+ titik undangan). */
.ajb-side-name {
    display: flex;
    max-width: 100%;
    align-items: center;
    gap: 2px;
    margin: 12px 0 4px -4px;
    padding: 0 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
}

.ajb-side-name .ajb-ri {
    font-size: 20px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-side-name.is-open .ajb-ri {
    color: rgb(var(--ajf-brand));
    transform: rotate(180deg);
}

.ajb-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: rgb(var(--ajf-brand));
}

.ajb-side-kind {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-side-kind .ajb-ri {
    font-size: 16px;
}

.ajb-side-rule {
    height: 1px;
    margin: 16px 12px;
    background: rgb(var(--ajf-line));
}

/* SideBarMenu.vue: h-11 rounded-xl px-3 gap-3, ikon ri-xl, aktif bg-tint. */
.ajb-side-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px 16px;
}

.ajb-side-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    color: rgb(var(--ajf-ink-soft));
    line-height: 16px;
}

.ajb-side-item > .ajb-ri:first-child {
    font-size: 24px;
}

.ajb-side-item.is-on {
    background: rgb(var(--ajf-tint));
    color: rgb(var(--ajf-brand));
    font-weight: 600;
}

/* Penanda aktif: bilah 4 × 20 di tepi kiri rel. */
.ajb-side-item.is-on::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -12px;
    width: 4px;
    height: 20px;
    margin-top: -10px;
    border-radius: 0 9999px 9999px 0;
    background: rgb(var(--ajf-brand));
}

.ajb-side-chev {
    margin-left: auto;
    font-size: 18px;
}

.ajb-side-foot {
    padding: 0 12px 12px;
}

.ajb-side-help {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    margin: 0 12px 12px;
    padding: 12px 12px 0;
    border-top: 1px solid rgb(var(--ajf-line) / 0.6);
    color: rgb(var(--ajf-ink-soft));
}

.ajb-side-help .ajb-ri {
    font-size: 18px;
}

.ajb-va-main {
    min-width: 0;
    flex: 1 1 auto;
}

/* HeaderBar.vue: lg:h-[71px] border-b bg-surface px-5, CopyLinkButton
   compact (h-10 rounded-lg border px-4, tautan brand) — terpotong. */
.ajb-va-header {
    display: flex;
    align-items: center;
    height: 71px;
    padding-left: 20px;
    border-bottom: 1px solid rgb(var(--ajf-line));
    background: rgb(var(--ajf-surface));
}

.ajb-link-pill {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    width: 350px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 8px;
    color: rgb(var(--ajf-brand));
    white-space: nowrap;
}

.ajb-link-pill .ajb-ri {
    font-size: 18px;
}

.ajb-link-pill b {
    font-weight: 600;
}

/* ── 11. Kartu Jadwal Detail jadwal + MeetCreatorBadge ────────────────────── */

.ajb-meet {
    width: min(100%, 440px);
    margin-inline: auto;
    padding: 16px;
    background: rgb(var(--ajf-surface));
}

/* Kartu: rounded-xl border p-3 gap-3, border-line bg-canvas. */
.ajb-meet-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 12px;
    background: rgb(var(--ajf-canvas));
}

.ajb-meet-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ajb-meet-h {
    font-size: 16px;
    font-weight: 600;
}

.ajb-meet-act {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    color: rgb(var(--ajf-brand));
    font-weight: 600;
}

.ajb-meet-top .ajb-meet-act {
    margin: -4px -4px -4px 0;
    padding: 4px 8px;
}

.ajb-meet-act .ajb-ri {
    font-size: 16px;
}

.ajb-meet-when {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 0;
}

.ajb-meet-tile {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgb(var(--ajf-muted));
}

.ajb-meet-tile img {
    display: block;
    width: 24px;
    height: 24px;
}

.ajb-meet-dates {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.ajb-meet-date {
    font-size: 16px;
    font-weight: 600;
}

.ajb-meet-tz {
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-meet-rule {
    height: 1px;
    background: rgb(var(--ajf-line));
}

.ajb-meet-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ajb-meet-label {
    width: 76px;
    flex: none;
    padding: 4px 0;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-meet-val {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
}

.ajb-meet-staff {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.ajb-meet-src {
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-meet-link {
    padding: 4px 0;
    word-break: break-all;
}

/* MeetCreatorBadge.vue: rounded-2xl border bg-surface px-2.5 py-1, 12px,
   logo Google 14px; email tidak pernah dipotong. */
.ajb-meet-badge {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
    padding: 4px 10px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 16px;
    background: rgb(var(--ajf-surface));
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-meet-badge img {
    display: block;
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
}

.ajb-meet-badge b {
    font-weight: 600;
    color: rgb(var(--ajf-ink));
}

.ajb-meet-mail {
    display: inline-block;
    max-width: 100%;
}

.ajb-meet-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: -6px;
}

/* ── 12. Pengalih akun (AccountSwitcher.vue) ──────────────────────────────── */

.ajb-switch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(100%, 360px);
    margin-inline: auto;
}

/* Kepala sidebar (SideBarProfile.vue) tempat pemicunya duduk. */
.ajb-sw-head {
    width: 232px;
    padding-bottom: 14px;
    background: rgb(var(--ajf-surface));
}

/* MenuCallout.vue: rounded-xl border bg-surface shadow-lg shadow-ink/15,
   ekor 10px di atas; lebar 320. */
.ajb-callout {
    position: relative;
    width: min(100%, 320px);
    margin: 14px 0 0 12px;
    padding-bottom: 6px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 12px;
    background: rgb(var(--ajf-surface));
    box-shadow: 0 10px 15px -3px rgb(10 10 10 / 0.15), 0 4px 6px -4px rgb(10 10 10 / 0.15);
    color: rgb(var(--ajf-ink));
    font-family: var(--h4-text);
    font-size: 14px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
}

.ajb-callout :where(p) {
    margin: 0;
}

.ajb-callout-tail {
    position: absolute;
    top: -6px;
    left: 105px;
    width: 10px;
    height: 10px;
    border-top: 1px solid rgb(var(--ajf-line));
    border-left: 1px solid rgb(var(--ajf-line));
    border-top-left-radius: 2px;
    background: rgb(var(--ajf-surface));
    transform: rotate(45deg);
}

.ajb-callout-title {
    padding: 14px 16px 4px;
    font-weight: 700;
}

.ajb-callout-cap {
    padding: 12px 16px 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-callout-rule {
    height: 1px;
    margin: 4px 16px;
    background: rgb(var(--ajf-line));
}

/* ChoiceRow.vue: px-4 py-2.5 gap-3, label 14/600 (terpilih brand), keterangan
   12px dengan ikon toko, MenuRadio. */
.ajb-crow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
}

.ajb-crow-main {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.ajb-crow-name {
    display: block;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajb-crow-name.is-on {
    color: rgb(var(--ajf-brand));
}

.ajb-crow-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajb-crow-sub .ajb-ri {
    font-size: 14px;
}

.ajb-invite {
    padding: 10px 16px 14px;
}

.ajb-crow.is-invite {
    padding: 0;
}

.ajb-invite-acts {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-left: 48px;
}

.ajb-invite-no,
.ajb-invite-yes {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    height: 32px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 9999px;
    font-weight: 600;
}

.ajb-invite-yes {
    border-color: rgb(var(--ajf-brand));
    background: rgb(var(--ajf-brand));
    color: #fff;
}

.ajb-new {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px dashed rgb(var(--ajf-ink-faint));
    border-radius: 9999px;
    color: rgb(var(--ajf-ink-soft));
    font-size: 18px;
}

.ajb-crow.is-out {
    color: rgb(var(--ajf-danger));
}

.ajb-out-ico {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 18px;
}

/* Tema gelap: tiruan tetap terang; bayangan callout jadi garis tipis. */
html.uc-dark .ajb-callout {
    box-shadow: var(--ajf-lift);
}

@media (prefers-reduced-motion: reduce) {
    .ajb-chip,
    .ajb-cal,
    .ajb-slots {
        transition: none;
    }
}