:root{--bg:#f3f6f9;--panel:#fff;--text:#102a43;--muted:#627d98;--border:#d9e2ec;--primary:#0f766e;--primary2:#115e59;--accent:#7c3aed;--danger:#b91c1c;--success:#047857;--shadow:0 18px 50px rgba(16,42,67,.1);--radius:18px}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.muted{color:var(--muted)}.eyebrow{margin:0 0 4px;text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:800;color:var(--primary)}.light{color:rgba(255,255,255,.72)}label{display:grid;gap:7px;font-size:13px;font-weight:700}input,select,textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:11px 12px;background:#fff;color:var(--text);outline:none}textarea{min-height:90px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(15,118,110,.1)}.primary-btn,.secondary-btn,.danger-btn,.lock-btn{border:0;border-radius:11px;padding:11px 16px;font-weight:800}.primary-btn{background:var(--primary);color:#fff}.primary-btn:hover{background:var(--primary2)}.secondary-btn{background:#e8eef3;color:var(--text)}.danger-btn{background:#fee2e2;color:var(--danger)}.icon-btn{width:42px;height:42px;border:1px solid var(--border);border-radius:11px;background:#fff}.spinner{width:24px;height:24px;border:3px solid rgba(15,118,110,.16);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading,.boot{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted)}.boot{min-height:100vh;flex-direction:column}.auth-body{display:grid;place-items:center;padding:28px;background:#53634d}.auth-shell{width:min(1080px,100%);display:grid;grid-template-columns:1.1fr .9fr;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 35px 100px rgba(0,0,0,.34)}.auth-brand-panel{min-height:580px;padding:60px;background:#53634d;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:22px}.brand-mark{width:76px;height:76px;border-radius:24px;background:#fff;color:var(--primary);display:grid;place-items:center;font-size:29px;font-weight:900;box-shadow:0 14px 30px rgba(0,0,0,.18)}.brand-mark.small{width:44px;height:44px;border-radius:14px;font-size:17px;box-shadow:none}.auth-brand-panel h1{font-size:clamp(38px,5vw,64px);line-height:.98;letter-spacing:-3px;margin:0}.auth-brand-panel p{line-height:1.7;color:rgba(255,255,255,.8);max-width:560px}.local-badge{width:max-content;padding:10px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.1)}.auth-card{padding:60px 52px;display:flex;flex-direction:column;justify-content:center}.auth-card form{display:grid;gap:18px}.auth-card h2{margin:0;font-size:30px}.auth-card small{margin-top:22px}.message{margin-top:16px;padding:12px;border-radius:12px;background:#fee2e2;color:var(--danger)}.layout{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#0f2135;color:#fff;padding:24px 18px;display:flex;flex-direction:column;gap:24px}.sidebar-brand{display:flex;gap:12px;align-items:center;padding:0 8px}.sidebar-brand strong{display:block;font-size:19px}.sidebar-brand span{display:block;color:#9fb3c8;font-size:12px}.profile-box{padding:14px;border-radius:15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.09)}.profile-box label{color:#bcccdc}.profile-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}.profile-row select,.profile-row .icon-btn{background:#183b56;color:#fff;border-color:#315a75}.sidebar nav{display:grid;gap:7px}.sidebar nav button{border:0;border-radius:11px;padding:12px 13px;background:transparent;color:#bcccdc;text-align:left;font-weight:700}.sidebar nav button:hover,.sidebar nav button.active{background:rgba(255,255,255,.1);color:#fff}.lock-btn{margin-top:auto;background:rgba(255,255,255,.1);color:#fff}.content{min-width:0;padding:28px 32px 48px}.topbar{display:flex;align-items:center;gap:20px;margin-bottom:25px}.topbar h1{margin:0;font-size:30px;letter-spacing:-1px}.top-actions{margin-left:auto;display:flex;gap:10px}.top-actions input{width:165px}.mobile{display:none}.page{display:none}.page.active{display:block}.stack{display:grid;gap:20px}.card{background:#fff;border:1px solid rgba(217,226,236,.9);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.card-header{display:flex;gap:14px;align-items:flex-start;margin-bottom:17px}.card-header h2,.card-header h3{margin:0}.card-header p{margin:5px 0 0;color:var(--muted)}.card-header .actions{margin-left:auto;display:flex;gap:8px}.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.summary-card{background:#fff;border:1px solid var(--border);border-radius:17px;padding:18px}.summary-card span{display:block;color:var(--muted);font-size:13px;margin-bottom:9px}.summary-card strong{font-size:25px;letter-spacing:-1px}.summary-card small{display:block;color:var(--muted);margin-top:8px}.dashboard-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.dashboard-grid.equal{grid-template-columns:repeat(2,minmax(0,1fr))}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:12px 13px;border-bottom:1px solid #e8eef3;text-align:left;vertical-align:top}th{background:#f8fafc;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}tbody tr:last-child td{border-bottom:0}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#e8eef3;font-size:11px;font-weight:800}.badge.ok{background:#d1fae5;color:#065f46}.badge.warn{background:#fef3c7;color:#92400e}.badge.bad{background:#fee2e2;color:#991b1b}.row-actions{display:flex;gap:6px}.row-actions button{border:0;border-radius:9px;padding:7px 9px;background:#e8eef3;font-weight:700}.row-actions button.danger{background:#fee2e2;color:var(--danger)}.chart-bars{display:grid;gap:12px}.chart-row{display:grid;grid-template-columns:74px 1fr 116px;align-items:center;gap:10px}.bar-track{height:12px;background:#e8eef3;border-radius:999px;overflow:hidden;display:flex}.bar-income{height:100%;background:var(--primary)}.bar-expense{height:100%;background:#e11d48}.category-row{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center}.progress{height:10px;background:#e8eef3;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:var(--accent)}.empty{padding:34px;border:1px dashed #bcccdc;border-radius:14px;text-align:center;color:var(--muted);background:#fbfdff}.client-grid,.budget-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.client-card,.budget-card{border:1px solid var(--border);border-radius:15px;padding:17px;background:#fff}.client-card h3,.budget-card h3{margin:0 0 6px}.metric{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:var(--muted)}.metric strong{color:var(--text)}.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.58);z-index:100;display:grid;place-items:center;padding:20px}.modal{width:min(650px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:20px;box-shadow:0 30px 100px rgba(0,0,0,.35)}.modal.wide{width:min(900px,100%)}.modal-header{display:flex;gap:15px;padding:21px 22px;border-bottom:1px solid var(--border)}.modal-header h2{margin:0}.modal-header p{margin:5px 0 0;color:var(--muted)}.modal-header button{margin-left:auto}.modal-body{padding:22px}.modal-footer{display:flex;justify-content:flex-end;gap:9px;padding:17px 0 0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.span-2{grid-column:1/-1}.profile-list{display:grid;gap:10px}.profile-item{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:10px;border:1px solid var(--border);border-radius:13px;padding:12px}.profile-dot{width:15px;height:15px;border-radius:50%}.toasts{position:fixed;right:20px;bottom:20px;z-index:200;display:grid;gap:10px}.toast{min-width:290px;max-width:430px;padding:13px 15px;border-radius:12px;background:#102a43;color:#fff;box-shadow:0 15px 45px rgba(0,0,0,.23)}.toast.error{background:#991b1b}.toast.success{background:#065f46}.report-paper{background:#fff;border:1px solid var(--border);border-radius:17px;padding:28px}.report-title{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--text);padding-bottom:16px;margin-bottom:20px}.report-title h2{margin:0}.filters{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr)) auto;gap:10px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.code-path{font-family:Consolas,monospace;font-size:12px;background:#edf2f7;padding:10px;border-radius:10px;word-break:break-all}.warning{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:13px;padding:14px}.positive{color:var(--success)}.negative{color:var(--danger)}.text-right{text-align:right}@media(max-width:1080px){.summary-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.dashboard-grid.equal,.settings-grid{grid-template-columns:1fr}.client-grid,.budget-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:820px){.auth-body{padding:14px}.auth-shell{grid-template-columns:1fr}.auth-brand-panel{min-height:auto;padding:36px 28px}.auth-card{padding:38px 28px}.layout{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;width:260px;z-index:50;transition:.2s}.sidebar.open{left:0}.content{padding:20px 16px 40px}.mobile{display:block}.topbar{flex-wrap:wrap}.top-actions{width:100%;margin-left:0}.top-actions input{flex:1}.filters{grid-template-columns:1fr}}@media(max-width:580px){.summary-grid,.client-grid,.budget-grid,.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.top-actions{flex-direction:column}.summary-card strong{font-size:21px}}@media print{.sidebar,.topbar,.no-print,.toasts{display:none!important}.layout{display:block}.content{padding:0}.page{display:none!important}#page-reports.active{display:block!important}.card{box-shadow:none;border:0;padding:0}.report-paper{border:0;padding:0}}

/* =========================================================
   DASHBOARD KALENDER — UPDATE
   ========================================================= */
.calendar-dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:18px;
  align-items:start;
}
.calendar-card{padding:0;overflow:hidden}
.calendar-toolbar{
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px;
  border-bottom:1px solid var(--border);
}
.calendar-toolbar h2{
  margin:2px 0 4px;
  font-size:25px;
  text-transform:capitalize;
}
.calendar-toolbar p{margin:0;color:var(--muted)}
.calendar-navigation{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.calendar-navigation .icon-btn{
  font-size:25px;
  line-height:1;
}
.calendar-scroll{overflow-x:auto}
.calendar-weekdays,.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(112px,1fr));
}
.calendar-weekdays{
  background:#f8fafc;
  border-bottom:1px solid var(--border);
}
.calendar-weekdays div{
  padding:11px 10px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.calendar-grid{
  border-left:1px solid transparent;
}
.calendar-day{
  min-height:132px;
  padding:9px;
  background:#fff;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background .16s ease,box-shadow .16s ease;
  outline:none;
}
.calendar-day:nth-child(7n){border-right:0}
.calendar-day:hover,.calendar-day:focus{
  background:#f0fdfa;
  box-shadow:inset 0 0 0 2px rgba(15,118,110,.18);
}
.calendar-day-empty{
  background:#f8fafc;
  cursor:default;
}
.calendar-day-empty:hover{background:#f8fafc;box-shadow:none}
.calendar-today{
  background:#ecfdf5;
  box-shadow:inset 0 0 0 2px rgba(15,118,110,.45);
}
.calendar-day-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:7px;
}
.calendar-date-number{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:13px;
  font-weight:900;
}
.calendar-today .calendar-date-number{
  background:var(--primary);
  color:#fff;
}
.calendar-add-hint{
  opacity:0;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#d1fae5;
  color:var(--primary2);
  font-weight:900;
  transition:opacity .16s ease;
}
.calendar-day:hover .calendar-add-hint,
.calendar-day:focus .calendar-add-hint{opacity:1}
.calendar-events{display:grid;gap:5px}
.calendar-event{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:35px minmax(0,1fr);
  gap:5px;
  align-items:center;
  padding:5px 6px;
  border:0;
  border-left:3px solid;
  border-radius:7px;
  text-align:left;
  font-size:11px;
  color:var(--text);
  background:#edf2f7;
}
.calendar-event:hover{filter:brightness(.97)}
.calendar-event-time{font-weight:900}
.calendar-event-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.calendar-event.pribadi{background:#e0f2fe;border-color:#0284c7}
.calendar-event.akademik{background:#ede9fe;border-color:#7c3aed}
.calendar-event.pekerjaan{background:#d1fae5;border-color:#059669}
.calendar-event.lainnya{background:#fef3c7;border-color:#d97706}
.calendar-more{
  display:block;
  padding-left:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}
.calendar-legend{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  padding:13px 20px;
  color:var(--muted);
  font-size:12px;
}
.calendar-legend span{display:flex;align-items:center;gap:6px}
.legend-dot{
  width:9px;
  height:9px;
  border-radius:50%;
}
.legend-dot.pribadi{background:#0284c7}
.legend-dot.akademik{background:#7c3aed}
.legend-dot.pekerjaan{background:#059669}
.legend-dot.lainnya{background:#d97706}
.calendar-side{display:grid;gap:18px}
.upcoming-list{display:grid;gap:8px}
.upcoming-item{
  width:100%;
  display:grid;
  gap:3px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:#fff;
  text-align:left;
  color:var(--text);
}
.upcoming-item:hover{
  border-color:var(--primary);
  background:#f0fdfa;
}
.upcoming-date{
  color:var(--primary);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.upcoming-item small{color:var(--muted)}
.calendar-help{display:grid;gap:12px}
.calendar-help div{
  display:grid;
  grid-template-columns:29px 1fr;
  gap:10px;
  align-items:center;
}
.calendar-help strong{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#d1fae5;
  color:var(--primary2);
}
.calendar-help span{color:var(--muted);font-size:13px}

@media(max-width:1180px){
  .calendar-dashboard-grid{grid-template-columns:1fr}
  .calendar-side{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .calendar-toolbar{align-items:flex-start;flex-direction:column}
  .calendar-navigation{margin-left:0}
  .calendar-side{grid-template-columns:1fr}
  .calendar-weekdays,.calendar-grid{grid-template-columns:repeat(7,minmax(104px,1fr))}
  .calendar-day{min-height:120px}
}


/* MULTI PENGELUARAN & RENCANA BELANJA */
.sidebar nav{overflow-y:auto;padding-right:2px}.modal.wide{width:min(1120px,100%)}
.expense-common-fields{display:grid;grid-template-columns:minmax(220px,320px) minmax(200px,1fr);gap:14px;align-items:end;margin-bottom:16px}.expense-total-box{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;border:1px solid var(--border);border-radius:13px;background:#f0fdfa}.expense-total-box span{color:var(--muted);font-size:13px}.expense-total-box strong{font-size:23px;color:var(--primary2)}
.expense-entry-list{display:grid;gap:10px;margin-bottom:13px}.expense-entry-row{display:grid;grid-template-columns:34px minmax(170px,1.4fr) minmax(155px,1fr) minmax(125px,.8fr) minmax(150px,1fr) minmax(150px,1fr) 38px;gap:9px;align-items:end;padding:12px;border:1px solid var(--border);border-radius:14px;background:#fbfdff}.expense-entry-row label{font-size:11px}.expense-entry-row label small{font-weight:500;color:var(--muted)}.expense-entry-row input,.expense-entry-row select{padding:9px 10px}.expense-row-number{width:28px;height:28px;display:grid;place-items:center;align-self:center;border-radius:9px;background:#d1fae5;color:var(--primary2);font-weight:900}.expense-remove-row{width:36px;height:36px;border:0;border-radius:10px;background:#fee2e2;color:var(--danger);font-weight:900}
.plan-history-search{padding:14px;margin-bottom:18px;border:1px solid var(--border);border-radius:15px;background:#f8fafc}.plan-history-search label{margin-bottom:12px}.shopping-history-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.shopping-history-card{min-width:0;display:grid;gap:5px;padding:13px;border:1px solid var(--border);border-radius:13px;background:#fff;color:var(--text);text-align:left}.shopping-history-card:hover{border-color:var(--primary);background:#f0fdfa}.shopping-history-card>span:not(.shopping-history-title){color:var(--muted);font-size:11px}.shopping-history-card strong{color:var(--primary2)}.shopping-history-card small{color:var(--muted);line-height:1.4}.shopping-history-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900}.plan-search-bar{display:grid;grid-template-columns:minmax(260px,560px);margin-bottom:14px}#shoppingDatabaseResults{min-height:30px}
@media(max-width:1180px){.expense-entry-row{grid-template-columns:30px repeat(2,minmax(180px,1fr)) 38px}.expense-entry-row .expense-notes{grid-column:2/4}.shopping-history-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.expense-common-fields{grid-template-columns:1fr}.expense-entry-row{grid-template-columns:28px 1fr 36px}.expense-entry-row label,.expense-entry-row .expense-notes{grid-column:2}.expense-remove-row{grid-column:3;grid-row:1}.shopping-history-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.shopping-history-grid{grid-template-columns:1fr}}

/* =========================================================
   FOTO PROFIL
   ========================================================= */
.active-profile-summary{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,.07)
}
.active-profile-copy{
  min-width:0;
  display:grid;
  gap:2px
}
.active-profile-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff
}
.active-profile-copy small{
  color:#9fb3c8;
  font-size:10px
}
.profile-avatar,
.active-profile-avatar{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:var(--profile-color,#2563eb);
  color:#fff;
  font-weight:900;
  text-transform:uppercase;
  user-select:none
}
.active-profile-avatar{
  width:44px;
  height:44px;
  font-size:14px;
  border:2px solid rgba(255,255,255,.3)
}
.profile-avatar{
  width:44px;
  height:44px;
  font-size:13px;
  border:1px solid var(--border)
}
.profile-avatar.profile-avatar-large{
  width:104px;
  height:104px;
  font-size:30px;
  border:3px solid #fff;
  box-shadow:0 0 0 1px var(--border)
}
.profile-avatar img,
.active-profile-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}
.profile-list .profile-item{
  grid-template-columns:48px minmax(0,1fr) auto
}
.profile-photo-editor{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:20px;
  align-items:center;
  padding:16px;
  margin-bottom:16px;
  border:1px solid var(--border);
  border-radius:15px;
  background:#f8fafc
}
.profile-photo-preview{
  display:grid;
  place-items:center
}
.profile-photo-controls{
  display:grid;
  gap:10px
}
.profile-photo-controls p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5
}
.profile-photo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center
}
.profile-photo-file{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
.profile-photo-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:11px;
  padding:10px 14px;
  background:var(--primary);
  color:#fff;
  font-weight:800;
  cursor:pointer
}
.profile-photo-status{
  min-height:18px;
  color:var(--muted);
  font-size:12px
}
@media(max-width:580px){
  .profile-photo-editor{
    grid-template-columns:1fr;
    text-align:center
  }
  .profile-photo-actions{
    justify-content:center
  }
}

/* =========================================================
   INVOICE & INFORMASI PEMBAYARAN
   ========================================================= */
.settings-wide-card{
  grid-column:1/-1
}
.payment-settings-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:22px;
  align-items:start
}
.qris-settings-panel{
  display:grid;
  gap:12px;
  justify-items:center;
  padding:16px;
  border:1px solid var(--border);
  border-radius:15px;
  background:#f8fafc
}
.qris-settings-preview{
  width:220px;
  min-height:220px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px dashed #9fb3c8;
  border-radius:14px;
  background:#fff
}
.qris-settings-preview img{
  width:100%;
  max-height:280px;
  object-fit:contain;
  display:block
}
.qris-empty-preview{
  padding:24px;
  color:var(--muted);
  text-align:center;
  font-size:13px
}
.qris-settings-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px
}
.settings-form-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:18px
}
.invoice-paper{
  max-width:980px;
  margin:0 auto
}
.invoice-summary{
  width:min(420px,100%);
  margin:20px 0 0 auto
}
.invoice-payment-section{
  margin-top:28px;
  padding-top:22px;
  border-top:2px solid var(--text)
}
.invoice-payment-heading h3{
  margin:2px 0 14px
}
.invoice-payment-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px
}
.invoice-payment-grid.with-two-methods{
  grid-template-columns:minmax(0,1fr) 250px
}
.invoice-bank-card,
.invoice-qris-card{
  border:1px solid var(--border);
  border-radius:15px;
  padding:18px;
  background:#fff
}
.invoice-bank-card{
  display:grid;
  gap:7px;
  align-content:start
}
.invoice-bank-card strong{
  font-size:18px
}
.invoice-account-number{
  margin:5px 0;
  font-size:25px;
  font-weight:900;
  letter-spacing:.04em;
  word-break:break-all
}
.invoice-payment-label{
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em
}
.invoice-qris-card{
  display:grid;
  justify-items:center;
  gap:9px;
  text-align:center
}
.invoice-qris-card img{
  width:190px;
  max-height:230px;
  object-fit:contain;
  display:block
}
.invoice-qris-card small,
.invoice-bank-card small{
  color:var(--muted)
}
#invoiceMonthField small,
#invoiceDateField small{
  color:var(--muted);
  font-weight:500;
  line-height:1.4
}
@media(max-width:820px){
  .payment-settings-layout{
    grid-template-columns:1fr
  }
  .invoice-payment-grid.with-two-methods{
    grid-template-columns:1fr
  }
}
@media print{
  .invoice-payment-section{
    break-inside:avoid
  }
  .invoice-bank-card,
  .invoice-qris-card{
    break-inside:avoid
  }
}

/* =========================================================
   OFEDA KAWAII ANIME THEME + RIWAYAT KLIEN
   ========================================================= */
:root{
  --bg:#fff7fb;
  --panel:#fffafd;
  --text:#4b2942;
  --muted:#8a6680;
  --border:#f3d7e7;
  --primary:#f472b6;
  --primary2:#9d3f72;
  --accent:#a78bfa;
  --theme-soft:#fce7f3;
  --theme-pale:#fff5fa;
  --theme-border:#f9cfe4;
  --theme-rgb:244,114,182;
  --danger:#d94676;
  --success:#4f9b7f;
  --shadow:0 16px 40px rgba(var(--theme-rgb),.13);
  --radius:22px
}
body{
  background:var(--bg);
  color:var(--text)
}
body::before,
body::after{
  position:fixed;
  z-index:-1;
  pointer-events:none;
  color:rgba(var(--theme-rgb),.18);
  font-size:88px;
  line-height:1
}
body::before{
  content:"✿";
  top:7%;
  right:4%;
  transform:rotate(14deg)
}
body::after{
  content:"♡";
  left:3%;
  bottom:5%;
  transform:rotate(-12deg)
}
.sidebar{
  background:var(--primary2);
  background:var(--primary2);
  border-right:1px solid rgba(255,255,255,.24);
  box-shadow:14px 0 40px rgba(var(--theme-rgb),.13)
}
.sidebar::after{
  content:"✿  ♡  ✦";
  margin-top:8px;
  color:rgba(255,255,255,.38);
  text-align:center;
  letter-spacing:.45em;
  font-size:13px
}
.sidebar-brand .brand-mark{
  border:2px solid rgba(255,255,255,.66);
  background:rgba(255,255,255,.94);
  color:var(--primary2);
  transform:rotate(-3deg)
}
.profile-box{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)
}
nav button{
  border:1px solid transparent;
  border-radius:14px
}
nav button:hover,
nav button.active{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.2);
  box-shadow:0 8px 20px rgba(91,33,72,.13)
}
.topbar h1,
.card h2,
.card h3{
  letter-spacing:-.035em
}
.card,
.summary-card,
.client-card,
.budget-card,
.shopping-history-card{
  border-color:var(--theme-border);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow)
}
.card{
  position:relative
}
.kawaii-section::before{
  content:"✿";
  position:absolute;
  top:14px;
  right:18px;
  color:rgba(var(--theme-rgb),.2);
  font-size:34px;
  pointer-events:none
}
.summary-card::after{
  content:"♡";
  position:absolute;
  right:14px;
  top:10px;
  color:rgba(var(--theme-rgb),.16);
  font-size:22px
}
.summary-card{
  position:relative;
  overflow:hidden
}
.primary-btn,
.profile-photo-button{
  background:var(--primary);
  background:var(--primary);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 9px 20px rgba(var(--theme-rgb),.22)
}
.primary-btn:hover,
.profile-photo-button:hover{
  transform:translateY(-1px);
  filter:saturate(1.06) brightness(.98)
}
.secondary-btn,
.row-actions button,
table button{
  background:var(--theme-soft);
  color:var(--primary2);
  border:1px solid var(--theme-border)
}
.secondary-btn:hover,
.row-actions button:hover,
table button:hover{
  background:var(--theme-pale);
  border-color:var(--primary)
}
input,
select,
textarea{
  border-color:var(--theme-border);
  background:#fffdfd
}
input:focus,
select:focus,
textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(var(--theme-rgb),.13)
}
.eyebrow{
  color:var(--primary2)
}
.badge{
  background:var(--theme-soft);
  color:var(--primary2)
}
.calendar-card{
  border-color:var(--theme-border)
}
.calendar-weekdays,
.calendar-day-empty{
  background:var(--theme-pale)
}
.calendar-day:hover,
.calendar-day:focus{
  background:var(--theme-soft);
  box-shadow:inset 0 0 0 2px rgba(var(--theme-rgb),.24)
}
.calendar-today{
  background:var(--theme-soft);
  box-shadow:inset 0 0 0 2px var(--primary)
}
.calendar-add-hint{
  background:var(--theme-soft);
  color:var(--primary2)
}
.client-card{
  overflow:hidden;
  position:relative
}
.client-card::after{
  content:"";
  position:absolute;
  width:76px;
  height:76px;
  right:-32px;
  bottom:-34px;
  border-radius:50%;
  background:rgba(var(--theme-rgb),.08)
}
.client-card-active{
  border-top:4px solid var(--primary)
}
.client-card-paid{
  border-top:4px solid #6bb79b
}
.client-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px
}
.client-card-top h3{
  margin:2px 0 0
}
.client-card-kicker{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase
}
.client-status{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900
}
.client-status.unpaid{
  background:#ffe2ef;
  color:#ad356b
}
.client-status.paid{
  background:#dff7ed;
  color:#317d67
}
.client-card-actions{
  margin-top:14px;
  position:relative;
  z-index:1
}
.show-all-clients{
  display:flex;
  justify-content:center;
  margin-top:18px
}
.client-popup-toolbar{
  margin-bottom:16px;
  padding:14px;
  border:1px solid var(--theme-border);
  border-radius:16px;
  background:var(--theme-pale)
}
.client-grid-popup{
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.theme-preset-list{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:9px;
  margin-top:8px
}
.profile-field-label{
  display:block;
  font-size:13px;
  font-weight:800
}
.theme-preset{
  display:grid;
  justify-items:center;
  gap:6px;
  padding:9px 5px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#fff;
  color:var(--muted)
}
.theme-preset span{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--preset-color);
  box-shadow:0 0 0 3px #fff,0 0 0 4px var(--theme-border)
}
.theme-preset small{
  font-size:9px;
  text-align:center
}
.theme-preset.active{
  border-color:var(--preset-color);
  background:color-mix(in srgb,var(--preset-color) 11%,white);
  color:var(--text);
  transform:translateY(-1px)
}
.theme-preview-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--preview-theme) 38%,white);
  background:#fffaf0
}
.theme-preview-card>span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--preview-theme);
  color:#fff;
  font-size:22px
}
.theme-preview-card div{
  display:grid;
  gap:3px
}
.theme-preview-card small{
  color:var(--muted);
  line-height:1.35
}
.auth-body{
  background:#53634d
}
.auth-brand-panel{
  background:var(--primary2)
}
@media(max-width:1180px){
  .client-grid-popup{grid-template-columns:repeat(2,minmax(0,1fr))}
  .theme-preset-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:580px){
  .client-grid-popup{grid-template-columns:1fr}
  .theme-preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{
  body{
    background:#fff!important
  }
  body::before,
  body::after{
    display:none!important
  }
  .invoice-paper{
    --primary:#d9468d;
    --primary2:#8b2d62;
    --theme-rgb:217,70,141
  }
}

/* =========================================================
   TEMA ALAM BUKU CERITA — WARNA DATAR TANPA GRADASI
   ========================================================= */
:root{
  --bg:#f3eddd;
  --panel:#fffdf5;
  --text:#3f4938;
  --muted:#7a7767;
  --border:#d8cdb3;
  --primary:#7a8f62;
  --primary2:#475c45;
  --accent:#c18a52;
  --theme-soft:#e8eddc;
  --theme-pale:#f8f3e5;
  --theme-border:#d4c6a7;
  --theme-rgb:122,143,98;
  --danger:#b85c4b;
  --success:#557b62;
  --shadow:0 9px 24px rgba(78,73,53,.10);
  --radius:20px
}
html{
  background:#f3eddd
}
body{
  background-color:var(--bg)!important;
  background-image:none!important;
  color:var(--text);
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif
}
body::before{
  content:"🍃";
  top:5%;
  right:3%;
  color:rgba(81,103,69,.16);
  font-size:72px;
  transform:rotate(12deg)
}
body::after{
  content:"🌿";
  left:2%;
  bottom:4%;
  color:rgba(128,112,73,.15);
  font-size:66px;
  transform:rotate(-10deg)
}
h1,h2,h3,
.topbar h1,
.card h2,
.card h3{
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:-.025em
}
.sidebar{
  background-color:color-mix(in srgb,var(--primary) 48%,#40503d)!important;
  background-image:none!important;
  border-right:2px solid #d7c6a1;
  box-shadow:7px 0 20px rgba(73,78,55,.12)
}
.sidebar::before{
  content:"";
  position:absolute;
  inset:10px;
  pointer-events:none;
  border:1px solid rgba(255,248,225,.18);
  border-radius:20px
}
.sidebar::after{
  content:"🍂  •  🌱  •  🍄";
  color:rgba(255,250,231,.55);
  letter-spacing:.22em
}
.sidebar-brand .brand-mark{
  background:#fff7df;
  color:var(--primary2);
  border:2px solid #e4d2a7;
  box-shadow:3px 4px 0 rgba(61,74,52,.2);
  transform:rotate(-2deg)
}
.profile-box,
.active-profile-summary{
  background-color:rgba(255,249,226,.12)!important;
  background-image:none!important;
  border-color:rgba(255,247,220,.24)
}
nav button:hover,
nav button.active{
  background-color:rgba(255,248,223,.18)!important;
  background-image:none!important;
  border-color:rgba(255,248,223,.24);
  box-shadow:none
}
.content{
  position:relative
}
.card,
.summary-card,
.client-card,
.budget-card,
.shopping-history-card,
.report-paper,
.modal,
.auth-shell{
  background-color:var(--panel)!important;
  background-image:none!important;
  border:1px solid var(--theme-border);
  border-radius:22px 18px 24px 17px;
  box-shadow:var(--shadow)
}
.card:nth-child(even),
.summary-card:nth-child(even),
.client-card:nth-child(even){
  border-radius:17px 23px 18px 22px
}
.kawaii-section::before{
  content:"🌱";
  color:rgba(82,108,71,.2);
  font-size:28px
}
.summary-card::after{
  content:"🍂";
  color:rgba(158,119,75,.17);
  font-size:20px
}
.primary-btn,
.profile-photo-button{
  background-color:var(--primary)!important;
  background-image:none!important;
  color:#fffdf2;
  border:1px solid color-mix(in srgb,var(--primary) 65%,#3d4b38);
  box-shadow:3px 4px 0 color-mix(in srgb,var(--primary) 45%,#45513c)
}
.primary-btn:hover,
.profile-photo-button:hover{
  background-color:var(--primary2)!important;
  transform:translate(1px,1px);
  box-shadow:2px 3px 0 color-mix(in srgb,var(--primary) 40%,#45513c);
  filter:none
}
.secondary-btn,
.row-actions button,
table button{
  background-color:var(--theme-soft)!important;
  background-image:none!important;
  color:var(--primary2);
  border:1px solid var(--theme-border);
  box-shadow:none
}
.secondary-btn:hover,
.row-actions button:hover,
table button:hover{
  background-color:#f1ead8!important;
  border-color:var(--primary)
}
.danger-btn,
.row-actions button.danger{
  background-color:#f4dfd5!important;
  color:#914c3f;
  border-color:#dfb9aa
}
input,
select,
textarea{
  background-color:#fffdf6!important;
  background-image:none!important;
  border-color:var(--theme-border);
  border-radius:14px 11px 15px 12px
}
input:focus,
select:focus,
textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(var(--theme-rgb),.12)
}
.table-wrap{
  border-color:var(--theme-border);
  border-radius:18px 14px 18px 14px
}
th{
  background-color:#eee7d3!important;
  background-image:none!important;
  color:#686a57
}
td{
  border-bottom-color:#e6dcc5
}
tbody tr:hover td{
  background-color:#fbf7ea
}
.badge{
  background-color:var(--theme-soft)!important;
  background-image:none!important;
  color:var(--primary2);
  border:1px solid var(--theme-border)
}
.badge.ok{
  background-color:#dfeade!important;
  color:#426651
}
.badge.warn{
  background-color:#f1e5bd!important;
  color:#80642d
}
.badge.bad{
  background-color:#f1d8cd!important;
  color:#8f493e
}
.empty{
  background-color:#faf6e9!important;
  background-image:none!important;
  border-color:#cbbf9f
}
.progress span{
  background-color:var(--accent)!important;
  background-image:none!important
}
.calendar-card,
.calendar-weekdays,
.calendar-day,
.calendar-day-empty,
.calendar-today{
  background-image:none!important
}
.calendar-weekdays,
.calendar-day-empty{
  background-color:#eee6d1!important
}
.calendar-day{
  background-color:#fffdf5!important
}
.calendar-day:hover,
.calendar-day:focus{
  background-color:var(--theme-soft)!important;
  box-shadow:inset 0 0 0 2px rgba(var(--theme-rgb),.22)
}
.calendar-today{
  background-color:#e2ead8!important;
  box-shadow:inset 0 0 0 2px var(--primary)
}
.calendar-add-hint,
.calendar-help strong,
.expense-row-number{
  background-color:var(--theme-soft)!important;
  color:var(--primary2)
}
.calendar-event.pribadi{
  background:#dce8e2;
  border-color:#66877e
}
.calendar-event.akademik{
  background:#e7dfeb;
  border-color:#877792
}
.calendar-event.pekerjaan{
  background:#dfe9d6;
  border-color:#6d8a5b
}
.calendar-event.lainnya{
  background:#efe3c6;
  border-color:#aa804d
}
.upcoming-item,
.expense-entry-row,
.shopping-history-card,
.plan-history-search,
.client-popup-toolbar,
.profile-photo-editor{
  background-color:#fbf7ea!important;
  background-image:none!important;
  border-color:var(--theme-border)
}
.client-card::after{
  background-color:rgba(117,134,88,.09)
}
.client-card-active{
  border-top-color:var(--primary)
}
.client-card-paid{
  border-top-color:#66856d
}
.client-status.unpaid{
  background:#efe0c5;
  color:#825e2f
}
.client-status.paid{
  background:#dce9dc;
  color:#426850
}
.theme-preset,
.theme-preview-card{
  background-color:#fffaf0!important;
  background-image:none!important;
  border-color:var(--theme-border)
}
.theme-preset.active{
  background-color:#eee8d7!important;
  transform:translateY(-1px)
}
.theme-preset span{
  box-shadow:0 0 0 3px #fffaf0,0 0 0 4px #bfb394
}
.theme-preview-card{
  border-color:color-mix(in srgb,var(--preview-theme) 42%,#cfc2a3)
}
.theme-preview-card>span{
  background-color:var(--preview-theme);
  border:1px solid color-mix(in srgb,var(--preview-theme) 55%,#42523e);
  box-shadow:3px 3px 0 rgba(86,79,56,.18)
}
.auth-body{
  background-color:#53634d!important;
  background-image:none!important
}
.auth-brand-panel{
  background-color:color-mix(in srgb,var(--primary) 42%,#42503d)!important;
  background-image:none!important
}
.auth-card{
  background:#fffdf5
}
.local-badge{
  background-color:rgba(255,249,225,.12)!important;
  background-image:none!important
}
.modal-backdrop{
  background:rgba(47,53,41,.58)
}
.toast{
  background:#40503f;
  border:1px solid #79866d
}
.toast.error{
  background:#8b4b40
}
.toast.success{
  background:#4d735b
}
.invoice-paper,
.report-paper{
  background-color:#fffdf6!important;
  background-image:none!important
}
@media print{
  body{
    background:#fff!important
  }
  .invoice-paper{
    --primary:#6f805d;
    --primary2:#465843;
    --theme-rgb:111,128,93
  }
}

/* =========================================================
   KONTRAS ADAPTIF, SUMBER DANA, ASET, SETTINGS, DAN ANGGARAN
   ========================================================= */
:root{--on-primary:#fffdf4;--sidebar-bg:#475c45;--sidebar-text:#fffdf4;--sidebar-muted:#d9e1d3}
.sidebar{background-color:var(--sidebar-bg)!important;color:var(--sidebar-text)!important}
.sidebar strong,.sidebar label,.sidebar nav button,.sidebar .lock-btn,.sidebar select,.sidebar .icon-btn{color:var(--sidebar-text)!important}
.sidebar span,.sidebar small,.active-profile-copy small{color:var(--sidebar-muted)!important}
.sidebar select{background-color:color-mix(in srgb,var(--sidebar-bg) 72%,#fff)!important;border-color:color-mix(in srgb,var(--sidebar-text) 28%,transparent)!important}
.primary-btn,.profile-photo-button,.calendar-today .calendar-date-number{color:var(--on-primary)!important}
.brand-mark{color:var(--primary2)!important;background:#fff8e6!important}
.dashboard-month-note,.info-strip{padding:12px 15px;border:1px solid var(--theme-border);border-radius:15px;background:var(--theme-pale);color:var(--text)}
.compact-transaction-list{display:grid;gap:8px}.compact-transaction-list>div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--theme-border)}.compact-transaction-list>div:last-child{border-bottom:0}.compact-transaction-list span{display:grid;gap:2px}.compact-transaction-list small{color:var(--muted)}
.settings-tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.settings-tile{display:grid;grid-template-columns:48px minmax(0,1fr);gap:13px;align-items:center;padding:18px;border:1px solid var(--theme-border);border-radius:20px;background:var(--panel);color:var(--text);text-align:left;box-shadow:var(--shadow)}.settings-tile:hover{border-color:var(--primary);transform:translateY(-1px)}.settings-tile>span{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:var(--theme-soft);color:var(--primary2);font-size:22px;font-weight:900}.settings-tile div{display:grid;gap:4px}.settings-tile small{color:var(--muted)}.danger-setting>span{background:#f3ddd4;color:#974c40}
.settings-popup-head{display:flex;justify-content:flex-end;margin-bottom:14px}.funding-source-settings-list{display:grid;gap:10px}.source-setting-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--theme-border);border-radius:16px;background:var(--theme-pale)}.source-setting-card div{display:grid;gap:3px}.source-setting-card small{color:var(--muted)}.source-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--theme-soft);color:var(--primary2);font-size:20px;font-weight:900}
.asset-source-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.asset-source-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:16px;border:1px solid var(--theme-border);border-radius:19px;background:var(--theme-pale)}.asset-source-card>div{display:grid;gap:4px}.asset-source-card h3{margin:0}.asset-source-card strong{font-size:22px}.asset-source-card span:last-child{color:var(--muted);font-size:11px}.asset-source-card.inactive{opacity:.58}.investment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.investment-card{padding:16px;border:1px solid var(--theme-border);border-radius:19px;background:var(--theme-pale)}.investment-card h3{margin:8px 0 2px}.investment-type{display:inline-flex;padding:5px 8px;border-radius:999px;background:var(--theme-soft);color:var(--primary2);font-size:10px;font-weight:900}
.budget-usage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.budget-usage-card{display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px;align-items:center;padding:14px;border:1px solid var(--theme-border);border-radius:19px;background:var(--theme-pale)}.budget-usage-copy h3{margin:0}.budget-donut{width:108px;height:108px}.budget-donut-track,.budget-donut-value{fill:none;stroke-width:12}.budget-donut-track{stroke:#ded5bd}.budget-donut-value{stroke:var(--primary);stroke-linecap:round}.budget-donut text{font-size:18px;font-weight:900;fill:var(--text)}
.asset-source-row{grid-template-columns:34px minmax(145px,1.3fr) minmax(140px,1fr) minmax(110px,.7fr) minmax(145px,1fr) minmax(130px,.9fr) minmax(130px,.9fr) 38px}
@media(max-width:1180px){.settings-tile-grid,.asset-source-grid,.investment-grid,.budget-usage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.asset-source-row{grid-template-columns:30px repeat(2,minmax(170px,1fr)) 38px}}
@media(max-width:720px){.settings-tile-grid,.asset-source-grid,.investment-grid,.budget-usage-grid{grid-template-columns:1fr}.budget-usage-card{grid-template-columns:100px minmax(0,1fr)}.source-setting-card{grid-template-columns:42px minmax(0,1fr) auto}.source-setting-card>button{grid-column:2/4}.asset-source-row{grid-template-columns:28px 1fr 36px}.asset-source-row label,.asset-source-row .expense-notes{grid-column:2}.asset-source-row .expense-remove-row{grid-column:3;grid-row:1}}
.invoice-payment-job-list{display:grid;gap:9px}.invoice-payment-job-list button{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;border:1px solid var(--theme-border);border-radius:15px;background:var(--theme-pale);color:var(--text);text-align:left}.invoice-payment-job-list button:hover{border-color:var(--primary)}.invoice-payment-job-list span{display:grid;gap:3px}.invoice-payment-job-list small{color:var(--muted)}

/* =========================================================
   HEADER WAKTU DAN INPUT UANG
   ========================================================= */
.today-clock{
  min-width:225px;
  display:grid;
  gap:2px;
  padding:8px 13px;
  border:1px solid var(--theme-border);
  border-radius:14px;
  background:#fffdf5;
  text-align:right;
  color:var(--text)
}
.today-clock span{
  font-size:11px;
  color:var(--muted);
  text-transform:capitalize
}
.today-clock strong{
  font-size:13px;
  font-variant-numeric:tabular-nums
}
input[data-money-input="true"]{
  text-align:right;
  font-variant-numeric:tabular-nums;
  letter-spacing:.015em
}
@media(max-width:760px){
  .top-actions{
    align-items:stretch;
    flex-wrap:wrap
  }
  .today-clock{
    min-width:0;
    flex:1 1 100%;
    text-align:left
  }
}


/* =========================================================
   PELUNASAN KLIEN DAN INVOICE PROFESIONAL
   ========================================================= */
.client-payment-summary{
  display:grid;
  gap:7px;
  padding:15px;
  border:1px solid var(--theme-border);
  border-radius:16px;
  background:var(--theme-pale)
}
.client-payment-job-preview{
  max-height:240px;
  overflow:auto;
  display:grid;
  margin-top:14px;
  border:1px solid var(--theme-border);
  border-radius:15px;
  background:#fff
}
.client-payment-job-preview>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 13px;
  border-bottom:1px solid var(--theme-border)
}
.client-payment-job-preview>div:last-child{
  border-bottom:0
}
.client-payment-job-preview span{
  display:grid;
  gap:2px
}
.client-payment-job-preview small{
  color:var(--muted)
}
.invoice-pro{
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:38px;
  background:#fff;
  color:#172033;
  border:1px solid #d8deea;
  border-radius:4px;
  box-shadow:0 18px 50px rgba(22,32,51,.12);
  font-family:Arial,"Segoe UI",sans-serif
}
.invoice-pro *{
  box-sizing:border-box
}
.invoice-pro-header{
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding-bottom:26px;
  border-bottom:3px solid #1f4f46
}
.invoice-pro-brand{
  display:flex;
  align-items:center;
  gap:13px
}
.invoice-pro-logo{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#1f4f46;
  color:#fff;
  font-size:20px;
  font-weight:900;
  letter-spacing:.04em
}
.invoice-pro-brand div{
  display:grid;
  gap:4px
}
.invoice-pro-brand strong{
  color:#172033;
  font-size:17px;
  letter-spacing:.04em
}
.invoice-pro-brand small{
  color:#667085
}
.invoice-pro-title{
  display:grid;
  justify-items:end;
  gap:5px;
  text-align:right
}
.invoice-pro-title>span{
  color:#1f4f46;
  font-size:30px;
  font-weight:900;
  letter-spacing:.08em
}
.invoice-pro-title>strong{
  color:#475467;
  font-size:13px
}
.invoice-pro-status{
  margin-top:5px;
  padding:6px 10px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.08em
}
.invoice-pro-status.paid{
  background:#d9f2e7;
  color:#176b4e
}
.invoice-pro-status.partial{
  background:#fff0c2;
  color:#805d12
}
.invoice-pro-status.unpaid{
  background:#ffe0df;
  color:#9b2c2c
}
.invoice-pro-parties{
  display:grid;
  grid-template-columns:1fr 1fr 1.15fr;
  gap:22px;
  padding:27px 0
}
.invoice-pro-parties>div{
  min-width:0
}
.invoice-pro-label{
  display:block;
  margin-bottom:7px;
  color:#667085;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em
}
.invoice-pro-parties h3{
  margin:0 0 5px;
  color:#172033;
  font-size:17px
}
.invoice-pro-parties p{
  margin:0;
  color:#667085;
  font-size:12px;
  line-height:1.5
}
.invoice-pro-dates{
  display:grid;
  gap:10px;
  padding:15px;
  border-radius:8px;
  background:#f4f7f8
}
.invoice-pro-dates div{
  display:flex;
  justify-content:space-between;
  gap:12px
}
.invoice-pro-dates span{
  color:#667085;
  font-size:11px
}
.invoice-pro-dates strong{
  color:#172033;
  font-size:11px;
  text-align:right
}
.invoice-pro-table-wrap{
  overflow:hidden;
  border:1px solid #d8deea;
  border-radius:8px
}
.invoice-pro-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px
}
.invoice-pro-table th{
  padding:12px;
  background:#1f4f46!important;
  color:#fff;
  border:0;
  text-align:right;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase
}
.invoice-pro-table th:nth-child(1),
.invoice-pro-table th:nth-child(2){
  text-align:left
}
.invoice-pro-table td{
  padding:13px 12px;
  border-bottom:1px solid #e6eaf0;
  color:#344054;
  text-align:right;
  vertical-align:top
}
.invoice-pro-table td:nth-child(1),
.invoice-pro-table td:nth-child(2){
  text-align:left
}
.invoice-pro-table tbody tr:last-child td{
  border-bottom:0
}
.invoice-pro-table td strong{
  display:block;
  color:#172033
}
.invoice-pro-table td small{
  display:block;
  margin-top:3px;
  color:#667085
}
.invoice-pro-empty{
  padding:30px!important;
  text-align:center!important;
  color:#667085!important
}
.invoice-pro-bottom{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:28px;
  align-items:start;
  margin-top:25px
}
.invoice-pro-notes{
  min-width:0
}
.invoice-pro-notes>p{
  margin:0;
  color:#667085;
  font-size:12px;
  line-height:1.6
}
.invoice-pro .invoice-payment-section{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #d8deea
}
.invoice-pro .invoice-payment-heading{
  display:none
}
.invoice-pro .invoice-payment-grid.with-two-methods{
  grid-template-columns:1fr 145px
}
.invoice-pro .invoice-bank-card,
.invoice-pro .invoice-qris-card{
  border:1px solid #d8deea;
  border-radius:8px;
  padding:13px;
  box-shadow:none
}
.invoice-pro .invoice-account-number{
  font-size:19px
}
.invoice-pro .invoice-qris-card img{
  width:115px;
  max-height:145px
}
.invoice-pro-total-box{
  padding:17px;
  border-radius:8px;
  background:#f4f7f8
}
.invoice-pro-total-box>div{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:8px 0;
  color:#475467;
  font-size:12px
}
.invoice-pro-total-box strong{
  color:#172033
}
.invoice-pro-grand-total{
  margin-top:7px;
  padding-top:14px!important;
  border-top:2px solid #1f4f46
}
.invoice-pro-grand-total span,
.invoice-pro-grand-total strong{
  color:#1f4f46;
  font-size:17px;
  font-weight:900
}
.invoice-pro-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:32px;
  padding-top:17px;
  border-top:1px solid #d8deea;
  color:#667085;
  font-size:11px
}
.invoice-pro-footer strong{
  color:#1f4f46
}
.invoice-action-bar{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px
}
.invoice-share-choice{
  display:grid;
  gap:13px
}
.invoice-share-card{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  padding:14px;
  border:1px solid var(--theme-border);
  border-radius:16px;
  background:var(--theme-pale)
}
.invoice-share-card>div{
  display:grid;
  gap:4px
}
.invoice-share-card small{
  color:var(--muted);
  line-height:1.45
}
.invoice-share-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--primary);
  color:var(--on-primary,#fff);
  font-size:13px;
  font-weight:900
}
.invoice-wa-fields label{
  margin-top:7px
}
.invoice-share-note{
  margin-top:14px;
  padding:12px;
  border:1px solid var(--theme-border);
  border-radius:13px;
  background:#fff8df;
  color:#6c5c2f;
  font-size:11px;
  line-height:1.55
}
.invoice-share-note code{
  font-weight:900
}
.invoice-print-body{
  margin:0;
  padding:18px;
  background:#fff
}
.invoice-print-body .invoice-pro{
  box-shadow:none;
  border:0
}
@media(max-width:820px){
  .invoice-pro{
    padding:22px
  }
  .invoice-pro-header,
  .invoice-pro-footer{
    flex-direction:column
  }
  .invoice-pro-title{
    justify-items:start;
    text-align:left
  }
  .invoice-pro-parties{
    grid-template-columns:1fr
  }
  .invoice-pro-bottom{
    grid-template-columns:1fr
  }
  .invoice-share-card{
    grid-template-columns:42px minmax(0,1fr)
  }
  .invoice-share-card>button{
    grid-column:1/-1
  }
}
@media print{
  .invoice-action-bar{
    display:none!important
  }
  .invoice-pro{
    max-width:none;
    padding:0;
    border:0;
    box-shadow:none
  }
  .invoice-pro-table tr,
  .invoice-pro-total-box,
  .invoice-payment-section{
    break-inside:avoid
  }
}

/* =========================================================
   TAGIHAN PER BULAN, SHORTCUT PIUTANG, DAN PEMILIH PERIODE
   ========================================================= */
.global-month-picker{
  min-width:235px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 13px;
  border:2px solid var(--theme-border);
  border-radius:16px;
  background:#fffdf5;
  color:var(--text);
  box-shadow:0 5px 14px rgba(61,72,52,.08)
}
.global-month-icon{
  flex:0 0 auto;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--primary);
  color:var(--on-primary,#fff);
  font-size:25px;
  line-height:1
}
.global-month-picker label{
  min-width:0;
  flex:1;
  display:grid;
  gap:1px
}
.global-month-picker small{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase
}
.global-month-picker #globalMonth{
  width:100%;
  min-height:31px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text);
  font-size:16px;
  font-weight:900;
  cursor:pointer
}
.global-month-picker #globalMonth::-webkit-calendar-picker-indicator{
  width:24px;
  height:24px;
  cursor:pointer;
  opacity:.85
}
.calendar-nav-large{
  width:52px;
  height:52px;
  font-size:32px;
  line-height:1;
  font-weight:700
}
.calendar-today-large{
  min-height:52px;
  padding-inline:19px;
  font-size:14px
}
.client-month-badge{
  display:inline-flex;
  width:max-content;
  margin:7px 0 3px;
  padding:5px 9px;
  border:1px solid var(--theme-border);
  border-radius:999px;
  background:var(--theme-soft);
  color:var(--primary2);
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em
}
.dashboard-shortcut-card{
  appearance:none;
  width:100%;
  text-align:left;
  color:var(--text);
  cursor:pointer
}
.dashboard-shortcut-card:hover{
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 13px 28px rgba(var(--theme-rgb),.15)
}
.dashboard-shortcut-card::after{
  content:"→";
  position:absolute;
  right:15px;
  bottom:12px;
  color:var(--primary);
  font-size:22px;
  font-weight:900
}
.invoice-date-list-label{
  display:block;
  margin-bottom:9px;
  color:var(--text);
  font-size:13px;
  font-weight:900
}
.invoice-date-choice-list{
  max-height:320px;
  overflow:auto;
  display:grid;
  gap:8px;
  padding:3px
}
.invoice-date-choice{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 14px;
  border:1px solid var(--theme-border);
  border-radius:14px;
  background:#fffdf6;
  cursor:pointer
}
.invoice-date-choice:hover{
  border-color:var(--primary);
  background:var(--theme-pale)
}
.invoice-date-choice:has(input:checked){
  border-color:var(--primary);
  background:var(--theme-soft);
  box-shadow:0 0 0 2px rgba(var(--theme-rgb),.10)
}
.invoice-date-choice input{
  width:20px;
  height:20px;
  flex:0 0 auto;
  accent-color:var(--primary)
}
.invoice-date-choice span{
  display:grid;
  gap:3px
}
.invoice-date-choice strong{
  color:var(--text)
}
.invoice-date-choice small{
  color:var(--muted)
}
@media(max-width:820px){
  .global-month-picker{
    flex:1 1 260px;
    min-width:0
  }
}
@media(max-width:580px){
  .global-month-picker{
    width:100%
  }
  .calendar-navigation{
    width:100%;
    display:grid;
    grid-template-columns:52px 1fr 52px
  }
}

