/*
 * Tambahkan perubahan tampilan baru di file ini.
 * File dibaca langsung oleh browser sehingga tidak memerlukan npm run build.
 */

.mobile-account { display: none; }
@media (max-width: 820px) {
    .mobile-account { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
    .mobile-account span { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: 12px; }
    .mobile-account button { flex: none; min-height: 44px; padding: 8px 14px; border: 1px solid #c8d0e0; border-radius: 10px; background: #fff; cursor: pointer; }
}
@media print { .mobile-account { display: none; } }

.brand-copy {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
}

.brand-name {
    display: block;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.brand-sub {
    display: block;
    line-height: 1.35;
    margin-top: 4px;
}

.avatar {
    flex: none;
}

.sidebar-user-copy {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
}

.sidebar-user-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-role {
    display: block;
    line-height: 1.35;
    margin-top: 2px;
}

.membership-card {
    grid-template-rows: auto 1fr;
}
/* Revision 2026-08: consolidated reports, live purchasing, and device/member cards */
.comparison-chart{position:relative;display:flex;align-items:flex-end;justify-content:space-around;gap:18px;min-height:250px;padding:24px 18px 0;border-bottom:1px solid var(--border,#dfe7e2);overflow:hidden}
.comparison-chart.empty{min-height:110px;align-items:center;justify-content:center;padding:12px;border-bottom:0}
.comparison-col{position:relative;z-index:2;display:flex;min-width:90px;flex:1;flex-direction:column;align-items:center;gap:5px;text-align:center}
.comparison-bar{width:min(74px,70%);min-height:4px;border-radius:10px 10px 2px 2px;background:linear-gradient(180deg,#6d9d99,#476c5c);box-shadow:0 8px 18px rgba(71,108,92,.16)}
.comparison-value{font-size:11px;font-weight:700;color:#476c5c}
.comparison-col b{font-size:11px}.comparison-col small{font-size:9px;color:#7d8983}
.comparison-trend{position:absolute;z-index:3;inset:16px 0 48px;width:100%;height:calc(100% - 64px);pointer-events:none;overflow:visible}
.purchase-live-form{display:grid;grid-template-columns:minmax(130px,1fr) minmax(135px,1fr) auto;gap:6px;align-items:center;min-width:340px}
.purchase-live-form select,.purchase-live-form input{min-height:34px;padding:6px 8px;font-size:11px}
.payment-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.list-item[type=button],button.list-item{background:transparent;cursor:pointer}
@media(max-width:760px){.comparison-chart{justify-content:flex-start;overflow-x:auto}.comparison-col{min-width:110px}.payment-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.purchase-live-form{min-width:310px}}
@media print{body:has(#card-print-modal.open) *{visibility:hidden}body:has(#card-print-modal.open) #card-print-modal,body:has(#card-print-modal.open) #card-print-modal *{visibility:visible}body:has(#card-print-modal.open) #card-print-modal{display:block!important;position:absolute;inset:0;padding:0;background:#fff}body:has(#card-print-modal.open) .membership-card{width:80mm;print-color-adjust:exact;-webkit-print-color-adjust:exact}}
/* Buffet quantities and card-first membership onboarding */
.membership-flow{background:linear-gradient(135deg,#f7fbf8,#fffaf4)}
.membership-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
/* Langkah berbaris: nomor lalu label. .service-option bawaan memakai grid satu kolom,
   sehingga harus dijadikan flex agar nomor dan label sejajar, tidak menumpuk. */
.membership-steps .service-option{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:12px 14px;min-height:58px;font-size:12px;line-height:1.3;text-align:left;cursor:default}
.membership-steps .service-option b{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#476c5c;color:#fff;font-size:12px}
.membership-steps .service-option span{min-width:0;overflow-wrap:anywhere}
#member-data-fields:disabled{opacity:.5}
.demo-account{border:1px solid #d8e1dc;background:#fff;border-radius:8px;padding:6px 9px;text-align:left;color:#35564a;cursor:pointer;font:inherit;font-size:12px}
.demo-account:hover{background:#edf5f0;border-color:#88a89a}
.qty input{border:1px solid #d7dfda;border-radius:7px;padding:3px 5px}
/* Empat langkah hanya sejajar bila kartunya cukup lebar untuk label satu baris. */
@media(max-width:1180px){.membership-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.membership-steps{grid-template-columns:1fr}}
/* Master role: matriks centang hak akses menu */
.role-matrix th,.role-matrix td{white-space:nowrap}
.role-matrix-module{vertical-align:bottom;padding-bottom:8px}
.role-matrix-module span{display:block;max-width:34px;font-size:10px;line-height:1.2;white-space:normal}
.role-matrix-cell{text-align:center}
.role-matrix-cell input{width:18px;min-height:18px;height:18px;margin:0;padding:0;accent-color:var(--forest,#637ba8);cursor:pointer}
.role-matrix-cell input:disabled{cursor:not-allowed;opacity:.45}
.role-module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
@media(max-width:760px){.role-matrix-module span{max-width:30px;font-size:9px}}
/* Cabang terkunci: peran selain superadmin & head of ops tidak dapat berpindah warung */
.store-switch-static{display:inline-flex;align-items:center;min-width:180px;min-height:41px;padding:0 12px;border:1px solid #dce2ed;border-radius:10px;background:var(--mist,#f5f7fb);color:var(--ink,#26334d);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.store-switch-static{width:min(132px,48vw);min-width:0;min-height:38px;padding:0 9px;font-size:11px}}
/* Revision 2026-08-17: inline inventory editing */
.inventory-live-table{min-width:1080px}
.inventory-live-input,.inventory-live-notes{min-height:34px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:11px;transition:.15s ease}
.inventory-live-input{width:92px}
.inventory-live-notes{width:170px}
.inventory-live-input:disabled{cursor:not-allowed;background:#f1f3f6;color:#8b94a5}
.inventory-live-input.is-saving,.inventory-live-notes.is-saving{opacity:.55;border-color:#91a4c7}
.inventory-live-input.is-saved,.inventory-live-notes.is-saved{border-color:#78978a;background:#f2f7f4}
.receipt-preview-wrap{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;justify-items:center;gap:8px}
.receipt-preview{width:58mm;background:#fff;border:1px solid #d9dde3;box-shadow:0 8px 22px rgba(35,48,72,.08);padding:18px 15px;text-align:center;color:#1e2634;font:10px/1.5 "Courier New",monospace;display:grid;gap:3px}
.receipt-preview hr{width:100%;border:0;border-top:1px dashed #707784;margin:7px 0}
.receipt-preview-logo{width:36px;height:36px;border:1px solid #333;border-radius:6px;margin:0 auto 4px;display:grid;place-items:center;font-weight:700;overflow:hidden}
.receipt-preview-logo img{width:100%;height:100%;object-fit:cover}
.receipt-preview-row{display:flex;justify-content:space-between;gap:12px;text-align:left}
.receipt-preview-row.total{font-weight:800;font-size:11px}
.receipt-preview-category{text-align:left;border-bottom:1px dotted #777;margin-top:5px;font-weight:700}