/* ===== xPMO DASHBOARD THEME ===== */
#sec-d .dash-wrap{background:transparent;border-radius:0;padding:0;overflow:visible;margin:0}
#sec-d .dash-header{background:rgba(20,22,39,0.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.05);padding:18px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;border-radius:16px;margin-bottom:16px}
#sec-d .dash-header .dh-left{display:flex;align-items:center;gap:16px}
#sec-d .dash-header .dh-greet h2{font-size:18px;font-weight:700;color:var(--tx);margin:0;letter-spacing:-0.02em}
#sec-d .dash-header .dh-greet p{font-size:12px;color:var(--tx3);margin:2px 0 0;font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif;letter-spacing:.04em}
#sec-d .dash-header .dh-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#sec-d .dash-header .dh-nav-btn{background:rgba(28,31,53,0.6);border:1px solid rgba(255,255,255,0.06);border-radius:20px;padding:7px 14px;font-size:12px;color:var(--tx2);cursor:pointer;font-weight:500;display:flex;align-items:center;gap:5px;font-family:inherit;transition:all .2s}
#sec-d .dash-header .dh-nav-btn:hover{border-color:rgba(167,139,250,0.3);color:var(--pu)}
#sec-d .dash-header .dh-nav-btn.active{background:rgba(167,139,250,0.12);border-color:rgba(167,139,250,0.3);color:var(--pu)}
#sec-d .dash-month-bar{display:flex;gap:12px;padding:14px 20px;background:rgba(20,22,39,0.5);border:1px solid rgba(255,255,255,0.05);border-radius:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
#sec-d .dash-month-bar .dm-sel{flex:1;min-width:120px;display:flex;align-items:center;gap:8px}
#sec-d .dash-month-bar .dm-sel label{font-size:11px;color:var(--tx3);font-weight:600;white-space:nowrap;font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif;letter-spacing:.06em;text-transform:uppercase}
#sec-d .dash-month-bar .dm-sel select{background:rgba(28,31,53,0.8);border:1px solid var(--bd);border-radius:8px;padding:7px 28px 7px 12px;font-size:13px;color:var(--tx);font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239498b8' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6.5 6.5-6.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:border-color .2s}
#sec-d .dash-month-bar .dm-sel select:focus{border-color:var(--pu)}
#sec-d .dash-month-bar .dm-sel select option{background:var(--bg2);color:var(--tx)}
#sec-d .dash-month-bar .dm-warn{background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.15);border-radius:8px;padding:6px 14px;font-size:11px;color:var(--am);display:flex;align-items:center;gap:6px}
#sec-d .dash-body{padding:0}
#sec-d .dash-sum-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;align-items:stretch}
#sec-d .ds-card{border-radius:12px;padding:16px 18px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.05);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;cursor:default;height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}
#sec-d .ds-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 40px rgba(0,0,0,0.4),0 0 30px var(--card-glow,rgba(167,139,250,0.08));border-color:var(--card-glow-border,rgba(255,255,255,0.1))}
#sec-d .ds-card.green:hover{--card-glow:rgba(74,222,128,0.12);--card-glow-border:rgba(74,222,128,0.25)}
#sec-d .ds-card.red:hover{--card-glow:rgba(248,113,113,0.12);--card-glow-border:rgba(248,113,113,0.25)}
#sec-d .ds-card.blue:hover{--card-glow:rgba(96,165,250,0.12);--card-glow-border:rgba(96,165,250,0.25)}
#sec-d .ds-card.purple:hover{--card-glow:rgba(167,139,250,0.12);--card-glow-border:rgba(167,139,250,0.25)}
#sec-d .ds-card.amber:hover{--card-glow:rgba(251,191,36,0.12);--card-glow-border:rgba(251,191,36,0.25)}
#sec-d .ds-card.teal:hover{--card-glow:rgba(45,212,191,0.12);--card-glow-border:rgba(45,212,191,0.25)}
#sec-d .ds-card.rose:hover{--card-glow:rgba(251,113,133,0.12);--card-glow-border:rgba(251,113,133,0.25)}
#sec-d .ds-card.dark:hover{--card-glow:rgba(148,152,184,0.08);--card-glow-border:rgba(148,152,184,0.2)}
/* Floating particles */
@keyframes floatUp{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:.6}90%{opacity:.3}100%{transform:translateY(-80px) scale(0.3);opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
.ds-card .particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:12px}
.ds-card .particles span{position:absolute;bottom:-6px;width:var(--sz,5px);height:var(--sz,5px);border-radius:50%;background:var(--pc,rgba(167,139,250,0.3));animation:floatUp var(--dur,3s) var(--del,0s) infinite ease-out;opacity:0}
.ds-card.green .particles span{--pc:rgba(74,222,128,0.35)}
.ds-card.red .particles span{--pc:rgba(248,113,113,0.35)}
.ds-card.blue .particles span{--pc:rgba(96,165,250,0.35)}
.ds-card.purple .particles span{--pc:rgba(167,139,250,0.35)}
.ds-card.amber .particles span{--pc:rgba(251,191,36,0.35)}
.ds-card.teal .particles span{--pc:rgba(45,212,191,0.35)}
.ds-card.rose .particles span{--pc:rgba(251,113,133,0.35)}
.ds-card.dark .particles span{--pc:rgba(148,152,184,0.25)}
#sec-d .ds-card .ds-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;opacity:.8;font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif;position:relative;z-index:1}
#sec-d .ds-card .ds-val{font-size:18px;font-weight:800;font-variant-numeric:lining-nums;letter-spacing:-0.02em;position:relative;z-index:1}
#sec-d .ds-card .ds-sub{font-size:11px;margin-top:5px;opacity:.6;position:relative;z-index:1}
#sec-d .ds-card.green{background:linear-gradient(135deg,rgba(74,222,128,0.12),rgba(34,197,94,0.06));color:var(--gn);border-color:rgba(74,222,128,0.1)}
#sec-d .ds-card.red{background:linear-gradient(135deg,rgba(248,113,113,0.12),rgba(239,68,68,0.06));color:var(--rd);border-color:rgba(248,113,113,0.1)}
#sec-d .ds-card.blue{background:linear-gradient(135deg,rgba(96,165,250,0.12),rgba(59,130,246,0.06));color:var(--bl);border-color:rgba(96,165,250,0.1)}
#sec-d .ds-card.purple{background:linear-gradient(135deg,rgba(167,139,250,0.12),rgba(139,92,246,0.06));color:var(--pu);border-color:rgba(167,139,250,0.1)}
#sec-d .ds-card.amber{background:linear-gradient(135deg,rgba(251,191,36,0.12),rgba(245,158,11,0.06));color:var(--am);border-color:rgba(251,191,36,0.1)}
#sec-d .ds-card.dark{background:linear-gradient(135deg,rgba(148,152,184,0.08),rgba(92,96,128,0.04));color:var(--tx2);border-color:rgba(148,152,184,0.08)}
#sec-d .ds-card.teal{background:linear-gradient(135deg,rgba(167,139,250,0.15),rgba(96,165,250,0.1));color:#c4b5fd;border-color:rgba(167,139,250,0.15)}
#sec-d .ds-card.rose{background:linear-gradient(135deg,rgba(248,113,113,0.12),rgba(239,68,68,0.06));color:var(--rd);border-color:rgba(248,113,113,0.1)}
/* ===== DASHBOARD CHARTS ROW — Proportional, Symmetric, Responsive ===== */
#sec-d .dash-charts-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:16px;
  align-items:stretch;
}
#sec-d .dc-card{
  background:rgba(20,22,39,0.75);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  padding:16px;
  transition:border-color .2s, box-shadow .2s;
  overflow:hidden;
  min-width:0;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