/* =========================================================
   MENU TERPISAH, LOADING, JAM BESAR, DAN GRAFIK TAHUNAN
   ========================================================= */
.sidebar{
  padding-top:18px
}
.profile-box{
  margin-top:0
}
.app-loading-overlay{
  position:fixed;
  inset:0;
  z-index:5000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(47,55,42,.68);
  backdrop-filter:blur(5px)
}
.app-loading-overlay.hidden{
  display:none
}
.app-loading-card{
  width:min(330px,92vw);
  display:grid;
  justify-items:center;
  gap:8px;
  padding:28px;
  border:2px solid #dfd2b4;
  border-radius:24px 19px 25px 18px;
  background:#fffaf0;
  color:#3f4938;
  box-shadow:0 24px 70px rgba(24,31,22,.28);
  text-align:center
}
.app-loading-character{
  font-size:50px;
  animation:ofedaLoadingBounce .9s ease-in-out infinite alternate
}
.app-loading-card strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:27px;
  letter-spacing:.04em
}
.app-loading-card small{
  color:#7a7767
}
.app-loading-dots{
  display:flex;
  gap:6px;
  margin-top:6px
}
.app-loading-dots i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--primary);
  animation:ofedaLoadingDots .9s ease-in-out infinite
}
.app-loading-dots i:nth-child(2){animation-delay:.15s}
.app-loading-dots i:nth-child(3){animation-delay:.3s}
@keyframes ofedaLoadingBounce{
  from{transform:translateY(0) rotate(-4deg)}
  to{transform:translateY(-9px) rotate(4deg)}
}
@keyframes ofedaLoadingDots{
  0%,100%{opacity:.35;transform:scale(.75)}
  50%{opacity:1;transform:scale(1.15)}
}
.today-clock{
  min-width:315px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:11px 16px;
  border:2px solid var(--theme-border);
  border-radius:18px 14px 19px 15px;
  background:#fffdf5;
  box-shadow:0 7px 18px rgba(61,72,52,.10);
  text-align:left
}
.today-clock-icon{
  flex:0 0 auto;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:var(--primary);
  color:var(--on-primary,#fff);
  font-size:29px;
  line-height:1
}
.today-clock>div{
  min-width:0;
  display:grid;
  gap:3px
}
.today-clock>div>span{
  overflow:hidden;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  text-overflow:ellipsis;
  text-transform:capitalize;
  white-space:nowrap
}
.today-clock>div>strong{
  color:var(--text);
  font-size:20px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.025em
}
.history-mini-button{
  min-height:34px;
  padding:7px 10px;
  border:1px solid var(--theme-border);
  border-radius:11px;
  background:var(--theme-soft);
  color:var(--primary2);
  font-size:11px;
  font-weight:900;
  cursor:pointer
}
.billing-history-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:12px;
  margin-bottom:16px;
  padding:14px;
  border:1px solid var(--theme-border);
  border-radius:16px;
  background:var(--theme-pale)
}
.billing-history-summary{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:13px;
  padding:11px 13px;
  border-radius:13px;
  background:var(--theme-soft);
  color:var(--text)
}
.billing-history-summary span{
  color:var(--muted)
}
.billing-history-table{
  margin-top:18px
}
.client-bill-shortcut{
  width:100%;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--theme-border);
  border-radius:14px;
  background:#fffaf0;
  color:var(--text);
  box-shadow:0 6px 14px rgba(61,72,52,.08);
  text-align:left;
  cursor:pointer
}
.client-bill-shortcut:hover{
  border-color:var(--primary);
  transform:translateY(-1px)
}
.client-bill-shortcut-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--primary);
  color:var(--on-primary,#fff);
  font-size:19px
}
.client-bill-shortcut>span:nth-child(2){
  display:grid;
  gap:2px
}
.client-bill-shortcut small{
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase
}
.client-bill-shortcut strong{
  font-size:12px
}
.client-bill-shortcut em{
  color:var(--primary2);
  font-size:11px;
  font-style:normal;
  font-weight:900
}
.client-bill-shortcut>b{
  color:var(--primary);
  font-size:24px
}
.annual-analytics-panel{
  overflow:hidden
}
.annual-chart-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px
}
.annual-chart-card{
  min-width:0;
  padding:17px;
  border:1px solid var(--theme-border);
  border-radius:18px;
  background:#fffdf6
}
.annual-chart-card header{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:8px
}
.annual-chart-card h3{
  margin:0;
  font-size:17px
}
.annual-chart-card p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:11px
}
.annual-chart-card header>span{
  height:max-content;
  padding:5px 8px;
  border-radius:999px;
  background:var(--theme-soft);
  color:var(--primary2);
  font-size:9px;
  font-weight:900
}
.annual-chart-scroll{
  width:100%;
  overflow-x:auto
}
.annual-chart-svg{
  width:100%;
  min-width:650px;
  display:block;
  overflow:visible
}
.annual-grid-line{
  stroke:#e3dcc9;
  stroke-width:1;
  stroke-dasharray:4 5
}
.annual-axis-label,
.annual-month-label{
  fill:#7a7767;
  font-size:10px
}
.annual-value-label{
  fill:#4d5548;
  font-size:9px;
  font-weight:800
}
.annual-line{
  fill:none;
  stroke:var(--chart-color,var(--primary));
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round
}
.annual-area{
  fill:var(--chart-soft,rgba(var(--theme-rgb),.10))
}
.annual-point{
  fill:#fff;
  stroke:var(--chart-color,var(--primary));
  stroke-width:4
}
.asset-chart{
  --chart-color:#647d54;
  --chart-soft:rgba(100,125,84,.12)
}
.income-chart{
  --chart-color:#3f7d68;
  --chart-soft:rgba(63,125,104,.11)
}
.expense-chart{
  --chart-color:#b26652;
  --chart-soft:rgba(178,102,82,.10)
}
@media(max-width:900px){
  .today-clock{
    min-width:260px
  }
  .billing-history-toolbar{
    grid-template-columns:1fr
  }
}
@media(max-width:680px){
  .today-clock{
    width:100%;
    min-width:0
  }
  .today-clock>div>strong{
    font-size:17px
  }
  .billing-history-summary{
    flex-direction:column
  }
}

