/* ============ SAKURA INN BRAND ============ */
:root {
/* Brand logo asli Sakura Inn (base64 embedded, self-contained) */
--sakura-logo-small: url('data:image/png;base64,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');
--sakura-logo-large: url('data:image/png;base64,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');
--soft-pink: #F96D91;
--soft-pink-dark: #E04E76;
--very-pale-red: #FFC0CD;
--soft-blue: #6D91F9;
--soft-blue-dark: #4F75E0;
--very-dark-grayish-red: #433533;
--very-dark-grey: #333333;
--white: #FFFFFF;
--bg-primary: #FAFAFC;
--bg-card: #FFFFFF;
--bg-soft: #FDF5F7;
--bg-blue-soft: #F0F4FE;
--text-primary: #433533;
--text-secondary: #6B6360;
--text-muted: #9A9290;
--border: rgba(67, 53, 51, 0.10);
--border-soft: rgba(67, 53, 51, 0.06);
--success: #2D8F5D;
--warning: #D97706;
--danger: #DC2626;
--shadow-md: 0 4px 16px rgba(249, 109, 145, 0.08), 0 2px 6px rgba(67, 53, 51, 0.04);
--shadow-lg: 0 12px 32px rgba(249, 109, 145, 0.12), 0 4px 12px rgba(67, 53, 51, 0.06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
background: var(--bg-primary);
color: var(--text-primary);
font-family: 'Inter', sans-serif;
line-height: 1.6;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 15% 20%, rgba(249,109,145,0.04) 0%, transparent 40%),
radial-gradient(circle at 85% 80%, rgba(109,145,249,0.04) 0%, transparent 40%);
z-index: 0;
}
.app {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
min-height: 100vh;
position: relative;
z-index: 1;
}
/* ============ DESKTOP BLANK BUG FIX (Critical) ============
minmax(0, 1fr) di grid → force track tidak collapse di layar lebar.
Plus explicit width:auto di .main supaya tidak overflow. */
.app > .main {
min-width: 0;
width: auto;
overflow-x: hidden;
box-sizing: border-box;
}
.app > .main > .content {
width: auto;
min-width: 0;
box-sizing: border-box;
}
.app > .main > .content > .page {
width: auto;
min-width: 0;
box-sizing: border-box;
}
/* ============ SIDEBAR ============ */
.sidebar {
background: var(--white);
border-right: 1px solid var(--border);
padding: 28px 0;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.brand {
padding: 0 24px 24px;
border-bottom: 1px solid var(--border-soft);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
}
.brand-logo {
width: 44px;
height: 44px;
flex-shrink: 0;
background-image: var(--sakura-logo-small);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(249,109,145,0.3);
}
.sakura-logo-img {
background-image: var(--sakura-logo-small);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
display: inline-block;
box-shadow: 0 4px 16px rgba(249,109,145,0.25);
}
.sakura-logo-img.--large {
background-image: var(--sakura-logo-large);
}
.sakura-logo-img.--xlarge {
background-image: var(--sakura-logo-large);
box-shadow: 0 8px 32px rgba(249,109,145,0.3);
}
/* === SAKURA HERO SECTION (Dashboard welcome) === */
.sakura-hero {
position: relative;
margin-bottom: 24px;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(135deg, #F96D91 0%, #E04E76 100%);
padding: 32px 40px;
color: white;
box-shadow: 0 8px 32px rgba(249,109,145,0.25);
}
.sakura-hero-bg {
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background-image: var(--sakura-logo-large);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.08;
pointer-events: none;
transform: rotate(-15deg);
}
.sakura-hero-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
}
.sakura-hero-logo {
width: 96px;
height: 96px;
flex-shrink: 0;
/* Background image inherit dari .sakura-logo-img.--xlarge (logo asli pink + ornamen putih) */
/* White border sebagai frame elegan */
border: 3px solid rgba(255,255,255,0.6);
box-shadow:
0 8px 24px rgba(0,0,0,0.18),
0 0 0 6px rgba(255,255,255,0.12);
}
.sakura-hero-text {
flex: 1;
min-width: 200px;
}
.sakura-hero-title {
font-family: var(--font-display);
font-size: 30px;
font-weight: 800;
margin: 0;
letter-spacing: -0.5px;
text-shadow: 0 2px 8px rgba(0,0,0,0.1);
line-height: 1.1;
}
.sakura-hero-tagline {
font-size: 14px;
font-weight: 600;
opacity: 0.95;
margin-top: 4px;
letter-spacing: 0.3px;
}
.sakura-hero-sub {
font-size: 11.5px;
opacity: 0.8;
margin-top: 2px;
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: 500;
}
/* Responsive hero */
@media (max-width: 600px) {
.sakura-hero { padding: 24px 22px; }
.sakura-hero-logo { width: 72px; height: 72px; }
.sakura-hero-title { font-size: 24px; }
.sakura-hero-bg { width: 400px; height: 400px; }
}
/* Dark mode hero */
[data-theme="dark"] .sakura-hero {
box-shadow: 0 8px 32px rgba(249,109,145,0.4);
}
.brand-text { line-height: 1.1; }
.brand-name {
font-family: 'Shippori Mincho', serif;
font-size: 18px;
font-weight: 800;
color: var(--very-dark-grayish-red);
letter-spacing: 1px;
text-transform: uppercase;
}
.brand-sub {
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 4px;
}
.nav-section { padding: 0 14px; margin-bottom: 22px; }
.nav-label {
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
padding: 0 12px 8px;
font-weight: 600;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
color: var(--text-secondary);
font-size: 13.5px;
font-weight: 500;
margin-bottom: 2px;
}
.nav-item:hover { background: var(--bg-soft); color: var(--soft-pink-dark); }
.nav-item.active {
background: linear-gradient(135deg, var(--soft-pink), var(--soft-pink-dark));
color: var(--white);
box-shadow: 0 4px 12px rgba(249,109,145,0.3);
}
.nav-item.active .nav-icon { stroke: var(--white); }
.nav-icon { width: 18px; height: 18px; stroke-width: 1.8; }
/* ============ TOPBAR ============ */
.main { overflow-x: hidden; }
.topbar {
padding: 22px 36px;
background: var(--white);
border-bottom: 1px solid var(--border-soft);
display: flex;
justify-content: space-between;
align-items: center;
}
.topbar-left h1 {
font-family: 'Shippori Mincho', serif;
font-size: 22px;
font-weight: 700;
color: var(--very-dark-grayish-red);
}
.topbar-left .breadcrumb {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.topbar-left .breadcrumb .accent { color: var(--soft-pink); font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.date-jp { text-align: right; }
.date-jp .date { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.date-jp .day { font-size: 11px; color: var(--text-muted); letter-spacing: 1.5px; margin-top: 2px; }
.date-jp .day .kanji { color: var(--soft-pink); font-weight: 700; }
.avatar {
width: 40px; height: 40px;
border-radius: 50%;
background-image: var(--sakura-logo-small);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 2px solid var(--white);
box-shadow: 0 4px 12px rgba(249,109,145,0.25);
}
/* ============ CONTENT ============ */
.content { padding: 28px 36px 50px; }
/* ============ QUICK STATS (Topbar) ============ */
.quick-stats {
display: flex;
gap: 8px;
align-items: center;
}
.quick-stat {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: var(--bg-soft);
border: 1px solid var(--border-soft);
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
}
.quick-stat:hover {
border-color: var(--soft-pink);
background: var(--white);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(67,53,51,0.08);
}
.quick-stat.has-data {
background: var(--white);
border-color: var(--soft-pink-dark);
}
.quick-stat-icon {
display: flex;
align-items: center;
justify-content: center;
}
.quick-stat-info { line-height: 1; }
.quick-stat-num {
font-family: 'Shippori Mincho', serif;
font-size: 18px;
font-weight: 800;
color: var(--very-dark-grayish-red);
}
.quick-stat-lbl {
font-size: 9.5px;
color: var(--text-muted);
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 600;
margin-top: 1px;
}
@media (max-width: 1100px) {
.quick-stats { display: none; }
}
/* ============ QUICK STATS (Topbar) END ============ */
/* ============ DAILY ALERT BANNER ============ */
.daily-alert {
background: linear-gradient(135deg, var(--soft-pink), var(--soft-pink-dark));
color: var(--white);
border-radius: 14px;
padding: 18px 22px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 18px;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
animation: slideDown 0.4s ease;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.daily-alert::before {
content: '';
position: absolute;
right: -40px; top: -40px;
width: 140px; height: 140px;
background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
pointer-events: none;
}
.daily-alert-icon {
width: 48px; height: 48px;
background: rgba(255,255,255,0.18);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.daily-alert-icon svg { width: 24px; height: 24px; stroke: white; }
.daily-alert-info { flex: 1; position: relative; z-index: 1; }
.daily-alert-title {
font-family: 'Shippori Mincho', serif;
font-size: 15px;
font-weight: 800;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.daily-alert-title .kanji {
font-family: 'Noto Serif JP', serif;
color: var(--very-pale-red);
font-size: 20px;
}
.daily-alert-items {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.daily-alert-item {
background: rgba(255,255,255,0.18);
padding: 5px 10px;
border-radius: 6px;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
}
.daily-alert-item:hover {
background: rgba(255,255,255,0.28);
}
.daily-alert-item .badge {
display: inline-block;
padding: 1px 5px;
background: var(--very-dark-grayish-red);
border-radius: 3px;
margin-right: 4px;
font-size: 10px;
color: var(--white);
}
.daily-alert.warning {
background: linear-gradient(135deg, var(--warning), #B45309);
}
.daily-alert.success {
background: linear-gradient(135deg, var(--success), #1F6B45);
}
/* ============ PAGE SYSTEM ============ */
.page {
/* Animation di-handle by JS supaya tidak race condition */
opacity: 1;
}
.nav-item.is-disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.nav-item.is-disabled::after {
content: 'Soon';
margin-left: auto;
font-size: 9px;
padding: 2px 6px;
background: var(--bg-soft);
color: var(--text-muted);
border-radius: 99px;
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: 700;
}
/* ============ DASHBOARD OVERVIEW (Landing Page) ============ */
.overview-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-top: 8px;
}
.overview-card {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 20px;
display: flex;
align-items: center;
gap: 16px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.overview-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--soft-pink);
}
.overview-icon {
width: 56px;
height: 56px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(67,53,51,0.12);
}
.overview-icon svg { width: 26px; height: 26px; stroke-width: 2; }
.overview-card-info {
flex: 1;
min-width: 0;
}
.overview-card-title {
font-family: 'Shippori Mincho', serif;
font-size: 16px;
font-weight: 800;
color: var(--very-dark-grayish-red);
line-height: 1.2;
}
.overview-card-desc {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 4px;
line-height: 1.4;
}
.overview-card-stat {
margin-top: 8px;
font-size: 11px;
color: var(--soft-pink-dark);
font-weight: 700;
}
.overview-card-stat span {
font-family: 'Shippori Mincho', serif;
font-size: 16px;
margin-right: 4px;
}
.overview-arrow {
width: 18px;
height: 18px;
color: var(--text-muted);
flex-shrink: 0;
transition: transform 0.2s ease;
}
.overview-card:hover .overview-arrow {
transform: translateX(4px);
color: var(--soft-pink-dark);
}
/* Recap Today */
#dashTodayRecap {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.recap-item {
background: var(--bg-soft);
padding: 14px 16px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 12px;
border-left: 3px solid var(--border-soft);
}
.recap-item.has-data { border-left-color: var(--soft-pink); }
.recap-emoji { font-size: 22px; line-height: 1; }
.recap-text { line-height: 1.3; }
.recap-num {
font-family: 'Shippori Mincho', serif;
font-size: 20px;
font-weight: 800;
color: var(--very-dark-grayish-red);
}
.recap-lbl {
font-size: 11px;
color: var(--text-muted);
margin-top: 1px;
}
/* ============ UNIT SOURCE BADGE ============ */
.src-badge {
display: inline-block;
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.8px;
padding: 2px 5px;
border-radius: 4px;
background: var(--success);
color: var(--white);
margin-left: 4px;
vertical-align: middle;
}
.src-badge.edited {
background: var(--warning);
}
/* Periode mini badge (di tabel Tagihan untuk tandai unit Bulanan) */
.periode-mini {
display: inline-block;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.4px;
padding: 2px 6px;
border-radius: 4px;
background: rgba(109, 145, 249, 0.12);
color: var(--soft-blue-dark);
border: 1px solid rgba(109, 145, 249, 0.25);
margin-left: 6px;
vertical-align: middle;
text-transform: uppercase;
}
/* Modal footer (standardize between modals) */
.modal-footer {
padding: 16px 22px;
border-top: 1px solid var(--border-soft);
background: var(--bg-soft);
display: flex;
align-items: center;
gap: 8px;
border-radius: 0 0 14px 14px;
}
/* ============ KPI CARDS (di page Booking) ============ */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-bottom: 20px;
}
.kpi-card {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 18px 20px;
display: flex;
gap: 14px;
align-items: center;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.kpi-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--soft-pink);
}
.kpi-card.has-data {
border-color: rgba(249,109,145,0.4);
}
.kpi-card.has-data::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: var(--soft-pink);
}
.kpi-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.kpi-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.kpi-info { line-height: 1.2; flex: 1; min-width: 0; }
.kpi-num {
font-family: 'Shippori Mincho', serif;
font-size: 30px;
font-weight: 800;
color: var(--very-dark-grayish-red);
line-height: 1;
}
.kpi-lbl {
font-size: 11.5px;
color: var(--text-secondary);
margin-top: 4px;
font-weight: 600;
}
.kpi-hint {
font-size: 10px;
color: var(--text-muted);
margin-top: 2px;
}
/* ============ KPI CARDS END ============ */
/* ============ IPL DUE DAY EDITOR ============ */
.due-day-cell {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
}
.due-day-select {
background: transparent;
border: 1px dashed var(--border-soft);
border-radius: 6px;
padding: 4px 22px 4px 8px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 6px center;
transition: all 0.15s ease;
color: var(--text-secondary);
font-family: 'Inter', sans-serif;
min-width: 70px;
}
.due-day-select:hover {
border-color: var(--soft-pink);
background-color: var(--white);
color: var(--very-dark-grayish-red);
}
.due-day-select:focus {
outline: none;
border-color: var(--soft-pink-dark);
border-style: solid;
box-shadow: 0 0 0 2px rgba(249,109,145,0.15);
}
/* Color states based on urgency */
.due-day-select.--overdue {
background-color: rgba(220,38,38,0.08);
border-color: var(--danger);
color: var(--danger);
border-style: solid;
}
.due-day-select.--upcoming {
background-color: rgba(217,119,6,0.08);
border-color: var(--warning);
color: var(--warning);
border-style: solid;
}
.due-day-select.--normal {
border-style: solid;
border-color: var(--border-soft);
}
.due-day-select.--empty {
border-style: dashed;
color: var(--text-muted);
font-style: italic;
}
.due-day-hint {
font-size: 9px;
color: var(--text-muted);
font-weight: 500;
margin-left: 2px;
}
.due-day-hint.--overdue { color: var(--danger); font-weight: 700; }
.due-day-hint.--upcoming { color: var(--warning); font-weight: 700; }
/* Static dueDay badge (non-editable, sama warna dengan select) */
.due-day-static {
display: inline-block;
border-radius: 6px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
border: 1px solid var(--border-soft);
background: var(--bg-soft);
color: var(--text-secondary);
min-width: 60px;
text-align: center;
}
.due-day-static.--overdue {
background-color: rgba(220,38,38,0.08);
border-color: var(--danger);
color: var(--danger);
}
.due-day-static.--upcoming {
background-color: rgba(217,119,6,0.08);
border-color: var(--warning);
color: var(--warning);
}
.due-day-static.--normal {
border-color: var(--border-soft);
}
/* ============ IPL DUE DAY EDITOR END ============ */
/* ============ INVOICE GENERATOR ============ */
.invoice-modal-overlay {
position: fixed;
inset: 0;
background: rgba(67,53,51,0.65);
backdrop-filter: blur(4px);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
overflow-y: auto;
}
.invoice-modal-overlay.show { display: flex; }
.invoice-modal {
background: var(--white);
border-radius: 16px;
max-width: 800px;
width: 100%;
box-shadow: 0 24px 64px rgba(0,0,0,0.3);
max-height: 92vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.invoice-modal-header {
padding: 16px 22px;
background: var(--bg-soft);
border-bottom: 1px solid var(--border-soft);
display: flex;
justify-content: space-between;
align-items: center;
}
.invoice-modal-title {
font-family: 'Shippori Mincho', serif;
font-size: 16px;
font-weight: 700;
color: var(--very-dark-grayish-red);
display: flex;
align-items: center;
gap: 8px;
}
.invoice-modal-title .kanji {
color: var(--soft-pink-dark);
font-size: 22px;
}
.invoice-modal-actions {
display: flex;
gap: 8px;
}
.invoice-modal-body {
overflow-y: auto;
padding: 20px;
background: #f5f5f5;
}
/* ===== Invoice Document ===== */
.invoice-doc {
background: white;
color: #2a2422;
width: 100%;
padding: 40px 44px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
border-radius: 4px;
font-family: 'Inter', sans-serif;
font-size: 12px;
line-height: 1.5;
position: relative;
overflow: hidden;
}
.invoice-doc::before {
content: '';
position: absolute;
right: -80px;
top: -80px;
width: 280px;
height: 280px;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size: contain;
pointer-events: none;
}
.invoice-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-bottom: 20px;
border-bottom: 3px solid #F96D91;
position: relative;
z-index: 1;
}
.invoice-brand {
display: flex;
gap: 14px;
align-items: center;
}
.invoice-logo {
width: 56px;
height: 56px;
flex-shrink: 0;
}
.invoice-brand-text {
font-family: 'Shippori Mincho', serif;
}
.invoice-brand-name {
font-size: 22px;
font-weight: 800;
color: #2a2422;
letter-spacing: 2px;
line-height: 1;
}
.invoice-brand-sub {
font-size: 10px;
color: #888;
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 4px;
}
.invoice-brand-tagline {
font-size: 9px;
color: #F96D91;
letter-spacing: 1.5px;
margin-top: 3px;
font-style: italic;
}
.invoice-meta {
text-align: right;
}
.invoice-meta-title {
font-family: 'Shippori Mincho', serif;
font-size: 26px;
font-weight: 800;
color: #F96D91;
letter-spacing: 4px;
line-height: 1;
}
.invoice-meta-num {
font-size: 11px;
color: #2a2422;
margin-top: 8px;
font-weight: 600;
letter-spacing: 1px;
}
.invoice-meta-date {
font-size: 10.5px;
color: #666;
margin-top: 4px;
}
/* Info section: 2 columns */
.invoice-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-top: 22px;
position: relative;
z-index: 1;
}
.invoice-info-block {
font-size: 11.5px;
}
.invoice-info-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #999;
font-weight: 700;
margin-bottom: 6px;
}
.invoice-info-name {
font-family: 'Shippori Mincho', serif;
font-size: 15px;
font-weight: 800;
color: #2a2422;
margin-bottom: 3px;
}
.invoice-info-detail {
color: #555;
line-height: 1.6;
}
.invoice-info-detail .row {
display: flex;
gap: 6px;
margin-top: 2px;
}
.invoice-info-detail .lbl {
color: #999;
min-width: 70px;
}
/* Items table */
.invoice-items {
margin-top: 26px;
width: 100%;
border-collapse: collapse;
position: relative;
z-index: 1;
}
.invoice-items thead th {
background: #2a2422;
color: white;
padding: 10px 12px;
text-align: left;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
}
.invoice-items thead th.right { text-align: right; }
.invoice-items thead th.center { text-align: center; }
.invoice-items tbody td {
padding: 12px;
border-bottom: 1px solid #e8e0dd;
font-size: 11.5px;
vertical-align: top;
}
.invoice-items tbody td.right {
text-align: right;
font-family: 'Shippori Mincho', serif;
font-weight: 600;
}
.invoice-items tbody td.center { text-align: center; }
.invoice-item-name {
font-weight: 700;
color: #2a2422;
margin-bottom: 2px;
}
.invoice-item-desc {
font-size: 10.5px;
color: #888;
}
/* Totals */
.invoice-totals {
margin-top: 18px;
display: flex;
justify-content: flex-end;
position: relative;
z-index: 1;
}
.invoice-totals-box {
width: 280px;
font-size: 11.5px;
}
.invoice-totals-row {
display: flex;
justify-content: space-between;
padding: 7px 0;
}
.invoice-totals-row .lbl { color: #666; }
.invoice-totals-row .val {
font-family: 'Shippori Mincho', serif;
font-weight: 700;
color: #2a2422;
}
.invoice-totals-row.total {
border-top: 2px solid #2a2422;
border-bottom: 2px solid #2a2422;
padding: 12px 0;
margin-top: 4px;
}
.invoice-totals-row.total .lbl {
font-weight: 800;
color: #2a2422;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
}
.invoice-totals-row.total .val {
font-size: 18px;
color: #F96D91;
}
.invoice-totals-row.sisa .val { color: #dc2626; }
.invoice-totals-row.paid .val { color: #2D8F5D; }
/* Status badge */
.invoice-status-badge {
display: inline-block;
padding: 8px 18px;
border-radius: 6px;
font-weight: 800;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 12px;
}
.invoice-status-badge.lunas {
background: #2D8F5D;
color: white;
}
.invoice-status-badge.dp {
background: #D97706;
color: white;
}
.invoice-status-badge.belum {
background: #dc2626;
color: white;
}
/* Notes section */
.invoice-notes {
margin-top: 26px;
padding: 14px 16px;
background: rgba(249,109,145,0.06);
border-left: 3px solid #F96D91;
border-radius: 0 6px 6px 0;
font-size: 11px;
color: #555;
position: relative;
z-index: 1;
}
.invoice-notes-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #F96D91;
font-weight: 700;
margin-bottom: 4px;
}
/* Footer + signature */
.invoice-footer {
margin-top: 30px;
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
padding-top: 22px;
border-top: 1px solid #e8e0dd;
position: relative;
z-index: 1;
}
.invoice-footer-info {
font-size: 10px;
color: #888;
line-height: 1.7;
}
.invoice-footer-info .accent {
color: #F96D91;
font-weight: 700;
}
.invoice-signature {
text-align: center;
min-width: 180px;
}
.invoice-signature-label {
font-size: 10.5px;
color: #555;
margin-bottom: 50px;
}
.invoice-signature-line {
border-top: 1.5px solid #2a2422;
padding-top: 6px;
font-family: 'Shippori Mincho', serif;
font-size: 11px;
font-weight: 700;
color: #2a2422;
}
.invoice-thank {
text-align: center;
margin-top: 22px;
font-family: 'Shippori Mincho', serif;
font-size: 13px;
color: #F96D91;
letter-spacing: 3px;
font-weight: 600;
position: relative;
z-index: 1;
}
.invoice-thank .kanji-jp {
font-family: 'Noto Serif JP', serif;
color: #2a2422;
margin: 0 8px;
}
/* Print Styles */
@media print {
body * { visibility: hidden; }
#invoiceModalOverlay, #invoiceModalOverlay * { visibility: visible; }
#invoiceModalOverlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
background: white !important;
padding: 0 !important;
backdrop-filter: none !important;
display: block !important;
}
.invoice-modal {
box-shadow: none !important;
max-height: none !important;
max-width: none !important;
border-radius: 0 !important;
}
.invoice-modal-header { display: none !important; }
.invoice-modal-body {
background: white !important;
padding: 0 !important;
overflow: visible !important;
}
.invoice-doc {
box-shadow: none !important;
padding: 24px 32px !important;
}
@page {
size: A4;
margin: 12mm;
}
}
/* Dark mode: invoice tetap putih (untuk print) */
body.dark-mode .invoice-doc {
color: #2a2422 !important;
background: white !important;
}
body.dark-mode .invoice-doc * {
color: inherit;
}
/* ============ INVOICE GENERATOR END ============ */
/* ============ CALENDAR VIEW ============ */
.cal-nav {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
padding: 4px 0;
}
.cal-month-title {
font-family: 'Shippori Mincho', serif;
font-size: 17px;
font-weight: 700;
color: var(--very-dark-grayish-red);
min-width: 180px;
text-align: center;
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
background: var(--border-soft);
border: 1px solid var(--border-soft);
border-radius: 10px;
overflow: hidden;
}
.cal-day-header {
background: var(--bg-soft);
padding: 9px 6px;
text-align: center;
font-size: 10.5px;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
}
.cal-day-header.weekend { color: var(--soft-pink-dark); }
.cal-cell {
background: var(--bg-card);
min-height: 92px;
padding: 6px 5px;
display: flex;
flex-direction: column;
gap: 3px;
position: relative;
}
.cal-cell.other-month {
background: var(--bg-soft);
opacity: 0.55;
}
.cal-cell.today {
background: rgba(249,109,145,0.06);
box-shadow: inset 0 0 0 2px var(--soft-pink);
}
.cal-cell-date {
font-family: 'Shippori Mincho', serif;
font-size: 13px;
font-weight: 700;
color: var(--very-dark-grayish-red);
display: flex;
align-items: center;
justify-content: space-between;
}
.cal-cell.today .cal-cell-date {
color: var(--soft-pink-dark);
}
.cal-cell-date .cal-cell-count {
font-size: 9.5px;
background: var(--soft-pink);
color: var(--white);
padding: 1px 5px;
border-radius: 99px;
font-family: 'Inter', sans-serif;
font-weight: 700;
}
.cal-event {
background: var(--soft-pink);
color: var(--white);
padding: 2px 5px;
border-radius: 4px;
font-size: 9.5px;
font-weight: 600;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: opacity 0.15s ease;
}
.cal-event:hover { opacity: 0.85; }
.cal-event.booking { background: var(--warning); }
.cal-event.tersewa { background: var(--success); }
.cal-event.selesai { background: var(--soft-blue-dark); opacity: 0.65; }
.cal-event.more {
background: var(--bg-soft);
color: var(--text-secondary);
text-align: center;
cursor: default;
}
.cal-legend {
display: flex;
gap: 18px;
margin-top: 14px;
flex-wrap: wrap;
font-size: 11px;
color: var(--text-secondary);
}
.cal-legend-item {
display: flex;
align-items: center;
gap: 6px;
}
.cal-dot {
width: 10px;
height: 10px;
border-radius: 3px;
}
.cal-dot.booking { background: var(--warning); }
.cal-dot.tersewa { background: var(--success); }
.cal-dot.selesai { background: var(--soft-blue-dark); }
@media (max-width: 768px) {
.cal-cell { min-height: 60px; padding: 4px 3px; font-size: 10px; }
.cal-cell-date { font-size: 11px; }
.cal-event { font-size: 8.5px; padding: 1px 3px; }
}
/* ============ DARK MODE ============ */
body.dark-mode {
--bg: #1a1614;
--bg-card: #25201e;
--bg-soft: #2d2826;
--very-dark-grayish-red: #f0e8e5;
--text-secondary: #c0b5b1;
--text-muted: #8a807c;
--border-soft: #3a3331;
--white: #25201e;
--very-pale-red: #3d2a2e;
}
body.dark-mode .topbar,
body.dark-mode .sidebar {
background: #1f1a18;
border-color: #3a3331;
}
body.dark-mode .stat-card,
body.dark-mode .panel,
body.dark-mode .booking-card {
background: var(--bg-card);
border-color: var(--border-soft);
}
body.dark-mode .filter-select,
body.dark-mode .search-box input,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
background: var(--bg-soft);
color: var(--very-dark-grayish-red);
border-color: var(--border-soft);
}
body.dark-mode .booking-table thead {
background: var(--bg-soft);
}
body.dark-mode .booking-table tbody tr:hover {
background: rgba(249,109,145,0.05);
}
body.dark-mode .modal {
background: var(--bg-card);
}
body.dark-mode .available-unit-chip {
background: var(--bg-soft);
}
.theme-toggle {
background: var(--bg-soft);
border: 1px solid var(--border-soft);
border-radius: 8px;
padding: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--very-dark-grayish-red);
transition: all 0.15s ease;
margin-right: 6px;
}
.theme-toggle:hover {
border-color: var(--soft-pink);
color: var(--soft-pink-dark);
}
.theme-toggle svg { width: 16px; height: 16px; stroke-width: 2; }
/* ============ CHART ANALYTICS (Batch 3) ============ */
.analytics-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
@media (max-width: 1100px) {
.analytics-grid { grid-template-columns: 1fr; }
}
.chart-mini-wrap {
height: 220px;
position: relative;
}
.channel-list {
display: flex;
flex-direction: column;
gap: 11px;
}
.channel-row {
display: grid;
grid-template-columns: 24px 110px 1fr auto;
gap: 10px;
align-items: center;
font-size: 12px;
}
.channel-emoji {
font-size: 16px;
text-align: center;
}
.channel-name {
font-weight: 600;
color: var(--very-dark-grayish-red);
}
.channel-bar-wrap {
height: 7px;
background: var(--bg-soft);
border-radius: 99px;
overflow: hidden;
}
.channel-bar {
height: 100%;
background: linear-gradient(90deg, var(--soft-pink), var(--soft-pink-dark));
border-radius: 99px;
transition: width 0.6s ease;
}
.channel-revenue {
font-family: 'Shippori Mincho', serif;
font-weight: 700;
color: var(--success);
font-size: 11.5px;
white-space: nowrap;
}
/* ============ STAT CARDS ============ */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 22px;
position: relative;
transition: all 0.25s ease;
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: rgba(249,109,145,0.2);
}
.stat-icon-wrap {
width: 42px; height: 42px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.stat-card.--pink .stat-icon-wrap { background: rgba(249,109,145,0.12); color: var(--soft-pink); }
.stat-card.--blue .stat-icon-wrap { background: rgba(109,145,249,0.12); color: var(--soft-blue); }
.stat-card.--palered .stat-icon-wrap { background: rgba(255,192,205,0.4); color: var(--soft-pink-dark); }
.stat-card.--dark .stat-icon-wrap { background: rgba(67,53,51,0.08); color: var(--very-dark-grayish-red); }
.stat-card.--green .stat-icon-wrap { background: rgba(45,143,93,0.12); color: var(--success); }
.stat-icon-wrap svg { width: 20px; height: 20px; stroke-width: 1.8; }
.stat-jp {
font-family: 'Noto Serif JP', serif;
font-size: 11px;
letter-spacing: 2px;
margin-bottom: 2px;
font-weight: 500;
opacity: 0.7;
}
.stat-card.--pink .stat-jp { color: var(--soft-pink); }
.stat-card.--blue .stat-jp { color: var(--soft-blue); }
.stat-card.--palered .stat-jp { color: var(--soft-pink-dark); }
.stat-card.--dark .stat-jp { color: var(--very-dark-grayish-red); }
.stat-card.--green .stat-jp { color: var(--success); }
.stat-label {
font-size: 10.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 10px;
font-weight: 600;
}
.stat-value {
font-family: 'Shippori Mincho', serif;
font-size: 26px;
font-weight: 700;
color: var(--very-dark-grayish-red);
line-height: 1.1;
letter-spacing: -0.5px;
}
.stat-value .unit { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.stat-meta { margin-top: 10px; font-size: 11.5px; color: var(--text-secondary); }
.stat-meta .pos { color: var(--success); font-weight: 700; }
.stat-meta .neg { color: var(--danger); font-weight: 700; }
/* ============ ROW & PANEL ============ */
.row {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
margin-bottom: 24px;
}
.row-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
}
.panel {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 24px;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-soft);
}
.panel-title {
font-family: 'Shippori Mincho', serif;
font-size: 16px;
font-weight: 700;
color: var(--very-dark-grayish-red);
display: flex;
align-items: center;
gap: 10px;
}
.panel-title .kanji-small {
color: var(--soft-pink);
font-family: 'Noto Serif JP', serif;
font-size: 18px;
}
.panel-subtitle {
font-size: 10.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 3px;
font-weight: 500;
}
.chart-wrap { position: relative; height: 280px; }
/* ============ CONTRACT CARDS ============ */
.contract-groups-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.contract-group-chip {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--border-soft);
background: var(--bg-card);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.contract-group-chip:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.contract-group-chip::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
}
.contract-group-chip.critical::before { background: var(--danger); }
.contract-group-chip.danger::before { background: var(--soft-pink); }
.contract-group-chip.warning::before { background: var(--warning); }
.contract-group-chip.safe::before { background: var(--success); }
.chip-count {
font-family: 'Shippori Mincho', serif;
font-size: 28px;
font-weight: 800;
line-height: 1;
min-width: 38px;
}
.contract-group-chip.critical .chip-count { color: var(--danger); }
.contract-group-chip.danger .chip-count { color: var(--soft-pink-dark); }
.contract-group-chip.warning .chip-count { color: var(--warning); }
.contract-group-chip.safe .chip-count { color: var(--success); }
.chip-info { line-height: 1.2; }
.chip-label {
font-family: 'Shippori Mincho', serif;
font-size: 13px;
font-weight: 700;
color: var(--very-dark-grayish-red);
}
.chip-sub {
font-size: 10.5px;
color: var(--text-muted);
letter-spacing: 0.5px;
margin-top: 2px;
}
/* Contract cards grid */
.contract-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
/* ========== FINANCIAL DASHBOARD ========== */
.breakdown-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--border-soft);
}
.breakdown-row:last-child { border-bottom: none; }
.breakdown-label {
flex: 0 0 130px;
font-size: 12.5px;
font-weight: 600;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 6px;
}
.breakdown-bar-wrap {
flex: 1;
height: 8px;
background: var(--bg-soft);
border-radius: 4px;
overflow: hidden;
}
.breakdown-bar {
height: 100%;
border-radius: 4px;
transition: width 0.4s ease;
}
.breakdown-bar.--inflow { background: linear-gradient(90deg, var(--success), #1F6B45); }
.breakdown-bar.--outflow { background: linear-gradient(90deg, var(--soft-pink), var(--soft-pink-dark)); }
.breakdown-value {
flex: 0 0 100px;
text-align: right;
font-size: 13px;
font-weight: 700;
font-family: var(--font-display);
color: var(--very-dark-grayish-red);
}
.breakdown-count {
flex: 0 0 60px;
text-align: right;
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
}
/* Forecast list */
.forecast-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 11px;
}
.forecast-card {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-left: 4px solid var(--text-muted);
border-radius: 9px;
padding: 12px 14px;
}
.forecast-card.--inflow { border-left-color: var(--success); }
.forecast-card.--outflow { border-left-color: var(--soft-pink-dark); }
.forecast-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
margin-bottom: 4px;
}
.forecast-card-title {
font-size: 12.5px;
font-weight: 700;
color: var(--very-dark-grayish-red);
}
.forecast-card-meta {
font-size: 10.5px;
color: var(--text-muted);
}
.forecast-card-amount {
font-size: 16px;
font-weight: 800;
font-family: var(--font-display);
margin-top: 4px;
}
.forecast-card-amount.--inflow { color: var(--success); }
.forecast-card-amount.--outflow { color: var(--soft-pink-dark); }
/* Ledger table */
#finLedgerBody tr {
border-bottom: 1px solid var(--border-soft);
transition: background 0.15s;
}
#finLedgerBody tr:hover {
background: var(--bg-soft);
}
#finLedgerBody td {
padding: 10px 12px;
vertical-align: middle;
}
.ledger-cat-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
padding: 3px 7px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.ledger-cat-badge.--booking { background: rgba(46,160,103,0.12); color: var(--success); }
.ledger-cat-badge.--settlement { background: rgba(109,145,249,0.12); color: var(--soft-blue-dark); }
.ledger-cat-badge.--deposit_refund { background: rgba(217,119,6,0.12); color: var(--warning); }
.ledger-cat-badge.--sewa_pemilik { background: rgba(249,109,145,0.12); color: var(--soft-pink-dark); }
.ledger-cat-badge.--deposit_pemilik { background: rgba(20,184,166,0.10); color: #0d9488; font-weight: 700; }
.ledger-cat-badge.--fee_agent { background: rgba(168,85,247,0.10); color: #7e22ce; font-weight: 700; }
.ledger-cat-badge.--ipl { background: rgba(67,53,51,0.10); color: var(--very-dark-grayish-red); }
.ledger-cat-badge.--listrik { background: rgba(217,119,6,0.10); color: var(--warning); }
.ledger-cat-badge.--air { background: rgba(109,145,249,0.10); color: var(--soft-blue-dark); }
.ledger-cat-badge.--wifi { background: rgba(67,53,51,0.08); color: var(--text-secondary); }
.ledger-cat-badge.--opening_balance { background: linear-gradient(135deg, rgba(249,109,145,0.18), rgba(109,145,249,0.15)); color: var(--very-dark-grayish-red); font-weight: 800; }
.ledger-cat-badge.--opex_gaji { background: rgba(46,160,103,0.10); color: var(--success); }
.ledger-cat-badge.--opex_inventori { background: rgba(217,119,6,0.10); color: var(--warning); }
.ledger-cat-badge.--opex_bonus { background: rgba(168,85,247,0.10); color: #7e22ce; }
.ledger-cat-badge.--opex_scam { background: rgba(220,38,38,0.12); color: var(--danger); font-weight: 800; }
.ledger-cat-badge.--opex_marketing { background: rgba(109,145,249,0.10); color: var(--soft-blue-dark); }
.ledger-cat-badge.--opex_maintenance { background: rgba(67,53,51,0.10); color: var(--very-dark-grayish-red); }
.ledger-cat-badge.--opex_investasi { background: rgba(20,184,166,0.12); color: #0d9488; font-weight: 700; }
.ledger-cat-badge.--opex_transport { background: rgba(249,109,145,0.10); color: var(--soft-pink-dark); }
.ledger-cat-badge.--opex_lainnya { background: rgba(67,53,51,0.08); color: var(--text-secondary); }
.ledger-cat-badge.--manual_in { background: rgba(46,160,103,0.12); color: var(--success); }
.ledger-empty {
text-align: center;
padding: 30px 20px;
color: var(--text-muted);
font-size: 13px;
}
/* ========== PIUTANG PLATFORM CARDS ========== */
.piutang-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 11px;
}
.piutang-card {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-left: 4px solid var(--warning);
border-radius: 10px;
padding: 12px 14px;
transition: all 0.2s;
}
.piutang-card:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(67,53,51,0.07);
}
.piutang-card.--agoda { border-left-color: #FF5A5F; }
.piutang-card.--airbnb { border-left-color: #00A699; }
.piutang-card.--bookingcom { border-left-color: #003580; }
.piutang-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
margin-bottom: 8px;
}
.piutang-card-unit {
font-family: var(--font-display);
font-weight: 700;
font-size: 13.5px;
color: var(--very-dark-grayish-red);
}
.piutang-card-channel {
font-size: 10.5px;
color: var(--text-muted);
margin-top: 2px;
}
.piutang-channel-badge {
font-size: 9.5px;
font-weight: 700;
padding: 3px 7px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.4px;
background: rgba(217,119,6,0.12);
color: var(--warning);
white-space: nowrap;
}
.piutang-card-meta {
font-size: 11px;
color: var(--text-secondary);
margin-bottom: 8px;
line-height: 1.5;
}
.piutang-amount-block {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
background: var(--bg-soft);
border-radius: 7px;
margin-bottom: 8px;
}
.piutang-amount-label {
font-size: 10.5px;
color: var(--text-muted);
font-weight: 600;
}
.piutang-amount-value {
font-size: 14px;
font-weight: 800;
color: var(--warning);
font-family: var(--font-display);
}
.piutang-card-action {
width: 100%;
padding: 7px 10px;
background: var(--success);
color: white;
border: none;
border-radius: 7px;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
transition: all 0.15s;
}
.piutang-card-action:hover {
filter: brightness(1.05);
transform: translateY(-1px);
}
.piutang-empty-state {
text-align: center;
padding: 24px 20px;
color: var(--text-muted);
font-size: 12.5px;
background: var(--bg-soft);
border-radius: 10px;
border: 1px dashed var(--border-soft);
}
/* ========== DEPOSIT REFUND CARDS ========== */
.deposit-refund-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 12px;
}
.deposit-refund-card {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-left: 4px solid var(--text-muted);
border-radius: 10px;
padding: 14px;
transition: all 0.2s;
}
.deposit-refund-card:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(67,53,51,0.07);
}
.deposit-refund-card.--pending {
border-left-color: var(--warning);
background: linear-gradient(135deg, rgba(217,119,6,0.04), transparent 60%);
}
.deposit-refund-card.--soon {
border-left-color: var(--soft-blue-dark);
background: linear-gradient(135deg, rgba(109,145,249,0.04), transparent 60%);
}
.deposit-refund-card.--refunded {
border-left-color: var(--success);
background: linear-gradient(135deg, rgba(46,160,103,0.04), transparent 60%);
opacity: 0.95;
}
.deposit-refund-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
margin-bottom: 10px;
}
.deposit-refund-card-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
color: var(--very-dark-grayish-red);
}
.deposit-refund-card-tower {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.deposit-status-badge {
font-size: 10px;
font-weight: 700;
padding: 4px 8px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.4px;
white-space: nowrap;
}
.deposit-status-badge.--pending {
background: rgba(217,119,6,0.12);
color: var(--warning);
}
.deposit-status-badge.--soon {
background: rgba(109,145,249,0.12);
color: var(--soft-blue-dark);
}
.deposit-status-badge.--refunded {
background: rgba(46,160,103,0.12);
color: var(--success);
}
.deposit-refund-meta {
font-size: 11.5px;
color: var(--text-secondary);
margin-bottom: 8px;
line-height: 1.5;
}
.deposit-refund-meta strong {
color: var(--very-dark-grayish-red);
}
.deposit-amounts {
display: flex;
gap: 10px;
padding: 10px;
background: var(--bg-soft);
border-radius: 8px;
margin-bottom: 10px;
}
.deposit-amount-block {
flex: 1;
text-align: center;
}
.deposit-amount-label {
font-size: 9.5px;
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 3px;
}
.deposit-amount-value {
font-size: 13.5px;
font-weight: 800;
color: var(--very-dark-grayish-red);
font-family: var(--font-display);
}
.deposit-amount-value.--diterima {
color: var(--success);
}
.deposit-amount-value.--potongan {
color: var(--danger);
}
.deposit-refund-action {
display: flex;
gap: 6px;
}
.deposit-refund-action button {
flex: 1;
padding: 7px 10px;
border-radius: 7px;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
transition: all 0.15s;
}
.deposit-refund-action .--primary {
background: var(--soft-pink);
color: white;
}
.deposit-refund-action .--primary:hover {
background: var(--soft-pink-dark);
}
.deposit-refund-action .--secondary {
background: transparent;
color: var(--text-secondary);
border-color: var(--border-soft);
}
.deposit-refund-action .--secondary:hover {
background: var(--bg-soft);
}
.deposit-empty-state {
text-align: center;
padding: 28px 20px;
color: var(--text-muted);
font-size: 13px;
background: var(--bg-soft);
border-radius: 10px;
border: 1px dashed var(--border-soft);
}
/* ========== REFUND MODAL ========== */
.refund-modal-section {
padding: 14px 16px;
background: var(--bg-soft);
border-radius: 9px;
margin-bottom: 14px;
}
.refund-modal-section-title {
font-size: 12px;
font-weight: 700;
color: var(--very-dark-grayish-red);
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 10px;
}
.refund-summary {
background: linear-gradient(135deg, rgba(249,109,145,0.08), rgba(109,145,249,0.06));
border: 1.5px solid var(--soft-pink);
border-radius: 10px;
padding: 14px 16px;
margin-top: 6px;
}
.refund-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 13px;
}
.refund-summary-row.--total {
border-top: 1.5px dashed var(--soft-pink);
margin-top: 6px;
padding-top: 10px;
font-weight: 800;
font-size: 15px;
}
.refund-summary-row.--total .label { color: var(--very-dark-grayish-red); }
.refund-summary-row.--total .val { color: var(--success); font-family: var(--font-display); font-size: 17px; }
.refund-summary-row .label { color: var(--text-secondary); }
.refund-summary-row .val { color: var(--very-dark-grayish-red); font-weight: 700; }
.refund-summary-row .val.--neg { color: var(--danger); }
.contract-card {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 16px;
position: relative;
transition: all 0.2s ease;
cursor: pointer;
overflow: hidden;
}
.contract-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: rgba(249,109,145,0.3);
}
.contract-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
}
.contract-card.urgency-critical::before { background: linear-gradient(90deg, var(--danger), #991B1B); }
.contract-card.urgency-danger::before { background: linear-gradient(90deg, var(--soft-pink), var(--soft-pink-dark)); }
.contract-card.urgency-warning::before { background: linear-gradient(90deg, var(--warning), #B45309); }
.contract-card.urgency-safe::before { background: linear-gradient(90deg, var(--success), #1F6B45); }
.contract-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
gap: 10px;
}
.contract-card-title {
font-family: 'Shippori Mincho', serif;
font-weight: 800;
font-size: 15px;
color: var(--very-dark-grayish-red);
line-height: 1.2;
}
.contract-card-tower {
font-size: 11px;
color: var(--text-muted);
margin-top: 3px;
display: flex;
align-items: center;
gap: 6px;
}
.contract-card-tower .dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--text-muted);
}
.urgency-badge {
display: inline-flex;
align-items: center;
flex-direction: column;
padding: 8px 10px;
border-radius: 8px;
text-align: center;
flex-shrink: 0;
line-height: 1;
}
.urgency-badge .num {
font-family: 'Shippori Mincho', serif;
font-weight: 800;
font-size: 18px;
}
.urgency-badge .lbl {
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
margin-top: 2px;
text-transform: uppercase;
opacity: 0.85;
}
.contract-card.urgency-critical .urgency-badge {
background: rgba(220,38,38,0.1);
color: var(--danger);
}
.contract-card.urgency-danger .urgency-badge {
background: rgba(249,109,145,0.12);
color: var(--soft-pink-dark);
}
.contract-card.urgency-warning .urgency-badge {
background: rgba(217,119,6,0.12);
color: var(--warning);
}
.contract-card.urgency-safe .urgency-badge {
background: rgba(45,143,93,0.12);
color: var(--success);
}
.contract-card-meta {
display: flex;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.contract-meta-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 99px;
font-size: 10.5px;
font-weight: 600;
background: var(--bg-soft);
color: var(--text-secondary);
}
.contract-meta-pill.tahunan { background: rgba(109,145,249,0.12); color: var(--soft-blue-dark); }
.contract-meta-pill.bulanan { background: rgba(249,109,145,0.12); color: var(--soft-pink-dark); }
.contract-meta-pill svg { width: 11px; height: 11px; stroke-width: 2; }
.contract-date-range {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 6px;
align-items: center;
background: var(--bg-soft);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 12px;
}
.contract-date {
text-align: center;
line-height: 1.3;
}
.contract-date .date-label {
font-size: 9px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
margin-bottom: 2px;
}
.contract-date .date-val {
font-family: 'Shippori Mincho', serif;
font-size: 12px;
font-weight: 700;
color: var(--very-dark-grayish-red);
}
.contract-arrow {
color: var(--text-muted);
font-size: 14px;
}
/* Progress bar — sisa kontrak vs total durasi */
.contract-progress {
margin-bottom: 12px;
}
.contract-progress-label {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--text-muted);
margin-bottom: 4px;
letter-spacing: 0.3px;
}
.contract-progress-bar {
height: 5px;
background: var(--bg-soft);
border-radius: 99px;
overflow: hidden;
}
.contract-progress-fill {
height: 100%;
border-radius: 99px;
transition: width 0.6s ease;
}
.contract-card.urgency-critical .contract-progress-fill { background: var(--danger); }
.contract-card.urgency-danger .contract-progress-fill { background: var(--soft-pink); }
.contract-card.urgency-warning .contract-progress-fill { background: var(--warning); }
.contract-card.urgency-safe .contract-progress-fill { background: var(--success); }
.contract-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
border-top: 1px solid var(--border-soft);
}
.contract-price-box {
background: var(--soft-pink);
padding: 8px 12px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(249,109,145,0.25);
color: var(--white);
}
.contract-price {
font-family: 'Shippori Mincho', serif;
font-weight: 700;
font-size: 13px;
color: var(--very-dark-grayish-red);
}
.contract-price-box .contract-price {
color: var(--white);
font-size: 14px;
}
.contract-price-label {
font-size: 9.5px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
}
.contract-price-box .contract-price-label {
color: rgba(255,255,255,0.9);
font-weight: 600;
}
.contract-card-action {
font-size: 10.5px;
font-weight: 700;
color: var(--soft-pink-dark);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 8px;
border-radius: 6px;
background: transparent;
border: none;
cursor: pointer;
transition: background 0.15s ease;
}
.contract-card-action:hover {
background: var(--bg-soft);
}
.contract-card-action svg { width: 12px; height: 12px; }
.contract-empty {
grid-column: 1 / -1;
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
font-size: 13px;
}
.contract-empty .icon {
width: 56px; height: 56px;
margin: 0 auto 14px;
background: var(--bg-soft);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--success);
}
.contract-empty .icon svg { width: 26px; height: 26px; stroke-width: 1.5; }
@media (max-width: 1100px) {
.contract-groups-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.contract-groups-summary { grid-template-columns: 1fr; }
.contract-cards-grid { grid-template-columns: 1fr; }
}
/* ============ TABLE ============ */
.table-controls {
display: flex;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.search-box { flex: 1; min-width: 220px; position: relative; }
.search-box input {
width: 100%;
padding: 10px 14px 10px 38px;
border: 1px solid var(--border);
background: var(--bg-primary);
font-size: 13px;
color: var(--text-primary);
border-radius: 8px;
transition: all 0.2s ease;
}
.search-box input:focus {
outline: none;
border-color: var(--soft-pink);
background: var(--white);
box-shadow: 0 0 0 3px rgba(249,109,145,0.1);
}
.search-box::before {
content: '';
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
}
.filter-select {
padding: 10px 14px;
border: 1px solid var(--border);
background: var(--bg-primary);
font-size: 13px;
color: var(--text-primary);
border-radius: 8px;
cursor: pointer;
min-width: 150px;
font-weight: 500;
}
.filter-select:focus {
outline: none;
border-color: var(--soft-pink);
box-shadow: 0 0 0 3px rgba(249,109,145,0.1);
}
.table-wrap {
overflow-x: auto;
border: 1px solid var(--border-soft);
border-radius: 10px;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
thead {
background: linear-gradient(135deg, var(--very-dark-grayish-red), var(--very-dark-grey));
color: var(--white);
}
th {
padding: 13px 14px;
text-align: left;
font-size: 10.5px;
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
th.right { text-align: right; }
tbody tr {
border-bottom: 1px solid var(--border-soft);
transition: background 0.15s ease;
}
tbody tr:hover { background: var(--bg-soft); }
tbody tr:last-child { border-bottom: none; }
td {
padding: 12px 14px;
color: var(--text-primary);
white-space: nowrap;
}
td.right { text-align: right; }
td.num { font-feature-settings: 'tnum'; }
td .unit-code { font-weight: 700; color: var(--very-dark-grayish-red); }
td .tower-tag {
display: inline-block;
padding: 3px 10px;
background: var(--bg-soft);
color: var(--soft-pink-dark);
border-radius: 6px;
font-size: 11px;
font-weight: 600;
}
td .br-pill {
display: inline-block;
padding: 2px 9px;
background: var(--bg-blue-soft);
color: var(--soft-blue-dark);
border-radius: 99px;
font-size: 11px;
font-weight: 600;
}
.periode-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 6px;
font-size: 10.5px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 700;
}
.periode-badge.tahunan { background: rgba(109,145,249,0.12); color: var(--soft-blue-dark); }
.periode-badge.bulanan { background: rgba(249,109,145,0.12); color: var(--soft-pink-dark); }
.periode-badge.tahunan-cicil { background: rgba(217,119,6,0.12); color: var(--warning); }
.periode-badge.harian { background: rgba(255,192,205,0.35); color: #B8395E; }
/* === Laporan Bulanan === */
.laporan-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.laporan-table th, .laporan-table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--border-soft);
}
.laporan-table th {
background: var(--bg-soft);
font-weight: 700;
font-size: 11px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.laporan-table td.right, .laporan-table th.right { text-align: right; }
.laporan-table tr.income td { color: var(--success); font-weight: 600; }
.laporan-table tr.expense td { color: var(--text-secondary); }
.laporan-table tr.subtotal td {
border-top: 2px solid var(--very-dark-grayish-red);
font-weight: 800;
color: var(--very-dark-grayish-red);
padding-top: 12px;
}
.laporan-table tr.total td {
background: linear-gradient(90deg, rgba(249,109,145,0.05), rgba(109,145,249,0.05));
font-weight: 800;
font-size: 14px;
color: var(--very-dark-grayish-red);
border-top: 3px double var(--soft-pink);
}
.channel-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border-soft);
}
.channel-row:last-child { border-bottom: none; }
.channel-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.channel-info { flex: 1; min-width: 0; }
.channel-name { font-weight: 700; font-size: 13px; color: var(--very-dark-grayish-red); }
.channel-stats { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.channel-bar-wrap {
width: 200px;
height: 6px;
background: var(--bg-soft);
border-radius: 3px;
overflow: hidden;
flex-shrink: 0;
}
.channel-bar {
height: 100%;
background: linear-gradient(90deg, var(--soft-pink), var(--soft-pink-dark));
border-radius: 3px;
}
.channel-value {
min-width: 110px;
text-align: right;
font-weight: 700;
font-size: 13px;
color: var(--success);
font-family: var(--font-display);
}
.ops-metric-card {
background: var(--bg-soft);
border-radius: 8px;
padding: 12px 14px;
border-left: 3px solid var(--soft-pink);
}
.ops-metric-label {
font-size: 10px;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.ops-metric-value {
font-size: 18px;
font-weight: 700;
color: var(--very-dark-grayish-red);
font-family: var(--font-display);
}
.ops-metric-detail {
font-size: 10.5px;
color: var(--text-secondary);
margin-top: 2px;
}
.agen-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-bottom: 1px solid var(--border-soft);
}
.agen-row:last-child { border-bottom: none; }
.mom-indicator {
font-size: 10.5px;
font-weight: 700;
padding: 1px 6px;
border-radius: 3px;
margin-left: 4px;
}
.mom-indicator.up { background: rgba(45,143,93,0.12); color: var(--success); }
.mom-indicator.down { background: rgba(220,38,38,0.1); color: var(--danger); }
.mom-indicator.neutral { background: var(--bg-soft); color: var(--text-muted); }
/* === PRINT MODE === */
@media print {
body { background: white !important; margin: 0; padding: 0; }
.sidebar, .topbar, .laporan-controls, footer, .nav-bar { display: none !important; }
.main { margin-left: 0 !important; padding: 0 !important; max-width: 100% !important; }
.content { padding: 0 !important; max-width: 100% !important; }
.page { display: block !important; }
.page:not(.page-laporan) { display: none !important; }
.page-laporan { padding: 0 !important; }
.panel {
box-shadow: none !important;
border: 1px solid #e5e5e5 !important;
break-inside: avoid;
page-break-inside: avoid;
margin-bottom: 16px !important;
}
.stats-grid { break-inside: avoid; }
.stat-card {
box-shadow: none !important;
border: 1px solid #e5e5e5 !important;
break-inside: avoid;
}
.laporan-table {
font-size: 10px;
break-inside: avoid;
}
.laporan-table th, .laporan-table td {
padding: 6px 8px;
}
/* Background gradients harus terlihat */
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
/* Hide elements yang tidak perlu di laporan */
.icon-btn, .btn { display: none !important; }
@page {
size: A4 portrait;
margin: 15mm;
}
}
/* === Piutang Group (Per Agen view) === */
.pt-group {
margin-bottom: 14px;
border: 1px solid var(--border-soft);
border-radius: 10px;
overflow: hidden;
background: var(--bg-primary);
}
.pt-group-header {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--bg-soft);
cursor: pointer;
transition: background 0.15s ease;
user-select: none;
}
.pt-group-header:hover {
background: rgba(249,109,145,0.06);
}
.pt-group-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
font-family: var(--font-display);
background: linear-gradient(135deg, var(--soft-pink) 0%, var(--soft-pink-dark) 100%);
box-shadow: 0 2px 6px rgba(249,109,145,0.25);
}
.pt-group-avatar.channel-direct {
background: linear-gradient(135deg, var(--soft-blue) 0%, var(--soft-blue-dark) 100%);
box-shadow: 0 2px 6px rgba(109,145,249,0.25);
}
.pt-group-avatar.channel-platform {
background: linear-gradient(135deg, #FF5A5F 0%, #c64143 100%);
box-shadow: 0 2px 6px rgba(255,90,95,0.25);
}
.pt-group-info {
flex: 1;
min-width: 0;
}
.pt-group-name {
font-weight: 700;
font-size: 14px;
color: var(--very-dark-grayish-red);
}
.pt-group-meta {
font-size: 10.5px;
color: var(--text-muted);
margin-top: 2px;
}
.pt-group-stats {
display: flex;
gap: 16px;
align-items: center;
flex-shrink: 0;
}
.pt-group-stat {
text-align: right;
}
.pt-group-stat-label {
font-size: 9.5px;
color: var(--text-muted);
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 1px;
}
.pt-group-stat-value {
font-size: 14px;
font-weight: 800;
font-family: var(--font-display);
color: var(--very-dark-grayish-red);
}
.pt-group-stat-value.danger { color: var(--danger); }
.pt-group-chevron {
width: 18px;
height: 18px;
color: var(--text-muted);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.pt-group.expanded .pt-group-chevron {
transform: rotate(90deg);
}
.pt-group-body {
padding: 8px 12px 12px;
background: var(--bg-primary);
display: none;
}
.pt-group.expanded .pt-group-body {
display: block;
}
.pt-group-body .pt-card {
margin-bottom: 6px;
}
.pt-group-body .pt-card:last-child {
margin-bottom: 0;
}
/* Aging indicator di group header */
.pt-aging-dots {
display: inline-flex;
gap: 3px;
align-items: center;
margin-left: 8px;
}
.pt-aging-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.pt-aging-dot.green { background: var(--success); }
.pt-aging-dot.yellow { background: var(--warning); }
.pt-aging-dot.orange { background: #ea580c; }
.pt-aging-dot.red { background: var(--danger); }
/* === Piutang Tamu (Account Receivable) - di Financial Dashboard === */
/* NOTE: nama class pakai prefix `pt-` (piutang tamu) untuk hindari konflik
dengan `.piutang-card` yang sudah dipakai di Piutang Platform (Booking page) */
.pt-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
border-radius: 8px;
border: 1px solid var(--border-soft);
background: var(--bg-primary);
margin-bottom: 8px;
transition: all 0.15s ease;
cursor: pointer;
}
.pt-card:hover {
border-color: var(--soft-pink);
background: rgba(249,109,145,0.02);
}
.pt-card.aging-green { border-left: 3px solid var(--success); }
.pt-card.aging-yellow { border-left: 3px solid var(--warning); }
.pt-card.aging-orange { border-left: 3px solid #ea580c; }
.pt-card.aging-red { border-left: 3px solid var(--danger); background: rgba(220,38,38,0.03); }
.pt-aging-badge {
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.pt-aging-badge.green { background: rgba(34,197,94,0.12); color: var(--success); }
.pt-aging-badge.yellow { background: rgba(217,119,6,0.12); color: var(--warning); }
.pt-aging-badge.orange { background: rgba(234,88,12,0.12); color: #ea580c; }
.pt-aging-badge.red { background: rgba(220,38,38,0.12); color: var(--danger); }
.pt-customer-name {
font-weight: 700;
font-size: 13px;
color: var(--very-dark-grayish-red);
}
.pt-meta {
font-size: 10.5px;
color: var(--text-muted);
margin-top: 2px;
line-height: 1.5;
}
.pt-amount {
font-family: var(--font-display);
font-weight: 800;
font-size: 15px;
color: var(--danger);
white-space: nowrap;
}
.pt-empty {
text-align: center;
padding: 30px 20px;
color: var(--text-muted);
font-style: italic;
}
/* === Stakeholder Cards === */
.sh-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
border: 1px solid var(--border-soft);
border-radius: 10px;
background: var(--bg-primary);
margin-bottom: 10px;
transition: all 0.15s ease;
}
.sh-card:hover {
border-color: var(--soft-pink);
background: rgba(249,109,145,0.02);
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
transform: translateY(-1px);
}
.sh-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 16px;
flex-shrink: 0;
font-family: var(--font-display);
}
.sh-avatar.role-agen {
background: linear-gradient(135deg, var(--soft-pink) 0%, var(--soft-pink-dark) 100%);
box-shadow: 0 2px 6px rgba(249,109,145,0.25);
}
.sh-avatar.role-pemilik {
background: linear-gradient(135deg, var(--soft-blue) 0%, var(--soft-blue-dark) 100%);
box-shadow: 0 2px 6px rgba(109,145,249,0.25);
}
.sh-avatar.role-both {
background: linear-gradient(135deg, var(--soft-pink) 0%, var(--soft-blue) 100%);
box-shadow: 0 2px 6px rgba(249,109,145,0.2);
}
.sh-body {
flex: 1;
min-width: 0;
}
.sh-name-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.sh-name {
font-weight: 700;
font-size: 14px;
color: var(--very-dark-grayish-red);
}
.sh-role-badge {
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sh-role-badge.role-agen { background: rgba(249,109,145,0.12); color: var(--soft-pink-dark); }
.sh-role-badge.role-pemilik { background: rgba(109,145,249,0.12); color: var(--soft-blue-dark); }
.sh-role-badge.role-both { background: rgba(217,119,6,0.12); color: var(--warning); }
.sh-unit-pill {
font-size: 10px;
padding: 2px 7px;
border-radius: 4px;
background: var(--bg-soft);
color: var(--text-secondary);
font-weight: 600;
}
.sh-meta {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 11.5px;
color: var(--text-secondary);
margin-bottom: 4px;
}
.sh-meta .meta-item {
display: flex;
align-items: center;
gap: 4px;
}
.sh-meta .meta-item.muted {
color: var(--text-muted);
font-style: italic;
}
.sh-units-line {
font-size: 10.5px;
color: var(--text-muted);
margin-top: 6px;
line-height: 1.5;
}
.sh-notes {
font-size: 11px;
color: var(--text-secondary);
margin-top: 6px;
font-style: italic;
padding: 4px 8px;
background: var(--bg-soft);
border-radius: 4px;
display: inline-block;
}
.sh-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.sh-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
}
.sh-empty svg {
width: 48px;
height: 48px;
margin-bottom: 12px;
opacity: 0.4;
}
/* === PPJS Kontrak Sewa === */
.ppjs-dropzone {
border: 2px dashed var(--border);
border-radius: 12px;
padding: 32px 20px;
text-align: center;
background: var(--bg-soft);
cursor: pointer;
transition: all 0.2s ease;
}
.ppjs-dropzone:hover, .ppjs-dropzone.is-dragover {
border-color: var(--soft-pink);
background: rgba(249,109,145,0.04);
transform: translateY(-1px);
}
.ppjs-dropzone.is-dragover {
box-shadow: 0 0 0 4px rgba(249,109,145,0.1);
}
.ppjs-doc-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--border-soft);
border-radius: 10px;
background: var(--bg-primary);
margin-bottom: 8px;
transition: all 0.15s ease;
}
.ppjs-doc-card:hover {
border-color: var(--soft-pink);
background: rgba(249,109,145,0.02);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.ppjs-doc-icon {
width: 42px;
height: 42px;
border-radius: 8px;
background: linear-gradient(135deg, var(--soft-pink) 0%, var(--soft-pink-dark) 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(249,109,145,0.2);
}
.ppjs-doc-info {
flex: 1;
min-width: 0;
}
.ppjs-doc-name {
font-weight: 700;
font-size: 13px;
color: var(--very-dark-grayish-red);
margin-bottom: 2px;
word-break: break-all;
}
.ppjs-doc-meta {
font-size: 11px;
color: var(--text-muted);
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.ppjs-doc-meta .meta-pill {
background: var(--bg-soft);
padding: 2px 7px;
border-radius: 4px;
color: var(--text-secondary);
font-weight: 600;
}
.ppjs-doc-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.ppjs-empty {
text-align: center;
padding: 40px 20px;
color: var(--text-muted);
}
.ppjs-empty svg {
width: 48px;
height: 48px;
margin-bottom: 12px;
opacity: 0.4;
}
/* Revenue input inline */
.rev-input {
width: 110px;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: 'Inter', sans-serif;
font-size: 12px;
text-align: right;
background: var(--bg-primary);
color: var(--text-primary);
font-feature-settings: 'tnum';
transition: all 0.15s ease;
}
.rev-input:focus {
outline: none;
border-color: var(--soft-pink);
background: var(--white);
box-shadow: 0 0 0 3px rgba(249,109,145,0.1);
}
.rev-input.has-value { background: rgba(45,143,93,0.05); border-color: rgba(45,143,93,0.3); color: var(--success); font-weight: 600; }
/* === Hide spinner arrows di SEMUA input number === */
/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
.roi-cell {
font-family: 'Shippori Mincho', serif;
font-weight: 700;
font-size: 13px;
}
.roi-cell.pos { color: var(--success); }
.roi-cell.neg { color: var(--danger); }
.roi-cell.neutral { color: var(--text-muted); }
.occupancy-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
font-size: 11.5px;
font-weight: 600;
}
.occupancy-toggle .switch {
width: 32px;
height: 18px;
background: var(--border);
border-radius: 99px;
position: relative;
transition: background 0.2s ease;
}
.occupancy-toggle .switch::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
background: var(--white);
border-radius: 50%;
transition: transform 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.occupancy-toggle.on .switch { background: var(--success); }
.occupancy-toggle.on .switch::after { transform: translateX(14px); }
.occupancy-toggle.on .lbl { color: var(--success); }
.occupancy-toggle .lbl { color: var(--text-muted); transition: color 0.2s ease; }
/* ============ HELPER & ACTIONS ============ */
.help-note {
background: var(--bg-blue-soft);
border-left: 3px solid var(--soft-blue);
padding: 12px 14px;
border-radius: 6px;
margin-bottom: 16px;
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
}
.help-note strong { color: var(--soft-blue-dark); }
.btn {
padding: 8px 14px;
background: var(--white);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 12px;
color: var(--text-primary);
cursor: pointer;
font-weight: 600;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn:hover { background: var(--bg-soft); border-color: var(--soft-pink); color: var(--soft-pink-dark); }
.btn.--primary {
background: var(--soft-pink);
border-color: var(--soft-pink);
color: var(--white);
}
.btn.--primary:hover { background: var(--soft-pink-dark); border-color: var(--soft-pink-dark); color: var(--white); }
.btn.--danger { color: var(--danger); }
.btn.--danger:hover { background: rgba(220,38,38,0.08); border-color: var(--danger); color: var(--danger); }
/* ============ FOOTER ============ */
footer {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--border-soft);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
letter-spacing: 1px;
color: var(--text-muted);
}
footer .kanji-foot {
font-family: 'Noto Serif JP', serif;
color: var(--soft-pink);
font-size: 14px;
letter-spacing: 4px;
font-weight: 600;
}
/* ============ OCCUPANCY OVERVIEW (Booking Section) ============ */
.occupancy-overview {
display: grid;
grid-template-columns: auto 1fr;
gap: 32px;
align-items: center;
padding: 8px 4px;
}
.occ-ring-big {
position: relative;
width: 180px;
height: 180px;
flex-shrink: 0;
}
.occ-ring-big svg { transform: rotate(-90deg); }
.occ-arc {
fill: none;
stroke-width: 14;
stroke-linecap: butt;
transition: stroke-dashoffset 0.8s ease, stroke-dasharray 0.8s ease;
}
.occ-arc-bg { stroke: var(--bg-soft); }
.occ-arc-tersewa { stroke: var(--success); }
.occ-arc-booking { stroke: var(--warning); }
.occ-arc-available { stroke: rgba(45,143,93,0.25); }
.occ-ring-big-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
}
.occ-ring-big-center .num {
font-family: 'Shippori Mincho', serif;
font-size: 36px;
font-weight: 800;
color: var(--very-dark-grayish-red);
line-height: 1;
}
.occ-ring-big-center .lbl {
font-size: 10.5px;
color: var(--text-muted);
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 4px;
font-weight: 600;
}
.occ-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.occ-stat-card {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 14px;
display: flex;
gap: 12px;
align-items: flex-start;
position: relative;
overflow: hidden;
transition: all 0.2s ease;
}
.occ-stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.occ-stat-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
}
.occ-stat-card.tersewa::before { background: var(--success); }
.occ-stat-card.booking::before { background: var(--warning); }
.occ-stat-card.available::before { background: var(--soft-blue); }
.occ-stat-icon {
width: 36px; height: 36px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.occ-stat-icon svg { width: 18px; height: 18px; }
.occ-stat-card.tersewa .occ-stat-icon { background: rgba(45,143,93,0.12); color: var(--success); }
.occ-stat-card.booking .occ-stat-icon { background: rgba(217,119,6,0.12); color: var(--warning); }
.occ-stat-card.available .occ-stat-icon { background: rgba(109,145,249,0.12); color: var(--soft-blue-dark); }
.occ-stat-info { min-width: 0; flex: 1; }
.occ-stat-label {
font-size: 10.5px;
color: var(--text-muted);
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 4px;
}
.occ-stat-value {
font-family: 'Shippori Mincho', serif;
font-size: 24px;
font-weight: 800;
color: var(--very-dark-grayish-red);
line-height: 1;
}
.occ-stat-value .of {
font-size: 13px;
color: var(--text-muted);
font-weight: 400;
margin-left: 3px;
}
.occ-stat-pct {
font-size: 11px;
font-weight: 700;
margin-top: 6px;
}
.occ-stat-card.tersewa .occ-stat-pct { color: var(--success); }
.occ-stat-card.booking .occ-stat-pct { color: var(--warning); }
.occ-stat-card.available .occ-stat-pct { color: var(--soft-blue-dark); }
@media (max-width: 1100px) {
.occupancy-overview { grid-template-columns: 1fr; justify-items: center; }
.occ-stats-grid { grid-template-columns: repeat(3, 1fr); width: 100%; }
}
@media (max-width: 768px) {
.occ-stats-grid { grid-template-columns: 1fr; }
}
/* ============ AVAILABLE UNITS PANEL ============ */
.available-panel {
background: linear-gradient(135deg, rgba(45,143,93,0.04), rgba(109,145,249,0.04));
border: 1px solid rgba(45,143,93,0.2);
border-radius: 14px;
padding: 20px 22px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.available-panel::before {
content: '';
position: absolute;
right: -30px;
top: -30px;
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(45,143,93,0.08) 0%, transparent 70%);
pointer-events: none;
}
.available-panel.--all-booked {
background: linear-gradient(135deg, rgba(249,109,145,0.04), rgba(217,119,6,0.04));
border-color: rgba(217,119,6,0.25);
}
.available-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 14px;
gap: 12px;
flex-wrap: wrap;
}
.available-title-wrap {
display: flex;
align-items: center;
gap: 14px;
}
.available-icon {
width: 44px;
height: 44px;
border-radius: 11px;
background: var(--success);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(45,143,93,0.25);
flex-shrink: 0;
}
.--all-booked .available-icon {
background: var(--warning);
box-shadow: 0 4px 14px rgba(217,119,6,0.25);
}
.available-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.available-title {
font-family: 'Shippori Mincho', serif;
font-size: 16px;
font-weight: 800;
color: var(--very-dark-grayish-red);
line-height: 1.2;
}
.available-subtitle {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 3px;
}
.available-count {
font-family: 'Shippori Mincho', serif;
font-size: 34px;
font-weight: 800;
color: var(--success);
line-height: 1;
text-align: right;
}
.--all-booked .available-count { color: var(--warning); }
.available-count .of {
font-size: 14px;
color: var(--text-muted);
font-weight: 400;
margin-left: 4px;
}
.available-count-label {
font-size: 10px;
color: var(--text-muted);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-top: 2px;
text-align: right;
}
/* Grid chip per unit kosong */
.available-units-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px;
margin-top: 14px;
position: relative;
z-index: 1;
}
.available-unit-chip {
background: var(--white);
border: 1px solid rgba(45,143,93,0.2);
border-radius: 8px;
padding: 9px 12px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
}
.available-unit-chip:hover {
border-color: var(--success);
background: rgba(45,143,93,0.04);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(45,143,93,0.12);
}
.available-unit-chip-info { min-width: 0; line-height: 1.2; }
.available-unit-chip-unit {
font-family: 'Shippori Mincho', serif;
font-weight: 700;
font-size: 12.5px;
color: var(--very-dark-grayish-red);
}
.available-unit-chip-tower {
font-size: 10.5px;
color: var(--text-muted);
margin-top: 1px;
}
.available-unit-chip-add {
width: 24px;
height: 24px;
border-radius: 6px;
background: rgba(45,143,93,0.1);
color: var(--success);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: 8px;
}
.available-unit-chip:hover .available-unit-chip-add {
background: var(--success);
color: var(--white);
}
.available-unit-chip-add svg { width: 12px; height: 12px; stroke-width: 2.5; }
.available-empty-state {
text-align: center;
padding: 18px;
font-size: 13px;
color: var(--text-secondary);
background: rgba(217,119,6,0.06);
border-radius: 8px;
margin-top: 14px;
}
.available-empty-state .em {
color: var(--warning);
font-weight: 700;
font-family: 'Shippori Mincho', serif;
}
/* ============ BOOKING TABLE — STATUS GROUP HEADER ============ */
.booking-table tbody tr.group-header {
background: var(--bg-soft);
}
.booking-table tbody tr.group-header:hover { background: var(--bg-soft); }
.booking-table tbody tr.group-header td {
padding: 9px 14px;
font-size: 10.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
color: var(--text-secondary);
border-top: 2px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
}
.booking-table tbody tr.group-header td .group-indicator {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
.booking-table tbody tr.group-header.booking td { color: var(--warning); }
.booking-table tbody tr.group-header.booking .group-indicator { background: var(--warning); }
.booking-table tbody tr.group-header.tersewa td { color: var(--success); }
.booking-table tbody tr.group-header.tersewa .group-indicator { background: var(--success); }
.booking-table tbody tr.group-header.selesai td { color: var(--soft-blue-dark); }
.booking-table tbody tr.group-header.selesai .group-indicator { background: var(--soft-blue-dark); }
.booking-table tbody tr.group-header td .group-count {
color: var(--text-muted);
margin-left: 6px;
font-weight: 500;
}
/* Highlight tanggal urgent */
.date-highlight {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
}
.date-highlight.today {
background: rgba(220,38,38,0.1);
color: var(--danger);
}
.date-highlight.tomorrow {
background: rgba(217,119,6,0.1);
color: var(--warning);
}
.date-highlight.this-week {
background: rgba(249,109,145,0.08);
color: var(--soft-pink-dark);
}
/* View toggle */
.view-toggle {
display: inline-flex;
gap: 4px;
background: var(--bg-soft);
padding: 3px;
border-radius: 8px;
border: 1px solid var(--border-soft);
}
.view-toggle button {
background: transparent;
border: none;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 11.5px;
font-weight: 600;
color: var(--text-secondary);
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.15s ease;
}
.view-toggle button:hover { color: var(--very-dark-grayish-red); }
.view-toggle button.active {
background: var(--white);
color: var(--soft-pink-dark);
box-shadow: 0 1px 3px rgba(67,53,51,0.1);
}
.view-toggle svg { width: 13px; height: 13px; stroke-width: 2; }
/* Booking cards (alternative view) */
.booking-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
}
.booking-card {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 16px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.booking-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: rgba(249,109,145,0.3);
}
.booking-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
}
.booking-card.status-booking::before { background: var(--warning); }
.booking-card.status-tersewa::before { background: var(--success); }
.booking-card.status-selesai::before { background: var(--soft-blue-dark); }
.booking-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
gap: 10px;
}
.booking-card-unit {
font-family: 'Shippori Mincho', serif;
font-weight: 800;
font-size: 15px;
color: var(--very-dark-grayish-red);
line-height: 1.2;
}
.booking-card-tower {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.booking-card-guest {
font-size: 12px;
color: var(--text-secondary);
margin-top: 6px;
display: flex;
align-items: center;
gap: 4px;
}
.booking-card-guest svg { width: 11px; height: 11px; opacity: 0.6; }
.booking-card-dates {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 6px;
align-items: center;
background: var(--bg-soft);
border-radius: 8px;
padding: 8px 10px;
margin: 10px 0;
}
.booking-card-date-block { text-align: center; line-height: 1.2; }
.booking-card-date-label {
font-size: 9px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.booking-card-date-val {
font-family: 'Shippori Mincho', serif;
font-size: 11.5px;
font-weight: 700;
color: var(--very-dark-grayish-red);
margin-top: 1px;
}
.booking-card-days-pill {
background: var(--white);
color: var(--soft-pink-dark);
border: 1px solid rgba(249,109,145,0.3);
padding: 3px 8px;
border-radius: 99px;
font-size: 10.5px;
font-weight: 700;
}
.booking-card-money {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border-soft);
}
.booking-card-money-item .label {
font-size: 9.5px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 600;
}
.booking-card-money-item .val {
font-family: 'Shippori Mincho', serif;
font-weight: 700;
font-size: 13px;
color: var(--very-dark-grayish-red);
margin-top: 1px;
}
.booking-card-money-item .val.paid { color: var(--success); }
.booking-card-money-item .val.sisa { color: var(--danger); }
.booking-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
/* ============ REVENUE BOOKING ============ */
.booking-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 20px;
}
.booking-stat {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 18px;
position: relative;
overflow: hidden;
}
.booking-stat-icon {
width: 36px; height: 36px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 12px;
}
.booking-stat-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.booking-stat.booked .booking-stat-icon { background: rgba(217,119,6,0.12); color: var(--warning); }
.booking-stat.active .booking-stat-icon { background: rgba(45,143,93,0.12); color: var(--success); }
.booking-stat.done .booking-stat-icon { background: rgba(109,145,249,0.12); color: var(--soft-blue-dark); }
.booking-stat.revenue .booking-stat-icon { background: rgba(249,109,145,0.12); color: var(--soft-pink-dark); }
.booking-stat-jp {
font-family: 'Noto Serif JP', serif;
font-size: 10px;
letter-spacing: 2px;
margin-bottom: 2px;
font-weight: 500;
opacity: 0.7;
}
.booking-stat.booked .booking-stat-jp { color: var(--warning); }
.booking-stat.active .booking-stat-jp { color: var(--success); }
.booking-stat.done .booking-stat-jp { color: var(--soft-blue-dark); }
.booking-stat.revenue .booking-stat-jp { color: var(--soft-pink-dark); }
.booking-stat-label {
font-size: 10.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
font-weight: 600;
}
.booking-stat-value {
font-family: 'Shippori Mincho', serif;
font-size: 24px;
font-weight: 700;
color: var(--very-dark-grayish-red);
line-height: 1.1;
}
.booking-stat-value .unit {
font-size: 12px;
color: var(--text-muted);
font-weight: 400;
margin-left: 4px;
}
/* Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(67, 53, 51, 0.55);
backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
z-index: 2000;
padding: 20px;
animation: fadeIn 0.2s ease;
}
.modal-overlay.show { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
background: var(--white);
border-radius: 16px;
width: 100%;
max-width: 640px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(67,53,51,0.25);
animation: slideUp 0.25s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header {
padding: 22px 26px;
border-bottom: 1px solid var(--border-soft);
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, var(--soft-pink), var(--soft-pink-dark));
color: var(--white);
border-radius: 16px 16px 0 0;
}
.modal-title {
font-family: 'Shippori Mincho', serif;
font-size: 18px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.modal-title .kanji {
font-family: 'Noto Serif JP', serif;
font-size: 22px;
opacity: 0.9;
}
.modal-close {
width: 32px; height: 32px;
background: rgba(255,255,255,0.2);
border: none;
border-radius: 8px;
color: var(--white);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s ease;
}
.modal-close:hover { background: rgba(255,255,255,0.35); }
.modal-close svg { width: 16px; height: 16px; stroke-width: 2.5; }
.modal-body { padding: 22px 26px; }
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-grid .full { grid-column: 1 / -1; }
.form-group label {
display: block;
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-secondary);
font-weight: 600;
margin-bottom: 6px;
}
.form-group label .req { color: var(--soft-pink); }
.form-control {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-primary);
font-family: 'Inter', sans-serif;
font-size: 13px;
color: var(--text-primary);
transition: all 0.15s ease;
}
.form-control:focus {
outline: none;
border-color: var(--soft-pink);
background: var(--white);
box-shadow: 0 0 0 3px rgba(249,109,145,0.1);
}
textarea.form-control { resize: vertical; min-height: 70px; font-family: 'Inter', sans-serif; }
.form-pill-group {
display: flex;
gap: 6px;
background: var(--bg-soft);
padding: 4px;
border-radius: 8px;
border: 1px solid var(--border-soft);
}
.form-pill {
flex: 1;
padding: 8px 10px;
border: none;
background: transparent;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
transition: all 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.form-pill:hover { color: var(--very-dark-grayish-red); }
.form-pill.active {
background: var(--white);
color: var(--very-dark-grayish-red);
box-shadow: 0 2px 6px rgba(67,53,51,0.08);
}
.form-pill.active[data-val="booking"] { color: var(--warning); }
.form-pill.active[data-val="tersewa"] { color: var(--success); }
.form-pill.active[data-val="selesai"] { color: var(--soft-blue-dark); }
.form-pill.active[data-val="lunas"] { color: var(--success); }
.form-pill.active[data-val="dp"] { color: var(--warning); }
.form-pill.active[data-val="belum"] { color: var(--danger); }
.form-pill .dot {
width: 8px; height: 8px; border-radius: 50%;
}
.form-pill[data-val="booking"] .dot { background: var(--warning); }
.form-pill[data-val="tersewa"] .dot { background: var(--success); }
.form-pill[data-val="selesai"] .dot { background: var(--soft-blue-dark); }
.form-pill[data-val="lunas"] .dot { background: var(--success); }
.form-pill[data-val="dp"] .dot { background: var(--warning); }
.form-pill[data-val="belum"] .dot { background: var(--danger); }
.input-with-prefix {
display: flex;
align-items: center;
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0 12px;
transition: all 0.15s ease;
}
.input-with-prefix:focus-within {
border-color: var(--soft-pink);
background: var(--white);
box-shadow: 0 0 0 3px rgba(249,109,145,0.1);
}
.input-with-prefix .prefix {
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
padding-right: 8px;
border-right: 1px solid var(--border);
margin-right: 8px;
}
.input-with-prefix .suffix {
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
padding-left: 8px;
}
.input-with-prefix input {
flex: 1;
border: none;
background: transparent;
padding: 10px 0;
font-size: 13px;
color: var(--text-primary);
font-family: 'Inter', sans-serif;
}
.input-with-prefix input:focus { outline: none; }
.calc-display {
background: var(--bg-blue-soft);
border: 1px solid rgba(109,145,249,0.2);
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
color: var(--soft-blue-dark);
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
.calc-display .label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.8;
font-weight: 600;
}
.calc-display .val { font-family: 'Shippori Mincho', serif; font-size: 14px; font-weight: 700; }
.modal-footer {
padding: 16px 26px;
border-top: 1px solid var(--border-soft);
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
background: var(--bg-soft);
border-radius: 0 0 16px 16px;
}
/* Booking Table */
.booking-table-wrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; }
.booking-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.booking-table thead {
background: linear-gradient(135deg, var(--very-dark-grayish-red), var(--very-dark-grey));
color: var(--white);
position: sticky;
top: 0;
z-index: 5;
}
.booking-table th {
padding: 12px 12px;
text-align: left;
font-size: 10.5px;
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
.booking-table th.right { text-align: right; }
.booking-table th.center { text-align: center; }
.booking-table tbody tr {
border-bottom: 1px solid var(--border-soft);
transition: background 0.15s ease;
}
.booking-table tbody tr:hover { background: var(--bg-soft); }
.booking-table td {
padding: 11px 12px;
color: var(--text-primary);
white-space: nowrap;
}
.booking-table td.right { text-align: right; }
.booking-table td.center { text-align: center; }
.booking-table td.num { font-feature-settings: 'tnum'; }
.status-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 99px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.status-pill::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
}
.status-pill.booking { background: rgba(217,119,6,0.12); color: var(--warning); }
.status-pill.booking::before { background: var(--warning); }
.status-pill.tersewa { background: rgba(45,143,93,0.12); color: var(--success); }
.status-pill.tersewa::before { background: var(--success); }
.status-pill.selesai { background: rgba(109,145,249,0.12); color: var(--soft-blue-dark); }
.status-pill.selesai::before { background: var(--soft-blue-dark); }
.pay-pill {
display: inline-flex;
align-items: center;
padding: 2px 9px;
border-radius: 4px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.3px;
}
.pay-pill.lunas { background: rgba(45,143,93,0.1); color: var(--success); }
.pay-pill.dp { background: rgba(217,119,6,0.1); color: var(--warning); }
.pay-pill.belum { background: rgba(220,38,38,0.1); color: var(--danger); }
.icon-btn {
width: 28px; height: 28px;
border: 1px solid var(--border);
background: var(--white);
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.15s ease;
}
.icon-btn:hover { color: var(--soft-pink-dark); border-color: var(--soft-pink); background: var(--bg-soft); }
.icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); background: rgba(220,38,38,0.05); }
.icon-btn svg { width: 13px; height: 13px; stroke-width: 2; }
.empty-state {
text-align: center;
padding: 50px 20px;
color: var(--text-muted);
}
.empty-state .icon {
width: 64px; height: 64px;
margin: 0 auto 14px;
background: var(--bg-soft);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--soft-pink);
}
.empty-state .icon svg { width: 28px; height: 28px; stroke-width: 1.5; }
.empty-state .title {
font-family: 'Shippori Mincho', serif;
font-size: 15px;
font-weight: 700;
color: var(--very-dark-grayish-red);
margin-bottom: 4px;
}
.empty-state .desc { font-size: 12px; line-height: 1.6; }
@media (max-width: 1100px) {
.booking-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.booking-summary { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
.modal { max-height: 100vh; border-radius: 0; }
}
/* ============ TAGIHAN BULANAN ============ */
.billing-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 24px;
}
.billing-card {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 18px;
position: relative;
overflow: hidden;
transition: all 0.2s ease;
}
.billing-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.billing-card-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.billing-icon {
width: 36px; height: 36px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
}
.billing-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.billing-icon.ipl { background: rgba(249,109,145,0.12); color: var(--soft-pink-dark); }
.billing-icon.listrik{ background: rgba(217,119,6,0.12); color: var(--warning); }
.billing-icon.air { background: rgba(109,145,249,0.12); color: var(--soft-blue-dark); }
.billing-icon.wifi { background: rgba(45,143,93,0.12); color: var(--success); }
.billing-icon.sewa { background: rgba(67,53,51,0.10); color: var(--very-dark-grayish-red); }
.billing-icon.total-cost { background: linear-gradient(135deg, var(--soft-pink) 0%, var(--soft-pink-dark) 100%); color: var(--white); }
.billing-card-name {
font-family: 'Shippori Mincho', serif;
font-weight: 700;
font-size: 14px;
color: var(--very-dark-grayish-red);
}
.billing-card-jp {
font-family: 'Noto Serif JP', serif;
font-size: 10px;
color: var(--text-muted);
letter-spacing: 1.5px;
}
.billing-amount {
font-family: 'Shippori Mincho', serif;
font-size: 22px;
font-weight: 800;
color: var(--very-dark-grayish-red);
line-height: 1.1;
}
.billing-meta {
margin-top: 8px;
font-size: 11px;
color: var(--text-secondary);
display: flex;
justify-content: space-between;
align-items: center;
}
.billing-progress {
height: 4px;
background: var(--bg-soft);
border-radius: 99px;
overflow: hidden;
margin-top: 10px;
}
.billing-progress-fill {
height: 100%;
border-radius: 99px;
transition: width 0.5s ease;
}
.billing-card.ipl .billing-progress-fill { background: var(--soft-pink); }
.billing-card.listrik .billing-progress-fill { background: var(--warning); }
.billing-card.air .billing-progress-fill { background: var(--soft-blue); }
.billing-card.wifi .billing-progress-fill { background: var(--success); }
.billing-card.sewa .billing-progress-fill { background: var(--very-dark-grayish-red); }
.billing-card.total-cost .billing-progress-fill { background: linear-gradient(90deg, var(--soft-pink) 0%, var(--soft-pink-dark) 100%); }
/* Highlight card untuk Total Cost — beda visual */
.billing-card.total-cost {
background: linear-gradient(135deg, rgba(249,109,145,0.06) 0%, rgba(255,192,205,0.10) 100%);
border: 1.5px solid rgba(249,109,145,0.35);
position: relative;
overflow: hidden;
}
.billing-card.total-cost::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
background: radial-gradient(circle, rgba(249,109,145,0.10) 0%, transparent 70%);
pointer-events: none;
}
.billing-card.total-cost .billing-amount {
color: var(--soft-pink-dark);
font-size: 24px;
}
/* Month selector */
.month-selector {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--bg-soft);
padding: 6px 8px;
border-radius: 8px;
border: 1px solid var(--border-soft);
}
.month-nav-btn {
background: var(--white);
border: 1px solid var(--border);
width: 28px; height: 28px;
border-radius: 6px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--text-secondary);
transition: all 0.15s ease;
}
.month-nav-btn:hover { background: var(--soft-pink); color: var(--white); border-color: var(--soft-pink); }
.month-nav-btn svg { width: 14px; height: 14px; stroke-width: 2; }
.month-display {
font-family: 'Shippori Mincho', serif;
font-weight: 700;
font-size: 14px;
color: var(--very-dark-grayish-red);
min-width: 130px;
text-align: center;
}
/* Tagihan table */
.billing-table-wrap { overflow-x: auto; }
.billing-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.billing-table thead {
background: linear-gradient(135deg, var(--very-dark-grayish-red), var(--very-dark-grey));
color: var(--white);
}
.billing-table th {
padding: 11px 12px;
text-align: left;
font-size: 10.5px;
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
}
.billing-table th.center { text-align: center; }
.billing-table tbody tr {
border-bottom: 1px solid var(--border-soft);
transition: background 0.15s ease;
}
.billing-table tbody tr:hover { background: var(--bg-soft); }
.billing-table td {
padding: 10px 12px;
color: var(--text-primary);
}
.billing-table td.center { text-align: center; }
.bill-input-group {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 2px 8px;
transition: all 0.15s ease;
}
.bill-input-group:focus-within {
border-color: var(--soft-pink);
background: var(--white);
box-shadow: 0 0 0 3px rgba(249,109,145,0.1);
}
.bill-input-group .prefix {
font-size: 10.5px;
color: var(--text-muted);
font-weight: 600;
}
.bill-input {
width: 90px;
padding: 4px 0;
border: none;
background: transparent;
font-family: 'Inter', sans-serif;
font-size: 12px;
text-align: right;
color: var(--text-primary);
font-feature-settings: 'tnum';
}
.bill-input:focus { outline: none; }
.bill-input-group.paid {
background: rgba(45,143,93,0.06);
border-color: rgba(45,143,93,0.3);
}
.bill-input-group.paid .bill-input { color: var(--success); font-weight: 600; }
.paid-toggle {
width: 26px;
height: 26px;
border-radius: 6px;
border: 1.5px solid var(--border);
background: var(--white);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
color: transparent;
}
.paid-toggle:hover { border-color: var(--success); }
.paid-toggle.paid {
background: var(--success);
border-color: var(--success);
color: var(--white);
}
.paid-toggle svg { width: 14px; height: 14px; stroke-width: 3; }
.ipl-due-badge {
display: inline-block;
padding: 3px 9px;
background: var(--bg-soft);
color: var(--soft-pink-dark);
border-radius: 99px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.3px;
}
.ipl-due-badge.overdue {
background: rgba(220,38,38,0.1);
color: var(--danger);
}
.ipl-due-badge.upcoming {
background: rgba(217,119,6,0.1);
color: var(--warning);
}
.row-total {
font-family: 'Shippori Mincho', serif;
font-weight: 700;
font-size: 13px;
}
.row-total.paid { color: var(--success); }
.row-total.unpaid { color: var(--text-muted); }
.wifi-info {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-secondary);
}
.wifi-info .speed-pill {
background: var(--bg-blue-soft);
color: var(--soft-blue-dark);
padding: 1px 7px;
border-radius: 99px;
font-size: 10px;
font-weight: 600;
}
.wifi-info.none {
color: var(--text-muted);
font-style: italic;
}
/* Section divider with kanji */
.section-divider {
display: flex;
align-items: center;
gap: 14px;
margin: 32px 0 20px;
}
.section-divider-line { flex: 1; height: 1px; background: var(--border); }
.section-divider-text {
font-family: 'Shippori Mincho', serif;
font-size: 13px;
font-weight: 700;
color: var(--very-dark-grayish-red);
letter-spacing: 1px;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
}
.section-divider-text .kanji {
color: var(--soft-pink);
font-family: 'Noto Serif JP', serif;
font-size: 18px;
}
/* Featured divider (untuk section utama Booking) */
.section-divider.--featured {
margin: 40px 0 24px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.section-divider.--featured .section-divider-text {
font-size: 20px;
text-transform: none;
letter-spacing: -0.3px;
font-weight: 800;
color: var(--very-dark-grayish-red);
}
.section-divider.--featured .section-divider-text .kanji {
font-size: 28px;
color: var(--soft-pink);
background: var(--bg-soft);
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
border: 1px solid rgba(249,109,145,0.2);
}
.section-divider.--featured .featured-sub {
font-size: 11.5px;
color: var(--text-muted);
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 600;
margin-left: 56px;
font-family: 'Inter', sans-serif;
}
.section-divider.--featured .section-divider-line {
width: 100%;
margin-top: 8px;
background: linear-gradient(90deg, var(--soft-pink), transparent);
height: 2px;
}
@media (max-width: 1100px) {
.billing-summary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.billing-summary { grid-template-columns: 1fr; }
}
/* ============ TOAST ============ */
.toast {
position: fixed;
bottom: 24px;
right: 24px;
padding: 12px 20px;
background: var(--very-dark-grayish-red);
color: var(--white);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
z-index: 1000;
pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: var(--success); }
@media (max-width: 1100px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.row, .row-3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.app { grid-template-columns: 1fr; }
.sidebar { position: relative; height: auto; }
.content { padding: 20px; }
.topbar { padding: 16px 20px; }
.stats-grid { grid-template-columns: 1fr; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.stat-card, .panel { animation: fadeUp 0.5s ease backwards; }
.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.1s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.2s; }
/* ============================================================
LOGIN / AUTH SCREEN
============================================================ */
.auth-screen {
position: fixed;
inset: 0;
background: linear-gradient(135deg, #F96D91 0%, #E04E76 50%, #C93864 100%);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
overflow-y: auto;
}
.auth-screen.hidden {
display: none;
}
/* Sakura pattern background */
.auth-screen::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--sakura-logo-large);
background-repeat: repeat;
background-size: 280px;
opacity: 0.05;
transform: rotate(-8deg) scale(1.4);
pointer-events: none;
}
.auth-card {
background: white;
border-radius: 20px;
box-shadow: 0 24px 60px rgba(0,0,0,0.2);
padding: 40px;
width: 100%;
max-width: 420px;
position: relative;
z-index: 1;
animation: authFadeUp 0.5s ease;
}
@keyframes authFadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.auth-logo {
width: 80px;
height: 80px;
margin: 0 auto 16px;
background-image: var(--sakura-logo-large);
background-size: cover;
background-position: center;
border-radius: 50%;
box-shadow: 0 8px 24px rgba(249,109,145,0.3);
}
.auth-title {
text-align: center;
font-family: var(--font-display);
font-size: 26px;
font-weight: 800;
color: var(--very-dark-grayish-red);
margin-bottom: 4px;
letter-spacing: -0.3px;
}
.auth-subtitle {
text-align: center;
color: var(--text-muted);
font-size: 12.5px;
margin-bottom: 32px;
letter-spacing: 0.3px;
}
.auth-form-group {
margin-bottom: 16px;
}
.auth-label {
display: block;
font-size: 11.5px;
font-weight: 700;
color: var(--very-dark-grayish-red);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.auth-input {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--border-soft);
border-radius: 10px;
font-size: 14px;
font-family: inherit;
background: var(--bg-soft);
color: var(--text-primary);
box-sizing: border-box;
transition: all 0.15s;
}
.auth-input:focus {
outline: none;
border-color: var(--soft-pink);
background: white;
box-shadow: 0 0 0 3px rgba(249,109,145,0.15);
}
.auth-btn {
width: 100%;
padding: 13px 18px;
background: linear-gradient(135deg, var(--soft-pink) 0%, var(--soft-pink-dark) 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
margin-top: 8px;
transition: all 0.15s;
letter-spacing: 0.3px;
}
.auth-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(249,109,145,0.35);
}
.auth-btn:active {
transform: translateY(0);
}
.auth-error {
background: rgba(220,38,38,0.08);
color: var(--danger);
padding: 10px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
margin-bottom: 14px;
display: none;
text-align: center;
border: 1px solid rgba(220,38,38,0.15);
}
.auth-error.show { display: block; }
.auth-demo {
margin-top: 24px;
padding: 14px;
background: var(--bg-soft);
border-radius: 10px;
font-size: 11px;
color: var(--text-muted);
line-height: 1.7;
border: 1px dashed var(--border-soft);
}
.auth-demo strong { color: var(--soft-pink-dark); }
.auth-demo-toggle {
background: none;
border: none;
color: var(--soft-pink-dark);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
padding: 0;
margin-top: 12px;
text-decoration: underline;
width: 100%;
text-align: center;
}
.auth-footer {
text-align: center;
margin-top: 20px;
font-size: 11px;
color: var(--text-muted);
}
/* User badge di sidebar (logged-in state) */
.user-badge {
margin: auto 14px 14px; /* margin-top: auto push ke BOTTOM sidebar */
padding: 14px;
background: var(--bg-soft);
border-radius: 10px;
border: 1px solid var(--border-soft);
display: none; /* default hidden, di-show via body.logged-in */
align-items: center;
gap: 10px;
}
body.logged-in .user-badge {
display: flex !important;
}
.user-badge-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--soft-pink), var(--soft-pink-dark));
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
font-family: var(--font-display);
flex-shrink: 0;
}
.user-badge-info { flex: 1; min-width: 0; }
.user-badge-name {
font-weight: 700;
font-size: 12.5px;
color: var(--very-dark-grayish-red);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-badge-role {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.4px;
}
.user-badge-role.superadmin { color: #c2410c; }
.user-badge-role.manager { color: var(--soft-pink-dark); }
.user-badge-role.investor { color: var(--soft-blue-dark); }
.user-badge-role.operasional { color: var(--success); }
.user-badge-logout {
background: none;
border: 1px solid var(--border-soft);
width: 30px;
height: 30px;
border-radius: 8px;
cursor: pointer;
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
flex-shrink: 0;
}
.user-badge-logout:hover {
color: var(--danger);
border-color: var(--danger);
background: rgba(220,38,38,0.05);
}
/* Hide menu items based on role */
.nav-item.role-hidden { display: none !important; }
/* Read-only mode indicator */
.readonly-banner {
background: linear-gradient(90deg, rgba(217,119,6,0.1) 0%, rgba(217,119,6,0.05) 100%);
border: 1px solid rgba(217,119,6,0.25);
color: var(--warning);
padding: 10px 16px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}
/* Disable forms when readonly */
.readonly-mode button:not(.auth-btn):not(.user-badge-logout):not(.theme-toggle):not(.nav-item):not(.btn-print):not(.btn-export):not(.btn-copy):not(.btn-secondary),
.readonly-mode .icon-btn[onclick*="openBookingModal"],
.readonly-mode .icon-btn[onclick*="openUnitModal"] {
opacity: 0.4;
pointer-events: none;
cursor: not-allowed;
}