@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400..700&display=swap");

:root { --bg:#f5f7fb; --card:#fff; --text:#1f2937; --muted:#6b7280; --line:#e5e7eb; --dark:#172033; --dark2:#222c41; }
* { box-sizing: border-box; }
button, input, textarea, select { font-family: inherit; }
h1, h2, h3, h4, h5, h6, strong, b { font-weight:550; }
body { margin:0; font-family: "Open Sans", "Segoe UI", Arial, sans-serif; background:var(--bg); color:var(--text); }
.app { display:flex; min-height:100vh; }
.sidebar { width:245px; flex:0 0 245px; background:var(--dark); color:#fff; min-height:100vh; }
.brand { padding:20px 18px; font-size:22px; font-weight:550; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar a, .sidebar button { width:100%; display:block; padding:11px 18px; color:#e5e7eb; text-decoration:none; background:transparent; border:0; text-align:left; font-size:14px; cursor:pointer; }
.sidebar a:hover, .sidebar button:hover, .sidebar a.active { background:var(--dark2); color:#fff; }
.submenu { padding-left:10px; display:none; background:rgba(0,0,0,.12); }
.submenu.open { display:block; }
.submenu a { padding-left:28px; }
.content { flex:1; min-width:0; padding:0; }
.topbar { height:54px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 18px; font-weight:550; }
iframe { width:100%; height:calc(100vh - 54px); border:0; display:block; background:var(--bg); }
.page { padding:22px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 18px rgba(16,24,40,.05); padding:18px; margin-bottom:18px; }
.header-row { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px; }
h1 { margin:0; font-size:24px; }
h2 { margin:0 0 8px; font-size:18px; }
.muted { color:var(--muted); font-size:13px; }
.status { padding:10px 12px; border-radius:8px; background:#f3f4f6; color:#374151; font-size:13px; margin-bottom:12px; }
.status.error { background:#fee2e2; color:#991b1b; white-space:pre-wrap; }
.status.ok { background:#dcfce7; color:#166534; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:10px; }
table { width:100%; border-collapse:collapse; min-width:850px; background:#fff; }
th, td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; font-size:13px; vertical-align:top; }
th { background:#f9fafb; font-weight:550; color:#374151; position:sticky; top:0; }
tr:last-child td { border-bottom:0; }
.badge { display:inline-block; padding:3px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap:14px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; }
.stat .num { font-size:24px; font-weight:550; margin-top:6px; }
select { padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; }
code { background:#f3f4f6; padding:2px 5px; border-radius:4px; }


/* Tahap 3 - CRUD UI */
.toolbar { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:12px; }
.toolbar-left, .toolbar-right { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.form-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
.form-field { display:flex; flex-direction:column; gap:5px; }
.form-field label { font-size:12px; color:#374151; font-weight:550; }
input, textarea, select { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--text); font:inherit; }
textarea { min-height:72px; resize:vertical; }
.form-actions { display:flex; gap:8px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.btn { border:0; border-radius:8px; background:#172033; color:#fff; padding:9px 13px; cursor:pointer; font-size:13px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.btn:hover { opacity:.92; }
.btn.secondary { background:#6b7280; }
.btn.danger { background:#b91c1c; }
.btn.outline { background:#fff; color:#172033; border:1px solid var(--line); }
.btn.small { padding:6px 9px; font-size:12px; }
.action-row { display:flex; gap:6px; flex-wrap:wrap; }
.table-wrap.compact table { min-width:1000px; }
.required::after { content:' *'; color:#b91c1c; }

/* Tahap 5 - Dashboard Statistik */
.dashboard-page .header-row { align-items:flex-start; }
.dashboard-section-title { font-size:14px; font-weight:550; margin:14px 0 10px; color:#374151; }
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi-card { min-height:104px; position:relative; overflow:hidden; }
.kpi-card .num { font-size:25px; line-height:1.15; }
.kpi-hint { color:var(--muted); font-size:12px; margin-top:8px; line-height:1.35; }
.dashboard-layout { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; margin-top:16px; }
.dashboard-layout.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-status-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:16px;
  align-items:stretch;
}
.dashboard-status-grid > .card {
  min-width:0;
  margin-bottom:0;
  padding:14px;
}
.dashboard-status-grid .card-title-row {
  align-items:flex-start;
  flex-direction:column;
  gap:2px;
  margin-bottom:10px;
}
.dashboard-status-grid .card-title-row h2 {
  font-size:15px;
  line-height:1.2;
}
.dashboard-status-grid .card-title-row .muted {
  font-size:10.5px;
  line-height:1.25;
  white-space:normal;
}
.dashboard-status-grid .bar-list { gap:9px; }
.dashboard-status-grid .bar-item { gap:4px; }
.dashboard-status-grid .bar-head { font-size:11px; gap:6px; }
.dashboard-status-grid .bar-amount { font-size:10px; }
.dashboard-status-grid .bar-track { height:8px; }
.card-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.card-title-row h2 { margin:0; }
.bar-list { display:flex; flex-direction:column; gap:12px; }
.bar-item { display:flex; flex-direction:column; gap:6px; }
.bar-head { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; }
.bar-head strong { color:#111827; }
.bar-track { height:10px; background:#eef2f7; border-radius:999px; overflow:hidden; }
.bar-fill { height:100%; background:#172033; border-radius:999px; min-width:8px; }
.bar-amount { font-size:12px; color:var(--muted); }
.empty-box { padding:18px; background:#f9fafb; border:1px dashed var(--line); border-radius:10px; color:var(--muted); font-size:13px; text-align:center; }
.dashboard-table { max-height:310px; }
.dashboard-table table { min-width:620px; }
.dashboard-table th, .dashboard-table td { font-size:12px; padding:9px 10px; }
@media (max-width: 1000px) {
  .dashboard-status-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .dashboard-layout, .dashboard-layout.three { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dashboard-status-grid { grid-template-columns:1fr; }
}

/* Tahap 6 - Laporan Filter Export */
.header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.filter-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; align-items:end; }
.report-summary { margin-bottom:16px; }
.report-table-wrap { max-height:560px; }
.report-print-head { margin-bottom:14px; }
.print-only { display:none; }
@media print {
  body { background:#fff; }
  .no-print, .status, .topbar, .sidebar { display:none !important; }
  .print-only { display:block; }
  .page { padding:0; }
  .card, .stat { box-shadow:none; border:1px solid #ddd; break-inside:avoid; }
  .table-wrap { overflow:visible; border:0; }
  table { min-width:0; font-size:11px; }
  th, td { font-size:10px; padding:6px; }
}


/* Tahap 7 - Login Admin */
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#172033,#263449); padding:24px; }
.login-shell { width:100%; max-width:430px; }
.login-card { background:#fff; border-radius:18px; padding:28px; box-shadow:0 24px 60px rgba(0,0,0,.25); }
.login-brand { font-size:26px; font-weight:550; margin-bottom:12px; color:#172033; }
.login-card h1 { margin-bottom:8px; }
.login-card form { display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.login-btn { width:100%; margin-top:4px; padding:11px 14px; }
.login-note { margin-top:14px; font-size:12px; color:var(--muted); background:#f9fafb; border:1px solid var(--line); border-radius:10px; padding:10px; }
.sidebar-user { padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); font-size:12px; color:#d1d5db; }
.sidebar-user span { display:block; margin-bottom:8px; line-height:1.35; }
.sidebar-user button { padding:7px 10px; border-radius:7px; background:#ef4444; color:#fff; text-align:center; font-size:12px; }
.sidebar-user button:hover { background:#dc2626; }


/* Tahap 9 - Final UI/UX */
:root {
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#172033;
  --muted:#667085;
  --line:#e6eaf0;
  --dark:#101828;
  --dark2:#1d2939;
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --danger:#dc2626;
  --success:#16a34a;
  --warning:#d97706;
  --shadow:0 12px 30px rgba(16,24,40,.08);
  --shadow-soft:0 6px 18px rgba(16,24,40,.06);
}
html { scroll-behavior:smooth; }
body { font-family: "Open Sans", "Segoe UI", Arial, sans-serif; background:linear-gradient(180deg,#f7faff 0%,#eef3f9 100%); }
.app, .app-shell { display:flex; min-height:100vh; }
.app-shell { background:var(--bg); }
.sidebar { width:280px; flex:0 0 280px; background:linear-gradient(180deg,#101828 0%,#162033 100%); color:#fff; min-height:100vh; position:sticky; top:0; overflow-y:auto; box-shadow:8px 0 28px rgba(16,24,40,.16); z-index:20; }
.brand-panel { display:flex; gap:12px; align-items:center; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand-mark { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,#60a5fa,#2563eb); font-weight:600; font-size:20px; box-shadow:0 10px 24px rgba(37,99,235,.35); }
.brand { padding:0; border:0; font-size:22px; line-height:1; letter-spacing:.2px; }
.brand-subtitle { font-size:12px; color:#98a2b3; margin-top:5px; }
.sidebar-user { margin:14px; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:16px; display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; align-items:center; background:rgba(255,255,255,.045); }
.user-avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:550; color:#172033; background:#e0ecff; }
.user-meta { min-width:0; }
.sidebar-user span { margin:0; color:#fff; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user small { display:block; color:#98a2b3; margin-top:3px; }
.sidebar-user button { grid-column:1 / -1; margin-top:6px; border-radius:10px; background:#ef4444; }
.nav-menu { padding:0 12px 18px; }
.nav-section-label { margin:18px 9px 7px; color:#98a2b3; font-size:11px; font-weight:550; letter-spacing:.08em; text-transform:uppercase; }
.sidebar a, .sidebar button, .nav-parent { border-radius:12px; margin:3px 0; padding:10px 12px; font-weight:550; display:flex; align-items:center; gap:10px; transition:background .16s ease, color .16s ease, transform .16s ease; }
.sidebar a:hover, .sidebar button:hover { background:rgba(255,255,255,.08); transform:translateX(2px); }
.sidebar a.active { background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; box-shadow:0 10px 20px rgba(37,99,235,.24); }
.nav-parent { justify-content:space-between; color:#e5e7eb; }
.nav-parent span { display:flex; align-items:center; gap:10px; }
.nav-icon { width:22px; height:22px; border-radius:8px; display:inline-grid; place-items:center; background:rgba(255,255,255,.08); color:#dbeafe; font-size:13px; flex:0 0 22px; }
.submenu { padding:4px 0 4px 14px; margin:2px 0 8px 8px; border-left:1px solid rgba(255,255,255,.1); background:transparent; }
.submenu a { padding-left:10px; }
.content { flex:1; min-width:0; }
.topbar { height:78px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 22px; position:sticky; top:0; z-index:10; }
.topbar-left, .topbar-right { display:flex; align-items:center; gap:14px; }
.breadcrumb { font-size:12px; color:#667085; margin-bottom:2px; }
.page-title { font-weight:700; font-size:20px; color:#111827; line-height:1.1; }
.page-subtitle { font-size:12px; color:#667085; margin-top:4px; }
.icon-btn { width:40px; height:40px; border:1px solid var(--line); background:#fff; border-radius:12px; cursor:pointer; box-shadow:var(--shadow-soft); }
.system-pill { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:999px; background:#ecfdf3; color:#027a48; font-size:12px; font-weight:550; border:1px solid #abefc6; }
.system-pill::before { content:''; width:7px; height:7px; border-radius:50%; background:#12b76a; display:inline-block; }
.frame-wrap { position:relative; height:calc(100vh - 78px); }
iframe { height:100%; background:#f4f7fb; }
.frame-loader { position:absolute; right:22px; top:18px; z-index:5; padding:10px 13px; border-radius:999px; color:#1d4ed8; background:#eff6ff; border:1px solid #bfdbfe; box-shadow:var(--shadow-soft); font-size:12px; font-weight:550; opacity:0; transform:translateY(-8px); pointer-events:none; transition:.18s ease; }
.frame-loader.show { opacity:1; transform:translateY(0); }
.page { padding:26px; }
.header-row { align-items:flex-start; margin-bottom:16px; }
h1 { font-size:27px; letter-spacing:-.02em; color:#111827; }
h2 { color:#111827; letter-spacing:-.01em; }
.card, .stat { border:1px solid rgba(230,234,240,.95); border-radius:18px; box-shadow:var(--shadow-soft); background:rgba(255,255,255,.96); }
.card { padding:20px; }
.card:hover, .stat:hover { box-shadow:var(--shadow); }
.status { border-radius:14px; border:1px solid var(--line); background:#f8fafc; padding:12px 14px; }
.status.ok { background:#ecfdf3; border-color:#abefc6; color:#027a48; }
.status.error { background:#fef3f2; border-color:#fecdca; color:#b42318; }
.toolbar { border:1px solid var(--line); border-radius:16px; padding:12px; background:#f8fafc; }
input, textarea, select { border-radius:12px; border-color:#d0d5dd; padding:10px 12px; transition:border-color .15s ease, box-shadow .15s ease; }
input:focus, textarea:focus, select:focus { outline:none; border-color:#84adff; box-shadow:0 0 0 4px rgba(37,99,235,.12); }
.form-grid { gap:14px; }
.form-field label { color:#344054; font-size:12px; }
.form-actions { gap:10px; }
.btn { border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--primary2)); box-shadow:0 8px 16px rgba(37,99,235,.18); font-weight:550; }
.btn:hover { opacity:1; filter:brightness(.97); transform:translateY(-1px); }
.btn.secondary { background:#667085; box-shadow:none; }
.btn.danger { background:linear-gradient(135deg,#ef4444,#b91c1c); box-shadow:0 8px 16px rgba(185,28,28,.16); }
.btn.outline { background:#fff; color:#1d2939; border:1px solid #d0d5dd; box-shadow:var(--shadow-soft); }
.btn.small { padding:7px 10px; border-radius:10px; }
.table-wrap { border-radius:16px; border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
table { background:#fff; }
th { background:#f8fafc; color:#344054; text-transform:none; font-size:12px; white-space:nowrap; }
td { color:#344054; }
tbody tr:hover { background:#f9fbff; }
.badge { padding:5px 9px; border-radius:999px; font-weight:550; background:#eef4ff; color:#175cd3; border:1px solid #c7d7fe; }
.badge.success { background:#ecfdf3; color:#027a48; border-color:#abefc6; }
.badge.warning { background:#fffaeb; color:#b54708; border-color:#fedf89; }
.badge.danger { background:#fef3f2; color:#b42318; border-color:#fecdca; }
.badge.neutral { background:#f2f4f7; color:#344054; border-color:#d0d5dd; }
.action-row { gap:8px; }
.kpi-grid { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.kpi-card { border-radius:20px; padding:18px; min-height:118px; position:relative; }
.kpi-card::after { content:''; position:absolute; width:90px; height:90px; right:-32px; top:-32px; border-radius:50%; background:rgba(37,99,235,.08); }
.kpi-card .num { font-size:27px; color:#111827; }
.dashboard-layout { gap:18px; }
.bar-track { height:11px; background:#eef2f7; }
.bar-fill { background:linear-gradient(90deg,#60a5fa,#2563eb); }
.empty-box { border-radius:14px; }
.login-body { background:radial-gradient(circle at top left,#3b82f6 0%,transparent 35%), linear-gradient(135deg,#101828,#1d2939 60%,#0f172a); }
.login-card { border:1px solid rgba(255,255,255,.16); border-radius:24px; box-shadow:0 28px 80px rgba(0,0,0,.35); }
.login-brand { display:flex; align-items:center; gap:10px; }
.login-brand::before { content:'R'; width:42px; height:42px; border-radius:14px; display:inline-grid; place-items:center; color:#fff; background:linear-gradient(135deg,#60a5fa,#2563eb); }
.login-note { border-radius:14px; }
.mobile-backdrop { display:none; }
@media (max-width: 900px) {
  .sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-104%); transition:transform .2s ease; }
  .app-shell.sidebar-open .sidebar { transform:translateX(0); }
  .mobile-backdrop { display:block; position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:15; opacity:0; pointer-events:none; transition:.2s ease; }
  .app-shell.sidebar-open .mobile-backdrop { opacity:1; pointer-events:auto; }
  .topbar { height:auto; min-height:74px; padding:12px 14px; align-items:flex-start; }
  .topbar-right { display:none; }
  .frame-wrap { height:calc(100vh - 74px); }
  .page { padding:16px; }
  .header-row { flex-direction:column; align-items:stretch; }
  .toolbar, .toolbar-left, .toolbar-right { align-items:stretch; width:100%; }
  .toolbar-right input { width:100%; }
}
@media (max-width: 640px) {
  .form-grid, .filter-grid, .grid { grid-template-columns:1fr; }
  h1 { font-size:23px; }
  .card { padding:16px; }
  .page-title { font-size:18px; }
  .page-subtitle { display:none; }
}


/* === REVISI UI SIDEBAR PUTIH + UNGU PASTEL + MOBILE APP === */
:root {
  --pastel-purple:#8b5cf6;
  --pastel-purple-2:#a78bfa;
  --pastel-purple-3:#ede9fe;
  --pastel-purple-4:#f5f3ff;
  --sidebar-bg:#ffffff;
  --sidebar-text:#1f2937;
  --sidebar-muted:#6b7280;
}

.sidebar {
  background:var(--sidebar-bg) !important;
  color:var(--sidebar-text) !important;
  border-right:1px solid #e9d5ff !important;
  box-shadow:8px 0 28px rgba(139,92,246,.10) !important;
}

.brand-panel {
  background:rgba(255,255,255,0) !important;
  background-image:none !important;
  border-bottom:1px solid #e9d5ff !important;
  padding:18px 16px !important;
}

.brand, .brand-subtitle,
.sidebar .user-meta span,
.sidebar .user-meta small,
.nav-section-label,
.nav-menu a,
.nav-parent,
.menu-link,
.nav-parent span {
  color:var(--sidebar-text) !important;
}

.brand-subtitle,
.sidebar .user-meta small,
.nav-section-label {
  color:var(--sidebar-muted) !important;
}

.brand-mark,
.nav-icon {
  background:linear-gradient(135deg,var(--pastel-purple-2),var(--pastel-purple)) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(139,92,246,.18) !important;
}

.sidebar-user {
  background:#f9fafb !important;
  border:1px solid #e9d5ff !important;
  margin:12px !important;
  padding:12px !important;
  border-radius:18px !important;
}

#logoutBtn {
  background:linear-gradient(135deg,#c084fc,#8b5cf6) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:12px !important;
  padding:9px 12px !important;
}

.nav-menu {
  padding:8px 10px 16px !important;
}

.nav-section-label {
  margin:12px 8px 7px !important;
  font-size:10px !important;
  letter-spacing:.08em !important;
}

.nav-menu a,
.nav-parent {
  min-height:38px !important;
  padding:8px 10px !important;
  margin:2px 0 !important;
  border-radius:13px !important;
  color:#111827 !important;
}

.submenu {
  margin-left:6px !important;
  padding-left:7px !important;
  border-left:1px solid #e9d5ff !important;
}

.nav-menu a:hover,
.nav-parent:hover {
  background:var(--pastel-purple-4) !important;
  color:#4c1d95 !important;
}

.nav-menu a.active,
.menu-link.active {
  background:linear-gradient(135deg,#f3e8ff,#ddd6fe) !important;
  color:#4c1d95 !important;
  box-shadow:0 10px 24px rgba(139,92,246,.16) !important;
}

.topbar {
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(16px) !important;
  border-bottom:1px solid #e9d5ff !important;
}

.icon-btn,
.system-pill {
  border-color:#d8b4fe !important;
  background:#faf5ff !important;
  color:#6d28d9 !important;
}

.btn.pastel,
.btn.outline.pastel,
button[data-import] {
  background:#faf5ff !important;
  color:#6d28d9 !important;
  border:1px solid #d8b4fe !important;
  box-shadow:0 8px 18px rgba(139,92,246,.12) !important;
}

.toolbar-right {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  align-items:center !important;
}

.table-wrap.compact {
  overflow:auto !important;
}

@media (max-width: 900px) {
  body { background:#f8f5ff !important; }
  .app-shell { display:block !important; }
  .sidebar {
    width:min(86vw, 320px) !important;
    border-radius:0 28px 28px 0 !important;
    padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important;
    z-index:1000 !important;
  }
  .app-shell.sidebar-open .mobile-backdrop,
  .mobile-backdrop.show {
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    background:rgba(17,24,39,.35) !important;
    backdrop-filter:blur(4px) !important;
    z-index:900 !important;
  }
  .content { margin-left:0 !important; width:100% !important; }
  .topbar {
    position:sticky !important;
    top:0 !important;
    z-index:800 !important;
    min-height:72px !important;
    padding:12px 14px !important;
    border-radius:0 0 22px 22px !important;
    box-shadow:0 12px 30px rgba(139,92,246,.10) !important;
  }
  .topbar-left { gap:10px !important; }
  .page-title { font-size:18px !important; }
  .page-subtitle, .breadcrumb { font-size:11px !important; }
  .topbar-right { gap:6px !important; }
  .system-pill { display:none !important; }
  .frame-wrap { height:calc(100vh - 72px) !important; }
  iframe { border-radius:22px 22px 0 0 !important; }
  .page { padding:14px !important; }
  .card { border-radius:18px !important; padding:14px !important; }
  .form-grid { grid-template-columns:1fr !important; gap:10px !important; }
  .toolbar { gap:10px !important; }
  .toolbar, .toolbar-right { align-items:stretch !important; }
  .toolbar-right input[type="search"], .toolbar-right .btn { width:100% !important; }
  table { min-width:780px !important; }
}

@media (max-width: 560px) {
  .brand-panel { padding:14px !important; }
  .nav-menu a, .nav-parent { min-height:36px !important; padding:7px 9px !important; font-size:13px !important; }
  .page h1 { font-size:22px !important; }
  input, textarea, select { min-height:42px !important; font-size:14px !important; }
  .btn { min-height:40px !important; }
}


/* === REVISI RINCI TEXT SIZE - DESKTOP / TABLET / MOBILE === */
:root {
  --fs-2xs:10px;
  --fs-xs:11px;
  --fs-sm:12px;
  --fs-base:13px;
  --fs-md:14px;
  --fs-lg:16px;
  --fs-xl:20px;
  --fs-2xl:24px;
  --fs-3xl:28px;
  --lh-tight:1.15;
  --lh-normal:1.45;
  --lh-relaxed:1.6;
}

body {
  font-size:var(--fs-md) !important;
  line-height:var(--lh-normal) !important;
}

/* Sidebar */
.brand {
  font-size:var(--fs-xl) !important;
  line-height:var(--lh-tight) !important;
}

.brand-subtitle {
  font-size:var(--fs-xs) !important;
  line-height:1.35 !important;
}

.sidebar-user span {
  font-size:var(--fs-base) !important;
  line-height:1.25 !important;
}

.sidebar-user small {
  font-size:var(--fs-xs) !important;
  line-height:1.25 !important;
}

.nav-section-label {
  font-size:var(--fs-2xs) !important;
  line-height:1.2 !important;
}

.nav-menu a,
.nav-parent,
.sidebar a,
.sidebar button {
  font-size:var(--fs-base) !important;
  line-height:1.25 !important;
}

/* Topbar */
.breadcrumb {
  font-size:var(--fs-xs) !important;
  line-height:1.25 !important;
}

.page-title {
  font-size:var(--fs-xl) !important;
  line-height:var(--lh-tight) !important;
}

.page-subtitle {
  font-size:var(--fs-sm) !important;
  line-height:1.35 !important;
}

.system-pill {
  font-size:var(--fs-sm) !important;
  line-height:1.2 !important;
}

/* Page content */
h1 {
  font-size:var(--fs-3xl) !important;
  line-height:var(--lh-tight) !important;
}

h2 {
  font-size:18px !important;
  line-height:1.25 !important;
}

h3 {
  font-size:var(--fs-lg) !important;
  line-height:1.3 !important;
}

.muted,
.card p,
.page p {
  font-size:var(--fs-base) !important;
  line-height:var(--lh-normal) !important;
}

/* Form */
.form-field label,
label {
  font-size:var(--fs-sm) !important;
  line-height:1.25 !important;
}

input,
textarea,
select {
  font-size:var(--fs-md) !important;
  line-height:1.35 !important;
}

input::placeholder,
textarea::placeholder {
  font-size:var(--fs-md) !important;
}

.btn,
button,
.btn.small {
  font-size:var(--fs-base) !important;
  line-height:1.2 !important;
}

/* Status, badge, helper */
.status {
  font-size:var(--fs-base) !important;
  line-height:1.45 !important;
}

.badge {
  font-size:var(--fs-sm) !important;
  line-height:1.15 !important;
}

/* Table */
th {
  font-size:var(--fs-sm) !important;
  line-height:1.3 !important;
}

td {
  font-size:var(--fs-base) !important;
  line-height:1.4 !important;
}

/* Dashboard */
.kpi-card .num,
.stat .num {
  font-size:var(--fs-3xl) !important;
  line-height:var(--lh-tight) !important;
}

.kpi-hint,
.bar-amount,
.empty-box {
  font-size:var(--fs-sm) !important;
  line-height:1.4 !important;
}

.bar-head {
  font-size:var(--fs-base) !important;
  line-height:1.3 !important;
}

/* Login */
.login-brand {
  font-size:var(--fs-2xl) !important;
  line-height:var(--lh-tight) !important;
}

.login-card h1 {
  font-size:var(--fs-2xl) !important;
  line-height:var(--lh-tight) !important;
}

.login-note {
  font-size:var(--fs-sm) !important;
  line-height:1.45 !important;
}

/* Tablet */
@media (max-width: 900px) {
  body {
    font-size:var(--fs-base) !important;
  }

  .page-title {
    font-size:18px !important;
  }

  .page-subtitle,
  .breadcrumb {
    font-size:var(--fs-xs) !important;
  }

  h1 {
    font-size:24px !important;
  }

  h2 {
    font-size:17px !important;
  }

  .nav-menu a,
  .nav-parent,
  .sidebar a,
  .sidebar button {
    font-size:var(--fs-base) !important;
  }

  th {
    font-size:var(--fs-xs) !important;
  }

  td {
    font-size:var(--fs-sm) !important;
  }
}

/* Mobile */
@media (max-width: 560px) {
  body {
    font-size:var(--fs-base) !important;
    line-height:1.4 !important;
  }

  .brand {
    font-size:18px !important;
  }

  .brand-subtitle {
    font-size:10px !important;
  }

  .sidebar-user span {
    font-size:var(--fs-sm) !important;
  }

  .sidebar-user small {
    font-size:10px !important;
  }

  .nav-menu a,
  .nav-parent,
  .sidebar a,
  .sidebar button {
    font-size:var(--fs-sm) !important;
  }

  .page-title {
    font-size:17px !important;
  }

  h1 {
    font-size:22px !important;
  }

  h2 {
    font-size:16px !important;
  }

  h3 {
    font-size:15px !important;
  }

  .muted,
  .card p,
  .page p,
  .status {
    font-size:var(--fs-sm) !important;
  }

  .form-field label,
  label {
    font-size:var(--fs-xs) !important;
  }

  input,
  textarea,
  select,
  input::placeholder,
  textarea::placeholder {
    font-size:var(--fs-base) !important;
  }

  .btn,
  button,
  .btn.small {
    font-size:var(--fs-sm) !important;
  }

  th {
    font-size:10px !important;
  }

  td {
    font-size:var(--fs-xs) !important;
  }

  .kpi-card .num,
  .stat .num {
    font-size:24px !important;
  }
}


/* === REVISI FINAL TEXT SIZE + LOGIN TEAM === */
:root {
  --fs-2xs:8px;
  --fs-xs:9px;
  --fs-sm:10px;
  --fs-base:11px;
  --fs-md:12px;
  --fs-lg:14px;
  --fs-xl:16px;
  --fs-2xl:20px;
  --fs-3xl:26px;
}

body {
  font-size:14px !important;
  line-height:1.42 !important;
}

h1 {
  font-size:26px !important;
  line-height:1.14 !important;
}

h2 {
  font-size:16px !important;
  line-height:1.22 !important;
}

h3 {
  font-size:14px !important;
  line-height:1.25 !important;
}

.brand,
.login-brand {
  font-size:20px !important;
  line-height:1.12 !important;
}

.brand-subtitle,
.sidebar-user small,
.breadcrumb,
.page-subtitle {
  font-size:10px !important;
  line-height:1.25 !important;
}

.sidebar-user span {
  font-size:11px !important;
}

.nav-menu a,
.nav-parent,
.sidebar a,
.sidebar button {
  font-size:11px !important;
  line-height:1.18 !important;
}

.nav-section-label {
  font-size:8px !important;
  letter-spacing:.06em !important;
}

.page-title {
  font-size:20px !important;
  line-height:1.15 !important;
}

.muted,
.card p,
.page p {
  font-size:11px !important;
  line-height:1.4 !important;
}

.form-field label,
label {
  font-size:10px !important;
  line-height:1.2 !important;
}

input,
textarea,
select,
input::placeholder,
textarea::placeholder {
  font-size:12px !important;
  line-height:1.28 !important;
}

.btn,
button,
.btn.small {
  font-size:11px !important;
  line-height:1.15 !important;
}

.status {
  font-size:12px !important;
  line-height:1.35 !important;
}

.badge,
.system-pill {
  font-size:11px !important;
  line-height:1.12 !important;
}

th {
  font-size:10px !important;
  line-height:1.22 !important;
}

td {
  font-size:11px !important;
  line-height:1.32 !important;
}

.kpi-card .num,
.stat .num {
  font-size:26px !important;
  line-height:1.1 !important;
}

.kpi-hint,
.bar-amount,
.empty-box,
.bar-head {
  font-size:10px !important;
  line-height:1.35 !important;
}

.login-card h1 {
  font-size:26px !important;
  line-height:1.14 !important;
}

.login-note {
  font-size:10px !important;
  line-height:1.38 !important;
}

.login-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:14px 0 16px;
  padding:5px;
  border:1px solid #eadcff;
  border-radius:16px;
  background:#f8f3ff;
}

.login-tab {
  border:0 !important;
  border-radius:12px !important;
  padding:10px 12px !important;
  background:transparent !important;
  color:#4b5563 !important;
  font-size:11px !important;
  font-weight:550 !important;
  cursor:pointer;
}

.login-tab.active {
  background:linear-gradient(135deg,#8b5cf6,#c4b5fd) !important;
  color:#ffffff !important;
  box-shadow:0 8px 20px rgba(139,92,246,.24);
}

.login-role-info {
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #eadcff;
  border-radius:14px;
  background:#fbf8ff;
  color:#4c1d95;
  font-size:10px !important;
  line-height:1.35;
}

/* Tablet */
@media (max-width: 900px) {
  body {
    font-size:13px !important;
  }

  h1 {
    font-size:22px !important;
  }

  h2 {
    font-size:15px !important;
  }

  .page-title {
    font-size:18px !important;
  }

  .nav-menu a,
  .nav-parent,
  .sidebar a,
  .sidebar button {
    font-size:11px !important;
  }

  th {
    font-size:9px !important;
  }

  td {
    font-size:10px !important;
  }
}

/* Mobile */
@media (max-width: 560px) {
  body {
    font-size:12px !important;
    line-height:1.38 !important;
  }

  h1,
  .login-card h1 {
    font-size:20px !important;
  }

  h2 {
    font-size:14px !important;
  }

  h3 {
    font-size:13px !important;
  }

  .brand,
  .login-brand {
    font-size:18px !important;
  }

  .nav-menu a,
  .nav-parent,
  .sidebar a,
  .sidebar button {
    font-size:10px !important;
  }

  .page-title {
    font-size:16px !important;
  }

  .muted,
  .card p,
  .page p {
    font-size:10px !important;
  }

  .form-field label,
  label {
    font-size:9px !important;
  }

  input,
  textarea,
  select,
  input::placeholder,
  textarea::placeholder {
    font-size:11px !important;
  }

  .btn,
  button,
  .btn.small,
  .login-tab {
    font-size:10px !important;
  }

  .status {
    font-size:11px !important;
  }

  .badge,
  .system-pill {
    font-size:11px !important;
  }

  th {
    font-size:8px !important;
  }

  td {
    font-size:9px !important;
  }

  .kpi-card .num,
  .stat .num {
    font-size:22px !important;
  }

  .login-tabs {
    gap:6px;
    padding:4px;
  }

  .login-tab {
    padding:9px 8px !important;
  }
}


/* === REVISI LENGKAP MODUL - PILIHAN DROPDOWN + DASHBOARD MOBILE TABLE === */
.choice-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:12px 0 16px;
  padding:12px;
  border:1px solid #e9d5ff;
  border-radius:18px;
  background:linear-gradient(135deg,#ffffff,#faf5ff);
  box-shadow:0 10px 24px rgba(139,92,246,.10);
}
.choice-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.choice-info strong { font-size:13px; color:#111827; }
.choice-info span { font-size:10px; color:#6b7280; }
.choice-dropdown { position:relative; flex:0 0 auto; }
.choice-toggle {
  min-width:160px;
  justify-content:space-between;
  gap:10px;
}
.choice-toggle::after { content:'▾'; font-size:10px; opacity:.8; }
.choice-menu {
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:230px;
  padding:7px;
  border:1px solid #e9d5ff;
  border-radius:16px;
  background:#fff;
  box-shadow:0 20px 44px rgba(17,24,39,.16);
  z-index:70;
}
.choice-dropdown.open .choice-menu { display:block; }
.choice-menu button {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px !important;
  margin:2px 0;
  border:0 !important;
  border-radius:12px !important;
  background:transparent !important;
  color:#1f2937 !important;
  box-shadow:none !important;
  text-align:left;
  font-weight:550;
}
.choice-menu button:hover { background:#f5f3ff !important; color:#5b21b6 !important; transform:none !important; }
.choice-menu .choice-sep { height:1px; background:#f1e7ff; margin:6px 4px; }
[data-choice-panel][hidden] { display:none !important; }
.toolbar-actions-hidden { display:none !important; }
.table-tools-only-search { justify-content:flex-end !important; }

.mobile-dashboard-tables { display:none; }
.mobile-stat-panel {
  margin-bottom:12px;
  border:1px solid #eadcff;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 24px rgba(139,92,246,.10);
}
.mobile-table-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 13px;
  background:linear-gradient(135deg,#f8f3ff,#ffffff);
  border-bottom:1px solid #eadcff;
}
.mobile-table-head strong { color:#111827; font-size:12px; }
.mobile-table-head span { color:#6d28d9; font-size:10px; font-weight:550; }
.mobile-stat-table-wrap { border:0 !important; border-radius:0 !important; box-shadow:none !important; }
.mobile-stat-table { min-width:0 !important; width:100% !important; }
.mobile-stat-table th,
.mobile-stat-table td { padding:9px 10px !important; font-size:10px !important; vertical-align:middle; }
.mobile-stat-table th { color:#5b21b6; background:#fbf8ff; }
.mobile-stat-table td:first-child { color:#374151; font-weight:550; }
.mobile-stat-table td:nth-child(2) { text-align:right; color:#111827; white-space:nowrap; }
.mobile-stat-table td:nth-child(3) { color:#6b7280; }
.mobile-stat-dot {
  width:7px;
  height:7px;
  display:inline-block;
  border-radius:999px;
  margin-right:7px;
  background:linear-gradient(135deg,#a78bfa,#8b5cf6);
}
.mobile-ratio {
  width:100%;
  height:7px;
  border-radius:999px;
  background:#f1e7ff;
  overflow:hidden;
  margin-bottom:3px;
}
.mobile-ratio span {
  display:block;
  height:100%;
  min-width:5px;
  border-radius:999px;
  background:linear-gradient(90deg,#c4b5fd,#8b5cf6);
}
.mobile-ratio + small { color:#6b7280; font-size:9px; }

@media (max-width: 640px) {
  .dashboard-desktop-only { display:none !important; }
  .mobile-dashboard-tables { display:block; }
  .dashboard-page .status { margin-bottom:12px; }
  .choice-toolbar { align-items:stretch; flex-direction:column; padding:11px; }
  .choice-dropdown, .choice-toggle { width:100%; }
  .choice-menu { position:static; margin-top:8px; width:100%; min-width:0; box-shadow:0 12px 30px rgba(17,24,39,.12); }
  .toolbar input[type="search"] { width:100% !important; }
}

/* === REVISI 260612B - HEADER ACTION + HIDE TITLE SECTION === */
.page > .header-row,
.dashboard-header,
.page-title-section {
  display:none !important;
}
.table-card-always { display:block !important; }
.checkio-history-table td:first-child { font-size:12px !important; font-weight:550; }
.checkio-history-table .cell-main { display:block; font-weight:550; color:#1f2937; line-height:1.3; }
.checkio-history-table .cell-sub { display:block; margin-top:2px; font-size:11px; color:#667085; line-height:1.3; }
.checkio-history-table .tenant-phone { font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.checkio-history-table .lease-option-badge { display:inline-flex; align-items:center; width:max-content; margin-top:4px; padding:2px 7px; border:1px solid transparent; border-radius:999px; font-size:10.5px; font-weight:550; line-height:1.25; white-space:nowrap; }
.checkio-history-table .lease-option-badge.new-tenant { background:#ecfdf3; border-color:#abefc6; color:#027a48; }
.checkio-history-table .lease-option-badge.renewal { background:#eef4ff; border-color:#c7d7fe; color:#3538cd; }
.checkio-history-table .date-reminder { display:inline-flex; align-items:center; margin-top:5px; padding:3px 7px; border-radius:999px; background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; font-size:10px; font-weight:550; white-space:nowrap; }
.checkio-history-table .date-reminder.expired { background:#fef2f2; color:#b42318; border-color:#fecaca; }
.checkio-history-toolbar .toolbar-right { gap:7px; }
@media (max-width:640px) {
  .checkio-history-table td:first-child { font-size:12px !important; }
}

/* === MODUL REKENING KORAN === */
.bank-statement-page .bank-section-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.bank-statement-page .bank-nav-dropdown .choice-menu {
  min-width:260px;
}
.bank-statement-page .bank-section[hidden] {
  display:none !important;
}
.bank-statement-page .upload-note {
  margin-top:10px;
  line-height:1.45;
}
.bank-mutation-table th,
.bank-mutation-table td {
  font-size:12px;
}
.bank-mutation-table .money-cell {
  white-space:nowrap;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.bank-mutation-table .debit {
  color:#b42318;
  font-weight:550;
}
.bank-mutation-table .credit {
  color:#027a48;
  font-weight:550;
}
.bank-description-main {
  display:block;
}
.bank-ref-inline {
  display:block;
  margin-top:3px;
  color:#667085;
  font-size:10px;
  line-height:1.25;
  font-weight:400;
}
.cell-main {
  display:block;
  font-weight:550;
  color:#1d2939;
}
.cell-sub {
  display:block;
  margin-top:3px;
  color:#667085;
  font-size:11px;
  line-height:1.3;
}
.bank-summary-grid {
  margin-bottom:16px;
}
.bank-search-result {
  margin-top:16px;
}
@media (max-width: 700px) {
  .bank-statement-page .bank-section-header {
    flex-direction:column;
    align-items:stretch;
  }
  .bank-statement-page .choice-dropdown,
  .bank-statement-page .choice-toggle {
    width:100%;
  }
  .bank-statement-page .bank-nav-dropdown .choice-menu {
    left:0;
    right:0;
    min-width:100%;
  }
  .bank-summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* === REVISI 260613 - SIDEBAR FIXED DESKTOP, TIDAK IKUT SCROLL === */
@media (min-width: 901px) {
  .app,
  .app-shell {
    display:flex !important;
    min-height:100vh !important;
  }

  .sidebar {
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:280px !important;
    height:100vh !important;
    min-height:100vh !important;
    flex:0 0 280px !important;
    overflow:hidden !important;
    overflow-y:hidden !important;
    z-index:1000 !important;
  }

  .content {
    margin-left:280px !important;
    width:calc(100% - 280px) !important;
    min-width:0 !important;
    min-height:100vh !important;
    flex:1 1 auto !important;
  }

  .topbar {
    position:sticky !important;
    top:0 !important;
    z-index:900 !important;
  }

  .frame-wrap {
    height:calc(100vh - 78px) !important;
    overflow:hidden !important;
  }

  iframe,
  #contentFrame {
    height:100% !important;
  }

  .brand-panel {
    padding:12px 14px !important;
  }

  .brand-mark,
  .user-avatar {
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
  }

  .sidebar-user {
    margin:8px 10px !important;
    padding:8px 10px !important;
    grid-template-columns:32px minmax(0,1fr) !important;
    gap:8px !important;
  }

  #logoutBtn {
    margin-top:4px !important;
    padding:6px 10px !important;
    min-height:30px !important;
  }

  .nav-menu {
    height:calc(100vh - 132px) !important;
    max-height:calc(100vh - 132px) !important;
    overflow:hidden !important;
    overflow-y:hidden !important;
    padding:5px 9px 8px !important;
  }

  .nav-section-label {
    margin:7px 8px 4px !important;
    font-size:8px !important;
  }

  .nav-menu a,
  .nav-parent,
  .sidebar a,
  .sidebar button {
    min-height:29px !important;
    padding:5px 8px !important;
    margin:1px 0 !important;
    border-radius:10px !important;
  }

  .submenu {
    margin-left:5px !important;
    padding-left:6px !important;
  }

  .submenu a {
    min-height:27px !important;
    padding-top:4px !important;
    padding-bottom:4px !important;
  }

  .nav-icon {
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    border-radius:8px !important;
  }
}

@media (max-width: 900px) {
  .sidebar {
    position:fixed !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

/* Rekening Koran as clickable main menu-link parent */
.menu-parent-link {
  justify-content:space-between !important;
}
.menu-parent-link > span:not(.nav-icon) {
  flex:1 1 auto !important;
}
.menu-parent-link .submenu-caret {
  margin-left:auto !important;
  font-size:12px !important;
  opacity:.78 !important;
}

/* Revisi Rekening Koran: submenu dipindahkan ke konten, bukan sidebar */
.bank-content-menu {
  margin: 0 0 14px;
  padding: 14px;
}
.bank-content-menu-title {
  margin-bottom: 10px;
}
.bank-menu-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.bank-menu-table button {
  border: 1px solid #e5e7eb;
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  border-radius: 14px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 78px;
  transition: .18s ease;
}
.bank-menu-table button span {
  color: #111827;
  font-weight: 550;
  font-size: 12px;
  line-height: 1.25;
}
.bank-menu-table button small {
  color: #6b7280;
  font-size: 10px;
  line-height: 1.35;
}
.bank-menu-table button:hover,
.bank-menu-table button.active {
  border-color: #7c3aed;
  background: #f5f3ff;
  box-shadow: 0 10px 22px rgba(124,58,237,.12);
}
.bank-menu-table button.active span {
  color: #5b21b6;
}
@media (max-width: 1024px) {
  .bank-menu-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .bank-menu-table { grid-template-columns: 1fr; }
  .bank-menu-table button { min-height: 64px; }
}


/* === REVISI 260613 - RESPONSIVE SUBMENU REKENING KORAN === */
.bank-statement-page .bank-section-header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}
.bank-header-title {
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.bank-header-title strong {
  white-space:nowrap;
  font-size:15px;
}
.bank-header-title .muted {
  font-size:12px;
  white-space:normal;
}
.bank-content-menu {
  margin:0 0 14px !important;
  padding:10px 12px !important;
}
.bank-content-menu-title {
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 8px !important;
  flex-wrap:nowrap !important;
}
.bank-content-menu-title strong {
  white-space:nowrap !important;
  font-size:13px !important;
}
.bank-content-menu-desc {
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:11px !important;
}
.bank-menu-table {
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  overflow-x:auto !important;
  scrollbar-width:thin;
  padding-bottom:2px;
}
.bank-menu-table button {
  flex:0 0 auto !important;
  min-height:34px !important;
  border-radius:999px !important;
  padding:7px 10px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
}
.bank-menu-table button span {
  font-size:11px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.bank-menu-table button small {
  display:none !important;
}

@media (max-width: 1024px) {
  .bank-statement-page .bank-section-header {
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .bank-header-title {
    display:block !important;
  }
  .bank-header-title strong {
    display:block;
    margin-bottom:3px;
  }
  .bank-content-menu {
    padding:0 !important;
    border-radius:14px !important;
    overflow:hidden !important;
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    box-shadow:none !important;
  }
  .bank-content-menu-title {
    padding:10px 12px !important;
    margin:0 !important;
    border-bottom:1px solid #e5e7eb !important;
    display:flex !important;
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:2px !important;
  }
  .bank-content-menu-desc {
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    line-height:1.35 !important;
  }
  .bank-menu-table {
    display:table !important;
    width:100% !important;
    border-collapse:collapse !important;
    overflow:visible !important;
    padding:0 !important;
  }
  .bank-menu-table button {
    display:table-row !important;
    width:100% !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    text-align:left !important;
  }
  .bank-menu-table button span,
  .bank-menu-table button small {
    display:table-cell !important;
    padding:10px 12px !important;
    border-bottom:1px solid #edf0f3 !important;
    vertical-align:middle !important;
  }
  .bank-menu-table button span {
    width:42% !important;
    font-size:12px !important;
    font-weight:550 !important;
    color:#111827 !important;
    line-height:1.25 !important;
    white-space:normal !important;
  }
  .bank-menu-table button small {
    width:58% !important;
    font-size:10px !important;
    color:#667085 !important;
    line-height:1.35 !important;
  }
  .bank-menu-table button.active span,
  .bank-menu-table button.active small {
    background:#f5f3ff !important;
  }
  .bank-menu-table button.active span {
    color:#5b21b6 !important;
  }
}

@media (max-width: 520px) {
  .bank-menu-table button span,
  .bank-menu-table button small {
    padding:9px 10px !important;
  }
  .bank-menu-table button span {
    width:44% !important;
    font-size:11px !important;
  }
  .bank-menu-table button small {
    width:56% !important;
    font-size:9.5px !important;
  }
}

/* === MODUL BUKU TAMU 260613 === */
.guestbook-page > .card {
  border-color:#dbeafe;
  background:linear-gradient(135deg,#ffffff,#eff6ff);
  box-shadow:0 10px 24px rgba(37,99,235,.09);
}
.guestbook-summary-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-bottom:16px;
}
.guestbook-summary-card {
  min-height:96px;
  border-radius:18px;
}
.guestbook-toolbar .toolbar-left {
  min-width:240px;
}
.guestbook-toolbar .toolbar-right {
  flex:1 1 380px;
  justify-content:flex-end;
}
.guestbook-toolbar input[type="search"] {
  max-width:360px;
}
.guestbook-toolbar select {
  max-width:180px;
}
.guestbook-table th,
.guestbook-table td {
  font-size:12px;
}
.guestbook-table .action-row {
  flex-wrap:nowrap;
}
@media (max-width:900px) {
  .guestbook-summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .guestbook-toolbar,
  .guestbook-toolbar .toolbar-left,
  .guestbook-toolbar .toolbar-right {
    width:100%;
    align-items:stretch;
  }
  .guestbook-toolbar input[type="search"],
  .guestbook-toolbar select {
    max-width:none;
    width:100%;
  }
  .guestbook-table-wrap table {
    min-width:760px;
  }
}
@media (max-width:520px) {
  .guestbook-summary-grid {
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .guestbook-summary-card {
    min-height:84px;
    padding:13px;
  }
  .guestbook-summary-card .num {
    font-size:22px !important;
  }
}

/* === REVISI 260613 - COMPACT TABLE/RINGKASAN HEIGHT (-30% s/d -40%) === */
/* Berlaku untuk semua blok ringkasan/statistik, bukan tabel data utama. */
.grid.report-summary,
.grid.kpi-grid,
.bank-summary-grid,
.guestbook-summary-grid {
  gap:9px !important;
  margin-bottom:10px !important;
}

.stat,
.kpi-card,
.report-summary .stat,
.bank-summary-grid .stat,
.guestbook-summary-grid .stat,
.guestbook-summary-card {
  min-height:62px !important;
  padding:9px 11px !important;
  border-radius:13px !important;
}

.kpi-card {
  min-height:66px !important;
}

.stat .muted,
.kpi-card .muted,
.report-summary .muted,
.bank-summary-grid .muted,
.guestbook-summary-grid .muted {
  font-size:10.5px !important;
  line-height:1.15 !important;
}

.stat .num,
.kpi-card .num,
.guestbook-summary-card .num {
  font-size:19px !important;
  line-height:1.05 !important;
  margin-top:3px !important;
}

.kpi-hint {
  margin-top:4px !important;
  font-size:10.5px !important;
  line-height:1.15 !important;
}

.dashboard-section-title {
  margin:8px 0 7px !important;
}

.mobile-stat-panel {
  margin-bottom:8px !important;
  border-radius:13px !important;
}

.mobile-table-head {
  padding:7px 10px !important;
}

.mobile-table-head strong {
  font-size:11px !important;
  line-height:1.1 !important;
}

.mobile-table-head span {
  font-size:9px !important;
  line-height:1.1 !important;
}

.mobile-stat-table th,
.mobile-stat-table td {
  padding:5px 7px !important;
  font-size:9.5px !important;
  line-height:1.15 !important;
}

.mobile-ratio {
  height:5px !important;
  margin-bottom:2px !important;
}

.mobile-ratio + small {
  font-size:8.5px !important;
}

/* Buku Tamu: ringkasan tetap 2 kolom di mobile, tapi lebih pendek. */
@media (max-width:520px) {
  .guestbook-summary-grid {
    gap:8px !important;
  }
  .guestbook-summary-card,
  .guestbook-summary-grid .stat {
    min-height:54px !important;
    padding:8px 9px !important;
  }
  .guestbook-summary-card .num,
  .guestbook-summary-grid .stat .num {
    font-size:18px !important;
  }
}

/* === SORT ICON PADA HEADER TABEL TRANSAKSI === */
th.sortable-th {
  padding:0 !important;
  vertical-align:middle !important;
}

.table-sort-button {
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:550;
  line-height:1.2;
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
}

.table-sort-button:hover,
.table-sort-button:focus-visible {
  background:#f3e8ff;
  color:#6d28d9;
  outline:none;
}

.table-sort-button:focus-visible {
  box-shadow:inset 0 0 0 2px #a855f7;
}

.table-sort-label {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.table-sort-icon {
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:inline-grid;
  place-items:center;
  border:1px solid #e4d4ff;
  border-radius:6px;
  background:#fff;
  color:#8b5cf6;
  font-size:11px;
  font-weight:600;
  line-height:1;
}

th.sortable-th.is-sorted {
  background:#f5f0ff !important;
  color:#5b21b6 !important;
}

th.sortable-th.is-sorted .table-sort-icon {
  border-color:#a855f7;
  background:#7c3aed;
  color:#fff;
  box-shadow:0 3px 8px rgba(124,58,237,.18);
}

th.table-no-sort {
  cursor:default;
}

@media (max-width:900px) {
  .table-sort-button {
    min-height:32px;
    padding:7px 8px;
    gap:5px;
    font-size:10px;
  }
  .table-sort-icon {
    width:16px;
    height:16px;
    flex-basis:16px;
    font-size:10px;
    border-radius:5px;
  }
}

/* Setting: User Admin, Hak Akses, Backup, Restore, Export */
.settings-page { max-width:1500px; margin:0 auto; }
.settings-tabs {
  display:flex;
  gap:8px;
  align-items:center;
  overflow-x:auto;
  padding:8px;
  margin-bottom:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 18px rgba(16,24,40,.04);
}
.settings-tab {
  flex:0 0 auto;
  border:1px solid #e9d5ff;
  background:#faf5ff;
  color:#6d28d9;
  border-radius:11px;
  padding:9px 14px;
  font:inherit;
  font-size:13px;
  font-weight:550;
  cursor:pointer;
}
.settings-tab:hover { background:#f3e8ff; }
.settings-tab.active {
  color:#fff;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  border-color:#7c3aed;
  box-shadow:0 8px 18px rgba(124,58,237,.22);
}
.settings-panel { min-height:300px; }
.settings-module-frame {
  display:block;
  width:100%;
  min-height:650px;
  border:0;
  border-radius:16px;
  background:transparent;
}
.settings-action-card {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}
.settings-action-card p { margin:6px 0 0; }
.settings-summary {
  font-size:15px;
  color:#374151;
  padding:12px 14px;
  border:1px solid #e9d5ff;
  border-radius:12px;
  background:#faf5ff;
}
.settings-note {
  margin-top:12px;
  padding:10px 12px;
  border-left:4px solid #8b5cf6;
  border-radius:8px;
  background:#f8f5ff;
  color:#5b6472;
  font-size:12px;
  line-height:1.5;
}
.settings-confirm {
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:14px;
  padding:11px 12px;
  border:1px solid #fecaca;
  border-radius:10px;
  background:#fff7f7;
  color:#7f1d1d;
  font-size:13px;
}
.settings-confirm input { width:auto; margin-top:2px; }
.settings-table-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;
}
.settings-table-item {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:3px 9px;
  align-items:center;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}
.settings-table-item:hover { border-color:#c4b5fd; background:#faf5ff; }
.settings-table-item input { width:auto; grid-row:1 / span 2; }
.settings-table-name { font-weight:550; color:#1f2937; word-break:break-word; }
.settings-table-item small { color:var(--muted); }
.settings-export-toolbar { margin-bottom:14px; }
@media (max-width:700px) {
  .settings-action-card { align-items:stretch; flex-direction:column; }
  .settings-action-card .btn { width:100%; }
  .settings-tabs { padding:7px; }
  .settings-tab { padding:8px 11px; font-size:12px; }
  .settings-module-frame { min-height:720px; }
  .settings-export-toolbar .toolbar-left,
  .settings-export-toolbar .toolbar-right { width:100%; }
  .settings-export-toolbar .btn { width:100%; }
}

/* === REVISI FONT MENU SIDEBAR DESKTOP 13 PX === */
@media (min-width: 901px) {
  .nav-menu a,
  .nav-parent,
  .sidebar a,
  .sidebar button {
    font-size:13px !important;
  }
}


/* === REVISI 260613 - HEADER KONTROL TRANSAKSI SATU BARIS === */
@media (min-width: 901px) {
  .transaction-toolbar {
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
  }

  .transaction-toolbar .toolbar-left,
  .transaction-toolbar .toolbar-right {
    display:flex !important;
    width:auto !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:8px !important;
  }

  .transaction-toolbar .toolbar-left {
    flex:0 0 auto;
    min-width:max-content;
  }

  .transaction-toolbar .toolbar-right {
    flex:1 1 auto;
    min-width:0;
    justify-content:flex-end !important;
  }

  .transaction-toolbar strong,
  .transaction-toolbar .btn {
    flex:0 0 auto;
    white-space:nowrap;
  }

  .transaction-toolbar input[type="search"] {
    width:clamp(150px, 24vw, 360px) !important;
    min-width:150px;
    max-width:360px;
    flex:1 1 260px;
  }
}

@media (max-width: 900px) {
  .transaction-toolbar,
  .transaction-toolbar .toolbar-left,
  .transaction-toolbar .toolbar-right {
    flex-wrap:wrap !important;
    width:100% !important;
  }

  .transaction-toolbar input[type="search"] {
    width:100% !important;
    max-width:none;
  }
}

/* Sidebar user: positioned after Setting and displayed as one row */
.sidebar {
  display:flex !important;
  flex-direction:column !important;
}

.nav-menu {
  flex:1 0 auto !important;
}

.sidebar > .sidebar-user {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;
  grid-template-columns:none !important;
  margin:0 12px 14px !important;
  padding:9px 12px !important;
  min-height:38px !important;
  border:1px solid #e9d5ff !important;
  border-radius:12px !important;
  background:#f9fafb !important;
  color:var(--sidebar-text) !important;
  white-space:nowrap !important;
}

.sidebar > .sidebar-user #loginRole {
  display:inline !important;
  margin:0 !important;
  padding:0 !important;
  color:var(--sidebar-text) !important;
  font-size:13px !important;
  font-weight:550 !important;
  line-height:1.2 !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.sidebar > .sidebar-user #logoutBtn {
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#7c3aed !important;
  font-size:13px !important;
  font-weight:550 !important;
  line-height:1.2 !important;
  text-align:left !important;
  transform:none !important;
}

.sidebar > .sidebar-user #logoutBtn:hover,
.sidebar > .sidebar-user #logoutBtn:focus-visible {
  background:transparent !important;
  color:#5b21b6 !important;
  text-decoration:underline !important;
  transform:none !important;
}

@media (max-width: 900px) {
  .sidebar > .sidebar-user {
    margin:0 10px 10px !important;
    padding:8px 10px !important;
  }

  .sidebar > .sidebar-user #loginRole,
  .sidebar > .sidebar-user #logoutBtn {
    font-size:12px !important;
  }
}


/* === REVISI 260613 - PIE CHART STATUS UNIT DAN UNIT PER TOWER === */
.pie-chart-container {
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.pie-chart-body {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:138px;
}

.pie-chart-graphic {
  width:132px;
  height:132px;
  flex:0 0 132px;
  border-radius:50%;
  border:4px solid #fff;
  box-shadow:0 7px 18px rgba(15, 23, 42, .13);
}

.pie-chart-summary {
  display:flex;
  flex-direction:column;
  min-width:72px;
}

.pie-chart-summary strong {
  color:#111827;
  font-size:22px;
  line-height:1.1;
}

.pie-chart-summary span {
  margin-top:3px;
  color:var(--muted);
  font-size:10.5px;
}

.pie-legend {
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  min-width:0;
}

.pie-legend-item {
  display:grid;
  grid-template-columns:10px minmax(0, 1fr) auto auto;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:5px 6px;
  border:1px solid #eef1f5;
  border-radius:8px;
  background:#fafbfc;
  font-size:10.5px;
}

.pie-legend-swatch {
  width:9px;
  height:9px;
  border-radius:50%;
}

.pie-legend-label {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#374151;
}

.pie-legend-item strong {
  color:#111827;
  font-size:10.5px;
}

.pie-legend-item small {
  color:var(--muted);
  font-size:9.5px;
  min-width:38px;
  text-align:right;
}

.mobile-stat-panel .mobile-pie-chart {
  padding:12px;
}

.mobile-stat-panel .pie-chart-body {
  min-height:128px;
}

@media (max-width: 1350px) and (min-width: 1001px) {
  .pie-chart-body {
    flex-direction:column;
    gap:7px;
  }

  .pie-chart-graphic {
    width:112px;
    height:112px;
    flex-basis:112px;
  }

  .pie-chart-summary {
    align-items:center;
  }
}

@media (max-width: 1000px) {
  .pie-chart-graphic {
    width:150px;
    height:150px;
    flex-basis:150px;
  }
}

/* =========================================================
   Upload foto Unit, Maintenance, dan Pembayaran — 13/06/2026
   ========================================================= */
.photo-upload-field {
  min-width:220px;
}

.photo-upload-field input[type="file"] {
  width:100%;
  min-height:38px;
  padding:6px 8px;
  border:1px dashed #c8b5ff;
  border-radius:10px;
  background:#fbfaff;
  color:#374151;
  font:inherit;
}

.photo-upload-field input[type="file"]::file-selector-button {
  margin-right:9px;
  padding:6px 10px;
  border:0;
  border-radius:7px;
  background:#7c3aed;
  color:#fff;
  font:550 11px/1 "Open Sans", "Segoe UI", Arial, sans-serif;
  cursor:pointer;
}

.photo-upload-field > small {
  display:block;
  margin-top:5px;
  font-size:10.5px;
}

.photo-form-preview {
  margin-top:8px;
  min-height:48px;
  padding:8px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
}

.photo-form-preview.is-empty {
  display:flex;
  align-items:center;
  justify-content:center;
  border-style:dashed;
  background:#fafafa;
}

.photo-preview-card {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.photo-preview-card > a {
  display:block;
  flex:0 0 78px;
  width:78px;
  height:64px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  border-radius:9px;
  background:#f3f4f6;
}

.photo-preview-card img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.photo-preview-info {
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  gap:7px;
  min-width:0;
}

.photo-preview-info strong {
  overflow:hidden;
  color:#1f2937;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.table-photo-cell {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:185px;
  max-width:260px;
}

.photo-thumb-link {
  display:block;
  flex:0 0 54px;
  width:54px;
  height:46px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#f3f4f6;
}

.table-photo-thumb {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .18s ease;
}

.photo-thumb-link:hover .table-photo-thumb {
  transform:scale(1.06);
}

.photo-cell-body {
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.photo-cell-body > strong {
  color:#111827;
  font-size:10.5px;
  line-height:1.2;
}

.photo-cell-body > small {
  display:-webkit-box;
  overflow:hidden;
  color:#6b7280;
  font-size:9.5px;
  line-height:1.3;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.photo-cell-actions {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:2px;
}

.photo-cell-actions .btn.small {
  min-height:24px;
  padding:4px 7px;
  font-size:9.5px;
  line-height:1;
  white-space:nowrap;
}

@media (max-width: 700px) {
  .photo-upload-field {
    min-width:0;
  }

  .photo-preview-card {
    align-items:flex-start;
  }

  .table-photo-cell {
    min-width:170px;
  }
}

/* === REVISI 260613 - KALKULATOR WE KONTRAK PENYEWA === */
.we-calculator-card {
  grid-column:1 / -1;
}
.we-card-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.we-card-heading h2 { margin-bottom:4px; }
.we-formula-chip {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 11px;
  border:1px solid #e4d4ff;
  border-radius:999px;
  background:#f7f2ff;
  color:#6d28d9;
  font-size:12px;
  font-weight:550;
  white-space:nowrap;
}
.we-identity-grid {
  grid-template-columns:repeat(2, minmax(0, 1fr));
  margin-bottom:14px;
}
.we-calculator-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  align-items:start;
}
.we-section {
  min-width:0;
  padding:14px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fbfcff;
}
.we-section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  margin-bottom:12px;
  border-bottom:1px solid #e5e7eb;
}
.we-section-title h3 {
  margin:0;
  font-size:16px;
  color:#111827;
}
.we-section-title span {
  color:#6b7280;
  font-size:11px;
  font-weight:550;
  text-align:right;
}
.we-section-fields {
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.we-section-fields .form-field { min-width:0; }
.we-readonly {
  min-height:39px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 10px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#f3f4f6;
  color:#374151;
}
.we-readonly strong { font-size:13px; }
.we-readonly span { font-size:11px; color:#6b7280; }
.we-readonly.money { justify-content:flex-end; }
.we-subtotal {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding:11px 12px;
  border-radius:10px;
  background:#ede9fe;
  color:#4c1d95;
  font-size:13px;
  font-weight:550;
}
.we-subtotal strong { font-size:15px; }
.we-summary-card {
  margin-top:14px;
  padding:14px;
  border:1px solid #dfd4f5;
  border-radius:14px;
  background:#fff;
}
.we-summary-heading {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-bottom:12px;
}
.we-summary-heading > div {
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 12px;
  border:1px solid #ede9fe;
  border-radius:10px;
  background:#faf7ff;
}
.we-summary-heading strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  color:#312e81;
}
.we-breakdown-table { min-width:620px; }
.we-breakdown-table th,
.we-breakdown-table td { padding:9px 11px; font-size:12px; }
.we-breakdown-table th:last-child,
.we-breakdown-table td:last-child { text-align:right; }
.we-breakdown-subtotal td {
  background:#f5f3ff;
  color:#4c1d95;
  font-weight:550;
}
.we-breakdown-total td {
  background:#172033;
  color:#fff;
  font-size:14px;
  font-weight:550;
}
.we-inline-money {
  min-width:120px;
  padding:6px 8px;
  text-align:right;
  font-size:12px;
}
.we-total-note {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:10px;
  color:#6b7280;
  font-size:11px;
}
.we-total-note strong { color:#374151; }
.we-form-actions { justify-content:flex-end; }

@media (max-width:1100px) {
  .we-calculator-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .we-card-heading { flex-direction:column; }
  .we-formula-chip { white-space:normal; }
  .we-identity-grid,
  .we-section-fields,
  .we-summary-heading { grid-template-columns:1fr; }
  .we-section { padding:12px; }
  .we-section-title { align-items:flex-start; flex-direction:column; gap:4px; }
  .we-section-title span { text-align:left; }
  .we-form-actions .btn { width:100%; }
  .we-total-note { align-items:flex-start; flex-direction:column; gap:3px; }
}

/* === REVISI 260613 - SIMPAN DAN SHARE DATA HITUNG WE === */
.we-data-section {
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #e5e7eb;
}
.we-data-toolbar {
  margin-bottom:10px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f8fafc;
}
.we-data-toolbar .toolbar-left {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.we-data-toolbar .toolbar-right {
  min-width:min(320px, 36vw);
}
.we-data-toolbar input[type="search"] {
  width:100%;
  min-width:150px;
}
.we-data-table {
  min-width:1180px;
}
.we-data-table th,
.we-data-table td {
  padding:9px 10px;
  font-size:11.5px;
  vertical-align:top;
}
.we-data-table td:nth-child(7) strong {
  color:#4c1d95;
  white-space:nowrap;
}
.we-data-table .action-row {
  flex-wrap:nowrap;
  min-width:max-content;
}
@media (max-width:760px) {
  .we-data-toolbar {
    align-items:stretch;
    flex-direction:column;
  }
  .we-data-toolbar .toolbar-right {
    width:100%;
    min-width:0;
  }
  .we-data-toolbar input[type="search"] {
    min-width:0;
  }
}

/* === REVISI 260613 - POPUP RINCIAN HITUNG WE 75% === */
body.we-modal-open {
  overflow:hidden;
}

.we-modal-shell[hidden] {
  display:none !important;
}

.we-modal-shell {
  position:fixed;
  inset:0;
  z-index:1600;
  display:grid;
  place-items:center;
  padding:20px;
}

.we-modal-backdrop {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:rgba(15, 23, 42, .58);
  cursor:default;
}

.we-modal-dialog {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  width:min(75vw, 1200px);
  max-width:75vw;
  height:min(75vh, 860px);
  max-height:75vh;
  min-width:0;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#fff;
  box-shadow:0 28px 80px rgba(15, 23, 42, .28);
}

.we-modal-header {
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}

.we-modal-header h2 {
  margin:0 0 4px;
  font-size:19px;
}

.we-modal-header-actions {
  display:flex;
  align-items:center;
  gap:10px;
}

.we-modal-x {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  color:#374151;
  font:550 24px/1 "Open Sans", "Segoe UI", Arial, sans-serif;
  cursor:pointer;
}

.we-modal-x:hover {
  border-color:#c4b5fd;
  background:#f5f3ff;
  color:#6d28d9;
}

.we-modal-scroll {
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:16px 18px 18px;
  background:#f8fafc;
}

.we-modal-scroll .we-section,
.we-modal-scroll .we-summary-card,
.we-modal-scroll .we-data-toolbar {
  background:#fff;
}

.we-modal-footer {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  padding:12px 18px;
  border-top:1px solid #e5e7eb;
  background:#fff;
  box-shadow:0 -8px 20px rgba(15, 23, 42, .04);
}

.we-modal-footer .btn {
  min-width:92px;
}

@media (max-width: 900px) {
  .we-modal-shell {
    padding:10px;
  }

  .we-modal-dialog {
    width:calc(100vw - 20px);
    max-width:none;
    height:calc(100vh - 20px);
    max-height:none;
  }

  .we-modal-header {
    padding:13px 14px;
  }

  .we-modal-header-actions .we-formula-chip {
    display:none;
  }

  .we-modal-scroll {
    padding:13px 14px 16px;
  }

  .we-modal-footer {
    padding:10px 14px;
  }
}

@media (max-width: 560px) {
  .we-modal-footer {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .we-modal-footer .btn {
    min-width:0;
    padding-inline:8px;
  }
}

.we-modal-feedback {
  flex:1 1 auto;
  min-width:0;
  color:#6b7280;
  font-size:11.5px;
  font-weight:550;
}
.we-modal-feedback.ok { color:#047857; }
.we-modal-feedback.error { color:#b91c1c; }
@media (max-width:560px) {
  .we-modal-feedback {
    grid-column:1 / -1;
  }
}

/* === REVISI 260613 - FOTO UNIT PADA DASHBOARD === */
.dashboard-unit-photo-section {
  margin-top:16px;
}

.dashboard-unit-photo-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.dashboard-unit-photo-heading h2 {
  margin:0;
  color:#111827;
  font-size:17px;
  line-height:1.25;
}

.dashboard-unit-photo-heading p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
}

.dashboard-photo-status-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  align-items:start;
}

.unit-photo-status-note {
  color:#6b7280;
  font-size:.78em;
  font-weight:550;
  white-space:nowrap;
}

.unit-photo-status-card {
  min-width:0;
  margin:0;
  padding:13px;
}

.unit-photo-status-card .card-title-row {
  margin-bottom:9px;
}

.unit-photo-status-card .card-title-row h2 {
  margin:0;
  font-size:14px;
  line-height:1.2;
}

.unit-photo-status-card .card-title-row .muted {
  font-size:10px;
  white-space:nowrap;
}

.unit-photo-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:470px;
  overflow:auto;
  padding-right:2px;
  scrollbar-width:thin;
}

.unit-photo-item {
  display:grid;
  grid-template-columns:88px minmax(0, 1fr);
  gap:9px;
  min-width:0;
  padding:7px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
}

.unit-photo-image {
  display:block;
  width:88px;
  height:72px;
  overflow:hidden;
  border-radius:8px;
  background:#f3f4f6;
}

.unit-photo-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .18s ease;
}

.unit-photo-image:hover img {
  transform:scale(1.04);
}

.unit-photo-content {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  padding:2px 0;
}

.unit-photo-content > strong {
  display:block;
  max-width:100%;
  overflow:hidden;
  color:#111827;
  font-size:11px;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.unit-photo-content > small {
  display:-webkit-box;
  max-width:100%;
  margin-top:3px;
  overflow:hidden;
  color:#6b7280;
  font-size:9.5px;
  line-height:1.35;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.unit-photo-actions {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:auto;
  padding-top:6px;
}

.unit-photo-actions .btn.small {
  min-height:24px;
  padding:4px 7px;
  font-size:9.5px;
  line-height:1;
  white-space:nowrap;
}

@media (max-width:1100px) {
  .dashboard-photo-status-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:700px) {
  .dashboard-unit-photo-section {
    margin-top:10px;
  }

  .dashboard-unit-photo-heading {
    align-items:flex-start;
  }

  .dashboard-photo-status-grid {
    grid-template-columns:1fr;
  }

  .unit-photo-list {
    max-height:390px;
  }
}

/* === REVISI 260613 - MOBILE STATUS UNIT + UNIT PER TOWER SATU BARIS === */
.mobile-unit-chart-row {
  display:block;
}

@media (max-width: 640px) {
  .mobile-unit-chart-row {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    margin-bottom:8px;
  }

  .mobile-unit-chart-row > .mobile-stat-panel {
    min-width:0;
    margin-bottom:0 !important;
  }

  .mobile-unit-chart-row .mobile-table-head {
    min-height:46px;
    padding:7px 8px !important;
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
    gap:2px;
  }

  .mobile-unit-chart-row .mobile-table-head strong {
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10.5px !important;
  }

  .mobile-unit-chart-row .mobile-table-head span {
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8.5px !important;
  }

  .mobile-unit-chart-row .mobile-pie-chart {
    padding:8px 5px !important;
    gap:6px;
  }

  .mobile-unit-chart-row .pie-chart-body {
    min-height:94px;
    flex-direction:column;
    gap:5px;
  }

  .mobile-unit-chart-row .pie-chart-graphic {
    width:82px;
    height:82px;
    flex:0 0 82px;
    border-width:3px;
  }

  .mobile-unit-chart-row .pie-chart-summary {
    min-width:0;
    align-items:center;
    text-align:center;
  }

  .mobile-unit-chart-row .pie-chart-summary strong {
    font-size:16px;
  }

  .mobile-unit-chart-row .pie-chart-summary span {
    margin-top:1px;
    font-size:8px;
  }

  .mobile-unit-chart-row .pie-legend {
    gap:4px;
  }

  .mobile-unit-chart-row .pie-legend-item {
    grid-template-columns:7px minmax(0, 1fr) auto;
    gap:3px;
    padding:3px 4px;
    border-radius:6px;
    font-size:8px;
  }

  .mobile-unit-chart-row .pie-legend-swatch {
    width:7px;
    height:7px;
  }

  .mobile-unit-chart-row .pie-legend-item strong {
    font-size:8px;
  }

  .mobile-unit-chart-row .pie-legend-item small {
    display:none;
  }

  .mobile-unit-chart-row .empty-box {
    padding:12px 6px;
    font-size:9px;
  }
}


/* === REVISI KONTRAK PENYEWA: DOKUMEN INVOICE === */
.contract-document-modal[hidden] { display:none !important; }
.contract-document-modal {
  position:fixed;
  inset:0;
  z-index:1250;
  display:grid;
  place-items:center;
  padding:18px;
}
.contract-document-backdrop {
  position:absolute;
  inset:0;
  border:0;
  background:rgba(15,23,42,.55);
  cursor:pointer;
}
.contract-document-dialog {
  position:relative;
  z-index:1;
  width:min(720px, 100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 80px rgba(15,23,42,.28);
  padding:20px;
}
.contract-document-header,
.contract-document-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.contract-document-header { margin-bottom:16px; }
.contract-document-header h2 { margin:0; }
.contract-document-preview {
  margin-top:16px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
}
.contract-document-preview-row {
  display:grid;
  grid-template-columns:155px minmax(0,1fr);
  gap:14px;
  padding:11px 14px;
  border-bottom:1px solid #eef2f7;
}
.contract-document-preview-row:last-child { border-bottom:0; }
.contract-document-preview-row span:first-child {
  color:#667085;
  font-size:12px;
  font-weight:550;
}
.contract-document-preview-row strong {
  color:#111827;
  overflow-wrap:anywhere;
}
.contract-document-footer { margin-top:18px; justify-content:flex-end; }
body.contract-document-open { overflow:hidden; }

@media (max-width: 700px) {
  .contract-document-modal { padding:10px; align-items:end; }
  .contract-document-dialog { max-height:92vh; border-radius:16px 16px 0 0; }
  .contract-document-preview-row { grid-template-columns:1fr; gap:3px; }
  .checkio-history-toolbar .toolbar-left { align-items:stretch; }
  .checkio-history-toolbar .toolbar-left .btn { width:100%; justify-content:center; }
}

/* === REVISI REKENING KORAN: CHECKBOX, TOTAL PILIHAN, AKSI TERSIMPAN 260615 === */
.bank-search-selection-summary {
  grid-template-columns:repeat(3,minmax(0,240px)) !important;
  gap:10px !important;
  margin:14px 0 0 !important;
}
.bank-search-selection-summary .stat {
  min-height:64px !important;
}
.bank-check-column {
  width:42px !important;
  min-width:42px !important;
  text-align:center !important;
}
.bank-check-column input[type="checkbox"] {
  width:17px;
  height:17px;
  cursor:pointer;
  accent-color:#6d28d9;
}
.bank-saved-actions {
  flex-wrap:wrap;
  min-width:320px;
}
.bank-summary-transaction {
  margin-top:6px;
  font-size:12px;
  color:#667085;
}
.bank-summary-transaction strong { color:#111827; }
@media (max-width:700px) {
  .bank-search-selection-summary { grid-template-columns:1fr !important; }
  .bank-saved-actions { min-width:260px; }
}

/* === REVISI 260615 - WARNA BANK/REKENING DISAMAKAN DENGAN REF === */
.bank-mutation-table .bank-account-bank,
.bank-mutation-table .bank-account-number {
  color:#667085 !important;
}
.bank-mutation-table .bank-account-bank {
  font-weight:550 !important;
}

/* === REVISI 260615 - BANK/REKENING WARNA REF PADA HASIL TERSIMPAN, PDF, EXCEL === */
.bank-search-result .bank-account-bank,
.bank-search-result .bank-account-number,
.bank-mutation-table .bank-account-bank,
.bank-mutation-table .bank-account-number {
  color:#667085 !important;
}


/* === REVISI 260615 - BARIS SELANG-SELING DUA WARNA REKENING KORAN === */
.bank-statement-page .table-wrap table tbody tr:nth-child(odd) > td {
  background:#ffffff !important;
}
.bank-statement-page .table-wrap table tbody tr:nth-child(even) > td {
  background:#f2f4f7 !important;
}
.bank-statement-page .table-wrap table tbody tr:hover > td {
  background:#eef2f6 !important;
}

/* Rekening koran: kolom nomor urut */
.bank-mutation-table .bank-number-column {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  text-align: center;
  white-space: nowrap;
}

/* === REVISI 260615 - FONT SIDEBAR 12PX / 500, JUDUL KELOMPOK 10PX / 600 === */
.nav-menu > a,
.nav-menu .submenu > a,
.nav-menu > .nav-parent {
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.25 !important;
}

.nav-menu .nav-section-label {
  font-size:10px !important;
  font-weight:550 !important;
  line-height:1.2 !important;
}

@media (max-width:900px) {
  .nav-menu > a,
  .nav-menu .submenu > a,
  .nav-menu > .nav-parent {
    font-size:12px !important;
    font-weight:500 !important;
  }

  .nav-menu .nav-section-label {
    font-size:10px !important;
    font-weight:550 !important;
  }
}

@media (max-width:560px) {
  .nav-menu > a,
  .nav-menu .submenu > a,
  .nav-menu > .nav-parent {
    font-size:12px !important;
    font-weight:500 !important;
  }

  .nav-menu .nav-section-label {
    font-size:10px !important;
    font-weight:550 !important;
  }
}

/* === REVISI 260615 - JARAK VERTIKAL MENU SIDEBAR DIKURANGI 1-2PX === */
@media (min-width:901px) {
  .nav-menu > a,
  .nav-menu > .nav-parent,
  .nav-menu .submenu > a {
    padding-top:4px !important;
    padding-bottom:4px !important;
    min-height:27px !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  .nav-menu .submenu > a {
    padding-top:3px !important;
    padding-bottom:3px !important;
    min-height:25px !important;
  }
}

@media (max-width:900px) {
  .nav-menu > a,
  .nav-menu > .nav-parent,
  .nav-menu .submenu > a {
    padding-top:8px !important;
    padding-bottom:8px !important;
    margin-top:1px !important;
    margin-bottom:1px !important;
  }
}

@media (max-width:560px) {
  .nav-menu > a,
  .nav-menu > .nav-parent,
  .nav-menu .submenu > a {
    padding-top:7px !important;
    padding-bottom:7px !important;
  }
}

/* === FINAL TYPOGRAPHY SYSTEM 260615 ===
   Desktop > Tablet <=900px > Mobile <=560px
*/
:root {
  --fw-emphasis:550;
  --fw-marker:600;
  --fw-page-title:700;
}

/* Bobot mayoritas: judul, label, tombol, header tabel, dan teks tebal */
h1, h2, h3, h4, h5, h6,
strong, b, th,
label, .form-field label,
.btn, button,
.dashboard-section-title,
.card-title-row h2,
.toolbar strong,
.topbar {
  font-weight:var(--fw-emphasis) !important;
}

/* Elemen penanda / logo */
.brand,
.login-brand,
.brand-mark,
.user-avatar,
.nav-icon,
.nav-section-label,
.badge,
.system-pill,
.frame-loader {
  font-weight:var(--fw-marker) !important;
}

/* Judul halaman utama */
.page-title {
  font-size:18px !important;
  font-weight:var(--fw-page-title) !important;
  line-height:1.15 !important;
}

/* Heading */
h1,
.page h1,
.login-card h1 {
  font-size:24px !important;
  line-height:1.15 !important;
}

h2,
.card-title-row h2,
.dashboard-status-grid .card-title-row h2,
.we-modal-header h2,
.dashboard-unit-photo-heading h2,
.unit-photo-status-card .card-title-row h2,
.contract-document-header h2 {
  font-size:14px !important;
  line-height:1.25 !important;
}

h3,
.we-section-title h3 {
  font-size:13px !important;
  line-height:1.3 !important;
}

/* KPI / statistik */
.kpi-card .num,
.stat .num,
.guestbook-summary-card .num,
.guestbook-summary-grid .stat .num {
  font-size:22px !important;
  font-weight:var(--fw-emphasis) !important;
  line-height:1.1 !important;
}

/* Tombol umum */
.btn,
button,
.btn.small,
.login-tab,
input[type="button"],
input[type="submit"],
input[type="reset"],
.bank-menu-table button span {
  font-size:10px !important;
  font-weight:var(--fw-emphasis) !important;
  line-height:1.2 !important;
}

/* Pertahankan tipografi navigasi sidebar hasil revisi sebelumnya */
.nav-menu > a,
.nav-menu .submenu > a,
.nav-menu > .nav-parent,
.sidebar a,
.sidebar button {
  font-size:12px !important;
  font-weight:500 !important;
}
.nav-menu .nav-section-label {
  font-size:10px !important;
  font-weight:var(--fw-marker) !important;
}

@media (max-width:900px) {
  .page-title { font-size:16px !important; }

  h1,
  .page h1,
  .login-card h1 { font-size:20px !important; }

  h2,
  .card-title-row h2,
  .dashboard-status-grid .card-title-row h2,
  .we-modal-header h2,
  .dashboard-unit-photo-heading h2,
  .unit-photo-status-card .card-title-row h2,
  .contract-document-header h2 { font-size:13px !important; }

  h3,
  .we-section-title h3 { font-size:13px !important; }

  .kpi-card .num,
  .stat .num,
  .guestbook-summary-card .num,
  .guestbook-summary-grid .stat .num { font-size:20px !important; }

  .btn,
  button,
  .btn.small,
  .login-tab,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .bank-menu-table button span { font-size:9px !important; }

  .nav-menu > a,
  .nav-menu .submenu > a,
  .nav-menu > .nav-parent,
  .sidebar a,
  .sidebar button { font-size:12px !important; }
}

@media (max-width:560px) {
  .page-title { font-size:14px !important; }

  h1,
  .page h1,
  .login-card h1 { font-size:18px !important; }

  h2,
  .card-title-row h2,
  .dashboard-status-grid .card-title-row h2,
  .we-modal-header h2,
  .dashboard-unit-photo-heading h2,
  .unit-photo-status-card .card-title-row h2,
  .contract-document-header h2 { font-size:12px !important; }

  h3,
  .we-section-title h3 { font-size:12px !important; }

  .kpi-card .num,
  .stat .num,
  .guestbook-summary-card .num,
  .guestbook-summary-grid .stat .num { font-size:18px !important; }

  .btn,
  button,
  .btn.small,
  .login-tab,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .bank-menu-table button span { font-size:8px !important; }

  .nav-menu > a,
  .nav-menu .submenu > a,
  .nav-menu > .nav-parent,
  .sidebar a,
  .sidebar button { font-size:12px !important; }
}


/* === REVISI 260615 - SIDEBAR COLLAPSE 230PX / MOBILE 40% / BREADCRUMB DIHAPUS === */
.breadcrumb {
  display:none !important;
}

@media (min-width:901px) {
  .sidebar {
    width:230px !important;
    flex:0 0 230px !important;
    transition:width .2s ease, flex-basis .2s ease !important;
  }

  .content {
    margin-left:230px !important;
    width:calc(100% - 230px) !important;
    transition:margin-left .2s ease, width .2s ease !important;
  }

  .app-shell.sidebar-collapsed .sidebar {
    width:68px !important;
    flex:0 0 68px !important;
  }

  .app-shell.sidebar-collapsed .content {
    margin-left:68px !important;
    width:calc(100% - 68px) !important;
  }

  .app-shell.sidebar-collapsed .brand-panel {
    justify-content:center !important;
    gap:0 !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .app-shell.sidebar-collapsed .brand-panel > div:last-child,
  .app-shell.sidebar-collapsed .nav-section-label,
  .app-shell.sidebar-collapsed .menu-link > span:last-child,
  .app-shell.sidebar-collapsed .nav-parent > b,
  .app-shell.sidebar-collapsed .sidebar-user > span {
    display:none !important;
  }

  .app-shell.sidebar-collapsed .nav-menu {
    padding-left:7px !important;
    padding-right:7px !important;
  }

  .app-shell.sidebar-collapsed .nav-menu > a,
  .app-shell.sidebar-collapsed .nav-menu .submenu > a,
  .app-shell.sidebar-collapsed .nav-menu > .nav-parent {
    justify-content:center !important;
    padding-left:4px !important;
    padding-right:4px !important;
    gap:0 !important;
  }

  .app-shell.sidebar-collapsed .nav-parent > span {
    justify-content:center !important;
    gap:0 !important;
    font-size:0 !important;
  }

  .app-shell.sidebar-collapsed .nav-parent .nav-icon {
    font-size:12px !important;
  }

  .app-shell.sidebar-collapsed .submenu {
    margin-left:0 !important;
    padding-left:0 !important;
    border-left:0 !important;
  }

  .app-shell.sidebar-collapsed .sidebar-user {
    display:flex !important;
    justify-content:center !important;
    margin:8px 7px !important;
    padding:6px !important;
  }

  .app-shell.sidebar-collapsed #logoutBtn {
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 !important;
    margin:0 !important;
    font-size:0 !important;
    display:grid !important;
    place-items:center !important;
  }

  .app-shell.sidebar-collapsed #logoutBtn::before {
    content:'↪';
    font-size:16px !important;
    line-height:1 !important;
  }

  .app-shell.sidebar-collapsed .sidebar a:hover,
  .app-shell.sidebar-collapsed .sidebar button:hover {
    transform:none !important;
  }
}

@media (max-width:900px) {
  .sidebar {
    width:40vw !important;
    max-width:40vw !important;
    min-width:0 !important;
  }

  .sidebar .menu-link > span:last-child,
  .sidebar .nav-parent > span {
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
}


/* === REVISI 260615 - SIDEBAR RESPONSIVE 40%, FONT 10PX, BRAND TRANSPARAN, TOGGLE PANAH === */
@media (min-width:901px) {
  #sidebarToggle {
    font-size:0 !important;
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
  }

  #sidebarToggle::before {
    content:'\2039';
    font-size:24px !important;
    font-weight:600 !important;
    line-height:1 !important;
  }

  .app-shell.sidebar-collapsed #sidebarToggle::before {
    content:'\203A';
  }
}

@media (max-width:900px) {
  .sidebar {
    width:40vw !important;
    max-width:40vw !important;
    min-width:0 !important;
  }

  .sidebar .brand-panel {
    background:transparent !important;
    background-image:none !important;
  }

  .nav-menu > a,
  .nav-menu .submenu > a,
  .nav-menu > .nav-parent,
  .sidebar a,
  .sidebar button {
    font-size:10px !important;
  }

  #sidebarToggle {
    font-size:14px !important;
  }
}

/* === REVISI 260615 - IKON MENU TANPA KOTAK === */
.sidebar .nav-icon,
.nav-menu .nav-icon {
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#8b5cf6 !important;
}

.nav-menu a:hover .nav-icon,
.nav-parent:hover .nav-icon,
.nav-menu a.active .nav-icon,
.menu-link.active .nav-icon {
  color:#4c1d95 !important;
}
.sidebar .nav-icon svg,
.nav-menu .nav-icon svg {
  width:17px !important;
  height:17px !important;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* === REVISI 260615 - SIDEBAR TABLET/MOBILE AUTO-FIT, TEKS UTUH, PADDING COMPACT === */
@media (max-width:900px) {
  .sidebar {
    width:clamp(180px, 40vw, 280px) !important;
    max-width:min(86vw, 280px) !important;
    min-width:180px !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
  }

  .sidebar .brand-panel {
    min-height:auto !important;
    padding:8px 9px !important;
    gap:7px !important;
  }

  .sidebar .brand-mark {
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
  }

  .sidebar .brand,
  .sidebar .brand-subtitle {
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    line-height:1.15 !important;
  }

  .sidebar .nav-menu {
    padding:3px 6px 8px !important;
  }

  .sidebar .nav-section-label {
    margin:5px 4px 2px !important;
    padding:0 !important;
    line-height:1.1 !important;
  }

  .nav-menu > a,
  .nav-menu > .nav-parent,
  .nav-menu .submenu > a,
  .sidebar a,
  .sidebar button {
    min-height:24px !important;
    height:auto !important;
    padding:4px 6px !important;
    margin:0 !important;
    gap:6px !important;
    line-height:1.15 !important;
    align-items:center !important;
  }

  .sidebar .menu-link > span:last-child,
  .sidebar .nav-parent > span,
  .sidebar .nav-parent > span:not(.nav-icon) {
    min-width:0 !important;
    width:auto !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    line-height:1.15 !important;
  }

  .sidebar .nav-parent {
    justify-content:space-between !important;
  }

  .sidebar .nav-parent > span {
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    flex:1 1 auto !important;
  }

  .sidebar .nav-parent > b {
    flex:0 0 auto !important;
    margin-left:3px !important;
  }

  .sidebar .nav-icon,
  .sidebar .nav-icon svg {
    flex:0 0 auto !important;
  }

  .sidebar .submenu {
    margin-left:5px !important;
    padding-left:4px !important;
  }

  .sidebar > .sidebar-user {
    margin:4px 6px 7px !important;
    padding:5px 6px !important;
    gap:5px !important;
  }

  .sidebar > .sidebar-user #logoutBtn {
    min-height:24px !important;
    padding:4px 6px !important;
  }
}

@media (max-width:560px) {
  .sidebar {
    width:clamp(168px, 48vw, 220px) !important;
    max-width:86vw !important;
    min-width:168px !important;
  }

  .sidebar .brand-panel {
    padding:6px 7px !important;
  }

  .sidebar .nav-menu {
    padding:2px 5px 6px !important;
  }

  .nav-menu > a,
  .nav-menu > .nav-parent,
  .nav-menu .submenu > a,
  .sidebar a,
  .sidebar button {
    min-height:22px !important;
    padding:3px 5px !important;
    gap:5px !important;
    line-height:1.1 !important;
  }

  .sidebar .nav-section-label {
    margin-top:4px !important;
    margin-bottom:1px !important;
  }

  .sidebar .submenu {
    margin-left:3px !important;
    padding-left:3px !important;
  }
}

@media (max-width:900px) and (max-height:700px) {
  .sidebar .brand-panel {
    padding-top:5px !important;
    padding-bottom:5px !important;
  }

  .sidebar .nav-section-label {
    margin-top:3px !important;
  }

  .nav-menu > a,
  .nav-menu > .nav-parent,
  .nav-menu .submenu > a,
  .sidebar a,
  .sidebar button {
    min-height:20px !important;
    padding-top:2px !important;
    padding-bottom:2px !important;
  }

  .sidebar > .sidebar-user {
    margin-top:3px !important;
    margin-bottom:4px !important;
    padding-top:3px !important;
    padding-bottom:3px !important;
  }
}

/* === REVISI 260615 - SIDEBAR USER AUTO-FIT + BRAND PANEL TANPA BORDER === */
.brand-panel,
.sidebar .brand-panel {
  border:0 !important;
  border-top:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;
  box-shadow:none !important;
}

.sidebar {
  overflow:hidden !important;
}

.sidebar .nav-menu {
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin;
}

.sidebar > .sidebar-user {
  flex:0 0 auto !important;
  position:relative !important;
  z-index:4 !important;
  box-sizing:border-box !important;
  width:auto !important;
  max-width:calc(100% - 24px) !important;
  min-width:0 !important;
  flex-wrap:wrap !important;
  overflow:hidden !important;
  background:#f9fafb !important;
}

.sidebar > .sidebar-user #loginRole {
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.sidebar > .sidebar-user #logoutBtn {
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

@media (max-width:900px) {
  .sidebar {
    overflow:hidden !important;
  }

  .sidebar > .sidebar-user {
    max-width:calc(100% - 12px) !important;
    margin:3px 6px 6px !important;
    padding:4px 6px !important;
    gap:4px !important;
    min-height:28px !important;
  }

  .sidebar > .sidebar-user #loginRole,
  .sidebar > .sidebar-user #logoutBtn {
    font-size:10px !important;
    line-height:1.1 !important;
  }

  .sidebar > .sidebar-user #logoutBtn {
    min-height:20px !important;
    padding:2px 4px !important;
  }
}

@media (max-width:560px) {
  .sidebar > .sidebar-user {
    max-width:calc(100% - 10px) !important;
    margin:2px 5px 5px !important;
    padding:3px 5px !important;
  }
}

@media (max-width:900px) and (max-height:700px) {
  .sidebar > .sidebar-user {
    min-height:24px !important;
    margin-bottom:3px !important;
    padding-top:2px !important;
    padding-bottom:2px !important;
  }
}

/* === REVISI 260615 - FIX SIDEBAR USER MOBILE SELALU TERLIHAT === */
@media (max-width:900px) {
  .sidebar {
    display:flex !important;
    flex-direction:column !important;
    height:100svh !important;
    min-height:100svh !important;
    max-height:100svh !important;
    padding-bottom:env(safe-area-inset-bottom, 0px) !important;
    overflow:hidden !important;
  }

  .sidebar > .brand-panel {
    flex:0 0 auto !important;
  }

  .sidebar > .nav-menu {
    flex:1 1 0 !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-bottom:4px !important;
  }

  .sidebar > .sidebar-user {
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:sticky !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:30 !important;
    flex:0 0 auto !important;
    width:calc(100% - 12px) !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:30px !important;
    margin:3px 6px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    padding:4px 6px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    background:#ffffff !important;
  }

  .sidebar > .sidebar-user #loginRole {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    color:var(--sidebar-text) !important;
  }

  .sidebar > .sidebar-user #logoutBtn {
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    flex:0 0 auto !important;
  }
}

@supports not (height:100svh) {
  @media (max-width:900px) {
    .sidebar {
      height:100vh !important;
      min-height:100vh !important;
      max-height:100vh !important;
    }
  }
}

/* === REVISI 260615 - DASHBOARD MOBILE RINGKASAN UTAMA MODERN === */
.mobile-summary-panel {
  display:none;
}

@media (max-width:640px) {
  .dashboard-page {
    background:
      radial-gradient(circle at 100% 0, rgba(139,92,246,.08), transparent 34%),
      linear-gradient(180deg,#fafaff 0,#f8fafc 38%,#fff 100%);
  }

  .mobile-summary-panel {
    display:block;
    margin:0 0 14px;
    padding:12px;
    border:1px solid rgba(221,214,254,.78);
    border-radius:20px;
    background:rgba(255,255,255,.92);
    box-shadow:0 12px 32px rgba(76,29,149,.09);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    overflow:hidden;
    position:relative;
  }

  .mobile-summary-panel::before {
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    top:-74px;
    right:-48px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(167,139,250,.18),rgba(167,139,250,0) 70%);
    pointer-events:none;
  }

  .mobile-summary-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:11px;
    position:relative;
    z-index:1;
  }

  .mobile-summary-heading {
    display:flex;
    align-items:center;
    min-width:0;
    gap:9px;
  }

  .mobile-summary-heading-icon {
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#6d28d9;
    background:linear-gradient(145deg,#f3e8ff,#ede9fe);
    box-shadow:inset 0 0 0 1px rgba(167,139,250,.22);
  }

  .mobile-summary-heading-icon svg {
    width:17px;
    height:17px;
  }

  .mobile-summary-heading h2 {
    margin:0;
    color:#111827;
    font-size:14px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.01em;
  }

  .mobile-summary-heading p {
    margin:2px 0 0;
    color:#8a94a6;
    font-size:8.5px;
    font-weight:500;
    line-height:1.3;
  }

  .mobile-summary-live {
    display:inline-flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;
    padding:4px 7px;
    border:1px solid #bbf7d0;
    border-radius:999px;
    background:#f0fdf4;
    color:#15803d;
    font-size:8px;
    font-weight:600;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  .mobile-summary-live i {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 3px rgba(34,197,94,.12);
    animation:mobileSummaryPulse 1.8s ease-in-out infinite;
  }

  .mobile-summary-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    position:relative;
    z-index:1;
  }

  .mobile-summary-loading {
    grid-column:1/-1;
    padding:18px;
    border-radius:14px;
    background:#f8fafc;
    color:#6b7280;
    font-size:10px;
    text-align:center;
  }

  .mobile-summary-card {
    --summary-accent:#7c3aed;
    --summary-soft:#f5f3ff;
    --summary-border:#e9d5ff;
    min-width:0;
    min-height:108px;
    padding:10px;
    display:flex;
    flex-direction:column;
    border:1px solid var(--summary-border);
    border-radius:15px;
    background:linear-gradient(145deg,#fff 0,var(--summary-soft) 160%);
    box-shadow:0 5px 14px rgba(15,23,42,.055);
    position:relative;
    overflow:hidden;
  }

  .mobile-summary-card::after {
    content:"";
    position:absolute;
    width:44px;
    height:44px;
    right:-22px;
    bottom:-24px;
    border-radius:50%;
    background:var(--summary-accent);
    opacity:.07;
    pointer-events:none;
  }

  .mobile-summary-card-top {
    min-width:0;
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:9px;
  }

  .mobile-summary-icon {
    width:27px;
    height:27px;
    flex:0 0 27px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:var(--summary-accent);
    background:var(--summary-soft);
    box-shadow:inset 0 0 0 1px var(--summary-border);
  }

  .mobile-summary-icon svg {
    width:15px;
    height:15px;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .mobile-summary-label {
    min-width:0;
    color:#64748b;
    font-size:9px;
    font-weight:550;
    line-height:1.25;
    overflow-wrap:anywhere;
  }

  .mobile-summary-value {
    display:block;
    margin:auto 0 3px;
    color:#111827;
    font-size:18px;
    font-weight:700;
    line-height:1.08;
    letter-spacing:-.025em;
    font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere;
  }

  .mobile-summary-hint {
    display:block;
    min-height:20px;
    color:#94a3b8;
    font-size:8px;
    font-weight:500;
    line-height:1.28;
    overflow-wrap:anywhere;
  }

  .mobile-summary-card.tone-violet { --summary-accent:#7c3aed; --summary-soft:#f5f3ff; --summary-border:#e9d5ff; }
  .mobile-summary-card.tone-blue { --summary-accent:#2563eb; --summary-soft:#eff6ff; --summary-border:#dbeafe; }
  .mobile-summary-card.tone-emerald { --summary-accent:#059669; --summary-soft:#ecfdf5; --summary-border:#d1fae5; }
  .mobile-summary-card.tone-slate { --summary-accent:#475569; --summary-soft:#f8fafc; --summary-border:#e2e8f0; }
  .mobile-summary-card.tone-amber { --summary-accent:#d97706; --summary-soft:#fffbeb; --summary-border:#fef3c7; }
  .mobile-summary-card.tone-green { --summary-accent:#16a34a; --summary-soft:#f0fdf4; --summary-border:#dcfce7; }
  .mobile-summary-card.tone-indigo { --summary-accent:#4f46e5; --summary-soft:#eef2ff; --summary-border:#e0e7ff; }
  .mobile-summary-card.tone-cyan { --summary-accent:#0891b2; --summary-soft:#ecfeff; --summary-border:#cffafe; }
  .mobile-summary-card.tone-rose { --summary-accent:#e11d48; --summary-soft:#fff1f2; --summary-border:#ffe4e6; }
  .mobile-summary-card.tone-purple { --summary-accent:#9333ea; --summary-soft:#faf5ff; --summary-border:#f3e8ff; }

  @keyframes mobileSummaryPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:.55; transform:scale(.82); }
  }
}

@media (max-width:360px) {
  .mobile-summary-panel { padding:10px; border-radius:17px; }
  .mobile-summary-grid { gap:7px; }
  .mobile-summary-card { min-height:102px; padding:9px; border-radius:13px; }
  .mobile-summary-value { font-size:16px; }
  .mobile-summary-heading h2 { font-size:13px; }
}

@media (prefers-reduced-motion:reduce) {
  .mobile-summary-live i { animation:none; }
}

/* === REVISI 260615 - DASHBOARD RINGKASAN MODERN SEMUA DEVICE === */
.dashboard-page > .dashboard-section-title.dashboard-desktop-only,
.dashboard-page > #summaryGrid {
  display:none !important;
}

.dashboard-summary-modern {
  display:block !important;
  margin-bottom:13px;
}

.dashboard-summary-modern .mobile-summary-panel {
  display:block;
  margin:0;
  padding:13px;
  border:1px solid rgba(221,214,254,.78);
  border-radius:20px;
  background:rgba(255,255,255,.94);
  box-shadow:0 12px 32px rgba(76,29,149,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
  position:relative;
}

.dashboard-summary-modern .mobile-summary-panel::before {
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  top:-108px;
  right:-70px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,250,.18),rgba(167,139,250,0) 70%);
  pointer-events:none;
}

.dashboard-summary-modern .mobile-summary-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:11px;
  position:relative;
  z-index:1;
}

.dashboard-summary-modern .mobile-summary-heading {
  display:flex;
  align-items:center;
  min-width:0;
  gap:10px;
}

.dashboard-summary-modern .mobile-summary-heading-icon {
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#6d28d9;
  background:linear-gradient(145deg,#f3e8ff,#ede9fe);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.22);
}

.dashboard-summary-modern .mobile-summary-heading-icon svg {
  width:18px;
  height:18px;
}

.dashboard-summary-modern .mobile-summary-heading h2 {
  margin:0;
  color:#111827;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
}

.dashboard-summary-modern .mobile-summary-heading p {
  margin:3px 0 0;
  color:#8a94a6;
  font-size:10px;
  font-weight:500;
  line-height:1.3;
}

.dashboard-summary-modern .mobile-summary-live {
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  padding:5px 9px;
  border:1px solid #bbf7d0;
  border-radius:999px;
  background:#f0fdf4;
  color:#15803d;
  font-size:9px;
  font-weight:600;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.dashboard-summary-modern .mobile-summary-live i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.12);
  animation:dashboardSummaryPulse 1.8s ease-in-out infinite;
}

.dashboard-summary-modern .mobile-summary-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  position:relative;
  z-index:1;
}

.dashboard-summary-modern .mobile-summary-loading {
  grid-column:1/-1;
  padding:22px;
  border-radius:14px;
  background:#f8fafc;
  color:#6b7280;
  font-size:11px;
  text-align:center;
}

.dashboard-summary-modern .mobile-summary-card {
  --summary-accent:#7c3aed;
  --summary-soft:#f5f3ff;
  --summary-border:#e9d5ff;
  min-width:0;
  min-height:96px;
  padding:10px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--summary-border);
  border-radius:16px;
  background:linear-gradient(145deg,#fff 0,var(--summary-soft) 160%);
  box-shadow:0 5px 14px rgba(15,23,42,.055);
  position:relative;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

@media (hover:hover) {
  .dashboard-summary-modern .mobile-summary-card:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(15,23,42,.085);
  }
}

.dashboard-summary-modern .mobile-summary-card::after {
  content:"";
  position:absolute;
  width:54px;
  height:54px;
  right:-27px;
  bottom:-30px;
  border-radius:50%;
  background:var(--summary-accent);
  opacity:.07;
  pointer-events:none;
}

.dashboard-summary-modern .mobile-summary-card-top {
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
}

.dashboard-summary-modern .mobile-summary-icon {
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:var(--summary-accent);
  background:var(--summary-soft);
  box-shadow:inset 0 0 0 1px var(--summary-border);
}

.dashboard-summary-modern .mobile-summary-icon svg {
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dashboard-summary-modern .mobile-summary-label {
  min-width:0;
  color:#64748b;
  font-size:9px;
  font-weight:550;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.dashboard-summary-modern .mobile-summary-value {
  display:block;
  margin:auto 0 4px;
  color:#111827;
  font-size:20px;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

.dashboard-summary-modern .mobile-summary-hint {
  display:block;
  min-height:18px;
  color:#94a3b8;
  font-size:8px;
  font-weight:500;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.dashboard-summary-modern .mobile-summary-card.tone-violet { --summary-accent:#7c3aed; --summary-soft:#f5f3ff; --summary-border:#e9d5ff; }
.dashboard-summary-modern .mobile-summary-card.tone-blue { --summary-accent:#2563eb; --summary-soft:#eff6ff; --summary-border:#dbeafe; }
.dashboard-summary-modern .mobile-summary-card.tone-emerald { --summary-accent:#059669; --summary-soft:#ecfdf5; --summary-border:#d1fae5; }
.dashboard-summary-modern .mobile-summary-card.tone-slate { --summary-accent:#475569; --summary-soft:#f8fafc; --summary-border:#e2e8f0; }
.dashboard-summary-modern .mobile-summary-card.tone-amber { --summary-accent:#d97706; --summary-soft:#fffbeb; --summary-border:#fef3c7; }
.dashboard-summary-modern .mobile-summary-card.tone-green { --summary-accent:#16a34a; --summary-soft:#f0fdf4; --summary-border:#dcfce7; }
.dashboard-summary-modern .mobile-summary-card.tone-indigo { --summary-accent:#4f46e5; --summary-soft:#eef2ff; --summary-border:#e0e7ff; }
.dashboard-summary-modern .mobile-summary-card.tone-cyan { --summary-accent:#0891b2; --summary-soft:#ecfeff; --summary-border:#cffafe; }
.dashboard-summary-modern .mobile-summary-card.tone-rose { --summary-accent:#e11d48; --summary-soft:#fff1f2; --summary-border:#ffe4e6; }
.dashboard-summary-modern .mobile-summary-card.tone-purple { --summary-accent:#9333ea; --summary-soft:#faf5ff; --summary-border:#f3e8ff; }

@keyframes dashboardSummaryPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.55; transform:scale(.82); }
}

@media (min-width:641px) and (max-width:1024px) {
  .dashboard-summary-modern {
    margin-bottom:11px;
  }

  .dashboard-summary-modern .mobile-summary-panel {
    padding:11px;
    border-radius:17px;
  }

  .dashboard-summary-modern .mobile-summary-head {
    margin-bottom:9px;
  }

  .dashboard-summary-modern .mobile-summary-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
  }

  .dashboard-summary-modern .mobile-summary-card {
    min-height:90px;
    padding:9px;
    border-radius:14px;
  }

  .dashboard-summary-modern .mobile-summary-card-top {
    gap:6px;
    margin-bottom:7px;
  }

  .dashboard-summary-modern .mobile-summary-icon {
    width:24px;
    height:24px;
    flex-basis:24px;
    border-radius:8px;
  }

  .dashboard-summary-modern .mobile-summary-icon svg {
    width:13px;
    height:13px;
  }

  .dashboard-summary-modern .mobile-summary-heading h2 { font-size:13px; }
  .dashboard-summary-modern .mobile-summary-value { font-size:18px; }
  .dashboard-summary-modern .mobile-summary-label { font-size:8.5px; }
  .dashboard-summary-modern .mobile-summary-hint {
    min-height:16px;
    font-size:7.5px;
    line-height:1.2;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

@media (max-width:640px) {
  .dashboard-summary-modern {
    margin-bottom:10px;
  }

  .dashboard-summary-modern .mobile-summary-panel {
    padding:9px;
    border-radius:16px;
  }

  .dashboard-summary-modern .mobile-summary-head {
    margin-bottom:8px;
    gap:7px;
  }

  .dashboard-summary-modern .mobile-summary-heading {
    gap:7px;
  }

  .dashboard-summary-modern .mobile-summary-heading-icon {
    width:28px;
    height:28px;
    flex-basis:28px;
    border-radius:9px;
  }

  .dashboard-summary-modern .mobile-summary-heading-icon svg {
    width:15px;
    height:15px;
  }

  .dashboard-summary-modern .mobile-summary-heading h2 { font-size:11px; }
  .dashboard-summary-modern .mobile-summary-heading p { font-size:7.5px; }
  .dashboard-summary-modern .mobile-summary-live { padding:3px 6px; font-size:7px; gap:4px; }
  .dashboard-summary-modern .mobile-summary-live i { width:5px; height:5px; }

  .dashboard-summary-modern .mobile-summary-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }

  .dashboard-summary-modern .mobile-summary-card {
    min-height:86px;
    padding:7px;
    border-radius:12px;
  }

  .dashboard-summary-modern .mobile-summary-card-top {
    gap:5px;
    margin-bottom:6px;
  }

  .dashboard-summary-modern .mobile-summary-icon {
    width:22px;
    height:22px;
    flex-basis:22px;
    border-radius:7px;
  }

  .dashboard-summary-modern .mobile-summary-icon svg {
    width:12px;
    height:12px;
  }

  .dashboard-summary-modern .mobile-summary-label {
    font-size:7.5px;
    line-height:1.15;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .dashboard-summary-modern .mobile-summary-value {
    margin:auto 0 2px;
    font-size:14px;
    line-height:1.05;
    letter-spacing:-.02em;
  }

  .dashboard-summary-modern .mobile-summary-hint {
    min-height:15px;
    font-size:6.75px;
    line-height:1.15;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

@media (max-width:360px) {
  .dashboard-summary-modern .mobile-summary-panel { padding:8px; border-radius:14px; }
  .dashboard-summary-modern .mobile-summary-grid { gap:5px; }
  .dashboard-summary-modern .mobile-summary-card { min-height:82px; padding:6px; border-radius:11px; }
  .dashboard-summary-modern .mobile-summary-value { font-size:13px; }
  .dashboard-summary-modern .mobile-summary-label { font-size:7px; }
  .dashboard-summary-modern .mobile-summary-hint { font-size:6.5px; }
}

@media (prefers-reduced-motion:reduce) {
  .dashboard-summary-modern .mobile-summary-live i { animation:none; }
  .dashboard-summary-modern .mobile-summary-card { transition:none; }
}


/* === REVISI 260615 - TOOLTIP NAMA MENU SAAT SIDEBAR MODE IKON === */
.sidebar-menu-tooltip {
  position:fixed;
  z-index:9999;
  max-width:220px;
  padding:7px 10px;
  border:1px solid rgba(17,24,39,.08);
  border-radius:8px;
  background:rgba(17,24,39,.96);
  color:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.20);
  font-size:11px;
  font-weight:550;
  line-height:1.2;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateX(-4px);
  transition:opacity .12s ease, transform .12s ease, visibility .12s ease;
}

.sidebar-menu-tooltip.is-visible {
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}

.sidebar-menu-tooltip::before {
  content:'';
  position:absolute;
  top:50%;
  left:-5px;
  width:9px;
  height:9px;
  background:rgba(17,24,39,.96);
  transform:translateY(-50%) rotate(45deg);
  border-left:1px solid rgba(17,24,39,.08);
  border-bottom:1px solid rgba(17,24,39,.08);
}

@media (max-width:900px) {
  .sidebar-menu-tooltip { display:none !important; }
}

/* === REVISI 260615 - KONTAK PENYEWA: PILIH KONTRAK, STATUS & MULTI BUKTI === */
.contract-selection-bar[hidden] { display:none !important; }
.contract-selection-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:12px 0 10px;
  padding:11px 12px;
  border:1px solid #c7d7fe;
  border-radius:12px;
  background:#f5f8ff;
}
.contract-selection-bar > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.contract-selection-bar strong { color:#1d2939; font-size:13px; }
.contract-selection-bar span { color:#667085; font-size:11px; line-height:1.35; }

.checkio-history-table:not(.selection-active) th:first-child,
.checkio-history-table:not(.selection-active) td:first-child { display:none; }
.checkio-history-table.selection-active th:first-child,
.checkio-history-table.selection-active td:first-child {
  width:54px;
  min-width:54px;
  text-align:center;
  vertical-align:middle;
}
.checkio-history-table.selection-active tbody tr:has([data-contract-row-choice]:not(:disabled)):hover {
  background:#f8faff;
}
.contract-row-choice {
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  margin:auto;
  cursor:pointer;
}
.contract-row-choice input { position:absolute; opacity:0; pointer-events:none; }
.contract-row-choice span {
  width:18px;
  height:18px;
  border:1.5px solid #98a2b3;
  border-radius:5px;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.contract-row-choice input:checked + span {
  border-color:#6d28d9;
  background:#6d28d9;
  box-shadow:inset 0 0 0 4px #fff;
}
.contract-row-choice input:focus-visible + span { outline:3px solid rgba(109,40,217,.18); outline-offset:2px; }
.contract-row-choice.is-disabled { cursor:not-allowed; opacity:.35; }

.contract-payment-cell {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  min-width:148px;
}
.contract-payment-cell .payment-amount {
  color:#101828;
  font-size:12px;
  line-height:1.25;
  white-space:nowrap;
}
.payment-status-select {
  width:100%;
  min-width:126px;
  min-height:30px;
  padding:5px 27px 5px 8px;
  border-radius:8px;
  font-size:11px;
  font-weight:550;
}
.payment-proof-actions {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.payment-proof-upload {
  min-height:28px !important;
  padding:5px 8px !important;
  font-size:10px !important;
  cursor:pointer;
}
.payment-proof-input {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  overflow:hidden !important;
  pointer-events:none;
}
.payment-proof-actions > span,
.payment-proof-empty {
  color:#667085;
  font-size:10px;
  line-height:1.25;
}
.payment-proof-links {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.payment-proof-links a {
  display:inline-flex;
  align-items:center;
  padding:3px 6px;
  border:1px solid #d0d5dd;
  border-radius:999px;
  background:#fff;
  color:#344054;
  font-size:9.5px;
  font-weight:550;
  text-decoration:none;
}
.payment-proof-links a:hover { border-color:#a78bfa; color:#5b21b6; background:#faf5ff; }

@media (max-width:720px) {
  .contract-selection-bar { align-items:stretch; flex-direction:column; }
  .contract-selection-bar .btn { width:100%; justify-content:center; }
  .contract-payment-cell { min-width:138px; }
}

/* Revisi 15-06-2026: keterangan status IPL Virtual ACC */
.payment-status-note{display:block;margin-top:4px;font-size:11px;line-height:1.35;color:var(--muted,#64748b);max-width:190px}

/* === REVISI 260615 - POPUP FORM CHECK IN/CHECK OUT === */
body.contract-form-open {
  overflow:hidden;
}
.contract-form-modal[hidden] {
  display:none !important;
}
.contract-form-modal {
  position:fixed;
  inset:0;
  z-index:1700;
  display:grid;
  place-items:center;
  padding:18px;
}
.contract-form-backdrop {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:rgba(15,23,42,.58);
  cursor:pointer;
}
.contract-form-dialog {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  width:min(900px, 94vw);
  max-height:90vh;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#fff;
  box-shadow:0 28px 80px rgba(15,23,42,.30);
}
.contract-form-header {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border-bottom:1px solid #e5e7eb;
}
.contract-form-header h2 {
  margin:0;
  font-size:19px;
}
.contract-form-x {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid #d0d5dd;
  border-radius:10px;
  background:#fff;
  color:#344054;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.contract-form-scroll {
  min-height:0;
  overflow:auto;
  padding:18px;
}
.contract-form-scroll .form-actions {
  position:sticky;
  bottom:-18px;
  margin:18px -18px -18px;
  padding:14px 18px;
  border-top:1px solid #e5e7eb;
  background:#fff;
}
.contract-document-total-row {
  background:#f8fafc;
}
.contract-document-total-row strong {
  color:#6d28d9;
  font-size:16px;
}
@media (max-width:700px) {
  .contract-form-modal {
    align-items:end;
    padding:8px;
  }
  .contract-form-dialog {
    width:100%;
    max-height:94vh;
    border-radius:18px 18px 0 0;
  }
  .contract-form-scroll {
    padding:14px;
  }
  .contract-form-scroll .form-actions {
    bottom:-14px;
    margin:14px -14px -14px;
    padding:12px 14px;
  }
}

/* === REVISI KONTRAK PENYEWA: DROPDOWN AKSI PADA KOLOM TIPE === */
.checkio-history-table:not(.selection-active) th:first-child,
.checkio-history-table:not(.selection-active) td:first-child {
  display:table-cell !important;
}
.contract-type-action {
  min-width:132px;
}
.contract-type-action select {
  width:100%;
  min-width:132px;
  height:34px;
  padding:5px 30px 5px 10px;
  border:1px solid #d0d5dd;
  border-radius:9px;
  background-color:#fff;
  color:#344054;
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.contract-type-action select:hover,
.contract-type-action select:focus {
  border-color:#7c3aed;
  outline:none;
  box-shadow:0 0 0 3px rgba(124,58,237,.12);
}


/* === REVISI 260615: INV ROMAWI, TEKS PENYEWA/UNIT UTUH, DROPDOWN -25% === */
.checkio-history-table th:nth-child(2),
.checkio-history-table td:nth-child(2) {
  min-width:180px;
  width:auto;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.checkio-history-table th:nth-child(3),
.checkio-history-table td:nth-child(3) {
  min-width:150px;
  width:auto;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.checkio-history-table td:nth-child(2) .cell-main,
.checkio-history-table td:nth-child(2) .cell-sub,
.checkio-history-table td:nth-child(3) .cell-main,
.checkio-history-table td:nth-child(3) .cell-sub {
  max-width:none !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere;
}
.contract-type-action {
  min-width:99px;
  width:99px;
}
.contract-type-action select {
  width:99px;
  min-width:99px;
  max-width:99px;
  padding-right:24px;
}

/* === FINAL 260615: INVOICE KONTRAK RELASIONAL & UI MODERN === */
.invoice-document-dialog {
  width:min(960px, 100%) !important;
  max-height:calc(100vh - 28px) !important;
  padding:0 !important;
  overflow:auto !important;
  border:1px solid rgba(255,255,255,.55);
  border-radius:22px !important;
  background:#f4f6fa !important;
}
.invoice-modal-header {
  position:sticky;
  top:0;
  z-index:6;
  margin:0 !important;
  padding:16px 18px;
  border-bottom:1px solid #e4e7ec;
  background:rgba(255,255,255,.96);
}
.invoice-modal-heading { display:flex; align-items:center; gap:11px; min-width:0; }
.invoice-modal-heading h2 { margin:0 0 3px !important; color:#1d2939; }
.invoice-modal-heading .muted { font-size:11px; line-height:1.4; }
.invoice-modal-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:12px;
  background:linear-gradient(145deg,#6d28d9,#8b5cf6);
  box-shadow:0 7px 18px rgba(109,40,217,.22);
}
.invoice-modal-icon svg { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.contract-document-x {
  width:34px;
  height:34px;
  flex:0 0 34px;
  border:1px solid #e4e7ec;
  border-radius:10px;
  background:#fff;
  color:#667085;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:.18s ease;
}
.contract-document-x:hover { color:#6d28d9; border-color:#c4b5fd; background:#faf8ff; transform:translateY(-1px); }
.invoice-contract-picker { padding:14px 18px 0; }
.invoice-contract-picker .form-field { margin:0; }
.invoice-contract-picker select {
  min-height:42px;
  border-radius:11px;
  border-color:#d0d5dd;
  background:#fff;
  font-weight:600;
}
.invoice-paper {
  position:relative;
  margin:14px 18px 18px;
  padding:24px;
  overflow:hidden;
  border:1px solid #e4e7ec;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 34px rgba(16,24,40,.08);
}
.invoice-paper::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,#5b21b6,#7c3aed,#a78bfa);
}
.invoice-paper-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding:4px 0 18px; border-bottom:1px solid #e4e7ec; }
.invoice-brand { display:flex; align-items:center; gap:11px; }
.invoice-brand-mark {
  display:grid;
  place-items:center;
  width:43px;
  height:43px;
  border-radius:13px;
  background:#6d28d9;
  color:#fff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 8px 18px rgba(109,40,217,.2);
}
.invoice-brand div { display:flex; flex-direction:column; gap:2px; }
.invoice-brand strong { color:#25123f; font-size:18px; line-height:1.15; }
.invoice-brand span { color:#667085; font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
.invoice-title-block { text-align:right; }
.invoice-eyebrow { display:block; color:#7c3aed; font-size:9px; font-weight:800; letter-spacing:.16em; }
.invoice-title-block h3 { margin:5px 0 7px !important; color:#101828; font-size:22px !important; line-height:1.1 !important; letter-spacing:.035em; }
.invoice-status-badge,
.invoice-item-status {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  border:1px solid transparent;
  border-radius:999px;
  font-weight:700;
  white-space:nowrap;
}
.invoice-status-badge { padding:5px 9px; font-size:9.5px; letter-spacing:.03em; text-transform:uppercase; }
.invoice-item-status { padding:4px 7px; font-size:9px; }
.invoice-status-badge.is-paid,.invoice-item-status.is-paid { color:#027a48; background:#ecfdf3; border-color:#abefc6; }
.invoice-status-badge.is-pending,.invoice-item-status.is-pending { color:#b54708; background:#fffaeb; border-color:#fedf89; }
.invoice-status-badge.is-unpaid,.invoice-item-status.is-unpaid { color:#b42318; background:#fef3f2; border-color:#fecdca; }
.invoice-status-badge.is-neutral,.invoice-item-status.is-neutral { color:#344054; background:#f2f4f7; border-color:#d0d5dd; }
.invoice-meta-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
.invoice-meta-item { min-width:0; padding:11px 13px; border:1px solid #e4e7ec; border-radius:11px; background:#fcfcfd; }
.invoice-meta-item span { display:block; color:#667085; font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.invoice-meta-item strong { display:block; margin-top:5px; color:#1d2939; font-size:11.5px; overflow-wrap:anywhere; }
.invoice-party-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.invoice-party-card { min-width:0; padding:14px; border:1px solid #ece9fe; border-radius:12px; background:#faf9ff; }
.invoice-section-label { display:block; color:#7c3aed !important; font-size:9px !important; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.invoice-party-card strong { display:block; margin-top:7px; color:#1d2939; font-size:13px; line-height:1.35; }
.invoice-party-card > span:not(.invoice-section-label) { display:block; margin-top:4px; color:#475467; font-size:10.5px; line-height:1.45; }
.invoice-party-card small { display:block; margin-top:3px; color:#667085; font-size:9.5px; }
.invoice-lines-section { margin-top:18px; }
.invoice-lines-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:8px; }
.invoice-lines-heading > span { color:#1d2939; font-size:12px; font-weight:750; }
.invoice-lines-heading small { color:#667085; font-size:9.5px; text-align:right; }
.invoice-lines-wrap { overflow-x:auto; border:1px solid #e4e7ec; border-radius:12px; }
.invoice-lines-table { width:100%; min-width:560px; border-collapse:collapse; background:#fff; }
.invoice-lines-table th { padding:9px 11px; border:0; background:#f9fafb; color:#667085; font-size:8.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; text-align:left; }
.invoice-lines-table th:last-child,.invoice-lines-table td:last-child { text-align:right; }
.invoice-lines-table td { padding:11px; border-top:1px solid #eef2f6; color:#344054; font-size:10.5px; vertical-align:middle; }
.invoice-lines-table td:first-child strong { display:block; color:#1d2939; font-size:10.5px; }
.invoice-lines-table td:first-child span { display:block; margin-top:3px; color:#667085; font-size:9px; }
.invoice-lines-table td:last-child { color:#1d2939; font-weight:750; white-space:nowrap; }
.invoice-total-panel { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-top:12px; padding:15px 17px; border-radius:13px; background:linear-gradient(135deg,#2e1065,#6d28d9); color:#fff; box-shadow:0 10px 25px rgba(76,29,149,.16); }
.invoice-total-panel span { display:block; font-size:11px; font-weight:750; }
.invoice-total-panel small { display:block; margin-top:3px; color:#ddd6fe; font-size:8.5px; }
.invoice-total-panel strong { font-size:20px; line-height:1.2; white-space:nowrap; }
.invoice-paper-footer { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-top:16px; padding-top:12px; border-top:1px solid #e4e7ec; }
.invoice-paper-footer > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.invoice-paper-footer strong { color:#344054; font-size:9.5px; }
.invoice-paper-footer span { color:#667085; font-size:8.5px; line-height:1.45; }
.invoice-relation-chip { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:#f2f4f7; color:#475467 !important; font-weight:700; white-space:nowrap; }
.invoice-modal-actions { position:sticky; bottom:0; z-index:6; margin:0 !important; padding:13px 18px; border-top:1px solid #e4e7ec; background:rgba(255,255,255,.97); backdrop-filter:blur(8px); }
.invoice-print-button { min-width:132px; box-shadow:0 7px 16px rgba(109,40,217,.18); }

/* Dropdown tipe/aksi dibuat lebih jelas dan tidak kaku. */
.checkio-history-table th:first-child,
.checkio-history-table td:first-child { min-width:158px !important; width:158px !important; }
.contract-type-action {
  position:relative;
  display:flex;
  align-items:center;
  width:148px !important;
  min-width:148px !important;
  max-width:148px !important;
}
.contract-type-action::after {
  content:"";
  position:absolute;
  right:11px;
  width:6px;
  height:6px;
  border-right:1.7px solid #667085;
  border-bottom:1.7px solid #667085;
  transform:translateY(-2px) rotate(45deg);
  pointer-events:none;
}
.contract-type-dot {
  position:absolute;
  left:10px;
  z-index:1;
  width:7px;
  height:7px;
  border-radius:50%;
  pointer-events:none;
}
.contract-type-action.is-checkin .contract-type-dot { background:#12b76a; box-shadow:0 0 0 3px #d1fadf; }
.contract-type-action.is-checkout .contract-type-dot { background:#f79009; box-shadow:0 0 0 3px #fef0c7; }
.contract-type-action select {
  appearance:none;
  -webkit-appearance:none;
  width:148px !important;
  min-width:148px !important;
  max-width:148px !important;
  height:36px !important;
  padding:6px 27px 6px 25px !important;
  border:1px solid #e0e4eb !important;
  border-radius:11px !important;
  background:linear-gradient(180deg,#fff,#f9fafb) !important;
  color:#344054 !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  box-shadow:0 2px 5px rgba(16,24,40,.04);
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.contract-type-action select:hover { border-color:#c4b5fd !important; box-shadow:0 5px 13px rgba(109,40,217,.09) !important; transform:translateY(-1px); }
.contract-type-action select:focus { border-color:#8b5cf6 !important; box-shadow:0 0 0 3px rgba(139,92,246,.14) !important; outline:none; }

@media (max-width:700px) {
  .invoice-document-dialog { max-height:94vh !important; border-radius:18px 18px 0 0 !important; }
  .invoice-paper { margin:10px 10px 14px; padding:17px 14px; border-radius:14px; }
  .invoice-modal-header { padding:13px 14px; }
  .invoice-contract-picker { padding:12px 10px 0; }
  .invoice-paper-header { gap:12px; }
  .invoice-brand-mark { width:37px; height:37px; font-size:13px; }
  .invoice-brand strong { font-size:15px; }
  .invoice-brand span { font-size:8px; }
  .invoice-title-block h3 { font-size:17px !important; }
  .invoice-meta-grid { grid-template-columns:1fr; gap:7px; }
  .invoice-party-grid { grid-template-columns:1fr; }
  .invoice-lines-heading { align-items:flex-start; flex-direction:column; gap:3px; }
  .invoice-lines-heading small { text-align:left; }
  .invoice-total-panel { align-items:flex-start; flex-direction:column; gap:8px; }
  .invoice-total-panel strong { font-size:18px; }
  .invoice-paper-footer { align-items:flex-start; flex-direction:column; }
  .invoice-modal-actions { padding:11px 10px; }
  .invoice-modal-actions .btn { flex:1; justify-content:center; }
}

/* === MASTER SURAT SEWA - SETTING V27 === */
.lease-master-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.lease-master-toolbar h2 { margin:0; }
.lease-master-toolbar p { margin:5px 0 0; }
.lease-master-actions { display:flex; flex-wrap:wrap; gap:9px; justify-content:flex-end; }
.lease-master-grid {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 280px;
  gap:16px;
  align-items:start;
}
.lease-master-editor { min-width:0; }
.lease-master-side { position:sticky; top:12px; }
.lease-master-side h3 { margin:0 0 10px; }
.lease-master-state {
  padding:11px 12px;
  border:1px solid #d0d5dd;
  border-radius:10px;
  background:#f8fafc;
  color:#475467;
  font-size:13px;
  line-height:1.45;
}
.lease-master-state.ok { background:#ecfdf3; border-color:#abefc6; color:#027a48; }
.lease-master-state.error { background:#fff1f2; border-color:#fecdd3; color:#be123c; }
.lease-master-state.pending { background:#fffbeb; border-color:#fde68a; color:#b45309; }
.lease-master-help { margin-bottom:14px; }
.lease-master-help > strong { display:block; margin-bottom:9px; }
.lease-variable-list { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:9px; }
.lease-variable-chip {
  border:1px solid #c4b5fd;
  background:#faf5ff;
  color:#6d28d9;
  border-radius:999px;
  padding:6px 9px;
  font:600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor:pointer;
}
.lease-variable-chip:hover { background:#f3e8ff; border-color:#a78bfa; }
.lease-master-section { margin-bottom:12px; padding:0; overflow:hidden; }
.lease-master-section > summary {
  cursor:pointer;
  list-style:none;
  padding:14px 16px;
  font-weight:700;
  color:#1f2937;
  background:#f8fafc;
  border-bottom:1px solid transparent;
}
.lease-master-section > summary::-webkit-details-marker { display:none; }
.lease-master-section > summary::after { content:'+'; float:right; font-size:18px; line-height:1; color:#667085; }
.lease-master-section[open] > summary { border-bottom-color:#e5e7eb; }
.lease-master-section[open] > summary::after { content:'−'; }
.lease-master-form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:15px 16px 17px;
}
.lease-master-form-grid .form-field.full { grid-column:1 / -1; }
.lease-master-form-grid textarea {
  min-height:82px;
  resize:vertical;
  line-height:1.5;
  font-family:inherit;
}
.lease-article-editors { display:block; }
.lease-article-section textarea { min-height:150px; }
@media (max-width:1050px) {
  .lease-master-grid { grid-template-columns:1fr; }
  .lease-master-side { position:static; }
}
@media (max-width:720px) {
  .lease-master-toolbar { align-items:stretch; flex-direction:column; }
  .lease-master-actions { justify-content:stretch; }
  .lease-master-actions .btn { flex:1 1 100%; }
  .lease-master-form-grid { grid-template-columns:1fr; }
  .lease-master-form-grid .form-field.full { grid-column:auto; }
}

/* === MASTER SURAT SEWA - TYPOGRAPHY V28 === */
.lease-typography-wrap {
  padding:15px 16px 8px;
  overflow-x:auto;
}
.lease-typography-head,
.lease-typography-row {
  display:grid;
  grid-template-columns:minmax(185px,1.35fr) 105px minmax(150px,1fr) minmax(130px,.85fr);
  gap:10px;
  align-items:center;
  min-width:650px;
}
.lease-typography-head {
  padding:0 0 8px;
  color:#667085;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.lease-typography-row {
  padding:9px 0;
  border-top:1px solid #eef2f6;
}
.lease-typography-row strong {
  color:#344054;
  font-size:12px;
  font-weight:650;
}
.lease-typography-row input,
.lease-typography-row select {
  width:100%;
  min-height:39px;
  border:1px solid #d0d5dd;
  border-radius:9px;
  background:#fff;
  color:#101828;
  padding:8px 10px;
  font:inherit;
}
.lease-typography-row input:focus,
.lease-typography-row select:focus {
  outline:none;
  border-color:#8b5cf6;
  box-shadow:0 0 0 3px rgba(139,92,246,.12);
}
.lease-typography-note {
  margin:0 16px 15px;
  padding:10px 12px;
  border:1px solid #dbeafe;
  border-radius:9px;
  background:#eff6ff;
  color:#1e40af;
  font-size:12px;
  line-height:1.45;
}
@media (max-width:720px) {
  .lease-typography-wrap { padding:12px 13px 7px; }
  .lease-typography-note { margin:0 13px 13px; }
}


/* === MASTER SURAT SEWA PENYEWA - FULL WIDTH & PADDING V30 === */
.lease-template-panel {
  width:100%;
  min-height:calc(100vh - 210px);
  box-sizing:border-box;
  padding:24px;
  border:1px solid #e4e7ec;
  border-radius:20px;
  background:linear-gradient(180deg,#f8fafc 0%,#f4f6fa 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.lease-template-panel .lease-master-toolbar {
  width:100%;
  box-sizing:border-box;
  padding:22px 24px;
  margin-bottom:16px;
}
.lease-template-panel .lease-master-grid {
  display:flex;
  flex-direction:column;
  width:100%;
  gap:16px;
  align-items:stretch;
}
.lease-template-panel .lease-master-editor {
  order:2;
  width:100%;
  min-width:0;
}
.lease-template-panel .lease-master-side {
  order:1;
  position:static;
  display:grid;
  grid-template-columns:auto minmax(240px,1fr) minmax(320px,1.25fr);
  align-items:center;
  width:100%;
  box-sizing:border-box;
  gap:14px;
  padding:16px 18px;
  margin:0;
}
.lease-template-panel .lease-master-side h3 {
  margin:0;
  white-space:nowrap;
}
.lease-template-panel .lease-master-side .settings-note {
  margin:0;
}
.lease-template-panel .lease-master-help,
.lease-template-panel .lease-master-section {
  width:100%;
  box-sizing:border-box;
}
.lease-template-panel .lease-master-help {
  padding:20px 22px;
}
.lease-template-panel .lease-master-section > summary {
  padding:16px 18px;
}
.lease-template-panel .lease-master-form-grid {
  padding:18px;
  gap:14px;
}
.lease-template-panel .lease-typography-wrap {
  padding:18px 18px 10px;
}
.lease-template-panel .lease-typography-note {
  margin:0 18px 18px;
}
@media (max-width:980px) {
  .lease-template-panel .lease-master-side {
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .lease-template-panel .lease-master-side h3 { white-space:normal; }
}
@media (max-width:720px) {
  .lease-template-panel {
    min-height:auto;
    padding:12px;
    border-radius:16px;
  }
  .lease-template-panel .lease-master-toolbar {
    padding:17px 16px;
  }
  .lease-template-panel .lease-master-side {
    padding:15px;
  }
  .lease-template-panel .lease-master-help {
    padding:16px;
  }
  .lease-template-panel .lease-master-form-grid,
  .lease-template-panel .lease-typography-wrap {
    padding:15px;
  }
}

/* === MASTER SURAT SEWA PENYEWA - LIVE EDITOR & PREVIEW V31 === */
.lease-template-panel .lease-master-workspace {
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(460px, .92fr);
  gap:18px;
  width:100%;
  min-width:0;
  align-items:start;
}
.lease-template-panel .lease-master-workspace > * { min-width:0; }
.lease-live-preview {
  position:sticky;
  top:12px;
  padding:0;
  overflow:hidden;
  border-color:#d8dee8;
  box-shadow:0 14px 35px rgba(15,23,42,.10);
}
.lease-live-preview-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:70px;
  padding:14px 16px;
  background:#fff;
  border-bottom:1px solid #e4e7ec;
}
.lease-live-preview-title {
  display:flex;
  align-items:center;
  gap:8px;
  color:#101828;
  font-size:14px;
  font-weight:750;
}
.lease-live-preview-head small {
  display:block;
  margin-top:5px;
  color:#667085;
  font-size:11px;
  line-height:1.35;
}
.lease-live-dot {
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:50%;
  background:#12b76a;
  box-shadow:0 0 0 4px rgba(18,183,106,.12);
}
.lease-live-preview-controls {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.lease-live-preview-controls label {
  color:#667085;
  font-size:11px;
  font-weight:700;
}
.lease-live-preview-controls select {
  min-height:34px;
  border:1px solid #d0d5dd;
  border-radius:8px;
  background:#fff;
  color:#344054;
  padding:6px 26px 6px 9px;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  line-height:1;
}
.lease-live-preview-stage {
  position:relative;
  height:calc(100vh - 260px);
  min-height:690px;
  max-height:920px;
  overflow:hidden;
  background:linear-gradient(135deg,#e8ecf2 0%,#f2f4f7 100%);
}
.lease-live-preview-stage iframe {
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#eceff3;
  opacity:1;
  transition:opacity .16s ease;
}
.lease-live-preview-stage.is-loading iframe { opacity:.45; }
.lease-live-preview-loading {
  position:absolute;
  z-index:2;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  display:none;
  min-width:180px;
  padding:9px 12px;
  border:1px solid #d0d5dd;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 22px rgba(15,23,42,.12);
  color:#475467;
  text-align:center;
  font-size:11px;
  font-weight:700;
}
.lease-live-preview-stage.is-loading .lease-live-preview-loading { display:block; }
.lease-live-preview-foot {
  padding:11px 15px;
  border-top:1px solid #e4e7ec;
  background:#fff;
  color:#667085;
  font-size:11px;
  line-height:1.45;
}
.lease-live-preview-foot strong { color:#344054; }

@media (max-width:1180px) {
  .lease-template-panel .lease-master-workspace {
    grid-template-columns:minmax(0,1fr) minmax(400px,.82fr);
    gap:14px;
  }
  .lease-template-panel .lease-master-workspace .lease-master-form-grid {
    grid-template-columns:1fr;
  }
  .lease-template-panel .lease-master-workspace .lease-master-form-grid .form-field.full {
    grid-column:auto;
  }
  .lease-live-preview-stage {
    min-height:640px;
  }
}
@media (max-width:880px) {
  .lease-template-panel .lease-master-workspace { grid-template-columns:1fr; }
  .lease-live-preview {
    position:relative;
    top:auto;
    order:-1;
  }
  .lease-live-preview-stage {
    height:min(76vh,760px);
    min-height:560px;
  }
}
@media (max-width:620px) {
  .lease-live-preview-head {
    align-items:flex-start;
    flex-direction:column;
    padding:13px;
  }
  .lease-live-preview-controls {
    width:100%;
    justify-content:flex-start;
  }
  .lease-live-preview-stage {
    height:68vh;
    min-height:500px;
  }
}

/* === POSISI PASAL DAN TEKS ANTAR HALAMAN V33 === */
.lease-article-position {
  display:grid;
  gap:12px;
  padding:14px 15px;
  border:1px solid #d7deea;
  border-radius:14px;
  background:linear-gradient(180deg,#f8fbff 0%,#f3f6fb 100%);
}
.lease-article-position-copy {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.lease-article-position-copy strong {
  color:#101828;
  font-size:13px;
}
.lease-article-position-copy span {
  padding:5px 9px;
  border:1px solid #d0d5dd;
  border-radius:999px;
  background:#fff;
  color:#475467;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.lease-article-position-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.lease-article-position-actions .btn:disabled {
  opacity:.45;
  cursor:not-allowed;
}
.lease-article-spacing-field {
  display:inline-grid;
  grid-template-columns:auto 70px auto;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:4px 8px;
  border:1px solid #d0d5dd;
  border-radius:9px;
  background:#fff;
  color:#475467;
  font-size:11px;
  font-weight:700;
}
.lease-article-spacing-field input {
  width:70px;
  min-height:28px;
  padding:4px 6px;
  border:1px solid #e4e7ec;
  border-radius:6px;
  text-align:center;
  font:inherit;
}
.lease-article-spacing-field small {
  color:#667085;
  font-size:10px;
}
.lease-article-page-break-toggle {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:7px 10px;
  border:1px solid #d0d5dd;
  border-radius:9px;
  background:#fff;
  color:#344054;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.lease-article-page-break-toggle input {
  width:16px;
  height:16px;
  margin:0;
}
.lease-article-position-note {
  color:#667085;
  font-size:11px;
  line-height:1.45;
}
@media (max-width:680px) {
  .lease-article-position-copy {
    align-items:flex-start;
    flex-direction:column;
  }
  .lease-article-position-copy span { white-space:normal; }
  .lease-article-position-actions {
    align-items:stretch;
    flex-direction:column;
  }
  .lease-article-position-actions .btn,
  .lease-article-spacing-field,
  .lease-article-page-break-toggle {
    width:100%;
    justify-content:center;
  }
  .lease-article-spacing-field {
    grid-template-columns:1fr 80px auto;
  }
}


/* === PEMINDAHAN TEKS PER PARAGRAF V33 === */
.lease-text-page-manager {
  display:grid;
  gap:11px;
  padding:14px 15px;
  border:1px solid #d7deea;
  border-radius:14px;
  background:#fff;
}
.lease-text-page-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.lease-text-page-head strong,
.lease-text-page-head span { display:block; }
.lease-text-page-head strong { color:#101828; font-size:13px; }
.lease-text-page-head span { margin-top:3px; color:#667085; font-size:11px; line-height:1.45; }
.lease-text-page-head small {
  padding:5px 9px;
  border-radius:999px;
  background:#f2f4f7;
  color:#475467;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.lease-text-page-list { display:grid; gap:8px; }
.lease-text-page-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 12px;
  align-items:center;
  padding:10px;
  border:1px solid #e4e7ec;
  border-radius:11px;
  background:#f9fafb;
}
.lease-text-page-copy { min-width:0; }
.lease-text-page-copy strong { display:block; color:#344054; font-size:11px; }
.lease-text-page-copy span {
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:#667085;
  font-size:10px;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lease-text-page-state {
  justify-self:end;
  padding:4px 8px;
  border:1px solid #d0d5dd;
  border-radius:999px;
  background:#fff;
  color:#667085;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.lease-text-page-state.moved {
  border-color:#a7f3d0;
  background:#ecfdf3;
  color:#047857;
}
.lease-text-page-actions {
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.lease-text-page-actions .btn:disabled { opacity:.45; cursor:not-allowed; }
.lease-text-page-empty {
  padding:11px;
  border:1px dashed #d0d5dd;
  border-radius:10px;
  color:#667085;
  font-size:11px;
  line-height:1.45;
  text-align:center;
}
@media (max-width:680px) {
  .lease-text-page-head { flex-direction:column; }
  .lease-text-page-head small { white-space:normal; }
  .lease-text-page-row { grid-template-columns:1fr; }
  .lease-text-page-state { justify-self:start; }
  .lease-text-page-actions { grid-column:auto; flex-direction:column; }
  .lease-text-page-actions .btn { width:100%; }
}

/* === MASTER SURAT SEWA - WORDPAD LANGSUNG V34 === */
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.lease-wordpad-shell {
  padding:0;
  margin:0 0 16px;
  overflow:hidden;
  border:1px solid #cfd7e6;
  box-shadow:0 16px 40px rgba(15,23,42,.10);
}
.lease-wordpad-toolbar {
  position:sticky;
  top:0;
  z-index:12;
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  min-height:62px;
  padding:10px 12px;
  border-bottom:1px solid #d9e0ea;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  box-shadow:0 5px 16px rgba(15,23,42,.05);
}
.lease-wordpad-toolbar-group {
  display:flex;
  align-items:center;
  gap:6px;
  min-height:38px;
  padding-right:9px;
  border-right:1px solid #e4e7ec;
}
.lease-wordpad-toolbar-group:last-child { border-right:0; padding-right:0; }
.lease-wordpad-toolbar-title {
  display:grid;
  align-content:center;
  gap:1px;
  min-width:156px;
}
.lease-wordpad-toolbar-title strong { color:#172033; font-size:13px; }
.lease-wordpad-toolbar-title small { color:#667085; font-size:10px; }
.lease-wordpad-toolbar select {
  min-height:36px;
  max-width:150px;
  border:1px solid #cfd7e6;
  border-radius:8px;
  background:#fff;
  color:#263247;
  padding:6px 28px 6px 9px;
  font-family:inherit;
  font-size:11px;
  font-weight:600;
  line-height:1.2;
}
#leaseWordpadSize { width:68px; }
#leaseWordpadVariable { max-width:174px; }
.lease-wordpad-tool {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:35px;
  height:35px;
  padding:0;
  border:1px solid #cfd7e6;
  border-radius:8px;
  background:#fff;
  color:#344054;
  font:700 14px/1 inherit;
  cursor:pointer;
}
.lease-wordpad-tool:hover,
.lease-wordpad-tool:focus-visible {
  border-color:#8b5cf6;
  background:#f5f3ff;
  color:#6d28d9;
  outline:none;
}
.lease-wordpad-separator { width:1px; height:25px; margin:0 2px; background:#e4e7ec; }
.lease-wordpad-context {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 13px;
  border-bottom:1px solid #d9e0ea;
  background:#f7f9fc;
  color:#475467;
  font-size:11px;
  line-height:1.35;
}
.lease-wordpad-save-hint { color:#027a48; font-weight:650; text-align:right; }
.lease-wordpad-stage {
  max-height:calc(100vh - 255px);
  min-height:720px;
  overflow:auto;
  padding:24px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.20) 1px,transparent 1px) 0 0/18px 18px,
    linear-gradient(rgba(255,255,255,.20) 1px,transparent 1px) 0 0/18px 18px,
    #dfe4eb;
  scrollbar-gutter:stable;
}
.lease-wordpad-paper {
  width:794px;
  max-width:none;
  min-height:1123px;
  box-sizing:border-box;
  margin:0 auto;
  padding:42px 48px 36px;
  background:#fff;
  color:#111827;
  border:1px solid #c9d0db;
  box-shadow:0 12px 34px rgba(15,23,42,.18);
  font-family:Calibri,Carlito,"Segoe UI",Arial,sans-serif;
  font-size:12px;
  line-height:1.45;
}
.lease-wordpad-letter-head {
  display:grid;
  grid-template-columns:1fr 1.18fr 1fr;
  gap:14px;
  align-items:center;
  min-height:72px;
}
.lease-wordpad-brand { display:grid; grid-template-columns:42px 1fr; gap:8px; align-items:center; }
.lease-wordpad-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,#6d28d9,#a855f7);
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.03em;
}
.lease-wordpad-head-center { text-align:center; }
.lease-wordpad-head-right { text-align:right; }
.lease-wordpad-head-strong { font-weight:750; }
.lease-wordpad-head-small { font-size:10px !important; color:#344054; }
.lease-wordpad-head-line { height:3px; margin:7px 0 18px; border-top:1px solid #6d2875; border-bottom:1px solid #6d2875; }
.lease-wordpad-title-block { text-align:center; margin:0 0 16px; }
.lease-wordpad-document-title {
  display:inline-block;
  min-width:310px;
  font-weight:800;
  text-decoration:underline;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.lease-wordpad-auto-value { color:#475467; font-size:10px; font-style:italic; }
.lease-wordpad-auto-value span { color:#111827; font-weight:700; font-style:normal; }
.lease-wordpad-editable {
  position:relative;
  min-width:22px;
  min-height:18px;
  border:1px dashed transparent;
  border-radius:5px;
  padding:2px 4px;
  margin:-2px -4px;
  outline:none;
  transition:background .12s ease,border-color .12s ease,box-shadow .12s ease;
  overflow-wrap:anywhere;
}
.lease-wordpad-editable:hover {
  border-color:#c4b5fd;
  background:rgba(245,243,255,.72);
}
.lease-wordpad-editable.is-active,
.lease-wordpad-editable:focus {
  z-index:2;
  border-color:#7c3aed;
  background:#fff;
  box-shadow:0 0 0 3px rgba(124,58,237,.14);
}
.lease-wordpad-editable:empty::before {
  content:attr(data-wordpad-label);
  color:#98a2b3;
  font-style:italic;
}
.lease-wordpad-editable p { margin:0 0 8px; }
.lease-wordpad-editable p:last-child { margin-bottom:0; }
.lease-wordpad-token {
  display:inline-flex;
  align-items:center;
  border:1px solid #a5d8ff;
  border-radius:5px;
  padding:0 4px;
  background:#eff8ff;
  color:#175cd3;
  font:700 .88em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:nowrap;
  user-select:all;
}
.lease-wordpad-party-card {
  margin:10px 0;
  padding:9px 11px;
  border:1px solid #d7dce4;
  border-radius:7px;
  background:#fcfcfd;
}
.lease-wordpad-section-heading {
  margin-bottom:7px;
  color:#222b3a;
  font-weight:800;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.025em;
}
.lease-wordpad-info-row {
  display:grid;
  grid-template-columns:112px 10px minmax(0,1fr);
  gap:5px;
  align-items:start;
  margin:3px 0;
}
.lease-wordpad-info-row > span:first-child { color:#344054; font-weight:650; }
.lease-wordpad-role { margin-top:7px; font-style:italic; }
.lease-wordpad-database-card { border-left:4px solid #8b5cf6; }
.lease-wordpad-db { color:#175cd3; font-weight:700; }
.lease-wordpad-db-note {
  margin:6px 0;
  padding:5px 7px;
  border-radius:5px;
  background:#eff8ff;
  color:#175cd3;
  font-size:9px;
}
.lease-wordpad-articles { margin-top:14px; }
.lease-wordpad-article { margin:0 0 13px; }
.lease-wordpad-article-heading {
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:8px;
  align-items:start;
  margin-bottom:5px;
}
.lease-wordpad-article-heading > span {
  padding-top:2px;
  color:#111827;
  font-weight:800;
}
.lease-wordpad-article-title { font-weight:800; text-transform:uppercase; }
.lease-wordpad-article-body { text-align:justify; }
.lease-wordpad-standalone-closing {
  margin:16px 0 12px;
  padding:10px 12px;
  border-top:1px solid #aeb7c5;
  border-bottom:1px solid #d7dce4;
  background:#fcfcfd;
}
.lease-wordpad-standalone-label {
  margin-bottom:6px;
  color:#475467;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.lease-wordpad-closing-statement { text-align:justify; }
.lease-wordpad-closing-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:17px 0 10px;
}
.lease-wordpad-closing-box {
  min-height:105px;
  padding:9px;
  border:1px solid #b7bdc8;
  border-radius:0;
  background:#fff;
}
.lease-wordpad-closing-box .lease-wordpad-section-heading { text-align:left; }
.lease-wordpad-closing-box .lease-wordpad-auto-value { display:block; margin-top:8px; line-height:1.55; }
.lease-wordpad-closing-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; margin:10px 0 18px; }
.lease-wordpad-note {
  display:flex;
  gap:5px;
  align-items:center;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}
.lease-wordpad-note-label { font-weight:800; white-space:nowrap; }
.lease-wordpad-note-dots { display:block; width:190px; border-bottom:1px dotted #667085; }
.lease-wordpad-sign-date { display:flex; justify-content:flex-end; align-items:center; margin:0; }
.lease-wordpad-signatures {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  text-align:center;
}
.lease-wordpad-signatures > div { display:flex; flex-direction:column; align-items:center; }
.lease-wordpad-sign-space { display:block; height:68px; }
.lease-wordpad-sign-name { min-width:145px; font-weight:800; text-decoration:underline; }
.lease-wordpad-footer {
  display:grid;
  grid-template-columns:1fr 1.6fr 1fr;
  gap:8px;
  align-items:center;
  margin-top:24px;
  padding-top:7px;
  border-top:1px solid #667085;
  color:#475467;
  font-size:9px;
}
.lease-wordpad-footer > :nth-child(2) { text-align:center; }
.lease-wordpad-footer > :last-child { text-align:right; }
.lease-advanced-editor {
  padding:0;
  overflow:hidden;
  border-color:#d8dee8;
  background:#fff;
}
.lease-advanced-editor > summary {
  cursor:pointer;
  list-style:none;
  padding:15px 17px;
  color:#344054;
  font-size:13px;
  font-weight:750;
  background:#f8fafc;
}
.lease-advanced-editor > summary::-webkit-details-marker { display:none; }
.lease-advanced-editor > summary::after { content:'Buka'; float:right; color:#7c3aed; font-size:11px; }
.lease-advanced-editor[open] > summary { border-bottom:1px solid #e4e7ec; }
.lease-advanced-editor[open] > summary::after { content:'Tutup'; }
.lease-advanced-editor-body { padding:14px; background:#f8fafc; }
.lease-advanced-editor-body > .card { box-shadow:none; }

@media (max-width:1280px) {
  .lease-wordpad-toolbar-title { min-width:130px; }
  .lease-wordpad-stage { padding:16px; }
}
@media (max-width:880px) {
  .lease-wordpad-stage { max-height:none; min-height:620px; }
}
@media (max-width:720px) {
  .lease-wordpad-toolbar { align-items:stretch; }
  .lease-wordpad-toolbar-group { border-right:0; padding-right:0; }
  .lease-wordpad-toolbar-title { width:100%; }
  .lease-wordpad-variable-tools { width:100%; }
  #leaseWordpadVariable { flex:1; max-width:none; }
  .lease-wordpad-context { flex-direction:column; }
  .lease-wordpad-save-hint { text-align:left; }
  .lease-wordpad-stage { padding:10px; overflow-x:auto; }
  .lease-wordpad-paper { transform-origin:top left; }
}

/* WordPad menjadi area kerja utama; Live Preview tetap di sisi kanan. */
.lease-template-panel .lease-master-workspace {
  grid-template-columns:minmax(700px,1.22fr) minmax(420px,.78fr);
}
.lease-template-panel .lease-master-editor { order:1; }
.lease-template-panel .lease-live-preview { order:2; }
#leaseWordpadSize { width:78px; min-width:78px; }
@media (max-width:1180px) {
  .lease-template-panel .lease-master-workspace {
    grid-template-columns:minmax(0,1fr) minmax(400px,.82fr);
  }
}
@media (max-width:880px) {
  .lease-template-panel .lease-master-workspace { grid-template-columns:1fr; }
  .lease-template-panel .lease-master-editor { order:1; }
  .lease-template-panel .lease-live-preview { order:2; }
}

/* === V40 260617: KONSOLIDASI KOLOM KONTRAK + UKURAN OTOMATIS === */
.contract-form-scroll .form-grid {
  align-items:start;
}
.form-section-title {
  grid-column:1 / -1;
  margin:4px 0 0;
  padding:10px 12px;
  border:1px solid #e4e7ec;
  border-radius:10px;
  background:#f8fafc;
  color:#344054;
  font-size:12px;
  font-weight:700;
  letter-spacing:.025em;
}
.form-field-wide { grid-column:span 2; }
.input-with-unit {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.input-with-unit input {
  min-width:0;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.input-with-unit span {
  align-self:stretch;
  display:flex;
  align-items:center;
  padding:0 10px;
  border-left:1px solid var(--line);
  background:#f9fafb;
  color:#667085;
  font-size:11px;
  font-weight:650;
  white-space:nowrap;
}
.checkio-history-wrap { overflow:auto; }
.checkio-history-table {
  width:100% !important;
  min-width:100% !important;
  table-layout:auto !important;
}
.checkio-history-table th,
.checkio-history-table td {
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  height:auto !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  vertical-align:top;
}
.tenant-contract-cell,
.contract-detail-cell,
.contract-date-cell {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:7px;
  min-width:0;
}
.tenant-contract-identity { min-width:0; }
.contract-type-action {
  width:max-content !important;
  min-width:0 !important;
  max-width:none !important;
}
.contract-type-action select {
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
}
.contract-mini-list,
.contract-meter-list {
  display:grid;
  gap:3px;
  padding-top:6px;
  border-top:1px dashed #d0d5dd;
  color:#475467;
  font-size:10.5px;
  line-height:1.35;
}
.contract-mini-list span,
.contract-meter-list span {
  display:block;
  overflow-wrap:anywhere;
}
.contract-mini-list b,
.contract-meter-list b {
  color:#344054;
  font-weight:650;
}
.contract-date-badges {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
}
.contract-date-badges .lease-option-badge,
.contract-date-badges .date-reminder { margin-top:0 !important; }
.checkio-history-table tbody tr { height:auto !important; }
.checkio-history-table td > * { max-width:none; }
.checkio-history-table .contract-payment-cell { min-width:0 !important; }
.checkio-history-table .payment-status-select { min-width:0 !important; }
.checkio-history-table td { overflow-wrap:anywhere; }

@media (max-width:700px) {
  .form-field-wide { grid-column:auto; }
  .checkio-history-table { width:max-content !important; min-width:100% !important; }
}


/* === V41 260617: KOLOM CUT OFF TERPISAH + DROPDOWN RINGKAS === */
.tenant-contract-cell {
  gap:5px;
}
.tenant-contract-identity .cell-main {
  font-size:12px;
  font-weight:650;
  line-height:1.3;
}
.checkio-history-table .contract-type-action {
  width:108px !important;
  min-width:108px !important;
  max-width:108px !important;
}
.checkio-history-table .contract-type-action::after {
  right:8px;
  width:5px;
  height:5px;
}
.checkio-history-table .contract-type-dot {
  left:8px;
  width:6px;
  height:6px;
}
.checkio-history-table .contract-type-action select {
  width:108px !important;
  min-width:108px !important;
  max-width:108px !important;
  height:28px !important;
  min-height:28px !important;
  padding:3px 20px 3px 20px !important;
  border-radius:8px !important;
  font-size:9px !important;
  line-height:1.1 !important;
}
.checkio-history-table [data-payment-category="rent"] .payment-status-select,
.checkio-history-table [data-payment-category="deposit"] .payment-status-select,
.checkio-history-table [data-payment-category="ipl"] .payment-status-select,
.checkio-history-table [data-payment-category="we"] .payment-status-select {
  width:auto !important;
  min-width:88px !important;
  max-width:104px !important;
  min-height:26px !important;
  height:26px !important;
  padding:3px 22px 3px 7px !important;
  border-radius:7px !important;
  font-size:9.5px !important;
  line-height:1.1 !important;
}
.contract-meter-cell {
  display:grid;
  gap:4px;
  min-width:148px;
  color:#475467;
  font-size:10.5px;
  line-height:1.35;
}
.contract-meter-cell span {
  display:block;
  overflow-wrap:anywhere;
}
.contract-meter-cell b {
  color:#344054;
  font-weight:650;
}

.checkio-history-table td {
  overflow-wrap:normal !important;
  word-break:normal !important;
}
.checkio-history-table .contract-mini-list span,
.checkio-history-table .contract-meter-cell span,
.checkio-history-table td:nth-child(10) {
  overflow-wrap:break-word !important;
}

/* === V43 260617: NOMOR TELEPON TANPA LABEL DI KOLOM PENYEWA === */
.checkio-history-table .tenant-contract-identity {
  display:flex;
  flex-direction:column;
  gap:2px;
}
.checkio-history-table .tenant-phone {
  display:block;
  margin:0;
  color:#667085;
  font-size:9.5px;
  line-height:1.3;
  white-space:nowrap;
}

/* === V44 260617: CUT OFF ABU-ABU, TEKS HITAM, PEMISAH AWAL/AKHIR === */
.checkio-history-table .contract-meter-cell {
  min-width:136px;
  padding:7px 9px;
  border:1px solid #d0d5dd;
  border-radius:7px;
  background:#eaecf0;
  color:#101828;
}
.checkio-history-table .contract-meter-cell span,
.checkio-history-table .contract-meter-cell b {
  color:#101828;
}
.checkio-history-table .contract-meter-cell b {
  font-weight:650;
}
.checkio-history-table .contract-meter-separator {
  display:block;
  width:100%;
  height:0;
  margin:2px 0;
  border-top:1px dashed #98a2b3;
}


/* === V45 260617: CUT OFF TEKS ABU + PEMBAYARAN DIEDIT DARI FORM PENYEWA === */
.checkio-history-table .contract-meter-cell {
  min-width:136px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#667085;
}
.checkio-history-table .contract-meter-cell .contract-meter-row {
  display:flex !important;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  color:#667085;
}
.checkio-history-table .contract-meter-cell .contract-meter-row b {
  color:#667085;
  font-weight:600;
  white-space:nowrap;
}
.checkio-history-table .contract-meter-cell .contract-meter-value {
  display:inline !important;
  color:#101828;
  font-weight:550;
  text-align:right;
  white-space:nowrap;
}
.checkio-history-table .contract-meter-separator {
  border-top-color:#b8c0cc;
}

.checkio-history-table .contract-payment-cell.is-readonly {
  min-width:112px !important;
  gap:5px;
}
.payment-status-info {
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:23px;
  padding:3px 8px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:9.5px;
  font-weight:650;
  line-height:1;
  white-space:nowrap;
}
.payment-status-info.is-paid {
  border-color:#a6f4c5;
  background:#ecfdf3;
  color:#067647;
}
.payment-status-info.is-unpaid {
  border-color:#fecdca;
  background:#fef3f2;
  color:#b42318;
}
.payment-status-info.is-virtual {
  border-color:#c7d7fe;
  background:#eef4ff;
  color:#3538cd;
}
.payment-proof-view-only {
  margin-top:1px;
}
.payment-proof-view-only a {
  padding:3px 7px;
  color:#344054;
  font-size:9px;
}

.edit-payment-section {
  grid-column:1 / -1;
  display:block;
}
.edit-payment-section[hidden] {
  display:none !important;
}
.edit-payment-help {
  margin:8px 2px 10px;
  color:#667085;
  font-size:11px;
  line-height:1.45;
}
.edit-payment-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.edit-payment-card {
  min-width:0;
  padding:12px;
  border:1px solid #e4e7ec;
  border-radius:10px;
  background:#fff;
}
.edit-payment-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.edit-payment-card-head strong {
  color:#101828;
  font-size:12px;
}
.edit-payment-card-head span {
  color:#344054;
  font-size:11px;
  font-weight:650;
  white-space:nowrap;
}
.edit-payment-card > label:not(.edit-payment-upload) {
  display:grid;
  gap:5px;
  color:#475467;
  font-size:10.5px;
  font-weight:600;
}
.edit-payment-card select {
  width:100%;
  min-height:32px;
  padding:5px 30px 5px 9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:#101828;
  font-size:11px;
}
.edit-payment-upload-row {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:9px;
  flex-wrap:wrap;
}
.edit-payment-upload {
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.edit-payment-upload input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.edit-payment-upload-row > span,
.edit-payment-existing-label {
  color:#667085;
  font-size:9.5px;
  line-height:1.3;
}
.edit-payment-existing {
  display:grid;
  gap:5px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed #d0d5dd;
}

@media (max-width:820px) {
  .edit-payment-grid { grid-template-columns:1fr; }
}


/* === V46 260617: PEMBAYARAN LISTRIK & AIR DIEDIT DARI FORM PENYEWA === */
.edit-payment-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1050px) {
  .edit-payment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .edit-payment-grid { grid-template-columns:1fr; }
}

/* Kontrak Penyewa V47 — checklist barang unit relasional */
.inventory-checklist-editor{display:block!important;grid-column:1/-1;border:1px solid #d8dee8;border-radius:16px;background:#fbfcfe;padding:16px;min-width:0}
.inventory-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid #e2e7ef}
.inventory-editor-head>div{display:grid;gap:3px;min-width:0}.inventory-editor-head strong{font-size:16px;color:#172033}.inventory-editor-head small{color:#697386}
.inventory-editor-kicker{display:block;color:#64748b;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.inventory-editor-note{margin:12px 0;padding:10px 12px;border-radius:10px;background:#f1f5f9;color:#475569;font-size:12px;line-height:1.55}
.inventory-room-list{display:grid;gap:12px}.inventory-empty-state{padding:22px;border:1px dashed #cbd5e1;border-radius:12px;text-align:center;color:#64748b;background:#fff}
.inventory-room-card{border:1px solid #d9e0e9;border-radius:14px;background:#fff;overflow:hidden}
.inventory-room-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#f7f9fc;border-bottom:1px solid #e3e8ef}
.inventory-room-title{display:flex;align-items:center;gap:9px;min-width:0}.inventory-room-title strong{font-size:14px;color:#172033}.inventory-room-index{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:999px;background:#e8eef8;color:#234878;font-size:11px;font-weight:800;flex:0 0 auto}
.inventory-room-head-actions{display:flex;align-items:center;gap:7px}.inventory-room-body{padding:12px 14px 14px}
.inventory-items-table-wrap{overflow:auto;border:1px solid #e1e6ed;border-radius:10px}.inventory-items-table{width:100%;min-width:690px;border-collapse:collapse}.inventory-items-table th{background:#f4f6f9;color:#4b5563;font-size:11px;text-align:left;padding:9px;border-bottom:1px solid #e1e6ed}.inventory-items-table td{padding:7px;border-top:1px solid #edf0f4;vertical-align:middle}.inventory-items-table tbody tr:first-child td{border-top:0}.inventory-items-table input,.inventory-items-table select{min-height:34px;padding:7px 9px;font-size:12px}.inventory-items-table .inventory-qty{width:92px}.inventory-items-table .inventory-condition{min-width:130px}.inventory-items-table .inventory-item-actions{width:44px;text-align:center}
.inventory-row-remove,.inventory-room-remove,.inventory-photo-remove{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d8dee8;background:#fff;color:#64748b;border-radius:8px;cursor:pointer}.inventory-row-remove{width:30px;height:30px}.inventory-room-remove{padding:5px 8px;font-size:11px}.inventory-row-remove:hover,.inventory-room-remove:hover,.inventory-photo-remove:hover{border-color:#f1aeb5;color:#b42318;background:#fff7f7}
.inventory-room-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}.inventory-photo-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.inventory-photo-controls input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.inventory-photo-controls .btn{cursor:pointer}.inventory-photo-note{font-size:11px;color:#64748b}
.inventory-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px;margin-top:10px}.inventory-photo-card{position:relative;border:1px solid #dfe5ec;border-radius:10px;background:#fff;overflow:hidden;min-height:92px}.inventory-photo-card img{display:block;width:100%;height:92px;object-fit:cover}.inventory-photo-card small{display:block;padding:6px 7px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inventory-photo-remove{position:absolute;top:5px;right:5px;width:25px;height:25px;background:rgba(255,255,255,.94);font-weight:800}
.inventory-editor-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;padding-top:12px;border-top:1px solid #e2e7ef}
.inventory-condition-cell{display:grid;gap:6px;min-width:120px}.inventory-condition-meta{font-size:11px;color:#64748b}.inventory-condition-actions{display:flex;gap:6px;flex-wrap:wrap}.inventory-status-badge{display:inline-flex;align-items:center;width:max-content;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid}.inventory-status-badge.is-complete{background:#ecfdf3;border-color:#abefc6;color:#067647}.inventory-status-badge.is-empty{background:#fff7ed;border-color:#fed7aa;color:#b54708}
.inventory-file-modal[hidden]{display:none!important}.inventory-file-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px}.inventory-file-backdrop{position:absolute;inset:0;border:0;background:rgba(15,23,42,.58);cursor:pointer}.inventory-file-dialog{position:relative;width:min(1050px,100%);max-height:calc(100vh - 36px);display:flex;flex-direction:column;border-radius:18px;background:#fff;box-shadow:0 30px 80px rgba(15,23,42,.28);overflow:hidden}.inventory-file-header,.inventory-file-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:#fff}.inventory-file-header{border-bottom:1px solid #e2e8f0}.inventory-file-header h2{margin:2px 0 3px}.inventory-file-footer{border-top:1px solid #e2e8f0;justify-content:flex-end}.inventory-file-body{overflow:auto;padding:20px;background:#f1f4f8}
.inventory-document{max-width:900px;margin:0 auto;background:#fff;border:1px solid #d9e0e8;border-radius:12px;padding:26px;box-shadow:0 10px 35px rgba(15,23,42,.06);color:#172033}.inventory-document-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:2px solid #1f3f6d}.inventory-document-header h3{margin:3px 0 4px;font-size:22px}.inventory-document-status{text-align:right}.inventory-document-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:16px 0;border:1px solid #dce2ea;border-radius:10px;overflow:hidden}.inventory-document-meta>div{padding:12px}.inventory-document-meta>div+div{border-left:1px solid #e2e7ed}.inventory-document-meta span{display:block;font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:.06em}.inventory-document-meta strong{display:block;margin-top:4px;font-size:13px}.inventory-document-room{margin-top:14px;border:1px solid #dce2ea;border-radius:10px;overflow:hidden}.inventory-document-room h4{margin:0;padding:10px 12px;background:#eef3f8;color:#203a5f;font-size:14px}.inventory-document-table{width:100%;border-collapse:collapse}.inventory-document-table th,.inventory-document-table td{padding:8px 10px;border-top:1px solid #e6ebf1;font-size:12px;text-align:left}.inventory-document-table th{background:#fafbfc;color:#64748b}.inventory-document-table td:nth-child(2){text-align:center}.inventory-document-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:9px;padding:10px;border-top:1px solid #e6ebf1}.inventory-document-photos figure{margin:0;border:1px solid #dfe5ec;border-radius:8px;overflow:hidden}.inventory-document-photos img{display:block;width:100%;height:115px;object-fit:cover}.inventory-document-photos figcaption{padding:6px 8px;font-size:10px;color:#64748b}.inventory-document-footer{margin-top:18px;padding-top:12px;border-top:1px solid #dce2ea;color:#64748b;font-size:11px;display:flex;justify-content:space-between;gap:12px}
body.inventory-file-open{overflow:hidden}
@media(max-width:760px){.inventory-editor-head,.inventory-editor-actions{align-items:flex-start;flex-direction:column}.inventory-document-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-document-meta>div:nth-child(3){border-left:0;border-top:1px solid #e2e7ed}.inventory-document-meta>div:nth-child(4){border-top:1px solid #e2e7ed}.inventory-file-body{padding:10px}.inventory-document{padding:16px}.inventory-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media print{.inventory-file-header,.inventory-file-footer{display:none!important}.inventory-file-modal{position:static;padding:0}.inventory-file-backdrop{display:none}.inventory-file-dialog{display:block;max-height:none;width:100%;box-shadow:none;border-radius:0}.inventory-file-body{padding:0;background:#fff;overflow:visible}.inventory-document{border:0;box-shadow:none;max-width:none;padding:10mm}.inventory-document-room{break-inside:avoid}.inventory-document-photos figure{break-inside:avoid}}

/* Kontrak Penyewa V49 — Form List Barang sebagai tombol mandiri */
.inventory-form-dialog{width:min(1180px,96vw)}
.inventory-form-dialog .contract-form-header>div{min-width:0}
.inventory-form-dialog .contract-form-header h2{margin:2px 0 0}
@media(max-width:700px){.inventory-form-dialog{width:100%}}


/* Kontrak Penyewa V50 — popup List Barang mobile penuh + kolom serah terima */
.contract-handover-cell{
  display:grid;
  gap:4px;
  min-width:164px;
  color:#667085;
  font-size:10.5px;
  line-height:1.35;
}
.contract-handover-title{
  display:block;
  color:#475467;
  font-size:9.5px;
  font-weight:750;
  letter-spacing:.01em;
}
.contract-handover-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:9px;
}
.contract-handover-row b{
  color:#667085;
  font-weight:600;
  white-space:nowrap;
}
.contract-handover-row span{
  color:#101828;
  font-weight:550;
  text-align:right;
  overflow-wrap:anywhere;
}
.contract-handover-separator{
  display:block;
  width:100%;
  height:0;
  margin:2px 0;
  border-top:1px dashed #b8c0cc;
}
.inventory-form-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

@media(max-width:700px){
  .contract-form-modal[data-contract-form-modal="inventory"]{
    display:flex;
    align-items:stretch;
    justify-content:stretch;
    padding:0;
  }
  .contract-form-modal[data-contract-form-modal="inventory"] .contract-form-backdrop{
    display:none;
  }
  .inventory-form-dialog{
    width:100vw!important;
    height:100dvh;
    max-height:100dvh;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .inventory-form-dialog .contract-form-header{
    padding:calc(14px + env(safe-area-inset-top)) 14px 13px;
  }
  .inventory-form-dialog .contract-form-scroll{
    flex:1 1 auto;
    padding:12px;
    overscroll-behavior:contain;
  }
  .inventory-form-dialog .contract-form-scroll .inventory-form-actions{
    bottom:-12px;
    display:grid;
    grid-template-columns:1fr 1fr;
    margin:14px -12px -12px;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom));
    background:#fff;
    box-shadow:0 -8px 20px rgba(15,23,42,.08);
  }
  .inventory-form-dialog .inventory-form-actions .btn{
    width:100%;
    min-height:42px;
    justify-content:center;
  }
  .inventory-file-modal{
    align-items:stretch;
    justify-content:stretch;
    padding:0;
  }
  .inventory-file-backdrop{display:none}
  .inventory-file-dialog{
    width:100vw;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
  }
  .inventory-file-header{
    padding:calc(14px + env(safe-area-inset-top)) 14px 13px;
  }
  .inventory-file-footer{
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  }
}


/* Kontrak Penyewa V51 — toolbar mobile satu baris, popup penuh, aksi inventory tanpa kotak */
.checkio-contract-toolbar-main{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.checkio-contract-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.inventory-text-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:2px 1px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#315b91;
  font:inherit;
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  text-decoration:none;
  cursor:pointer;
}
.inventory-text-action:hover,
.inventory-text-action:focus-visible{
  background:transparent;
  color:#173b68;
  text-decoration:underline;
  outline:none;
}
.inventory-photo-controls .inventory-text-action{cursor:pointer}

@media(max-width:700px){
  .checkio-history-toolbar{
    display:block;
    padding:10px;
  }
  .checkio-contract-toolbar-main{
    display:block;
    width:100%;
  }
  .checkio-contract-toolbar-main>strong{
    display:block;
    margin:0 0 8px;
  }
  .checkio-contract-actions{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    width:100%;
  }
  .checkio-contract-actions .btn{
    width:100%;
    min-width:0;
    min-height:38px;
    padding:6px 4px;
    font-size:9.5px;
    line-height:1.15;
    text-align:center;
    white-space:normal;
    justify-content:center;
  }
  .checkio-contract-search{
    width:100%;
    margin-top:8px;
  }
  .checkio-contract-search input[type="search"]{
    width:100%;
  }

  /* Semua form Kontrak Penyewa tampil penuh pada mobile. */
  .contract-form-modal{
    display:flex;
    align-items:stretch;
    justify-content:stretch;
    padding:0;
  }
  .contract-form-modal .contract-form-backdrop{
    display:none;
  }
  .contract-form-dialog,
  .inventory-form-dialog{
    width:100vw!important;
    height:100dvh;
    max-height:100dvh;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .contract-form-header,
  .inventory-form-dialog .contract-form-header{
    padding:calc(14px + env(safe-area-inset-top)) 14px 13px;
  }
  .contract-form-scroll,
  .inventory-form-dialog .contract-form-scroll{
    flex:1 1 auto;
    padding:12px;
    overscroll-behavior:contain;
  }
  /* Tombol Tutup/Simpan mengikuti alur dokumen, tidak sticky/fixed. */
  .contract-form-scroll .form-actions,
  .inventory-form-dialog .contract-form-scroll .inventory-form-actions{
    position:static;
    bottom:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    margin:16px 0 0;
    padding:14px 0 calc(8px + env(safe-area-inset-bottom));
    border-top:1px solid #e5e7eb;
    background:transparent;
    box-shadow:none;
  }
  .contract-form-scroll .form-actions .btn,
  .inventory-form-dialog .inventory-form-actions .btn{
    width:100%;
    min-height:42px;
    justify-content:center;
  }
  .inventory-room-tools{
    align-items:flex-start;
  }
  .inventory-photo-controls{
    gap:12px;
  }
}


/* === V52 260617: IKON CHECKLIST BARANG + GRUP CUT OFF AWAL/AKHIR === */
.checkio-history-table .contract-meter-cell {
  gap:3px;
  min-width:122px;
}
.checkio-history-table .contract-meter-group-title {
  display:block;
  margin-bottom:1px;
  color:#475467;
  font-size:10px;
  font-weight:750;
  line-height:1.2;
  letter-spacing:.02em;
}
.checkio-history-table .contract-meter-separator {
  margin:4px 0;
}
.checkio-history-table .inventory-status-badge {
  gap:5px;
  padding:4px 8px;
}
.checkio-history-table .inventory-status-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  flex:0 0 16px;
}
.checkio-history-table .inventory-status-icon svg {
  display:block;
  width:12px;
  height:12px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.checkio-history-table .inventory-status-badge.is-complete .inventory-status-icon {
  background:#d1fadf;
}
.checkio-history-table .inventory-status-badge.is-empty .inventory-status-icon {
  background:#ffead5;
}


/* === V53 260617: FORM LIST BARANG MOBILE/TABLET TANPA HEADER + AKSI RINGKAS === */
@media (max-width:1024px) {
  .contract-form-modal[data-contract-form-modal="inventory"] {
    display:flex;
    align-items:stretch;
    justify-content:stretch;
    padding:0;
  }
  .contract-form-modal[data-contract-form-modal="inventory"] .contract-form-backdrop {
    display:none;
  }
  .contract-form-modal[data-contract-form-modal="inventory"] .inventory-form-dialog {
    width:100vw!important;
    height:100dvh;
    max-height:100dvh;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .contract-form-modal[data-contract-form-modal="inventory"] .inventory-form-dialog .contract-form-header {
    display:none!important;
  }
  .contract-form-modal[data-contract-form-modal="inventory"] .inventory-form-dialog .contract-form-scroll {
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
    overscroll-behavior:contain;
  }
  .contract-form-modal[data-contract-form-modal="inventory"] .inventory-form-dialog .inventory-form-actions {
    position:static!important;
    inset:auto!important;
    display:flex!important;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin:14px 0 0!important;
    padding:12px 0 0!important;
    border-top:1px solid #e5e7eb;
    background:transparent!important;
    box-shadow:none!important;
  }
  .contract-form-modal[data-contract-form-modal="inventory"] .inventory-form-dialog .inventory-form-actions .btn {
    width:auto!important;
    min-width:74px;
    min-height:32px!important;
    padding:6px 12px!important;
    border-radius:8px;
    font-size:12px;
    line-height:1.2;
    justify-content:center;
  }
}

/* Teks status kondisi unit: ikon + List Barang. */
.checkio-history-table .inventory-status-badge {
  white-space:nowrap;
}

/* === PATCH 260619 - IPL & Utilitas tabel-only === */
.we-data-section-only{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.we-data-section-only .we-data-toolbar{
  margin-top:0;
}
@media(max-width:700px){
  .checkio-contract-actions{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .checkio-contract-actions .btn{
    font-size:8.8px;
  }
}