/* =========================================================
   EXPORT INVOICE A4 DAN MUTASI SUMBER DANA
   ========================================================= */
.invoice-pdf-stage{
  position:fixed;
  z-index:-10000;
  left:-100000px;
  top:0;
  width:210mm;
  min-height:297mm;
  overflow:visible;
  background:#fff;
  pointer-events:none
}
.invoice-pro.invoice-pdf-export{
  width:210mm!important;
  min-width:210mm!important;
  max-width:210mm!important;
  min-height:297mm!important;
  margin:0!important;
  padding:13mm 13mm 12mm!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  background:#fff!important;
  color:#172033!important;
  font-family:Arial,"Segoe UI",sans-serif!important
}
.invoice-pdf-export .invoice-pro-header{
  gap:10mm;
  padding-bottom:7mm
}
.invoice-pdf-export .invoice-pro-parties{
  grid-template-columns:1fr 1fr 1.18fr!important;
  gap:7mm!important;
  padding:7mm 0!important
}
.invoice-pdf-export .invoice-pro-table-wrap{
  overflow:visible!important
}
.invoice-pdf-export .invoice-pro-table{
  table-layout:fixed;
  font-size:9.2pt
}
.invoice-pdf-export .invoice-pro-table th{
  padding:3.2mm 2.7mm!important;
  font-size:7.5pt!important
}
.invoice-pdf-export .invoice-pro-table td{
  padding:3.2mm 2.7mm!important;
  font-size:8.6pt!important;
  word-break:break-word
}
.invoice-pdf-export .invoice-pro-table th:nth-child(1),
.invoice-pdf-export .invoice-pro-table td:nth-child(1){
  width:8%
}
.invoice-pdf-export .invoice-pro-table th:nth-child(2),
.invoice-pdf-export .invoice-pro-table td:nth-child(2){
  width:38%
}
.invoice-pdf-export .invoice-pro-table th:nth-child(3),
.invoice-pdf-export .invoice-pro-table td:nth-child(3),
.invoice-pdf-export .invoice-pro-table th:nth-child(4),
.invoice-pdf-export .invoice-pro-table td:nth-child(4),
.invoice-pdf-export .invoice-pro-table th:nth-child(5),
.invoice-pdf-export .invoice-pro-table td:nth-child(5){
  width:18%
}
.invoice-pdf-export .invoice-pro-bottom{
  grid-template-columns:minmax(0,1fr) 74mm!important;
  gap:8mm!important;
  margin-top:7mm!important
}
.invoice-pdf-export .invoice-pro-total-box{
  padding:4.5mm!important
}
.invoice-pdf-export .invoice-pro-footer{
  margin-top:8mm!important;
  padding-top:4mm!important
}
.invoice-pdf-export .invoice-payment-grid.with-two-methods{
  grid-template-columns:minmax(0,1fr) 38mm!important
}
.invoice-pdf-export .invoice-qris-card img{
  width:30mm!important;
  max-width:30mm!important;
  height:auto!important;
  max-height:38mm!important;
  object-fit:contain!important
}
.invoice-pdf-export .invoice-bank-card,
.invoice-pdf-export .invoice-qris-card{
  padding:3.5mm!important
}
.invoice-pdf-export tr,
.invoice-pdf-export .invoice-pro-header,
.invoice-pdf-export .invoice-pro-parties,
.invoice-pdf-export .invoice-pro-total-box,
.invoice-pdf-export .invoice-payment-section,
.invoice-pdf-export .invoice-pro-footer{
  break-inside:avoid;
  page-break-inside:avoid
}
.asset-source-card-clickable{
  position:relative;
  width:100%;
  appearance:none;
  border:1px solid var(--theme-border);
  color:var(--text);
  text-align:left;
  cursor:pointer
}
.asset-source-card-clickable:hover{
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(var(--theme-rgb),.15)
}
.asset-source-card-clickable:focus-visible{
  outline:3px solid rgba(var(--theme-rgb),.25);
  outline-offset:3px
}
.asset-source-open-hint{
  position:absolute;
  right:13px;
  bottom:11px;
  color:var(--primary2);
  font-size:10px;
  font-weight:900
}
.funding-history-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
  margin-bottom:15px
}
.funding-history-summary article{
  display:grid;
  gap:5px;
  padding:14px;
  border:1px solid var(--theme-border);
  border-radius:15px;
  background:var(--theme-pale)
}
.funding-history-summary span{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase
}
.funding-history-summary strong{
  color:var(--text);
  font-size:17px
}
.funding-history-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) 200px 180px;
  gap:11px;
  margin-bottom:14px;
  padding:13px;
  border:1px solid var(--theme-border);
  border-radius:15px;
  background:#fffaf0
}
.funding-history-result-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--theme-soft);
  color:var(--text);
  font-size:11px
}
.funding-flow{
  display:inline-flex;
  justify-content:center;
  min-width:58px;
  padding:5px 8px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase
}
.funding-flow.incoming{
  background:#dcebdd;
  color:#356448
}
.funding-flow.outgoing{
  background:#f2dcd3;
  color:#91483b
}
@media(max-width:900px){
  .funding-history-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .funding-history-toolbar{
    grid-template-columns:1fr 1fr
  }
  .funding-history-toolbar label:first-child{
    grid-column:1/-1
  }
}
@media(max-width:580px){
  .funding-history-summary,
  .funding-history-toolbar{
    grid-template-columns:1fr
  }
  .funding-history-toolbar label:first-child{
    grid-column:auto
  }
  .funding-history-result-head{
    flex-direction:column
  }
}

