:root {
    --gp-primary: #ff5722;
    --gp-primary-dark: #e64a19;
    --gp-dark: #131722;
    --gp-dark-soft: #1c2130;
    --gp-sidebar-w: 262px;
    --gp-border: #e6e8ee;
}

* { -webkit-font-smoothing: antialiased; }

body {
    background: #f4f6fa;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: .925rem;
    color: #1f2430;
}

a { text-decoration: none; }

.btn-primary, .btn-primary:focus {
    background: var(--gp-primary);
    border-color: var(--gp-primary);
}
.btn-primary:hover, .btn-primary:active {
    background: var(--gp-primary-dark) !important;
    border-color: var(--gp-primary-dark) !important;
}
.btn-outline-primary { color: var(--gp-primary); border-color: var(--gp-primary); }
.btn-outline-primary:hover { background: var(--gp-primary); border-color: var(--gp-primary); }
.text-primary { color: var(--gp-primary) !important; }
.bg-primary { background: var(--gp-primary) !important; }
.form-control:focus, .form-select:focus {
    border-color: #ffb59c;
    box-shadow: 0 0 0 .2rem rgba(255, 87, 34, .15);
}
.nav-tabs .nav-link.active { color: var(--gp-primary); border-bottom-color: var(--gp-primary); }

/* ---------------------------------------------------------- SHELL */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--gp-sidebar-w);
    flex: 0 0 var(--gp-sidebar-w);
    background: var(--gp-dark);
    color: #cfd4e2;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1040;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.brand-logo {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--gp-primary), #ff8a65);
    color: #fff; font-size: 1.15rem;
}
.brand-name { display: block; color: #fff; font-weight: 700; letter-spacing: .3px; }
.brand-sub { display: block; font-size: .68rem; color: #8f97ad; text-transform: uppercase; letter-spacing: 1px; }

.sidebar-nav { padding: .6rem .6rem 1.2rem; overflow-y: auto; flex: 1; }
.sidebar-group {
    font-size: .66rem; text-transform: uppercase; letter-spacing: 1.1px;
    color: #6f7691; margin: .9rem .6rem .35rem;
}
.sidebar-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .7rem; border-radius: 9px;
    color: #cfd4e2; font-size: .875rem; margin-bottom: 2px;
    transition: background .15s, color .15s;
}
.sidebar-link i { font-size: 1.02rem; width: 20px; text-align: center; }
.sidebar-link:hover { background: var(--gp-dark-soft); color: #fff; }
.sidebar-link.active { background: var(--gp-primary); color: #fff; box-shadow: 0 6px 16px rgba(255, 87, 34, .3); }
.sidebar-foot { padding: .75rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.sidebar-backdrop { display: none; }

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex; align-items: center;
    gap: .5rem;
    background: #fff;
    border-bottom: 1px solid var(--gp-border);
    padding: .7rem 1.25rem;
    position: sticky; top: 0; z-index: 1030;
}
.topbar-title { font-size: 1.06rem; font-weight: 700; margin: 0; }
.topbar-subtitle { font-size: .78rem; color: #7a8194; }
.topbar-date { font-size: .8rem; color: #7a8194; }
.avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--gp-primary); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: .82rem;
}

.app-content { padding: 1.25rem; flex: 1; }
.app-footer {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
    padding: .8rem 1.25rem; font-size: .76rem; color: #8b91a3;
    border-top: 1px solid var(--gp-border); background: #fff;
}

.card { border: 1px solid var(--gp-border); border-radius: 14px; box-shadow: 0 1px 2px rgba(19, 23, 34, .04); }
.card-header { background: #fff; border-bottom: 1px solid var(--gp-border); font-weight: 600; border-radius: 14px 14px 0 0 !important; }
.table > :not(caption) > * > * { padding: .55rem .6rem; }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: #6c7385; background: #f8f9fc; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------ KPI */
.kpi {
    display: flex; align-items: center; gap: .85rem;
    background: #fff; border: 1px solid var(--gp-border); border-radius: 14px;
    padding: .85rem .95rem; height: 100%;
}
.kpi-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; flex: 0 0 44px; }
.kpi-body { min-width: 0; }
.kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: #7a8194; }
.kpi-value { font-size: 1.22rem; font-weight: 700; line-height: 1.2; }
.kpi-sub { font-size: .74rem; color: #8b91a3; }

.bg-soft-primary { background: #fff0eb; color: #ff5722; }
.bg-soft-blue    { background: #eaf1ff; color: #3b82f6; }
.bg-soft-green   { background: #e6f8ef; color: #12b76a; }
.bg-soft-orange  { background: #fff4e5; color: #f79009; }
.bg-soft-purple  { background: #f1ebff; color: #7c3aed; }
.bg-soft-red     { background: #fdecec; color: #e5484d; }

.chart-box { position: relative; height: 300px; }
.chart-box-sm { position: relative; height: 230px; }

/* ------------------------------------------------------------ POS */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.pos-item {
    background: #fff; border: 1px solid var(--gp-border); border-radius: 12px;
    padding: .65rem; cursor: pointer; text-align: left; transition: transform .12s, box-shadow .12s;
}
.pos-item:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(19, 23, 34, .09); border-color: #ffb59c; }
.pos-item:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.pos-item-name { font-weight: 600; font-size: .82rem; line-height: 1.25; }
.pos-item-price { color: var(--gp-primary); font-weight: 700; font-size: .85rem; }
.pos-item-stock { font-size: .7rem; color: #8b91a3; }
.pos-cart-wrap { position: sticky; top: 84px; }

/* ------------------------------------------------- KARTU MEMBER */
.card-print-area { display: flex; flex-wrap: wrap; gap: 14px; }
.member-card {
    width: 340px; height: 214px; border-radius: 14px; padding: 14px 16px;
    background: linear-gradient(135deg, #1c2130 0%, #131722 55%, #33240f 100%);
    color: #fff; position: relative; overflow: hidden;
    box-shadow: 0 8px 20px rgba(19, 23, 34, .25);
}
.member-card::after {
    content: ""; position: absolute; right: -55px; top: -55px;
    width: 165px; height: 165px; border-radius: 50%;
    background: rgba(255, 87, 34, .28);
}
.mc-head { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 2; }
.mc-brand { font-weight: 800; letter-spacing: 1px; font-size: .98rem; }
.mc-brand small { display: block; font-weight: 400; font-size: .6rem; letter-spacing: 1.5px; color: #ffb59c; }
.mc-type {
    background: var(--gp-primary); border-radius: 20px; padding: 2px 10px;
    font-size: .64rem; text-transform: uppercase; letter-spacing: .8px; font-weight: 700;
}
.mc-name { margin-top: 26px; font-size: 1.05rem; font-weight: 700; position: relative; z-index: 2; }
.mc-meta { font-size: .68rem; color: #c9cede; position: relative; z-index: 2; }
.mc-barcode { background: #fff; border-radius: 6px; padding: 3px 6px 1px; margin-top: 8px; display: inline-block; }
.mc-barcode svg { display: block; }
.mc-foot {
    position: absolute; left: 16px; right: 16px; bottom: 9px;
    display: flex; justify-content: space-between; font-size: .6rem; color: #9aa1b4;
}

/* ------------------------------------------------------- WHATSAPP */
.wa-thread { background: #ece5dd; border-radius: 12px; padding: .85rem; max-height: 420px; overflow-y: auto; }
.wa-bubble { max-width: 82%; padding: .5rem .7rem; border-radius: 10px; margin-bottom: .5rem; font-size: .84rem; white-space: pre-wrap; }
.wa-out { background: #dcf8c6; margin-left: auto; }
.wa-in { background: #fff; }
.wa-meta { font-size: .66rem; color: #7a8194; margin-top: 2px; }

/* ---------------------------------------------------------- PRINT */
.print-only { display: none; }

@media print {
    .no-print, .app-sidebar, .topbar, .app-footer { display: none !important; }
    body { background: #fff; }
    .app-content { padding: 0; }
    .print-only { display: block; }
    .card { border: none; box-shadow: none; }
    .member-card { box-shadow: none; page-break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .table thead th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed; left: 0; top: 0; bottom: 0;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    .app-sidebar.open { transform: translateX(0); }
    .sidebar-backdrop.show {
        display: block; position: fixed; inset: 0;
        background: rgba(19, 23, 34, .45); z-index: 1035;
    }
    .pos-cart-wrap { position: static; }
}

/* =====================================================================
 * DESIGN SIMPLE v3 (WellMove)
 * Tampilan flat, bersih, tanpa animasi/gradient berlebihan.
 * ===================================================================== */
:root {
    --wm-primary: #ff5a1f;
    --wm-ink: #1f2430;
    --wm-muted: #6b7280;
    --wm-border: #e6e8ee;
    --wm-bg: #f7f8fa;
    --wm-radius: 10px;
}

body {
    background: var(--wm-bg);
    color: var(--wm-ink);
    font-size: .92rem;
}

/* ---------------------------------------------------------- SIDEBAR
 * Sidebar sekarang putih, jadi SEMUA tulisan di dalamnya harus gelap.
 * Markup memakai class .sidebar-link / .sidebar-brand / .sidebar-group.
 */
.app-sidebar {
    background: #ffffff;
    color: var(--wm-ink);
    border-right: 1px solid var(--wm-border);
}
.app-sidebar .sidebar-brand {
    border-bottom: 1px solid var(--wm-border);
}
.app-sidebar .brand-logo {
    background: var(--wm-primary);
    color: #fff;
    border-radius: 9px;
    box-shadow: none;
}
.app-sidebar .brand-name {
    color: var(--wm-ink);
    font-weight: 700;
}
.app-sidebar .brand-sub {
    color: #9ca3af;
}
.app-sidebar .sidebar-group,
.app-sidebar .nav-section {
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9ca3af;
    margin: .9rem .75rem .35rem;
}
.app-sidebar .sidebar-link,
.app-sidebar .nav-link {
    color: #3f4654;
    border-radius: var(--wm-radius);
    padding: .5rem .7rem;
    margin-bottom: 2px;
    box-shadow: none;
}
.app-sidebar .sidebar-link i,
.app-sidebar .nav-link i {
    color: #8b93a3;
}
.app-sidebar .sidebar-link:hover,
.app-sidebar .nav-link:hover {
    background: #f2f4f7;
    color: var(--wm-ink);
}
.app-sidebar .sidebar-link:hover i,
.app-sidebar .nav-link:hover i {
    color: var(--wm-primary);
}
.app-sidebar .sidebar-link.active,
.app-sidebar .nav-link.active {
    background: var(--wm-primary);
    color: #fff;
    box-shadow: none;
}
.app-sidebar .sidebar-link.active i,
.app-sidebar .nav-link.active i {
    color: #fff;
}
.app-sidebar .sidebar-foot {
    padding: .75rem;
    border-top: 1px solid var(--wm-border);
}
/* Tombol Keluar: outline-light tidak terlihat di latar putih */
.app-sidebar .sidebar-foot .btn-outline-light {
    color: #b3261e;
    border-color: #e6c9c7;
    background: #fff;
}
.app-sidebar .sidebar-foot .btn-outline-light:hover {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}
/* Pengaman umum: teks putih di dalam sidebar putih dipaksa jadi gelap */
.app-sidebar .text-white,
.app-sidebar .text-light {
    color: var(--wm-ink) !important;
}

/* ----------------------------------------------------------- TOPBAR */
.app-topbar,
.topbar {
    background: #fff;
    border-bottom: 1px solid var(--wm-border);
}
.topbar-actions,
.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* ------------------------------------------------------------ CARD */
.card {
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius);
    box-shadow: none;
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--wm-border);
    font-size: .88rem;
    padding: .7rem .9rem;
}
.card-body { padding: .9rem; }

/* ------------------------------------------------------------- KPI */
.kpi-card {
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius);
    background: #fff;
    padding: .85rem .9rem;
    height: 100%;
}
.kpi-card .kpi-label { font-size: .72rem; color: var(--wm-muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi-card .kpi-value { font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.kpi-card .kpi-sub { font-size: .74rem; color: var(--wm-muted); }
.kpi-card .kpi-icon { font-size: 1.1rem; color: var(--wm-primary); }

/* ----------------------------------------------------------- TABEL */
.table { font-size: .85rem; margin-bottom: 0; }
.table > thead th {
    background: #fafbfc;
    color: var(--wm-muted);
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--wm-border);
    white-space: nowrap;
}
.table td, .table th { vertical-align: middle; }
.table .num, .table td.num, .table th.num { text-align: right; white-space: nowrap; }
.table-responsive { border-radius: var(--wm-radius); }

/* ----------------------------------------------------- FORM & BUTTON */
.form-label { font-weight: 500; color: #4b5563; margin-bottom: .2rem; }
.form-control, .form-select {
    border-radius: 8px;
    border-color: #dfe3ea;
    font-size: .88rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--wm-primary);
    box-shadow: 0 0 0 3px rgba(255, 90, 31, .12);
}
.btn { border-radius: 8px; font-size: .87rem; }
.btn-primary {
    background: var(--wm-primary);
    border-color: var(--wm-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: #e84a12;
    border-color: #e84a12;
}
.btn-outline-primary { color: var(--wm-primary); border-color: var(--wm-primary); }
.btn-outline-primary:hover { background: var(--wm-primary); border-color: var(--wm-primary); }

/* ----------------------------------------------------------- MODAL */
.modal-content { border: 0; border-radius: 12px; }
.modal-header { border-bottom: 1px solid var(--wm-border); padding: .8rem 1rem; }
.modal-title { font-size: .95rem; font-weight: 600; }
.modal-body { padding: 1rem; }

/* ------------------------------------------------- HALAMAN ABSENSI */
.scan-card { border: 1px solid var(--wm-border); border-radius: var(--wm-radius); background: #fff; }
.scan-box { padding: 1rem; text-align: center; }
.scan-icon { font-size: 1.6rem; color: var(--wm-primary); }
.scan-input {
    font-size: 1.05rem;
    text-align: center;
    letter-spacing: .06em;
    border-radius: 8px;
}
.scan-input.is-scanning { border-color: var(--wm-primary); }
.mode-switch .btn { font-size: .8rem; }
.scan-result { border: 1px solid var(--wm-border); border-radius: var(--wm-radius); padding: .85rem; background: #fff; }
.scan-name { font-weight: 600; font-size: 1rem; }
.scan-idle { color: var(--wm-muted); }
.scan-success { border-left: 3px solid #16a34a; }
.scan-info    { border-left: 3px solid #2563eb; }
.scan-warning { border-left: 3px solid #d97706; }
.scan-danger  { border-left: 3px solid #dc2626; }

@media print {
    .no-print, .app-sidebar, .app-topbar, .topbar { display: none !important; }
}

/* ================================================================
 * KARTU MEMBER + QR CODE (WellMove)
 * QR kotak dicetak di kartu, dibaca scanner QR yang ditempel.
 * ================================================================ */
.mc-name { margin-top: 12px; }
.mc-code {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mc-qr {
    background: #fff;
    border-radius: 6px;
    padding: 3px;
    line-height: 0;
    flex: 0 0 auto;
}
.mc-qr svg {
    display: block;
    width: 74px;
    height: 74px;
}
.mc-qr-text { min-width: 0; }
.mc-qr-label {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #b9c0d0;
}
.mc-qr-value {
    font-family: "Consolas", "Menlo", monospace;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
}
/* QR di luar kartu (mis. pratinjau) */
.qr-box {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius);
    padding: 8px;
    line-height: 0;
}

@media print {
    .mc-qr svg { width: 74px; height: 74px; }
    .mc-qr, .qr-box { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ================================================================
 * KARTU MEMBER v2 - QR BESAR DI KIRI (setengah kartu), NAMA DI KANAN
 * ================================================================ */
.member-card {
    display: flex;
    flex-direction: column;
}
.mc-body {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex: 1 1 auto;
    min-height: 0;
}
.mc-qr {
    background: #fff;
    border-radius: 8px;
    padding: 6px;
    line-height: 0;
    flex: 0 0 auto;
}
/* QR kira-kira setengah lebar kartu (340px) */
.mc-qr svg {
    display: block;
    width: 146px;
    height: 146px;
}
.mc-info {
    flex: 1 1 auto;
    min-width: 0;
}
.mc-name {
    margin-top: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}
.mc-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 4px;
    font-size: .66rem;
    color: #c9cede;
}
.mc-qr-value {
    margin-top: 6px;
    font-family: "Consolas", "Menlo", monospace;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: #fff;
    word-break: break-all;
}
.mc-qr-label {
    margin-top: 4px;
    font-size: .55rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #b9c0d0;
}

@media print {
    .mc-qr svg { width: 146px; height: 146px; }
}

/* ================================================================
 * QR KARTU v3 - JANGAN paksa ukuran SVG lewat CSS.
 * Ukuran sudah dihitung PHP dalam pixel bulat (1 modul = n pixel).
 * Kalau dipaksa ukuran pecahan, tepi modul bergeser dan scanner gagal.
 * ================================================================ */
.mc-qr svg,
.qr-box svg {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    image-rendering: pixelated;
}
.mc-qr {
    background: #fff;
    border-radius: 6px;
    padding: 5px;
}

/* ================================================================
 * KARTU MEMBER - TEMPLATE USER
 * Ukuran kartu dibuat ringkas seperti kartu nama/ID card.
 * QR tidak diubah sendiri; seluruh canvas kartu yang diperkecil.
 * ================================================================ */
.member-card {
    width: 340px;
    height: 214px;
    flex: 0 0 340px;
    padding: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    color: #fff;
    background: #11006f url('../img/membership-card-template.png') center center / 100% 100% no-repeat;
    box-shadow: 0 6px 16px rgba(19, 23, 34, .18);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.member-card .mc-qr-design {
    position: absolute;
    left: 14.5%;
    top: 28.3%;
    width: 15%;
    height: 18.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.member-card .mc-qr-design svg,
.member-card .mc-qr-design img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
}

.member-card .mc-info-design {
    position: absolute;
    left: 47.8%;
    top: 27.5%;
    width: 44%;
    max-width: 44%;
    z-index: 5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

.member-card .mc-info-kicker {
    font-size: 5px;
    line-height: 1;
    letter-spacing: .14em;
    font-weight: 700;
    opacity: .82;
    margin-bottom: 3px;
}

.member-card .mc-info-name {
    font-size: 13px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: .01em;
    word-break: break-word;
    margin-bottom: 7px;
}

.member-card .mc-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px 8px;
}

.member-card .mc-info-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.member-card .mc-info-label {
    font-size: 4px;
    line-height: 1;
    letter-spacing: .08em;
    font-weight: 700;
    opacity: .72;
}

.member-card .mc-info-item strong {
    font-size: 5.5px;
    line-height: 1.1;
    font-weight: 700;
    white-space: normal;
    word-break: break-word;
}

.member-card .mc-info-scan {
    margin-top: 7px;
    font-size: 4px;
    line-height: 1;
    letter-spacing: .08em;
    font-weight: 700;
    opacity: .68;
}

@media print {
    .card-print-area {
        gap: 8px;
    }
    .member-card {
        width: 340px;
        height: 214px;
        flex: 0 0 340px;
        box-shadow: none;
        page-break-inside: avoid;
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


/* ================================================================
 * WELL MOVE MEMBERSHIP CARD - compact business-card preview
 * Uses the user's template image without changing other card components.
 * ================================================================ */
/* ================================================================
 * WELL MOVE MEMBERSHIP CARD - compact business-card preview
 * QR mengisi hampir seluruh panel putih pada template.
 * Data member dipisahkan ke area biru di kanan agar tidak bertumpuk.
 * ================================================================ */
.wm-membership-card {
    width: 280px;
    height: 201px;
    flex: 0 0 280px;
    padding: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    color: #fff;
    background: #11006f url('../img/membership-card-template.png') center center / 100% 100% no-repeat;
    box-shadow: 0 4px 12px rgba(19, 23, 34, .16);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Panel putih pada template: x ~6.8%-47.9%, y ~20.7%-81.3%.
 * QR dibuat hampir memenuhi panel, hanya menyisakan gap tipis sebagai border. */
.wm-membership-card .wm-mc-qr-design {
    position: absolute;
    left: 8.5%;
    top: 21.6%;
    width: 37.5%;
    height: 58.0%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
    z-index: 4;
}

.wm-membership-card .wm-mc-qr-design svg,
.wm-membership-card .wm-mc-qr-design img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Info diletakkan sepenuhnya di area biru sebelah kanan panel putih. */
.wm-membership-card .wm-mc-info-design {
    position: absolute;
    left: 51.8%;
    top: 27.5%;
    width: 44.2%;
    max-width: 44.2%;
    z-index: 5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

.wm-membership-card .wm-mc-info-kicker {
    font-size: 4.8px;
    line-height: 1;
    letter-spacing: .12em;
    font-weight: 700;
    opacity: .82;
    margin-bottom: 3px;
}

.wm-membership-card .wm-mc-info-name {
    font-size: 11px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: .005em;
    word-break: break-word;
    margin-bottom: 5px;
}

.wm-membership-card .wm-mc-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 5px;
}

.wm-membership-card .wm-mc-info-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wm-membership-card .wm-mc-info-label {
    font-size: 3.7px;
    line-height: 1;
    letter-spacing: .07em;
    font-weight: 700;
    opacity: .72;
}

.wm-membership-card .wm-mc-info-item strong {
    font-size: 4.8px;
    line-height: 1.1;
    font-weight: 700;
    white-space: normal;
    word-break: break-word;
}

.wm-membership-card .wm-mc-info-scan {
    margin-top: 5px;
    font-size: 3.6px;
    line-height: 1;
    letter-spacing: .07em;
    font-weight: 700;
    opacity: .68;
}

@media print {
    .wm-membership-card {
        width: 280px;
        height: 201px;
        flex: 0 0 280px;
        box-shadow: none;
        page-break-inside: avoid;
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


/* =====================================================================
 * WELL MOVE UI v4 — global polish, accessibility, responsive consistency
 * ===================================================================== */
:root {
  --wm-primary: #2783de;
  --wm-primary-hover: #1f6fbe;
  --wm-ink: #2c2c2b;
  --wm-muted: #706e6a;
  --wm-bg: #f7f7f5;
  --wm-surface: #ffffff;
  --wm-soft: #f1f1ef;
  --wm-border: #e3e2df;
  --wm-success: #46a171;
  --wm-warning: #d5803b;
  --wm-danger: #e05a4f;
  --wm-radius: 10px;
}
body { background: var(--wm-bg); color: var(--wm-ink); line-height: 1.5; }
.app-main { min-height: 100vh; }
.app-content { width: 100%; max-width: 1480px; margin-inline: auto; padding: 24px 28px 40px; }
.topbar { min-height: 68px; padding: 10px 28px; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.topbar-title { font-size: 1.1rem; letter-spacing: -.015em; }
.app-sidebar { box-shadow: none; }
.sidebar-brand { min-height: 68px; }
.app-sidebar .brand-logo, .avatar { background: var(--wm-primary); }
.app-sidebar .sidebar-link.active { background: #e5f2fc; color: #185f9f; font-weight: 650; }
.app-sidebar .sidebar-link.active i { color: #2783de; }
.app-sidebar .sidebar-link { min-height: 42px; }
.card, .kpi, .kpi-card { background: var(--wm-surface); border-color: var(--wm-border); border-radius: var(--wm-radius); }
.card { box-shadow: 0 1px 2px rgba(0,0,0,.035); overflow: hidden; }
.card-header { min-height: 48px; display: flex; align-items: center; padding: 12px 16px; }
.card-body { padding: 16px; }
.kpi, .kpi-card { padding: 16px; }
.kpi-icon { border-radius: 9px; }
.table > :not(caption) > * > * { padding: 11px 14px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover { --bs-table-hover-bg: #f8fbfe; }
.form-control, .form-select { min-height: 42px; border-color: #d8d7d4; font-size: .9rem; }
.form-control-sm, .form-select-sm { min-height: 36px; }
.form-control:focus, .form-select:focus { border-color: var(--wm-primary); box-shadow: 0 0 0 3px rgba(39,131,222,.14); }
.btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-weight: 600; }
.btn-sm { min-height: 34px; }
.btn-primary { background: var(--wm-primary); border-color: var(--wm-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--wm-primary-hover); border-color: var(--wm-primary-hover); }
.btn-outline-primary { color: var(--wm-primary); border-color: #9fc8ee; }
.page-actions { margin-bottom: 16px; }
.alert { border-radius: 10px; border-width: 1px; }
.modal-content { border: 1px solid var(--wm-border); box-shadow: 0 18px 60px rgba(30,35,40,.16); }
.modal-footer { border-top-color: var(--wm-border); }
.dropdown-menu { border-color: var(--wm-border); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.10); }
.scan-box { padding: 20px 8px 8px; }
.scan-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 12px; background: #e5f2fc; border-radius: 12px; color: var(--wm-primary); }
.scan-input { min-height: 58px; font: 700 1.25rem/1.2 Consolas, Menlo, monospace; letter-spacing: .12em; }
.scan-input.is-valid { border-color: var(--wm-success); background-image: none; }
.scan-result { padding: 16px; }
.access-decision .decision-icon { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 1.75rem; }
.access-decision.is-active .decision-icon { color: var(--wm-success); background: #e8f1ec; }
.access-decision.is-expired .decision-icon { color: var(--wm-danger); background: #fce9e7; }
.access-decision.is-active .decision-kicker { color: var(--wm-success); }
.access-decision.is-expired .decision-kicker { color: var(--wm-danger); }
.membership-status-box { padding: 12px; border: 1px solid var(--wm-border); border-radius: 9px; background: var(--wm-soft); }
.decision-btn { min-height: 50px; }
.trainer-client-card code { font-size: .75rem; }
:focus-visible { outline: 3px solid rgba(39,131,222,.3); outline-offset: 2px; }
@media (max-width: 991.98px) {
  .app-content { padding: 20px 18px 32px; }
  .topbar { padding-inline: 18px; }
  .app-sidebar { width: min(86vw, 300px); flex-basis: min(86vw, 300px); }
}
@media (max-width: 575.98px) {
  .app-content { padding: 16px 12px 28px; }
  .topbar { min-height: 62px; padding: 8px 12px; }
  .topbar-subtitle, .topbar-date { display: none !important; }
  .topbar-actions { margin-right: 4px !important; }
  .card-header { padding: 11px 12px; }
  .card-body { padding: 13px; }
  .table > :not(caption) > * > * { padding: 10px 11px; }
  .page-actions .btn { flex: 1 1 calc(50% - 8px); }
  .modal-dialog { margin: 12px; }
  .decision-btn { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Sortir tabel global */
.table thead th.sortable-column {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.table thead th.sortable-column:hover {
  color: var(--wm-primary);
  background: #eef6fd;
}
.table thead th.sortable-column[aria-sort="ascending"],
.table thead th.sortable-column[aria-sort="descending"] {
  color: #185f9f;
  background: #e5f2fc;
}
.sort-indicator {
  display: inline-block;
  margin-left: 7px;
  font-size: .72rem;
  color: #9a9894;
  vertical-align: .02em;
}
.sortable-column[aria-sort="ascending"] .sort-indicator,
.sortable-column[aria-sort="descending"] .sort-indicator { color: var(--wm-primary); }
@media print {
  .sort-indicator { display: none !important; }
}


/* =====================================================================
 * KARTU MEMBER DIGITAL v2 — CR80 professional
 * ===================================================================== */
.card-selector { overflow: visible; }
.member-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; max-height:230px; overflow:auto; padding:4px; }
.member-choice { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--wm-border); border-radius:9px; cursor:pointer; background:#fff; }
.member-choice:hover { border-color:#9fc8ee; background:#f8fbfe; }
.member-choice span { min-width:0; display:flex; flex-direction:column; }
.member-choice small { color:var(--wm-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.empty-card-state { min-height:300px; display:grid; place-items:center; align-content:center; text-align:center; color:var(--wm-muted); border:1px dashed #c9c7c2; border-radius:12px; background:#fff; }
.empty-card-state i { font-size:42px; color:#9bbfe2; }.empty-card-state h2{font-size:1.1rem;margin:12px 0 2px}.empty-card-state p{margin:0}
.digital-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(390px,1fr)); gap:28px; align-items:start; }
.member-card-item { display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; }
.digital-member-card { width:min(100%,428px); aspect-ratio:1.5852; position:relative; overflow:hidden; border-radius:16px; color:#fff; background:linear-gradient(135deg,#0f2743 0%,#123e69 62%,#2783de 100%); box-shadow:0 12px 34px rgba(15,39,67,.18); padding:20px 22px 15px; isolation:isolate; }
.digital-member-card::before,.digital-member-card::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.055);z-index:-1}.digital-member-card::before{width:190px;height:190px;right:-60px;top:-95px}.digital-member-card::after{width:250px;height:250px;right:-45px;bottom:-190px}
.digital-card-accent{position:absolute;left:0;top:0;bottom:0;width:6px;background:#5e9fe8}.digital-card-header{display:flex;align-items:center;justify-content:space-between}.digital-brand{display:flex;align-items:center;gap:9px}.digital-brand>span:last-child{display:flex;flex-direction:column;line-height:1.05}.digital-brand b{font-size:13px}.digital-brand small{font-size:6px;letter-spacing:.14em;color:rgba(255,255,255,.62);margin-top:3px}.digital-logo{width:28px;height:28px;border-radius:7px;background:#fff;color:#2783de;display:grid;place-items:center;font-weight:800;font-size:14px}.digital-status{font-size:7px;font-weight:800;letter-spacing:.08em;padding:5px 9px;border-radius:999px}.status-active{background:#e8f1ec;color:#2f7b55}.status-expired,.status-none{background:#fce9e7;color:#b13e35}.status-expiring{background:#fbebde;color:#a65d25}
.digital-card-body{display:grid;grid-template-columns:126px 1fr;gap:20px;align-items:center;margin-top:18px}.digital-qr{background:#fff;border-radius:11px;padding:9px 9px 6px;text-align:center;color:#6b7280;box-shadow:0 2px 8px rgba(0,0,0,.08)}.digital-qr-image{height:102px;display:grid;place-items:center}.digital-qr svg,.digital-qr img{width:102px!important;height:102px!important}.digital-qr small{font-size:6px;font-weight:800;letter-spacing:.08em}.digital-info{min-width:0}.digital-eyebrow{font-size:7px;letter-spacing:.12em;color:#9cc7ee;font-weight:800}.digital-info h2{font-size:18px;line-height:1.08;margin:5px 0 4px;font-weight:800;overflow-wrap:anywhere}.digital-code{font:700 12px Consolas,monospace;color:rgba(255,255,255,.74);letter-spacing:.08em}.digital-detail{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.18)}.digital-detail span{font-size:6px;letter-spacing:.06em;color:rgba(255,255,255,.56);text-transform:uppercase}.digital-detail b{display:block;margin-top:3px;color:#fff;font-size:8px;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.digital-card-footer{position:absolute;left:22px;right:22px;bottom:12px;display:flex;justify-content:space-between;color:rgba(255,255,255,.52);font-size:6px;letter-spacing:.06em}.card-item-actions{width:min(100%,428px);display:grid;grid-template-columns:1fr 1fr;gap:8px}.card-action-status{grid-column:1/-1;font-size:.78rem;text-align:center;min-height:18px}.card-action-status.ok{color:#2f7b55}.card-action-status.error{color:#b13e35}.print-help{display:flex;gap:10px;align-items:flex-start;margin-top:24px;padding:14px 16px;border:1px solid #cfe3f5;border-radius:10px;background:#f5faff;color:#355a78}
@media(max-width:575.98px){.digital-card-grid{grid-template-columns:1fr;gap:22px}.digital-member-card{border-radius:12px}.digital-card-body{grid-template-columns:110px 1fr;gap:14px;margin-top:14px}.digital-qr-image{height:88px}.digital-qr svg,.digital-qr img{width:88px!important;height:88px!important}.digital-info h2{font-size:15px}.digital-detail{margin-top:8px;padding-top:8px}.member-picker{grid-template-columns:1fr}}
@media print{
 @page{size:A4 portrait;margin:10mm}
 .digital-card-grid{display:grid!important;grid-template-columns:repeat(2,85.6mm);gap:8mm 6mm;justify-content:center}
 .member-card-item{display:block;width:85.6mm;height:54mm;overflow:hidden;break-inside:avoid;page-break-inside:avoid}
 .digital-member-card{width:113.24mm!important;height:71.45mm!important;aspect-ratio:auto;border-radius:4mm;box-shadow:none;transform:scale(.756);transform-origin:top left;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .card-item-actions,.print-help{display:none!important}
}

/* Fluid scaling for membership cards in narrow containers */
.digital-member-card{container-type:inline-size;padding:4.67cqw 5.14cqw 3.5cqw}
.digital-card-accent{width:1.4cqw}.digital-brand{gap:2.1cqw}.digital-logo{width:6.55cqw;height:6.55cqw;border-radius:1.65cqw;font-size:3.27cqw}.digital-brand b{font-size:3.04cqw}.digital-brand small{font-size:1.4cqw;margin-top:.7cqw}.digital-status{font-size:1.64cqw;padding:1.17cqw 2.1cqw}
.digital-card-body{grid-template-columns:31.5% 1fr;gap:4.67cqw;margin-top:4.2cqw}.digital-qr{border-radius:2.57cqw;padding:2.1cqw 2.1cqw 1.4cqw}.digital-qr-image{height:auto;aspect-ratio:1}.digital-qr svg,.digital-qr img{width:100%!important;height:100%!important}.digital-qr small{font-size:1.4cqw}.digital-eyebrow{font-size:1.64cqw}.digital-info h2{font-size:4.2cqw;margin:1.17cqw 0 .93cqw}.digital-code{font-size:2.8cqw}.digital-detail{gap:1.87cqw;margin-top:2.8cqw;padding-top:2.34cqw}.digital-detail span{font-size:1.4cqw}.digital-detail b{margin-top:.7cqw;font-size:1.87cqw}.digital-card-footer{left:5.14cqw;right:5.14cqw;bottom:2.8cqw;font-size:1.4cqw}
@media(max-width:575.98px){.digital-card-body{grid-template-columns:31.5% 1fr;gap:4.67cqw;margin-top:4.2cqw}.digital-qr-image{height:auto}.digital-qr svg,.digital-qr img{width:100%!important;height:100%!important}.digital-info h2{font-size:4.2cqw}.digital-detail{margin-top:2.8cqw;padding-top:2.34cqw}}


/* v1.3 — restore original membership-card-template.png */
.digital-member-card{aspect-ratio:1748/1240;background:#10005f url('../img/membership-card-template.png') center/cover no-repeat!important;padding:0!important;border-radius:14px;container-type:inline-size}
.digital-member-card::before,.digital-member-card::after,.digital-card-accent,.digital-card-header,.digital-card-footer{display:none!important}
.digital-card-body{position:absolute;inset:0;display:block;margin:0!important}
.digital-qr{position:absolute;left:8.85%;top:22.25%;width:39.4%;height:55.5%;padding:1.5%!important;background:transparent;box-shadow:none;border-radius:0;color:#312b66;display:flex;flex-direction:column;align-items:center;justify-content:center}
.digital-qr-image{width:94%;height:auto;aspect-ratio:1}.digital-qr small{font-size:1.25cqw;color:#312b66;margin-top:1.1cqw;letter-spacing:.11em}
.digital-info{position:absolute;left:53.5%;top:27.5%;width:40%;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.digital-eyebrow{font-size:1.6cqw;color:rgba(255,255,255,.72)}.digital-info h2{font-size:4.4cqw;line-height:1.04;margin:1.2cqw 0 1cqw}.digital-code{font-size:2.7cqw;color:#fff}
.digital-detail{grid-template-columns:1fr;margin-top:3cqw;padding-top:2.5cqw;gap:2.2cqw;border-color:rgba(255,255,255,.25)}.digital-detail span{font-size:1.4cqw}.digital-detail b{font-size:2.05cqw;white-space:normal;line-height:1.15}
@media print{.member-card-item{width:85.6mm;height:60.72mm}.digital-member-card{width:85.6mm!important;height:60.72mm!important;transform:none!important;border-radius:3mm}.digital-card-grid{grid-template-columns:repeat(2,85.6mm)}}