/*
* dashboard.css — VMarketing App
* Letakkan di: assets/css/dashboard.css
* Tambahkan di index.html SETELAH tailwind.css:
*
* ─────────────────────────────────────────────────────────────────────
*/
/* ══════════════════════════════════════════════════════
LAYOUT FIX — #dashboard-page context
page pakai "absolute inset-0 flex-col" dari Tailwind.
JANGAN set overflow:hidden di sini — akan memotong fee card.
Biarkan dash-scroll yang handle scroll dengan min-height:0.
══════════════════════════════════════════════════════ */
#dashboard-page.active {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
/* hanya saat active, dan biarkan scroller yang scroll */
}
/* ══════════════════════════════════════════════════════
ROOT VARIABLES
══════════════════════════════════════════════════════ */
.dash {
--d-navy: #0B1537;
--d-navy-mid: #1A2B5A;
--d-gold: #C9921A;
--d-gold-light: #F5C842;
--d-blue: #1E56C8;
--d-blue-lt: #4B7EF5;
--d-surface: #F4F6FB;
--d-card: #FFFFFF;
--d-txt1: #0D1633;
--d-txt2: #6B7A99;
--d-txt3: #A8B3CC;
--d-success: #16A34A;
--d-warn: #D97706;
--d-danger: #DC2626;
--d-radius: 20px;
--d-shadow: 0 4px 24px rgba(11, 21, 55, 0.08);
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
background: var(--d-surface);
}
/* ══════════════════════════════════════════════════════
STICKY TOP BAR
Selalu tampil di atas. Shrink otomatis saat scroll.
══════════════════════════════════════════════════════ */
.dash-topbar {
background: linear-gradient(160deg, var(--d-navy) 0%, var(--d-navy-mid) 100%);
/* 2026-05-19: tinggi dikunci 66px supaya match dengan .dash-subpage-header
(sub-page: padding 14+14 + back-btn 38 = 66px). */
height: 66px;
box-sizing: border-box;
padding: 8px 20px;
position: relative;
flex-shrink: 0;
z-index: 10;
overflow: hidden;
/* clip dekorasi blob saja */
display: flex;
flex-direction: column;
justify-content: center;
/* Shadow ke bawah agar terasa "mengapung" */
box-shadow: 0 4px 20px rgba(11, 21, 55, 0.25);
}
/* Decorative blobs */
.dash-topbar::before {
content: '';
position: absolute;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(245, 200, 66, 0.12) 0%, transparent 70%);
top: -60px;
right: -30px;
border-radius: 50%;
pointer-events: none;
}
.dash-topbar::after {
content: '';
position: absolute;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(75, 126, 245, 0.13) 0%, transparent 70%);
bottom: -20px;
left: -10px;
border-radius: 50%;
pointer-events: none;
}
/* Baris 1 — nama + actions, selalu visible */
.dash-topbar-row1 {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.dash-topbar-left {
display: flex;
flex-direction: column;
}
.dash-greeting-sub {
font-size: 7px;
line-height: 1.2;
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
letter-spacing: 0.4px;
text-transform: uppercase;
margin-bottom: 0;
/* Smooth hide saat collapse via parent */
transition: opacity 0.3s, max-height 0.3s;
}
.dash-greeting-name {
/* 2026-05-20: greeting-sub + motive di-hide; name solo di topbar → naikkan size. */
font-size: 18px;
font-weight: 800;
color: #fff;
letter-spacing: -0.4px;
line-height: 1.1;
text-decoration: none;
display: block;
}
.dash-greeting-name .highlight {
color: var(--d-gold-light);
}
/* Header actions (version + bell) */
/* 2026-05-19: absolute-position supaya vertically centered terhadap .dash-topbar
(66px) — bukan hanya terhadap row1. User minta "middle posisinya". */
.dash-header-actions {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
}
.dash-version-pill {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.55);
font-size: 10px;
padding: 3px 8px;
border-radius: 20px;
font-weight: 600;
}
.dash-icon-btn {
width: 36px;
height: 36px;
border-radius: 11px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
text-decoration: none;
transition: background 0.2s;
}
.dash-icon-btn:hover {
background: rgba(255, 255, 255, 0.18);
}
.dash-icon-btn i {
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
}
/* ── NOTIF BADGE ── */
#notif-badge.hidden {
display: none !important;
}
#notif-badge:not(.hidden) {
display: flex !important;
}
/* Baris 2 — motive line + streak/rank badges
Collapse (slide up + fade) saat scroll > threshold */
.dash-topbar-row2 {
position: relative;
z-index: 1;
/* 2026-05-19: animasi scroll-collapse dimatikan di dashboard.js (fixed-height header).
`overflow: hidden` ikut dihapus supaya motive (.dash-greeting-motive) dengan
margin-top negatif tidak ter-clip di top edge row2.
Transition properties dipertahankan supaya kalau dibalik (re-enable scroll-collapse)
tinggal hapus early-return di initScrollHeader + pasang lagi overflow:hidden. */
max-height: 100px;
opacity: 1;
transform: translateY(0);
transition:
max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.25s ease,
transform 0.3s ease,
margin 0.3s ease;
margin-top: 2px;
}
.dash-topbar-row2.collapsed {
max-height: 0;
opacity: 0;
transform: translateY(-6px);
margin-top: 0;
pointer-events: none;
}
.dash-greeting-motive {
font-size: 11px;
color: rgba(255, 255, 255, 0.65);
font-weight: 500;
line-height: 1.2;
margin-top: -5px;
margin-bottom: 0;
}
.dash-greeting-motive .em {
color: var(--d-gold-light);
font-weight: 800;
}
.dash-badges-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.dash-streak-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(245, 200, 66, 0.15);
border: 1px solid rgba(245, 200, 66, 0.3);
border-radius: 20px;
padding: 4px 11px;
font-size: 11px;
font-weight: 700;
color: var(--d-gold-light);
}
.dash-streak-badge .fire {
font-size: 13px;
animation: dash-fire 1.2s infinite alternate;
}
@keyframes dash-fire {
from {
transform: scale(1) rotate(-3deg);
}
to {
transform: scale(1.15) rotate(3deg);
}
}
.dash-rank-badge {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
padding: 4px 11px;
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
}
/* Mini fee summary — hidden default, visible saat collapsed */
.dash-topbar-mini {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 7px 14px;
position: relative;
z-index: 1;
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-4px);
transition:
max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.25s ease,
transform 0.3s ease,
margin 0.3s ease;
margin-top: 0;
}
.dash-topbar-mini.visible {
max-height: 50px;
opacity: 1;
transform: translateY(0);
margin-top: 10px;
}
.dash-mini-label {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.55);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dash-mini-fee {
font-size: 14px;
font-weight: 800;
color: var(--d-gold-light);
font-family: 'DM Mono', monospace, sans-serif;
}
/* ══════════════════════════════════════════════════════
SCROLL AREA
══════════════════════════════════════════════════════ */
.dash-scroll {
flex: 1;
min-height: 0;
/* KUNCI: tanpa ini flex:1 tidak bekerja di absolute context */
overflow-x: hidden;
overflow-y: auto;
padding: 16px 16px 96px;
display: flex;
flex-direction: column;
gap: 14px;
scrollbar-width: none;
background: var(--d-surface);
-webkit-overflow-scrolling: touch;
}
.dash-scroll::-webkit-scrollbar {
display: none;
}
/* ══════════════════════════════════════════════════════
MARKETING FEE CARD
══════════════════════════════════════════════════════ */
.dash-fee-card {
background: linear-gradient(135deg, #C9921A 0%, #F5C842 55%, #E0A818 100%);
border-radius: var(--d-radius);
padding: 18px;
position: relative;
/* overflow:hidden DIHAPUS — menyebabkan konten fee card terpotong */
box-shadow: 0 8px 28px rgba(201, 146, 26, 0.4);
animation: dash-fadein 0.35s ease both;
}
.dash-fee-card::before {
content: '';
position: absolute;
top: -28px;
right: -28px;
width: 110px;
height: 110px;
background: rgba(255, 255, 255, 0.13);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.dash-fee-card::after {
content: '';
position: absolute;
bottom: -18px;
left: 55px;
width: 75px;
height: 75px;
background: rgba(255, 255, 255, 0.07);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.dash-fee-label {
font-size: 10px;
font-weight: 700;
color: rgba(30, 10, 0, 0.55);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
position: relative;
z-index: 1;
}
.dash-fee-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
position: relative;
z-index: 1;
}
/* commission-display — ID dipakai app.js */
#commission-display {
font-size: 24px !important;
font-weight: 800 !important;
color: var(--d-navy) !important;
letter-spacing: -0.5px !important;
line-height: 1 !important;
background: none !important;
}
.dash-fee-toggle {
width: 32px;
height: 32px;
background: rgba(0, 0, 0, 0.12);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
flex-shrink: 0;
transition: background 0.2s;
}
.dash-fee-toggle:hover {
background: rgba(0, 0, 0, 0.2);
}
.dash-fee-toggle i {
color: var(--d-navy);
font-size: 13px;
}
.dash-fee-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 700;
color: var(--d-navy);
opacity: 0.65;
text-decoration: none;
transition: opacity 0.2s;
position: relative;
z-index: 1;
}
.dash-fee-link:hover {
opacity: 1;
}
/* ══════════════════════════════════════════════════════
TARGET PROGRESS BAR
══════════════════════════════════════════════════════ */
.dash-target-section {
margin-top: 14px;
padding-top: 13px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
}
.dash-target-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.dash-target-label {
font-size: 11px;
font-weight: 700;
color: rgba(30, 10, 0, 0.6);
}
.dash-target-count {
font-size: 11px;
font-weight: 800;
color: var(--d-navy);
}
.dash-progress-track {
width: 100%;
height: 8px;
background: rgba(0, 0, 0, 0.12);
border-radius: 20px;
overflow: hidden;
margin-bottom: 6px;
}
.dash-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--d-navy) 0%, rgba(11, 21, 55, 0.55) 100%);
border-radius: 20px;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.dash-progress-fill::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 6px;
background: rgba(255, 255, 255, 0.55);
border-radius: 20px;
animation: dash-glow 1.5s infinite;
}
@keyframes dash-glow {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.25;
}
}
.dash-target-msg {
font-size: 11px;
font-weight: 600;
color: rgba(30, 10, 0, 0.65);
line-height: 1.4;
margin-top: 6px;
}
.dash-target-msg .em {
font-weight: 800;
color: var(--d-navy);
}
/* ── 3 baris stacked: Booking / Closing / Akad ── */
.dash-target-section .dash-target-label {
display: block;
margin-bottom: 8px;
}
.dash-target-row {
margin-bottom: 8px;
}
.dash-target-row:last-of-type {
margin-bottom: 4px;
}
.dash-target-row-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.dash-target-row-label {
font-size: 10.5px;
font-weight: 700;
color: rgba(30, 10, 0, 0.7);
}
.dash-target-row-count {
font-size: 11px;
font-weight: 800;
color: var(--d-navy);
}
.dash-progress-track-sm {
height: 6px;
margin-bottom: 0;
}
/* ══════════════════════════════════════════════════════
UANG MENUNGGUMU
══════════════════════════════════════════════════════ */
.dash-waiting-section {
margin-top: 13px;
padding-top: 13px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
}
.dash-waiting-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.dash-waiting-title {
font-size: 12px;
font-weight: 800;
color: var(--d-navy);
}
.dash-waiting-total {
font-size: 11px;
font-weight: 700;
color: var(--d-navy);
opacity: 0.75;
background: rgba(0, 0, 0, 0.1);
padding: 2px 8px;
border-radius: 10px;
}
.dash-waiting-desc {
/* 2026-05-20: dinaikkan kontrasnya — sebelumnya rgba(30,10,0,0.55) 10px 400
hampir tidak kelihatan di gold gradient. Sekarang navy solid 11px 600. */
font-size: 11px;
color: var(--d-navy);
font-weight: 600;
margin-bottom: 9px;
line-height: 1.45;
}
.dash-pending-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.dash-pending-item {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(0, 0, 0, 0.08);
border-radius: 10px;
padding: 8px 11px;
}
.dash-pending-info {
display: flex;
align-items: center;
gap: 8px;
}
.dash-pending-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--d-warn);
flex-shrink: 0;
animation: dash-pulse 2s infinite;
}
@keyframes dash-pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(0.7);
}
}
.dash-pending-name {
font-size: 11px;
font-weight: 700;
color: var(--d-navy);
}
.dash-pending-unit {
font-size: 10px;
color: rgba(30, 10, 0, 0.5);
}
.dash-pending-amt {
font-size: 12px;
font-weight: 800;
color: var(--d-navy);
}
.dash-pending-empty {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 11px;
background: rgba(0, 0, 0, 0.04);
border-radius: 10px;
font-size: 11px;
color: rgba(30, 10, 0, 0.55);
}
.dash-pending-empty i {
font-size: 14px;
color: rgba(30, 10, 0, 0.4);
}
.dash-pending-skeleton {
height: 38px;
border-radius: 10px;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.06) 0%,
rgba(0, 0, 0, 0.12) 50%,
rgba(0, 0, 0, 0.06) 100%
);
background-size: 200% 100%;
animation: dash-shimmer 1.2s ease-in-out infinite;
}
@keyframes dash-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ══════════════════════════════════════════════════════
MOTIVATIONAL QUOTE CARD
══════════════════════════════════════════════════════ */
.dash-quote-card {
background: linear-gradient(135deg, var(--d-navy) 0%, var(--d-navy-mid) 100%);
border-radius: var(--d-radius);
padding: 16px 18px;
position: relative;
/* overflow:hidden DIHAPUS — menyebabkan quote card terpotong */
box-shadow: 0 6px 24px rgba(11, 21, 55, 0.2);
animation: dash-fadein 0.4s ease 0.1s both;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.dash-quote-card::before {
content: '"';
position: absolute;
font-size: 100px;
font-weight: 900;
color: rgba(255, 255, 255, 0.04);
top: -10px;
left: 10px;
line-height: 1;
font-family: Georgia, serif;
pointer-events: none;
z-index: 0;
}
.dash-quote-emoji {
font-size: 20px;
margin-bottom: 6px;
position: relative;
z-index: 1;
}
.dash-quote-text {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
line-height: 1.55;
margin-bottom: 10px;
font-style: italic;
position: relative;
z-index: 1;
}
.dash-quote-text .em {
color: var(--d-gold-light);
font-style: normal;
font-weight: 800;
}
.dash-quote-dots {
display: flex;
gap: 5px;
position: relative;
z-index: 1;
}
.dash-quote-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: all 0.3s;
}
.dash-quote-dot.active {
background: var(--d-gold-light);
width: 18px;
border-radius: 3px;
}
/* ══════════════════════════════════════════════════════
SECTION HEADER
══════════════════════════════════════════════════════ */
.dash-sec-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.dash-sec-title {
font-size: 14px;
font-weight: 700;
color: var(--d-txt1);
}
.dash-sec-link {
font-size: 11px;
font-weight: 600;
color: var(--d-blue);
background: #EEF2FF;
padding: 3px 10px;
border-radius: 20px;
text-decoration: none;
}
/* ══════════════════════════════════════════════════════
QUICK ACTION CARDS
══════════════════════════════════════════════════════ */
.dash-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 11px;
}
.dash-action-card {
border-radius: var(--d-radius);
padding: 18px 14px;
cursor: pointer;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 10px;
transition: transform 0.15s, box-shadow 0.15s;
position: relative;
overflow: hidden;
animation: dash-fadein 0.35s ease 0.15s both;
}
.dash-action-card:active {
transform: scale(0.97);
}
.dash-action-card::before {
content: '';
position: absolute;
top: -18px;
right: -18px;
width: 72px;
height: 72px;
background: rgba(255, 255, 255, 0.09);
border-radius: 50%;
}
.dash-action-card.booking {
background: linear-gradient(145deg, var(--d-blue) 0%, var(--d-blue-lt) 100%);
box-shadow: 0 6px 20px rgba(30, 86, 200, 0.3);
}
.dash-action-card.cek-status {
background: linear-gradient(145deg, #1A2B5A 0%, #2D4080 100%);
box-shadow: 0 6px 20px rgba(11, 21, 55, 0.22);
}
.dash-action-icon {
width: 42px;
height: 42px;
background: rgba(255, 255, 255, 0.15);
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
}
.dash-action-icon i {
color: #fff;
font-size: 17px;
}
.dash-action-label {
font-size: 13px;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.dash-action-sub {
font-size: 10px;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
margin-top: -6px;
}
/* ══════════════════════════════════════════════════════
GENERIC CARD
══════════════════════════════════════════════════════ */
.dash-card {
background: var(--d-card);
border-radius: var(--d-radius);
padding: 16px;
box-shadow: var(--d-shadow);
animation: dash-fadein 0.35s ease both;
}
.dash-card:nth-child(1) {
animation-delay: 0.05s;
}
.dash-card:nth-child(2) {
animation-delay: 0.10s;
}
.dash-card:nth-child(3) {
animation-delay: 0.15s;
}
.dash-card:nth-child(4) {
animation-delay: 0.20s;
}
@keyframes dash-fadein {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ══════════════════════════════════════════════════════
BOOKING TERAKHIR
══════════════════════════════════════════════════════ */
.dash-booking-row {
display: flex;
align-items: center;
gap: 12px;
}
.dash-booking-avatar {
width: 46px;
height: 46px;
background: linear-gradient(135deg, var(--d-blue), var(--d-blue-lt));
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.dash-booking-avatar i {
color: #fff;
font-size: 18px;
}
.dash-booking-info {
flex: 1;
min-width: 0;
}
.dash-booking-name {
font-size: 14px;
font-weight: 700;
color: var(--d-txt1);
margin-bottom: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-booking-unit {
font-size: 11px;
color: var(--d-txt2);
margin-bottom: 5px;
}
.dash-status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
}
.dash-status-badge.paid {
background: #DCFCE7;
color: var(--d-success);
}
.dash-status-badge.pending {
background: #FEF3C7;
color: var(--d-warn);
}
.dash-status-badge.expired {
background: #f7d7d7;
color: var(--d-danger);
}
.dash-eye-btn {
width: 34px;
height: 34px;
background: #FDF3D9;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
border: none;
}
.dash-eye-btn i {
color: var(--d-gold);
font-size: 13px;
}
/* ══════════════════════════════════════════════════════
LEADERBOARD MINI
══════════════════════════════════════════════════════ */
.dash-lb-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid #F0F2F8;
}
.dash-lb-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.dash-lb-item:first-child {
padding-top: 0;
}
.dash-lb-rank {
width: 28px;
height: 28px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
flex-shrink: 0;
}
.dash-lb-rank.r1 {
background: #FEF3C7;
color: #B45309;
}
.dash-lb-rank.r2 {
background: #F1F5F9;
color: #475569;
}
.dash-lb-rank.r3 {
background: #FEF2F2;
color: #B91C1C;
}
.dash-lb-rank.me {
background: #EEF2FF;
color: var(--d-blue);
}
.dash-lb-name {
flex: 1;
font-size: 12px;
font-weight: 600;
color: var(--d-txt1);
}
.dash-lb-name.me-label {
color: var(--d-blue);
font-weight: 800;
}
.dash-lb-val {
font-size: 12px;
font-weight: 700;
color: var(--d-txt2);
}
.dash-lb-you-tag {
font-size: 9px;
font-weight: 700;
color: var(--d-blue);
background: #EEF2FF;
padding: 1px 6px;
border-radius: 6px;
margin-left: 4px;
}
.dash-lb-gap {
font-size: 10px;
color: var(--d-warn);
font-weight: 600;
}
/* ══════════════════════════════════════════════════════
INFO STOK UNIT
══════════════════════════════════════════════════════ */
.dash-stock-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 0;
border-bottom: 1px solid #F0F2F8;
}
.dash-stock-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.dash-stock-row:first-child {
padding-top: 0;
}
.dash-stock-left {
display: flex;
align-items: center;
gap: 11px;
}
.dash-stock-icon {
width: 38px;
height: 38px;
background: var(--d-surface);
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.dash-stock-icon i {
font-size: 15px;
color: var(--d-txt2);
}
.dash-stock-name {
font-size: 14px;
font-weight: 700;
color: var(--d-txt1);
margin-bottom: 0;
}
.dash-stock-sub {
font-size: 10px;
color: var(--d-txt3);
}
/* Persuasif: stok kritis ≤ 5 */
.dash-stock-urgency {
font-size: 10px;
font-weight: 700;
color: var(--d-danger);
animation: dash-blink 1.5s infinite;
}
@keyframes dash-blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.35;
}
}
.dash-stock-right {
text-align: right;
}
.dash-stock-count {
font-size: 16px;
font-weight: 800;
color: var(--d-success);
margin-bottom: 1px;
}
.dash-stock-count.low {
color: var(--d-warn);
}
/* 6–10 unit */
.dash-stock-count.critical {
color: var(--d-danger);
}
/* ≤ 5 unit */
.dash-stock-avail {
font-size: 10px;
color: var(--d-txt3);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
/* ══════════════════════════════════════════════════════
PREMIUM TOAST SYSTEM
══════════════════════════════════════════════════════ */
.premium-toast-container {
position: fixed;
bottom: 80px;
/* Di atas bottom nav */
left: 50%;
transform: translateX(-50%);
z-index: 9999;
width: 90%;
max-width: 380px;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.premium-toast {
pointer-events: auto;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: rgba(15, 23, 42, 0.9);
/* Dark Slate / Navy Glass */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
border-radius: 14px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
animation: toast-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
transition: all 0.3s ease;
}
.premium-toast.hiding {
animation: toast-slide-out 0.3s ease forwards;
}
.premium-toast-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
font-size: 12px;
}
.premium-toast-msg {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.2px;
}
.premium-toast.success .premium-toast-icon {
background: #10B981;
/* Emerald */
color: #fff;
}
.premium-toast.info .premium-toast-icon {
background: var(--d-blue);
color: #fff;
}
@keyframes toast-slide-in {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes toast-slide-out {
to {
transform: translateY(20px) scale(0.95);
opacity: 0;
}
}
/* ══════════════════════════════════════════════════════
SUB-PAGE SHELL (booking/payment/customer/stock/profile/commission)
Aplikasikan ke
Header navy gradient + main bg surface + Plus Jakarta Sans
══════════════════════════════════════════════════════ */
.dash-subpage {
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
background: #F4F6FB;
}
.dash-subpage-header {
background: linear-gradient(160deg, #0B1537 0%, #1A2B5A 100%);
padding: 14px 16px;
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(11, 21, 55, 0.22);
color: #fff;
overflow: hidden;
}
/* decorative blob (gold) — subtle nuance */
.dash-subpage-header::before {
content: '';
position: absolute;
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(245, 200, 66, 0.14) 0%, transparent 70%);
top: -40px;
right: -30px;
border-radius: 50%;
pointer-events: none;
}
.dash-subpage-header .dash-back-btn {
position: relative;
z-index: 1;
color: rgba(255, 255, 255, 0.92);
background: rgba(255, 255, 255, 0.10);
width: 38px;
height: 38px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
flex-shrink: 0;
text-decoration: none;
transition: background 0.15s, transform 0.1s;
}
.dash-subpage-header .dash-back-btn:hover {
background: rgba(255, 255, 255, 0.18);
}
.dash-subpage-header .dash-back-btn:active {
transform: scale(0.94);
}
.dash-subpage-header .dash-page-title {
position: relative;
z-index: 1;
flex: 1;
text-align: center;
color: #fff;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.2px;
margin: 0;
padding-right: 38px; /* compensate untuk back-btn supaya title benar-benar center */
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.dash-subpage-main {
flex-grow: 1;
padding: 16px;
padding-bottom: 96px;
background: #F4F6FB;
overflow-y: auto;
}
.dash-subpage-main.no-pad {
padding: 0;
padding-bottom: 0;
}
.dash-subpage-main.center-text {
text-align: center;
padding: 24px 16px 96px;
}
/* ══════════════════════════════════════════════════════
BOTTOM NAV — glassmorphism navy + gold active accent
Override default Tailwind dari markup #bottom-nav.
Tetap kompatibel dengan router.js yang toggle
.text-amber-600 (active) / .text-gray-500 (inactive).
══════════════════════════════════════════════════════ */
#bottom-nav {
background: linear-gradient(180deg, rgba(11, 21, 55, 0.94) 0%, rgba(26, 43, 90, 0.97) 100%) !important;
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border-top: 1px solid rgba(245, 200, 66, 0.18) !important;
box-shadow: 0 -8px 28px rgba(11, 21, 55, 0.30), 0 -1px 0 rgba(255, 255, 255, 0.04) inset;
padding-bottom: env(safe-area-inset-bottom, 0px);
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
/* JANGAN set position/overflow di sini — markup pakai Tailwind .fixed bottom-0
(position: fixed). ID specificity lebih tinggi dari class, jadi override
position akan lepasin nav dari fixed-bottom dan dia jatuh ke top of flow. */
}
/* Subtle gold sparkle line tepat di atas bar */
#bottom-nav::before {
content: '';
position: absolute;
top: -1px;
left: 18%;
right: 18%;
height: 2px;
background: linear-gradient(90deg, transparent 0%, rgba(245, 200, 66, 0.55) 50%, transparent 100%);
filter: blur(0.5px);
pointer-events: none;
}
#bottom-nav > .grid {
height: 64px;
padding: 6px 8px 4px;
position: relative;
/* 2026-05-20: Tailwind .grid-cols-5 belum ter-generate di tailwind.css (CLI
hanya scan class yang dipakai sebelum build). Force 5-column layout di
sini supaya tab tidak nge-stack vertikal. Lebih reliable daripada wajibkan
Tailwind rebuild sebelum tiap commit. */
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#bottom-nav .nav-link {
position: relative;
color: rgba(255, 255, 255, 0.55);
border-radius: 14px;
padding: 4px 0 6px;
transition: color 0.2s, transform 0.18s;
-webkit-tap-highlight-color: transparent;
}
#bottom-nav .nav-link i {
font-size: 1.18rem;
line-height: 1;
transition:
transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
color 0.2s,
text-shadow 0.25s;
}
#bottom-nav .nav-link span {
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.2px;
margin-top: 6px !important;
transition: color 0.2s, transform 0.25s, opacity 0.2s;
opacity: 0.85;
}
/* Press feedback — micro scale */
#bottom-nav .nav-link:active i {
transform: scale(0.92);
}
/* === PER-TAB INACTIVE COLOR — SCOPED ke body[data-theme="theme-2"] (2026-05-20)
───────────────────────────────────────────────────────────────────────────
Default (theme-1) = nav inactive uniform white (rule `.text-gray-500 i/span`
di bawah yang mengatur). Theme-2 = warna-warni per-tab.
`:not(.text-amber-600)` di parent supaya saat tab aktif, rule per-tab TIDAK
match → cuma active rule (`.text-amber-600`) yang apply → tetap gold.
Tanpa :not, specificity scoped theme-2 (1,3,1) > active (1,2,1) → active
kalah dan nav aktif jadi pakai per-tab color, padahal user mau gold.
Pakai `:not(.text-amber-600)` di parent — child selector inherit konteks
parent. Specificity jadi (1,4,1) — tetap menang vs `.text-gray-500 i`
(1,2,1). !important ditahan untuk defense terhadap Tailwind utility. */
/* Per-tab nav inactive color:
- theme-2: HANYA Booking yang merah (per user request 2026-05-21);
home/konsumen/stock/setting inherit default theme-1 (uniform white).
- theme-3: full warna-warni 5 tab.
Theme-4 punya rule pastel sendiri (lihat blok theme-4 di akhir file). */
/* Home — theme-3 only (theme-2 uniform white) */
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-home:not(.text-amber-600),
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-home:not(.text-amber-600) i,
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-home:not(.text-amber-600) span { color: #60a5fa !important; } /* blue-400 */
/* Booking — theme-2 + theme-3 (eksepsi merah di theme-2 per user request) */
body[data-theme="theme-2"] #bottom-nav .nav-link.nav-booking:not(.text-amber-600),
body[data-theme="theme-2"] #bottom-nav .nav-link.nav-booking:not(.text-amber-600) i,
body[data-theme="theme-2"] #bottom-nav .nav-link.nav-booking:not(.text-amber-600) span,
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-booking:not(.text-amber-600),
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-booking:not(.text-amber-600) i,
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-booking:not(.text-amber-600) span { color: #f87171 !important; } /* red-400 */
/* Konsumen — theme-3 only */
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-konsumen:not(.text-amber-600),
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-konsumen:not(.text-amber-600) i,
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-konsumen:not(.text-amber-600) span { color: #4ade80 !important; } /* green-400 */
/* Stock — theme-3 only */
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-stock:not(.text-amber-600),
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-stock:not(.text-amber-600) i,
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-stock:not(.text-amber-600) span { color: #a78bfa !important; } /* violet-400 */
/* Setting — theme-3 only */
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-setting:not(.text-amber-600),
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-setting:not(.text-amber-600) i,
body[data-theme="theme-3"] #bottom-nav .nav-link.nav-setting:not(.text-amber-600) span { color: #cbd5e1 !important; } /* slate-300 */
/* ════════════════════════════════════════════════════════════════════════
THEME-SPECIFIC: greeting sub visibility + dashboard topbar behavior
(2026-05-20 — added bersama theme picker)
════════════════════════════════════════════════════════════════════════ */
/* "Selamat Pagi/Siang/Malam" — default visible (Theme 1 = classic dashboard).
Theme 2 & 3 hide-kan untuk look minimalis. setGreeting() tetap update teks
regardless. */
body[data-theme="theme-2"] .dash-greeting-sub,
body[data-theme="theme-3"] .dash-greeting-sub,
body[data-theme="theme-4"] .dash-greeting-sub {
display: none;
}
/* Topbar rounded — terasa "card" yang mengambang. Shared theme-3 + theme-4.
Theme-2 tidak rounded (per user request 2026-05-21). */
body[data-theme="theme-3"] .dash-topbar,
body[data-theme="theme-4"] .dash-topbar {
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
}
/* Scroll-away header — KHUSUS theme-2.
Caranya: pindahkan ownership scroll dari .dash-scroll ke #dashboard-page.
Default (theme-1, theme-3, theme-4): #dashboard-page overflow:hidden +
.dash-scroll flex:1 overflow-y:auto → header sticky di luar scroll
container (stay-on-top).
Theme-2 saja: #dashboard-page jadi block + overflow-y:auto, .dash-scroll
flow normal tanpa scroll sendiri → topbar ikut scroll naik.
(2026-05-21: theme-3 + theme-4 di-revert ke stay-on-top per request user.) */
body[data-theme="theme-2"] #dashboard-page.active {
display: block !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
}
body[data-theme="theme-2"] .dash-scroll {
flex: initial;
overflow: visible;
min-height: auto;
}
/* ────────────────────────────────────────────────────────────────────────
THEME 2 — Dashboard content: hide quote card + split fee card jadi 3
──────────────────────────────────────────────────────────────────────── */
/* Default (Theme 1): variant ke-2 dari label & waiting section hidden.
Saat Theme 2 aktif, swap visibility. */
.dash-fee-label-v2,
.dash-waiting-v2 {
display: none;
}
/* Theme 2, 3 & 4 — hide motivational quote card sepenuhnya */
body[data-theme="theme-2"] .dash-quote-card,
body[data-theme="theme-3"] .dash-quote-card,
body[data-theme="theme-4"] .dash-quote-card {
display: none;
}
/* Theme 2, 3 & 4 — swap variant text label + swap waiting section */
body[data-theme="theme-2"] .dash-fee-label-v1,
body[data-theme="theme-3"] .dash-fee-label-v1,
body[data-theme="theme-4"] .dash-fee-label-v1 { display: none; }
body[data-theme="theme-2"] .dash-fee-label-v2,
body[data-theme="theme-3"] .dash-fee-label-v2,
body[data-theme="theme-4"] .dash-fee-label-v2 { display: block; }
body[data-theme="theme-2"] .dash-waiting-v1,
body[data-theme="theme-3"] .dash-waiting-v1,
body[data-theme="theme-4"] .dash-waiting-v1 { display: none; }
body[data-theme="theme-2"] .dash-waiting-v2,
body[data-theme="theme-3"] .dash-waiting-v2,
body[data-theme="theme-4"] .dash-waiting-v2 { display: block; }
/* Theme 2, 3 & 4 — strip styling dari .dash-fee-card parent, jadikan flex column
gap (jarak antar sub-card). Decorative blob (::before/::after) di-hide
karena sudah tidak ada bg di parent. Theme-4 override jadi grid lagi
di blok dedicated bawah. */
body[data-theme="theme-2"] .dash-fee-card,
body[data-theme="theme-3"] .dash-fee-card,
body[data-theme="theme-4"] .dash-fee-card {
background: transparent;
box-shadow: none;
padding: 0;
border-radius: 0;
animation: none;
display: flex;
flex-direction: column;
gap: 14px;
}
body[data-theme="theme-2"] .dash-fee-card::before,
body[data-theme="theme-2"] .dash-fee-card::after,
body[data-theme="theme-3"] .dash-fee-card::before,
body[data-theme="theme-3"] .dash-fee-card::after,
body[data-theme="theme-4"] .dash-fee-card::before,
body[data-theme="theme-4"] .dash-fee-card::after {
display: none;
}
/* Common sub-section reset (theme 2, 3 & 4): existing border-top + margin-top
asumsi parent fee-card kontinu. Tiap theme menjadikan sub card sendiri. */
body[data-theme="theme-2"] .dash-fee-card > .dash-target-section,
body[data-theme="theme-2"] .dash-fee-card > .dash-waiting-v2,
body[data-theme="theme-3"] .dash-fee-card > .dash-target-section,
body[data-theme="theme-3"] .dash-fee-card > .dash-waiting-v2,
body[data-theme="theme-4"] .dash-fee-card > .dash-target-section,
body[data-theme="theme-4"] .dash-fee-card > .dash-waiting-v2 {
border-radius: var(--d-radius);
padding: 18px;
border-top: none;
margin-top: 0;
}
/* Common card base (3 card position relative + radius) di theme 2, 3 & 4 */
body[data-theme="theme-2"] .dash-fee-card-top,
body[data-theme="theme-3"] .dash-fee-card-top,
body[data-theme="theme-4"] .dash-fee-card-top {
border-radius: var(--d-radius);
padding: 18px;
position: relative;
}
/* === THEME 2 — Gold gradient untuk 3 card (Total Marketing Fee Cair, Target
Bulan Ini, Uang Menunggumu). Tone konsisten gold di seluruh dashboard. === */
body[data-theme="theme-2"] .dash-fee-card-top,
body[data-theme="theme-2"] .dash-fee-card > .dash-target-section,
body[data-theme="theme-2"] .dash-fee-card > .dash-waiting-v2 {
background: linear-gradient(135deg, #C9921A 0%, #F5C842 55%, #E0A818 100%);
box-shadow: 0 8px 28px rgba(201, 146, 26, 0.4);
}
/* ── Theme 2 — Sub-boxes "Berkas Belum Komplit" & "UM Belum Lunas" di Uang
Menunggumu. Default .dash-waiting-cat bg `#F4F6FB` (abu-biru) bentrok dengan
gold parent. Mirror pattern theme-4 (.dash-waiting-cat semi-transparent white
over mint hijau): white tipis over gold → efek "gold muda" frosted, border
gold-tinted halus. Title/sub/count pakai default karena kontras OK di bg
muda. ── */
body[data-theme="theme-2"] .dash-waiting-cat {
background: rgba(255, 255, 255, 0.55);
border-color: rgba(201, 146, 26, 0.28);
}
body[data-theme="theme-2"] .dash-waiting-cat:active {
background: rgba(255, 255, 255, 0.78);
}
/* === THEME 3 — Vistaland mewah: BLACK & GOLD luxury palette ===
Berdasarkan website vistalandgroup.com: header & footer hitam dominan,
body putih, accent gold di logo + CTA. Mewah-corporate feel.
3-stop black gradient di card (lebih kaya dari solid black) + tipis gold
border untuk highlight tepi (luxury detail). Text di dalam di-override jadi
white + gold (next blok di bawah). */
body[data-theme="theme-3"] .dash-fee-card-top,
body[data-theme="theme-3"] .dash-fee-card > .dash-target-section,
body[data-theme="theme-3"] .dash-fee-card > .dash-waiting-v2 {
background: linear-gradient(135deg, #000000 0%, #1f1f1f 55%, #0a0a0a 100%);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(245, 200, 66, 0.18);
}
/* ── Theme 3 — Header & bottom nav: hitam (override navy default) ── */
body[data-theme="theme-3"] .dash-topbar {
background: linear-gradient(160deg, #000000 0%, #1a1a1a 100%);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
body[data-theme="theme-3"] #bottom-nav {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.96) 0%, rgba(15, 15, 15, 0.97) 100%) !important;
border-top-color: rgba(245, 200, 66, 0.28) !important;
box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45), 0 -1px 0 rgba(255, 255, 255, 0.04) inset !important;
}
/* ── Theme 3 — Text overrides untuk card hitam ──
Existing text di card pakai warna dark navy / dark brown (asumsi bg gold
terang). Di Theme 3 (bg hitam) text tsb tidak terbaca. Override ke
white/gold sesuai luxury palette Vistaland. */
/* Label "TOTAL MARKETING FEE CAIR" — white dim */
body[data-theme="theme-3"] .dash-fee-label-v2 {
color: rgba(255, 255, 255, 0.65);
}
/* Amount Rp — gold (highlight money) */
body[data-theme="theme-3"] #commission-display {
color: #F5C842 !important;
}
/* "Lihat Rincian" link — gold */
body[data-theme="theme-3"] .dash-fee-link {
color: #F5C842;
}
/* Eye toggle button — gold pill bg + gold icon. Icon `` punya rule sendiri
`.dash-fee-toggle i { color: var(--d-navy) }` di line ~440 — selector parent
tidak propagate karena child override. Target keduanya. */
body[data-theme="theme-3"] .dash-fee-toggle {
background: rgba(245, 200, 66, 0.15);
}
body[data-theme="theme-3"] .dash-fee-toggle:hover {
background: rgba(245, 200, 66, 0.28);
}
body[data-theme="theme-3"] .dash-fee-toggle i,
body[data-theme="theme-3"] #commission-icon {
color: #F5C842 !important;
}
/* "🎯 Target Bulan Ini" label */
body[data-theme="theme-3"] .dash-target-label {
color: rgba(255, 255, 255, 0.75);
}
/* Per-row label "Reservasi"/"SPR"/"Akad" — white */
body[data-theme="theme-3"] .dash-target-row-label {
color: rgba(255, 255, 255, 0.85);
}
/* Per-row count "5 / 10 SPR" — gold (highlight angka) */
body[data-theme="theme-3"] .dash-target-row-count {
color: #F5C842;
}
/* Progress bar bg + fill — bg white-thin, fill gold */
body[data-theme="theme-3"] .dash-progress-track {
background: rgba(255, 255, 255, 0.12);
}
body[data-theme="theme-3"] .dash-progress-fill {
background: linear-gradient(90deg, #F5C842 0%, #C9921A 100%);
}
/* Target message persuasif */
body[data-theme="theme-3"] .dash-target-msg {
color: rgba(255, 255, 255, 0.75);
}
body[data-theme="theme-3"] .dash-target-msg .em {
color: #F5C842;
}
/* "💰 Uang Menunggumu" title */
body[data-theme="theme-3"] .dash-waiting-title {
color: #F5C842;
}
/* Total Rp pill di kanan title — gold-tinted bg + white text */
body[data-theme="theme-3"] .dash-waiting-total {
color: #fff;
background: rgba(245, 200, 66, 0.18);
opacity: 1;
}
/* "Selesaikan supaya..." desc */
body[data-theme="theme-3"] .dash-waiting-desc {
color: rgba(255, 255, 255, 0.85);
}
/* Category row (Berkas SP3K / UM Akad) — dark with gold border */
body[data-theme="theme-3"] .dash-waiting-cat {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(245, 200, 66, 0.3);
}
body[data-theme="theme-3"] .dash-waiting-cat:active {
background: rgba(255, 255, 255, 0.12);
}
body[data-theme="theme-3"] .dash-waiting-cat-title {
color: #F5C842;
}
body[data-theme="theme-3"] .dash-waiting-cat-sub {
color: rgba(255, 255, 255, 0.6);
}
body[data-theme="theme-3"] .dash-waiting-cat-count {
color: #F5C842;
}
/* ── Theme 3 — Sub-page header (Booking / Konsumen / Stock / Setting / Profile /
Change Password) — sama hitam dengan dashboard topbar. Default rule:
.dash-subpage-header { background: linear-gradient(160deg, #0B1537 0%, #1A2B5A 100%) }
di line ~1323. */
body[data-theme="theme-3"] .dash-subpage-header {
background: linear-gradient(160deg, #000000 0%, #1a1a1a 100%);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
/* ── Theme 3 — Generic .dash-card (Booking Terakhir, Info Stok Unit, dsb di
dashboard scroll). Default putih → hitam dengan tipis gold border, text
override ke white/gold. Existing rule:
.dash-card { background: var(--d-card); padding: 16px; ... } di line ~911. */
body[data-theme="theme-3"] .dash-card {
background: linear-gradient(135deg, #000000 0%, #1f1f1f 55%, #0a0a0a 100%);
border: 1px solid rgba(245, 200, 66, 0.18);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
color: rgba(255, 255, 255, 0.85);
}
/* Section header inside .dash-card — title gold, link gold pill */
body[data-theme="theme-3"] .dash-card .dash-sec-title {
color: #F5C842;
}
body[data-theme="theme-3"] .dash-card .dash-sec-link {
color: #F5C842;
background: rgba(245, 200, 66, 0.15);
}
body[data-theme="theme-3"] .dash-card .dash-sec-link:hover {
background: rgba(245, 200, 66, 0.28);
}
/* ── Theme 3 — Text di dalam .dash-card (Booking Terakhir + Info Stok Unit)
Default text pakai var(--d-txt1) navy → di bg hitam invisible. Override
nama/title ke gold, sub ke white dim. */
body[data-theme="theme-3"] .dash-card .dash-booking-name,
body[data-theme="theme-3"] .dash-card .dash-stock-name {
color: #F5C842;
}
body[data-theme="theme-3"] .dash-card .dash-booking-unit,
body[data-theme="theme-3"] .dash-card .dash-stock-sub,
body[data-theme="theme-3"] .dash-card .dash-stock-avail {
color: rgba(255, 255, 255, 0.7);
}
/* Border separator antar row di stock card — default #F0F2F8 (light gray)
terlalu menonjol di black. Halusin ke white-thin. */
body[data-theme="theme-3"] .dash-card .dash-stock-row {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* CARD 3 — 2-kategori unit status (Berkas SP3K / DP Akad) */
.dash-waiting-cat-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
.dash-waiting-cat {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #F4F6FB;
border: 1px solid #E5E9F2;
border-radius: 14px;
color: inherit;
text-decoration: none;
transition: background 0.15s, transform 0.1s;
cursor: pointer;
}
.dash-waiting-cat:active {
transform: scale(0.99);
background: #EAEEF5;
}
.dash-waiting-cat-icon {
font-size: 1.5rem;
flex-shrink: 0;
line-height: 1;
}
.dash-waiting-cat-body {
flex: 1;
min-width: 0;
}
.dash-waiting-cat-title {
font-size: 0.92rem;
font-weight: 700;
color: #0D1633;
line-height: 1.2;
}
.dash-waiting-cat-sub {
font-size: 0.74rem;
font-weight: 500;
color: #6B7A99;
margin-top: 2px;
}
.dash-waiting-cat-count {
font-size: 1.15rem;
font-weight: 800;
color: #C9921A;
flex-shrink: 0;
min-width: 32px;
text-align: right;
}
/* === ACTIVE STATE ===
Tailwind class .text-amber-600 di-toggle oleh router.js.
Override warna ke gold light + lift icon + glow + indicator dot. */
#bottom-nav .nav-link.text-amber-600 {
color: #F5C842 !important;
}
#bottom-nav .nav-link.text-amber-600 i {
/* 2026-05-20: !important ditambah supaya menang vs per-tab inactive color
rules di atas (nav-home, nav-booking, dsb) yang juga pakai !important. */
color: #F5C842 !important;
transform: translateY(-7px) scale(1.18);
text-shadow:
0 4px 14px rgba(245, 200, 66, 0.65),
0 0 22px rgba(245, 200, 66, 0.35);
}
#bottom-nav .nav-link.text-amber-600 span {
color: #F5C842 !important;
font-weight: 700;
opacity: 1;
transform: translateY(-5px);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
/* Animated underline indicator — slide-in scale from center */
#bottom-nav .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 28px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, #C9921A 0%, #F5C842 50%, #E0A818 100%);
box-shadow: 0 0 10px rgba(245, 200, 66, 0.55);
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
}
#bottom-nav .nav-link.text-amber-600::after {
transform: translateX(-50%) scaleX(1);
}
/* === INACTIVE STATE ===
Tailwind toggle .text-gray-500 — override jadi white semi-transparent. */
#bottom-nav .nav-link.text-gray-500 {
color: rgba(255, 255, 255, 0.55) !important;
}
#bottom-nav .nav-link.text-gray-500 i {
color: rgba(255, 255, 255, 0.6);
}
#bottom-nav .nav-link.text-gray-500 span {
color: rgba(255, 255, 255, 0.55);
}
/* ════════════════════════════════════════════════════════════════════════
SETTINGS PAGE — Layout (section + card + row + switch + theme picker)
════════════════════════════════════════════════════════════════════════ */
.settings-section {
margin-bottom: 18px;
}
.settings-section-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.6px;
color: #6B7A99;
text-transform: uppercase;
margin: 0 4px 8px;
}
.settings-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 18px rgba(11, 21, 55, 0.06);
overflow: hidden;
}
.settings-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 14px 16px;
background: #fff;
color: #0D1633;
border: none;
border-bottom: 1px solid #F1F3F8;
text-decoration: none;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: background 0.15s;
}
.settings-row:last-child {
border-bottom: none;
}
.settings-row:active {
background: #F4F6FB;
}
.settings-row-icon {
color: #C9921A;
font-size: 1.1rem;
width: 24px;
text-align: center;
flex-shrink: 0;
}
.settings-row-text {
flex: 1;
min-width: 0;
}
.settings-row-title {
color: #0D1633;
font-size: 0.95rem;
font-weight: 600;
}
.settings-row-sub {
color: #6B7A99;
font-size: 0.78rem;
font-weight: 500;
margin-top: 2px;
}
.settings-row-chev {
color: #9CA3AF;
font-size: 0.85rem;
flex-shrink: 0;
}
.settings-row-danger,
.settings-row-danger .settings-row-icon,
.settings-row-danger .settings-row-title {
color: #B91C1C;
}
.settings-row-danger {
background: #FEF2F2;
font-weight: 700;
}
.settings-row-danger:active {
background: #FEE2E2;
}
/* ==== iOS-style toggle switch ==== */
.settings-switch {
width: 46px;
height: 26px;
background: #CBD5E1;
border-radius: 999px;
position: relative;
flex-shrink: 0;
transition: background 0.2s;
}
.settings-switch-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: transform 0.2s;
}
.settings-switch.is-on {
background: #22C55E;
}
.settings-switch.is-on .settings-switch-thumb {
transform: translateX(20px);
}
/* ==== Theme picker cards ==== */
.theme-picker-grid {
display: grid;
/* 2026-05-20: 3 card → pakai auto-fit minmax supaya wrap rapi di mobile.
Min 140px per card; viewport 360-420px = 2 per baris (theme-3 wrap). */
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.theme-card {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
padding: 10px;
background: #fff;
border: 2px solid #E5E9F2;
border-radius: 14px;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.theme-card:active {
transform: scale(0.98);
}
.theme-card-selected {
border-color: #C9921A;
box-shadow: 0 6px 18px rgba(201, 146, 26, 0.22);
}
.theme-card-preview {
height: 56px;
border-radius: 9px;
background: linear-gradient(160deg, #0B1537 0%, #1A2B5A 100%);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 6px;
overflow: hidden;
}
.theme-preview-bar {
display: flex;
gap: 6px;
width: 100%;
justify-content: space-around;
align-items: center;
}
.theme-preview-bar .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
}
.theme-preview-bar .dot.active {
background: #F5C842;
box-shadow: 0 0 6px rgba(245, 200, 66, 0.7);
}
/* Theme-2 preview = warna warni per dot */
.theme-preview-2 .dot.c-red { background: #f87171; }
.theme-preview-2 .dot.c-green { background: #4ade80; }
.theme-preview-2 .dot.c-violet { background: #a78bfa; }
.theme-preview-2 .dot.c-gray { background: #cbd5e1; }
/* Theme-3 preview = black bg (Vistaland mewah luxury) + 1 active gold +
4 white dim dots. Mirror nuansa hitam-gold yang dominan di theme-3. */
.theme-preview-3 {
background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
border: 1px solid rgba(245, 200, 66, 0.18);
}
/* Theme-4 preview = cream pastel bg + 1 active lavender deep + 4 pastel dots.
Mirror multi-pastel feel + lavender accent (active state). */
.theme-preview-4 {
background: linear-gradient(135deg, #FAF5EE 0%, #F5EBDC 100%);
border: 1px solid rgba(124, 91, 217, 0.18);
}
.theme-preview-4 .dot.active { background: #7C5BD9; box-shadow: 0 0 6px rgba(124, 91, 217, 0.5); }
.theme-preview-4 .dot.c-rose { background: #E89BB0; }
.theme-preview-4 .dot.c-mint { background: #7DC9A0; }
.theme-preview-4 .dot.c-lavender { background: #A795D9; }
.theme-preview-4 .dot.c-sky { background: #7DB7E8; }
.theme-card-title {
font-size: 0.88rem;
font-weight: 700;
color: #0D1633;
}
.theme-card-desc {
font-size: 0.72rem;
font-weight: 500;
color: #6B7A99;
}
.theme-card-check {
position: absolute;
top: 8px;
right: 8px;
color: #C9921A;
font-size: 1.05rem;
opacity: 0;
transition: opacity 0.15s;
}
.theme-card-selected .theme-card-check {
opacity: 1;
}
/* ════════════════════════════════════════════════════════════════════════════
THEME 4 — PASTEL BENTO (2026-05-21)
────────────────────────────────────────────────────────────────────────────
Konsep: layout bento (Card 1 Fee Cair = hero wide, Card 2 Target + Card 3
Waiting = side-by-side 2-kolom) + palette multi-pastel (peach/lavender/mint
per card; sky-blue Booking Terakhir; rose Info Stok). Header & nav cream
off-white. Active state lavender deep #7C5BD9 (override gold).
Layout shared (header scroll-away, fee-card flex, label/waiting swap) sudah
tertambah ke selector grouping di blok shared atas. Bento grid override
khusus theme-4 di sini.
Per pattern theme-3 (memory `project_theme_system.md`): saat shift palette
ke pastel, banyak rule child di dashboard.css punya `color: var(--d-navy)`
atau `color: #fff` (legacy dari bg gold/black). Override langsung dengan
selector + !important.
════════════════════════════════════════════════════════════════════════════ */
/* ── Theme 4 — STACK LAYOUT (revisi 2026-05-21): semua 3 card full-width
stacked vertikal. Beda dari theme-2/3: di dalam Card 2 (Target Bulan Ini),
3 row (Reservasi/SPR/Akad) di-break jadi 3 box sejajar horizontal.
.dash-fee-card mewarisi `display: flex; flex-direction: column; gap: 14px`
dari shared rule (sama dengan theme-2/3). Card 2 di-revamp jadi grid 3-col
internal di blok bawah. */
/* ── Theme 4 — Card 2 (Target Bulan Ini): 3 row jadi 3 box sejajar ──
.dash-target-section punya struktur:
- .dash-target-label (judul "🎯 Target Bulan Ini")
- .dash-target-row × 3 visible + 1 hidden Closing
- .dash-target-msg (footer message)
Pakai grid 3 kolom; label + msg span full width, row visible isi kolom. */
body[data-theme="theme-4"] .dash-fee-card > .dash-target-section {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
align-items: stretch;
}
body[data-theme="theme-4"] .dash-fee-card > .dash-target-section > .dash-target-label,
body[data-theme="theme-4"] .dash-fee-card > .dash-target-section > .dash-target-msg {
grid-column: 1 / -1;
}
/* Each row jadi box berdiri sendiri: bg semi-white, border tipis, rounded,
padding, content tengah vertical-stack. */
body[data-theme="theme-4"] .dash-fee-card > .dash-target-section > .dash-target-row {
margin-bottom: 0;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(124, 91, 217, 0.22);
border-radius: 12px;
padding: 10px 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 6px;
}
/* Row head (label + count) — vertical stack di dalam box */
body[data-theme="theme-4"] .dash-fee-card > .dash-target-section > .dash-target-row > .dash-target-row-head {
flex-direction: column;
align-items: center;
margin-bottom: 0;
gap: 4px;
}
/* Label kecil di atas */
body[data-theme="theme-4"] .dash-fee-card > .dash-target-section > .dash-target-row .dash-target-row-label {
font-size: 10px;
letter-spacing: 0.2px;
}
/* Count besar di tengah (hero number) */
body[data-theme="theme-4"] .dash-fee-card > .dash-target-section > .dash-target-row .dash-target-row-count {
font-size: 1.15rem;
font-weight: 800;
line-height: 1.1;
}
/* Progress bar di bawah, full lebar box */
body[data-theme="theme-4"] .dash-fee-card > .dash-target-section > .dash-target-row .dash-progress-track {
width: 100%;
margin-top: 2px;
}
/* Row Reservasi: hide progress bar — reservasi metrik funnel-entry tanpa
target, jadi tidak ada progress-vs-goal yang relevan. Pakai :has() untuk
identify row yang punya #dash-reservasi-count. Browser support modern,
mobile PWA aman. */
body[data-theme="theme-4"] .dash-fee-card > .dash-target-section > .dash-target-row:has(#dash-reservasi-count) .dash-progress-track {
display: none;
}
/* Beri sedikit padding-bottom kompensasi karena bar hilang — supaya tinggi
visual box reservasi setara dengan box SPR/Akad. */
body[data-theme="theme-4"] .dash-fee-card > .dash-target-section > .dash-target-row:has(#dash-reservasi-count) {
padding-bottom: 18px;
}
/* ── Theme 4 — MULTI-PASTEL palette per card ──
Card 1 (Fee Cair) — peach (warm welcome, dominant card)
Card 2 (Target) — lavender (calm progress)
Card 3 (Waiting) — mint (refresh, action) */
body[data-theme="theme-4"] .dash-fee-card-top {
background: linear-gradient(135deg, #FFD4A3 0%, #FFB37C 100%);
box-shadow: 0 6px 22px rgba(255, 145, 90, 0.28);
}
body[data-theme="theme-4"] .dash-fee-card > .dash-target-section {
background: linear-gradient(135deg, #E0D5FB 0%, #C5B3F0 100%);
box-shadow: 0 6px 22px rgba(167, 149, 217, 0.28);
}
body[data-theme="theme-4"] .dash-fee-card > .dash-waiting-v2 {
background: linear-gradient(135deg, #C8F0DC 0%, #A5E5C0 100%);
box-shadow: 0 6px 22px rgba(125, 201, 160, 0.28);
}
/* ── Theme 4 — Text overrides untuk pastel cards ──
Pastel cards = bg muda, text harus warna gelap (deep plum/navy) supaya
kontras. Pattern sama dengan theme-3: child color rule di dashboard.css
sebelumnya menang specificity, jadi target masing-masing class dengan
!important kalau perlu. */
/* Card 1 (peach) — label, amount, link */
body[data-theme="theme-4"] .dash-fee-label-v2 {
color: #6B3A1F;
}
body[data-theme="theme-4"] #commission-display {
color: #4A2410 !important;
}
body[data-theme="theme-4"] .dash-fee-link {
color: #6B3A1F;
}
body[data-theme="theme-4"] .dash-fee-toggle {
background: rgba(107, 58, 31, 0.15);
}
body[data-theme="theme-4"] .dash-fee-toggle:hover {
background: rgba(107, 58, 31, 0.25);
}
body[data-theme="theme-4"] .dash-fee-toggle i,
body[data-theme="theme-4"] #commission-icon {
color: #4A2410 !important;
}
/* Card 2 (lavender) — Target Bulan Ini text deep purple */
body[data-theme="theme-4"] .dash-target-label {
color: #3B2F5C;
}
body[data-theme="theme-4"] .dash-target-row-label {
color: #2A1F4A;
}
body[data-theme="theme-4"] .dash-target-row-count {
color: #3B2F5C;
}
body[data-theme="theme-4"] .dash-progress-track {
background: rgba(43, 31, 74, 0.15);
}
body[data-theme="theme-4"] .dash-progress-fill {
background: linear-gradient(90deg, #7C5BD9 0%, #5C3FA8 100%);
}
body[data-theme="theme-4"] .dash-target-msg {
color: #3B2F5C;
}
body[data-theme="theme-4"] .dash-target-msg .em {
color: #5C3FA8;
}
/* Card 3 (mint) — text deep green */
body[data-theme="theme-4"] .dash-waiting-title {
color: #1F4A35;
}
body[data-theme="theme-4"] .dash-waiting-total {
color: #1F4A35;
background: rgba(31, 74, 53, 0.18);
opacity: 1;
}
body[data-theme="theme-4"] .dash-waiting-cat {
background: rgba(255, 255, 255, 0.5);
border-color: rgba(31, 74, 53, 0.2);
}
body[data-theme="theme-4"] .dash-waiting-cat:active {
background: rgba(255, 255, 255, 0.75);
}
body[data-theme="theme-4"] .dash-waiting-cat-title {
color: #1F4A35;
}
body[data-theme="theme-4"] .dash-waiting-cat-sub {
color: rgba(31, 74, 53, 0.7);
}
body[data-theme="theme-4"] .dash-waiting-cat-count {
color: #1F4A35;
}
/* ── Theme 4 — Dashboard topbar + bottom nav (cream off-white) ── */
body[data-theme="theme-4"] .dash-topbar {
background: linear-gradient(160deg, #FAF5EE 0%, #F5EBDC 100%);
box-shadow: 0 4px 16px rgba(124, 91, 217, 0.12);
color: #3B2F5C;
}
/* Text di dalam topbar (greeting, nama user, version pill, motive) — plum dark */
body[data-theme="theme-4"] .dash-topbar .dash-greeting-name,
body[data-theme="theme-4"] .dash-topbar #dash-sales-name,
body[data-theme="theme-4"] .dash-topbar .dash-version-pill,
body[data-theme="theme-4"] .dash-topbar .dash-greeting-motive {
color: #3B2F5C !important;
}
/* Version pill — bg lavender-tinted (default navy translucent tidak kelihatan
di cream bg) */
body[data-theme="theme-4"] .dash-topbar .dash-version-pill {
background: rgba(124, 91, 217, 0.15);
border-color: rgba(124, 91, 217, 0.25);
}
/* Bell icon di topbar */
body[data-theme="theme-4"] .dash-topbar .dash-icon-btn,
body[data-theme="theme-4"] .dash-topbar #notif-bell i {
color: #3B2F5C !important;
}
/* Sub-page header (Booking / Konsumen / Stock / Setting / Profile / Change Password) */
body[data-theme="theme-4"] .dash-subpage-header {
background: linear-gradient(160deg, #FAF5EE 0%, #F5EBDC 100%);
box-shadow: 0 4px 16px rgba(124, 91, 217, 0.1);
}
body[data-theme="theme-4"] .dash-subpage-header .dash-page-title,
body[data-theme="theme-4"] .dash-subpage-header .dash-back-btn i,
body[data-theme="theme-4"] .dash-subpage-header .dash-back-btn {
color: #3B2F5C !important;
}
/* Bottom nav — putih cream + tinted lavender border */
body[data-theme="theme-4"] #bottom-nav {
background: linear-gradient(180deg, #FFFDF8 0%, #FAF5EE 100%) !important;
border-top-color: rgba(124, 91, 217, 0.22) !important;
box-shadow: 0 -6px 20px rgba(124, 91, 217, 0.1), 0 -1px 0 rgba(124, 91, 217, 0.06) inset !important;
}
/* ── Theme 4 — Per-tab nav inactive PASTEL ──
Beda dari theme-2/3 (saturated jewel tones). Pakai pastel-mid tones
supaya readable di bg cream. !important sama pattern theme-2/3. */
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-home:not(.text-amber-600),
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-home:not(.text-amber-600) i,
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-home:not(.text-amber-600) span { color: #4A8FCF !important; } /* sky-deep */
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-booking:not(.text-amber-600),
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-booking:not(.text-amber-600) i,
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-booking:not(.text-amber-600) span { color: #C76B83 !important; } /* rose-deep */
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-konsumen:not(.text-amber-600),
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-konsumen:not(.text-amber-600) i,
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-konsumen:not(.text-amber-600) span { color: #4FA078 !important; } /* mint-deep */
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-stock:not(.text-amber-600),
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-stock:not(.text-amber-600) i,
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-stock:not(.text-amber-600) span { color: #8470C2 !important; } /* lavender-deep */
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-setting:not(.text-amber-600),
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-setting:not(.text-amber-600) i,
body[data-theme="theme-4"] #bottom-nav .nav-link.nav-setting:not(.text-amber-600) span { color: #8794A8 !important; } /* slate-mid */
/* ── Theme 4 — Active state: lavender deep (override gold default) ──
Default active rule `.text-amber-600 !important` di line ~1482. Specificity
(1,2,1). Scoped theme-4 (1,3,1) menang. */
body[data-theme="theme-4"] #bottom-nav .nav-link.text-amber-600,
body[data-theme="theme-4"] #bottom-nav .nav-link.text-amber-600 i,
body[data-theme="theme-4"] #bottom-nav .nav-link.text-amber-600 span {
color: #7C5BD9 !important;
}
/* ── Theme 4 — Generic .dash-card variants ──
Booking Terakhir (.dash-card.payment-card) — sky-blue pastel
Info Stok (.dash-card not payment-card) — rose pastel
Cek HTML home.html:586 (payment-card = Booking) + line 631 (Info Stok). */
body[data-theme="theme-4"] .dash-card.payment-card {
background: linear-gradient(135deg, #D0E5FB 0%, #A8D0F2 100%);
border: 1px solid rgba(74, 143, 207, 0.2);
box-shadow: 0 6px 22px rgba(74, 143, 207, 0.22);
}
body[data-theme="theme-4"] .dash-card:not(.payment-card) {
background: linear-gradient(135deg, #FBDCE5 0%, #F5B6CB 100%);
border: 1px solid rgba(199, 107, 131, 0.2);
box-shadow: 0 6px 22px rgba(199, 107, 131, 0.22);
}
/* Section header inside .dash-card — variant-aware text */
body[data-theme="theme-4"] .dash-card.payment-card .dash-sec-title {
color: #1F3A5C;
}
body[data-theme="theme-4"] .dash-card.payment-card .dash-sec-link {
color: #1F3A5C;
background: rgba(31, 58, 92, 0.15);
}
body[data-theme="theme-4"] .dash-card.payment-card .dash-sec-link:hover {
background: rgba(31, 58, 92, 0.25);
}
body[data-theme="theme-4"] .dash-card:not(.payment-card) .dash-sec-title {
color: #5C1F38;
}
body[data-theme="theme-4"] .dash-card:not(.payment-card) .dash-sec-link {
color: #5C1F38;
background: rgba(92, 31, 56, 0.15);
}
body[data-theme="theme-4"] .dash-card:not(.payment-card) .dash-sec-link:hover {
background: rgba(92, 31, 56, 0.25);
}
/* Booking name/unit text (sky card) */
body[data-theme="theme-4"] .dash-card.payment-card .dash-booking-name {
color: #1F3A5C;
}
body[data-theme="theme-4"] .dash-card.payment-card .dash-booking-unit {
color: rgba(31, 58, 92, 0.75);
}
/* Stock name/sub/avail text (rose card) */
body[data-theme="theme-4"] .dash-card:not(.payment-card) .dash-stock-name {
color: #5C1F38;
}
body[data-theme="theme-4"] .dash-card:not(.payment-card) .dash-stock-sub,
body[data-theme="theme-4"] .dash-card:not(.payment-card) .dash-stock-avail {
color: rgba(92, 31, 56, 0.75);
}
/* Stock row separator */
body[data-theme="theme-4"] .dash-card:not(.payment-card) .dash-stock-row {
border-bottom-color: rgba(92, 31, 56, 0.12);
}