/* =========================================================
   STARTUP ERROR DAN DIAGNOSTIK
   ========================================================= */
.boot{padding:22px}
.boot-error-card{
  width:min(560px,94vw);
  display:grid;
  justify-items:center;
  gap:11px;
  padding:28px;
  border:2px solid var(--theme-border,#d8cdb3);
  border-radius:24px 18px 25px 19px;
  background:#fffaf0;
  color:#3f4938;
  box-shadow:0 22px 70px rgba(37,45,34,.24);
  text-align:center
}
.boot-error-icon{
  width:58px;height:58px;display:grid;place-items:center;
  border-radius:18px;background:#b85c4b;color:#fff;
  font-size:31px;font-weight:900
}
.boot-error-card h2{margin:0}
.boot-error-card p{
  max-width:480px;margin:0;color:#6f695b;
  line-height:1.6;overflow-wrap:anywhere
}
.boot-error-actions{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:9px;margin-top:7px
}
.boot-error-actions a{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none
}
.diagnostic-body{
  min-height:100vh;padding:26px;background:#f3eddd;color:#3f4938
}
.diagnostic-shell{
  width:min(900px,100%);margin:0 auto;display:grid;gap:17px
}
.diagnostic-card{
  padding:20px;border:1px solid #d8cdb3;border-radius:20px;
  background:#fffdf5;box-shadow:0 9px 24px rgba(78,73,53,.10)
}
.diagnostic-list{display:grid;gap:8px}
.diagnostic-item{
  display:grid;grid-template-columns:24px minmax(0,1fr);
  gap:10px;padding:11px;border:1px solid #ddd3bc;
  border-radius:13px;background:#fff
}
.diagnostic-item.ok{border-color:#b9d4bd;background:#f0f8f1}
.diagnostic-item.bad{border-color:#dfb9aa;background:#fff2ed}
.diagnostic-item strong,.diagnostic-item small{display:block}
.diagnostic-item small{
  margin-top:3px;color:#756e5e;overflow-wrap:anywhere
}

/* =========================================================
   LOGIN BRUTALISM
   ========================================================= */
.auth-body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px),
    linear-gradient(rgba(0,0,0,.055) 1px,transparent 1px),
    #f5efda;
  background-size:28px 28px;
  color:#101010
}
.auth-shell{
  position:relative;
  width:min(1080px,100%);
  display:grid;
  grid-template-columns:1.08fr .92fr;
  overflow:visible;
  border:4px solid #101010;
  border-radius:0;
  background:#fffdf2;
  box-shadow:14px 14px 0 #101010
}
.brutal-brand-panel{
  position:relative;
  min-height:590px;
  padding:58px;
  overflow:hidden;
  border-right:4px solid #101010;
  background:#9fbe72;
  color:#101010
}
.brutal-brand-panel::before{
  content:"";
  position:absolute;
  right:-56px;
  bottom:52px;
  width:185px;
  height:185px;
  border:4px solid #101010;
  border-radius:50%;
  background:#ffcf4a
}
.brutal-brand-panel::after{
  content:"";
  position:absolute;
  right:88px;
  top:64px;
  width:86px;
  height:86px;
  border:4px solid #101010;
  background:#ef806f;
  transform:rotate(9deg)
}
.brutal-brand-panel .brand-mark{
  position:relative;
  z-index:2;
  width:88px;
  height:88px;
  border:4px solid #101010;
  border-radius:0;
  background:#fffdf2;
  color:#101010;
  box-shadow:7px 7px 0 #101010;
  font-family:Arial Black,Impact,sans-serif;
  font-size:31px
}
.brutal-brand-panel .eyebrow{
  position:relative;
  z-index:2;
  width:max-content;
  margin:28px 0 0;
  padding:7px 10px;
  border:3px solid #101010;
  background:#fffdf2;
  color:#101010!important;
  font-weight:900;
  letter-spacing:.12em
}
.brutal-brand-panel h1{
  position:relative;
  z-index:2;
  max-width:600px;
  margin:18px 0 0;
  color:#101010;
  font-family:Arial Black,Impact,sans-serif;
  font-size:clamp(42px,6vw,76px);
  line-height:.9;
  letter-spacing:-.055em;
  text-transform:uppercase
}
.brutal-brand-panel .local-badge{
  position:relative;
  z-index:2;
  width:max-content;
  margin-top:26px;
  padding:10px 13px;
  border:3px solid #101010;
  border-radius:0;
  background:#ffcf4a;
  color:#101010;
  box-shadow:5px 5px 0 #101010;
  font-weight:900
}
.brutal-sticker{
  position:absolute;
  z-index:3;
  padding:7px 10px;
  border:3px solid #101010;
  background:#fffdf2;
  color:#101010;
  font-family:Arial Black,Impact,sans-serif;
  font-size:12px;
  letter-spacing:.08em;
  box-shadow:4px 4px 0 #101010
}
.sticker-one{
  right:38px;
  top:190px;
  transform:rotate(8deg)
}
.sticker-two{
  right:145px;
  bottom:72px;
  background:#ef806f;
  transform:rotate(-7deg)
}
.sticker-three{
  left:48px;
  bottom:38px;
  background:#76b7d6;
  transform:rotate(4deg)
}
.brutal-auth-card{
  position:relative;
  padding:64px 52px 50px;
  background:#fffdf2
}
.brutal-card-label{
  position:absolute;
  right:-4px;
  top:-4px;
  padding:8px 13px;
  border:4px solid #101010;
  background:#76b7d6;
  color:#101010;
  font-family:Arial Black,Impact,sans-serif;
  font-size:11px;
  letter-spacing:.08em
}
.brutal-auth-card form{
  gap:17px
}
.brutal-auth-card .eyebrow{
  width:max-content;
  padding:5px 8px;
  border:2px solid #101010;
  background:#ffcf4a;
  color:#101010;
  font-weight:900
}
.brutal-auth-card h2{
  margin:0;
  font-family:Arial Black,Impact,sans-serif;
  font-size:34px;
  letter-spacing:-.035em
}
.brutal-auth-card label{
  gap:7px;
  color:#101010;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase
}
.brutal-auth-card input{
  min-height:50px;
  border:3px solid #101010;
  border-radius:0;
  background:#fff;
  color:#101010;
  box-shadow:4px 4px 0 #101010;
  font-size:16px
}
.brutal-auth-card input:focus{
  border-color:#101010;
  box-shadow:6px 6px 0 #ef806f;
  transform:translate(-1px,-1px)
}
.brutal-auth-card .primary-btn{
  min-height:50px;
  border:3px solid #101010;
  border-radius:0;
  background:#101010;
  color:#fffdf2;
  box-shadow:5px 5px 0 #ef806f;
  font-family:Arial Black,Impact,sans-serif;
  letter-spacing:.03em
}
.brutal-auth-card .primary-btn:hover{
  background:#ef806f;
  color:#101010;
  box-shadow:5px 5px 0 #101010;
  transform:translate(-1px,-1px)
}
.brutal-auth-card .loading{
  padding:18px;
  border:3px solid #101010;
  background:#ffcf4a;
  color:#101010;
  box-shadow:5px 5px 0 #101010;
  font-weight:900
}
.brutal-auth-card .spinner{
  border-color:rgba(0,0,0,.2);
  border-top-color:#101010
}
.brutal-auth-card .message{
  border:3px solid #101010;
  border-radius:0;
  background:#ef806f;
  color:#101010;
  box-shadow:4px 4px 0 #101010;
  font-weight:800
}
.brutal-auth-card>small{
  color:#101010;
  font-weight:800
}

/* =========================================================
   GRAFIK BATANG TAHUNAN
   ========================================================= */
.annual-chart-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px
}
.annual-chart-card{
  border:2px solid var(--theme-border);
  background:#fffdf6
}
.annual-chart-card header{
  align-items:flex-start
}
.annual-chart-svg{
  min-width:860px
}
.annual-bar{
  transition:opacity .18s ease,transform .18s ease;
  transform-box:fill-box;
  transform-origin:center bottom
}
.annual-bar:hover{
  opacity:.78;
  transform:scaleY(1.015)
}
.asset-bar{
  fill:var(--primary)
}
.income-bar{
  fill:#3f7d68
}
.expense-bar{
  fill:#b85c4b
}
.annual-baseline{
  stroke:#7c7565;
  stroke-width:1.5
}
.annual-net-label{
  font-size:9px;
  font-weight:900
}
.annual-net-plus{
  fill:#2f7258
}
.annual-net-minus{
  fill:#a53f36
}
.annual-net-zero{
  fill:#8b8373
}
.annual-chart-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px
}
.annual-chart-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:900
}
.annual-chart-legend i{
  width:12px;
  height:12px;
  display:inline-block;
  border-radius:3px
}
.legend-income{
  background:#3f7d68
}
.legend-expense{
  background:#b85c4b
}
.cashflow-chart .annual-chart-svg{
  min-width:900px
}
@media(max-width:820px){
  .auth-shell{
    grid-template-columns:1fr;
    box-shadow:9px 9px 0 #101010
  }
  .brutal-brand-panel{
    min-height:380px;
    padding:38px 28px 70px;
    border-right:0;
    border-bottom:4px solid #101010
  }
  .brutal-brand-panel h1{
    font-size:clamp(42px,13vw,66px)
  }
  .brutal-auth-card{
    padding:55px 28px 38px
  }
  .sticker-two{
    right:40px
  }
}
@media(max-width:520px){
  .auth-body{
    padding:14px
  }
  .auth-shell{
    box-shadow:7px 7px 0 #101010
  }
  .brutal-brand-panel{
    min-height:340px
  }
  .brutal-brand-panel::after{
    right:35px;
    top:50px
  }
  .sticker-one{
    display:none
  }
  .brutal-auth-card h2{
    font-size:29px
  }
}

