/* ============================================================
   Ksirqu — Portal Customer (layout & komponen portal)
============================================================ */
.portal-body { margin:0; background:#eef1f6; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.portal-app { display:flex; min-height:100vh; }

/* ---------- Sidebar ---------- */
.portal-side { width:236px; flex:0 0 236px; background:#0e1a2b; color:#c3d0e2; display:flex; flex-direction:column; }
.portal-side .p-brand { padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.portal-side .p-brand img { height:32px; width:auto; display:block; }
.p-menu { list-style:none; margin:0; padding:10px 10px; flex:1; }
.p-menu li { margin:2px 0; }
.p-menu a { display:flex; align-items:center; gap:10px; color:#c3d0e2; text-decoration:none; padding:10px 12px; border-radius:10px; font-size:.92rem; font-weight:600; }
.p-menu a:hover { background:rgba(255,255,255,.06); color:#fff; }
.p-menu a.active { background:#6576ff; color:#fff; }
.p-menu .ico { width:18px; text-align:center; }
.p-side-meta { padding:12px 16px; border-top:1px solid rgba(255,255,255,.08); font-size:.8rem; color:#93a5c4; }
.p-side-meta .role { font-weight:700; color:#fff; }

/* ---------- Main ---------- */
.portal-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.portal-top { background:#fff; border-bottom:1px solid #e4e9f2; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.portal-top .pt-title { font-weight:800; color:#1c2b4a; }
.portal-top .pt-sub { font-size:.8rem; color:#8094ae; }
.portal-user { display:flex; align-items:center; gap:10px; font-size:.9rem; }
.portal-user .avatar { width:34px;height:34px;border-radius:50%; background:#6576ff; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; }
.badge-role { padding:3px 9px; border-radius:999px; font-size:.72rem; font-weight:700; }
.badge-role.owner { background:#e8f7ef; color:#0a7a5c; }
.badge-role.manager { background:#eef4ff; color:#0f6eff; }
.badge-role.kasir { background:#fff4e6; color:#b26a00; }
.portal-content { padding:20px; flex:1; }

/* ---------- Cards & grid ---------- */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.stat-card { background:#fff; border:1px solid #e5eaf2; border-radius:14px; padding:16px 18px; }
.stat-card .lab { color:#8094ae; font-size:.8rem; }
.stat-card .val { font-size:1.4rem; font-weight:800; color:#1c2b4a; }
.panel { background:#fff; border:1px solid #e5eaf2; border-radius:14px; padding:16px 18px; margin-top:16px; }
.panel h5 { margin:0 0 12px; font-size:1rem; font-weight:800; color:#1c2b4a; }
.pill-free { background:#eef1f6; color:#6b7f9e; }
.pill-ok { background:#e6f8f1; color:#0a7a5c; }
.pill-warn { background:#fff4e6; color:#b26a00; }

/* ---------- POS ---------- */
.pos-layout { display:grid; grid-template-columns:1fr 400px; gap:16px; align-items:start; }
@media (max-width: 960px){ .pos-layout{ grid-template-columns:1fr; } }
.pos-products { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.pos-card { background:#fff; border:1px solid #e5eaf2; border-radius:12px; padding:12px; cursor:pointer; transition:.12s; text-align:center; }
.pos-card:hover { border-color:#6576ff; box-shadow:0 4px 14px rgba(101,118,255,.18); }
.pos-card .nm { font-weight:700; color:#1c2b4a; font-size:.85rem; min-height:32px; }
.pos-card .pr { color:#6576ff; font-weight:800; font-size:.9rem; }
.pos-card .st { color:#8094ae; font-size:.72rem; }
.pos-card.disabled { opacity:.5; pointer-events:none; }
.pos-sum { background:#fff; border:1px solid #e5eaf2; border-radius:12px; padding:12px; margin-top:8px; font-size:.9rem; }
/* Qty keranjang POS (input punya class .cart-qty): selalu tampil utuh, jangan biarkan menyusut */
#cartTable .th-qty { width: 80px; min-width: 80px; }
#cartTable .cart-qty { width: 60px; min-width: 60px; text-align: center; }
/* padding sel kompak agar tabel muat tanpa scroll horizontal */
#cartTable th, #cartTable td { padding-left: 3px; padding-right: 3px; }
/* sel tabel keranjang rata tengah vertikal agar lurus dgn input Qty & tombol */
#cartTable td { vertical-align: middle; }
/* kolom aksi paling kanan ramping agar tabel pas tanpa scroll */
#cartTable th:last-child, #cartTable td:last-child { width: 44px; min-width: 44px; padding-left: 2px; }
/* nama barang boleh wrap agar tidak mendorong kolom Qty keluar */
#cartTable td:first-child > div { overflow-wrap: anywhere; }
.total-box { font-size:1.6rem; font-weight:900; color:#0a7a5c; text-align:right; }

/* ---------- forms/tables small ---------- */
.table thead th { font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:#8094ae; }
.currency { text-align:right; white-space:nowrap; }
.muted { color:#8094ae; }
a { color:#6576ff; }
.footer-portal { color:#a4b2ca; font-size:.78rem; padding:10px 20px; text-align:center; }

/* ---------- Impersonasi (login as customer dari backend) ---------- */
.impersonate-bar { background:#fff4e6; border:1px solid #f3d9a4; color:#8a5b00; border-radius:12px; padding:10px 14px; font-size:.88rem; margin-bottom:16px; }
.impersonate-bar a { font-weight:700; color:#0f6eff; text-decoration:none; }

/* ============================================================
   Portal memakai shell DashLite (sama dgn backend)
   — hanya warna SIDEBAR yang dibedakan (hijau tua vs navy backend)
============================================================ */
.portal-shell .nk-sidebar { background: linear-gradient(180deg, #0d4039 0%, #0b5a4d 100%); }
.portal-shell .nk-sidebar { display:flex; flex-direction:column; }
.portal-shell .nk-sidebar .nk-sidebar-head { flex:0 0 auto; border-bottom: 1px solid rgba(255,255,255,.08); }
.portal-shell .nk-sidebar .nk-sidebar-body { flex:1 1 auto; overflow-y:auto; }
.portal-shell .nk-sidebar .nk-sidebar-footer { flex:0 0 auto; padding:12px; border-top: 1px solid rgba(255,255,255,.10); }
.portal-shell .nk-sidebar .nk-menu-link { color: #cfe3dd; }
.portal-shell .nk-sidebar .nk-menu-link:hover { color: #fff; background: rgba(255,255,255,.10); }
.portal-shell .nk-sidebar .nk-menu-item.active > .nk-menu-link,
.portal-shell .nk-sidebar .nk-menu-link.active { background: #22b092; color: #fff; box-shadow: none; }
.portal-shell .nk-sidebar .nk-menu-heading .overline-title { color: #9fd0c2; }
.portal-shell .nk-sidebar .nk-sidebar-logo { border-radius: 12px; }
.portal-shell .nk-header { border-bottom: 1px solid #e4e9f2; }

/* ---- Kartu info toko di footer sidebar ---- */
.portal-store-card { display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:10px 12px; color:#fff; }
.portal-store-card .ic { width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:rgba(255,255,255,.14); display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem; }
.portal-store-card .bd { min-width:0; }
.portal-store-card .nm { font-weight:800; font-size:.92rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.portal-store-card .sub { font-size:.72rem; opacity:.72; text-transform:lowercase; }
.portal-store-card .meta { font-size:.7rem; opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.portal-store-card .role-badge { display:inline-block; margin-top:4px; padding:1px 8px; border-radius:999px; font-size:.66rem; font-weight:800; text-transform:capitalize; background:rgba(255,255,255,.2); color:#eafff7; }
.portal-store-card .role-badge.owner { background:#d64545; color:#fff; }
.portal-store-card .role-badge.manager { background:#2f6fed; color:#fff; }
.portal-store-card .role-badge.kasir { background:#e8a23a; color:#fff; }
.portal-store-pill { display:inline-flex; align-items:center; gap:6px; background:#eaf4f0; color:#1c4b41; border:1px solid #cfe6dd; font-size:.78rem; font-weight:700; padding:5px 11px; border-radius:999px; }
.portal-store-pill .role-text { text-transform: capitalize; opacity:.7; }

/* ===== Sidebar warna per role: owner = merah, manager = biru, kasir = hijau ===== */
.portal-shell.role-owner .nk-sidebar { background: linear-gradient(180deg, #6d1414 0%, #8a1f1f 100%); }
.portal-shell.role-manager .nk-sidebar { background: linear-gradient(180deg, #123a6e 0%, #1557a8 100%); }
.portal-shell.role-kasir .nk-sidebar { background: linear-gradient(180deg, #0d4039 0%, #0b5a4d 100%); }

.portal-shell.role-owner .nk-sidebar .nk-menu-item.active > .nk-menu-link,
.portal-shell.role-owner .nk-sidebar .nk-menu-link.active { background: #d64545; box-shadow: none; }
.portal-shell.role-manager .nk-sidebar .nk-menu-item.active > .nk-menu-link,
.portal-shell.role-manager .nk-sidebar .nk-menu-link.active { background: #2f6fed; box-shadow: none; }
.portal-shell.role-kasir .nk-sidebar .nk-menu-item.active > .nk-menu-link,
.portal-shell.role-kasir .nk-sidebar .nk-menu-link.active { background: #22b092; box-shadow: none; }

.portal-shell.role-owner .portal-store-card { border-color: rgba(255,185,185,.4); }
.portal-shell.role-manager .portal-store-card { border-color: rgba(150,195,255,.4); }

/* Badge role generik (tabel Pengguna, dll) */
.portal-role-badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.7rem; font-weight:800; text-transform:capitalize; color:#fff; }
.portal-role-badge.owner { background:#d64545; }
.portal-role-badge.manager { background:#2f6fed; }
.portal-role-badge.kasir { background:#e8a23a; }

/* ============================================================
   CUSTOM CSS PORTAL (Ksirqu) — dipisah dari view.
   Base template = DashLite (dashlite.css + ksirqu.css, Bootstrap5).
   Semua kustomisasi portal taruh di file ini.
   ============================================================ */

/* --- Utilitas (dipindah dari inline style di view) --- */
.portal-title { font-weight: 800; color: #1c2b4a; }
.portal-desc { max-width: 820px; }
.portal-auth-wrap { width: 100%; max-width: 400px; }
/* Logo di sidebar portal: lebar 245px, tinggi 87px (contain, proporsional) */
.portal-logo { width: 245px; max-width: 100%; height: 87px; max-height: 87px; object-fit: contain; object-position: left center; }
.portal-logo-sm { height: 30px; width: auto; }
.val-pos { color: #0a7a5c; }
.val-neg { color: #b02a37; }

/* --- Lebar kolom / aksi tabel --- */
.th-qty { width: 74px; }
.th-aksi-sm { width: 110px; }
.th-aksi { width: 120px; }
.th-aksi-wide { width: 230px; }

/* --- Wrap toast portal (JS helper) --- */
#ksToastWrap { position: fixed; top: 16px; right: 16px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }

/* ===== Halaman auth portal (login / lupa password) ===== */
body.portal-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0e1a2b; margin: 0; padding: 16px; }
body.portal-auth .login-card { background: #fff; border-radius: 18px; padding: 32px; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
body.portal-auth .login-card h1 { font-size: 1.2rem; font-weight: 800; color: #1c2b4a; margin: 0 0 4px; }
body.portal-auth .login-card p { color: #8094ae; margin: 0 0 16px; font-size: .9rem; }
body.portal-auth .login-logo { display: block; margin: 0 auto 16px; height: 84px; width: auto; }
body.portal-auth .otp-input { letter-spacing: .5em; text-align: center; font-weight: 800; font-size: 1.25rem; }
body.portal-auth #msgBox { display: none; }

/* ===== Halaman pesan (403 / info) ===== */
body.portal-msg { background: #eef1f6; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body.portal-msg .msg-wrap { max-width: 520px; margin: 80px auto; }

/* ===== Tombol aksi di dalam tabel portal =====
   Catatan: line-box anak (ikon/teks) tombol di dalam .table sering terkolaps
   0 (tinggi tombol jadi hanya padding) → beri ukuran eksplisit agar rapi.
   Base tetap Bootstrap5/DashLite; aturan ini hanya normalisasi di tabel. */
.portal-shell .table .btn {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.portal-shell .table .btn-icon {
  min-width: 32px;
  padding-left: 0;
  padding-right: 0;
}
.portal-shell .table .btn .icon {
  font-size: 1.05rem;
  line-height: 1;
}

/* ============================================================
   PAGE HEAD & BREADCRUMB STANDAR (portal) — dipakai via partial
   views/portal/partials/page-head.ejs
   ============================================================ */
.portal-page-head { margin-bottom: 14px; padding-top: 2px; }
.portal-page-head .portal-head-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.portal-page-head .portal-page-title { margin-bottom: 0 !important; }
.portal-head-info { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #526484; font-size: .9rem; }
.portal-head-tools { margin-left: auto; }
.portal-head-tools .btn { white-space: nowrap; }


/* ============================================================
   GAP UTILITIES PORTAL (real CSS gap)
   CATATAN: di DashLite, kelas .gap-1..5 = UTILITY TINGGI (height),
   BUKAN jarak antar flex. Jangan pakai .gap-* utk flex spacing!
   ============================================================ */
.portal-gap { gap: .5rem; }
.portal-gap-sm { gap: .35rem; }
.portal-gap-lg { gap: .75rem; }
.portal-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 18px; }

/* Konten portal lebih lebar & lega */
.portal-shell .wide-xl { max-width: 1560px !important; }

/* ===== POS: Pembayaran & cetak struk/invoice ===== */
.invoice-box { font-size: 13px; line-height: 1.35; color: #111; }
.invoice-box .inv-hd { text-align: center; border-bottom: 1px dashed #b9b9b9; padding-bottom: 6px; margin-bottom: 6px; }
.invoice-box .inv-hd h6 { font-weight: 800; margin: 0 0 2px; }
.invoice-box .inv-meta { color: #555; font-size: 12px; }
.invoice-box table.inv-items { width: 100%; border-collapse: collapse; }
.invoice-box table.inv-items th { text-align: left; border-bottom: 1px solid #aaa; padding: 3px 4px; font-size: 12px; }
.invoice-box table.inv-items td { padding: 2px 4px; vertical-align: top; }
.invoice-box table.inv-items tfoot td { padding-top: 3px; }
.invoice-box table.inv-items tr.inv-total td { border-top: 1px dashed #999; font-weight: 700; font-size: 14px; }
.invoice-box .inv-foot { margin-top: 8px; text-align: center; color: #777; font-size: 12px; }
/* nomor seri / IMEI unit di baris nota */
.invoice-box .inv-sn { font-size: 11px; color: #444; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* penanda baris jasa di nota */
.invoice-box .inv-tag { font-size: 10px; border: 1px solid #999; border-radius: 4px; padding: 0 4px; color: #555; }
/* kartu unit di POS (pilih unit barang berseri) */
#upList .btn { display: block; width: 100%; text-align: left; }
#printArea { display: none; }
@media print {
  body * { visibility: hidden !important; }
  #printArea { display: block !important; visibility: visible !important; position: absolute; left: 0; top: 0; width: 100%; padding: 8px; }
  #printArea, #printArea * { visibility: visible !important; }
  #printArea .invoice-box { font-size: 12px; }
}

/* ===== Profil toko: logo upload ===== */
.store-logo-box { width: 120px; height: 120px; border: 1px dashed #c4c9d6; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; flex: 0 0 auto; }
.store-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.store-logo-thumb { max-height: 64px; max-width: 180px; object-fit: contain; display: block; margin-bottom: 8px; }

.invoice-box .inv-logo { display: block; margin: 0 auto 4px; max-height: 60px; max-width: 180px; object-fit: contain; }

/* Ukuran logo di CETAK lebih kecil agar proporsional dgn isi nota */
@media print {
  #printArea .invoice-box .inv-logo { max-height: 32px !important; max-width: 150px !important; margin-bottom: 2px !important; }
}