/* ============================================================
   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; }
.cart-line-qty input { width:64px; }
.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; }
.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; }
.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; }
.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; }

.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; }