/* =========================================================
   PILIHAN TEMA PROFIL
   ========================================================= */
.theme-style-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:8px
}
.theme-style-card{
  width:100%;
  display:grid;
  grid-template-columns:43px minmax(0,1fr);
  align-items:center;
  gap:11px;
  padding:12px;
  border:2px solid var(--theme-border);
  border-radius:15px;
  background:var(--panel);
  color:var(--text);
  text-align:left;
  cursor:pointer
}
.theme-style-card>span{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:2px solid var(--theme-border);
  border-radius:12px;
  background:var(--theme-soft);
  color:var(--primary);
  font-size:20px;
  font-weight:900
}
.theme-style-card>div{
  display:grid;
  gap:3px
}
.theme-style-card small{
  color:var(--muted);
  line-height:1.35
}
.theme-style-card:hover,
.theme-style-card.active{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(var(--theme-rgb),.12)
}
.theme-style-card.active>span{
  background:var(--primary);
  color:var(--on-primary)
}
.classic-theme-controls{
  padding:13px;
  border:1px solid var(--theme-border);
  border-radius:15px;
  background:var(--theme-pale)
}
.theme-preview-card[data-preview-style="brutalism"]{
  border:3px solid #111;
  border-radius:0;
  background:#ffdc4a;
  color:#111;
  box-shadow:7px 7px 0 #111
}
.theme-preview-card[data-preview-style="minimal"]{
  border:1px solid #d9e0e5;
  border-radius:8px;
  background:#fff;
  color:#26333c;
  box-shadow:none
}
.theme-preview-card[data-preview-style="dark"]{
  border-color:#3a455c;
  background:#202838;
  color:#f5f7fb
}
.theme-preview-card[data-preview-style="pastel"]{
  border-color:#dfcedf;
  background:#fbf3f6;
  color:#4f3a4c
}
.theme-preview-card[data-preview-style="retro"]{
  border:2px solid #322e27;
  border-radius:8px;
  background:#fff3cf;
  color:#322e27;
  box-shadow:5px 5px 0 #d96a3a
}

/* Klasik: tetap mengikuti warna pilihan profil */
body[data-ofeda-theme="classic"]{
  background:var(--bg)
}

/* Brutalism */
body[data-ofeda-theme="brutalism"]{
  font-family:Arial,Helvetica,sans-serif;
  background:
    linear-gradient(90deg,rgba(17,17,17,.055) 1px,transparent 1px),
    linear-gradient(rgba(17,17,17,.055) 1px,transparent 1px),
    var(--bg);
  background-size:24px 24px
}
body[data-ofeda-theme="brutalism"] .card,
body[data-ofeda-theme="brutalism"] .summary-card,
body[data-ofeda-theme="brutalism"] .modal,
body[data-ofeda-theme="brutalism"] .settings-tile,
body[data-ofeda-theme="brutalism"] .asset-source-card,
body[data-ofeda-theme="brutalism"] .investment-card{
  border:3px solid #111!important;
  border-radius:0!important;
  box-shadow:7px 7px 0 #111!important
}
body[data-ofeda-theme="brutalism"] button,
body[data-ofeda-theme="brutalism"] input,
body[data-ofeda-theme="brutalism"] select,
body[data-ofeda-theme="brutalism"] textarea{
  border-radius:0!important
}
body[data-ofeda-theme="brutalism"] .primary-btn{
  border:3px solid #111!important;
  background:#111!important;
  color:#fff7d6!important;
  box-shadow:4px 4px 0 var(--accent)!important
}
body[data-ofeda-theme="brutalism"] h1,
body[data-ofeda-theme="brutalism"] h2,
body[data-ofeda-theme="brutalism"] h3{
  font-family:Arial Black,Impact,sans-serif;
  letter-spacing:-.03em
}

/* Minimal */
body[data-ofeda-theme="minimal"] .card,
body[data-ofeda-theme="minimal"] .summary-card,
body[data-ofeda-theme="minimal"] .modal,
body[data-ofeda-theme="minimal"] .settings-tile,
body[data-ofeda-theme="minimal"] .asset-source-card,
body[data-ofeda-theme="minimal"] .investment-card{
  border:1px solid var(--theme-border)!important;
  border-radius:9px!important;
  box-shadow:none!important
}
body[data-ofeda-theme="minimal"] .sidebar{
  border-right:1px solid var(--theme-border)
}

/* Dark modern */
body[data-ofeda-theme="dark"]{
  color:var(--text);
  background:var(--bg)
}
body[data-ofeda-theme="dark"] .topbar,
body[data-ofeda-theme="dark"] .card,
body[data-ofeda-theme="dark"] .summary-card,
body[data-ofeda-theme="dark"] .modal,
body[data-ofeda-theme="dark"] .settings-tile,
body[data-ofeda-theme="dark"] .asset-source-card,
body[data-ofeda-theme="dark"] .investment-card,
body[data-ofeda-theme="dark"] .annual-chart-card{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--theme-border)!important
}
body[data-ofeda-theme="dark"] input,
body[data-ofeda-theme="dark"] select,
body[data-ofeda-theme="dark"] textarea,
body[data-ofeda-theme="dark"] table{
  background:#171e2b!important;
  color:var(--text)!important;
  border-color:var(--theme-border)!important
}
body[data-ofeda-theme="dark"] td,
body[data-ofeda-theme="dark"] th{
  color:var(--text);
  border-color:var(--theme-border)
}
body[data-ofeda-theme="dark"] .muted,
body[data-ofeda-theme="dark"] small{
  color:var(--muted)!important
}

/* Pastel */
body[data-ofeda-theme="pastel"] .card,
body[data-ofeda-theme="pastel"] .summary-card,
body[data-ofeda-theme="pastel"] .modal{
  border-radius:24px!important;
  box-shadow:0 11px 25px rgba(120,88,125,.10)!important
}
body[data-ofeda-theme="pastel"] .primary-btn{
  border-radius:999px!important
}

/* Retro */
body[data-ofeda-theme="retro"]{
  font-family:Georgia,"Times New Roman",serif;
  background:
    radial-gradient(circle at 10% 10%,rgba(217,106,58,.13),transparent 24%),
    var(--bg)
}
body[data-ofeda-theme="retro"] .card,
body[data-ofeda-theme="retro"] .summary-card,
body[data-ofeda-theme="retro"] .modal,
body[data-ofeda-theme="retro"] .settings-tile{
  border:2px solid #322e27!important;
  border-radius:9px!important;
  box-shadow:5px 5px 0 rgba(50,46,39,.85)!important
}

/* =========================================================
   MUTASI SUMBER DANA KRONOLOGIS
   ========================================================= */
.funding-flow.balance{
  background:#ece6d6;
  color:#595245
}
.funding-opening-balance{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:3px 16px;
  align-items:center;
  margin-bottom:11px;
  padding:13px 15px;
  border:2px solid var(--primary);
  border-radius:14px;
  background:var(--theme-pale)
}
.funding-opening-balance>span{
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase
}
.funding-opening-balance>strong{
  grid-row:1/3;
  grid-column:2;
  color:var(--primary2);
  font-size:20px
}
.funding-opening-balance>small{
  color:var(--muted)
}
@media(max-width:720px){
  .theme-style-grid{
    grid-template-columns:1fr
  }
}

/* =========================================================
   KONTRAS TEMA OTOMATIS
   ========================================================= */
body{
  background:var(--bg);
  color:var(--page-text,var(--text))
}
.card,
.summary-card,
.modal,
.settings-tile,
.client-card,
.budget-card,
.asset-source-card,
.investment-card,
.annual-chart-card{
  background:var(--panel)!important;
  color:var(--text)!important
}
.card h1,.card h2,.card h3,
.modal h1,.modal h2,.modal h3,
.summary-card strong,
.client-card strong,
.investment-card strong{
  color:var(--text)
}
input,select,textarea{
  background:var(--panel);
  color:var(--text);
  border-color:var(--theme-border)
}
.primary-btn{
  background:var(--primary);
  color:var(--on-primary)
}
.secondary-btn,
.row-actions button,
.icon-btn{
  background:var(--theme-soft);
  color:var(--soft-text,var(--text));
  border-color:var(--theme-border)
}
.dashboard-month-note,
.info-strip,
.funding-history-result-head,
.billing-history-summary{
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.empty,
.warning,
.theme-preview-card,
.classic-theme-controls{
  color:var(--pale-text,var(--text))
}

/* =========================================================
   BRUTALISM FUTURISTIK BERWARNA
   ========================================================= */
body[data-ofeda-theme="brutalism"]{
  background:
    linear-gradient(90deg,rgba(var(--theme-rgb),.10) 1px,transparent 1px),
    linear-gradient(rgba(var(--theme-rgb),.10) 1px,transparent 1px),
    var(--bg);
  background-size:24px 24px
}
body[data-ofeda-theme="brutalism"] .sidebar{
  background:
    linear-gradient(145deg,#171126 0%,var(--primary2) 100%)!important
}
body[data-ofeda-theme="brutalism"] .card,
body[data-ofeda-theme="brutalism"] .summary-card,
body[data-ofeda-theme="brutalism"] .modal,
body[data-ofeda-theme="brutalism"] .settings-tile,
body[data-ofeda-theme="brutalism"] .asset-source-card,
body[data-ofeda-theme="brutalism"] .investment-card{
  border-color:#171126!important;
  box-shadow:7px 7px 0 #171126!important
}
body[data-ofeda-theme="brutalism"] .primary-btn{
  background:var(--primary)!important;
  color:var(--on-primary)!important;
  box-shadow:4px 4px 0 var(--accent)!important
}
body[data-ofeda-theme="brutalism"] .theme-preview-card{
  background:var(--preview-theme)!important;
  color:var(--on-primary)!important;
  box-shadow:7px 7px 0 #171126!important
}

/* =========================================================
   PANEL SAMPING DAPAT DISEMBUNYIKAN
   ========================================================= */
.layout{
  transition:grid-template-columns .22s ease
}
.sidebar{
  transition:transform .22s ease,opacity .18s ease
}
.desktop-panel-toggle{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-size:20px
}
.desktop-panel-toggle.active{
  background:var(--primary);
  color:var(--on-primary)
}
.layout.sidebar-collapsed{
  grid-template-columns:0 minmax(0,1fr)
}
.layout.sidebar-collapsed .sidebar{
  transform:translateX(-105%);
  opacity:0;
  pointer-events:none
}
.layout.sidebar-collapsed .content{
  width:100%
}

/* =========================================================
   IKON JAM BARU
   ========================================================= */
.today-clock-icon{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 35% 30%,var(--accent),var(--primary));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.25),
    0 7px 15px rgba(var(--theme-rgb),.25)
}
.today-clock-icon::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:11px
}
.today-clock-icon svg{
  position:relative;
  z-index:1;
  width:32px;
  height:32px;
  fill:none;
  stroke:var(--on-primary);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round
}
.today-clock-icon .clock-accent{
  stroke:var(--on-accent,var(--on-primary));
  opacity:.8
}

/* =========================================================
   RIWAYAT TAGIHAN DAPAT DIKOREKSI
   ========================================================= */
.history-job-actions{
  min-width:250px;
  flex-wrap:wrap
}
.payment-correction-summary{
  display:grid;
  gap:7px;
  padding:14px;
  border:1px solid var(--theme-border);
  border-radius:15px;
  background:var(--theme-pale);
  color:var(--pale-text,var(--text))
}

/* =========================================================
   DASHBOARD LEBIH SEIMBANG
   ========================================================= */
.calendar-dashboard-grid{
  align-items:stretch
}
.calendar-dashboard-grid>.calendar-card{
  height:100%
}
.calendar-side{
  height:100%;
  grid-template-rows:auto minmax(0,1fr) minmax(0,1fr)
}
.calendar-side>.dashboard-side-card{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column
}
.dashboard-list-preview{
  flex:1
}
.dashboard-show-more{
  width:100%;
  margin-top:12px;
  padding:9px 11px;
  border:1px dashed var(--primary);
  border-radius:11px;
  background:var(--theme-pale);
  color:var(--pale-text,var(--primary2));
  font-size:11px;
  font-weight:900
}
.dashboard-show-more:hover{
  border-style:solid;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.transaction-popup-list{
  max-height:65vh;
  overflow:auto
}
.annual-layout-dashboard-row .annual-chart-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.annual-layout-dashboard-row .annual-chart-card{
  min-width:0
}
.annual-layout-dashboard-row .annual-chart-svg{
  min-width:560px
}
.annual-layout-dashboard-row .cashflow-chart .annual-chart-svg{
  min-width:620px
}

@media(max-width:980px){
  .annual-layout-dashboard-row .annual-chart-grid{
    grid-template-columns:1fr
  }
}
@media(max-width:820px){
  .desktop-panel-toggle{
    display:none
  }
  .layout.sidebar-collapsed{
    grid-template-columns:1fr
  }
  .layout.sidebar-collapsed .sidebar{
    transform:none;
    opacity:1;
    pointer-events:auto
  }
  .calendar-side{
    grid-template-rows:auto
  }
}

/* =========================================================
   UPDATE UNDO PEMBAYARAN
   ========================================================= */
.history-undo-button{
  background:var(--theme-pale)!important;
  color:var(--pale-text,var(--primary2))!important;
  border:1px solid var(--primary)!important
}
.undo-payment-card{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding:15px;
  border:2px solid var(--primary);
  border-radius:16px;
  background:var(--theme-pale);
  color:var(--pale-text,var(--text))
}
.undo-payment-card p{
  margin:5px 0 0;
  color:var(--muted);
  line-height:1.5
}
.undo-payment-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:var(--primary);
  color:var(--on-primary);
  font-size:29px;
  font-weight:900
}

/* =========================================================
   GRAFIK TOTAL ASET BERDAMPINGAN
   ========================================================= */
.annual-layout-assets-row .annual-chart-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.annual-layout-assets-row .annual-chart-card{
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column
}
.annual-layout-assets-row .annual-chart-scroll{
  flex:1;
  display:flex;
  align-items:flex-end
}
.annual-layout-assets-row .annual-chart-svg{
  min-width:610px;
}
.annual-layout-assets-row .cashflow-chart .annual-chart-svg{
  min-width:660px
}
.annual-chart-kpi{
  display:grid;
  justify-items:end;
  gap:3px;
  padding:8px 11px;
  border:1px solid var(--theme-border);
  border-radius:12px;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.annual-chart-kpi small,
.annual-chart-summary small{
  color:inherit;
  opacity:.72;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase
}
.annual-chart-kpi strong{
  font-size:14px
}
.annual-chart-summary{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px
}
.annual-chart-summary>span{
  display:grid;
  gap:2px;
  padding:7px 9px;
  border:1px solid var(--theme-border);
  border-radius:11px;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.annual-chart-summary strong{
  font-size:11px
}
.legend-minus{
  background:#b85c4b
}
@media(max-width:1080px){
  .annual-layout-assets-row .annual-chart-grid{
    grid-template-columns:1fr
  }
}

/* =========================================================
   PDF INVOICE A4 PER HALAMAN
   ========================================================= */
.invoice-pdf-stage{
  position:fixed;
  z-index:-10000;
  left:-100000px;
  top:0;
  width:210mm;
  background:#fff;
  pointer-events:none
}
.invoice-pdf-document{
  width:210mm;
  background:#fff
}
.invoice-pdf-page{
  position:relative;
  width:210mm;
  height:297mm;
  min-width:210mm;
  min-height:297mm;
  max-width:210mm;
  max-height:297mm;
  overflow:hidden;
  padding:11mm 12mm 10mm;
  background:#fff;
  color:#172033;
  font-family:Arial,"Segoe UI",sans-serif;
  box-sizing:border-box
}
.invoice-pdf-page .invoice-pro-header{
  gap:8mm;
  padding-bottom:5mm;
  border-bottom:1.2mm solid #1f4f46
}
.invoice-pdf-page .invoice-pro-logo{
  width:14mm;
  height:14mm;
  border-radius:2mm;
  font-size:15pt
}
.invoice-pdf-page .invoice-pro-brand strong{
  font-size:12pt
}
.invoice-pdf-page .invoice-pro-brand small{
  font-size:8pt
}
.invoice-pdf-page .invoice-pro-title>span{
  font-size:22pt
}
.invoice-pdf-page .invoice-pro-title>strong{
  font-size:8pt
}
.invoice-pdf-page .invoice-pro-parties{
  grid-template-columns:1fr 1fr 1.12fr;
  gap:6mm;
  padding:5mm 0
}
.invoice-pdf-page .invoice-pro-parties h3{
  font-size:11pt
}
.invoice-pdf-page .invoice-pro-parties p,
.invoice-pdf-page .invoice-pro-dates span,
.invoice-pdf-page .invoice-pro-dates strong{
  font-size:7.5pt
}
.invoice-pdf-page .invoice-pro-dates{
  gap:2mm;
  padding:3mm
}
.invoice-pdf-table-wrap{
  overflow:visible!important;
  border-radius:2mm
}
.invoice-pdf-page .invoice-pro-table{
  width:100%;
  table-layout:fixed;
  font-size:8pt
}
.invoice-pdf-page .invoice-pro-table th{
  padding:2.5mm 2.2mm!important;
  font-size:6.8pt!important
}
.invoice-pdf-page .invoice-pro-table td{
  padding:2.6mm 2.2mm!important;
  font-size:7.5pt!important;
  line-height:1.25;
  word-break:break-word
}
.invoice-pdf-page .invoice-pro-table th:nth-child(1),
.invoice-pdf-page .invoice-pro-table td:nth-child(1){
  width:7%
}
.invoice-pdf-page .invoice-pro-table th:nth-child(2),
.invoice-pdf-page .invoice-pro-table td:nth-child(2){
  width:39%
}
.invoice-pdf-page .invoice-pro-table th:nth-child(3),
.invoice-pdf-page .invoice-pro-table td:nth-child(3),
.invoice-pdf-page .invoice-pro-table th:nth-child(4),
.invoice-pdf-page .invoice-pro-table td:nth-child(4),
.invoice-pdf-page .invoice-pro-table th:nth-child(5),
.invoice-pdf-page .invoice-pro-table td:nth-child(5){
  width:18%
}
.invoice-pdf-page .invoice-pro-table td small{
  font-size:6.5pt
}
.invoice-pdf-page .invoice-pro-bottom{
  grid-template-columns:minmax(0,1fr) 68mm;
  gap:7mm;
  margin-top:5mm
}
.invoice-pdf-page .invoice-pro-notes>p{
  font-size:7.5pt
}
.invoice-pdf-page .invoice-payment-section{
  margin-top:4mm;
  padding-top:3mm
}
.invoice-pdf-page .invoice-payment-grid.with-two-methods{
  grid-template-columns:minmax(0,1fr) 34mm
}
.invoice-pdf-page .invoice-bank-card,
.invoice-pdf-page .invoice-qris-card{
  padding:3mm;
  border-radius:2mm
}
.invoice-pdf-page .invoice-account-number{
  font-size:13pt
}
.invoice-pdf-page .invoice-qris-card img{
  width:27mm;
  max-width:27mm;
  height:auto;
  max-height:31mm;
  object-fit:contain
}
.invoice-pdf-page .invoice-pro-total-box{
  padding:4mm
}
.invoice-pdf-page .invoice-pro-total-box>div{
  padding:2mm 0;
  font-size:8pt
}
.invoice-pdf-page .invoice-pro-grand-total span,
.invoice-pdf-page .invoice-pro-grand-total strong{
  font-size:12pt
}
.invoice-pdf-page .invoice-pro-footer{
  position:absolute;
  left:12mm;
  right:12mm;
  bottom:9mm;
  margin:0;
  padding-top:3mm;
  font-size:7pt
}
.invoice-pdf-continuation{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7mm;
  padding-bottom:5mm;
  margin-bottom:5mm;
  border-bottom:1.2mm solid #1f4f46
}
.invoice-pdf-continuation .invoice-pro-brand{
  flex:1
}
.invoice-pdf-continuation .invoice-pro-title{
  justify-items:end
}
.invoice-pdf-page-number{
  position:absolute;
  right:0;
  bottom:1.2mm;
  color:#667085;
  font-size:6.5pt;
  font-weight:700
}
.invoice-pdf-continued{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:5mm;
  padding:3mm 4mm;
  border:1px solid #d8deea;
  border-radius:2mm;
  color:#667085;
  font-size:7.5pt
}

/* =========================================================
   SIDEBAR TANPA BATANG SCROLL
   ========================================================= */
.sidebar nav{
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:0!important;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior:contain
}
.sidebar nav::-webkit-scrollbar{
  width:0;
  height:0;
  display:none
}
.sidebar{
  scrollbar-width:none;
  -ms-overflow-style:none
}
.sidebar::-webkit-scrollbar{
  width:0;
  height:0;
  display:none
}

/* =========================================================
   SUMBER DANA PEKERJAAN PADA LAPORAN
   ========================================================= */
.report-funding-list{
  min-width:150px;
  display:grid;
  gap:5px
}
.report-funding-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:9px;
  padding:5px 7px;
  border:1px solid var(--theme-border);
  border-radius:9px;
  background:var(--theme-pale);
  color:var(--pale-text,var(--text))
}
.report-funding-item strong{
  color:inherit;
  font-size:10px;
  line-height:1.25
}
.report-funding-item small{
  flex:0 0 auto;
  color:inherit!important;
  font-size:9px;
  font-weight:900
}
.report-funding-untracked{
  border-style:dashed;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.report-funding-empty{
  color:var(--muted)
}
@media print{
  .report-funding-list{
    min-width:115px;
    gap:3px
  }
  .report-funding-item{
    padding:3px 5px;
    border-radius:5px
  }
  .report-funding-item strong{
    font-size:8px
  }
  .report-funding-item small{
    font-size:7.5px
  }
}

/* =========================================================
   PEMASUKAN TERPADU DAN POTENSI TERBAWA
   ========================================================= */
.income-summary-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.income-type-badge{
  display:inline-flex;
  padding:5px 8px;
  border:1px solid var(--theme-border);
  border-radius:999px;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text));
  font-size:9px;
  font-weight:900;
  white-space:nowrap
}
.income-type-badge.potential{
  background:var(--theme-pale);
  color:var(--pale-text,var(--text))
}
.income-carryover-row{
  background:rgba(var(--theme-rgb),.035)
}
.income-carryover-badge{
  display:inline-flex;
  max-width:170px;
  padding:5px 8px;
  border:1px dashed var(--primary);
  border-radius:9px;
  background:var(--theme-pale);
  color:var(--pale-text,var(--text));
  font-size:9px;
  font-weight:900;
  line-height:1.25
}
.compact-btn{
  min-height:34px!important;
  padding:7px 10px!important;
  font-size:10px!important
}