#sec-d .dc-card:hover{
  border-color:rgba(167,139,250,0.15);
  box-shadow:0 4px 20px rgba(167,139,250,0.06);
}
#sec-d .dc-card .dc-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--tx3);
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex-shrink:0;
}
#sec-d .dash-tabinv{margin-bottom:14px}
#sec-d .dash-tabinv .dt5-header{background:rgba(20,22,39,0.6);border:1px solid rgba(255,255,255,0.05);border-bottom:none;color:var(--tx);border-radius:14px 14px 0 0;padding:10px 16px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif}
.tabinv-toggle-btn{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:6px;cursor:pointer;color:var(--tx3);background:transparent;border:1px solid transparent;transition:all .2s;user-select:none}
.tabinv-toggle-btn:hover{color:var(--tx2);background:rgba(255,255,255,0.05)}
.tabinv-toggle-btn.active{color:var(--pu);background:rgba(167,139,250,0.1);border-color:rgba(167,139,250,0.2)}
#sec-d .dash-tabinv .dt5-body{background:rgba(20,22,39,0.5);border:1px solid rgba(255,255,255,0.05);border-top:none;border-radius:0 0 14px 14px;padding:16px 20px;overflow:hidden}
#sec-d .tabinv-grid{display:none}
#sec-d .dash-detail-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;align-items:stretch}
#sec-d .dd-card{background:rgba(20,22,39,0.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.05);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .25s,opacity .2s}
#sec-d .dd-card:hover{border-color:rgba(167,139,250,0.1)}
#sec-d .dd-card .dd-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);padding:16px 18px 12px;border-bottom:1px solid rgba(255,255,255,0.05);font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif;transition:background .15s ease}
#sec-d .dd-card .dd-body{padding:10px 18px 16px;overflow-x:auto}
/* Drag handle hover state */
#sec-d .dash-drag-handle:hover{background:rgba(167,139,250,0.05)}
#sec-d .dash-drag-handle:active{cursor:grabbing!important}
/* Drag card states */
#sec-d .drag-card.drag-over{border:2px dashed rgba(167,139,250,0.35)!important;border-radius:14px}
#sec-d .dc-card.drag-card{transition:border-color .2s,opacity .2s,box-shadow .25s}
/* Canvas fills its wrapper */
#sec-d #d-exp-chart-wrap canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}
/* Donut canvas: proportional height, no overflow */
#sec-d .dc-card > div[style*="height:160px"]{
  flex-shrink:0;
  width:100%;
  max-width:100%;
}
/* Pie/donut legend: aligned, readable */
#sec-d #d-pie-leg,
#sec-d #d-inc-pie-leg{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  width:100%;
  margin-top:10px;
}
#sec-d #d-pie-leg > div,
#sec-d #d-inc-pie-leg > div{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:4px 0!important;
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
/* Nominal align right, no wrapping */
#sec-d #d-pie-leg > div span:last-child,
#sec-d #d-inc-pie-leg > div span:last-child{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  margin-left:auto;
}
/* Income progress bars: consistent spacing */
#sec-d #d-inc-progress > div{
  margin-bottom:10px;
}
#sec-d #d-inc-progress > div:last-child{
  margin-bottom:0;
}
/* ===== DETAIL BUDGET DASHBOARD — identik dengan tabel Budget ===== */
#sec-d .dd-tbl{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
  min-width:480px;
}
/* Header: identik Budget */
#sec-d .dd-tbl th{
  text-align:left;
  font-size:9px;
  color:var(--tx3);
  padding:10px 12px;
  border-bottom:1px solid var(--bd);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  white-space:nowrap;
  font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif;
  background:var(--bg3);
  position:sticky;
  top:0;
  z-index:5;
}
#sec-d .dd-tbl th:not(:first-child){text-align:right;}
/* Cells: identik Budget */
#sec-d .dd-tbl td{
  padding:7px 12px;
  border-bottom:0.5px solid rgba(255,255,255,0.04);
  color:var(--tx);
  font-family:-apple-system,'Inter','Roboto','Segoe UI',sans-serif;
}
#sec-d .dd-tbl tr:last-child td{border-bottom:none}
#sec-d .dd-tbl .mn{font-variant-numeric:lining-nums;white-space:nowrap}
/* Section headers */
#sec-d .dd-tbl .row-inc{background:rgba(74,222,128,0.06)}
#sec-d .dd-tbl .row-exp{background:rgba(248,113,113,0.06)}
/* Category rows: left border accent like Budget */
#sec-d .dd-tbl tr[style*="border-left"]:hover td,
#sec-d .dd-tbl tr.yr-cat-row:hover td{
  background:var(--tbl-hover)!important;
}
/* Progress column alignment */
#sec-d .dd-tbl td:last-child{min-width:90px;}
/* Drag indicator */
#sec-d .dd-card .dd-body{
  padding:10px 16px 14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
