/* ==========================================================================
   SC Marketplace — Shell dashboard (pembeli, penjual, admin) + komponen dashboard
   Hak cipta (c) 2026 sharecode.id — https://sharecode.id · Lisensi: LICENSE.md
   Pembeli & penjual: sidebar putih; admin: sidebar dark navy (.dash-admin)
   ========================================================================== */
:root { --dash-w: 264px; --dash-w-mini: 76px; --dash-top: 66px; }
body[data-area="buyer"], body[data-area="seller"], body[data-area="admin"] { background: var(--mp-bg); }
.dash-layout { display: flex; min-height: 100vh; }

/* Sidebar */
.dash-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--dash-w); background: #fff; border-right: 1px solid var(--mp-border); z-index: 1040; display: flex; flex-direction: column; transition: width .22s ease, transform .22s ease; }
.dash-brand { height: var(--dash-top); display: flex; align-items: center; justify-content: space-between; padding: 0 1.1rem; border-bottom: 1px solid var(--mp-border); flex-shrink: 0; }
.dash-brand a { display: flex; align-items: center; gap: .6rem; color: var(--mp-navy); min-width: 0; }
.dash-brand img { width: 36px; height: 36px; flex-shrink: 0; }
.dash-brand b { display: block; font-family: var(--mp-font-head); font-weight: 800; font-size: 18px; color: var(--mp-primary); line-height: 1.1; }
.dash-brand small { display: block; font-size: 11px; color: var(--mp-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.dash-close { background: none; border: 0; font-size: 18px; color: var(--mp-muted); }
.dash-nav { flex: 1; overflow-y: auto; padding: .75rem .7rem 1rem; scrollbar-width: thin; }
.dash-nav ul { list-style: none; padding: 0; margin: 0; }
.dash-group + .dash-group { margin-top: .6rem; }
.dash-group-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; padding: .55rem .75rem .35rem; white-space: nowrap; }
.dash-link { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: 9px; color: var(--mp-text); font-weight: 500; font-size: 13.5px; white-space: nowrap; transition: background .15s, color .15s; }
.dash-link i { font-size: 17px; color: var(--mp-muted); width: 20px; text-align: center; flex-shrink: 0; }
.dash-link span:not(.dash-badge) { overflow: hidden; text-overflow: ellipsis; }
.dash-link:hover { background: var(--mp-bg); color: var(--mp-primary); }
.dash-link:hover i { color: var(--mp-primary); }
.dash-link.active { background: var(--mp-primary-soft); color: var(--mp-primary); font-weight: 700; }
.dash-link.active i { color: var(--mp-primary); }
.dash-badge { margin-left: auto; background: var(--mp-primary); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 10px; padding: 0 .45rem; line-height: 18px; }
.dash-sidebar-foot { border-top: 1px solid var(--mp-border); padding: .75rem 1.1rem; font-size: 13px; }
.dash-sidebar-foot a { color: var(--mp-muted); font-weight: 600; }
.dash-sidebar-foot a:hover { color: var(--mp-primary); }
.dash-store-card { margin: .75rem .9rem 0; padding: .75rem; border-radius: 10px; background: var(--mp-bg); display: flex; align-items: center; gap: .6rem; }
.dash-store-card img { width: 38px; height: 38px; border-radius: 10px; }
.dash-store-card b { display: block; font-size: 13px; color: var(--mp-navy); line-height: 1.2; }
.dash-store-card small { font-size: 11.5px; color: var(--mp-success); }

/* Sidebar admin: dark navy */
.dash-admin { background: var(--mp-navy); border-right: 0; }
.dash-admin .dash-brand { border-bottom-color: rgba(255, 255, 255, .08); }
.dash-admin .dash-brand a, .dash-admin .dash-close { color: #fff; }
.dash-admin .dash-brand small { color: rgba(255, 255, 255, .55); }
.dash-admin .dash-group-title { color: rgba(255, 255, 255, .4); }
.dash-admin .dash-link { color: rgba(255, 255, 255, .75); }
.dash-admin .dash-link i { color: rgba(255, 255, 255, .5); }
.dash-admin .dash-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.dash-admin .dash-link:hover i { color: #fff; }
.dash-admin .dash-link.active { background: var(--mp-primary); color: #fff; box-shadow: 0 6px 16px rgba(244, 81, 30, .35); }
.dash-admin .dash-link.active i { color: #fff; }
.dash-admin .dash-link.active .dash-badge { background: #fff; color: var(--mp-primary); }
.dash-admin .dash-sidebar-foot { border-top-color: rgba(255, 255, 255, .08); }
.dash-admin .dash-sidebar-foot a { color: rgba(255, 255, 255, .6); }
.dash-admin .dash-nav { scrollbar-color: rgba(255, 255, 255, .2) transparent; }

/* Main & topbar */
.dash-main { flex: 1; margin-left: var(--dash-w); min-width: 0; display: flex; flex-direction: column; transition: margin .22s ease; }
.dash-topbar { position: sticky; top: 0; z-index: 1030; height: var(--dash-top); background: #fff; border-bottom: 1px solid var(--mp-border); display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; }
.dash-search { position: relative; width: 320px; }
.dash-search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--mp-muted); }
.dash-search .form-control { padding-left: 2.4rem; background: var(--mp-bg); border-color: transparent; }
.dash-search .form-control:focus { background: #fff; }
.dash-top-actions { display: flex; align-items: center; gap: .5rem; }
.dot-count { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 9px; background: var(--mp-danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; padding: 0 3px; border: 2px solid #fff; box-sizing: content-box; text-align: center; }
.dash-user { display: flex; align-items: center; gap: .55rem; padding: .25rem .5rem; border-radius: 10px; }
.dash-user b { display: block; font-size: 13px; line-height: 1.2; color: var(--mp-navy); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-user small { display: block; font-size: 11px; color: var(--mp-muted); line-height: 1.2; }
.dash-notif { width: 340px; max-width: 92vw; }
.dash-notif .dropdown-item { white-space: normal; }
.dash-notif .unread { background: #fffaf7; }
.dash-content { flex: 1; padding: 1.5rem; }
.dash-page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.dash-title { font-size: 22px; font-weight: 800; margin-bottom: .25rem; }
.dash-page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dash-page-actions > * { display: flex; flex-wrap: wrap; gap: .5rem; }
.dash-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: 1rem 1.5rem; font-size: 12.5px; color: var(--mp-muted); border-top: 1px solid var(--mp-border); background: #fff; }

/* Sidebar mini (desktop) */
@media (min-width: 992px) {
  body.dash-collapsed .dash-sidebar { width: var(--dash-w-mini); }
  body.dash-collapsed .dash-main { margin-left: var(--dash-w-mini); }
  body.dash-collapsed .dash-brand span, body.dash-collapsed .dash-link span, body.dash-collapsed .dash-group-title, body.dash-collapsed .dash-sidebar-foot, body.dash-collapsed .dash-store-card div { display: none; }
  body.dash-collapsed .dash-brand { justify-content: center; padding: 0; }
  body.dash-collapsed .dash-link { justify-content: center; padding: .65rem; }
  body.dash-collapsed .dash-store-card { justify-content: center; padding: .4rem; }
  body.dash-collapsed .dash-group + .dash-group { border-top: 1px solid var(--mp-border); padding-top: .4rem; }
  body.dash-collapsed .dash-admin .dash-group + .dash-group { border-top-color: rgba(255, 255, 255, .08); }
}
/* Mobile: sidebar off-canvas */
@media (max-width: 991.98px) {
  .dash-sidebar { transform: translateX(-100%); box-shadow: var(--mp-shadow-lg); }
  body.dash-open .dash-sidebar { transform: none; }
  .dash-main { margin-left: 0; }
  .dash-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1035; display: none; }
  body.dash-open .dash-backdrop { display: block; }
  body.dash-open { overflow: hidden; }
  .dash-topbar { padding: 0 1rem; }
  .dash-content { padding: 1rem; }
}

/* ---------- Komponen dashboard ---------- */
.stat-card { background: #fff; border: 1px solid var(--mp-border); border-radius: var(--mp-radius); padding: 1.1rem 1.15rem; height: 100%; display: flex; gap: .9rem; align-items: flex-start; box-shadow: var(--mp-shadow-sm); transition: all var(--mp-ease); }
a.stat-card:hover { box-shadow: var(--mp-shadow); transform: translateY(-2px); }
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; flex-shrink: 0; }
.stat-icon.orange { background: var(--mp-primary-soft); color: var(--mp-primary); }
.stat-icon.navy { background: #e2e8f0; color: var(--mp-navy); }
.stat-icon.green { background: #dcfce7; color: var(--mp-success); }
.stat-icon.red { background: #fee2e2; color: var(--mp-danger); }
.stat-icon.yellow { background: #fef3c7; color: #b45309; }
.stat-icon.blue { background: #e0f2fe; color: #0369a1; }
.stat-icon.purple { background: #ede9fe; color: #6d28d9; }
.stat-label { font-size: 12.5px; color: var(--mp-muted); font-weight: 500; margin-bottom: .15rem; }
.stat-value { font-family: var(--mp-font-head); font-weight: 800; font-size: 21px; color: var(--mp-navy); line-height: 1.2; word-break: break-word; }
.stat-trend { font-size: 12px; font-weight: 600; }
.stat-trend.up { color: var(--mp-success); } .stat-trend.down { color: var(--mp-danger); }
.chart-box { position: relative; height: 300px; }
.chart-box.sm { height: 220px; }
.wallet-card { border-radius: var(--mp-radius); padding: 1.25rem; color: #fff; height: 100%; position: relative; overflow: hidden; }
.wallet-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.wallet-card.available { background: linear-gradient(135deg, #16a34a, #22c55e); }
.wallet-card.held { background: linear-gradient(135deg, var(--mp-primary), var(--mp-primary-2)); }
.wallet-card.pending { background: linear-gradient(135deg, #b45309, #f59e0b); }
.wallet-card.withdrawn { background: linear-gradient(135deg, var(--mp-navy), #334e7e); }
.wallet-card.disputed { background: linear-gradient(135deg, #b91c1c, #ef4444); }
.wallet-card .wc-label { font-size: 13px; opacity: .9; display: flex; align-items: center; gap: .4rem; }
.wallet-card .wc-value { font-family: var(--mp-font-head); font-size: 24px; font-weight: 800; margin: .35rem 0; }
.wallet-card small { opacity: .85; }
.flow-steps { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.flow-step { flex: 1; min-width: 120px; text-align: center; position: relative; font-size: 12px; }
.flow-step .fs-dot { width: 38px; height: 38px; border-radius: 50%; margin: 0 auto .4rem; display: grid; place-items: center; background: var(--mp-bg); color: var(--mp-muted); border: 2px solid var(--mp-border); position: relative; z-index: 1; font-size: 16px; }
.flow-step::before { content: ''; position: absolute; top: 19px; left: -50%; width: 100%; height: 2px; background: var(--mp-border); }
.flow-step:first-child::before { display: none; }
.flow-step.done .fs-dot { background: var(--mp-success); border-color: var(--mp-success); color: #fff; }
.flow-step.done::before { background: var(--mp-success); }
.flow-step.current .fs-dot { background: var(--mp-primary); border-color: var(--mp-primary); color: #fff; box-shadow: 0 0 0 5px var(--mp-primary-soft); }
.flow-step b { display: block; color: var(--mp-navy); font-size: 12.5px; }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 1.1rem 1.75rem; }
.timeline li::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: -6px; width: 2px; background: var(--mp-border); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #cbd5e1; }
.timeline li.active::after { border-color: var(--mp-primary); background: var(--mp-primary); box-shadow: 0 0 0 4px var(--mp-primary-soft); }
.timeline li.done::after { border-color: var(--mp-success); }
.timeline small { color: var(--mp-muted); }
.tab-card .nav-tabs { padding: 0 1rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.toolbar .form-control, .toolbar .custom-select { width: auto; min-width: 160px; }
.dataTables_wrapper .dataTables_filter input { border-radius: var(--mp-radius-sm); border: 1px solid var(--mp-border); padding: .4rem .75rem; margin-left: 0; }
.dataTables_wrapper .dataTables_length select { border-radius: 8px; }
.dataTables_wrapper .dataTables_info { font-size: 13px; color: var(--mp-muted); }
.dataTables_wrapper .row:first-child { margin-bottom: .5rem; }
.table-actions { display: flex; gap: .3rem; justify-content: flex-end; }
.order-card { background: #fff; border: 1px solid var(--mp-border); border-radius: var(--mp-radius); margin-bottom: 1rem; overflow: hidden; }
.order-card .oc-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--mp-border); background: #fcfcfd; font-size: 13px; }
.order-card .oc-item { display: flex; gap: .85rem; padding: .85rem 1rem; }
.order-card .oc-item img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: 1px solid var(--mp-border); }
.order-card .oc-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .75rem 1rem; border-top: 1px dashed var(--mp-border); }
.chat-app { display: flex; height: calc(100vh - 210px); min-height: 480px; background: #fff; border: 1px solid var(--mp-border); border-radius: var(--mp-radius); overflow: hidden; }
.chat-list { width: 320px; border-right: 1px solid var(--mp-border); display: flex; flex-direction: column; }
.chat-list .cl-item { display: flex; gap: .65rem; padding: .8rem 1rem; border-bottom: 1px solid #f3f4f6; cursor: pointer; }
.chat-list .cl-item:hover, .chat-list .cl-item.active { background: var(--mp-primary-soft); }
.chat-room { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 1rem; background: #fafafa; }
.msg { max-width: 72%; margin-bottom: .6rem; padding: .55rem .85rem; border-radius: 14px; font-size: 13.5px; position: relative; word-wrap: break-word; }
.msg small { display: block; font-size: 10.5px; opacity: .65; margin-top: .15rem; text-align: right; }
.msg.them { background: #fff; border: 1px solid var(--mp-border); border-bottom-left-radius: 4px; }
.msg.me { background: var(--mp-primary); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.msg img { max-width: 220px; border-radius: 8px; display: block; }
.chat-input { border-top: 1px solid var(--mp-border); padding: .75rem; display: flex; gap: .5rem; align-items: center; }
@media (max-width: 767.98px) { .chat-list { width: 100%; } .chat-app.room-open .chat-list { display: none; } .chat-app:not(.room-open) .chat-room { display: none; } }
.perm-table th, .perm-table td { text-align: center; }
.perm-table td:first-child, .perm-table th:first-child { text-align: left; }
.upload-box { border: 2px dashed #d1d5db; border-radius: var(--mp-radius); background: #fafafa; padding: 1.5rem; text-align: center; cursor: pointer; transition: all var(--mp-ease); }
.upload-box:hover, .upload-box.drag { border-color: var(--mp-primary); background: var(--mp-primary-soft); }
.img-tiles { display: flex; flex-wrap: wrap; gap: .6rem; }
.img-tile { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--mp-border); background: var(--mp-bg); }
.img-tile img { width: 100%; height: 100%; object-fit: cover; }
.img-tile .rm { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; display: grid; place-items: center; }
.img-tile .main-tag { position: absolute; left: 0; bottom: 0; right: 0; background: var(--mp-primary); color: #fff; font-size: 10.5px; text-align: center; font-weight: 700; }
.list-check li { display: flex; gap: .5rem; margin-bottom: .45rem; }
.list-check li i { color: var(--mp-success); }
.kv { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: 13.5px; }
.kv span:first-child { color: var(--mp-muted); }
.kv.total { border-top: 1px dashed var(--mp-border); margin-top: .35rem; padding-top: .7rem; font-weight: 700; font-size: 15px; color: var(--mp-navy); }
.mini-progress { height: 6px; border-radius: 3px; background: var(--mp-border); overflow: hidden; }
.mini-progress span { display: block; height: 100%; background: var(--mp-primary); border-radius: 3px; }

/* Modal scrollable yang isinya dibungkus <form> (header/body/footer di dalam form) */
.modal-dialog-scrollable .modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.modal-dialog-scrollable .modal-content > form > .modal-body { overflow-y: auto; }
.table-responsive.dd-open { overflow: visible; }