/* =========================================================
   GRAFIK LEBIH MUDAH DIBACA
   ========================================================= */
.readable-chart{
  overflow:hidden
}
.readable-chart header{
  align-items:flex-start;
  flex-wrap:wrap
}
.readable-chart .annual-chart-scroll{
  width:100%;
  overflow:visible
}
.readable-chart .annual-chart-svg{
  width:100%;
  min-width:0!important;
  height:auto;
  display:block
}
.annual-month-band{
  fill:rgba(var(--theme-rgb),.018)
}
.annual-month-band.alternate{
  fill:rgba(var(--theme-rgb),.045)
}
.annual-month-loss-band{
  fill:rgba(184,92,75,.095)
}
.annual-zero-mark{
  fill:var(--theme-border);
  opacity:.8
}
.income-zero{
  fill:#3f7d68
}
.expense-zero{
  fill:#b85c4b
}
.annual-grid-line{
  stroke:var(--theme-border);
  stroke-width:1;
  stroke-dasharray:4 6;
  opacity:.72
}
.annual-axis-label{
  fill:var(--muted);
  font-size:11px;
  font-weight:700
}
.annual-month-label{
  fill:var(--text);
  font-size:11px;
  font-weight:900
}
.annual-value-label{
  fill:var(--text);
  font-size:10px;
  font-weight:900
}
.annual-net-pill-bg{
  stroke-width:1
}
.annual-net-pill-bg.annual-net-plus{
  fill:rgba(47,114,88,.13);
  stroke:#2f7258
}
.annual-net-pill-bg.annual-net-minus{
  fill:rgba(165,63,54,.14);
  stroke:#a53f36
}
.annual-net-pill-bg.annual-net-zero{
  fill:rgba(139,131,115,.11);
  stroke:#8b8373
}
.annual-net-pill-text{
  font-size:9px;
  font-weight:900
}
.annual-net-pill-text.annual-net-plus{
  fill:#2f7258
}
.annual-net-pill-text.annual-net-minus{
  fill:#a53f36
}
.annual-net-pill-text.annual-net-zero{
  fill:#746d60
}
.annual-chart-kpi em{
  color:inherit;
  font-size:9px;
  font-style:normal;
  opacity:.72
}
.annual-chart-summary .negative-summary{
  border-color:#b85c4b;
  background:rgba(184,92,75,.11)
}
.annual-chart-summary .positive-summary{
  border-color:#3f7d68;
  background:rgba(63,125,104,.11)
}
body[data-ofeda-theme="dark"] .annual-month-band{
  fill:rgba(255,255,255,.018)
}
body[data-ofeda-theme="dark"] .annual-month-band.alternate{
  fill:rgba(255,255,255,.04)
}
body[data-ofeda-theme="dark"] .annual-month-loss-band{
  fill:rgba(255,112,100,.09)
}
body[data-ofeda-theme="dark"] .annual-axis-label,
body[data-ofeda-theme="dark"] .annual-month-label,
body[data-ofeda-theme="dark"] .annual-value-label{
  fill:var(--text)
}
@media(max-width:760px){
  .income-summary-grid{
    grid-template-columns:1fr
  }
  .readable-chart .annual-chart-scroll{
    overflow-x:auto;
    padding-bottom:5px
  }
  .readable-chart .annual-chart-svg{
    min-width:760px!important
  }
}

/* =========================================================
   CORPORATE MONTHLY FINANCIAL REPORT
   ========================================================= */
.corporate-report-shell{
  gap:20px
}
.corporate-report-control{
  border-top:4px solid var(--primary)!important
}
.corporate-report-filter{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-top:16px
}
.corporate-report-filter>label{
  width:min(320px,100%);
  font-weight:900
}
.month-input-shell{
  display:flex;
  width:100%;
  margin-top:7px;
  padding:11px 13px;
  border:2px solid var(--theme-border);
  border-radius:13px;
  background:var(--panel)
}
.month-input-shell input{
  display:block;
  width:100%;
  min-width:0;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text);
  font-size:16px;
  font-weight:900
}
.corporate-report-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:9px
}
.corporate-report{
  --corp-navy:#17243b;
  --corp-blue:#315d85;
  --corp-green:#2f7258;
  --corp-red:#a64d43;
  --corp-gold:#b68a45;
  overflow:hidden;
  padding:0!important;
  border:1px solid #d8dee8!important;
  border-radius:4px!important;
  background:#fff!important;
  color:#172033!important;
  box-shadow:0 24px 60px rgba(20,35,55,.10)!important
}
.corporate-report-header{
  display:flex;
  justify-content:space-between;
  gap:28px;
  padding:31px 34px;
  background:
    linear-gradient(135deg,#111d31 0%,#243b5d 100%);
  color:#fff
}
.corporate-report-brand{
  display:flex;
  align-items:center;
  gap:16px
}
.corporate-report-brand>span{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border:2px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.08);
  font-family:Arial Black,Impact,sans-serif;
  font-size:23px
}
.corporate-report-brand p,
.corporate-report-brand h1,
.corporate-report-brand small{
  margin:0;
  color:#fff
}
.corporate-report-brand p{
  margin-bottom:5px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.17em
}
.corporate-report-brand h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:27px;
  font-weight:700
}
.corporate-report-brand small{
  display:block;
  margin-top:4px;
  opacity:.68;
  font-size:10px
}
.corporate-report-meta{
  min-width:210px;
  display:grid;
  align-content:center;
  justify-items:end;
  gap:5px;
  text-align:right
}
.corporate-report-meta span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.17em;
  opacity:.7
}
.corporate-report-meta strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:22px
}
.corporate-report-meta small{
  max-width:260px;
  opacity:.7;
  font-size:9px
}
.corporate-report-status{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 34px 0;
  padding:13px 15px;
  border:1px solid #dbe5df;
  background:#f3f8f5
}
.corporate-report-status>span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-weight:900
}
.corporate-report-status .status-ok{
  background:#dceee4;
  color:#2f7258
}
.corporate-report-status .status-warning{
  background:#f3dfdc;
  color:#a64d43
}
.corporate-report-status>div{
  display:grid;
  gap:2px
}
.corporate-report-status strong{
  color:#172033
}
.corporate-report-status small{
  color:#647083
}
.corporate-report-section{
  padding:27px 34px;
  border-bottom:1px solid #e5e9ef
}
.corporate-section-heading{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-bottom:18px
}
.corporate-section-heading>span{
  flex:0 0 auto;
  padding:5px 7px;
  border:1px solid #9aa9bb;
  color:#315d85;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em
}
.corporate-section-heading h2{
  margin:0;
  color:#17243b;
  font-family:Georgia,"Times New Roman",serif;
  font-size:21px
}
.corporate-section-heading p{
  margin:4px 0 0;
  color:#728094;
  font-size:10px
}
.corporate-metric-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px
}
.corporate-metric{
  position:relative;
  min-height:116px;
  display:grid;
  align-content:space-between;
  gap:7px;
  padding:15px;
  border:1px solid #dce2ea;
  background:#fff
}
.corporate-metric::before{
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  bottom:-1px;
  width:4px;
  background:#315d85
}
.corporate-metric>span{
  color:#718096;
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase
}
.corporate-metric>strong{
  color:#17243b;
  font-family:Georgia,"Times New Roman",serif;
  font-size:19px
}
.corporate-metric>small{
  color:#8792a2;
  font-size:9px;
  line-height:1.35
}
.corporate-metric.metric-income::before,
.corporate-metric.metric-positive::before{
  background:#2f7258
}
.corporate-metric.metric-expense::before,
.corporate-metric.metric-negative::before{
  background:#a64d43
}
.corporate-metric.metric-potential::before{
  background:#b68a45
}
.corporate-metric.metric-investment::before{
  background:#755e9a
}
.corporate-metric.metric-total-assets{
  grid-column:span 2;
  background:#17243b;
  border-color:#17243b
}
.corporate-metric.metric-total-assets::before{
  background:#82a9c9
}
.corporate-metric.metric-total-assets>span,
.corporate-metric.metric-total-assets>strong,
.corporate-metric.metric-total-assets>small{
  color:#fff
}
.corporate-chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.corporate-chart-card{
  min-width:0;
  padding:17px;
  border:1px solid #dde3eb;
  background:#fbfcfe
}
.corporate-chart-card:first-child{
  grid-column:1/-1
}
.corporate-chart-card>header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:13px
}
.corporate-chart-card h3{
  margin:0;
  color:#17243b;
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px
}
.corporate-chart-card p{
  margin:4px 0 0;
  color:#788599;
  font-size:9px
}
.corporate-chart-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:9px
}
.corporate-chart-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#66758a;
  font-size:8.5px;
  font-weight:900
}
.corporate-chart-legend i{
  width:10px;
  height:10px;
  display:block
}
.corporate-chart-scroll svg{
  width:100%;
  height:auto;
  display:block
}
.corp-chart-grid{
  stroke:#dfe5ec;
  stroke-width:1;
  stroke-dasharray:3 5
}
.corp-chart-baseline{
  stroke:#8896a7;
  stroke-width:1.3
}
.corp-chart-axis{
  fill:#778497;
  font-size:10px;
  font-weight:700
}
.corp-chart-label{
  fill:#33445b;
  font-size:10px;
  font-weight:900
}
.corp-chart-bar.corp-income,
.corporate-chart-legend .corp-income{
  fill:#3f7d68;
  background:#3f7d68
}
.corp-chart-bar.corp-expense,
.corporate-chart-legend .corp-expense{
  fill:#b85c4b;
  background:#b85c4b
}
.corp-chart-zero{
  opacity:.6
}
.corp-chart-zero.corp-income{
  fill:#3f7d68
}
.corp-chart-zero.corp-expense{
  fill:#b85c4b
}
.corp-horizontal-chart{
  display:grid;
  gap:10px
}
.corp-horizontal-row{
  display:grid;
  grid-template-columns:minmax(100px,1fr) minmax(110px,2fr) auto;
  align-items:center;
  gap:9px
}
.corp-horizontal-row>div:first-child{
  display:grid;
  gap:2px
}
.corp-horizontal-row strong{
  color:#26384f;
  font-size:9.5px
}
.corp-horizontal-row small{
  color:#8490a0;
  font-size:8px
}
.corp-horizontal-row>b{
  color:#26384f;
  font-size:9px
}
.corp-horizontal-track{
  height:9px;
  overflow:hidden;
  background:#e9edf2
}
.corp-horizontal-fill{
  display:block;
  height:100%;
  background:#315d85
}
.corp-horizontal-fill.fill-1{
  background:#3f7d68
}
.corp-horizontal-fill.fill-2{
  background:#8b6d9e
}
.corp-horizontal-fill.fill-3{
  background:#b68a45
}
.corporate-financial-statement{
  max-width:660px;
  margin:18px auto 0;
  border:1px solid #d9e0e8;
  background:#fff
}
.corporate-financial-statement>header{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:13px 16px;
  background:#17243b;
  color:#fff
}
.corporate-financial-statement h3{
  margin:0;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px
}
.corporate-financial-statement>header span{
  font-size:9px;
  font-weight:900
}
.corporate-financial-statement>div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 16px;
  border-top:1px solid #edf0f4;
  color:#45566c;
  font-size:10px
}
.corporate-financial-statement>div strong{
  color:#17243b
}
.corporate-financial-statement .statement-subtotal{
  border-top:1px solid #9eabba;
  font-weight:900
}
.corporate-financial-statement .statement-total{
  border-top:2px solid #17243b;
  background:#f3f6f9;
  font-size:12px;
  font-weight:900
}
.corporate-investment-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:15px
}
.corporate-investment-summary>div{
  display:grid;
  gap:4px;
  padding:13px;
  border:1px solid #dce2ea;
  background:#f9fafc
}
.corporate-investment-summary span{
  color:#778497;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase
}
.corporate-investment-summary strong{
  color:#17243b;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px
}
.corporate-report table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  color:#26384f
}
.corporate-report th{
  padding:9px 8px;
  border:1px solid #dce2e9;
  background:#eef2f6;
  color:#44566c;
  font-size:8px;
  letter-spacing:.035em;
  text-transform:uppercase
}
.corporate-report td{
  padding:9px 8px;
  border:1px solid #e4e8ee;
  color:#3d4e63;
  font-size:9px;
  vertical-align:top
}
.corporate-report td strong{
  color:#17243b
}
.corporate-report td small{
  color:#7e8998
}
.corporate-report .positive{
  color:#2f7258!important
}
.corporate-report .negative{
  color:#a64d43!important
}
.corporate-report-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:20px 34px;
  background:#f0f3f7;
  color:#657286
}
.corporate-report-footer>div{
  display:grid;
  gap:3px
}
.corporate-report-footer>div:last-child{
  justify-items:end;
  text-align:right
}
.corporate-report-footer strong{
  color:#17243b;
  font-size:10px
}
.corporate-report-footer span{
  font-size:8.5px
}
@media(max-width:1000px){
  .corporate-metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:780px){
  .corporate-report-filter{
    align-items:stretch;
    flex-direction:column
  }
  .corporate-report-actions{
    justify-content:flex-start
  }
  .corporate-report-header{
    flex-direction:column
  }
  .corporate-report-meta{
    min-width:0;
    justify-items:start;
    text-align:left
  }
  .corporate-chart-grid{
    grid-template-columns:1fr
  }
  .corporate-chart-card:first-child{
    grid-column:auto
  }
  .corporate-chart-scroll{
    overflow-x:auto
  }
  .corporate-chart-scroll svg{
    min-width:620px
  }
  .corporate-metric-grid,
  .corporate-investment-summary{
    grid-template-columns:1fr
  }
  .corporate-metric.metric-total-assets{
    grid-column:auto
  }
  .corporate-report-section{
    padding:23px 20px
  }
  .corporate-report-status{
    margin-left:20px;
    margin-right:20px
  }
}
@media print{
  @page{
    size:A4;
    margin:10mm
  }
  body{
    background:#fff!important
  }
  .sidebar,
  .topbar,
  .no-print,
  #toast{
    display:none!important
  }
  .layout,
  .layout.sidebar-collapsed{
    display:block!important
  }
  .content,
  main{
    width:100%!important;
    padding:0!important;
    margin:0!important
  }
  .corporate-report{
    border:0!important;
    box-shadow:none!important;
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact
  }
  .corporate-report-header{
    padding:8mm 8mm 7mm
  }
  .corporate-report-status{
    margin:5mm 8mm 0
  }
  .corporate-report-section{
    padding:6mm 8mm;
    break-inside:auto
  }
  .corporate-report-section,
  .corporate-chart-card,
  .corporate-financial-statement,
  .corporate-investment-summary,
  .corporate-metric{
    page-break-inside:avoid;
    break-inside:avoid
  }
  .corporate-report table{
    page-break-inside:auto
  }
  .corporate-report tr{
    page-break-inside:avoid;
    break-inside:avoid
  }
  .corporate-metric-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
  .corporate-metric{
    min-height:25mm;
    padding:3mm
  }
  .corporate-metric>strong{
    font-size:13px
  }
  .corporate-chart-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .corporate-chart-card:first-child{
    grid-column:1/-1
  }
  .corporate-chart-scroll svg{
    min-width:0!important
  }
  .corporate-report-footer{
    padding:5mm 8mm
  }
}