#sec-d .dd-acc-item{display:flex;align-items:center;justify-content:space-between;padding:9px 6px;border-bottom:1px solid rgba(255,255,255,0.04);gap:16px}
#sec-d .dd-acc-item:last-child{border-bottom:none}
#sec-d .dd-acc-item .dd-acc-name{font-size:12px;font-weight:600;color:var(--tx);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sec-d .dd-acc-item .dd-acc-type{font-size:10px;color:var(--tx3)}
#sec-d .dd-acc-item .dd-acc-val{font-size:13px;font-weight:700;color:var(--pu);font-variant-numeric:normal;flex-shrink:0;white-space:nowrap;padding-left:8px}
#sec-d .dd-acc-item .dd-acc-val.red{color:var(--rd)}
#sec-d .dd-debt-item{padding:8px 4px;border-bottom:1px solid rgba(255,255,255,0.04)}
#sec-d .dd-debt-item:last-child{border-bottom:none}
#sec-d .dd-debt-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;gap:12px}
#sec-d .dd-debt-name{font-size:12px;font-weight:600;color:var(--tx);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sec-d .dd-debt-val{font-size:13px;font-weight:700;color:var(--rd);font-variant-numeric:normal;flex-shrink:0;white-space:nowrap;padding-left:8px}
#sec-d .dd-debt-bar{height:4px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden}
#sec-d .dd-debt-fill{height:100%;border-radius:2px}
#sec-d .dd-debt-sub{font-size:10px;color:var(--tx3);margin-top:3px}
#sec-d .dd-badge{display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:700}
#sec-d .dd-badge.cc{background:rgba(251,191,36,0.1);color:var(--am)}
#sec-d .dd-badge.ht{background:rgba(248,113,113,0.1);color:var(--rd)}
@media(max-width:1200px){#sec-d .dash-charts-row{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:1000px){
  #sec-d .dash-charts-row{grid-template-columns:1fr 1fr}
  #sec-d .dash-detail-row{grid-template-columns:1fr}
  #sec-d .dash-sum-row{grid-template-columns:repeat(2,1fr)}
  #sec-d .tabinv-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  /* charts stay 2-col on mobile — overridden to 1col at 440px by end-of-file rules */
  #sec-d .dash-sum-row{grid-template-columns:repeat(2,1fr)}
  #sec-d .tabinv-grid{grid-template-columns:1fr}
  #sec-d .dd-tbl{font-size:10px}
  #sec-d .dd-tbl td,#sec-d .dd-tbl th{padding:6px 4px}
  .g2,.g3{grid-template-columns:1fr 1fr}
  .mrow,.mrow3{grid-template-columns:1fr 1fr}
}
@media(max-width:540px){
  #sec-d .dash-sum-row{grid-template-columns:repeat(2,1fr)}
  #sec-d .tabinv-grid{grid-template-columns:1fr}
  #sec-d .dd-card .dd-body{overflow-x:auto}
  #sec-d .dd-tbl{min-width:480px}
}
@media(max-width:440px){
  #sec-d .dash-sum-row{grid-template-columns:repeat(2,1fr)}
  /* mrow stays 2-col — handled at end of file */
}
/* Pagination */
.pg-btn{background:rgba(28,31,53,0.6);border:1px solid var(--bd);border-radius:6px;padding:5px 10px;font-size:12px;color:var(--tx2);cursor:pointer;font-family:inherit;transition:all .2s}
.pg-btn:hover{border-color:var(--pu);color:var(--pu)}
.pg-btn:disabled{opacity:.3;cursor:not-allowed}
.pg-btn.pg-active{background:var(--pu);color:#fff;border-color:var(--pu)}
.pg-size{background:rgba(28,31,53,0.8);border:1px solid var(--bd);border-radius:6px;padding:4px 8px;font-size:12px;color:var(--tx2);font-family:inherit;margin-left:8px}
/* Budget Editor */
.bgt-edit-row:hover{border-color:rgba(167,139,250,0.15)!important}
.bgt-input:focus{border-color:var(--pu)!important;box-shadow:0 0 0 2px rgba(167,139,250,0.1)}
/* Budget Monthly Editor */
.bgt-cat-hdr:hover{background:rgba(167,139,250,0.04)!important}
.bgt-m-input:focus{border-color:var(--pu)!important;box-shadow:0 0 0 2px rgba(167,139,250,0.12)}
/* Drag & Drop */
.bgt-drag-row{transition:opacity .15s;border-top:2px solid transparent;border-bottom:2px solid transparent}
.bgt-drag-row:hover .drag-grip{color:var(--pu)!important}
.bgt-drag-row:active{cursor:grabbing!important}
.drag-grip{transition:color .15s}
.bgt-drop-zone td{transition:box-shadow .15s}

/* Custom scrollbars — dark navy theme */
*{scrollbar-width:thin;scrollbar-color:rgba(167,139,250,0.25) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(167,139,250,0.25);border-radius:3px}
*::-webkit-scrollbar-thumb:hover{background:rgba(167,139,250,0.45)}
*::-webkit-scrollbar-corner{background:transparent}
/* Slightly wider for main body scroll */
body::-webkit-scrollbar{width:8px}
body::-webkit-scrollbar-track{background:rgba(12,14,26,0.5)}
body::-webkit-scrollbar-thumb{background:rgba(167,139,250,0.3);border-radius:4px}
body::-webkit-scrollbar-thumb:hover{background:rgba(167,139,250,0.5)}
/* Tables and overflow containers */
.dd-body::-webkit-scrollbar,.tl::-webkit-scrollbar,[style*="overflow"]::-webkit-scrollbar{width:5px;height:5px}
.dd-body::-webkit-scrollbar-thumb,.tl::-webkit-scrollbar-thumb,[style*="overflow"]::-webkit-scrollbar-thumb{background:rgba(167,139,250,0.2);border-radius:3px}
.dd-body::-webkit-scrollbar-thumb:hover,.tl::-webkit-scrollbar-thumb:hover,[style*="overflow"]::-webkit-scrollbar-thumb:hover{background:rgba(167,139,250,0.4)}

/* Input sub-tabs */
.in-stab{background:transparent;color:var(--tx3)}
.in-stab:hover{background:rgba(167,139,250,0.06);color:var(--tx2)}
.in-stab.active{background:rgba(167,139,250,0.15);color:var(--pu);box-shadow:0 2px 8px rgba(167,139,250,0.1)}

/* Drag-to-move cards */
.drag-card{transition:opacity .2s,border-color .2s,transform .15s}
.drag-card[draggable="true"]:hover{border-color:rgba(167,139,250,0.15)}
.drag-over{border:2px dashed rgba(167,139,250,0.4) !important;background:rgba(167,139,250,0.03) !important}

/* Settings tabs */
.stab{background:transparent;color:var(--tx3)}
.stab:hover{background:rgba(167,139,250,0.06);color:var(--tx2)}
.stab.active{background:rgba(167,139,250,0.15);color:var(--pu);box-shadow:0 2px 8px rgba(167,139,250,0.1)}