/* =========================================================
   IMPOR DATA EXCEL
   ========================================================= */
.excel-import-layout{
  display:grid;
  gap:16px
}
.excel-import-template{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
  gap:16px;
  padding:18px;
  border:2px solid var(--primary);
  border-radius:18px;
  background:var(--theme-pale);
  color:var(--pale-text,var(--text))
}
.excel-import-template h3,
.excel-import-template p{
  margin:0
}
.excel-import-template p{
  margin:5px 0 13px;
  color:var(--muted);
  line-height:1.5
}
.excel-import-template a{
  display:inline-flex;
  width:max-content;
  text-decoration:none
}
.excel-import-icon{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border:3px solid currentColor;
  border-radius:15px;
  background:var(--primary);
  color:var(--on-primary);
  font-family:Arial Black,Impact,sans-serif;
  font-size:31px;
  box-shadow:5px 5px 0 var(--theme-border)
}
.excel-import-upload{
  display:grid;
  gap:8px;
  padding:16px;
  border:1px solid var(--theme-border);
  border-radius:15px;
  background:var(--panel)
}
.excel-import-upload>label{
  font-weight:900
}
.excel-import-upload input{
  padding:10px;
  border:1px dashed var(--primary)
}
.excel-import-upload small{
  color:var(--muted)
}
.excel-import-status{
  display:grid;
  gap:10px;
  padding:15px;
  border:1px solid var(--theme-border);
  border-radius:15px;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.excel-import-preview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px
}
.excel-import-preview>div{
  display:grid;
  gap:4px;
  padding:10px;
  border:1px solid var(--theme-border);
  border-radius:11px;
  background:var(--panel);
  color:var(--text)
}
.excel-import-preview span{
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase
}
.excel-import-preview strong{
  font-size:22px
}
.excel-import-note{
  padding:14px;
  border-left:4px solid var(--accent);
  background:var(--theme-pale);
  color:var(--pale-text,var(--text))
}
.excel-import-note p{
  margin:5px 0 0;
  color:var(--muted);
  line-height:1.5
}

/* =========================================================
   PENGELUARAN KE INVESTASI
   ========================================================= */
.investment-aware-row{
  grid-template-columns:34px repeat(3,minmax(125px,1fr)) minmax(140px,1fr) auto
}
.investment-target-field{
  border-color:var(--primary)
}
.investment-target-field select{
  background:var(--theme-pale);
  color:var(--pale-text,var(--text));
  border-color:var(--primary)
}

/* =========================================================
   RINGKASAN ASET SATU BARIS + PIE INVESTASI
   ========================================================= */
.asset-overview-row{
  display:grid;
  grid-template-columns:
    minmax(165px,.8fr)
    minmax(165px,.8fr)
    minmax(165px,.8fr)
    minmax(330px,1.7fr);
  gap:13px;
  align-items:stretch
}
.asset-overview-card{
  min-width:0;
  display:grid;
  align-content:center;
  gap:8px;
  padding:17px;
  border:1px solid var(--theme-border);
  border-radius:17px;
  background:var(--panel);
  color:var(--text);
  box-shadow:0 8px 22px rgba(var(--theme-rgb),.08)
}
.asset-overview-card>span,
.asset-overview-card header>span{
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase
}
.asset-overview-card>strong{
  color:var(--text);
  font-size:21px
}
.asset-overview-card>small,
.asset-overview-card header>small{
  color:var(--muted);
  line-height:1.35
}
.asset-overview-card.total{
  background:var(--primary);
  color:var(--on-primary);
  border-color:var(--primary)
}
.asset-overview-card.total>span,
.asset-overview-card.total>strong,
.asset-overview-card.total>small{
  color:var(--on-primary)
}
.asset-overview-card.liquid{
  border-top:4px solid #315d85
}
.asset-overview-card.investment{
  border-top:4px solid #755e9a
}
.asset-pie-card{
  align-content:start;
  padding:14px 16px
}
.asset-pie-card>header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}
.asset-investment-pie{
  display:grid;
  grid-template-columns:128px minmax(0,1fr);
  align-items:center;
  gap:12px
}
.asset-investment-pie svg{
  width:128px;
  height:128px
}
.asset-pie-track,
.asset-pie-segment{
  fill:none;
  stroke-width:15
}
.asset-pie-track{
  stroke:var(--theme-soft)
}
.asset-pie-segment{
  transition:opacity .15s ease
}
.asset-pie-segment:hover{
  opacity:.72
}
.asset-pie-caption{
  fill:var(--muted);
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em
}
.asset-pie-total{
  fill:var(--text);
  font-size:12px;
  font-weight:900
}
.asset-pie-legend{
  max-height:142px;
  display:grid;
  gap:6px;
  overflow:auto;
  scrollbar-width:none
}
.asset-pie-legend::-webkit-scrollbar{
  display:none
}
.asset-pie-legend>div{
  display:grid;
  grid-template-columns:10px minmax(0,1fr);
  align-items:start;
  gap:7px
}
.asset-pie-legend i{
  width:9px;
  height:9px;
  margin-top:3px;
  border-radius:3px
}
.asset-pie-legend span{
  display:grid;
  gap:1px
}
.asset-pie-legend strong{
  color:var(--text);
  font-size:9px
}
.asset-pie-legend small{
  color:var(--muted);
  font-size:8px
}
.segment-0{stroke:#315d85;background:#315d85}
.segment-1{stroke:#3f7d68;background:#3f7d68}
.segment-2{stroke:#755e9a;background:#755e9a}
.segment-3{stroke:#b68a45;background:#b68a45}
.segment-4{stroke:#b85c4b;background:#b85c4b}
.segment-5{stroke:#4f77a8;background:#4f77a8}
.segment-6{stroke:#8b6d52;background:#8b6d52}
.segment-7{stroke:#4e8e89;background:#4e8e89}

@media(max-width:1180px){
  .asset-overview-row{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .asset-pie-card{
    grid-column:1/-1
  }
}
@media(max-width:760px){
  .excel-import-preview{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .asset-overview-row{
    grid-template-columns:1fr
  }
  .asset-pie-card{
    grid-column:auto
  }
  .asset-investment-pie{
    grid-template-columns:1fr
  }
  .asset-investment-pie svg{
    margin:auto
  }
  .investment-aware-row{
    grid-template-columns:34px 1fr
  }
}

/* =========================================================
   GRAFIK DAPAT DIPERBESAR
   ========================================================= */
[data-expandable-chart]{
  cursor:zoom-in;
  outline:none
}
[data-expandable-chart]:focus-visible{
  box-shadow:
    0 0 0 3px rgba(var(--theme-rgb),.2),
    0 10px 28px rgba(var(--theme-rgb),.12)!important
}
.annual-chart-header-actions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px
}
.chart-expand-button{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid var(--theme-border);
  border-radius:10px;
  background:var(--theme-pale);
  color:var(--pale-text,var(--text));
  font-size:9px;
  font-weight:900;
  cursor:zoom-in
}
.chart-expand-button span{
  font-size:15px;
  line-height:1
}
.chart-expand-button:hover{
  border-color:var(--primary);
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.chart-expanded-modal{
  width:min(1480px,96vw)!important;
  max-width:1480px!important
}
.expanded-chart-view{
  width:100%;
  overflow:auto;
  padding:4px
}
.expanded-chart-card{
  min-width:1080px!important;
  cursor:default!important;
  box-shadow:none!important
}
.expanded-chart-card .annual-chart-svg{
  width:100%;
  min-width:1080px!important;
  max-height:680px
}
.expanded-chart-card.asset-pie-card{
  min-width:760px!important
}
.expanded-chart-card .asset-investment-pie{
  grid-template-columns:320px minmax(320px,1fr);
  gap:30px
}
.expanded-chart-card .asset-investment-pie svg{
  width:300px;
  height:300px
}
.expanded-chart-card .asset-pie-legend{
  max-height:340px
}
.expanded-chart-card .asset-pie-legend strong{
  font-size:13px
}
.expanded-chart-card .asset-pie-legend small{
  font-size:11px
}

/* =========================================================
   PILIHAN PERIODE TOTAL ASET
   ========================================================= */
.asset-period-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  border-top:4px solid var(--primary)!important
}
.asset-period-toolbar h2,
.asset-period-toolbar p{
  margin:0
}
.asset-period-toolbar p{
  margin-top:5px;
  color:var(--muted);
  line-height:1.5
}
.asset-period-controls{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:11px
}
.asset-scope-switch{
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  padding:4px;
  border:1px solid var(--theme-border);
  border-radius:13px;
  background:var(--theme-soft)
}
.asset-scope-switch button{
  min-width:112px;
  padding:9px 13px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--soft-text,var(--text));
  font-size:10px;
  font-weight:900
}
.asset-scope-switch button.active{
  background:var(--primary);
  color:var(--on-primary);
  box-shadow:0 5px 14px rgba(var(--theme-rgb),.18)
}
.asset-year-field{
  min-width:120px;
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase
}
.asset-year-field select{
  min-height:42px;
  padding:8px 35px 8px 11px;
  font-size:13px;
  font-weight:900
}

/* =========================================================
   PERTUMBUHAN ASET KESELURUHAN
   ========================================================= */
.overall-chart-grid{
  grid-template-columns:1fr!important
}
.overall-growth-chart{
  width:100%;
  min-width:0
}
.overall-growth-svg{
  width:100%;
  min-width:760px!important
}
.overall-growth-area{
  fill:url(#overallAssetAreaGradient);
  opacity:.9
}
.overall-growth-line{
  fill:none;
  stroke:var(--primary);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round
}
.overall-growth-point{
  fill:var(--panel);
  stroke:var(--primary);
  stroke-width:4;
  cursor:pointer
}
.overall-growth-point:hover{
  fill:var(--accent);
  stroke:var(--primary2)
}
.overall-growth-year{
  fill:var(--text);
  font-size:13px;
  font-weight:900
}
.overall-growth-value{
  fill:var(--text);
  font-size:11px;
  font-weight:900
}
.overall-growth-gradient-start{
  stop-color:var(--primary);
  stop-opacity:.28
}
.overall-growth-gradient-end{
  stop-color:var(--primary);
  stop-opacity:.02
}
body[data-ofeda-theme="dark"] .overall-growth-point{
  fill:var(--panel)
}

@media(max-width:860px){
  .asset-period-toolbar{
    align-items:stretch;
    flex-direction:column
  }
  .asset-period-controls{
    justify-content:flex-start
  }
  .chart-expanded-modal{
    width:98vw!important
  }
}
@media(max-width:560px){
  .asset-period-controls{
    align-items:stretch;
    flex-direction:column
  }
  .asset-scope-switch{
    width:100%
  }
  .asset-scope-switch button{
    min-width:0
  }
  .asset-year-field{
    width:100%
  }
}

/* =========================================================
   PENGHAPUSAN DATA PER PROFIL
   ========================================================= */
.profile-management-list{
  gap:10px
}
.profile-management-item{
  align-items:center;
  padding:13px;
  border:1px solid var(--theme-border);
  border-radius:15px;
  background:var(--panel)
}
.profile-management-actions{
  justify-content:flex-end;
  flex-wrap:wrap
}
.danger-link{
  border-color:transparent!important;
  background:transparent!important;
  color:#a64d43!important;
  box-shadow:none!important
}
.profile-management-note{
  display:grid;
  gap:4px;
  margin-top:14px;
  padding:12px 14px;
  border-left:4px solid var(--primary);
  background:var(--theme-pale);
  color:var(--pale-text,var(--text))
}
.profile-management-note span{
  color:var(--muted);
  font-size:10px;
  line-height:1.45
}
.profile-data-delete-card{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:center;
  gap:13px;
  padding:15px;
  border:2px solid var(--primary);
  border-radius:16px;
  background:var(--theme-pale);
  color:var(--pale-text,var(--text))
}
.profile-data-delete-card>span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--primary);
  color:var(--on-primary);
  font-size:25px;
  font-weight:900
}
.profile-data-delete-card p{
  margin:4px 0 0;
  color:var(--muted);
  line-height:1.45
}
.profile-delete-confirmation{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:9px!important;
  margin-top:14px;
  padding:11px;
  border:1px solid var(--theme-border);
  border-radius:12px;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text));
  text-transform:none!important
}
.profile-delete-confirmation input{
  width:18px;
  min-height:18px;
  margin-top:1px;
  box-shadow:none!important
}

/* =========================================================
   DETEKSI DUPLIKAT IMPOR
   ========================================================= */
.duplicate-check-result{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:11px;
  padding:12px;
  border:1px solid var(--theme-border);
  border-radius:13px
}
.duplicate-check-result>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-weight:900
}
.duplicate-check-result.safe{
  background:rgba(47,114,88,.10);
  border-color:#2f7258
}
.duplicate-check-result.safe>span{
  background:#2f7258;
  color:#fff
}
.duplicate-check-result.warning-result{
  background:rgba(182,138,69,.12);
  border-color:#b68a45
}
.duplicate-check-result.warning-result>span{
  background:#b68a45;
  color:#fff
}
.duplicate-check-result>div{
  display:grid;
  gap:2px
}
.duplicate-check-result small{
  color:var(--muted)
}
.duplicate-preview-list{
  max-height:220px;
  display:grid;
  gap:7px;
  overflow:auto;
  padding:10px;
  border:1px solid var(--theme-border);
  border-radius:13px;
  background:var(--panel);
  scrollbar-width:thin
}
.duplicate-preview-list>div{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:3px 8px;
  padding-bottom:7px;
  border-bottom:1px solid var(--theme-border)
}
.duplicate-preview-list>div>small{
  grid-column:2;
  color:var(--muted)
}
.duplicate-type{
  padding:3px 6px;
  border-radius:7px;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text));
  font-size:8px;
  font-weight:900
}
.duplicate-action-choice{
  display:grid;
  gap:9px;
  margin:0;
  padding:12px;
  border:1px solid var(--theme-border);
  border-radius:13px
}
.duplicate-action-choice legend{
  padding:0 6px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase
}
.duplicate-action-choice label{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:9px;
  padding:10px;
  border:1px solid var(--theme-border);
  border-radius:11px;
  background:var(--panel);
  text-transform:none
}
.duplicate-action-choice input{
  width:18px;
  min-height:18px;
  margin-top:1px;
  box-shadow:none!important
}
.duplicate-action-choice span{
  display:grid;
  gap:3px
}
.duplicate-action-choice small{
  color:var(--muted);
  line-height:1.4
}

/* =========================================================
   GRAFIK PERTUMBUHAN INVESTASI LAPORAN
   ========================================================= */
.investment-growth-report-card{
  grid-column:1/-1
}
.investment-growth-kpi{
  display:grid;
  justify-items:end;
  gap:3px;
  padding:8px 11px;
  border:1px solid #d9e0e8;
  background:#f3f5f8
}
.investment-growth-kpi small{
  color:#728094;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase
}
.investment-growth-kpi strong{
  color:#17243b;
  font-family:Georgia,"Times New Roman",serif
}
.investment-growth-line{
  fill:none;
  stroke:#755e9a;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round
}
.investment-growth-area{
  fill:url(#investmentGrowthGradient)
}
.investment-growth-gradient-start{
  stop-color:#755e9a;
  stop-opacity:.25
}
.investment-growth-gradient-end{
  stop-color:#755e9a;
  stop-opacity:.02
}
.investment-growth-point{
  fill:#fff;
  stroke:#755e9a;
  stroke-width:4
}
.investment-growth-value{
  fill:#755e9a;
  font-size:9px;
  font-weight:900
}

/* =========================================================
   PENCARIAN DATABASE RENCANA BELANJA
   ========================================================= */
.shopping-search-hint{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:9px;
  line-height:1.4
}
.shopping-search-results{
  margin-top:13px
}
.shopping-search-results.hidden,
.shopping-search-results:empty{
  display:none!important;
  margin:0!important
}
#shoppingDatabaseResults{
  min-height:0!important
}
.plan-history-search{
  margin-bottom:18px
}
.plan-history-search:has(
  .shopping-search-results.hidden
){
  padding-bottom:14px
}

/* =========================================================
   TRACKER TOTAL PENGELUARAN PER KATEGORI
   ========================================================= */
.expense-category-tracker-card{
  border-top:4px solid var(--primary)!important;
  overflow:hidden
}
.expense-category-total{
  min-width:210px;
  display:grid;
  justify-items:end;
  gap:3px;
  padding:11px 14px;
  border:1px solid var(--theme-border);
  border-radius:14px;
  background:var(--theme-pale);
  color:var(--pale-text,var(--text));
  text-align:right
}
.expense-category-total small{
  color:inherit;
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.72
}
.expense-category-total strong{
  color:inherit;
  font-size:20px
}
.expense-category-total span{
  color:inherit;
  font-size:9px;
  opacity:.72
}
.expense-category-top-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px
}
.expense-category-rank-card{
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:11px;
  padding:15px;
  border:1px solid var(--theme-border);
  border-radius:17px;
  background:var(--panel);
  color:var(--text);
  box-shadow:
    0 10px 24px
    rgba(var(--theme-rgb),.075);
  overflow:hidden
}
.expense-category-rank-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:var(--primary)
}
.expense-category-rank-card.rank-1::before{
  background:var(--accent)
}
.expense-category-rank-card.rank-2::before{
  background:#b68a45
}
.expense-category-rank-card.rank-3::before{
  background:#3f7d68
}
.expense-category-rank-card.rank-4::before{
  background:#755e9a
}
.expense-category-rank-card.rank-5::before{
  background:#b85c4b
}
.expense-category-rank{
  display:flex;
  align-items:flex-start;
  justify-content:center
}
.expense-category-rank span{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text));
  font-size:13px;
  font-weight:900
}
.expense-category-rank-card:first-child
.expense-category-rank span{
  background:var(--primary);
  color:var(--on-primary);
  box-shadow:
    0 6px 14px
    rgba(var(--theme-rgb),.18)
}
.expense-category-rank-content{
  min-width:0;
  display:grid;
  gap:10px
}
.expense-category-rank-content header{
  min-width:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px
}
.expense-category-rank-content header>div{
  min-width:0
}
.expense-category-rank-content small{
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase
}
.expense-category-rank-content h3{
  margin:3px 0 0;
  overflow:hidden;
  color:var(--text);
  font-size:13px;
  text-overflow:ellipsis;
  white-space:nowrap
}
.expense-category-rank-content header>strong{
  flex:0 0 auto;
  color:var(--text);
  font-size:14px;
  text-align:right
}
.expense-category-progress{
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:var(--theme-soft)
}
.expense-category-progress span{
  min-width:3px;
  height:100%;
  display:block;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    var(--primary),
    var(--accent)
  )
}
.expense-category-rank-card.rank-2
.expense-category-progress span{
  background:linear-gradient(
    90deg,
    #b68a45,
    #d3aa61
  )
}
.expense-category-rank-card.rank-3
.expense-category-progress span{
  background:linear-gradient(
    90deg,
    #3f7d68,
    #67a28d
  )
}
.expense-category-rank-card.rank-4
.expense-category-progress span{
  background:linear-gradient(
    90deg,
    #755e9a,
    #9b83c0
  )
}
.expense-category-rank-card.rank-5
.expense-category-progress span{
  background:linear-gradient(
    90deg,
    #b85c4b,
    #d78470
  )
}
.expense-category-rank-content footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:9px
}
.expense-category-rank-content footer b{
  color:var(--text)
}
.expense-category-show-all{
  display:flex;
  justify-content:center;
  margin-top:14px
}
.expense-category-modal-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:15px
}
.expense-category-modal-summary>div{
  display:grid;
  gap:5px;
  padding:13px;
  border:1px solid var(--theme-border);
  border-radius:13px;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.expense-category-modal-summary span{
  color:inherit;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.72
}
.expense-category-modal-summary strong{
  color:inherit;
  font-size:18px
}
.expense-category-all-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.expense-category-rank-card.compact{
  min-height:108px;
  padding:13px
}
.expense-category-rank-card.compact
.expense-category-rank-content h3{
  white-space:normal
}
@media(max-width:1050px){
  .expense-category-top-grid{
    grid-template-columns:1fr
  }
  .expense-category-rank-content h3{
    white-space:normal
  }
}
@media(max-width:760px){
  .expense-category-total{
    width:100%;
    min-width:0;
    justify-items:start;
    text-align:left
  }
  .expense-category-modal-summary,
  .expense-category-all-grid{
    grid-template-columns:1fr
  }
}

/* =========================================================
   RINCIAN TRACKER KATEGORI PENGELUARAN
   ========================================================= */
.expense-category-rank-card[
  data-expense-category-index
]{
  cursor:pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease
}
.expense-category-rank-card[
  data-expense-category-index
]:hover{
  transform:translateY(-3px);
  border-color:var(--primary);
  box-shadow:
    0 16px 30px
    rgba(var(--theme-rgb),.14)
}
.expense-category-rank-card[
  data-expense-category-index
]:focus-visible{
  outline:3px solid
    rgba(var(--theme-rgb),.22);
  outline-offset:3px;
  border-color:var(--primary)
}
.expense-category-open-hint{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:1px;
  padding-top:8px;
  border-top:1px dashed
    var(--theme-border);
  color:var(--muted);
  font-size:8.5px;
  font-weight:900
}
.expense-category-open-hint span{
  color:var(--primary);
  font-size:17px;
  line-height:1
}
.expense-category-detail-summary{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:15px
}
.expense-category-detail-summary>div{
  display:grid;
  gap:5px;
  padding:13px;
  border:1px solid var(--theme-border);
  border-radius:13px;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.expense-category-detail-summary span{
  color:inherit;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.72
}
.expense-category-detail-summary strong{
  color:inherit;
  font-size:18px
}
@media(max-width:760px){
  .expense-category-detail-summary{
    grid-template-columns:1fr
  }
}

/* =========================================================
   FILTER KECIL PEMASUKAN DAN PENGELUARAN
   ========================================================= */
.transaction-list-actions{
  align-items:flex-end!important
}
.compact-list-filter{
  min-width:190px;
  display:grid!important;
  gap:4px!important;
  color:var(--muted)!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.055em;
  text-transform:uppercase
}
.compact-list-filter select{
  min-height:36px!important;
  padding:6px 34px 6px 10px!important;
  border-radius:10px!important;
  font-size:10px!important;
  font-weight:800!important;
  text-transform:none
}
.compact-action-btn{
  min-height:36px!important;
  padding:7px 10px!important;
  font-size:9px!important
}
.transaction-time{
  color:var(--muted);
  font-size:8.5px;
  font-weight:800
}

/* =========================================================
   DETEKSI MUTASI ANTAR-SUMBER
   ========================================================= */
.mutation-detection-layout{
  display:grid;
  gap:14px
}
.mutation-info-card{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding:15px;
  border:2px solid var(--primary);
  border-radius:16px;
  background:var(--theme-pale);
  color:var(--pale-text,var(--text))
}
.mutation-info-card>span{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:var(--primary);
  color:var(--on-primary);
  font-size:28px;
  font-weight:900
}
.mutation-info-card strong{
  display:block;
  color:inherit
}
.mutation-info-card p{
  margin:5px 0 0;
  color:var(--muted);
  line-height:1.5
}
.mutation-search-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:10px
}
.mutation-search-form label{
  display:grid;
  gap:6px
}
.mutation-rule-note{
  display:grid;
  gap:4px;
  padding:10px 12px;
  border-left:4px solid var(--accent);
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.mutation-rule-note span{
  color:var(--muted);
  font-size:9px;
  line-height:1.45
}
.mutation-search-result{
  min-height:90px
}
.mutation-preview-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-bottom:12px
}
.mutation-preview-summary>div{
  display:grid;
  gap:4px;
  padding:11px;
  border:1px solid var(--theme-border);
  border-radius:12px;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.mutation-preview-summary span{
  color:inherit;
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  opacity:.72
}
.mutation-preview-summary strong{
  color:inherit;
  font-size:19px
}
.mutation-candidate-list{
  display:grid;
  gap:10px
}
.mutation-candidate-card{
  display:grid;
  grid-template-columns:minmax(210px,.8fr) minmax(230px,1fr);
  gap:10px 14px;
  padding:13px;
  border:1px solid var(--theme-border);
  border-radius:15px;
  background:var(--panel)
}
.mutation-candidate-card.matched{
  border-left:4px solid #2f7258
}
.mutation-candidate-card.unmatched{
  border-left:4px solid #b68a45
}
.mutation-candidate-check{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:9px!important;
  padding:10px;
  border:1px solid var(--theme-border);
  border-radius:12px;
  background:var(--theme-soft);
  text-transform:none!important
}
.mutation-candidate-check input{
  width:18px;
  min-height:18px;
  margin-top:2px;
  box-shadow:none!important
}
.mutation-candidate-check span{
  display:grid;
  gap:3px
}
.mutation-candidate-check small{
  color:var(--muted);
  font-size:9px
}
.mutation-expense-detail{
  display:grid;
  align-content:center;
  gap:3px;
  min-width:0
}
.mutation-expense-detail>span{
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase
}
.mutation-expense-detail strong{
  color:var(--text)
}
.mutation-expense-detail small{
  overflow:hidden;
  color:var(--muted);
  text-overflow:ellipsis;
  white-space:nowrap
}
.mutation-match-arrow{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:4px 0;
  color:#2f7258
}
.mutation-match-arrow span{
  font-size:19px;
  font-weight:900
}
.mutation-match-arrow b{
  font-size:9px;
  letter-spacing:.04em;
  text-transform:uppercase
}
.mutation-match-field{
  grid-column:1/-1;
  display:grid!important;
  grid-template-columns:170px minmax(0,1fr);
  align-items:center;
  gap:10px!important
}
.mutation-unmatched-reason{
  grid-column:1/-1;
  display:grid;
  gap:3px;
  padding:10px;
  border:1px dashed #b68a45;
  border-radius:11px;
  background:rgba(182,138,69,.10)
}
.mutation-unmatched-reason strong{
  color:#8a641f
}
.mutation-unmatched-reason span{
  color:var(--muted);
  font-size:9px;
  line-height:1.45
}
.mutation-history-badge{
  display:inline-flex;
  margin-bottom:3px;
  padding:3px 6px;
  border:1px solid #2f7258;
  border-radius:999px;
  background:rgba(47,114,88,.1);
  color:#2f7258;
  font-size:8px;
  font-weight:900;
  letter-spacing:.03em
}
@media(max-width:820px){
  .transaction-list-actions{
    width:100%;
    align-items:stretch!important
  }
  .compact-list-filter{
    width:100%
  }
  .mutation-search-form{
    grid-template-columns:1fr
  }
  .mutation-preview-summary{
    grid-template-columns:1fr
  }
  .mutation-candidate-card{
    grid-template-columns:1fr
  }
  .mutation-match-field{
    grid-template-columns:1fr
  }
}

/* =========================================================
   DETEKSI MUTASI V2 — LIST BERDAMPINGAN & DRAG DROP
   ========================================================= */
.mutation-side-by-side{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.mutation-search-column{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--theme-border);
  border-radius:16px;
  background:var(--panel)
}
.mutation-search-column>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px;
  border-bottom:1px solid var(--theme-border);
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.mutation-search-column>header>div{
  display:flex;
  align-items:center;
  gap:10px
}
.mutation-search-column>header>div>span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--primary);
  color:var(--on-primary);
  font-weight:900
}
.mutation-search-column.income>header>div>span{
  background:#2f7258;
  color:#fff
}
.mutation-search-column h3,
.mutation-search-column p{
  margin:0
}
.mutation-search-column h3{
  font-size:13px
}
.mutation-search-column p{
  margin-top:2px;
  color:var(--muted);
  font-size:8.5px
}
.compact-text-button{
  min-height:30px!important;
  padding:5px 8px!important;
  border:1px solid var(--theme-border)!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  font-size:8px!important
}
.mutation-search-list{
  max-height:390px;
  display:grid;
  gap:8px;
  overflow:auto;
  padding:10px;
  scrollbar-width:thin
}
.mutation-search-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:9px;
  padding:11px;
  border:1px solid var(--theme-border);
  border-radius:12px;
  background:var(--panel);
  transition:
    border-color .15s ease,
    background .15s ease
}
.mutation-search-card.expense{
  border-left:4px solid #a64d43
}
.mutation-search-card.income{
  border-left:4px solid #2f7258
}
.mutation-search-card:has(
  input:checked
){
  border-color:var(--primary);
  background:var(--theme-pale)
}
.mutation-search-check{
  display:block!important;
  padding:0!important
}
.mutation-search-check input{
  width:18px;
  min-height:18px;
  box-shadow:none!important
}
.mutation-search-card-body{
  min-width:0;
  display:grid;
  gap:4px
}
.mutation-search-card-body header{
  display:flex;
  justify-content:space-between;
  gap:8px
}
.mutation-search-card-body header span{
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase
}
.mutation-search-card-body header strong{
  color:var(--text);
  white-space:nowrap
}
.mutation-search-card-body h4,
.mutation-search-card-body p{
  margin:0
}
.mutation-search-card-body h4{
  color:var(--text);
  font-size:10.5px
}
.mutation-search-card-body p{
  overflow:hidden;
  color:var(--muted);
  font-size:8.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}
.mutation-search-card-body footer{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding-top:5px;
  border-top:1px dashed var(--theme-border);
  color:var(--muted);
  font-size:8px
}
.mutation-search-card-body footer b{
  color:var(--text);
  text-align:right
}
.mutation-selection-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid var(--theme-border);
  border-radius:13px;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.mutation-selection-actions>span{
  color:var(--muted);
  font-size:9px
}
.mutation-pairing-area{
  display:grid;
  gap:12px;
  padding-top:4px
}
.mutation-pairing-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:13px;
  border-radius:14px;
  background:var(--primary);
  color:var(--on-primary)
}
.mutation-pairing-header>div:first-child{
  display:flex;
  align-items:center;
  gap:11px
}
.mutation-pairing-header>div:first-child>span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid currentColor;
  border-radius:10px;
  font-weight:900
}
.mutation-pairing-header h3,
.mutation-pairing-header p{
  margin:0;
  color:inherit
}
.mutation-pairing-header p{
  margin-top:3px;
  max-width:720px;
  font-size:8.5px;
  opacity:.76
}
.mutation-pairing-kpi{
  flex:0 0 auto;
  display:grid;
  justify-items:end;
  gap:2px
}
.mutation-pairing-kpi small{
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  opacity:.72
}
.mutation-pairing-kpi strong{
  font-size:21px
}
.mutation-pairing-kpi span{
  font-size:9px
}
.mutation-pair-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.35fr);
  gap:13px;
  align-items:start
}
.mutation-pair-rows{
  display:grid;
  gap:9px
}
.mutation-pair-row{
  display:grid;
  grid-template-columns:minmax(210px,1fr) 34px minmax(240px,1fr);
  align-items:stretch;
  gap:8px;
  padding:10px;
  border:1px solid var(--theme-border);
  border-radius:14px;
  background:var(--panel);
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease
}
.mutation-pair-row.paired{
  border-left:4px solid #2f7258
}
.mutation-pair-row.unpaired{
  border-left:4px solid #b68a45
}
.mutation-pair-row.drag-over{
  transform:scale(1.01);
  border-color:var(--primary);
  box-shadow:
    0 0 0 4px
    rgba(var(--theme-rgb),.14)
}
.mutation-pair-expense{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:10px;
  border-radius:11px;
  background:rgba(166,77,67,.08)
}
.mutation-pair-number{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#a64d43;
  color:#fff;
  font-weight:900
}
.mutation-pair-expense header,
.mutation-drag-income-card header{
  display:flex;
  justify-content:space-between;
  gap:8px
}
.mutation-pair-expense header span,
.mutation-drag-income-card header span{
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  text-transform:uppercase
}
.mutation-pair-expense h4,
.mutation-pair-expense p,
.mutation-drag-income-card h4,
.mutation-drag-income-card p{
  margin:3px 0 0
}
.mutation-pair-expense h4,
.mutation-drag-income-card h4{
  color:var(--text);
  font-size:10px
}
.mutation-pair-expense p,
.mutation-drag-income-card p{
  color:var(--muted);
  font-size:8px
}
.mutation-pair-link{
  display:grid;
  place-items:center;
  color:var(--primary);
  font-size:22px;
  font-weight:900
}
.mutation-pair-drop-slot{
  min-width:0;
  display:grid;
  gap:5px
}
.mutation-empty-drop{
  min-height:90px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  border:2px dashed var(--theme-border);
  border-radius:11px;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text));
  text-align:center
}
.mutation-empty-drop>span{
  font-size:20px
}
.mutation-empty-drop small{
  color:var(--muted)
}
.mutation-drag-income-card{
  min-width:0;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:9px;
  border:1px solid #2f7258;
  border-radius:11px;
  background:rgba(47,114,88,.08);
  cursor:grab
}
.mutation-drag-income-card.dragging{
  opacity:.42;
  cursor:grabbing
}
.mutation-drag-handle{
  display:grid;
  place-items:center;
  color:#2f7258
}
.mutation-drag-handle>span{
  font-size:20px;
  line-height:1
}
.mutation-drag-handle small{
  font-size:7px;
  font-weight:900;
  text-transform:uppercase
}
.mutation-paired-status,
.mutation-unpaired-status{
  display:inline-flex;
  width:max-content;
  margin-top:4px;
  padding:3px 6px;
  border-radius:999px;
  font-size:7.5px;
  font-weight:900
}
.mutation-paired-status{
  background:#2f7258;
  color:#fff
}
.mutation-unpaired-status{
  background:var(--theme-soft);
  color:var(--muted)
}
.mutation-unpair-button{
  min-height:28px!important;
  padding:4px 7px!important;
  border-color:transparent!important;
  background:transparent!important;
  color:#a64d43!important;
  font-size:8px!important;
  box-shadow:none!important
}
.mutation-income-bank{
  position:sticky;
  top:10px;
  overflow:hidden;
  border:1px solid var(--theme-border);
  border-radius:14px;
  background:var(--panel)
}
.mutation-income-bank>header{
  padding:11px;
  background:var(--theme-soft);
  color:var(--soft-text,var(--text))
}
.mutation-income-bank h3,
.mutation-income-bank p{
  margin:0
}
.mutation-income-bank h3{
  font-size:11px
}
.mutation-income-bank p{
  margin-top:2px;
  color:var(--muted);
  font-size:8px
}
.mutation-income-bank-list{
  max-height:500px;
  display:grid;
  gap:7px;
  overflow:auto;
  padding:9px;
  scrollbar-width:thin
}
.mutation-pair-warning{
  display:grid;
  gap:3px;
  padding:10px 12px;
  border:1px solid #b68a45;
  border-radius:11px;
  background:rgba(182,138,69,.09)
}
.mutation-pair-warning strong{
  color:#8a641f
}
.mutation-pair-warning span{
  color:var(--muted);
  font-size:8.5px
}
@media(max-width:1050px){
  .mutation-pair-workspace{
    grid-template-columns:1fr
  }
  .mutation-income-bank{
    position:static
  }
  .mutation-income-bank-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-height:340px
  }
}
@media(max-width:820px){
  .mutation-side-by-side{
    grid-template-columns:1fr
  }
  .mutation-pair-row{
    grid-template-columns:1fr
  }
  .mutation-pair-link{
    transform:rotate(90deg)
  }
  .mutation-pairing-header,
  .mutation-selection-actions{
    align-items:stretch;
    flex-direction:column
  }
  .mutation-pairing-kpi{
    justify-items:start
  }
}
@media(max-width:560px){
  .mutation-income-bank-list{
    grid-template-columns:1fr
  }
}